Skip to content

B
bootstrap
Commit 2398245e authored by Mark Otto's avatar Mark Otto
Browse files
Options

Remove all old responsive styles since we're motherfucking mobile first son

parent 687d4a3e
Hide whitespace changes
Inline Side-by-side
Showing with 47 additions and 406 deletions
docs/assets/css/bootstrap.css
View file @ 2398245e
......@@ -4630,28 +4630,57 @@ a.badge:hover {
position: fixed;
}
/*
// Responsive
// -------------------------------------------------------------
// Responsive utility classes
@import "responsive-utilities.less";
@-ms-viewport {
width: device-width;
}
.hidden {
display: none;
visibility: hidden;
}
// Media queries
// ------------------
.visible-phone {
display: none !important;
}
// Large desktops
@import "responsive-1200px-min.less";
.visible-tablet {
display: none !important;
}
// Tablets to regular desktops
@import "responsive-768px-979px.less";
.hidden-desktop {
display: none !important;
}
// Phones to portrait tablets and narrow desktops
@import "responsive-767px-max.less";
.visible-desktop {
display: inherit !important;
}
@media (min-width: 768px) and (max-width: 979px) {
.hidden-desktop {
display: inherit !important;
}
.visible-desktop {
display: none !important ;
}
.visible-tablet {
display: inherit !important;
}
.hidden-tablet {
display: none !important;
}
}
// Responsive navbar
// From 979px and below, show a button to toggle navbar contents
@import "responsive-navbar.less";
*/
@media (max-width: 767px) {
.hidden-desktop {
display: inherit !important;
}
.visible-desktop {
display: none !important;
}
.visible-phone {
display: inherit !important;
}
.hidden-phone {
display: none !important;
}
}
less/bootstrap.less
View file @ 2398245e
......@@ -57,31 +57,4 @@
// Utility classes
@import "utilities.less"; // Has to be last to override when necessary
/*
// Responsive
// -------------------------------------------------------------
// Responsive utility classes
@import "responsive-utilities.less";
// Media queries
// ------------------
// Large desktops
@import "responsive-1200px-min.less";
// Tablets to regular desktops
@import "responsive-768px-979px.less";
// Phones to portrait tablets and narrow desktops
@import "responsive-767px-max.less";
// Responsive navbar
// From 979px and below, show a button to toggle navbar contents
@import "responsive-navbar.less";
*/
\ No newline at end of file
less/responsive-1200px-min.less deleted 100644 → 0
View file @ 687d4a3e
//
// Responsive: Large desktop and up
// --------------------------------------------------
@media (min-width: 1200px) {
// Set the container width, and override it for fixed navbars in media queries
.container {
max-width: 1170px;
}
// Fixed grid
#grid > .core(@grid-column-width-1200, @grid-gutter-width-1200, @grid-row-width-1200);
// #grid > .input(@grid-column-width-1200, @grid-gutter-width-1200, @grid-row-width-1200);
}
less/responsive-767px-max.less deleted 100644 → 0
View file @ 687d4a3e
//
// Responsive: Landscape phone to desktop/tablet
// --------------------------------------------------
@media (max-width: 767px) {
// TYPOGRAPHY
// ----------
// Reset horizontal dl
.dl-horizontal {
dt {
float: none;
clear: none;
width: auto;
text-align: left;
}
dd {
margin-left: 0;
}
}
// GRID & CONTAINERS
// -----------------
// Remove width from containers
.container {
width: auto;
}
// Make all grid-sized elements block level again
[class*="span"],
// Makes uneditable inputs full-width when using grid sizing
.uneditable-input[class*="span"] {
float: none;
display: block;
width: 100%;
margin-left: 0;
}
// FORM FIELDS
// -----------
// Make span* classes full width
input[class*="span"],
select[class*="span"],
textarea[class*="span"],
.uneditable-input {
width: 100%;
}
// But don't let it screw up prepend/append inputs
.input-prepend input,
.input-append input,
.input-prepend input[class*="span"],
.input-append input[class*="span"] {
display: inline-block; // redeclare so they don't wrap to new lines
width: auto;
}
// Modals
.modal {
position: fixed;
top: 20px;
left: 20px;
right: 20px;
width: auto;
margin: 0;
&.fade { top: -100px; }
&.fade.in { top: 20px; }
}
}
// UP TO LANDSCAPE PHONE
// ---------------------
@media (max-width: 480px) {
// Smooth out the collapsing/expanding nav
.nav-collapse {
// -webkit-transform: translate3d(0, 0, 0); // activate the GPU
}
// Block level the page header small tag for readability
.page-header h1 small {
display: block;
line-height: @line-height-base;
}
// Update checkboxes for iOS
input[type="checkbox"],
input[type="radio"] {
border: 1px solid #ccc;
}
// Remove the horizontal form styles
.form-horizontal {
.control-label {
float: none;
width: auto;
padding-top: 0;
text-align: left;
}
// Move over all input controls and content
.controls {
margin-left: 0;
}
// Move the options list down to align with labels
.control-list {
padding-top: 0; // has to be padding because margin collaspes
}
// Move over buttons in .form-actions to align with .controls
.form-actions {
padding-left: 10px;
padding-right: 10px;
}
}
// Medias
// Reset float and spacing to stack
.media .pull-left,
.media .pull-right {
float: none;
display: block;
margin-bottom: 10px;
}
// Remove side margins since we stack instead of indent
.media-object {
margin-right: 0;
margin-left: 0;
}
// Modals
.modal {
top: 10px;
left: 10px;
right: 10px;
}
.modal-header .close {
padding: 10px;
margin: -10px;
}
// Carousel
.carousel-caption {
position: static;
}
}
less/responsive-768px-979px.less deleted 100644 → 0
View file @ 687d4a3e
//
// Responsive: Tablet to desktop
// --------------------------------------------------
@media (min-width: 768px) and (max-width: 979px) {
// Fixed grid
#grid > .core(@grid-column-width-768, @grid-gutter-width-768, @grid-row-width-768);
}
less/responsive-navbar.less deleted 100644 → 0
View file @ 687d4a3e
//
// Responsive: Navbar
// --------------------------------------------------
// TABLETS AND BELOW
// -----------------
@media (max-width: @navbar-collapse-width) {
// UNFIX THE TOPBAR
// ----------------
// Remove any padding from the body
body {
padding-top: 0;
}
// Unfix the navbars
.navbar-fixed-top,
.navbar-fixed-bottom {
position: static;
}
.navbar-fixed-top {
margin-bottom: @line-height-base;
}
.navbar-fixed-bottom {
margin-top: @line-height-base;
}
.navbar-fixed-top,
.navbar-fixed-bottom {
padding: 5px;
}
.navbar .container {
width: auto;
padding: 0;
}
// Account for brand name
.navbar .brand {
padding-left: 10px;
padding-right: 10px;
margin: 0 0 0 -5px;
}
// COLLAPSIBLE NAVBAR
// ------------------
// Nav collapse clears brand
.nav-collapse {
clear: both;
}
// Block-level the nav
.nav-collapse .nav {
float: none;
margin: 0 0 (@line-height-base / 2);
}
.nav-collapse .nav > li {
float: none;
}
.nav-collapse .nav > li > a {
margin-bottom: 2px;
}
.nav-collapse .nav > .divider-vertical {
display: none;
}
.nav-collapse .nav .nav-header {
color: @navbar-text;
text-shadow: none;
}
// Nav and dropdown links in navbar
.nav-collapse .nav > li > a,
.nav-collapse .dropdown-menu a {
padding: 9px 15px;
font-weight: bold;
color: @navbar-link-color;
border-radius: 3px;
}
// Buttons
.nav-collapse .btn {
padding: 4px 10px 4px;
font-weight: normal;
border-radius: @border-radius-base;
}
.nav-collapse .dropdown-menu li + li a {
margin-bottom: 2px;
}
.nav-collapse .nav > li > a:hover,
.nav-collapse .dropdown-menu a:hover {
background-color: @navbar-background;
}
.navbar-inverse .nav-collapse .nav > li > a,
.navbar-inverse .nav-collapse .dropdown-menu a {
color: @navbar-inverse-link-color;
}
.navbar-inverse .nav-collapse .nav > li > a:hover,
.navbar-inverse .nav-collapse .dropdown-menu a:hover {
background-color: @navbar-inverse-background;
}
// Buttons in the navbar
.nav-collapse.in .btn-group {
margin-top: 5px;
padding: 0;
}
// Dropdowns in the navbar
.nav-collapse .dropdown-menu {
position: static;
top: auto;
left: auto;
float: none;
display: none;
max-width: none;
margin: 0 15px;
padding: 0;
background-color: transparent;
border: none;
border-radius: 0;
.box-shadow(none);
}
.nav-collapse .open > .dropdown-menu {
display: block;
}
.nav-collapse .dropdown-menu:before,
.nav-collapse .dropdown-menu:after {
display: none;
}
.nav-collapse .dropdown-menu .divider {
display: none;
}
.nav-collapse .nav > li > .dropdown-menu {
&:before,
&:after {
display: none;
}
}
// Forms in navbar
.nav-collapse .navbar-form,
.nav-collapse .navbar-search {
float: none;
padding: (@line-height-base / 2) 15px;
margin: (@line-height-base / 2) 0;
border-top: 1px solid @navbar-background;
border-bottom: 1px solid @navbar-background;
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)");
}
.navbar-inverse .nav-collapse .navbar-form,
.navbar-inverse .nav-collapse .navbar-search {
border-top-color: @navbar-inverse-background;
border-bottom-color: @navbar-inverse-background;
}
// Pull right (secondary) nav content
.navbar .nav-collapse .nav.pull-right {
float: none;
margin-left: 0;
}
// Hide everything in the navbar save .brand and toggle button */
.nav-collapse,
.nav-collapse.collapse {
overflow: hidden;
height: 0;
}
// Navbar button
.navbar .btn-navbar {
display: block;
}
// STATIC NAVBAR
// -------------
.navbar-static {
padding-left: 10px;
padding-right: 10px;
}
}
// DEFAULT DESKTOP
// ---------------
@media (min-width: @navbar-collapse-width-desktop) {
// Required to make the collapsing navbar work on regular desktops
.nav-collapse.collapse {
height: auto !important;
overflow: visible !important;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment