From 8e0afbeaa42dfabb75817b7fc1c677cd372c8c43 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Wed, 14 Mar 2012 12:00:27 -0700 Subject: update hide text to h5bp technique #2586 --- less/mixins.less | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index 0074e8924..a118fe7c4 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -98,13 +98,15 @@ white-space: nowrap; } -// New image replacement +// CSS image replacement // ------------------------- -// Source: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ +// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757 .hide-text { - overflow: hidden; - text-indent: 100%; - white-space: nowrap; + border: 0; + font: 0/0 a; + text-shadow: none; + color: transparent; + background-color: transparent; } -- cgit v1.2.3 From 1a1cab2d0612d150045947da183fff2464e892e0 Mon Sep 17 00:00:00 2001 From: Marcel Jackwerth Date: Thu, 15 Mar 2012 18:11:17 +0100 Subject: Invert progress-bar-stripes direction --- less/progress-bars.less | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) (limited to 'less') diff --git a/less/progress-bars.less b/less/progress-bars.less index 5979a3691..3da1f6f17 100644 --- a/less/progress-bars.less +++ b/less/progress-bars.less @@ -7,26 +7,26 @@ // Webkit @-webkit-keyframes progress-bar-stripes { - from { background-position: 0 0; } - to { background-position: 40px 0; } + from { background-position: 40px 0; } + to { background-position: 0 0; } } // Firefox @-moz-keyframes progress-bar-stripes { - from { background-position: 0 0; } - to { background-position: 40px 0; } + from { background-position: 40px 0; } + to { background-position: 0 0; } } // IE9 @-ms-keyframes progress-bar-stripes { - from { background-position: 0 0; } - to { background-position: 40px 0; } + from { background-position: 40px 0; } + to { background-position: 0 0; } } // Spec @keyframes progress-bar-stripes { - from { background-position: 0 0; } - to { background-position: 40px 0; } + from { background-position: 40px 0; } + to { background-position: 0 0; } } -- cgit v1.2.3 From 51f37cbb8105ad632fae7367912130aafc0f6c86 Mon Sep 17 00:00:00 2001 From: ctalkington Date: Thu, 15 Mar 2012 13:34:50 -0500 Subject: make font family mixins customizable with variables. --- less/mixins.less | 6 +++--- less/variables.less | 4 ++++ 2 files changed, 7 insertions(+), 3 deletions(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index a118fe7c4..c4b4ee82e 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -116,13 +116,13 @@ #font { #family { .serif() { - font-family: Georgia, "Times New Roman", Times, serif; + font-family: @serifFontFamily; } .sans-serif() { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-family: @sansFontFamily; } .monospace() { - font-family: Menlo, Monaco, "Courier New", monospace; + font-family: @monoFontFamily; } } .shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { diff --git a/less/variables.less b/less/variables.less index 94c3a0667..56f2a8d59 100644 --- a/less/variables.less +++ b/less/variables.less @@ -54,6 +54,10 @@ @headingsFontWeight: bold; // instead of browser default, bold @headingsColor: inherit; // empty to use BS default, @textColor +@serifFontFamily: Georgia, "Times New Roman", Times, serif; +@sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif; +@monoFontFamily: Menlo, Monaco, "Courier New", monospace; + // Tables // ------------------------- -- cgit v1.2.3 From bf09c979ca8f8275806e8ca3eef57ad484b2951e Mon Sep 17 00:00:00 2001 From: ctalkington Date: Thu, 15 Mar 2012 14:21:27 -0500 Subject: make brand links follow navbarLinkColor but also be customizable in advanced cases. --- less/navbar.less | 2 +- less/variables.less | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) (limited to 'less') diff --git a/less/navbar.less b/less/navbar.less index 8eb1332ae..cda6721e3 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -74,7 +74,7 @@ font-size: 20px; font-weight: 200; line-height: 1; - color: @white; + color: @navbarBrandColor; } // Plain text in topbar .navbar-text { diff --git a/less/variables.less b/less/variables.less index 94c3a0667..812587fcd 100644 --- a/less/variables.less +++ b/less/variables.less @@ -154,6 +154,7 @@ @navbarSearchBackgroundFocus: @white; @navbarSearchBorder: darken(@navbarSearchBackground, 30%); @navbarSearchPlaceholderColor: #ccc; +@navbarBrandColor: @navbarLinkColor; // Hero unit -- cgit v1.2.3 From d115d169b72d165d8b84c6e16d3b132b28b96d1d Mon Sep 17 00:00:00 2001 From: Mark Figueredo Date: Mon, 19 Mar 2012 14:58:55 -0300 Subject: Added offset parameter to .makeColumn. --- less/mixins.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index 0074e8924..13fbb5cf8 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -507,9 +507,9 @@ margin-left: @gridGutterWidth * -1; .clearfix(); } -.makeColumn(@columns: 1) { +.makeColumn(@columns: 1, @offset: 0) { float: left; - margin-left: @gridGutterWidth; + margin-left: (@gridColumnWidth * @offset) + (@gridGutterWidth * (@offset - 1)) + (@gridGutterWidth * 2); width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); } -- cgit v1.2.3 From d7af2714c66ce19ba63e0871837f35dac73ecf66 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 22 Mar 2012 16:02:00 -0700 Subject: remove separate badges and labels, add single file instead, remove hover from non-link badges/labels --- less/badges.less | 36 -------------------------------- less/bootstrap.less | 3 +-- less/labels-badges.less | 55 +++++++++++++++++++++++++++++++++++++++++++++++++ less/labels.less | 38 ---------------------------------- 4 files changed, 56 insertions(+), 76 deletions(-) delete mode 100644 less/badges.less create mode 100644 less/labels-badges.less delete mode 100644 less/labels.less (limited to 'less') diff --git a/less/badges.less b/less/badges.less deleted file mode 100644 index 273479b0f..000000000 --- a/less/badges.less +++ /dev/null @@ -1,36 +0,0 @@ -// BADGES -// ------ - -// Base -.badge { - padding: 1px 9px 2px; - font-size: @baseFontSize * .925; - font-weight: bold; - white-space: nowrap; - color: @white; - background-color: @grayLight; - .border-radius(9px); -} - -// Hover state -.badge:hover { - color: @white; - text-decoration: none; - cursor: pointer; -} - -// Colors -.badge-error { background-color: @errorText; } -.badge-error:hover { background-color: darken(@errorText, 10%); } - -.badge-warning { background-color: @orange; } -.badge-warning:hover { background-color: darken(@orange, 10%); } - -.badge-success { background-color: @successText; } -.badge-success:hover { background-color: darken(@successText, 10%); } - -.badge-info { background-color: @infoText; } -.badge-info:hover { background-color: darken(@infoText, 10%); } - -.badge-inverse { background-color: @grayDark; } -.badge-inverse:hover { background-color: darken(@grayDark, 10%); } \ No newline at end of file diff --git a/less/bootstrap.less b/less/bootstrap.less index d115e9567..93ab35f4b 100644 --- a/less/bootstrap.less +++ b/less/bootstrap.less @@ -52,8 +52,7 @@ // Components: Misc @import "thumbnails.less"; -@import "labels.less"; -@import "badges.less"; +@import "labels-badges.less"; @import "progress-bars.less"; @import "accordion.less"; @import "carousel.less"; diff --git a/less/labels-badges.less b/less/labels-badges.less new file mode 100644 index 000000000..32291f14e --- /dev/null +++ b/less/labels-badges.less @@ -0,0 +1,55 @@ +// LABELS & BADGES +// --------------- + +// Base classes +.label, +.badge { + font-size: @baseFontSize * .846; + font-weight: bold; + line-height: 13px; // ensure proper line-height if floated + color: @white; + vertical-align: middle; + white-space: nowrap; + text-shadow: 0 -1px 0 rgba(0,0,0,.25); + background-color: @grayLight; +} +// Set unique padding and border-radii +.label { + padding: 1px 4px 2px; + .border-radius(3px); +} +.badge { + padding: 1px 9px 2px; + .border-radius(9px); +} + +// Hover state, but only for links +a { + &.label:hover, + &.badge:hover { + color: @white; + text-decoration: none; + cursor: pointer; + } +} + +// Colors +// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute) +.label, +.badge { + // Important (red) + &-important { background-color: @errorText; } + &-important[href] { background-color: darken(@errorText, 10%); } + // Warnings (orange) + &-warning { background-color: @orange; } + &-warning[href] { background-color: darken(@orange, 10%); } + // Success (green) + &-success { background-color: @successText; } + &-success[href] { background-color: darken(@successText, 10%); } + // Info (turquoise) + &-info { background-color: @infoText; } + &-info[href] { background-color: darken(@infoText, 10%); } + // Inverse (black) + &-inverse { background-color: @grayDark; } + &-inverse[href] { background-color: darken(@grayDark, 10%); } +} diff --git a/less/labels.less b/less/labels.less deleted file mode 100644 index 918b12e8c..000000000 --- a/less/labels.less +++ /dev/null @@ -1,38 +0,0 @@ -// LABELS -// ------ - -// Base -.label { - padding: 1px 4px 2px; - font-size: @baseFontSize * .846; - font-weight: bold; - line-height: 13px; // ensure proper line-height if floated - color: @white; - vertical-align: middle; - white-space: nowrap; - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - background-color: @grayLight; - .border-radius(3px); -} - -// Hover state -.label:hover { - color: @white; - text-decoration: none; -} - -// Colors -.label-important { background-color: @errorText; } -.label-important:hover { background-color: darken(@errorText, 10%); } - -.label-warning { background-color: @orange; } -.label-warning:hover { background-color: darken(@orange, 10%); } - -.label-success { background-color: @successText; } -.label-success:hover { background-color: darken(@successText, 10%); } - -.label-info { background-color: @infoText; } -.label-info:hover { background-color: darken(@infoText, 10%); } - -.label-inverse { background-color: @grayDark; } -.label-inverse:hover { background-color: darken(@grayDark, 10%); } \ No newline at end of file -- cgit v1.2.3 From e0c85fb69cfc4a9956856e0b14afb12def2fccf0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 22 Mar 2012 17:18:07 -0700 Subject: use new font-stack mixins in base and alt font family mixins --- less/variables.less | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'less') diff --git a/less/variables.less b/less/variables.less index 1fb22ac32..c8e2a3c0d 100644 --- a/less/variables.less +++ b/less/variables.less @@ -45,19 +45,19 @@ // Typography // ------------------------- +@sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif; +@serifFontFamily: Georgia, "Times New Roman", Times, serif; +@monoFontFamily: Menlo, Monaco, "Courier New", monospace; + @baseFontSize: 13px; -@baseFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif; +@baseFontFamily: @sansFontFamily; @baseLineHeight: 18px; -@altFontFamily: Georgia, "Times New Roman", Times, serif; +@altFontFamily: @serifFontFamily; @headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily @headingsFontWeight: bold; // instead of browser default, bold @headingsColor: inherit; // empty to use BS default, @textColor -@serifFontFamily: Georgia, "Times New Roman", Times, serif; -@sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif; -@monoFontFamily: Menlo, Monaco, "Courier New", monospace; - // Tables // ------------------------- -- cgit v1.2.3 From ceab161324119c1392e8c26b68d2a14c32d43ab8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 22 Mar 2012 17:31:09 -0700 Subject: fix unescaped reset filter per #2575 --- less/mixins.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index c4b4ee82e..e5471cabd 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -395,7 +395,7 @@ } // Reset filters for IE .reset-filter() { - filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); + filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)")); } -- cgit v1.2.3 From b7b84c7a0dfaad5134258b5a50e8d42bd0656b81 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 22 Mar 2012 17:36:32 -0700 Subject: remove bug in docs for example icon in an input-prepend by removing margin on any input/select/etc in an input-prepend/append --- less/forms.less | 1 + 1 file changed, 1 insertion(+) (limited to 'less') diff --git a/less/forms.less b/less/forms.less index 8d9c25308..a53b273b9 100644 --- a/less/forms.less +++ b/less/forms.less @@ -365,6 +365,7 @@ select:focus:required:invalid { input, select, .uneditable-input { + margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms *margin-left: 0; .border-radius(0 3px 3px 0); &:focus { -- cgit v1.2.3 From edca6f28f0ae78cdc3dbfe0ce5183153830a77ee Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 22 Mar 2012 17:41:20 -0700 Subject: fix #2718, misaligned uneditable inputs in prepends/appends --- less/forms.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less') diff --git a/less/forms.less b/less/forms.less index a53b273b9..ffd198372 100644 --- a/less/forms.less +++ b/less/forms.less @@ -321,7 +321,6 @@ select:focus:required:invalid { // For text that needs to appear as an input but should not be an input .uneditable-input { - display: block; background-color: @inputBackground; border-color: #eee; .box-shadow(inset 0 1px 2px rgba(0,0,0,.025)); @@ -367,6 +366,7 @@ select:focus:required:invalid { .uneditable-input { margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms *margin-left: 0; + vertical-align: middle; .border-radius(0 3px 3px 0); &:focus { position: relative; -- cgit v1.2.3 From 1852d077bfa15308808c470a031f6e6b5c3dc8d2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 22 Mar 2012 21:08:41 -0700 Subject: add shell of tests page, lighten form actions background and give it a variable --- less/forms.less | 2 +- less/tables.less | 2 ++ less/variables.less | 3 +-- 3 files changed, 4 insertions(+), 3 deletions(-) (limited to 'less') diff --git a/less/forms.less b/less/forms.less index ffd198372..5ce8b0c1c 100644 --- a/less/forms.less +++ b/less/forms.less @@ -314,7 +314,7 @@ select:focus:required:invalid { padding: (@baseLineHeight - 1) 20px @baseLineHeight; margin-top: @baseLineHeight; margin-bottom: @baseLineHeight; - background-color: @grayLighter; + background-color: @formActionsBackground; border-top: 1px solid #ddd; .clearfix(); // Adding clearfix to allow for .pull-right button containers } diff --git a/less/tables.less b/less/tables.less index 7111cb806..5ce876f4a 100644 --- a/less/tables.less +++ b/less/tables.less @@ -37,6 +37,8 @@ table { vertical-align: bottom; } // Remove top border from thead by default + caption + thead tr:first-child th, + caption + thead tr:first-child td, colgroup + thead tr:first-child th, colgroup + thead tr:first-child td, thead:first-child tr:first-child th, diff --git a/less/variables.less b/less/variables.less index c8e2a3c0d..35fa11265 100644 --- a/less/variables.less +++ b/less/variables.less @@ -97,7 +97,7 @@ @inputBackground: @white; @inputBorder: #ccc; @inputDisabledBackground: @grayLighter; - +@formActionsBackground: #f5f5f5; // Dropdowns // ------------------------- @@ -188,7 +188,6 @@ - // GRID // -------------------------------------------------- -- cgit v1.2.3 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/bootstrap.less | 2 +- less/responsive.less | 350 ++------------------------------------------------- 2 files changed, 14 insertions(+), 338 deletions(-) (limited to 'less') diff --git a/less/bootstrap.less b/less/bootstrap.less index 93ab35f4b..9749a46cb 100644 --- a/less/bootstrap.less +++ b/less/bootstrap.less @@ -1,5 +1,5 @@ /*! - * Bootstrap v2.0.2 + * Bootstrap v2.0.3 * * Copyright 2012 Twitter, Inc * Licensed under the Apache License v2.0 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 20da2c8ea08da9d15b72844f54bb91c9cba8b28e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 22 Mar 2012 21:54:54 -0700 Subject: add the broken out responsive files --- less/responsive-1200px-min.less | 23 ++++++ less/responsive-767px-max.less | 127 +++++++++++++++++++++++++++++++++ less/responsive-768px-979px.less | 15 ++++ less/responsive-navbar.less | 131 +++++++++++++++++++++++++++++++++++ less/responsive-utility-classes.less | 41 +++++++++++ 5 files changed, 337 insertions(+) create mode 100644 less/responsive-1200px-min.less create mode 100644 less/responsive-767px-max.less create mode 100644 less/responsive-768px-979px.less create mode 100644 less/responsive-navbar.less create mode 100644 less/responsive-utility-classes.less (limited to 'less') diff --git a/less/responsive-1200px-min.less b/less/responsive-1200px-min.less new file mode 100644 index 000000000..9e77a113d --- /dev/null +++ b/less/responsive-1200px-min.less @@ -0,0 +1,23 @@ +// LARGE DESKTOP & UP +// ------------------ + +@media (min-width: 1200px) { + + // Fixed grid + #grid > .core(70px, 30px); + + // Fluid grid + #grid > .fluid(5.982905983%, 2.564102564%); + + // Input grid + #grid > .input(70px, 30px); + + // Thumbnails + .thumbnails { + margin-left: -30px; + } + .thumbnails > li { + margin-left: 30px; + } + +} diff --git a/less/responsive-767px-max.less b/less/responsive-767px-max.less new file mode 100644 index 000000000..6f54f8880 --- /dev/null +++ b/less/responsive-767px-max.less @@ -0,0 +1,127 @@ +// 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; + } + +} diff --git a/less/responsive-768px-979px.less b/less/responsive-768px-979px.less new file mode 100644 index 000000000..10dda4b02 --- /dev/null +++ b/less/responsive-768px-979px.less @@ -0,0 +1,15 @@ +// 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); + +} diff --git a/less/responsive-navbar.less b/less/responsive-navbar.less new file mode 100644 index 000000000..59e456a22 --- /dev/null +++ b/less/responsive-navbar.less @@ -0,0 +1,131 @@ +// 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 +// --------------- + +// Required to make the collapsing navbar work on regular desktops +@media (min-width: 980px) { + .nav-collapse.collapse { + height: auto !important; + overflow: visible !important; + } +} diff --git a/less/responsive-utility-classes.less b/less/responsive-utility-classes.less new file mode 100644 index 000000000..78a06e8f9 --- /dev/null +++ b/less/responsive-utility-classes.less @@ -0,0 +1,41 @@ +// RESPONSIVE CLASSES +// ------------------ + +// Hide from screenreaders and browsers +// Credit: HTML5 Boilerplate +.hidden { + display: none; + visibility: hidden; +} + +// 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; } +} -- cgit v1.2.3 From 50b2245be5bd7cd12d37e38a00c4978a211bdcd3 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 22 Mar 2012 22:06:23 -0700 Subject: restore max-width 100% for images --- less/reset.less | 1 + 1 file changed, 1 insertion(+) (limited to 'less') diff --git a/less/reset.less b/less/reset.less index 87411cf2b..a528fa046 100644 --- a/less/reset.less +++ b/less/reset.less @@ -75,6 +75,7 @@ sub { // ------------------------- img { + max-width: 100%; // Make images inherently responsive height: auto; border: 0; -ms-interpolation-mode: bicubic; -- cgit v1.2.3 From ac64d9405b3f650704f2e63b52c26b9f6f792cb8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 22 Mar 2012 23:09:31 -0700 Subject: Dropdowns overhaul: 1. Removed broken and unused dropup examples from the navs/pills docs 2. New defaults for dropdown menus: all corners are rounded and always 1px offset from top unless otherwise specified 3. Refined active and open states for button dropdowns by adding a darker background color for each button variation when opened; also changed the opened dropdown-toggle's inset shadow to match that of an :active button 4. Generalized .dropdown.open to just .open, thus removing a few lines from button-groups.less. 5. Annnnnnnnnd I think that's it. --- less/button-groups.less | 39 ++++++++++++++++++++++++++++----------- less/dropdowns.less | 20 +++++++------------- less/navbar.less | 4 +--- less/navs.less | 12 ++++-------- 4 files changed, 40 insertions(+), 35 deletions(-) (limited to 'less') diff --git a/less/button-groups.less b/less/button-groups.less index d3e7a7490..627c067e7 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -114,24 +114,41 @@ } .btn-group.open { - // IE7's z-index only goes to the nearest positioned ancestor, which would - // make the menu appear below buttons that appeared later on the page - *z-index: @zindexDropdown; - - // Reposition menu on open and round all corners - .dropdown-menu { - display: block; - margin-top: 1px; - .border-radius(5px); - } + // The clickable button for toggling the menu + // Remove the gradient and set the same inset shadow as the :active state .dropdown-toggle { background-image: none; - @shadow: inset 0 1px 6px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); + @shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); .box-shadow(@shadow); } + + // Keep the hover's background when dropdown is open + .btn.dropdown-toggle { + background-color: @btnBackgroundHighlight; + } + .btn-primary.dropdown-toggle { + background-color: @btnPrimaryBackgroundHighlight; + } + .btn-warning.dropdown-toggle { + background-color: @btnWarningBackgroundHighlight; + } + .btn-danger.dropdown-toggle { + background-color: @btnDangerBackgroundHighlight; + } + .btn-success.dropdown-toggle { + background-color: @btnSuccessBackgroundHighlight; + } + .btn-info.dropdown-toggle { + background-color: @btnInfoBackgroundHighlight; + } + .btn-inverse.dropdown-toggle { + background-color: @btnInverseBackgroundHighlight; + } } + + // Reposition the caret .btn .caret { margin-top: 7px; diff --git a/less/dropdowns.less b/less/dropdowns.less index 58cdb612f..b54e7eeec 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -34,7 +34,7 @@ margin-left: 2px; } .dropdown:hover .caret, -.open.dropdown .caret { +.open .caret { .opacity(100); } @@ -49,14 +49,12 @@ display: none; // none by default, but block on "open" of the menu min-width: 160px; padding: 4px 0; - margin: 0; // override default ul + margin: 1px 0 0; // override default ul list-style: none; background-color: @dropdownBackground; - border-color: #ccc; - border-color: rgba(0,0,0,.2); - border-style: solid; - border-width: 1px; - .border-radius(0 0 5px 5px); + border: 1px solid #ccc; + border: 1px solid rgba(0,0,0,.2); + .border-radius(5px); .box-shadow(0 5px 10px rgba(0,0,0,.2)); -webkit-background-clip: padding-box; -moz-background-clip: padding; @@ -99,22 +97,18 @@ // Open state for the dropdown // --------------------------- -.dropdown.open { +.open { // IE7's z-index only goes to the nearest positioned ancestor, which would // make the menu appear below buttons that appeared later on the page *z-index: @zindexDropdown; - .dropdown-toggle { - color: @white; - background: #ccc; - background: rgba(0,0,0,.3); - } .dropdown-menu { display: block; } } // Right aligned dropdowns +// --------------------------- .pull-right .dropdown-menu { left: auto; right: 0; diff --git a/less/navbar.less b/less/navbar.less index cda6721e3..eed0ff2d6 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -262,8 +262,6 @@ // Menu position and menu carets .navbar .dropdown-menu { - margin-top: 1px; - .border-radius(4px); &:before { content: ''; display: inline-block; @@ -304,7 +302,7 @@ } // Dropdown toggle caret .navbar .nav .dropdown-toggle .caret, -.navbar .nav .open.dropdown .caret { +.navbar .nav .open .caret { border-top-color: @white; border-bottom-color: @white; } diff --git a/less/navs.less b/less/navs.less index 489e1bfeb..ae187e1fb 100644 --- a/less/navs.less +++ b/less/navs.less @@ -98,12 +98,10 @@ .nav-tabs { border-bottom: 1px solid #ddd; } - // Make the list-items overlay the bottom border .nav-tabs > li { margin-bottom: -1px; } - // Actual tabs (as links) .nav-tabs > li > a { padding-top: 8px; @@ -125,6 +123,7 @@ cursor: default; } + // PILLS // ----- @@ -189,14 +188,11 @@ // DROPDOWNS // --------- -// Position the menu -.nav-tabs .dropdown-menu, -.nav-pills .dropdown-menu { - margin-top: 1px; - border-width: 1px; +.nav-tabs .dropdown-menu { + .border-radius(0 0 5px 5px); // remove the top rounded corners here since there is a hard edge above the menu } .nav-pills .dropdown-menu { - .border-radius(4px); + .border-radius(4px); // make rounded corners match the pills } // Default dropdown links -- cgit v1.2.3 From c4fb7032690ed10162562dfbf893311389a64dee Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 22 Mar 2012 23:38:50 -0700 Subject: fix left and right tab-content alignment with width: auto; --- less/navs.less | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'less') diff --git a/less/navs.less b/less/navs.less index ae187e1fb..865098c8b 100644 --- a/less/navs.less +++ b/less/navs.less @@ -309,6 +309,10 @@ // ------------ // Common styles +.tabs-left .tab-content, +.tabs-right .tab-content { + width: auto; +} .tabs-left .nav-tabs > li, .tabs-right .nav-tabs > li { float: none; -- cgit v1.2.3 From 2729d15742e61c0bf52966064eb260409b55a600 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 23 Mar 2012 00:37:15 -0700 Subject: fix #2625 manually: account for dropup caret on large button --- less/button-groups.less | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) (limited to 'less') diff --git a/less/button-groups.less b/less/button-groups.less index 627c067e7..d28e5bbad 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -148,7 +148,6 @@ } - // Reposition the caret .btn .caret { margin-top: 7px; @@ -167,12 +166,18 @@ } .btn-large .caret { margin-top: 6px; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-top: 5px solid @black; + border-left-width: 5px; + border-right-width: 5px; + border-top-width: 5px; +} +// Upside down carets for .dropup +.dropup .btn-large .caret { + border-bottom: 5px solid @black; + border-top: 0; } + // Account for other colors .btn-primary, .btn-warning, -- cgit v1.2.3 From ee3fc11addc047f82b0e3629e22a9e439fb789b6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 23 Mar 2012 00:38:13 -0700 Subject: fix #2617: add negative margin to fixed-bottom navbar --- less/responsive-767px-max.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'less') diff --git a/less/responsive-767px-max.less b/less/responsive-767px-max.less index 6f54f8880..bb4a449f8 100644 --- a/less/responsive-767px-max.less +++ b/less/responsive-767px-max.less @@ -75,7 +75,8 @@ padding-left: 20px; padding-right: 20px; } - .navbar-fixed-top { + .navbar-fixed-top, + .navbar-fixed-bottom { margin-left: -20px; margin-right: -20px; } -- cgit v1.2.3 From 281e058ef24aabd6ed47e3a2a9de7617dc685964 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 23 Mar 2012 00:40:10 -0700 Subject: fix #2613: labels hang too low --- less/labels-badges.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less') diff --git a/less/labels-badges.less b/less/labels-badges.less index 32291f14e..e29f2c434 100644 --- a/less/labels-badges.less +++ b/less/labels-badges.less @@ -6,7 +6,7 @@ .badge { font-size: @baseFontSize * .846; font-weight: bold; - line-height: 13px; // ensure proper line-height if floated + line-height: 14px; // ensure proper line-height if floated color: @white; vertical-align: middle; white-space: nowrap; -- cgit v1.2.3 From f330de0b5c506267dcee917c23844697ee56230d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 23 Mar 2012 00:51:31 -0700 Subject: add comment for append/prepend z-indexing --- less/forms.less | 1 + 1 file changed, 1 insertion(+) (limited to 'less') diff --git a/less/forms.less b/less/forms.less index 5ce8b0c1c..83e1013bf 100644 --- a/less/forms.less +++ b/less/forms.less @@ -368,6 +368,7 @@ select:focus:required:invalid { *margin-left: 0; vertical-align: middle; .border-radius(0 3px 3px 0); + // Make input on top when focused so blue border and shadow always show &:focus { position: relative; z-index: 2; -- cgit v1.2.3 From de7aee246591f0be9ee58079175b42af7f5a6947 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 23 Mar 2012 01:28:04 -0700 Subject: fix broken tables with double borders and such, add css tests page to start with table edge cases --- less/tables.less | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'less') diff --git a/less/tables.less b/less/tables.less index 5ce876f4a..cdc794edc 100644 --- a/less/tables.less +++ b/less/tables.less @@ -78,6 +78,12 @@ table { border-left: 1px solid @tableBorder; } // Prevent a double border + caption + thead tr:first-child th, + caption + tbody tr:first-child th, + caption + tbody tr:first-child td, + colgroup + thead tr:first-child th, + colgroup + tbody tr:first-child th, + colgroup + tbody tr:first-child td, thead:first-child tr:first-child th, tbody:first-child tr:first-child th, tbody:first-child tr:first-child td { -- cgit v1.2.3 From 0b4198492002e8aeff6a9106f62c140c82c6c75e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 23 Mar 2012 09:47:57 -0700 Subject: Fix #2758: Uneditable inputs in input-prepend/append 1. Added a missing comma to the input-append's form control stack () to fix border-radius 2. Add to the .uneditable-input in forms to remove the float as we do with all other form controls --- less/forms.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'less') diff --git a/less/forms.less b/less/forms.less index 83e1013bf..af1c7eecc 100644 --- a/less/forms.less +++ b/less/forms.less @@ -243,7 +243,7 @@ select:focus { input[class*="span"], select[class*="span"], textarea[class*="span"], -.uneditable-input { +.uneditable-input[class*="span"] { float: none; margin-left: 0; } @@ -408,7 +408,7 @@ select:focus:required:invalid { } .input-append { input, - select + select, .uneditable-input { .border-radius(3px 0 0 3px); } -- cgit v1.2.3 From 035b85eebaaec9dded4c46b8864c63ff20bdd4fd Mon Sep 17 00:00:00 2001 From: Bart Teeuwisse Date: Fri, 23 Mar 2012 12:37:40 -0700 Subject: The native box-shadow, background-clip and background-size instructions all take 1 or more arguments. In 1.3.0 LESS became arity aware, see https://gist.github.com/1933613. As a result the signatures of these mixins had to change a little. --- less/mixins.less | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index 0074e8924..48d722a80 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -197,10 +197,10 @@ } // Drop shadows -.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) { - -webkit-box-shadow: @shadow; - -moz-box-shadow: @shadow; - box-shadow: @shadow; +.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25), ...) { + -webkit-box-shadow: @arguments; + -moz-box-shadow: @arguments; + box-shadow: @arguments; } // Transitions @@ -251,18 +251,18 @@ // Background clipping // Heads up: FF 3.6 and under need "padding" instead of "padding-box" -.background-clip(@clip) { - -webkit-background-clip: @clip; - -moz-background-clip: @clip; - background-clip: @clip; +.background-clip(@clip, ...) { + -webkit-background-clip: @arguments; + -moz-background-clip: @arguments; + background-clip: @arguments; } // Background sizing -.background-size(@size){ - -webkit-background-size: @size; - -moz-background-size: @size; - -o-background-size: @size; - background-size: @size; +.background-size(@size, ...){ + -webkit-background-size: @arguments; + -moz-background-size: @arguments; + -o-background-size: @arguments; + background-size: @arguments; } -- cgit v1.2.3 From c7afe382a26834cce5b8bf2fc7333ce7e945a2d4 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 23 Mar 2012 20:56:04 -0700 Subject: fix other instances of mixins, swap use of box-shadow everywhere, include border-radius and transition --- less/button-groups.less | 9 +++++---- less/buttons.less | 8 ++++---- less/forms.less | 4 ++-- less/mixins.less | 20 ++++++++++---------- 4 files changed, 21 insertions(+), 20 deletions(-) (limited to 'less') diff --git a/less/button-groups.less b/less/button-groups.less index d3e7a7490..d4006f8a0 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -93,8 +93,9 @@ .btn-group .dropdown-toggle { padding-left: 8px; padding-right: 8px; - @shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); - .box-shadow(@shadow); + .box-shadow(inset 1px 0 0 rgba(255,255,255,.125), + inset 0 1px 0 rgba(255,255,255,.2), + 0 1px 2px rgba(0,0,0,.05)); *padding-top: 3px; *padding-bottom: 3px; } @@ -127,8 +128,8 @@ .dropdown-toggle { background-image: none; - @shadow: inset 0 1px 6px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); - .box-shadow(@shadow); + .box-shadow(inset 0 1px 6px rgba(0,0,0,.15), + 0 1px 2px rgba(0,0,0,.05)); } } diff --git a/less/buttons.less b/less/buttons.less index 83f9c737c..4381fe995 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -21,8 +21,8 @@ border: 1px solid @btnBorder; border-bottom-color: darken(@btnBorder, 10%); .border-radius(4px); - @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); - .box-shadow(@shadow); + .box-shadow(inset 0 1px 0 rgba(255,255,255,.2), + 0 1px 2px rgba(0,0,0,.05)); cursor: pointer; // Give IE7 some love @@ -50,8 +50,8 @@ .btn.active, .btn:active { background-image: none; - @shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); - .box-shadow(@shadow); + .box-shadow(inset 0 2px 4px rgba(0,0,0,.15), + 0 1px 2px rgba(0,0,0,.05)); background-color: darken(@white, 10%); background-color: darken(@white, 15%) e("\9"); outline: 0; diff --git a/less/forms.less b/less/forms.less index 8d9c25308..5e373956b 100644 --- a/less/forms.less +++ b/less/forms.less @@ -213,8 +213,8 @@ textarea { input:focus, textarea:focus { border-color: rgba(82,168,236,.8); - @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6); - .box-shadow(@shadow); + .box-shadow(inset 0 1px 1px rgba(0,0,0,.075), + 0 0 8px rgba(82,168,236,.6)); outline: 0; outline: thin dotted \9; /* IE6-9 */ } diff --git a/less/mixins.less b/less/mixins.less index 48d722a80..7b95e2b10 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -190,10 +190,10 @@ // -------------------------------------------------- // Border Radius -.border-radius(@radius: 5px) { - -webkit-border-radius: @radius; - -moz-border-radius: @radius; - border-radius: @radius; +.border-radius(@radius: 5px, ...) { + -webkit-border-radius: @arguments; + -moz-border-radius: @arguments; + border-radius: @arguments; } // Drop shadows @@ -204,12 +204,12 @@ } // Transitions -.transition(@transition) { - -webkit-transition: @transition; - -moz-transition: @transition; - -ms-transition: @transition; - -o-transition: @transition; - transition: @transition; +.transition(@transition, ...) { + -webkit-transition: @arguments; + -moz-transition: @arguments; + -ms-transition: @arguments; + -o-transition: @arguments; + transition: @arguments; } // Transformations -- cgit v1.2.3 From de0aaff4338acc72b5c6220f4731b7fa7c52ac2c Mon Sep 17 00:00:00 2001 From: Andreas Bovens Date: Sat, 24 Mar 2012 18:53:27 +0100 Subject: Added -o- and -ms- prefixes to animations CSS Added -o- and -ms- prefixes to make the animated progress bars to work in the latest/upcoming versions of IE and Opera. --- less/progress-bars.less | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'less') diff --git a/less/progress-bars.less b/less/progress-bars.less index 5979a3691..e6e30b34c 100644 --- a/less/progress-bars.less +++ b/less/progress-bars.less @@ -23,6 +23,12 @@ to { background-position: 40px 0; } } +// Opera +@-o-keyframes progress-bar-stripes { + from { background-position: 0 0; } + to { background-position: 40px 0; } +} + // Spec @keyframes progress-bar-stripes { from { background-position: 0 0; } @@ -68,6 +74,8 @@ .progress.active .bar { -webkit-animation: progress-bar-stripes 2s linear infinite; -moz-animation: progress-bar-stripes 2s linear infinite; + -ms-animation: progress-bar-stripes 2s linear infinite; + -o-animation: progress-bar-stripes 2s linear infinite; animation: progress-bar-stripes 2s linear infinite; } -- cgit v1.2.3 From 1837b8ef2c1a28f966965985c33d38a8f6a72438 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 25 Mar 2012 00:20:30 -0700 Subject: remove height: auto on images since it interferes with inline dimensions --- less/reset.less | 1 - 1 file changed, 1 deletion(-) (limited to 'less') diff --git a/less/reset.less b/less/reset.less index a528fa046..d11533f03 100644 --- a/less/reset.less +++ b/less/reset.less @@ -76,7 +76,6 @@ sub { img { max-width: 100%; // Make images inherently responsive - height: auto; border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; -- 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-utilities.less | 41 ++++++++++++++++++++++++++++++++++++ less/responsive-utility-classes.less | 41 ------------------------------------ less/responsive.less | 2 +- 3 files changed, 42 insertions(+), 42 deletions(-) create mode 100644 less/responsive-utilities.less delete mode 100644 less/responsive-utility-classes.less (limited to 'less') diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less new file mode 100644 index 000000000..572846c0f --- /dev/null +++ b/less/responsive-utilities.less @@ -0,0 +1,41 @@ +// RESPONSIVE CLASSES +// ------------------ + +// Hide from screenreaders and browsers +// Credit: HTML5 Boilerplate +.hidden { + display: none; + visibility: hidden; +} + +// Visibility utilities + +// For desktops +.visible-phone { display: none !important; } +.visible-tablet { display: none !important; } +.visible-desktop { } // Don't set initially +.hidden-phone { } +.hidden-tablet { } +.hidden-desktop { display: none !important; } + +// Phones only +@media (max-width: 767px) { + // Show + .visible-phone { display: inherit !important; } // Use inherit to restore previous behavior + // Hide + .hidden-phone { display: none !important; } + // Hide everything else + .hidden-desktop { display: inherit !important; } + .visible-desktop { display: none !important; } +} + +// Tablets & small desktops only +@media (min-width: 768px) and (max-width: 979px) { + // Show + .visible-tablet { display: inherit !important; } + // Hide + .hidden-tablet { display: none !important; } + // Hide everything else + .hidden-desktop { display: inherit !important; } + .visible-desktop { display: none !important ; } +} diff --git a/less/responsive-utility-classes.less b/less/responsive-utility-classes.less deleted file mode 100644 index 78a06e8f9..000000000 --- a/less/responsive-utility-classes.less +++ /dev/null @@ -1,41 +0,0 @@ -// RESPONSIVE CLASSES -// ------------------ - -// Hide from screenreaders and browsers -// Credit: HTML5 Boilerplate -.hidden { - display: none; - visibility: hidden; -} - -// 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; } -} 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 6c5c29ada2430c884888c9138ba09b0030584d17 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 25 Mar 2012 01:21:47 -0700 Subject: introduce .navbar-link to resolve issue with buttons in .navbar-text --- less/navbar.less | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'less') diff --git a/less/navbar.less b/less/navbar.less index eed0ff2d6..297676f49 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -81,6 +81,13 @@ margin-bottom: 0; line-height: @navbarHeight; } + // Janky solution for now to account for links outside the .nav + .navbar-link { + color: @navbarLinkColor; + &:hover { + color: @navbarLinkColorHover; + } + } // Buttons in navbar .btn, .btn-group { -- cgit v1.2.3 From b81a082cd13759bd5f0ff2a90513a56d59ace313 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 25 Mar 2012 12:32:29 -0700 Subject: add navbarheight support to .brand and .nav links in navbar --- less/navbar.less | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) (limited to 'less') diff --git a/less/navbar.less b/less/navbar.less index 297676f49..711e67f7a 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -16,6 +16,7 @@ // Gradient is applied to it's own element because overflow visible is not honored by IE when filter is present .navbar-inner { + height: @navbarHeight; padding-left: 20px; padding-right: 20px; #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground); @@ -69,7 +70,10 @@ .brand { float: left; display: block; - padding: 8px 20px 12px; + // Vertically center the text given @navbarHeight + @elementHeight: 20px; + padding: ((@navbarHeight - @elementHeight) / 2 - 2) 20px ((@navbarHeight - @elementHeight) / 2 + 2); + margin-left: -20px; // negative indent to left-align the text down the page font-size: 20px; font-weight: 200; @@ -225,7 +229,9 @@ // Links .navbar .nav > li > a { float: none; - padding: 10px 10px 11px; + // Vertically center the text given @navbarHeight + @elementHeight: 20px; + padding: ((@navbarHeight - @elementHeight) / 2 - 1) 10px ((@navbarHeight - @elementHeight) / 2 + 1); line-height: 19px; color: @navbarLinkColor; text-decoration: none; -- cgit v1.2.3 From a5552a1d700a1caa2d87ea4bbccc59205b6e72f9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 25 Mar 2012 12:42:47 -0700 Subject: revert bart's mixin fix --- less/button-groups.less | 12 +++++++----- less/buttons.less | 10 ++++++---- less/forms.less | 5 +++-- less/mixins.less | 46 +++++++++++++++++++++++----------------------- less/navbar.less | 1 - 5 files changed, 39 insertions(+), 35 deletions(-) (limited to 'less') diff --git a/less/button-groups.less b/less/button-groups.less index 81961123d..65c974a39 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -93,9 +93,10 @@ .btn-group .dropdown-toggle { padding-left: 8px; padding-right: 8px; - .box-shadow(inset 1px 0 0 rgba(255,255,255,.125), - inset 0 1px 0 rgba(255,255,255,.2), - 0 1px 2px rgba(0,0,0,.05)); + @shadow: inset 1px 0 0 rgba(255,255,255,.125), + inset 0 1px 0 rgba(255,255,255,.2), + 0 1px 2px rgba(0,0,0,.05); + .box-shadow(@shadow); *padding-top: 3px; *padding-bottom: 3px; } @@ -120,8 +121,9 @@ // Remove the gradient and set the same inset shadow as the :active state .dropdown-toggle { background-image: none; - .box-shadow(inset 0 2px 4px rgba(0,0,0,.15), - 0 1px 2px rgba(0,0,0,.05)); + @shadow: inset 0 2px 4px rgba(0,0,0,.15), + 0 1px 2px rgba(0,0,0,.05); + .box-shadow(@shadow); } // Keep the hover's background when dropdown is open diff --git a/less/buttons.less b/less/buttons.less index 4381fe995..46115248c 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -21,8 +21,9 @@ border: 1px solid @btnBorder; border-bottom-color: darken(@btnBorder, 10%); .border-radius(4px); - .box-shadow(inset 0 1px 0 rgba(255,255,255,.2), - 0 1px 2px rgba(0,0,0,.05)); + @shadow: inset 0 1px 0 rgba(255,255,255,.2), + 0 1px 2px rgba(0,0,0,.05); + .box-shadow(@shadow); cursor: pointer; // Give IE7 some love @@ -50,8 +51,9 @@ .btn.active, .btn:active { background-image: none; - .box-shadow(inset 0 2px 4px rgba(0,0,0,.15), - 0 1px 2px rgba(0,0,0,.05)); + @shadow: inset 0 2px 4px rgba(0,0,0,.15), + 0 1px 2px rgba(0,0,0,.05); + .box-shadow(@shadow); background-color: darken(@white, 10%); background-color: darken(@white, 15%) e("\9"); outline: 0; diff --git a/less/forms.less b/less/forms.less index e21845834..2164fe0ee 100644 --- a/less/forms.less +++ b/less/forms.less @@ -213,8 +213,9 @@ textarea { input:focus, textarea:focus { border-color: rgba(82,168,236,.8); - .box-shadow(inset 0 1px 1px rgba(0,0,0,.075), - 0 0 8px rgba(82,168,236,.6)); + @shadow: inset 0 1px 1px rgba(0,0,0,.075), + 0 0 8px rgba(82,168,236,.6); + .box-shadow(@shadow); outline: 0; outline: thin dotted \9; /* IE6-9 */ } diff --git a/less/mixins.less b/less/mixins.less index eb4e10379..e5471cabd 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -192,26 +192,26 @@ // -------------------------------------------------- // Border Radius -.border-radius(@radius: 5px, ...) { - -webkit-border-radius: @arguments; - -moz-border-radius: @arguments; - border-radius: @arguments; +.border-radius(@radius: 5px) { + -webkit-border-radius: @radius; + -moz-border-radius: @radius; + border-radius: @radius; } // Drop shadows -.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25), ...) { - -webkit-box-shadow: @arguments; - -moz-box-shadow: @arguments; - box-shadow: @arguments; +.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) { + -webkit-box-shadow: @shadow; + -moz-box-shadow: @shadow; + box-shadow: @shadow; } // Transitions -.transition(@transition, ...) { - -webkit-transition: @arguments; - -moz-transition: @arguments; - -ms-transition: @arguments; - -o-transition: @arguments; - transition: @arguments; +.transition(@transition) { + -webkit-transition: @transition; + -moz-transition: @transition; + -ms-transition: @transition; + -o-transition: @transition; + transition: @transition; } // Transformations @@ -253,18 +253,18 @@ // Background clipping // Heads up: FF 3.6 and under need "padding" instead of "padding-box" -.background-clip(@clip, ...) { - -webkit-background-clip: @arguments; - -moz-background-clip: @arguments; - background-clip: @arguments; +.background-clip(@clip) { + -webkit-background-clip: @clip; + -moz-background-clip: @clip; + background-clip: @clip; } // Background sizing -.background-size(@size, ...){ - -webkit-background-size: @arguments; - -moz-background-size: @arguments; - -o-background-size: @arguments; - background-size: @arguments; +.background-size(@size){ + -webkit-background-size: @size; + -moz-background-size: @size; + -o-background-size: @size; + background-size: @size; } diff --git a/less/navbar.less b/less/navbar.less index 711e67f7a..7d82e84a0 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -73,7 +73,6 @@ // Vertically center the text given @navbarHeight @elementHeight: 20px; padding: ((@navbarHeight - @elementHeight) / 2 - 2) 20px ((@navbarHeight - @elementHeight) / 2 + 2); - margin-left: -20px; // negative indent to left-align the text down the page font-size: 20px; font-weight: 200; -- cgit v1.2.3 From a62810918f8a27b5755258521422eb912a1edfd8 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sun, 25 Mar 2012 13:33:36 -0700 Subject: fix responsive navbar --- less/navbar.less | 2 +- less/responsive-navbar.less | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) (limited to 'less') diff --git a/less/navbar.less b/less/navbar.less index 7d82e84a0..f2f5153a7 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -16,7 +16,7 @@ // Gradient is applied to it's own element because overflow visible is not honored by IE when filter is present .navbar-inner { - height: @navbarHeight; + min-height: @navbarHeight; padding-left: 20px; padding-right: 20px; #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground); diff --git a/less/responsive-navbar.less b/less/responsive-navbar.less index 59e456a22..84b0f33f3 100644 --- a/less/responsive-navbar.less +++ b/less/responsive-navbar.less @@ -112,7 +112,7 @@ } // Hide everything in the navbar save .brand and toggle button */ - .nav-collapse { + .nav-collapse, .nav-collapse.collapse { overflow: hidden; height: 0; } @@ -128,4 +128,4 @@ height: auto !important; overflow: visible !important; } -} +} \ No newline at end of file -- cgit v1.2.3 From c0f28d81b06c9004d5860a623e333848710b5d53 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 25 Mar 2012 14:28:24 -0700 Subject: Remove black border on buttons in IE7: 1. Removed borders on .btn and increased line-height 2px to compensate 2. Set buttons to use the endColor of the gradient as the background-color by default for extra contrast between button and background 3. Set a 5% darker background-color on hover of buttons just for IE7 --- less/buttons.less | 5 +++++ less/mixins.less | 2 ++ 2 files changed, 7 insertions(+) (limited to 'less') diff --git a/less/buttons.less b/less/buttons.less index 46115248c..a1abb6ef7 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -28,6 +28,10 @@ // Give IE7 some love .ie7-restore-left-whitespace(); + + /* Remove the border to prevent IE7's black border on input:focus */ + *border: 0; + *line-height: 20px; } // Hover state @@ -35,6 +39,7 @@ color: @grayDark; text-decoration: none; background-color: darken(@white, 10%); + *background-color: darken(@white, 15%); /* Buttons in IE7 don't get borders, so darken on hover */ background-position: 0 -15px; // transition is only when going to hover, otherwise the background diff --git a/less/mixins.less b/less/mixins.less index e5471cabd..f3774a533 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -427,10 +427,12 @@ // gradientBar will set the background to a pleasing blend of these, to support IE<=9 .gradientBar(@startColor, @endColor); .reset-filter(); + *background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ // in these cases the gradient won't cover the background, so we override &:hover, &:active, &.active, &.disabled, &[disabled] { background-color: @endColor; + *background-color: darken(@endColor, 5%); } // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves -- cgit v1.2.3 From d0526e31fa291bd1ef943081ff7248e734edccb7 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 25 Mar 2012 14:31:04 -0700 Subject: remove padding on .search-query for IE7-8 since it doesn't pick up large border-radius --- less/forms.less | 2 ++ 1 file changed, 2 insertions(+) (limited to 'less') diff --git a/less/forms.less b/less/forms.less index 2164fe0ee..4f99cce8d 100644 --- a/less/forms.less +++ b/less/forms.less @@ -450,6 +450,8 @@ select:focus:required:invalid { .search-query { padding-left: 14px; padding-right: 14px; + padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */ + padding-right: 4px \9; margin-bottom: 0; // remove the default margin on all inputs .border-radius(14px); } -- cgit v1.2.3 From cbd77d0aeba4b4105dfcc51dc1298a0d00452869 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 25 Mar 2012 14:37:19 -0700 Subject: give IE7 inline-block behavior for input-prepend/append --- less/forms.less | 1 + 1 file changed, 1 insertion(+) (limited to 'less') diff --git a/less/forms.less b/less/forms.less index 4f99cce8d..72903faa2 100644 --- a/less/forms.less +++ b/less/forms.less @@ -475,6 +475,7 @@ select:focus:required:invalid { .input-prepend, .input-append { display: inline-block; + .ie7-inline-block(); margin-bottom: 0; } // Re-hide hidden elements due to specifity -- cgit v1.2.3 From 4c3e7690ba8b85b08c78344fb62cdef645d23093 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 25 Mar 2012 14:46:47 -0700 Subject: jankify the IE7 horizontal forms a bit more to account for no labels before .controls, per #2728 --- less/forms.less | 3 +++ 1 file changed, 3 insertions(+) (limited to 'less') diff --git a/less/forms.less b/less/forms.less index 72903faa2..6c7faf0e2 100644 --- a/less/forms.less +++ b/less/forms.less @@ -548,6 +548,9 @@ legend + .control-group { *display: inline-block; *margin-left: 0; *padding-left: 20px; + &:first-child { + *padding-left: 160px; + } } // Remove bottom margin on block level help text since that's accounted for on .control-group .help-block { -- cgit v1.2.3 From 95c2877ffca46aa5812b0b2b2ace6608d309586d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 25 Mar 2012 16:40:51 -0700 Subject: remove > in fluid grid selectors, fix double padding issue on fluid layout and example --- less/mixins.less | 4 ++-- less/responsive-767px-max.less | 5 +++++ 2 files changed, 7 insertions(+), 2 deletions(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index f3774a533..8e72f23cc 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -578,11 +578,11 @@ .row-fluid { width: 100%; .clearfix(); - > [class*="span"] { + [class*="span"] { float: left; margin-left: @fluidGridGutterWidth; } - > [class*="span"]:first-child { + [class*="span"]:first-child { margin-left: 0; } diff --git a/less/responsive-767px-max.less b/less/responsive-767px-max.less index bb4a449f8..7a3318a8f 100644 --- a/less/responsive-767px-max.less +++ b/less/responsive-767px-max.less @@ -75,11 +75,16 @@ padding-left: 20px; padding-right: 20px; } + // Negative indent the now static "fixed" navbar .navbar-fixed-top, .navbar-fixed-bottom { margin-left: -20px; margin-right: -20px; } + // Remove padding on container given explicit padding set on body + .container-fluid { + padding: 0; + } // GRID & CONTAINERS // ----------------- -- cgit v1.2.3 From 473e5714f756d9be81e9321d451bb05431dd28ee Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 25 Mar 2012 20:41:59 -0700 Subject: change all anchor alert closes to buttons --- less/close.less | 11 +++++++++++ 1 file changed, 11 insertions(+) (limited to 'less') diff --git a/less/close.less b/less/close.less index a0e5edba1..b3dd894f2 100644 --- a/less/close.less +++ b/less/close.less @@ -16,3 +16,14 @@ cursor: pointer; } } + +// Additional properties for button version +// iOS requires the button element instead of an anchor tag. +// If you want the anchor version, it requires `href="#"`. +button.close { + padding: 0; + cursor: pointer; + background-color: transparent; + border: 0; + -webkit-appearance: none; +} \ No newline at end of file -- cgit v1.2.3 From cffadd8c71be0c7595801623d39e5f545d0f4028 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 25 Mar 2012 22:28:43 -0700 Subject: add position relative to .dropup --- less/dropdowns.less | 1 + 1 file changed, 1 insertion(+) (limited to 'less') diff --git a/less/dropdowns.less b/less/dropdowns.less index b54e7eeec..afe7df4e2 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -2,6 +2,7 @@ // -------------- // Use the .menu class on any
  • element within the topbar or ul.tabs and you'll get some superfancy dropdowns +.dropup, .dropdown { position: relative; } -- cgit v1.2.3 From 2165ab262085c4c7e072453cbcaaed763742c94c Mon Sep 17 00:00:00 2001 From: Danny Keane Date: Wed, 28 Mar 2012 15:05:49 +0100 Subject: Added the back-face visibility css property to mixins.less, this property prevents the browser flickered experienced especially in Chrome when using 3D transformations. --- less/mixins.less | 9 +++++++++ 1 file changed, 9 insertions(+) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index 0074e8924..0ca4a555e 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -249,6 +249,15 @@ transform: translate(@x, @y, @z); } +// Back-face Visibility +// This prevents the browser flickering when using to CSS transformations +.backface-visibility(@visibility){ + -webkit-backface-visibility: @visibility; + -moz-backface-visibility: @visibility; + -ms-backface-visibility: @visibility; + backface-visibility: @visibility; +} + // Background clipping // Heads up: FF 3.6 and under need "padding" instead of "padding-box" .background-clip(@clip) { -- cgit v1.2.3 From e41584afb528f3e4f12d91ecd676e1be00d5febc Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 28 Mar 2012 17:02:13 -0700 Subject: fix #2829: redeclare .pull-right for navs since they get more specific floats --- less/navs.less | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'less') diff --git a/less/navs.less b/less/navs.less index 865098c8b..a02be18f0 100644 --- a/less/navs.less +++ b/less/navs.less @@ -21,6 +21,11 @@ background-color: @grayLighter; } +// Redeclare pull classes because of specifity +.nav > .pull-right { + float: right; +} + // Nav headers (for dropdowns and lists) .nav .nav-header { display: block; -- cgit v1.2.3 From 66743676ce83552fbab86ced2fc9e890d0dde6a6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 28 Mar 2012 17:41:40 -0700 Subject: moving css tests to less directory --- less/tests/css-tests.css | 35 +++++ less/tests/css-tests.html | 329 ++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 364 insertions(+) create mode 100644 less/tests/css-tests.css create mode 100644 less/tests/css-tests.html (limited to 'less') diff --git a/less/tests/css-tests.css b/less/tests/css-tests.css new file mode 100644 index 000000000..95067048d --- /dev/null +++ b/less/tests/css-tests.css @@ -0,0 +1,35 @@ +/*! + * Bootstrap CSS Tests + */ + + +/* Remove background image */ +body { + background-image: none; +} + +/* Space out subhead */ +.subhead { + margin-bottom: 36px; +} +h4 { + margin-bottom: 5px; +} + + +/* colgroup tests */ +.col1 { + background-color: rgba(255,0,0,.1); +} +.col2 { + background-color: rgba(0,255,0,.1); +} +.col3 { + background-color: rgba(0,0,255,.1); +} + + +/* Fluid row inputs */ +#fluidRowInputs .row-fluid > [class*=span] { + background-color: rgba(255,0,0,.1); +} diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html new file mode 100644 index 000000000..2e40b44c6 --- /dev/null +++ b/less/tests/css-tests.html @@ -0,0 +1,329 @@ + + + + + CSS Tests · Twitter Bootstrap + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    +
    + Bootstrap +
    +
    +
    + +
    + + + +
    +

    CSS Tests

    +

    One stop shop for quick debugging and edge-case tests of CSS.

    +
    + + + + + +
    +

    Tables

    +
    + +
    +
    +

    Bordered without thead

    + + + + + + + + + + + + + + + + + + +
    123
    123
    123
    +

    Bordered without thead, with caption

    + + + + + + + + + + + + + + + + + + + +
    Table caption
    123
    123
    123
    +

    Bordered without thead, with colgroup

    + + + + + + + + + + + + + + + + + + + + + + + +
    123
    123
    123
    +

    Bordered with thead, with colgroup

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    123
    123
    123
    123
    +
    +
    +

    Bordered with thead and caption

    + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Table caption
    123
    123
    123
    123
    +

    Bordered with rowspan and colspan

    + + + + + + + + + + + + + + + + + + + + + + + + + + +
    123
    1 and 23
    123
    13
    2 and 3
    +
    +
    + + + + + +
    +

    Forms

    +
    + +
    +
    +

    Prepend and append on inputs

    +
    +
    +
    + @ +
    +
    +
    +
    + @ +
    +
    +
    +
    + $.00 +
    +
    +
    +
    +
    +

    Prepend and append with uneditable

    +
    +
    + $Some value here +
    +
    + Some value here.00 +
    +
    +
    +
    + +

    Fluid row with inputs

    +

    Inputs should not extend past the light red background, set on their parent, a .span* column.

    +
    +
    +
    + +
    +
    + +
    +
    +
    +
    + +
    +
    +
    + + + + + + + + + + + + +
    + + + + + + + + + + + + + + + + + + + + + + + + + -- cgit v1.2.3 From 369ca13c7594a2b21e867fb4c139ebc21abd4d2e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 28 Mar 2012 17:52:03 -0700 Subject: fix homepage link in css-tests and remove second help text from example form --- less/tests/css-tests.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less') diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html index 2e40b44c6..6083b4142 100644 --- a/less/tests/css-tests.html +++ b/less/tests/css-tests.html @@ -37,7 +37,7 @@
    - Bootstrap + Bootstrap
    -- cgit v1.2.3 From 3308d1968f37eb81ef1578a409742e93813a8492 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 28 Mar 2012 18:18:41 -0700 Subject: fix #2846: Firefox required two clicks on selects to get to options dropdown --- less/forms.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less') diff --git a/less/forms.less b/less/forms.less index 6c7faf0e2..a57732c13 100644 --- a/less/forms.less +++ b/less/forms.less @@ -365,13 +365,13 @@ select:focus:required:invalid { input, select, .uneditable-input { + position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms *margin-left: 0; vertical-align: middle; .border-radius(0 3px 3px 0); // Make input on top when focused so blue border and shadow always show &:focus { - position: relative; z-index: 2; } } -- cgit v1.2.3 From 04baa07547692f75dd708afaf50700075df1a60a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 28 Mar 2012 18:25:27 -0700 Subject: document .backface-visibility and update comments and initial value --- less/mixins.less | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index 0be8227d7..7950f0e56 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -251,13 +251,15 @@ transform: translate(@x, @y, @z); } -// Back-face Visibility -// This prevents the browser flickering when using to CSS transformations -.backface-visibility(@visibility){ +// Backface visibility +// Prevent browsers from flickering when using CSS 3D transforms. +// Default value is `visible`, but can be changed to `hidden +// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples +.backface-visibility(@visibility: visible){ -webkit-backface-visibility: @visibility; - -moz-backface-visibility: @visibility; - -ms-backface-visibility: @visibility; - backface-visibility: @visibility; + -moz-backface-visibility: @visibility; + -ms-backface-visibility: @visibility; + backface-visibility: @visibility; } // Background clipping -- cgit v1.2.3 From 2bbc9a1cb225ded877b9228ebf714ccb74f07c6d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 28 Mar 2012 20:03:57 -0700 Subject: fix js links in css tests --- less/tests/css-tests.html | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) (limited to 'less') diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html index 6083b4142..1955ebbec 100644 --- a/less/tests/css-tests.html +++ b/less/tests/css-tests.html @@ -308,21 +308,21 @@ ================================================== --> - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + -- cgit v1.2.3 From 6564afbe7314d8bccdf202d3e4d9c02a070d6f96 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julius=20Graakj=C3=A6r=20Grantzau?= Date: Thu, 29 Mar 2012 14:56:53 +0300 Subject: Renaming @gridColumnGutter to @gridGutterWidth --- less/mixins.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index 0074e8924..158917c00 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -290,7 +290,7 @@ } // CSS3 Content Columns -.content-columns(@columnCount, @columnGap: @gridColumnGutter) { +.content-columns(@columnCount, @columnGap: @gridGutterWidth) { -webkit-column-count: @columnCount; -moz-column-count: @columnCount; column-count: @columnCount; -- 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/mixins.less | 3 ++- less/responsive.less | 1 + less/tests/css-tests.html | 53 ++++++++++++++++++++++++++++++++++++++++++++--- 3 files changed, 53 insertions(+), 4 deletions(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index 9cef3f1ed..b3fea77db 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -577,7 +577,7 @@ .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) { .spanX (@index) when (@index > 0) { - (~"> .span@{index}") { .span(@index); } + (~".span@{index}") { .span(@index); } .spanX(@index - 1); } .spanX (0) {} @@ -590,6 +590,7 @@ width: 100%; .clearfix(); [class*="span"] { + .input-block-level(); float: left; margin-left: @fluidGridGutterWidth; } 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 // ------------------------------------------------------------- diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html index 1955ebbec..42cdab045 100644 --- a/less/tests/css-tests.html +++ b/less/tests/css-tests.html @@ -269,14 +269,61 @@

    Inputs should not extend past the light red background, set on their parent, a .span* column.

    -
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    -
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    -
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    -- cgit v1.2.3 From 56ecc6ba96550d8e66d0484c21fc20da5f8e52e6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 31 Mar 2012 12:31:56 -0700 Subject: clarify use of dropdowns, href, and data-target for js docs; add tests to css tests page for it's display and execution in html --- less/tests/css-tests.html | 43 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) (limited to 'less') diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html index 42cdab045..f6f4b2351 100644 --- a/less/tests/css-tests.html +++ b/less/tests/css-tests.html @@ -330,8 +330,51 @@
    +
    + + + +
    +

    Dropdowns

    +
    +

    Dropdown link with hash URL

    + + +

    Dropdown link with custom URL and data-target

    + -- cgit v1.2.3 From 2355fd224ddcd571765c5ad2f2242dac65789aa4 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 31 Mar 2012 21:06:16 -0700 Subject: remove @shadow instances and replace with escaped values, update mixins to not use a default value at all --- less/button-groups.less | 9 ++------- less/buttons.less | 8 ++------ less/forms.less | 4 +--- less/mixins.less | 20 ++++++++++---------- less/navbar.less | 9 +++------ less/responsive-navbar.less | 3 +-- 6 files changed, 19 insertions(+), 34 deletions(-) (limited to 'less') diff --git a/less/button-groups.less b/less/button-groups.less index 65c974a39..1261ba5cc 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -93,10 +93,7 @@ .btn-group .dropdown-toggle { padding-left: 8px; padding-right: 8px; - @shadow: inset 1px 0 0 rgba(255,255,255,.125), - inset 0 1px 0 rgba(255,255,255,.2), - 0 1px 2px rgba(0,0,0,.05); - .box-shadow(@shadow); + .box-shadow(~"inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)"); *padding-top: 3px; *padding-bottom: 3px; } @@ -121,9 +118,7 @@ // Remove the gradient and set the same inset shadow as the :active state .dropdown-toggle { background-image: none; - @shadow: inset 0 2px 4px rgba(0,0,0,.15), - 0 1px 2px rgba(0,0,0,.05); - .box-shadow(@shadow); + .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)"); } // Keep the hover's background when dropdown is open diff --git a/less/buttons.less b/less/buttons.less index a1abb6ef7..4deec92a9 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -21,9 +21,7 @@ border: 1px solid @btnBorder; border-bottom-color: darken(@btnBorder, 10%); .border-radius(4px); - @shadow: inset 0 1px 0 rgba(255,255,255,.2), - 0 1px 2px rgba(0,0,0,.05); - .box-shadow(@shadow); + .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)"); cursor: pointer; // Give IE7 some love @@ -56,9 +54,7 @@ .btn.active, .btn:active { background-image: none; - @shadow: inset 0 2px 4px rgba(0,0,0,.15), - 0 1px 2px rgba(0,0,0,.05); - .box-shadow(@shadow); + .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)"); background-color: darken(@white, 10%); background-color: darken(@white, 15%) e("\9"); outline: 0; diff --git a/less/forms.less b/less/forms.less index a57732c13..1945bda60 100644 --- a/less/forms.less +++ b/less/forms.less @@ -213,9 +213,7 @@ textarea { input:focus, textarea:focus { border-color: rgba(82,168,236,.8); - @shadow: inset 0 1px 1px rgba(0,0,0,.075), - 0 0 8px rgba(82,168,236,.6); - .box-shadow(@shadow); + .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)"); outline: 0; outline: thin dotted \9; /* IE6-9 */ } diff --git a/less/mixins.less b/less/mixins.less index b3fea77db..71532fcff 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -70,11 +70,11 @@ // Sizing shortcuts // ------------------------- -.size(@height: 5px, @width: 5px) { +.size(@height, @width) { width: @width; height: @height; } -.square(@size: 5px) { +.square(@size) { .size(@size, @size); } @@ -192,14 +192,14 @@ // -------------------------------------------------- // Border Radius -.border-radius(@radius: 5px) { +.border-radius(@radius) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } // Drop shadows -.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) { +.box-shadow(@shadow) { -webkit-box-shadow: @shadow; -moz-box-shadow: @shadow; box-shadow: @shadow; @@ -229,21 +229,21 @@ -o-transform: scale(@ratio); transform: scale(@ratio); } -.translate(@x: 0, @y: 0) { +.translate(@x, @y) { -webkit-transform: translate(@x, @y); -moz-transform: translate(@x, @y); -ms-transform: translate(@x, @y); -o-transform: translate(@x, @y); transform: translate(@x, @y); } -.skew(@x: 0, @y: 0) { +.skew(@x, @y) { -webkit-transform: skew(@x, @y); -moz-transform: skew(@x, @y); -ms-transform: skew(@x, @y); -o-transform: skew(@x, @y); transform: skew(@x, @y); } -.translate3d(@x: 0, @y: 0, @z: 0) { +.translate3d(@x, @y, @z) { -webkit-transform: translate(@x, @y, @z); -moz-transform: translate(@x, @y, @z); -ms-transform: translate(@x, @y, @z); @@ -255,7 +255,7 @@ // Prevent browsers from flickering when using CSS 3D transforms. // Default value is `visible`, but can be changed to `hidden // See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples -.backface-visibility(@visibility: visible){ +.backface-visibility(@visibility){ -webkit-backface-visibility: @visibility; -moz-backface-visibility: @visibility; -ms-backface-visibility: @visibility; @@ -297,7 +297,7 @@ } // Resize anything -.resizable(@direction: both) { +.resizable(@direction) { resize: @direction; // Options: horizontal, vertical, both overflow: auto; // Safari fix } @@ -313,7 +313,7 @@ } // Opacity -.opacity(@opacity: 100) { +.opacity(@opacity) { opacity: @opacity / 100; filter: ~"alpha(opacity=@{opacity})"; } diff --git a/less/navbar.less b/less/navbar.less index f2f5153a7..6816a6ab9 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -21,8 +21,7 @@ padding-right: 20px; #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground); .border-radius(4px); - @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1); - .box-shadow(@shadow); + .box-shadow(~"0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1)"); } // Set width to auto for default container @@ -39,8 +38,7 @@ margin-left: 5px; margin-right: 5px; .buttonBackground(@navbarBackgroundHighlight, @navbarBackground); - @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075); - .box-shadow(@shadow); + .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)"); } .btn-navbar .icon-bar { display: block; @@ -143,8 +141,7 @@ color: @white; background-color: @navbarSearchBackground; border: 1px solid @navbarSearchBorder; - @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15); - .box-shadow(@shadow); + .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15)"); .transition(none); // Placeholder text gets special styles; can't be a grouped selector diff --git a/less/responsive-navbar.less b/less/responsive-navbar.less index 84b0f33f3..2f1c4925a 100644 --- a/less/responsive-navbar.less +++ b/less/responsive-navbar.less @@ -93,8 +93,7 @@ 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); + .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)"); } // Pull right (secondary) nav content .navbar .nav.pull-right { -- cgit v1.2.3 From f37d9aeaef12c3019112fa915b7bd4d927652a15 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 31 Mar 2012 21:31:01 -0700 Subject: fix #2856: make inputs using .span* classes responsive at <767px layout --- less/responsive-767px-max.less | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) (limited to 'less') diff --git a/less/responsive-767px-max.less b/less/responsive-767px-max.less index 7a3318a8f..ba34b29a6 100644 --- a/less/responsive-767px-max.less +++ b/less/responsive-767px-max.less @@ -100,9 +100,9 @@ .row { margin-left: 0; } - // Make all columns even - .row > [class*="span"], - .row-fluid > [class*="span"] { + // Make all grid-sized elements block level again + [class*="span"], + .row-fluid [class*="span"] { float: none; display: block; width: auto; @@ -125,8 +125,11 @@ .input-block-level(); } // 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; } -- cgit v1.2.3 From d652af10971d79cde92336700e156c63ff2c0b24 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 31 Mar 2012 23:53:54 -0700 Subject: fix #2860: truncate .dl-horizontal terms and reset to stacked for <767px layouts --- less/responsive-767px-max.less | 15 +++++++++++++++ less/type.less | 1 + 2 files changed, 16 insertions(+) (limited to 'less') diff --git a/less/responsive-767px-max.less b/less/responsive-767px-max.less index ba34b29a6..b2202b5b7 100644 --- a/less/responsive-767px-max.less +++ b/less/responsive-767px-max.less @@ -86,6 +86,21 @@ padding: 0; } + // 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 diff --git a/less/type.less b/less/type.less index 4e1407b85..779e85960 100644 --- a/less/type.less +++ b/less/type.less @@ -135,6 +135,7 @@ dd { // Horizontal layout (like forms) .dl-horizontal { dt { + .text-overflow(); float: left; clear: left; width: 120px; -- cgit v1.2.3 From 33fa705c7fa9cc9e8c255cc2e161336ba21b3cff Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 1 Apr 2012 00:15:04 -0700 Subject: fix #2811: left and right aligned tabbable tabs fixes so that .tab-content grows to match parent's width --- less/navs.less | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) (limited to 'less') diff --git a/less/navs.less b/less/navs.less index a02be18f0..4f4b6c327 100644 --- a/less/navs.less +++ b/less/navs.less @@ -266,8 +266,7 @@ .clearfix(); } .tab-content { - display: table; // prevent content from running below tabs - width: 100%; + overflow: auto; // prevent content from running below tabs } // Remove border on bottom, left, right @@ -314,10 +313,6 @@ // ------------ // Common styles -.tabs-left .tab-content, -.tabs-right .tab-content { - width: auto; -} .tabs-left .nav-tabs > li, .tabs-right .nav-tabs > li { float: none; -- cgit v1.2.3 From fe05f9aeb259733de4598014db9df9193cc01ea2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 1 Apr 2012 00:59:34 -0700 Subject: fix #2572: streamline thumbnails css to allow for offsets --- less/responsive-1200px-min.less | 3 --- less/responsive-767px-max.less | 6 ----- less/tests/css-tests.html | 50 +++++++++++++++++++++++++++++++++++++++-- less/thumbnails.less | 9 ++++++-- 4 files changed, 55 insertions(+), 13 deletions(-) (limited to 'less') diff --git a/less/responsive-1200px-min.less b/less/responsive-1200px-min.less index 9e77a113d..ecb847b37 100644 --- a/less/responsive-1200px-min.less +++ b/less/responsive-1200px-min.less @@ -16,8 +16,5 @@ .thumbnails { margin-left: -30px; } - .thumbnails > li { - margin-left: 30px; - } } diff --git a/less/responsive-767px-max.less b/less/responsive-767px-max.less index b2202b5b7..4b8b41fbe 100644 --- a/less/responsive-767px-max.less +++ b/less/responsive-767px-max.less @@ -124,12 +124,6 @@ margin: 0; } - // THUMBNAILS - // ---------- - .thumbnails [class*="span"] { - width: auto; - } - // FORM FIELDS // ----------- // Make span* classes full width diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html index f6f4b2351..7cf76524b 100644 --- a/less/tests/css-tests.html +++ b/less/tests/css-tests.html @@ -329,9 +329,9 @@
    -
    + @@ -339,7 +339,6 @@

    Dropdowns

    -

    Dropdown link with hash URL

    • Link
      • @@ -375,6 +374,53 @@
    • +
    + + + + +
    +

    Thumbnails

    +
    + +

    Offset thumbnails

    + + + + diff --git a/less/thumbnails.less b/less/thumbnails.less index 3a12d4e50..0dfabdf06 100644 --- a/less/thumbnails.less +++ b/less/thumbnails.less @@ -1,15 +1,19 @@ // THUMBNAILS // ---------- +// Make wrapper ul behave like the grid .thumbnails { margin-left: -@gridGutterWidth; list-style: none; .clearfix(); } + +// Float li to make thumbnails appear in a row .thumbnails > li { - float: left; - margin: 0 0 @baseLineHeight @gridGutterWidth; + margin-bottom: @baseLineHeight; } + +// The actual thumbnail (can be `a` or `div`) .thumbnail { display: block; padding: 4px; @@ -23,6 +27,7 @@ a.thumbnail:hover { border-color: @linkColor; .box-shadow(0 1px 4px rgba(0,105,214,.25)); } + // Images and captions .thumbnail > img { display: block; -- cgit v1.2.3 From 647f1c98eda0f150e54e9193181acb462a3b9357 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 1 Apr 2012 01:05:00 -0700 Subject: fix #2296: allow fluid thumbnails --- less/responsive-1200px-min.less | 3 +++ less/tests/css-tests.html | 23 ++++++++++++++++++++++- less/thumbnails.less | 4 ++++ 3 files changed, 29 insertions(+), 1 deletion(-) (limited to 'less') diff --git a/less/responsive-1200px-min.less b/less/responsive-1200px-min.less index ecb847b37..3331cfe5b 100644 --- a/less/responsive-1200px-min.less +++ b/less/responsive-1200px-min.less @@ -16,5 +16,8 @@ .thumbnails { margin-left: -30px; } + .row-fluid .thumbnails { + margin-left: 0; + } } diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html index 7cf76524b..255a078b3 100644 --- a/less/tests/css-tests.html +++ b/less/tests/css-tests.html @@ -421,7 +421,28 @@ - +

    Fluid thumbnails

    +
    +
    + +
    +
    diff --git a/less/thumbnails.less b/less/thumbnails.less index 0dfabdf06..7fa77afa9 100644 --- a/less/thumbnails.less +++ b/less/thumbnails.less @@ -7,6 +7,10 @@ list-style: none; .clearfix(); } +// Fluid rows have no left margin +.row-fluid .thumbnails { + margin-left: 0; +} // Float li to make thumbnails appear in a row .thumbnails > li { -- cgit v1.2.3 From 574592cba5dc8c7db9f62b83ff91bc679f98a10e Mon Sep 17 00:00:00 2001 From: Alec Rust Date: Sun, 1 Apr 2012 17:25:43 +0200 Subject: Corrected "resises" to "resides" --- less/modals.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less') diff --git a/less/modals.less b/less/modals.less index 4fccea738..870ad0dfe 100644 --- a/less/modals.less +++ b/less/modals.less @@ -56,7 +56,7 @@ .close { margin-top: 2px; } } -// Body (where all modal content resises) +// Body (where all modal content resides) .modal-body { overflow-y: auto; max-height: 400px; -- cgit v1.2.3 From 030265eaecf2c7287df6fac1ba45e1057ff37483 Mon Sep 17 00:00:00 2001 From: Bryan Petty Date: Sun, 1 Apr 2012 16:22:52 -0600 Subject: Restrict collapsed items in Navbar to only those in .nav-collapse, and buttons in Navbar. --- less/navbar.less | 76 +++++++++++++++++++++++++++------------------ less/navs.less | 8 ++--- less/responsive-navbar.less | 47 +++++++++++++++++----------- 3 files changed, 79 insertions(+), 52 deletions(-) (limited to 'less') diff --git a/less/navbar.less b/less/navbar.less index 6816a6ab9..a5122e75c 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -30,27 +30,6 @@ width: auto; } -// Navbar button for toggling navbar items in responsive layouts -.btn-navbar { - display: none; - float: right; - padding: 7px 10px; - margin-left: 5px; - margin-right: 5px; - .buttonBackground(@navbarBackgroundHighlight, @navbarBackground); - .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)"); -} -.btn-navbar .icon-bar { - display: block; - width: 18px; - height: 2px; - background-color: #f5f5f5; - .border-radius(1px); - .box-shadow(0 1px 0 rgba(0,0,0,.25)); -} -.btn-navbar .icon-bar + .icon-bar { - margin-top: 3px; -} // Override the default collapsed state .nav-collapse.collapse { height: auto; @@ -233,6 +212,21 @@ text-decoration: none; text-shadow: 0 -1px 0 rgba(0,0,0,.25); } +// Buttons +.navbar .btn { + display: inline-block; + padding: 4px 10px 4px; + // Vertically center the button given @navbarHeight + @elementHeight: 28px; + margin: ((@navbarHeight - @elementHeight) / 2 - 1) 5px ((@navbarHeight - @elementHeight) / 2); + line-height: @baseLineHeight; +} +.navbar .btn-group { + margin: 0; + // Vertically center the button given @navbarHeight + @elementHeight: 28px; + padding: ((@navbarHeight - @elementHeight) / 2 - 1) 5px ((@navbarHeight - @elementHeight) / 2); +} // Hover .navbar .nav > li > a:hover { background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active @@ -264,6 +258,28 @@ margin-right: 0; } +// Navbar button for toggling navbar items in responsive layouts +// These definitions need to come after '.navbar .btn' +.navbar .btn-navbar { + display: none; + float: right; + padding: 7px 10px; + margin-left: 5px; + margin-right: 5px; + .buttonBackground(@navbarBackgroundHighlight, @navbarBackground); + .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)"); +} +.navbar .btn-navbar .icon-bar { + display: block; + width: 18px; + height: 2px; + background-color: #f5f5f5; + .border-radius(1px); + .box-shadow(0 1px 0 rgba(0,0,0,.25)); +} +.btn-navbar .icon-bar + .icon-bar { + margin-top: 3px; +} // Dropdown menus @@ -310,31 +326,31 @@ } } // Dropdown toggle caret -.navbar .nav .dropdown-toggle .caret, -.navbar .nav .open .caret { +.navbar .nav li.dropdown .dropdown-toggle .caret, +.navbar .nav li.dropdown.open .caret { border-top-color: @white; border-bottom-color: @white; } -.navbar .nav .active .caret { +.navbar .nav li.dropdown.active .caret { .opacity(100); } // Remove background color from open dropdown -.navbar .nav .open > .dropdown-toggle, -.navbar .nav .active > .dropdown-toggle, -.navbar .nav .open.active > .dropdown-toggle { +.navbar .nav li.dropdown.open > .dropdown-toggle, +.navbar .nav li.dropdown.active > .dropdown-toggle, +.navbar .nav li.dropdown.open.active > .dropdown-toggle { background-color: transparent; } // Dropdown link on hover -.navbar .nav .active > .dropdown-toggle:hover { +.navbar .nav li.dropdown.active > .dropdown-toggle:hover { color: @white; } // Right aligned menus need alt position // TODO: rejigger this at some point to simplify the selectors -.navbar .nav.pull-right .dropdown-menu, -.navbar .nav .dropdown-menu.pull-right { +.navbar .pull-right .dropdown-menu, +.navbar .dropdown-menu.pull-right { left: auto; right: 0; &:before { diff --git a/less/navs.less b/less/navs.less index 4f4b6c327..e06795c2b 100644 --- a/less/navs.less +++ b/less/navs.less @@ -234,14 +234,14 @@ // ------------------------- .nav-tabs .open .dropdown-toggle, .nav-pills .open .dropdown-toggle, -.nav > .open.active > a:hover { +.nav > li.dropdown.open.active > a:hover { color: @white; background-color: @grayLight; border-color: @grayLight; } -.nav .open .caret, -.nav .open.active .caret, -.nav .open a:hover .caret { +.nav li.dropdown.open .caret, +.nav li.dropdown.open.active .caret, +.nav li.dropdown.open a:hover .caret { border-top-color: @white; border-bottom-color: @white; .opacity(100); diff --git a/less/responsive-navbar.less b/less/responsive-navbar.less index 2f1c4925a..39b164ac5 100644 --- a/less/responsive-navbar.less +++ b/less/responsive-navbar.less @@ -31,40 +31,51 @@ clear: left; } // Block-level the nav - .navbar .nav { + .navbar .nav-collapse .nav { float: none; margin: 0 0 (@baseLineHeight / 2); } - .navbar .nav > li { + .navbar .nav-collapse .nav > li { float: none; } - .navbar .nav > li > a { + .navbar .nav-collapse .nav > li > a { margin-bottom: 2px; } - .navbar .nav > .divider-vertical { + .navbar .nav-collapse .nav > .divider-vertical { display: none; } - .navbar .nav .nav-header { + .navbar .nav-collapse .nav .nav-header { color: @navbarText; text-shadow: none; } // Nav and dropdown links in navbar - .navbar .nav > li > a, - .navbar .dropdown-menu a { + .navbar .nav-collapse .nav > li > a, + .navbar .nav-collapse .dropdown-menu a { padding: 6px 15px; font-weight: bold; color: @navbarLinkColor; .border-radius(3px); } - .navbar .dropdown-menu li + li a { + // Buttons + .navbar .nav-collapse .btn { + padding: 4px 10px 4px; + font-weight: normal; + .border-radius(4px); + } + .navbar .nav-collapse .dropdown-menu li + li a { margin-bottom: 2px; } - .navbar .nav > li > a:hover, - .navbar .dropdown-menu a:hover { + .navbar .nav-collapse .nav > li > a:hover, + .navbar .nav-collapse .dropdown-menu a:hover { background-color: @navbarBackground; } + // Buttons in the navbar + .navbar .nav-collapse.in .btn-group { + margin-top: 5px; + padding: 0; + } // Dropdowns in the navbar - .navbar .dropdown-menu { + .navbar .nav-collapse .dropdown-menu { position: static; top: auto; left: auto; @@ -78,16 +89,16 @@ .border-radius(0); .box-shadow(none); } - .navbar .dropdown-menu:before, - .navbar .dropdown-menu:after { + .navbar .nav-collapse .dropdown-menu:before, + .navbar .nav-collapse .dropdown-menu:after { display: none; } - .navbar .dropdown-menu .divider { + .navbar .nav-collapse .dropdown-menu .divider { display: none; } // Forms in navbar - .navbar-form, - .navbar-search { + .nav-collapse .navbar-form, + .nav-collapse .navbar-search { float: none; padding: (@baseLineHeight / 2) 15px; margin: (@baseLineHeight / 2) 0; @@ -96,7 +107,7 @@ .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)"); } // Pull right (secondary) nav content - .navbar .nav.pull-right { + .navbar .nav-collapse .nav.pull-right { float: none; margin-left: 0; } @@ -106,7 +117,7 @@ padding-right: 10px; } // Navbar button - .btn-navbar { + .navbar .btn-navbar { display: block; } -- cgit v1.2.3 From 2988de6377d8ccc456af6d4ef1b3064c6c5a1f3b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 2 Apr 2012 22:37:58 -0700 Subject: fix #2913: get more specific with button group selectors --- less/button-groups.less | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) (limited to 'less') diff --git a/less/button-groups.less b/less/button-groups.less index 1261ba5cc..7c6a02a67 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -25,14 +25,14 @@ } // Float them, remove border radius, then re-add to first and last elements -.btn-group .btn { +.btn-group > .btn { position: relative; float: left; margin-left: -1px; .border-radius(0); } // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match -.btn-group .btn:first-child { +.btn-group > .btn:first-child { margin-left: 0; -webkit-border-top-left-radius: 4px; -moz-border-radius-topleft: 4px; @@ -41,8 +41,8 @@ -moz-border-radius-bottomleft: 4px; border-bottom-left-radius: 4px; } -.btn-group .btn:last-child, -.btn-group .dropdown-toggle { +.btn-group > .btn:last-child, +.btn-group > .dropdown-toggle { -webkit-border-top-right-radius: 4px; -moz-border-radius-topright: 4px; border-top-right-radius: 4px; @@ -51,7 +51,7 @@ border-bottom-right-radius: 4px; } // Reset corners for large buttons -.btn-group .btn.large:first-child { +.btn-group > .btn.large:first-child { margin-left: 0; -webkit-border-top-left-radius: 6px; -moz-border-radius-topleft: 6px; @@ -60,8 +60,8 @@ -moz-border-radius-bottomleft: 6px; border-bottom-left-radius: 6px; } -.btn-group .btn.large:last-child, -.btn-group .large.dropdown-toggle { +.btn-group > .btn.large:last-child, +.btn-group > .large.dropdown-toggle { -webkit-border-top-right-radius: 6px; -moz-border-radius-topright: 6px; border-top-right-radius: 6px; @@ -71,10 +71,10 @@ } // On hover/focus/active, bring the proper btn to front -.btn-group .btn:hover, -.btn-group .btn:focus, -.btn-group .btn:active, -.btn-group .btn.active { +.btn-group > .btn:hover, +.btn-group > .btn:focus, +.btn-group > .btn:active, +.btn-group > .btn.active { z-index: 2; } @@ -90,24 +90,24 @@ // ---------------------- // Give the line between buttons some depth -.btn-group .dropdown-toggle { +.btn-group > .dropdown-toggle { padding-left: 8px; padding-right: 8px; .box-shadow(~"inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)"); *padding-top: 3px; *padding-bottom: 3px; } -.btn-group .btn-mini.dropdown-toggle { +.btn-group > .btn-mini.dropdown-toggle { padding-left: 5px; padding-right: 5px; *padding-top: 1px; *padding-bottom: 1px; } -.btn-group .btn-small.dropdown-toggle { +.btn-group > .btn-small.dropdown-toggle { *padding-top: 4px; *padding-bottom: 4px; } -.btn-group .btn-large.dropdown-toggle { +.btn-group > .btn-large.dropdown-toggle { padding-left: 12px; padding-right: 12px; } -- cgit v1.2.3 From 2ea437f353a636a277320513db04ced4fc0f7da2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 2 Apr 2012 22:49:19 -0700 Subject: fix #2908: unfloat inputs using .span* in fluid row --- less/forms.less | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) (limited to 'less') diff --git a/less/forms.less b/less/forms.less index 1945bda60..240de5ed2 100644 --- a/less/forms.less +++ b/less/forms.less @@ -242,7 +242,12 @@ select:focus { input[class*="span"], select[class*="span"], textarea[class*="span"], -.uneditable-input[class*="span"] { +.uneditable-input[class*="span"], +// Redeclare since the fluid row class is more specific +.row-fluid input[class*="span"], +.row-fluid select[class*="span"], +.row-fluid textarea[class*="span"], +.row-fluid .uneditable-input[class*="span"] { float: none; margin-left: 0; } -- cgit v1.2.3 From ff57f595624de553dabc9fe334c273d6376763a1 Mon Sep 17 00:00:00 2001 From: Alec Rust Date: Tue, 3 Apr 2012 12:15:36 +0200 Subject: Corrected spacing --- less/mixins.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index 0074e8924..2493a6151 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -302,7 +302,7 @@ // Opacity .opacity(@opacity: 100) { opacity: @opacity / 100; - filter: ~"alpha(opacity=@{opacity})"; + filter: ~"alpha(opacity=@{opacity})"; } -- cgit v1.2.3 From fedce0cec70a56713f95d36585f9e3adaad2c332 Mon Sep 17 00:00:00 2001 From: Arnold Daniels Date: Thu, 5 Apr 2012 23:08:32 +0300 Subject: Allow multiple buttons in `.input-prepend` and `.input-append`. This has a look similar to button groups. --- less/forms.less | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) (limited to 'less') diff --git a/less/forms.less b/less/forms.less index 8d9c25308..1da8d7500 100644 --- a/less/forms.less +++ b/less/forms.less @@ -391,7 +391,7 @@ select:focus:required:invalid { } .add-on, .btn { - .border-radius(3px 0 0 3px); + .border-radius(0); } .active { background-color: lighten(@green, 30); @@ -403,6 +403,10 @@ select:focus:required:invalid { .btn { margin-right: -1px; } + .add-on:first-child, + .btn:first-child { + .border-radius(3px 0 0 3px); + } } .input-append { input, @@ -417,6 +421,9 @@ select:focus:required:invalid { .add-on, .btn { margin-left: -1px; + } + .add-on:last-child, + .btn:last-child { .border-radius(0 3px 3px 0); } } -- cgit v1.2.3 From 4b81c0dff371edad2afd5df77c957265235e34b1 Mon Sep 17 00:00:00 2001 From: Bryan Petty Date: Thu, 5 Apr 2012 13:48:17 -0600 Subject: Changed .nav-collapse to clear both instead of left, and added compiled files. --- less/responsive-navbar.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less') diff --git a/less/responsive-navbar.less b/less/responsive-navbar.less index 39b164ac5..4d2bc60c4 100644 --- a/less/responsive-navbar.less +++ b/less/responsive-navbar.less @@ -28,7 +28,7 @@ } // Nav collapse clears brand .navbar .nav-collapse { - clear: left; + clear: both; } // Block-level the nav .navbar .nav-collapse .nav { -- cgit v1.2.3 From 10ff5f16a64bf9b5cc45ba42e30cbf191e866eec Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Apr 2012 14:25:58 -0700 Subject: fix #2968 manually: add consolas to monospace font stack --- less/variables.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less') diff --git a/less/variables.less b/less/variables.less index 35fa11265..30dd73b8b 100644 --- a/less/variables.less +++ b/less/variables.less @@ -47,7 +47,7 @@ // ------------------------- @sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif; @serifFontFamily: Georgia, "Times New Roman", Times, serif; -@monoFontFamily: Menlo, Monaco, "Courier New", monospace; +@monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace; @baseFontSize: 13px; @baseFontFamily: @sansFontFamily; -- cgit v1.2.3 From 798363eda743f4e04bf8dd30964ee97f49e86a79 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Apr 2012 14:31:55 -0700 Subject: fix left margin on .thumbnails for responsive <767 --- less/responsive-767px-max.less | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'less') diff --git a/less/responsive-767px-max.less b/less/responsive-767px-max.less index 4b8b41fbe..9655981af 100644 --- a/less/responsive-767px-max.less +++ b/less/responsive-767px-max.less @@ -111,8 +111,9 @@ .row-fluid { width: 100%; } - // Undo negative margin on rows - .row { + // Undo negative margin on rows and thumbnails + .row, + .thumbnails { margin-left: 0; } // Make all grid-sized elements block level again @@ -121,7 +122,7 @@ float: none; display: block; width: auto; - margin: 0; + margin-left: 0; } // FORM FIELDS -- cgit v1.2.3 From 0a71f171bc63dcfea42fe002bab00454d728fc42 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Apr 2012 16:17:15 -0700 Subject: readd bootstrap.zip, add @inputBorderRadius var to close #2946 --- less/forms.less | 14 +++++++------- less/variables.less | 1 + 2 files changed, 8 insertions(+), 7 deletions(-) (limited to 'less') diff --git a/less/forms.less b/less/forms.less index 240de5ed2..d8cb54909 100644 --- a/less/forms.less +++ b/less/forms.less @@ -72,7 +72,7 @@ select, line-height: @baseLineHeight; color: @gray; border: 1px solid @inputBorder; - .border-radius(3px); + .border-radius(@inputBorderRadius); } .uneditable-textarea { width: auto; @@ -372,7 +372,7 @@ select:focus:required:invalid { margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms *margin-left: 0; vertical-align: middle; - .border-radius(0 3px 3px 0); + .border-radius(0 @inputBorderRadius @inputBorderRadius 0); // Make input on top when focused so blue border and shadow always show &:focus { z-index: 2; @@ -397,7 +397,7 @@ select:focus:required:invalid { } .add-on, .btn { - .border-radius(3px 0 0 3px); + .border-radius(@inputBorderRadius 0 0 @inputBorderRadius); } .active { background-color: lighten(@green, 30); @@ -414,7 +414,7 @@ select:focus:required:invalid { input, select, .uneditable-input { - .border-radius(3px 0 0 3px); + .border-radius(@inputBorderRadius 0 0 @inputBorderRadius); } .uneditable-input { border-left-color: #eee; @@ -423,7 +423,7 @@ select:focus:required:invalid { .add-on, .btn { margin-left: -1px; - .border-radius(0 3px 3px 0); + .border-radius(0 @inputBorderRadius @inputBorderRadius 0); } } // Remove all border-radius for inputs with both prepend and append @@ -436,12 +436,12 @@ select:focus:required:invalid { .add-on:first-child, .btn:first-child { margin-right: -1px; - .border-radius(3px 0 0 3px); + .border-radius(@inputBorderRadius 0 0 @inputBorderRadius); } .add-on:last-child, .btn:last-child { margin-left: -1px; - .border-radius(0 3px 3px 0); + .border-radius(0 @inputBorderRadius @inputBorderRadius 0); } } diff --git a/less/variables.less b/less/variables.less index 30dd73b8b..a9e3d4082 100644 --- a/less/variables.less +++ b/less/variables.less @@ -96,6 +96,7 @@ // ------------------------- @inputBackground: @white; @inputBorder: #ccc; +@inputBorderRadius: 3px; @inputDisabledBackground: @grayLighter; @formActionsBackground: #f5f5f5; -- cgit v1.2.3 From 0b2d23d4439429cdbd0758d01f4602e6b2afde6d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Apr 2012 23:41:09 -0700 Subject: add larger .input-* to block reset for responsive <767 --- less/responsive-767px-max.less | 3 +++ 1 file changed, 3 insertions(+) (limited to 'less') diff --git a/less/responsive-767px-max.less b/less/responsive-767px-max.less index 9655981af..614c6905c 100644 --- a/less/responsive-767px-max.less +++ b/less/responsive-767px-max.less @@ -128,6 +128,9 @@ // FORM FIELDS // ----------- // Make span* classes full width + .input-large, + .input-xlarge, + .input-xxlarge, input[class*="span"], select[class*="span"], textarea[class*="span"], -- cgit v1.2.3 From 5b85ed181a75b286ac4e898173da7b65e20e6d8a Mon Sep 17 00:00:00 2001 From: Bryan Petty Date: Tue, 10 Apr 2012 15:19:10 -0600 Subject: Fixed extra margin on Navbar buttons. --- less/navbar.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less') diff --git a/less/navbar.less b/less/navbar.less index a5122e75c..adfe1096a 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -74,7 +74,7 @@ .navbarVerticalAlign(30px); // Vertically center in navbar } .btn-group .btn { - margin-top: 0; // then undo the margin here so we don't accidentally double it + margin: 0; // then undo the margin here so we don't accidentally double it } } -- cgit v1.2.3 From a7d8145a321036e39a91fc9648710e62f7f164ac Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 14 Apr 2012 13:18:37 -0700 Subject: fix #3036: add bg color to inputs --- less/forms.less | 1 + 1 file changed, 1 insertion(+) (limited to 'less') diff --git a/less/forms.less b/less/forms.less index 60eff0043..dafe1c5c3 100644 --- a/less/forms.less +++ b/less/forms.less @@ -71,6 +71,7 @@ select, font-size: @baseFontSize; line-height: @baseLineHeight; color: @gray; + background-color: @inputBackground; border: 1px solid @inputBorder; .border-radius(@inputBorderRadius); } -- cgit v1.2.3 From 8575a452942001bce522e8e258d9e192d24cb6ec Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 14 Apr 2012 13:31:48 -0700 Subject: alt fix to #3029: change to single border-radii properties --- less/tables.less | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) (limited to 'less') diff --git a/less/tables.less b/less/tables.less index cdc794edc..8d4f534bc 100644 --- a/less/tables.less +++ b/less/tables.less @@ -92,20 +92,29 @@ table { // For first th or td in the first row in the first thead or tbody thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child { - .border-radius(4px 0 0 0); + -webkit-border-top-left-radius: 4px; + -moz-border-radius-topleft: 4px; + border-top-left-radius: 4px; } thead:first-child tr:first-child th:last-child, tbody:first-child tr:first-child td:last-child { - .border-radius(0 4px 0 0); + -webkit-border-top-right-radius: 4px; + -moz-border-radius-topright: 4px; + border-top-right-radius: 4px; } // For first th or td in the first row in the first thead or tbody thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child { .border-radius(0 0 0 4px); + -webkit-border-bottom-left-radius: 4px; + -moz-border-radius-bottomleft: 4px; + border-bottom-left-radius: 4px; } thead:last-child tr:last-child th:last-child, tbody:last-child tr:last-child td:last-child { - .border-radius(0 0 4px 0); + -webkit-border-bottom-right-radius: 4px; + -moz-border-radius-bottomright: 4px; + border-bottom-right-radius: 4px; } } -- cgit v1.2.3 From dbde2dc9e40f077af4fcaa1714ade7bc94398da9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 14 Apr 2012 17:15:16 -0700 Subject: adding icon classes to finish off glyphicons 1.6 update --- less/sprites.less | 43 ++++++++++++++++++++++++++++++++++++++----- 1 file changed, 38 insertions(+), 5 deletions(-) (limited to 'less') diff --git a/less/sprites.less b/less/sprites.less index 4014d70a5..aafe86933 100644 --- a/less/sprites.less +++ b/less/sprites.less @@ -6,8 +6,8 @@ // ICONS // ----- -// All icons receive the styles of the tag with a base class -// of .i and are then given a unique class to add width, height, +// All icons receive the styles of the tag with a base class +// of .i and are then given a unique class to add width, height, // and background-position. Your resulting HTML will look like // . @@ -149,10 +149,43 @@ .icon-comment { background-position: -240px -120px; } .icon-magnet { background-position: -264px -120px; } .icon-chevron-up { background-position: -288px -120px; } -.icon-chevron-down { background-position: -313px -119px; } // 1px off +.icon-chevron-down { background-position: -313px -119px; } // 1px, 1px off .icon-retweet { background-position: -336px -120px; } .icon-shopping-cart { background-position: -360px -120px; } .icon-folder-close { background-position: -384px -120px; } .icon-folder-open { background-position: -408px -120px; } -.icon-resize-vertical { background-position: -432px -119px; } -.icon-resize-horizontal { background-position: -456px -118px; } +.icon-resize-vertical { background-position: -432px -119px; } // 1px, 1px off +.icon-resize-horizontal { background-position: -456px -118px; } // 1px, 2px off + +.icon-hdd { background-position: 0 -144px; } +.icon-bullhorn { background-position: -24px -144px; } +.icon-bell { background-position: -48px -144px; } +.icon-certificate { background-position: -72px -144px; } +.icon-thumbs-up { background-position: -96px -144px; } +.icon-thumbs-down { background-position: -120px -144px; } +.icon-hand-right { background-position: -144px -144px; } +.icon-hand-left { background-position: -168px -144px; } +.icon-hand-up { background-position: -192px -144px; } +.icon-hand-down { background-position: -216px -144px; } +.icon-circle-arrow-right { background-position: -240px -144px; } +.icon-circle-arrow-left { background-position: -264px -144px; } +.icon-circle-arrow-up { background-position: -288px -144px; } +.icon-circle-arrow-down { background-position: -312px -144px; } +.icon-globe { background-position: -336px -144px; } +.icon-wrench { background-position: -360px -144px; } +.icon-tasks { background-position: -384px -144px; } +.icon-filter { background-position: -408px -144px; } +.icon-briefcase { background-position: -432px -144px; } +.icon-fullscreen { background-position: -456px -144px; } + + + + + + + + + + + + -- cgit v1.2.3 From fc7ae48c95af554cb36e4b52482c262ac34aa47f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 14 Apr 2012 18:47:27 -0700 Subject: fix #1823: styles of tabs within other tabs resolved --- less/navs.less | 44 ++++++++++++++++++++++---------------------- less/tests/css-tests.html | 43 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 65 insertions(+), 22 deletions(-) (limited to 'less') diff --git a/less/navs.less b/less/navs.less index 4f4b6c327..a0cdad64a 100644 --- a/less/navs.less +++ b/less/navs.less @@ -270,9 +270,9 @@ } // Remove border on bottom, left, right -.tabs-below .nav-tabs, -.tabs-right .nav-tabs, -.tabs-left .nav-tabs { +.tabs-below > .nav-tabs, +.tabs-right > .nav-tabs, +.tabs-left > .nav-tabs { border-bottom: 0; } @@ -290,22 +290,22 @@ // BOTTOM // ------ -.tabs-below .nav-tabs { +.tabs-below > .nav-tabs { border-top: 1px solid #ddd; } -.tabs-below .nav-tabs > li { +.tabs-below > .nav-tabs > li { margin-top: -1px; margin-bottom: 0; } -.tabs-below .nav-tabs > li > a { +.tabs-below > .nav-tabs > li > a { .border-radius(0 0 4px 4px); &:hover { border-bottom-color: transparent; border-top-color: #ddd; } } -.tabs-below .nav-tabs .active > a, -.tabs-below .nav-tabs .active > a:hover { +.tabs-below > .nav-tabs > .active > a, +.tabs-below > .nav-tabs > .active > a:hover { border-color: transparent #ddd #ddd #ddd; } @@ -313,51 +313,51 @@ // ------------ // Common styles -.tabs-left .nav-tabs > li, -.tabs-right .nav-tabs > li { +.tabs-left > .nav-tabs > li, +.tabs-right > .nav-tabs > li { float: none; } -.tabs-left .nav-tabs > li > a, -.tabs-right .nav-tabs > li > a { +.tabs-left > .nav-tabs > li > a, +.tabs-right > .nav-tabs > li > a { min-width: 74px; margin-right: 0; margin-bottom: 3px; } // Tabs on the left -.tabs-left .nav-tabs { +.tabs-left > .nav-tabs { float: left; margin-right: 19px; border-right: 1px solid #ddd; } -.tabs-left .nav-tabs > li > a { +.tabs-left > .nav-tabs > li > a { margin-right: -1px; .border-radius(4px 0 0 4px); } -.tabs-left .nav-tabs > li > a:hover { +.tabs-left > .nav-tabs > li > a:hover { border-color: @grayLighter #ddd @grayLighter @grayLighter; } -.tabs-left .nav-tabs .active > a, -.tabs-left .nav-tabs .active > a:hover { +.tabs-left > .nav-tabs .active > a, +.tabs-left > .nav-tabs .active > a:hover { border-color: #ddd transparent #ddd #ddd; *border-right-color: @white; } // Tabs on the right -.tabs-right .nav-tabs { +.tabs-right > .nav-tabs { float: right; margin-left: 19px; border-left: 1px solid #ddd; } -.tabs-right .nav-tabs > li > a { +.tabs-right > .nav-tabs > li > a { margin-left: -1px; .border-radius(0 4px 4px 0); } -.tabs-right .nav-tabs > li > a:hover { +.tabs-right > .nav-tabs > li > a:hover { border-color: @grayLighter @grayLighter @grayLighter #ddd; } -.tabs-right .nav-tabs .active > a, -.tabs-right .nav-tabs .active > a:hover { +.tabs-right > .nav-tabs .active > a, +.tabs-right > .nav-tabs .active > a:hover { border-color: #ddd #ddd #ddd transparent; *border-left-color: @white; } diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html index 255a078b3..8dad598c9 100644 --- a/less/tests/css-tests.html +++ b/less/tests/css-tests.html @@ -445,6 +445,49 @@ + + +
    + +
    +
    +

    I'm in Section 1.

    + +
    + +
    +
    +

    I'm in Section 1.1.

    +
    +
    +

    I'm in Section 1.2.

    +
    +
    +

    I'm in Section 1.3.

    +
    +
    +
    +
    +
    +

    Howdy, I'm in Section 2.

    +
    +
    +

    What up girl, this is Section 3.

    +
    +
    +
    + + + -- cgit v1.2.3 From 16855b920e05b86aa7c54bfef050f1a81e5526cc Mon Sep 17 00:00:00 2001 From: au-phiware Date: Sun, 15 Apr 2012 12:31:07 +1000 Subject: Silence comment (just like the others) --- less/forms.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less') diff --git a/less/forms.less b/less/forms.less index 8d9c25308..60b216971 100644 --- a/less/forms.less +++ b/less/forms.less @@ -538,7 +538,7 @@ legend + .control-group { // Move over all input controls and content .controls { margin-left: 160px; - /* Super jank IE7 fix to ensure the inputs in .input-append and input-prepend don't inherit the margin of the parent, in this case .controls */ + // Super jank IE7 fix to ensure the inputs in .input-append and input-prepend don't inherit the margin of the parent, in this case .controls *display: inline-block; *margin-left: 0; *padding-left: 20px; -- cgit v1.2.3 From a6f27ebed440919aac6f62e73e6748bfecd00ab9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 14 Apr 2012 23:06:00 -0700 Subject: ditch the .navbar in the selectors since it's the same specificity level, and thus superfluous --- less/responsive-navbar.less | 55 ++++++++++++++++++++++++--------------------- 1 file changed, 30 insertions(+), 25 deletions(-) (limited to 'less') diff --git a/less/responsive-navbar.less b/less/responsive-navbar.less index 4d2bc60c4..d49b8ae12 100644 --- a/less/responsive-navbar.less +++ b/less/responsive-navbar.less @@ -26,56 +26,59 @@ padding-right: 10px; margin: 0 0 0 -5px; } + + // COLLAPSIBLE NAVBAR + // ------------------ // Nav collapse clears brand - .navbar .nav-collapse { + .nav-collapse { clear: both; } // Block-level the nav - .navbar .nav-collapse .nav { + .nav-collapse .nav { float: none; margin: 0 0 (@baseLineHeight / 2); } - .navbar .nav-collapse .nav > li { + .nav-collapse .nav > li { float: none; } - .navbar .nav-collapse .nav > li > a { + .nav-collapse .nav > li > a { margin-bottom: 2px; } - .navbar .nav-collapse .nav > .divider-vertical { + .nav-collapse .nav > .divider-vertical { display: none; } - .navbar .nav-collapse .nav .nav-header { + .nav-collapse .nav .nav-header { color: @navbarText; text-shadow: none; } // Nav and dropdown links in navbar - .navbar .nav-collapse .nav > li > a, - .navbar .nav-collapse .dropdown-menu a { + .nav-collapse .nav > li > a, + .nav-collapse .dropdown-menu a { padding: 6px 15px; font-weight: bold; color: @navbarLinkColor; .border-radius(3px); } // Buttons - .navbar .nav-collapse .btn { + .nav-collapse .btn { padding: 4px 10px 4px; font-weight: normal; .border-radius(4px); } - .navbar .nav-collapse .dropdown-menu li + li a { + .nav-collapse .dropdown-menu li + li a { margin-bottom: 2px; } - .navbar .nav-collapse .nav > li > a:hover, - .navbar .nav-collapse .dropdown-menu a:hover { + .nav-collapse .nav > li > a:hover, + .nav-collapse .dropdown-menu a:hover { background-color: @navbarBackground; } // Buttons in the navbar - .navbar .nav-collapse.in .btn-group { + .nav-collapse.in .btn-group { margin-top: 5px; padding: 0; } // Dropdowns in the navbar - .navbar .nav-collapse .dropdown-menu { + .nav-collapse .dropdown-menu { position: static; top: auto; left: auto; @@ -89,11 +92,11 @@ .border-radius(0); .box-shadow(none); } - .navbar .nav-collapse .dropdown-menu:before, - .navbar .nav-collapse .dropdown-menu:after { + .nav-collapse .dropdown-menu:before, + .nav-collapse .dropdown-menu:after { display: none; } - .navbar .nav-collapse .dropdown-menu .divider { + .nav-collapse .dropdown-menu .divider { display: none; } // Forms in navbar @@ -111,20 +114,22 @@ float: none; margin-left: 0; } - // Static navbar - .navbar-static .navbar-inner { - padding-left: 10px; - padding-right: 10px; + // 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; } - // Hide everything in the navbar save .brand and toggle button */ - .nav-collapse, .nav-collapse.collapse { - overflow: hidden; - height: 0; + // STATIC NAVBAR + // ------------- + .navbar-static .navbar-inner { + padding-left: 10px; + padding-right: 10px; } } -- cgit v1.2.3 From 9e9be2dc0db5148e14a9fe2164dafd79c7dd71cd Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 14 Apr 2012 23:19:42 -0700 Subject: fix #2989: clear .checkbox/.radio floats --- less/forms.less | 1 + 1 file changed, 1 insertion(+) (limited to 'less') diff --git a/less/forms.less b/less/forms.less index 1367b1fd9..dd18b91f5 100644 --- a/less/forms.less +++ b/less/forms.less @@ -172,6 +172,7 @@ input[type="hidden"] { // Indent the labels to position radios/checkboxes as hanging .radio, .checkbox { + overflow: auto; // clear the floating input if there is no label text padding-left: 18px; } .radio input[type="radio"], -- cgit v1.2.3 From 13e4d1d5ac90484c09ecb1a98e540309d043a6f7 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 15 Apr 2012 00:35:30 -0700 Subject: fix #2990: text wrapping in .uneditable-input --- less/forms.less | 3 +++ 1 file changed, 3 insertions(+) (limited to 'less') diff --git a/less/forms.less b/less/forms.less index dd18b91f5..409de0a24 100644 --- a/less/forms.less +++ b/less/forms.less @@ -331,6 +331,9 @@ select:focus:required:invalid { border-color: #eee; .box-shadow(inset 0 1px 2px rgba(0,0,0,.025)); cursor: not-allowed; + // prevent text from wrapping, but still cut it off like an input does + overflow: hidden; + white-space: nowrap; } // Placeholder text gets special styles; can't be bundled together though for some reason -- cgit v1.2.3 From d374fe92e57cc75fa3bc1e664b96ed7f2191c7e0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 15 Apr 2012 16:48:17 -0700 Subject: simplify the left margin for offset grid columns --- less/mixins.less | 2 +- less/tests/css-tests.html | 16 ++++++++++++++++ 2 files changed, 17 insertions(+), 1 deletion(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index 73e6ade56..22666b21c 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -546,7 +546,7 @@ .offsetX (0) {} .offset (@columns) { - margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2); + margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns + 1)); } .span (@columns) { diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html index 8dad598c9..58e25be61 100644 --- a/less/tests/css-tests.html +++ b/less/tests/css-tests.html @@ -374,6 +374,19 @@ + +

    Dropdown on a button

    + +
    @@ -445,6 +458,7 @@ + @@ -491,6 +505,8 @@ + +