From ab068f6fda525236220af6e1bf879a677ed6bfc0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 22 Mar 2012 21:33:06 -0700 Subject: bump version numbers in css files to 2.0.3, break out responsive CSS into separate files for further customization --- less/responsive.less | 350 ++------------------------------------------------- 1 file changed, 13 insertions(+), 337 deletions(-) (limited to 'less/responsive.less') diff --git a/less/responsive.less b/less/responsive.less index 98485eebd..d35948ddc 100644 --- a/less/responsive.less +++ b/less/responsive.less @@ -1,5 +1,5 @@ /*! - * Bootstrap Responsive v2.0.2 + * Bootstrap Responsive v2.0.3 * * Copyright 2012 Twitter, Inc * Licensed under the Apache License v2.0 @@ -24,348 +24,24 @@ // RESPONSIVE CLASSES // ------------------ -// Hide from screenreaders and browsers -// Credit: HTML5 Boilerplate -.hidden { - display: none; - visibility: hidden; -} +@import "responsive-utility-classes.less"; -// Visibility utilities -// For desktops -.visible-phone { display: none; } -.visible-tablet { display: none; } -.visible-desktop { display: block; } -.hidden-phone { display: block; } -.hidden-tablet { display: block; } -.hidden-desktop { display: none; } - -// Phones only -@media (max-width: 767px) { - // Show - .visible-phone { display: block; } - // Hide - .hidden-phone { display: none; } - // Hide everything else - .hidden-desktop { display: block; } - .visible-desktop { display: none; } -} - -// Tablets & small desktops only -@media (min-width: 768px) and (max-width: 979px) { - // Show - .visible-tablet { display: block; } - // Hide - .hidden-tablet { display: none; } - // Hide everything else - .hidden-desktop { display: block; } - .visible-desktop { display: none; } -} - - -// 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: @baseLineHeight; - } - - // Update checkboxes for iOS - input[type="checkbox"], - input[type="radio"] { - border: 1px solid #ccc; - } - - // Remove the horizontal form styles - .form-horizontal .control-group > label { - float: none; - width: auto; - padding-top: 0; - text-align: left; - } - // Move over all input controls and content - .form-horizontal .controls { - margin-left: 0; - } - // Move the options list down to align with labels - .form-horizontal .control-list { - padding-top: 0; // has to be padding because margin collaspes - } - // Move over buttons in .form-actions to align with .controls - .form-horizontal .form-actions { - padding-left: 10px; - padding-right: 10px; - } - - // Modals - .modal { - position: absolute; - top: 10px; - left: 10px; - right: 10px; - width: auto; - margin: 0; - &.fade.in { top: auto; } - } - .modal-header .close { - padding: 10px; - margin: -10px; - } - - // Carousel - .carousel-caption { - position: static; - } - -} - - - -// LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET -// -------------------------------------------------- - -@media (max-width: 767px) { - - // Padding to set content in a bit - body { - padding-left: 20px; - padding-right: 20px; - } - .navbar-fixed-top { - margin-left: -20px; - margin-right: -20px; - } - - // GRID & CONTAINERS - // ----------------- - // Remove width from containers - .container { - width: auto; - } - // Fluid rows - .row-fluid { - width: 100%; - } - // Undo negative margin on rows - .row { - margin-left: 0; - } - // Make all columns even - .row > [class*="span"], - .row-fluid > [class*="span"] { - float: none; - display: block; - width: auto; - margin: 0; - } - - // THUMBNAILS - // ---------- - .thumbnails [class*="span"] { - width: auto; - } - - // FORM FIELDS - // ----------- - // Make span* classes full width - input[class*="span"], - select[class*="span"], - textarea[class*="span"], - .uneditable-input { - .input-block-level(); - } - // But don't let it screw up prepend/append inputs - .input-prepend input[class*="span"], - .input-append input[class*="span"] { - width: auto; - } - -} - - - -// PORTRAIT TABLET TO DEFAULT DESKTOP -// ---------------------------------- - -@media (min-width: 768px) and (max-width: 979px) { - - // Fixed grid - #grid > .core(42px, 20px); - - // Fluid grid - #grid > .fluid(5.801104972%, 2.762430939%); - - // Input grid - #grid > .input(42px, 20px); - -} - - - -// TABLETS AND BELOW -// ----------------- -@media (max-width: 979px) { - - // UNFIX THE TOPBAR - // ---------------- - // Remove any padding from the body - body { - padding-top: 0; - } - // Unfix the navbar - .navbar-fixed-top { - position: static; - margin-bottom: @baseLineHeight; - } - .navbar-fixed-top .navbar-inner { - 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; - } - // Nav collapse clears brand - .navbar .nav-collapse { - clear: left; - } - // Block-level the nav - .navbar .nav { - float: none; - margin: 0 0 (@baseLineHeight / 2); - } - .navbar .nav > li { - float: none; - } - .navbar .nav > li > a { - margin-bottom: 2px; - } - .navbar .nav > .divider-vertical { - display: none; - } - .navbar .nav .nav-header { - color: @navbarText; - text-shadow: none; - } - // Nav and dropdown links in navbar - .navbar .nav > li > a, - .navbar .dropdown-menu a { - padding: 6px 15px; - font-weight: bold; - color: @navbarLinkColor; - .border-radius(3px); - } - .navbar .dropdown-menu li + li a { - margin-bottom: 2px; - } - .navbar .nav > li > a:hover, - .navbar .dropdown-menu a:hover { - background-color: @navbarBackground; - } - // Dropdowns in the navbar - .navbar .dropdown-menu { - position: static; - top: auto; - left: auto; - float: none; - display: block; - max-width: none; - margin: 0 15px; - padding: 0; - background-color: transparent; - border: none; - .border-radius(0); - .box-shadow(none); - } - .navbar .dropdown-menu:before, - .navbar .dropdown-menu:after { - display: none; - } - .navbar .dropdown-menu .divider { - display: none; - } - // Forms in navbar - .navbar-form, - .navbar-search { - float: none; - padding: (@baseLineHeight / 2) 15px; - margin: (@baseLineHeight / 2) 0; - border-top: 1px solid @navbarBackground; - border-bottom: 1px solid @navbarBackground; - @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1); - .box-shadow(@shadow); - } - // Pull right (secondary) nav content - .navbar .nav.pull-right { - float: none; - margin-left: 0; - } - // Static navbar - .navbar-static .navbar-inner { - padding-left: 10px; - padding-right: 10px; - } - // Navbar button - .btn-navbar { - display: block; - } - - // Hide everything in the navbar save .brand and toggle button */ - .nav-collapse { - overflow: hidden; - height: 0; - } -} - - - -// DEFAULT DESKTOP -// --------------- - -@media (min-width: 980px) { - .nav-collapse.collapse { - height: auto !important; - overflow: visible !important; - } -} - - - -// LARGE DESKTOP & UP +// MEDIA QUERIES // ------------------ -@media (min-width: 1200px) { +// Phones to portrait tablets and narrow desktops +@import "responsive-767px-max.less"; - // Fixed grid - #grid > .core(70px, 30px); +// Tablets to regular desktops +@import "responsive-768px-979px.less"; - // Fluid grid - #grid > .fluid(5.982905983%, 2.564102564%); +// Large desktops +@import "responsive-1200px-min.less"; - // Input grid - #grid > .input(70px, 30px); - // Thumbnails - .thumbnails { - margin-left: -30px; - } - .thumbnails > li { - margin-left: 30px; - } +// RESPONSIVE NAVBAR +// ------------------ -} +// From 979px and below, show a button to toggle navbar contents +@import "responsive-navbar.less"; -- cgit v1.2.3 From a7b8e52f8e08cc821d7324153885c085fad25c1a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 25 Mar 2012 01:12:51 -0700 Subject: Overhaul the responsive utility classes: 1. Rename file from responsive-utility-classes.less to responsive-utilities.less 2. Add additional help text around the documentation for the classes in Scaffolding 3. Remove unnecessary display values on initial classes 4. Drop block values for inherit for better support on inline and table elements 5. Make use of \!important on every class to avoid classes with more specific selectors (e.g., .span* classes for the grid) --- less/responsive.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less/responsive.less') diff --git a/less/responsive.less b/less/responsive.less index d35948ddc..5434f3a08 100644 --- a/less/responsive.less +++ b/less/responsive.less @@ -24,7 +24,7 @@ // RESPONSIVE CLASSES // ------------------ -@import "responsive-utility-classes.less"; +@import "responsive-utilities.less"; // MEDIA QUERIES -- cgit v1.2.3 From 37745cd8997bdc1d0bb21c276a7aa671bb018eed Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 31 Mar 2012 00:53:38 -0700 Subject: fix fluid grid selectors to remove > in selectors --- less/responsive.less | 1 + 1 file changed, 1 insertion(+) (limited to 'less/responsive.less') diff --git a/less/responsive.less b/less/responsive.less index 5434f3a08..bbd76d631 100644 --- a/less/responsive.less +++ b/less/responsive.less @@ -8,6 +8,7 @@ * Designed and built with all the love in the world @twitter by @mdo and @fat. */ + // Responsive.less // For phone and tablet devices // ------------------------------------------------------------- -- cgit v1.2.3