From 452d8c1df0fe75acfc9431a0b0f349f85a6c1fd1 Mon Sep 17 00:00:00 2001 From: David Hirtle Date: Fri, 4 May 2012 13:50:16 -0700 Subject: Gradient mixins blow up in IE7/8 if you happen to use rgba() colors as params --- less/mixins.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index b107955f5..7ee6a2ae9 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -352,7 +352,7 @@ background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10 background-image: linear-gradient(left, @startColor, @endColor); // Le standard background-repeat: repeat-x; - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down } .vertical(@startColor: #555, @endColor: #333) { background-color: mix(@startColor, @endColor, 60%); @@ -363,7 +363,7 @@ background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10 background-image: linear-gradient(top, @startColor, @endColor); // The standard background-repeat: repeat-x; - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down } .directional(@startColor: #555, @endColor: #333, @deg: 45deg) { background-color: @endColor; @@ -383,7 +383,7 @@ background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor); background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor); background-repeat: no-repeat; - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down, gets no color-stop at all for proper fallback + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback } .radial(@innerColor: #555, @outerColor: #333) { background-color: @outerColor; -- cgit v1.2.3 From a7b49a7d92a0efa640179b775e309002afc50390 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Thu, 17 May 2012 00:23:11 -0700 Subject: nearly everything working with activedescendant... then decide it's wrong. --- less/dropdowns.less | 15 +++++++++++++-- less/navbar.less | 5 ++++- 2 files changed, 17 insertions(+), 3 deletions(-) (limited to 'less') diff --git a/less/dropdowns.less b/less/dropdowns.less index 96dfec223..c27e73ded 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -34,11 +34,16 @@ margin-top: 8px; margin-left: 2px; } -.dropdown:hover .caret, +.dropdown a:focus .caret, +.dropdown a:hover .caret, .open .caret { .opacity(100); } +.navbar .nav .open > a { + color: @navbarLinkColorActive; +} + // The dropdown menu (ul) // ---------------------- .dropdown-menu { @@ -90,11 +95,17 @@ // ----------- .dropdown-menu li > a:hover, .dropdown-menu .active > a, -.dropdown-menu .active > a:hover { +.dropdown-menu .active > a:hover, +.dropdown-menu:hover #aria-active > a:hover, +.dropdown-menu #aria-active > a { color: @dropdownLinkColorHover; text-decoration: none; background-color: @dropdownLinkBackgroundHover; } +.dropdown-menu:hover #aria-active > a { + color: @dropdownLinkColor; + background-color: @dropdownBackground; +} // Open state for the dropdown // --------------------------- diff --git a/less/navbar.less b/less/navbar.less index 4faa7255b..f6717dcfa 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -228,6 +228,7 @@ padding: ((@navbarHeight - @elementHeight) / 2 - 1) 5px ((@navbarHeight - @elementHeight) / 2); } // Hover +.navbar .nav > li > a:focus, .navbar .nav > li > a:hover { background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active color: @navbarLinkColorHover; @@ -236,7 +237,8 @@ // Active nav items .navbar .nav .active > a, -.navbar .nav .active > a:hover { +.navbar .nav .active > a:hover, +.navbar .nav .active > a:focus { color: @navbarLinkColorActive; text-decoration: none; background-color: @navbarLinkBackgroundActive; @@ -343,6 +345,7 @@ } // Dropdown link on hover +.navbar .nav li.dropdown.active > .dropdown-toggle:focus, .navbar .nav li.dropdown.active > .dropdown-toggle:hover { color: @white; } -- cgit v1.2.3 From 9889948f5851f5ce19668073b1f88eb4b6082ea6 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Thu, 17 May 2012 00:39:14 -0700 Subject: abandon activedescendant because it was awful --- less/dropdowns.less | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) (limited to 'less') diff --git a/less/dropdowns.less b/less/dropdowns.less index c27e73ded..42d7bd0ca 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -94,17 +94,13 @@ // Hover state // ----------- .dropdown-menu li > a:hover, +.dropdown-menu li > a:focus, .dropdown-menu .active > a, -.dropdown-menu .active > a:hover, -.dropdown-menu:hover #aria-active > a:hover, -.dropdown-menu #aria-active > a { +.dropdown-menu .active > a:hover { color: @dropdownLinkColorHover; text-decoration: none; background-color: @dropdownLinkBackgroundHover; -} -.dropdown-menu:hover #aria-active > a { - color: @dropdownLinkColor; - background-color: @dropdownBackground; + outline: 0; } // Open state for the dropdown -- cgit v1.2.3 From ad9bfeef7a27cb470f520798cd806cb310f4e9c8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 2 Jun 2012 22:34:20 -0700 Subject: fix cut off icons --- less/sprites.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'less') diff --git a/less/sprites.less b/less/sprites.less index 72a3a916b..753871cd7 100644 --- a/less/sprites.less +++ b/less/sprites.less @@ -145,7 +145,7 @@ .icon-warning-sign { background-position: -144px -120px; } .icon-plane { background-position: -168px -120px; } .icon-calendar { background-position: -192px -120px; } -.icon-random { background-position: -216px -120px; } +.icon-random { background-position: -216px -120px; width: 16px; } .icon-comment { background-position: -240px -120px; } .icon-magnet { background-position: -264px -120px; } .icon-chevron-up { background-position: -288px -120px; } @@ -153,7 +153,7 @@ .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-folder-open { background-position: -408px -120px; width: 16px; } .icon-resize-vertical { background-position: -432px -119px; } // 1px, 1px off .icon-resize-horizontal { background-position: -456px -118px; } // 1px, 2px off -- cgit v1.2.3 From eb3a4b8f759299e4157bd32deb6016587f48acb4 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 4 Jun 2012 08:33:42 -0700 Subject: fix placeholder for FF by attaching input and textarea when we call the mixin --- less/forms.less | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'less') diff --git a/less/forms.less b/less/forms.less index 1163fe914..56f215d6c 100644 --- a/less/forms.less +++ b/less/forms.less @@ -343,7 +343,10 @@ select:focus:required:invalid { } // Placeholder text gets special styles; can't be bundled together though for some reason -.placeholder(); +input, +textarea { + .placeholder(); +} -- cgit v1.2.3 From 5563b8448eb4472743605cb006473387ebf1529a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 4 Jun 2012 08:45:51 -0700 Subject: fix #3693: rounded corners on search form --- 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 56f215d6c..10c586ee0 100644 --- a/less/forms.less +++ b/less/forms.less @@ -468,7 +468,7 @@ textarea { // SEARCH FORM // ----------- -.search-query { +input.search-query { padding-right: 14px; padding-right: 4px \9; padding-left: 14px; -- cgit v1.2.3 From eef87c96afb281e343b9ad6345220b41457a85d7 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 4 Jun 2012 20:27:42 -0700 Subject: #3684: reset width to auto for input type='image' --- less/forms.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'less') diff --git a/less/forms.less b/less/forms.less index 10c586ee0..633ad4551 100644 --- a/less/forms.less +++ b/less/forms.less @@ -139,7 +139,8 @@ input[type="checkbox"] { cursor: pointer; } -// Reset width of input buttons, radios, checkboxes +// Reset width of input images, buttons, radios, checkboxes +input[type="image"], input[type="submit"], input[type="reset"], input[type="button"], -- cgit v1.2.3 From f8d68002dc22a15a84c0a4dff5a5851ff131c9c8 Mon Sep 17 00:00:00 2001 From: Igor Rzegocki Date: Wed, 9 May 2012 15:50:13 +0200 Subject: Added offsets for .row-fluid --- less/mixins.less | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index 4f204d1af..47353bcc5 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -596,6 +596,17 @@ } .spanX (0) {} + .offsetX (@index) when (@index > 0) { + (~'.offset@{index}, .row-fluid > .offset@{index}[class*="span"]') { .offset(@index); } + .offsetX(@index - 1); + } + .offsetX (0) {} + + .offset (@columns) { + margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + @fluidGridGutterWidth; + *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%); + } + .span (@columns) { width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)); *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%); @@ -614,8 +625,9 @@ margin-left: 0; } - // generate .spanX + // generate .spanX and .offsetX .spanX (@gridColumns); + .offsetX (@gridColumns); } } -- cgit v1.2.3 From c3f5d7c62d49de8de9947e84e9186bd2bf374008 Mon Sep 17 00:00:00 2001 From: Marcus Schwab Date: Thu, 7 Jun 2012 14:36:45 -0700 Subject: ajgon's fluid offsets working with first-child --- less/mixins.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) mode change 100644 => 100755 less/mixins.less (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less old mode 100644 new mode 100755 index 47353bcc5..8f89beb79 --- a/less/mixins.less +++ b/less/mixins.less @@ -597,7 +597,7 @@ .spanX (0) {} .offsetX (@index) when (@index > 0) { - (~'.offset@{index}, .row-fluid > .offset@{index}[class*="span"]') { .offset(@index); } + (~'.offset@{index}, .row-fluid .offset@{index}:first-child') { .offset(@index); } .offsetX(@index - 1); } .offsetX (0) {} -- cgit v1.2.3 From f2e39233f54a733df54d5d998abd79233e0f143f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 10 Jun 2012 15:12:02 -0700 Subject: rewrite alerts and progress bars sections --- less/alerts.less | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) (limited to 'less') diff --git a/less/alerts.less b/less/alerts.less index 46a0d77bf..1f73314c1 100644 --- a/less/alerts.less +++ b/less/alerts.less @@ -11,9 +11,6 @@ .border-radius(4px); color: @warningText; } -.alert-heading { - color: inherit; -} // Adjust close link position .alert .close { @@ -28,7 +25,7 @@ .alert-success { background-color: @successBackground; - border-color: @successBorder; + border-color: @successBorder; color: @successText; } .alert-danger, -- cgit v1.2.3 From bd19b42c15108b3c60407924a1725473660120d9 Mon Sep 17 00:00:00 2001 From: Marcus Schwab Date: Mon, 11 Jun 2012 01:51:19 -0700 Subject: Proper spacing between offsets row-fluids don't have the same negative margin-left as rows. This was throwing everything off. So added a different rule for first-child and subsequent "spans". --- less/mixins.less | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) mode change 100755 => 100644 less/mixins.less (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less old mode 100755 new mode 100644 index 8f89beb79..8698ab0e3 --- a/less/mixins.less +++ b/less/mixins.less @@ -597,14 +597,20 @@ .spanX (0) {} .offsetX (@index) when (@index > 0) { - (~'.offset@{index}, .row-fluid .offset@{index}:first-child') { .offset(@index); } + (~'.offset@{index}') { .offset(@index); } + (~'.offset@{index}:first-child') { .offsetFirstChild(@index); } .offsetX(@index - 1); } .offsetX (0) {} .offset (@columns) { - margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + @fluidGridGutterWidth; - *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%); + margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth*2); + *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + (@fluidGridGutterWidth*2) - (.5 / @gridRowWidth * 100 * 1%); + } + + .offsetFirstChild (@columns) { + margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth); + *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%); } .span (@columns) { -- cgit v1.2.3 From 7b726f974f5e00c57b1087bb62d516943d9a58e3 Mon Sep 17 00:00:00 2001 From: alienlebarge Date: Thu, 14 Jun 2012 14:53:04 +0200 Subject: fix responsive height of image --- less/reset.less | 1 + 1 file changed, 1 insertion(+) (limited to 'less') diff --git a/less/reset.less b/less/reset.less index 2332e03c3..738eef997 100644 --- a/less/reset.less +++ b/less/reset.less @@ -76,6 +76,7 @@ sub { img { max-width: 100%; // Make images inherently responsive + height: auto; // Make images inherently responsive vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic; -- cgit v1.2.3 From b1cb5565039f492766fdfd727f776f3e9dfa7e45 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 14 Jun 2012 11:56:46 -0700 Subject: improve inline-block of append/prepend inputs with font-size: 0; --- less/forms.less | 3 +++ 1 file changed, 3 insertions(+) (limited to 'less') diff --git a/less/forms.less b/less/forms.less index 633ad4551..9f5e721bb 100644 --- a/less/forms.less +++ b/less/forms.less @@ -380,12 +380,14 @@ textarea { .input-prepend, .input-append { margin-bottom: 5px; + font-size: 0; 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; + font-size: @baseFontSize; vertical-align: middle; .border-radius(0 @inputBorderRadius @inputBorderRadius 0); // Make input on top when focused so blue border and shadow always show @@ -402,6 +404,7 @@ textarea { height: @baseLineHeight; min-width: 16px; padding: 4px 5px; + font-size: @baseFontSize; font-weight: normal; line-height: @baseLineHeight; text-align: center; -- cgit v1.2.3 From fb31cdba9c839ffa1b75993534f6c682daf1a468 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Robichet?= Date: Fri, 15 Jun 2012 15:23:40 +0300 Subject: Remove useless ms prefixes --- less/mixins.less | 16 +++------------- 1 file changed, 3 insertions(+), 13 deletions(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index 4f204d1af..94ad7adc7 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -213,7 +213,6 @@ .transition(@transition) { -webkit-transition: @transition; -moz-transition: @transition; - -ms-transition: @transition; -o-transition: @transition; transition: @transition; } @@ -250,7 +249,6 @@ .translate3d(@x, @y, @z) { -webkit-transform: translate(@x, @y, @z); -moz-transform: translate(@x, @y, @z); - -ms-transform: translate(@x, @y, @z); -o-transform: translate(@x, @y, @z); transform: translate(@x, @y, @z); } @@ -262,7 +260,6 @@ .backface-visibility(@visibility){ -webkit-backface-visibility: @visibility; -moz-backface-visibility: @visibility; - -ms-backface-visibility: @visibility; backface-visibility: @visibility; } @@ -287,7 +284,6 @@ .box-sizing(@boxmodel) { -webkit-box-sizing: @boxmodel; -moz-box-sizing: @boxmodel; - -ms-box-sizing: @boxmodel; box-sizing: @boxmodel; } @@ -361,22 +357,20 @@ .horizontal(@startColor: #555, @endColor: #333) { background-color: @endColor; background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+ - background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10 background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+ background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10 - background-image: linear-gradient(left, @startColor, @endColor); // Le standard + background-image: linear-gradient(left, @startColor, @endColor); // Le standard, IE10 background-repeat: repeat-x; filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down } .vertical(@startColor: #555, @endColor: #333) { background-color: mix(@startColor, @endColor, 60%); background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+ - background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+ background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10 - background-image: linear-gradient(top, @startColor, @endColor); // The standard + background-image: linear-gradient(top, @startColor, @endColor); // The standard, IE10 background-repeat: repeat-x; filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down } @@ -384,17 +378,15 @@ background-color: @endColor; background-repeat: repeat-x; background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+ - background-image: -ms-linear-gradient(@deg, @startColor, @endColor); // IE10 background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+ background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10 - background-image: linear-gradient(@deg, @startColor, @endColor); // The standard + background-image: linear-gradient(@deg, @startColor, @endColor); // The standard, IE10 } .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { background-color: mix(@midColor, @endColor, 80%); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor)); background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor); background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor); - background-image: -ms-linear-gradient(@startColor, @midColor @colorStop, @endColor); background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor); background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor); background-repeat: no-repeat; @@ -405,7 +397,6 @@ background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor)); background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor); background-image: -moz-radial-gradient(circle, @innerColor, @outerColor); - background-image: -ms-radial-gradient(circle, @innerColor, @outerColor); background-image: -o-radial-gradient(circle, @innerColor, @outerColor); background-repeat: no-repeat; } @@ -414,7 +405,6 @@ background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); - background-image: -ms-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); } -- cgit v1.2.3 From 626b45d691f9fc6c5ebc914ad0238bd8990e9c0b Mon Sep 17 00:00:00 2001 From: Ross Laird Date: Fri, 15 Jun 2012 13:07:44 -0700 Subject: Corrected spelling error --- less/navbar.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'less') diff --git a/less/navbar.less b/less/navbar.less index 7a5c84648..d535158a5 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -14,7 +14,7 @@ margin-bottom: @baseLineHeight; } -// Gradient is applied to it's own element because overflow visible is not honored by IE when filter is present +// Gradient is applied to its own element because overflow visible is not honored by IE when filter is present .navbar-inner { min-height: @navbarHeight; padding-left: 20px; @@ -358,4 +358,4 @@ left: auto; right: 13px; } -} \ No newline at end of file +} -- cgit v1.2.3 From 3add79c071b3682c294bb4c50b8c008f9b91d0d8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 17 Jun 2012 12:40:36 -0700 Subject: #3864: use @baseLineHeight in alerts.less --- less/alerts.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less') diff --git a/less/alerts.less b/less/alerts.less index 1f73314c1..f8b2a888a 100644 --- a/less/alerts.less +++ b/less/alerts.less @@ -17,7 +17,7 @@ position: relative; top: -2px; right: -21px; - line-height: 18px; + line-height: @baseLineHeight; } // Alternate styles -- cgit v1.2.3 From 9aa5a6db12fcbc1638610132c1a0f64633325f44 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 19 Jun 2012 13:21:35 -0700 Subject: updated tests and homepage marketing copy --- less/tests/css-tests.html | 21 ++++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) (limited to 'less') diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html index b7177e5c6..017aa84f1 100644 --- a/less/tests/css-tests.html +++ b/less/tests/css-tests.html @@ -472,17 +472,21 @@
- @ + @ +
- @ + + @
- $.00 + $ + + .00
@@ -491,10 +495,17 @@

Prepend and append with uneditable

- $Some value here + $ + Some value here
- Some value here.00 + Some value here + .00 +
+
+ $ + Some value here + .00
-- cgit v1.2.3 From d14f06fc4ed3f4753de9ae5ef247c48629714935 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 19 Jun 2012 13:25:35 -0700 Subject: round select list corners --- 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 9f5e721bb..4f9d9f3e1 100644 --- a/less/forms.less +++ b/less/forms.less @@ -85,6 +85,7 @@ input[type="color"], font-size: @baseFontSize; line-height: @baseLineHeight; color: @gray; + .border-radius(@inputBorderRadius); } // Reset appearance properties for textual inputs and textarea @@ -116,7 +117,6 @@ input[type="color"], .uneditable-input { background-color: @inputBackground; border: 1px solid @inputBorder; - .border-radius(@inputBorderRadius); .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); @transition: border linear .2s, box-shadow linear .2s; .transition(@transition); -- cgit v1.2.3 From 64ba423b6d06c98e95e23d8c34df62a47a421a03 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 19 Jun 2012 13:52:07 -0700 Subject: #2764: add disabled styles to navs and dropdowns --- less/dropdowns.less | 14 ++++++++++++++ less/navs.less | 16 ++++++++++++++++ 2 files changed, 30 insertions(+) (limited to 'less') diff --git a/less/dropdowns.less b/less/dropdowns.less index f965d292d..648a9f246 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -103,6 +103,20 @@ outline: 0; } +// Disabled state +// -------------- +// Gray out text and ensure the hover state remains gray +.dropdown-menu .disabled > a, +.dropdown-menu .disabled > a:hover { + color: @grayLight; +} +// Nuke hover effects +.dropdown-menu .disabled > a:hover { + text-decoration: none; + background-color: transparent; + cursor: default; +} + // Open state for the dropdown // --------------------------- .open { diff --git a/less/navs.less b/less/navs.less index 5cb9f9f3a..103483739 100644 --- a/less/navs.less +++ b/less/navs.less @@ -361,3 +361,19 @@ border-color: #ddd #ddd #ddd transparent; *border-left-color: @white; } + + + +// DISABLED STATES +// --------------- + +// Gray out text +.nav > .disabled > a { + color: @grayLight; +} +// Nuke hover effects +.nav > .disabled > a:hover { + text-decoration: none; + background-color: transparent; + cursor: default; +} -- cgit v1.2.3 From b54264cde0b1e72fbb463e4aa272ed1c2876bd02 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 19 Jun 2012 14:42:46 -0700 Subject: add basic vertical button group support --- less/button-groups.less | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) (limited to 'less') diff --git a/less/button-groups.less b/less/button-groups.less index 5338c5a45..e3c1de8ad 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -189,3 +189,33 @@ } } + + +// Vertical button groups +// ---------------------- + +.btn-group-vertical { + display: inline-block; // makes buttons only take up the width they need +} +.btn-group-vertical .btn { + display: block; + float: none; + margin-left: 0; + width: 100%; + .border-radius(0); +} +.btn-group-vertical .btn + .btn { + margin-top: -1px; +} +.btn-group-vertical .btn:first-child { + .border-radius(4px 4px 0 0); +} +.btn-group-vertical .btn:last-child { + .border-radius(0 0 4px 4px); +} +.btn-group-vertical .btn-large:first-child { + .border-radius(6px 6px 0 0); +} +.btn-group-vertical .btn-large:last-child { + .border-radius(0 0 6px 6px); +} -- cgit v1.2.3 From 9df832b4bb81d80fd02b4fe6cc9ea826b0b0454e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 19 Jun 2012 19:17:42 -0700 Subject: add separate vars for dropdown link hover and active states --- less/dropdowns.less | 11 +++++++++-- less/variables.less | 11 ++++++++--- 2 files changed, 17 insertions(+), 5 deletions(-) (limited to 'less') diff --git a/less/dropdowns.less b/less/dropdowns.less index 648a9f246..bd2dab772 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -94,12 +94,19 @@ // Hover state // ----------- .dropdown-menu li > a:hover, -.dropdown-menu li > a:focus, +.dropdown-menu li > a:focus { + text-decoration: none; + color: @dropdownLinkColorActive; + background-color: @dropdownLinkBackgroundHover; +} + +// Active state +// ------------ .dropdown-menu .active > a, .dropdown-menu .active > a:hover { color: @dropdownLinkColorHover; text-decoration: none; - background-color: @dropdownLinkBackgroundHover; + background-color: @dropdownLinkBackgroundActive; outline: 0; } diff --git a/less/variables.less b/less/variables.less index b931d3d2a..ee7350ec2 100644 --- a/less/variables.less +++ b/less/variables.less @@ -104,12 +104,17 @@ // ------------------------- @dropdownBackground: @white; @dropdownBorder: rgba(0,0,0,.2); -@dropdownLinkColor: @grayDark; -@dropdownLinkColorHover: @white; -@dropdownLinkBackgroundHover: @linkColor; @dropdownDividerTop: #e5e5e5; @dropdownDividerBottom: @white; +@dropdownLinkColor: @grayDark; + +@dropdownLinkColorHover: @white; +@dropdownLinkBackgroundHover: @grayLighter; + +@dropdownLinkColorActive: @dropdownLinkColor; +@dropdownLinkBackgroundActive: @linkColor; + // COMPONENT VARIABLES -- cgit v1.2.3 From ce140662a0a52d8ff2cd1acee4a57591d336249d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 19 Jun 2012 20:01:03 -0700 Subject: remove unused container reset --- less/mixins.less | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index 4f204d1af..bc9fe1e93 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -578,9 +578,7 @@ } // Set the container width, and override it for fixed navbars in media queries - .container, - .navbar-fixed-top .container, - .navbar-fixed-bottom .container { .span(@gridColumns); } + .container { .span(@gridColumns); } // generate .spanX and .offsetX .spanX (@gridColumns); -- cgit v1.2.3 From d704d6f0ed3d87377b2c53f29c5d196f75c24e6d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 19 Jun 2012 23:37:47 -0700 Subject: #3861: add span to pagination selectors for full support of non-link pagination items --- less/pagination.less | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) (limited to 'less') diff --git a/less/pagination.less b/less/pagination.less index 38cf65cc4..d978a7b8c 100644 --- a/less/pagination.less +++ b/less/pagination.less @@ -16,7 +16,8 @@ .pagination li { display: inline; } -.pagination a { +.pagination a, +.pagination span { float: left; padding: 0 14px; line-height: (@baseLineHeight * 2) - 2; @@ -25,10 +26,12 @@ border-left-width: 0; } .pagination a:hover, -.pagination .active a { +.pagination .active a, +.pagination .active span { background-color: #f5f5f5; } -.pagination .active a { +.pagination .active a, +.pagination .active span { color: @grayLight; cursor: default; } @@ -39,11 +42,13 @@ background-color: transparent; cursor: default; } -.pagination li:first-child a { +.pagination li:first-child a, +.pagination li:first-child span { border-left-width: 1px; .border-radius(3px 0 0 3px); } -.pagination li:last-child a { +.pagination li:last-child a, +.pagination li:last-child span { .border-radius(0 3px 3px 0); } -- cgit v1.2.3 From 5bd9217f9bbf1b3840025402e0424306ea0c9f99 Mon Sep 17 00:00:00 2001 From: EngineerGio Date: Thu, 21 Jun 2012 01:50:28 +0300 Subject: Added border-radius mixins to set single corner radius and single side border radius --- less/mixins.less | 40 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index c3b57ed14..84f1c7698 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -202,6 +202,46 @@ border-radius: @radius; } +// Single Corner Border Radius +.border-top-left-radius(@radius) { + -webkit-border-top-left-radius: @radius; + -moz-border-radius-topleft: @radius; + border-top-left-radius: @radius; +} +.border-top-right-radius(@radius) { + -webkit-border-top-right-radius: @radius; + -moz-border-radius-topright: @radius; + border-top-right-radius: @radius; +} +.border-bottom-left-radius(@radius) { + -webkit-border-bottom-left-radius: @radius; + -moz-border-radius-bottomleft: @radius; + border-bottom-left-radius: @radius; +} +.border-bottom-right-radius(@radius) { + -webkit-border-bottom-right-radius: @radius; + -moz-border-radius-bottomright: @radius; + border-bottom-right-radius: @radius; +} + +// Single Side Border Radius +.border-bottom-radius(@radius) { + .border-bottom-right-radius(@radius); + .border-bottom-left-radius(@radius); +} +.border-top-radius(@radius) { + .border-top-right-radius(@radius); + .border-top-left-radius(@radius); +} +.border-left-radius(@radius) { + .border-top-left-radius(@radius); + .border-bottom-left-radius(@radius); +} +.border-right-radius(@radius) { + .border-top-right-radius(@radius); + .border-bottom-right-radius(@radius); +} + // Drop shadows .box-shadow(@shadow) { -webkit-box-shadow: @shadow; -- cgit v1.2.3 From 83e46b8df9333c1102f09efa402f5350dc2df80d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 20 Jun 2012 19:36:06 -0700 Subject: reorder for t-r-b-l --- less/mixins.less | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index 84f1c7698..66fc417cd 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -213,33 +213,33 @@ -moz-border-radius-topright: @radius; border-top-right-radius: @radius; } -.border-bottom-left-radius(@radius) { - -webkit-border-bottom-left-radius: @radius; - -moz-border-radius-bottomleft: @radius; - border-bottom-left-radius: @radius; -} .border-bottom-right-radius(@radius) { -webkit-border-bottom-right-radius: @radius; -moz-border-radius-bottomright: @radius; border-bottom-right-radius: @radius; } +.border-bottom-left-radius(@radius) { + -webkit-border-bottom-left-radius: @radius; + -moz-border-radius-bottomleft: @radius; + border-bottom-left-radius: @radius; +} // Single Side Border Radius -.border-bottom-radius(@radius) { - .border-bottom-right-radius(@radius); - .border-bottom-left-radius(@radius); -} .border-top-radius(@radius) { .border-top-right-radius(@radius); .border-top-left-radius(@radius); } -.border-left-radius(@radius) { - .border-top-left-radius(@radius); - .border-bottom-left-radius(@radius); -} .border-right-radius(@radius) { .border-top-right-radius(@radius); - .border-bottom-right-radius(@radius); + .border-bottom-right-radius(@radius); +} +.border-bottom-radius(@radius) { + .border-bottom-right-radius(@radius); + .border-bottom-left-radius(@radius); +} +.border-left-radius(@radius) { + .border-top-left-radius(@radius); + .border-bottom-left-radius(@radius); } // Drop shadows -- cgit v1.2.3 From 160fe7ca597ff0fdaab0bb49494713724468b05b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 20 Jun 2012 23:46:51 -0700 Subject: create vars for responsive grid values, fixed and fluid, and document them in the customizer --- less/mixins.less | 6 ++++-- less/responsive-1200px-min.less | 10 +++++----- less/responsive-768px-979px.less | 6 +++--- less/variables.less | 18 ++++++++++++++++++ 4 files changed, 30 insertions(+), 10 deletions(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index 1b00cd034..f828e62c4 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -618,7 +618,9 @@ } // Set the container width, and override it for fixed navbars in media queries - .container { .span(@gridColumns); } + .container, + .navbar-fixed-top .container, + .navbar-fixed-bottom .container { .span(@gridColumns); } // generate .spanX and .offsetX .spanX (@gridColumns); @@ -645,7 +647,7 @@ margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth*2); *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + (@fluidGridGutterWidth*2) - (.5 / @gridRowWidth * 100 * 1%); } - + .offsetFirstChild (@columns) { margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth); *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%); diff --git a/less/responsive-1200px-min.less b/less/responsive-1200px-min.less index a7c9f4e00..f8ae95979 100644 --- a/less/responsive-1200px-min.less +++ b/less/responsive-1200px-min.less @@ -4,20 +4,20 @@ @media (min-width: 1200px) { // Fixed grid - #grid > .core(70px, 30px); + #grid > .core(@gridColumnWidth1200, @gridGutterWidth1200); // Fluid grid - #grid > .fluid(5.982905983%, 2.564102564%); + #grid > .fluid(@fluidGridColumnWidth1200, @fluidGridGutterWidth1200); // Input grid - #grid > .input(70px, 30px); + #grid > .input(@gridColumnWidth1200, @gridGutterWidth1200); // Thumbnails .thumbnails { - margin-left: -30px; + margin-left: -@gridGutterWidth1200; } .thumbnails > li { - margin-left: 30px; + margin-left: @gridGutterWidth1200; } .row-fluid .thumbnails { margin-left: 0; diff --git a/less/responsive-768px-979px.less b/less/responsive-768px-979px.less index 76f4f6df1..3972ffc69 100644 --- a/less/responsive-768px-979px.less +++ b/less/responsive-768px-979px.less @@ -4,13 +4,13 @@ @media (min-width: 768px) and (max-width: 979px) { // Fixed grid - #grid > .core(42px, 20px); + #grid > .core(@gridColumnWidth768, @gridGutterWidth768); // Fluid grid - #grid > .fluid(5.801104972%, 2.762430939%); + #grid > .fluid(@fluidGridColumnWidth768, @fluidGridGutterWidth768); // Input grid - #grid > .input(42px, 20px); + #grid > .input(@gridColumnWidth768, @gridGutterWidth768); // No need to reset .thumbnails here since it's the same @gridGutterWidth diff --git a/less/variables.less b/less/variables.less index ee7350ec2..25a032781 100644 --- a/less/variables.less +++ b/less/variables.less @@ -198,6 +198,7 @@ // GRID // -------------------------------------------------- + // Default 940px grid // ------------------------- @gridColumns: 12; @@ -205,7 +206,24 @@ @gridGutterWidth: 20px; @gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); +// 1200px min +@gridColumnWidth1200: 70px; +@gridGutterWidth1200: 30px; + +// 768px-979px +@gridColumnWidth768: 42px; +@gridGutterWidth768: 20px; + + // Fluid grid // ------------------------- @fluidGridColumnWidth: 6.382978723%; @fluidGridGutterWidth: 2.127659574%; + +// 1200px min +@fluidGridColumnWidth1200: 5.982905983%; +@fluidGridGutterWidth1200: 2.564102564%; + +// 768px-979px +@fluidGridColumnWidth768: 5.801104972%; +@fluidGridGutterWidth768: 2.762430939%; -- cgit v1.2.3 From 71669dda63644a7b4162ca63f8b9c88b3586c7e4 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 24 Jun 2012 20:26:48 -0700 Subject: tons of docs cleanup in css, adding subnav to official components --- less/bootstrap.less | 1 + less/navbar.less | 5 +-- less/navs.less | 1 + less/responsive-767px-max.less | 2 +- less/subnav.less | 96 ++++++++++++++++++++++++++++++++++++++++++ less/variables.less | 10 +++++ 6 files changed, 111 insertions(+), 4 deletions(-) create mode 100644 less/subnav.less (limited to 'less') diff --git a/less/bootstrap.less b/less/bootstrap.less index c43875a80..0b82b8a0e 100644 --- a/less/bootstrap.less +++ b/less/bootstrap.less @@ -41,6 +41,7 @@ // Components: Nav @import "navs.less"; @import "navbar.less"; +@import "subnav.less"; @import "breadcrumbs.less"; @import "pagination.less"; @import "pager.less"; diff --git a/less/navbar.less b/less/navbar.less index d535158a5..d1bfc2209 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -191,7 +191,6 @@ float: right; // redeclare due to specificity } .navbar .nav > li { - display: block; float: left; } @@ -200,7 +199,7 @@ float: none; // Vertically center the text given @navbarHeight @elementHeight: 20px; - padding: ((@navbarHeight - @elementHeight) / 2 - 1) 10px ((@navbarHeight - @elementHeight) / 2 + 1); + padding: ((@navbarHeight - @elementHeight) / 2 - 1) 12px ((@navbarHeight - @elementHeight) / 2 + 1); line-height: 19px; color: @navbarLinkColor; text-decoration: none; @@ -262,7 +261,7 @@ padding: 7px 10px; margin-left: 5px; margin-right: 5px; - .buttonBackground(@navbarBackgroundHighlight, @navbarBackground); + .buttonBackground(darken(@navbarBackgroundHighlight, 5%), darken(@navbarBackground, 5%)); .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)"); } .navbar .btn-navbar .icon-bar { diff --git a/less/navs.less b/less/navs.less index 103483739..66d985a93 100644 --- a/less/navs.less +++ b/less/navs.less @@ -43,6 +43,7 @@ } + // NAV LIST // -------- diff --git a/less/responsive-767px-max.less b/less/responsive-767px-max.less index 614c6905c..ab724e407 100644 --- a/less/responsive-767px-max.less +++ b/less/responsive-767px-max.less @@ -43,7 +43,7 @@ // Modals .modal { - position: absolute; + position: fixed; top: 10px; left: 10px; right: 10px; diff --git a/less/subnav.less b/less/subnav.less new file mode 100644 index 000000000..4f68269a7 --- /dev/null +++ b/less/subnav.less @@ -0,0 +1,96 @@ +/* Subnav +-------------------------------------------------- */ + + +/* Base +------------------------- */ +.subnav { + width: 100%; + height: @subnavHeight; + #gradient > .vertical(@subnavBackgroundHighlight, @subnavBackground); + border: 1px solid @subnavBorder; + -webkit-border-radius: @subnavBorderRadius; + -moz-border-radius: @subnavBorderRadius; + border-radius: @subnavBorderRadius; +} + + +/* Nav links +------------------------- */ +.subnav .nav { + margin-bottom: 0; // remove default bottom margin of .nav +} +.subnav .nav > li { + float: left; +} +.subnav .nav > li > a { + padding: 8px 12px; + line-height: 20px; + border-left: 1px solid @subnavBackgroundHighlight; + border-right: 1px solid @subnavBorder; +} +.subnav .nav > .active > a, +.subnav .nav > .active > a:hover { + padding-left: 13px; + color: #777; + background-color: #e9e9e9; + border-right-color: #ddd; + border-left: 0; + -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.05); + -moz-box-shadow: inset 0 3px 5px rgba(0,0,0,.05); + box-shadow: inset 0 3px 5px rgba(0,0,0,.05); +} +.subnav .nav > .active > a .caret, +.subnav .nav > .active > a:hover .caret { + border-top-color: #777; +} +.subnav .nav > li:first-child > a, +.subnav .nav > li:first-child > a:hover { + border-left: 0; + padding-left: 12px; + -webkit-border-radius: @subnavBorderRadius 0 0 @subnavBorderRadius; + -moz-border-radius: @subnavBorderRadius 0 0 @subnavBorderRadius; + border-radius: @subnavBorderRadius 0 0 @subnavBorderRadius; +} +.subnav .nav > li:last-child > a { + border-right: 0; +} + +/* Dropdown menus get matching border-radius +.subnav .dropdown-menu { + -webkit-border-radius: 0 0 @subnavBorderRadius @subnavBorderRadius; + -moz-border-radius: 0 0 @subnavBorderRadius @subnavBorderRadius; + border-radius: 0 0 @subnavBorderRadius @subnavBorderRadius; +} + + +/* Fixed subnav on scroll, but only for 980px and up (sorry IE!) */ +@media (min-width: 980px) { + .subnav-fixed { + position: fixed; + top: 40px; + left: 0; + right: 0; + z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */ + border-color: #d5d5d5; + border-width: 0 0 1px; /* drop the border on the fixed edges */ + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; + -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); + -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); + box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); + filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */ + } + .subnav-fixed .nav { + max-width: 780px; + margin: 0 auto; + padding: 0 1px; + } + .subnav .nav > li:first-child > a, + .subnav .nav > li:first-child > a:hover { + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; + } +} diff --git a/less/variables.less b/less/variables.less index 25a032781..0060e207c 100644 --- a/less/variables.less +++ b/less/variables.less @@ -168,6 +168,16 @@ @navbarBrandColor: @navbarLinkColor; +// Subnav +// ------------------------- +@subnavHeight: 36px; +@subnavBackground: #eeeeee; +@subnavBackgroundHighlight: #f5f5f5; + +@subnavBorder: #e5e5e5; +@subnavBorderRadius: 4px; + + // Hero unit // ------------------------- @heroUnitBackground: @grayLighter; -- cgit v1.2.3 From 87af5d3bbe3546f9b876add2e35ad656accfc3ab Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 24 Jun 2012 20:42:31 -0700 Subject: more subnav optimizations --- less/dropdowns.less | 4 ++-- less/navbar.less | 4 ++++ less/navs.less | 19 ++++++++----------- less/subnav.less | 48 +++++++++++++++++++++++++++--------------------- less/variables.less | 10 ---------- 5 files changed, 41 insertions(+), 44 deletions(-) (limited to 'less') diff --git a/less/dropdowns.less b/less/dropdowns.less index bd2dab772..f55edbae7 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -54,7 +54,7 @@ display: none; // none by default, but block on "open" of the menu float: left; min-width: 160px; - padding: 4px 0; + padding: 5px 0; margin: 1px 0 0; // override default ul list-style: none; background-color: @dropdownBackground; @@ -62,7 +62,7 @@ border: 1px solid rgba(0,0,0,.2); *border-right-width: 2px; *border-bottom-width: 2px; - .border-radius(5px); + .border-radius(6px); .box-shadow(0 5px 10px rgba(0,0,0,.2)); -webkit-background-clip: padding-box; -moz-background-clip: padding; diff --git a/less/navbar.less b/less/navbar.less index d1bfc2209..705169fe2 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -205,6 +205,10 @@ text-decoration: none; text-shadow: 0 -1px 0 rgba(0,0,0,.25); } +.navbar .nav .dropdown-toggle .caret { + margin-top: 8px; +} + // Buttons .navbar .btn { display: inline-block; diff --git a/less/navs.less b/less/navs.less index 66d985a93..66ce6fa3a 100644 --- a/less/navs.less +++ b/less/navs.less @@ -195,39 +195,36 @@ // --------- .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 + .border-radius(0 0 6px 6px); // remove the top rounded corners here since there is a hard edge above the menu } .nav-pills .dropdown-menu { - .border-radius(4px); // make rounded corners match the pills + .border-radius(6px); // make rounded corners match the pills } // Default dropdown links // ------------------------- // Make carets use linkColor to start -.nav-tabs .dropdown-toggle .caret, -.nav-pills .dropdown-toggle .caret { +.nav .dropdown-toggle .caret { border-top-color: @linkColor; border-bottom-color: @linkColor; margin-top: 6px; } -.nav-tabs .dropdown-toggle:hover .caret, -.nav-pills .dropdown-toggle:hover .caret { +.nav .dropdown-toggle:hover .caret { border-top-color: @linkColorHover; border-bottom-color: @linkColorHover; } // Active dropdown links // ------------------------- -.nav-tabs .active .dropdown-toggle .caret, -.nav-pills .active .dropdown-toggle .caret { - border-top-color: @grayDark; - border-bottom-color: @grayDark; +.nav .active .dropdown-toggle .caret { + border-top-color: #fff; + border-bottom-color: #fff; } // Active:hover dropdown links // ------------------------- .nav > .dropdown.active > a:hover { - color: @black; + color: #fff; cursor: pointer; } diff --git a/less/subnav.less b/less/subnav.less index 4f68269a7..9d0e714db 100644 --- a/less/subnav.less +++ b/less/subnav.less @@ -6,12 +6,12 @@ ------------------------- */ .subnav { width: 100%; - height: @subnavHeight; - #gradient > .vertical(@subnavBackgroundHighlight, @subnavBackground); - border: 1px solid @subnavBorder; - -webkit-border-radius: @subnavBorderRadius; - -moz-border-radius: @subnavBorderRadius; - border-radius: @subnavBorderRadius; + height: 36px; + #gradient > .vertical(#f5f5f5, #eeeeee); + border: 1px solid #e5e5e5; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; } @@ -20,14 +20,15 @@ .subnav .nav { margin-bottom: 0; // remove default bottom margin of .nav } +// Make list items appear inline .subnav .nav > li { float: left; } .subnav .nav > li > a { - padding: 8px 12px; - line-height: 20px; - border-left: 1px solid @subnavBackgroundHighlight; - border-right: 1px solid @subnavBorder; + padding: 9px 12px; + line-height: 18px; + border-left: 1px solid #f5f5f5; + border-right: 1px solid #e5e5e5; } .subnav .nav > .active > a, .subnav .nav > .active > a:hover { @@ -40,27 +41,32 @@ -moz-box-shadow: inset 0 3px 5px rgba(0,0,0,.05); box-shadow: inset 0 3px 5px rgba(0,0,0,.05); } -.subnav .nav > .active > a .caret, -.subnav .nav > .active > a:hover .caret { - border-top-color: #777; -} .subnav .nav > li:first-child > a, .subnav .nav > li:first-child > a:hover { border-left: 0; padding-left: 12px; - -webkit-border-radius: @subnavBorderRadius 0 0 @subnavBorderRadius; - -moz-border-radius: @subnavBorderRadius 0 0 @subnavBorderRadius; - border-radius: @subnavBorderRadius 0 0 @subnavBorderRadius; + -webkit-border-radius: 4px 0 0 4px; + -moz-border-radius: 4px 0 0 4px; + border-radius: 4px 0 0 4px; } .subnav .nav > li:last-child > a { border-right: 0; } -/* Dropdown menus get matching border-radius +/* Reposition the dropdown carets */ +.subnav .nav .dropdown-toggle .caret { + margin-top: 7px; +} +.nav .active .dropdown-toggle .caret { + border-top-color: #777; + border-bottom-color: #777; +} + +/* Dropdown menus get matching border-radius */ .subnav .dropdown-menu { - -webkit-border-radius: 0 0 @subnavBorderRadius @subnavBorderRadius; - -moz-border-radius: 0 0 @subnavBorderRadius @subnavBorderRadius; - border-radius: 0 0 @subnavBorderRadius @subnavBorderRadius; + -webkit-border-radius: 0 0 4px 4px; + -moz-border-radius: 0 0 4px 4px; + border-radius: 0 0 4px 4px; } diff --git a/less/variables.less b/less/variables.less index 0060e207c..25a032781 100644 --- a/less/variables.less +++ b/less/variables.less @@ -168,16 +168,6 @@ @navbarBrandColor: @navbarLinkColor; -// Subnav -// ------------------------- -@subnavHeight: 36px; -@subnavBackground: #eeeeee; -@subnavBackgroundHighlight: #f5f5f5; - -@subnavBorder: #e5e5e5; -@subnavBorderRadius: 4px; - - // Hero unit // ------------------------- @heroUnitBackground: @grayLighter; -- cgit v1.2.3 From 6662f62236cd1800952fb45a528b79d9a899f5d5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 24 Jun 2012 21:03:39 -0700 Subject: remove subnav file, instead add an optional class for .navbar --- less/bootstrap.less | 1 - less/navbar.less | 43 +++++++++++++++++++ less/responsive-navbar.less | 35 ++++++++++++++- less/subnav.less | 102 -------------------------------------------- 4 files changed, 76 insertions(+), 105 deletions(-) delete mode 100644 less/subnav.less (limited to 'less') diff --git a/less/bootstrap.less b/less/bootstrap.less index 0b82b8a0e..c43875a80 100644 --- a/less/bootstrap.less +++ b/less/bootstrap.less @@ -41,7 +41,6 @@ // Components: Nav @import "navs.less"; @import "navbar.less"; -@import "subnav.less"; @import "breadcrumbs.less"; @import "pagination.less"; @import "pager.less"; diff --git a/less/navbar.less b/less/navbar.less index 705169fe2..3305f722a 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -362,3 +362,46 @@ right: 13px; } } + + +/* Subnav navbar +-------------------------------------------------- */ +// In the future, we may make two options available for the navbar: +// a default state, the lighter one, and the darker one as an option +// to enable. This would prevent some overriding back to defaults. + + +// Override the default .navbar +.navbar-subnav { + height: 36px; +} +.navbar-subnav .navbar-inner { + min-height: 36px; + padding: 0; + #gradient > .vertical(#f9f9f9, #eeeeee); + .box-shadow(none); + border: 1px solid #e5e5e5; +} + +// Change link colors back +.navbar-subnav .nav > li > a { + color: @linkColor; + text-shadow: 0 1px 0 rgba(255,255,255,.5); +} +.navbar-subnav .nav > li > a:hover { + color: @linkColorHover; +} + +// Dropdown carets +.navbar-subnav .nav li.dropdown .dropdown-toggle .caret, +.navbar-subnav .nav li.dropdown.open .caret { + border-top-color: @linkColor; + border-bottom-color: @linkColor; +} + +// Open dropdown dropdown-toggle +.navbar-subnav .nav .open > a { + color: @linkColorHover; +} + + diff --git a/less/responsive-navbar.less b/less/responsive-navbar.less index 8d31db531..92e651e0b 100644 --- a/less/responsive-navbar.less +++ b/less/responsive-navbar.less @@ -144,10 +144,41 @@ // DEFAULT DESKTOP // --------------- -// Required to make the collapsing navbar work on regular desktops @media (min-width: 980px) { + + // Required to make the collapsing navbar work on regular desktops .nav-collapse.collapse { height: auto !important; overflow: visible !important; } -} \ No newline at end of file + + // Fixed subnav on scroll, but only for 980px and up (sorry IE!) + .subnav-fixed { + position: fixed; + top: 40px; + left: 0; + right: 0; + z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */ + border-color: #d5d5d5; + border-width: 0 0 1px; /* drop the border on the fixed edges */ + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; + -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); + -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); + box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); + filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */ + } + .subnav-fixed .nav { + max-width: 780px; + margin: 0 auto; + padding: 0 1px; + } + .subnav .nav > li:first-child > a, + .subnav .nav > li:first-child > a:hover { + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; + } + +} diff --git a/less/subnav.less b/less/subnav.less deleted file mode 100644 index 9d0e714db..000000000 --- a/less/subnav.less +++ /dev/null @@ -1,102 +0,0 @@ -/* Subnav --------------------------------------------------- */ - - -/* Base -------------------------- */ -.subnav { - width: 100%; - height: 36px; - #gradient > .vertical(#f5f5f5, #eeeeee); - border: 1px solid #e5e5e5; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; -} - - -/* Nav links -------------------------- */ -.subnav .nav { - margin-bottom: 0; // remove default bottom margin of .nav -} -// Make list items appear inline -.subnav .nav > li { - float: left; -} -.subnav .nav > li > a { - padding: 9px 12px; - line-height: 18px; - border-left: 1px solid #f5f5f5; - border-right: 1px solid #e5e5e5; -} -.subnav .nav > .active > a, -.subnav .nav > .active > a:hover { - padding-left: 13px; - color: #777; - background-color: #e9e9e9; - border-right-color: #ddd; - border-left: 0; - -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.05); - -moz-box-shadow: inset 0 3px 5px rgba(0,0,0,.05); - box-shadow: inset 0 3px 5px rgba(0,0,0,.05); -} -.subnav .nav > li:first-child > a, -.subnav .nav > li:first-child > a:hover { - border-left: 0; - padding-left: 12px; - -webkit-border-radius: 4px 0 0 4px; - -moz-border-radius: 4px 0 0 4px; - border-radius: 4px 0 0 4px; -} -.subnav .nav > li:last-child > a { - border-right: 0; -} - -/* Reposition the dropdown carets */ -.subnav .nav .dropdown-toggle .caret { - margin-top: 7px; -} -.nav .active .dropdown-toggle .caret { - border-top-color: #777; - border-bottom-color: #777; -} - -/* Dropdown menus get matching border-radius */ -.subnav .dropdown-menu { - -webkit-border-radius: 0 0 4px 4px; - -moz-border-radius: 0 0 4px 4px; - border-radius: 0 0 4px 4px; -} - - -/* Fixed subnav on scroll, but only for 980px and up (sorry IE!) */ -@media (min-width: 980px) { - .subnav-fixed { - position: fixed; - top: 40px; - left: 0; - right: 0; - z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */ - border-color: #d5d5d5; - border-width: 0 0 1px; /* drop the border on the fixed edges */ - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; - -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); - -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); - box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); - filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */ - } - .subnav-fixed .nav { - max-width: 780px; - margin: 0 auto; - padding: 0 1px; - } - .subnav .nav > li:first-child > a, - .subnav .nav > li:first-child > a:hover { - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; - } -} -- cgit v1.2.3 From 508a93d9e307457426f2aa2fcfa740858ebd851a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 24 Jun 2012 21:07:20 -0700 Subject: make fixing of subnav work again --- less/responsive-navbar.less | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) (limited to 'less') diff --git a/less/responsive-navbar.less b/less/responsive-navbar.less index 92e651e0b..480939f7c 100644 --- a/less/responsive-navbar.less +++ b/less/responsive-navbar.less @@ -153,7 +153,7 @@ } // Fixed subnav on scroll, but only for 980px and up (sorry IE!) - .subnav-fixed { + .navbar-subnav-fixed { position: fixed; top: 40px; left: 0; @@ -169,13 +169,14 @@ box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */ } - .subnav-fixed .nav { - max-width: 780px; + .navbar-subnav-fixed .nav { + float: none; + max-width: 970px; margin: 0 auto; padding: 0 1px; } - .subnav .nav > li:first-child > a, - .subnav .nav > li:first-child > a:hover { + .navbar-subnav .nav > li:first-child > a, + .navbar-subnav .nav > li:first-child > a:hover { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -- cgit v1.2.3 From 27845e4492741a973231ff1be6c493e001a28555 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 25 Jun 2012 14:11:37 -0700 Subject: #3223: make table row hover optional class --- less/tables.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less') diff --git a/less/tables.less b/less/tables.less index b4f6027bf..8bd563a06 100644 --- a/less/tables.less +++ b/less/tables.less @@ -136,7 +136,7 @@ table { // HOVER EFFECT // ------------ // Placed here since it has to come after the potential zebra striping -.table { +.table-hover { tbody tr:hover td, tbody tr:hover th { background-color: @tableBackgroundHover; -- cgit v1.2.3 From cd466f1d0b51c5165f7b615c671ee94d53f48eeb Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 25 Jun 2012 14:37:35 -0700 Subject: add tests for table grid sizing, solve bugs in fluid table grid sizing --- less/tables.less | 10 ++++++- less/tests/css-tests.html | 67 +++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 76 insertions(+), 1 deletion(-) (limited to 'less') diff --git a/less/tables.less b/less/tables.less index 8bd563a06..ecd92233d 100644 --- a/less/tables.less +++ b/less/tables.less @@ -147,7 +147,15 @@ table { // TABLE CELL SIZING // ----------------- -// Change the columns +// Reset default grid behavior +table [class*=span], +.row-fluid table [class*=span] { + display: table-cell; + float: none; // undo default grid column styles + margin-left: 0; // undo default grid column styles +} + +// Change the column widths to account for td/th padding table { .span1 { .tableColumns(1); } .span2 { .tableColumns(2); } diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html index 017aa84f1..a61f6923a 100644 --- a/less/tests/css-tests.html +++ b/less/tests/css-tests.html @@ -458,6 +458,73 @@ +

Grid sizing

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

Fluid grid sizing

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
123
1 and 23
123
13
2 and 3
+
+
+ + -- cgit v1.2.3 From 78849cf52ef2eba9dd8df621985ac277b67dd23b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 25 Jun 2012 15:09:39 -0700 Subject: remove jank fix for dt bold text --- less/type.less | 1 - 1 file changed, 1 deletion(-) (limited to 'less') diff --git a/less/type.less b/less/type.less index bdf8e605e..41514b56c 100644 --- a/less/type.less +++ b/less/type.less @@ -124,7 +124,6 @@ dd { } dt { font-weight: bold; - line-height: @baseLineHeight - 1; // fix jank Helvetica Neue font bug } dd { margin-left: @baseLineHeight / 2; -- cgit v1.2.3 From 8c2db7d7d62d22183601364e7dcaee4a12b083ea Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 25 Jun 2012 15:46:46 -0700 Subject: prevent button group buttons from wrapping in tight spaces by removing floats and replacing with font-size: 0; inline-block hack --- less/button-groups.less | 15 +++++++++++++-- less/tests/css-tests.html | 28 ++++++++++++++++++++++++++++ 2 files changed, 41 insertions(+), 2 deletions(-) (limited to 'less') diff --git a/less/button-groups.less b/less/button-groups.less index e3c1de8ad..44f13a09a 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -5,7 +5,8 @@ // Make the div behave like a button .btn-group { position: relative; - .clearfix(); // clears the floated buttons + font-size: 0; // remove as part 1 of font-size inline-block hack + white-space: nowrap; // prevent buttons from wrapping when in tight spaces (e.g., the table on the tests page) .ie7-restore-left-whitespace(); } @@ -27,10 +28,20 @@ // Float them, remove border radius, then re-add to first and last elements .btn-group > .btn { position: relative; - float: left; margin-left: -1px; + font-size: @baseFontSize; // redeclare as part 2 of font-size inline-block hack .border-radius(0); } + +// Reset fonts for other sizes +.btn-group > .btn-mini, +.btn-group > .btn-small { + font-size: @baseFontSize - 2px; +} +.btn-group > .btn-large { + font-size: @baseFontSize + 2px; +} + // 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 { margin-left: 0; diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html index a61f6923a..2396e348c 100644 --- a/less/tests/css-tests.html +++ b/less/tests/css-tests.html @@ -953,6 +953,34 @@ + + + + + + + + + + + +
+ Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. + +
+ + + + +
+
+ + + + -- cgit v1.2.3 From 94a3d4eb14bc4674971617d6114c4fb7b08b3b7d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 25 Jun 2012 16:25:50 -0700 Subject: reorder media queries --- less/responsive-767px-max.less | 134 ++++++++++++++++++++--------------------- less/responsive-utilities.less | 20 +++--- less/responsive.less | 8 +-- 3 files changed, 81 insertions(+), 81 deletions(-) (limited to 'less') diff --git a/less/responsive-767px-max.less b/less/responsive-767px-max.less index ab724e407..84d1ba13f 100644 --- a/less/responsive-767px-max.less +++ b/less/responsive-767px-max.less @@ -1,70 +1,3 @@ -// 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: fixed; - 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 // -------------------------------------------------- @@ -147,3 +80,70 @@ } } + + + +// 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: fixed; + 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; + } + +} diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less index 572846c0f..1962a2f15 100644 --- a/less/responsive-utilities.less +++ b/less/responsive-utilities.less @@ -18,24 +18,24 @@ .hidden-tablet { } .hidden-desktop { display: none !important; } -// Phones only -@media (max-width: 767px) { +// Tablets & small desktops only +@media (min-width: 768px) and (max-width: 979px) { // Show - .visible-phone { display: inherit !important; } // Use inherit to restore previous behavior + .visible-tablet { display: inherit !important; } // Hide - .hidden-phone { display: none !important; } + .hidden-tablet { display: none !important; } // Hide everything else .hidden-desktop { display: inherit !important; } - .visible-desktop { display: none !important; } + .visible-desktop { display: none !important ; } } -// Tablets & small desktops only -@media (min-width: 768px) and (max-width: 979px) { +// Phones only +@media (max-width: 767px) { // Show - .visible-tablet { display: inherit !important; } + .visible-phone { display: inherit !important; } // Use inherit to restore previous behavior // Hide - .hidden-tablet { display: none !important; } + .hidden-phone { display: none !important; } // Hide everything else .hidden-desktop { display: inherit !important; } - .visible-desktop { display: none !important ; } + .visible-desktop { display: none !important; } } diff --git a/less/responsive.less b/less/responsive.less index 734b1988b..241083857 100644 --- a/less/responsive.less +++ b/less/responsive.less @@ -31,14 +31,14 @@ // MEDIA QUERIES // ------------------ -// Phones to portrait tablets and narrow desktops -@import "responsive-767px-max.less"; +// Large desktops +@import "responsive-1200px-min.less"; // Tablets to regular desktops @import "responsive-768px-979px.less"; -// Large desktops -@import "responsive-1200px-min.less"; +// Phones to portrait tablets and narrow desktops +@import "responsive-767px-max.less"; // RESPONSIVE NAVBAR -- cgit v1.2.3 From d65e815a48fd869bcdc4e4112cf675a1f987fc49 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 25 Jun 2012 16:47:29 -0700 Subject: use @textColor to change help-block/help-inline font color --- 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 4f9d9f3e1..911af1a25 100644 --- a/less/forms.less +++ b/less/forms.less @@ -356,7 +356,7 @@ textarea { .help-block, .help-inline { - color: @gray; // lighten the text some for contrast + color: lighten(@textColor, 15%); // lighten the text some for contrast } .help-block { -- cgit v1.2.3 From 3761d50c5a4bfd2b518cd6ab68ef3474e191ee6d Mon Sep 17 00:00:00 2001 From: Ben Vinegar Date: Mon, 25 Jun 2012 17:35:42 -0700 Subject: Fix Opera .clearfix bug when using contenteditable --- less/mixins.less | 3 +++ 1 file changed, 3 insertions(+) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index c3b57ed14..9027fbcbf 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -15,6 +15,9 @@ &:after { display: table; content: ""; + // Fixes Opera/contenteditable bug: + // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 + line-height: 0; } &:after { clear: both; -- cgit v1.2.3 From 244a9ab79d13a88b8bb5ef59665a82088edd62d9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 25 Jun 2012 20:20:32 -0700 Subject: reverse the gradient on striped progress bars so it matches the active state when animated --- 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 2b0baa913..e1e06bd2a 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -440,7 +440,7 @@ background-image: -o-radial-gradient(circle, @innerColor, @outerColor); background-repeat: no-repeat; } - .striped(@color, @angle: -45deg) { + .striped(@color, @angle: 45deg) { background-color: @color; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); -- cgit v1.2.3 From b77ed4a3a3c47af057e16db93ef41023d1cc5e08 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 25 Jun 2012 20:57:04 -0700 Subject: fix dropdowns in button groups after font-size hack --- less/button-groups.less | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'less') diff --git a/less/button-groups.less b/less/button-groups.less index 44f13a09a..8234a893c 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -29,9 +29,12 @@ .btn-group > .btn { position: relative; margin-left: -1px; - font-size: @baseFontSize; // redeclare as part 2 of font-size inline-block hack .border-radius(0); } +.btn-group > .btn, +.btn-group > .dropdown-menu { + font-size: @baseFontSize; // redeclare as part 2 of font-size inline-block hack +} // Reset fonts for other sizes .btn-group > .btn-mini, -- cgit v1.2.3 From 2e3306d5ddcbc5b906f36749007c0c8ea75d38c6 Mon Sep 17 00:00:00 2001 From: Han Lin Yap Date: Tue, 26 Jun 2012 12:30:43 +0300 Subject: Update linear-gradient standard --- 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 e1e06bd2a..b6c070916 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -400,7 +400,7 @@ background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+ background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10 - background-image: linear-gradient(left, @startColor, @endColor); // Le standard, IE10 + background-image: linear-gradient(to right, @startColor, @endColor); // Le standard, IE10 background-repeat: repeat-x; filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down } @@ -410,7 +410,7 @@ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+ background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10 - background-image: linear-gradient(top, @startColor, @endColor); // The standard, IE10 + background-image: linear-gradient(to bottom, @startColor, @endColor); // The standard, IE10 background-repeat: repeat-x; filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down } -- cgit v1.2.3 From c09e8473e2be483d3f53186840c002167647c44b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 28 Jun 2012 10:03:46 -0700 Subject: use variablef or wells background-color, update docs for glyphicons license mention, update popovers to remove that thick border and make them look mo betta --- less/mixins.less | 52 ++++++++++++++++++++++++++++++++++++++---------- less/popovers.less | 57 ++++++++++++++++++++++++++++++++--------------------- less/variables.less | 5 +++++ less/wells.less | 5 ++--- 4 files changed, 84 insertions(+), 35 deletions(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index e1e06bd2a..fd162a049 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -509,37 +509,69 @@ // ------------------------- // For tipsies and popovers #popoverArrow { - .top(@arrowWidth: 5px, @color: @black) { - bottom: 0; + .top(@arrowWidth: 10px, @color: rgba(0,0,0,.2)) { + bottom: -@arrowWidth; left: 50%; margin-left: -@arrowWidth; border-left: @arrowWidth solid transparent; border-right: @arrowWidth solid transparent; + border-top: @arrowWidth solid #ccc; border-top: @arrowWidth solid @color; + &:after { + border-left: @arrowWidth - 1 solid transparent; + border-right: @arrowWidth - 1 solid transparent; + border-top: @arrowWidth - 1 solid #fff; + bottom: 1px; + left: -@arrowWidth + 1; + } } - .left(@arrowWidth: 5px, @color: @black) { + .right(@arrowWidth: 10px, @color: rgba(0,0,0,.2)) { top: 50%; - right: 0; + left: -@arrowWidth; margin-top: -@arrowWidth; border-top: @arrowWidth solid transparent; border-bottom: @arrowWidth solid transparent; - border-left: @arrowWidth solid @color; + border-right: @arrowWidth solid #ccc; + border-right: @arrowWidth solid @color; + &:after { + border-top: @arrowWidth - 1 solid transparent; + border-bottom: @arrowWidth - 1 solid transparent; + border-right: @arrowWidth - 1 solid #fff; + bottom: -@arrowWidth + 1; + left: 1px; + } } - .bottom(@arrowWidth: 5px, @color: @black) { - top: 0; + .bottom(@arrowWidth: 10px, @color: rgba(0,0,0,.2)) { + top: -@arrowWidth; left: 50%; margin-left: -@arrowWidth; border-left: @arrowWidth solid transparent; border-right: @arrowWidth solid transparent; + border-bottom: @arrowWidth solid #ccc; border-bottom: @arrowWidth solid @color; + &:after { + border-left: @arrowWidth - 1 solid transparent; + border-right: @arrowWidth - 1 solid transparent; + border-bottom: @arrowWidth - 1 solid #f5f5f5; + top: 1px; + left: -@arrowWidth + 1; + } } - .right(@arrowWidth: 5px, @color: @black) { + .left(@arrowWidth: 10px, @color: rgba(0,0,0,.2)) { top: 50%; - left: 0; + right: -@arrowWidth; margin-top: -@arrowWidth; border-top: @arrowWidth solid transparent; border-bottom: @arrowWidth solid transparent; - border-right: @arrowWidth solid @color; + border-left: @arrowWidth solid #ccc; + border-left: @arrowWidth solid @color; + &:after { + border-top: @arrowWidth - 1 solid transparent; + border-bottom: @arrowWidth - 1 solid transparent; + border-left: @arrowWidth - 1 solid #fff; + bottom: -@arrowWidth + 1; + right: 1px; + } } } diff --git a/less/popovers.less b/less/popovers.less index 558d99ec9..ca69ca801 100644 --- a/less/popovers.less +++ b/less/popovers.less @@ -7,42 +7,55 @@ left: 0; z-index: @zindexPopover; display: none; - padding: 5px; - &.top { margin-top: -5px; } - &.right { margin-left: 5px; } - &.bottom { margin-top: 5px; } - &.left { margin-left: -5px; } + width: 218px; + background-color: #fff; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; + border: 1px solid #ccc; + border: 1px solid rgba(0,0,0,.2); + .border-radius(6px); + .box-shadow(0 5px 10px rgba(0,0,0,.2)); + + // Offset the popover to account for the popover arrow + &.top { margin-bottom: 10px; } + &.right { margin-left: 10px; } + &.bottom { margin-top: 10px; } + &.left { margin-right: 10px; } + + // Call the mixin for the arrows &.top .arrow { #popoverArrow > .top(); } &.right .arrow { #popoverArrow > .right(); } &.bottom .arrow { #popoverArrow > .bottom(); } &.left .arrow { #popoverArrow > .left(); } + + // Common arrow styles .arrow { position: absolute; width: 0; height: 0; + &:after { + position: absolute; + display: inline-block; + width: 0; + height: 0; + content: ""; + } } } -.popover-inner { - padding: 3px; - width: 280px; - overflow: hidden; - background: @black; // has to be full background declaration for IE fallback - background: rgba(0,0,0,.8); - .border-radius(6px); - .box-shadow(0 3px 7px rgba(0,0,0,0.3)); -} + .popover-title { - padding: 9px 15px; - line-height: 1; + padding: 8px 14px; + font-size: 14px; + font-weight: normal; + line-height: 18px; background-color: #f5f5f5; - border-bottom:1px solid #eee; - .border-radius(3px 3px 0 0); + border-bottom: 1px solid #e5e5e5; + .border-radius(5px 5px 0 0); } + .popover-content { - padding: 14px; - background-color: @white; - .border-radius(0 0 3px 3px); - .background-clip(padding-box); + padding: 9px 14px; p, ul, ol { margin-bottom: 0; } diff --git a/less/variables.less b/less/variables.less index 25a032781..bd3a2905d 100644 --- a/less/variables.less +++ b/less/variables.less @@ -148,6 +148,11 @@ @hrBorder: @grayLighter; +// Wells +// ------------------------- +@wellBackground: #f5f5f5; + + // Navbar // ------------------------- @navbarHeight: 40px; diff --git a/less/wells.less b/less/wells.less index 9300061a5..bac3715a7 100644 --- a/less/wells.less +++ b/less/wells.less @@ -5,9 +5,8 @@ min-height: 20px; padding: 19px; margin-bottom: 20px; - background-color: #f5f5f5; - border: 1px solid #eee; - border: 1px solid rgba(0,0,0,.05); + background-color: @wellBackground; + border: 1px solid darken(@wellBackground, 7%); .border-radius(4px); .box-shadow(inset 0 1px 1px rgba(0,0,0,.05)); blockquote { -- cgit v1.2.3 From c31a4e51316eb8767baebe9d8e370c782f15ea38 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 28 Jun 2012 20:59:16 -0700 Subject: remove responsive subnav from docs and place in navbar-responsive.less --- less/navbar.less | 39 +++++++++++++++++++++++- less/responsive-navbar.less | 73 +++++++++++++++++++++++++-------------------- 2 files changed, 79 insertions(+), 33 deletions(-) (limited to 'less') diff --git a/less/navbar.less b/less/navbar.less index 3305f722a..c298e7ce1 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -168,11 +168,17 @@ // Fixed to top .navbar-fixed-top { top: 0; + -webkit-box-shadow: 0 1px 10px rgba(0,0,0,.1); + -moz-box-shadow: 0 1px 10px rgba(0,0,0,.1); + box-shadow: 0 1px 10px rgba(0,0,0,.1); } // Fixed to bottom .navbar-fixed-bottom { bottom: 0; + -webkit-box-shadow: 0 -1px 10px rgba(0,0,0,.1); + -moz-box-shadow: 0 -1px 10px rgba(0,0,0,.1); + box-shadow: 0 -1px 10px rgba(0,0,0,.1); } @@ -378,7 +384,7 @@ .navbar-subnav .navbar-inner { min-height: 36px; padding: 0; - #gradient > .vertical(#f9f9f9, #eeeeee); + #gradient > .vertical(#f9f9f9, #f1f1f1); .box-shadow(none); border: 1px solid #e5e5e5; } @@ -405,3 +411,34 @@ } +// Fixed subnav on scroll, but only for 980px and up (sorry IE!) +.navbar-subnav-fixed { + position: fixed; + top: 40px; + left: 0; + right: 0; + z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */ + border-color: #d5d5d5; + border-width: 0 0 1px; /* drop the border on the fixed edges */ + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; + -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 10px rgba(0,0,0,.1); + -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 10px rgba(0,0,0,.1); + box-shadow: inset 0 1px 0 #fff, 0 1px 10px rgba(0,0,0,.1); + filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */ +} +.navbar-subnav-fixed .nav { + float: none; + max-width: 970px; + margin: 0 auto; + padding: 0 1px; +} +.navbar-subnav .nav > li:first-child > a, +.navbar-subnav .nav > li:first-child > a:hover { + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; +} + + diff --git a/less/responsive-navbar.less b/less/responsive-navbar.less index 480939f7c..5a66a0559 100644 --- a/less/responsive-navbar.less +++ b/less/responsive-navbar.less @@ -8,9 +8,10 @@ body { padding-top: 0; } - // Unfix the navbar + // Unfix the navbars .navbar-fixed-top, - .navbar-fixed-bottom { + .navbar-fixed-bottom, + .navbar-subnav-fixed { position: static; } .navbar-fixed-top { @@ -138,6 +139,44 @@ padding-left: 10px; padding-right: 10px; } + + // STATIC SUBNAV + // ------------- + .navbar-subnav { + width: auto; + height: auto; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + } + .navbar-subnav .navbar-inner { + background-color: #fff; + background-image: none; // Remove gradient + } + .navbar-subnav .nav { + float: none; + margin-right: 0; + } + .navbar-subnav .nav > li { + float: none; + } + .navbar-subnav .nav > li > a { + border: 0; + } + .navbar-subnav .nav > li > a:hover { + background-color: #f5f5f5; + } + .navbar-subnav .nav > li + li > a { + border-top: 1px solid #e5e5e5; + } + .navbar-subnav .nav > li:first-child > a, + .navbar-subnav .nav > li:first-child > a:hover { + -webkit-border-radius: 4px 4px 0 0; + -moz-border-radius: 4px 4px 0 0; + border-radius: 4px 4px 0 0; + } + + } @@ -152,34 +191,4 @@ overflow: visible !important; } - // Fixed subnav on scroll, but only for 980px and up (sorry IE!) - .navbar-subnav-fixed { - position: fixed; - top: 40px; - left: 0; - right: 0; - z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */ - border-color: #d5d5d5; - border-width: 0 0 1px; /* drop the border on the fixed edges */ - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; - -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); - -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); - box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1); - filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */ - } - .navbar-subnav-fixed .nav { - float: none; - max-width: 970px; - margin: 0 auto; - padding: 0 1px; - } - .navbar-subnav .nav > li:first-child > a, - .navbar-subnav .nav > li:first-child > a:hover { - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; - } - } -- cgit v1.2.3 From 98ebd548000bc080c6eb152cd2ef005938d2e516 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 28 Jun 2012 21:20:40 -0700 Subject: address issues with fixed subnav like borders, corners, etc --- less/navbar.less | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) (limited to 'less') diff --git a/less/navbar.less b/less/navbar.less index c298e7ce1..d99894509 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -205,7 +205,7 @@ float: none; // Vertically center the text given @navbarHeight @elementHeight: 20px; - padding: ((@navbarHeight - @elementHeight) / 2 - 1) 12px ((@navbarHeight - @elementHeight) / 2 + 1); + padding: ((@navbarHeight - @elementHeight) / 2) 12px ((@navbarHeight - @elementHeight) / 2 + 1); line-height: 19px; color: @navbarLinkColor; text-decoration: none; @@ -379,10 +379,8 @@ // Override the default .navbar .navbar-subnav { - height: 36px; } .navbar-subnav .navbar-inner { - min-height: 36px; padding: 0; #gradient > .vertical(#f9f9f9, #f1f1f1); .box-shadow(none); @@ -398,6 +396,13 @@ color: @linkColorHover; } +// Active nav links +.navbar-subnav .nav > .active > a, +.navbar-subnav .nav > .active > a:hover { + color: #777; + background-color: #e5e5e5; +} + // Dropdown carets .navbar-subnav .nav li.dropdown .dropdown-toggle .caret, .navbar-subnav .nav li.dropdown.open .caret { @@ -410,7 +415,6 @@ color: @linkColorHover; } - // Fixed subnav on scroll, but only for 980px and up (sorry IE!) .navbar-subnav-fixed { position: fixed; @@ -418,15 +422,15 @@ left: 0; right: 0; z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */ - border-color: #d5d5d5; - border-width: 0 0 1px; /* drop the border on the fixed edges */ - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 10px rgba(0,0,0,.1); -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 10px rgba(0,0,0,.1); box-shadow: inset 0 1px 0 #fff, 0 1px 10px rgba(0,0,0,.1); +} +.navbar-subnav-fixed .navbar-inner { + border-color: #d5d5d5; + border-width: 0 0 1px; /* drop the border on the fixed edges */ filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */ + .border-radius(0); } .navbar-subnav-fixed .nav { float: none; -- cgit v1.2.3 From cd2d82150cc27c1f81d2394a22efbf2dbec0e7be Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 28 Jun 2012 21:46:45 -0700 Subject: standardize top level file comments --- less/accordion.less | 5 +++-- less/alerts.less | 17 ++++++++++++----- less/breadcrumbs.less | 6 ++++-- less/button-groups.less | 5 +++-- less/buttons.less | 5 +++-- less/carousel.less | 6 ++++-- less/close.less | 6 ++++-- less/code.less | 7 ++++--- less/component-animations.less | 6 ++++-- less/dropdowns.less | 6 ++++-- less/forms.less | 6 +++--- less/grid.less | 5 +++++ less/hero-unit.less | 6 ++++-- less/labels-badges.less | 6 ++++-- less/layouts.less | 3 +-- less/mixins.less | 6 +++--- less/modals.less | 6 ++++-- less/navbar.less | 5 +++-- less/navs.less | 6 +++--- less/pager.less | 6 ++++-- less/pagination.less | 6 ++++-- less/popovers.less | 6 ++++-- less/progress-bars.less | 5 +++-- less/reset.less | 8 +++++--- less/responsive-1200px-min.less | 6 ++++-- less/responsive-767px-max.less | 4 +++- less/responsive-768px-979px.less | 6 ++++-- less/responsive-navbar.less | 5 +++++ less/responsive-utilities.less | 6 ++++-- less/scaffolding.less | 4 ++-- less/sprites.less | 6 +++--- less/tables.less | 5 ++--- less/thumbnails.less | 7 +++++-- less/tooltip.less | 6 ++++-- less/type.less | 6 +++--- less/utilities.less | 6 ++++-- less/variables.less | 9 ++++----- less/wells.less | 7 +++++-- 38 files changed, 147 insertions(+), 85 deletions(-) (limited to 'less') diff --git a/less/accordion.less b/less/accordion.less index 31b8cdc33..c13c7be26 100644 --- a/less/accordion.less +++ b/less/accordion.less @@ -1,5 +1,6 @@ -// ACCORDION -// --------- +// +// Accordion +// -------------------------------------------------- // Parent container diff --git a/less/alerts.less b/less/alerts.less index f8b2a888a..703c19d12 100644 --- a/less/alerts.less +++ b/less/alerts.less @@ -1,7 +1,11 @@ -// ALERT STYLES -// ------------ +// +// Alerts +// -------------------------------------------------- + + +// Base styles +// ------------------------- -// Base alert styles .alert { padding: 8px 35px 8px 14px; margin-bottom: @baseLineHeight; @@ -20,8 +24,9 @@ line-height: @baseLineHeight; } + // Alternate styles -// ---------------- +// ------------------------- .alert-success { background-color: @successBackground; @@ -40,8 +45,10 @@ color: @infoText; } + // Block alerts -// ------------------------ +// ------------------------- + .alert-block { padding-top: 14px; padding-bottom: 14px; diff --git a/less/breadcrumbs.less b/less/breadcrumbs.less index 111f12279..c8a3807de 100644 --- a/less/breadcrumbs.less +++ b/less/breadcrumbs.less @@ -1,5 +1,7 @@ -// BREADCRUMBS -// ----------- +// +// Breadcrumbs +// -------------------------------------------------- + .breadcrumb { padding: 7px 14px; diff --git a/less/button-groups.less b/less/button-groups.less index 8234a893c..26cc2091a 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -1,5 +1,6 @@ -// BUTTON GROUPS -// ------------- +// +// Button groups +// -------------------------------------------------- // Make the div behave like a button diff --git a/less/buttons.less b/less/buttons.less index c44ff3e6f..876d35926 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -1,5 +1,6 @@ -// BUTTON STYLES -// ------------- +// +// Buttons +// -------------------------------------------------- // Base styles diff --git a/less/carousel.less b/less/carousel.less index 8fbd30315..01675af72 100644 --- a/less/carousel.less +++ b/less/carousel.less @@ -1,5 +1,7 @@ -// CAROUSEL -// -------- +// +// Carousel +// -------------------------------------------------- + .carousel { position: relative; diff --git a/less/close.less b/less/close.less index 31fe6fcb3..c71a508f3 100644 --- a/less/close.less +++ b/less/close.less @@ -1,5 +1,7 @@ -// CLOSE ICONS -// ----------- +// +// Close icons +// -------------------------------------------------- + .close { float: right; diff --git a/less/code.less b/less/code.less index 0cae749a0..a3602de11 100644 --- a/less/code.less +++ b/less/code.less @@ -1,6 +1,7 @@ -// Code.less -// Code typography styles for the and
 elements
-// --------------------------------------------------------
+//
+// Code (inline and blocK)
+// --------------------------------------------------
+
 
 // Inline and block code styles
 code,
diff --git a/less/component-animations.less b/less/component-animations.less
index 1e1e78b85..d614263a7 100644
--- a/less/component-animations.less
+++ b/less/component-animations.less
@@ -1,5 +1,7 @@
-// COMPONENT ANIMATIONS
-// --------------------
+//
+// Component animations
+// --------------------------------------------------
+
 
 .fade {
   opacity: 0;
diff --git a/less/dropdowns.less b/less/dropdowns.less
index f55edbae7..e9e91b6a4 100644
--- a/less/dropdowns.less
+++ b/less/dropdowns.less
@@ -1,5 +1,7 @@
-// DROPDOWN MENUS
-// --------------
+//
+// Dropdown menus
+// --------------------------------------------------
+
 
 // Use the .menu class on any 
  • element within the topbar or ul.tabs and you'll get some superfancy dropdowns .dropup, diff --git a/less/forms.less b/less/forms.less index 911af1a25..f97d6aeef 100644 --- a/less/forms.less +++ b/less/forms.less @@ -1,6 +1,6 @@ -// Forms.less -// Base styles for various input types, form layouts, and states -// ------------------------------------------------------------- +// +// Forms +// -------------------------------------------------- // GENERAL STYLES diff --git a/less/grid.less b/less/grid.less index e62a96093..b63005c68 100644 --- a/less/grid.less +++ b/less/grid.less @@ -1,3 +1,8 @@ +// +// Grid system +// -------------------------------------------------- + + // Fixed (940px) #grid > .core(@gridColumnWidth, @gridGutterWidth); diff --git a/less/hero-unit.less b/less/hero-unit.less index 0ffe82962..672b7d7c7 100644 --- a/less/hero-unit.less +++ b/less/hero-unit.less @@ -1,5 +1,7 @@ -// HERO UNIT -// --------- +// +// Hero unit +// -------------------------------------------------- + .hero-unit { padding: 60px; diff --git a/less/labels-badges.less b/less/labels-badges.less index 0fbd7bbc6..7537b188a 100644 --- a/less/labels-badges.less +++ b/less/labels-badges.less @@ -1,5 +1,7 @@ -// LABELS & BADGES -// --------------- +// +// Labels and badges +// -------------------------------------------------- + // Base classes .label, diff --git a/less/layouts.less b/less/layouts.less index cc53627ff..24a206211 100644 --- a/less/layouts.less +++ b/less/layouts.less @@ -1,7 +1,6 @@ // // Layouts -// Fixed-width and fluid (with sidebar) layouts -// -------------------------------------------- +// -------------------------------------------------- // Container (centered, fixed-width layouts) diff --git a/less/mixins.less b/less/mixins.less index fd162a049..733dfd08b 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -1,6 +1,6 @@ -// Mixins.less -// Snippets of reusable CSS to develop faster and keep code readable -// ----------------------------------------------------------------- +// +// Mixins +// -------------------------------------------------- // UTILITY MIXINS diff --git a/less/modals.less b/less/modals.less index 870ad0dfe..32aab7acd 100644 --- a/less/modals.less +++ b/less/modals.less @@ -1,5 +1,7 @@ -// MODALS -// ------ +// +// Modals +// -------------------------------------------------- + // Recalculate z-index where appropriate .modal-open { diff --git a/less/navbar.less b/less/navbar.less index d99894509..38edac288 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -1,5 +1,6 @@ -// NAVBAR (FIXED AND STATIC) -// ------------------------- +// +// Navbars +// -------------------------------------------------- // COMMON STYLES diff --git a/less/navs.less b/less/navs.less index 66ce6fa3a..33bdfe1d0 100644 --- a/less/navs.less +++ b/less/navs.less @@ -1,6 +1,6 @@ -// NAVIGATIONS -// ----------- - +// +// Navs +// -------------------------------------------------- // BASE CLASS diff --git a/less/pager.less b/less/pager.less index 4244b5eb8..e19d50aaa 100644 --- a/less/pager.less +++ b/less/pager.less @@ -1,5 +1,7 @@ -// PAGER -// ----- +// +// Pager pagination +// -------------------------------------------------- + .pager { margin-left: 0; diff --git a/less/pagination.less b/less/pagination.less index d978a7b8c..9b0066077 100644 --- a/less/pagination.less +++ b/less/pagination.less @@ -1,5 +1,7 @@ -// PAGINATION -// ---------- +// +// Pagination (multiple pages) +// -------------------------------------------------- + .pagination { height: @baseLineHeight * 2; diff --git a/less/popovers.less b/less/popovers.less index ca69ca801..5ea79cf73 100644 --- a/less/popovers.less +++ b/less/popovers.less @@ -1,5 +1,7 @@ -// POPOVERS -// -------- +// +// Popovers +// -------------------------------------------------- + .popover { position: absolute; diff --git a/less/progress-bars.less b/less/progress-bars.less index 3b47e6482..abcbe8761 100644 --- a/less/progress-bars.less +++ b/less/progress-bars.less @@ -1,5 +1,6 @@ -// PROGRESS BARS -// ------------- +// +// Progress bars +// -------------------------------------------------- // ANIMATIONS diff --git a/less/reset.less b/less/reset.less index 2332e03c3..1c408e369 100644 --- a/less/reset.less +++ b/less/reset.less @@ -1,6 +1,8 @@ -// Reset.less -// Adapted from Normalize.css http://github.com/necolas/normalize.css -// ------------------------------------------------------------------------ +// +// Modals +// Adapted from http://github.com/necolas/normalize.css +// -------------------------------------------------- + // Display in IE6-9 and FF3 // ------------------------- diff --git a/less/responsive-1200px-min.less b/less/responsive-1200px-min.less index f8ae95979..4f35ba6ca 100644 --- a/less/responsive-1200px-min.less +++ b/less/responsive-1200px-min.less @@ -1,5 +1,7 @@ -// LARGE DESKTOP & UP -// ------------------ +// +// Responsive: Large desktop and up +// -------------------------------------------------- + @media (min-width: 1200px) { diff --git a/less/responsive-767px-max.less b/less/responsive-767px-max.less index 84d1ba13f..105ac5984 100644 --- a/less/responsive-767px-max.less +++ b/less/responsive-767px-max.less @@ -1,6 +1,8 @@ -// LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET +// +// Responsive: Landscape phone to desktop/tablet // -------------------------------------------------- + @media (max-width: 767px) { // Padding to set content in a bit diff --git a/less/responsive-768px-979px.less b/less/responsive-768px-979px.less index 3972ffc69..8e8c486a0 100644 --- a/less/responsive-768px-979px.less +++ b/less/responsive-768px-979px.less @@ -1,5 +1,7 @@ -// PORTRAIT TABLET TO DEFAULT DESKTOP -// ---------------------------------- +// +// Responsive: Tablet to desktop +// -------------------------------------------------- + @media (min-width: 768px) and (max-width: 979px) { diff --git a/less/responsive-navbar.less b/less/responsive-navbar.less index 5a66a0559..7f01059ce 100644 --- a/less/responsive-navbar.less +++ b/less/responsive-navbar.less @@ -1,3 +1,8 @@ +// +// Responsive: Navbar +// -------------------------------------------------- + + // TABLETS AND BELOW // ----------------- @media (max-width: 979px) { diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less index 1962a2f15..59deafe81 100644 --- a/less/responsive-utilities.less +++ b/less/responsive-utilities.less @@ -1,5 +1,7 @@ -// RESPONSIVE CLASSES -// ------------------ +// +// Responsive: Utility classes +// -------------------------------------------------- + // Hide from screenreaders and browsers // Credit: HTML5 Boilerplate diff --git a/less/scaffolding.less b/less/scaffolding.less index 57c74eda0..5bc90cc16 100644 --- a/less/scaffolding.less +++ b/less/scaffolding.less @@ -1,6 +1,6 @@ +// // Scaffolding -// Basic and global styles for generating a grid system, structural layout, and page templates -// ------------------------------------------------------------------------------------------- +// -------------------------------------------------- // Body reset diff --git a/less/sprites.less b/less/sprites.less index 753871cd7..fa0b31da0 100644 --- a/less/sprites.less +++ b/less/sprites.less @@ -1,6 +1,6 @@ -// SPRITES -// Glyphs and icons for buttons, nav, and more -// ------------------------------------------- +// +// Sprites +// -------------------------------------------------- // ICONS diff --git a/less/tables.less b/less/tables.less index ecd92233d..d0ab2f3c5 100644 --- a/less/tables.less +++ b/less/tables.less @@ -1,7 +1,6 @@ // -// Tables.less -// Tables for, you guessed it, tabular data -// ---------------------------------------- +// Tables +// -------------------------------------------------- // BASE TABLES diff --git a/less/thumbnails.less b/less/thumbnails.less index aa69f8e33..d609c7df3 100644 --- a/less/thumbnails.less +++ b/less/thumbnails.less @@ -1,5 +1,8 @@ -// THUMBNAILS -// ---------- +// +// Thumbnails +// -------------------------------------------------- + + // Note: `.thumbnails` and `.thumbnails > li` are overriden in responsive files // Make wrapper ul behave like the grid diff --git a/less/tooltip.less b/less/tooltip.less index 5111a193f..8593e2b5f 100644 --- a/less/tooltip.less +++ b/less/tooltip.less @@ -1,5 +1,7 @@ -// TOOLTIP -// ------= +// +// Tooltips +// -------------------------------------------------- + .tooltip { position: absolute; diff --git a/less/type.less b/less/type.less index 41514b56c..61a7db493 100644 --- a/less/type.less +++ b/less/type.less @@ -1,6 +1,6 @@ -// Typography.less -// Headings, body text, lists, code, and more for a versatile and durable typography system -// ---------------------------------------------------------------------------------------- +// +// Typography +// -------------------------------------------------- // BODY TEXT diff --git a/less/utilities.less b/less/utilities.less index d60d22031..35267b305 100644 --- a/less/utilities.less +++ b/less/utilities.less @@ -1,5 +1,7 @@ -// UTILITY CLASSES -// --------------- +// +// Utility classes +// -------------------------------------------------- + // Quick floats .pull-right { diff --git a/less/variables.less b/less/variables.less index bd3a2905d..09dc55494 100644 --- a/less/variables.less +++ b/less/variables.less @@ -1,10 +1,9 @@ -// Variables.less -// Variables to customize the look and feel of Bootstrap -// ----------------------------------------------------- - +// +// Variables +// -------------------------------------------------- -// GLOBAL VALUES +// Global values // -------------------------------------------------- diff --git a/less/wells.less b/less/wells.less index bac3715a7..e4e0a9beb 100644 --- a/less/wells.less +++ b/less/wells.less @@ -1,6 +1,9 @@ -// WELLS -// ----- +// +// Wells +// -------------------------------------------------- + +// Base class .well { min-height: 20px; padding: 19px; -- cgit v1.2.3 From 70e81e6f55ad77f3777e87c4edd646a2f5ac8bee Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 1 Jul 2012 08:42:09 -0700 Subject: new jumbotron --- less/buttons.less | 4 ++-- less/variables.less | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) (limited to 'less') diff --git a/less/buttons.less b/less/buttons.less index 876d35926..389c48448 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -26,7 +26,7 @@ border-bottom-color: darken(@btnBorder, 10%); .border-radius(4px); .ie7-restore-left-whitespace(); // Give IE7 some love - .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)"); + .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 2px rgba(0,0,0,.05)"); } // Hover state @@ -54,7 +54,7 @@ background-color: darken(@white, 15%) e("\9"); background-image: none; outline: 0; - .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)"); + .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.05)"); } // Disabled state diff --git a/less/variables.less b/less/variables.less index 09dc55494..dcd2d5558 100644 --- a/less/variables.less +++ b/less/variables.less @@ -87,7 +87,7 @@ @btnDangerBackground: #ee5f5b; @btnDangerBackgroundHighlight: #bd362f; -@btnInverseBackground: @gray; +@btnInverseBackground: #444; @btnInverseBackgroundHighlight: @grayDarker; -- cgit v1.2.3 From 26dad5f56defc9efab0be87afc5c9c18d6d844a5 Mon Sep 17 00:00:00 2001 From: Dave DeSandro Date: Mon, 2 Jul 2012 17:21:26 -0400 Subject: .progress .bar { height: 100% } --- less/progress-bars.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less') diff --git a/less/progress-bars.less b/less/progress-bars.less index abcbe8761..768f55ad9 100644 --- a/less/progress-bars.less +++ b/less/progress-bars.less @@ -54,7 +54,7 @@ // Bar of progress .progress .bar { width: 0%; - height: 18px; + height: 100%; color: @white; font-size: 12px; text-align: center; -- cgit v1.2.3 From b4125748b0d0e12a7855350ee3d9089e0a2f93e7 Mon Sep 17 00:00:00 2001 From: "Gavin Cooper (work)" Date: Wed, 4 Jul 2012 12:22:34 +0100 Subject: added ability to give rows in tables status classes .success .error and .info. --- less/tables.less | 10 ++++++++++ 1 file changed, 10 insertions(+) (limited to 'less') diff --git a/less/tables.less b/less/tables.less index d0ab2f3c5..10499a1db 100644 --- a/less/tables.less +++ b/less/tables.less @@ -48,6 +48,16 @@ table { tbody + tbody { border-top: 2px solid @tableBorder; } + + .success td { + background-color: @successBackground; + } + .error td { + background-color: @errorBackground; + } + .info td { + background-color: @infoBackground; + } } -- cgit v1.2.3 From 62c386259b7fbd1ef665fc6baf4458c8e05ad1f8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 4 Jul 2012 23:31:30 -0700 Subject: rewrite docs homepage, new graphics --- less/buttons.less | 2 +- less/navbar.less | 14 ++++++++++++-- less/variables.less | 6 +++--- 3 files changed, 16 insertions(+), 6 deletions(-) (limited to 'less') diff --git a/less/buttons.less b/less/buttons.less index 389c48448..c46b7cf3e 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -26,7 +26,7 @@ border-bottom-color: darken(@btnBorder, 10%); .border-radius(4px); .ie7-restore-left-whitespace(); // Give IE7 some love - .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 2px rgba(0,0,0,.05)"); + .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.15), 0 1px 2px rgba(0,0,0,.05)"); } // Hover state diff --git a/less/navbar.less b/less/navbar.less index 38edac288..a5d1e7e65 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -383,11 +383,18 @@ } .navbar-subnav .navbar-inner { padding: 0; - #gradient > .vertical(#f9f9f9, #f1f1f1); + #gradient > .vertical(#ffffff, #f1f1f1); .box-shadow(none); border: 1px solid #e5e5e5; } +// Lighten vertical dividers +.navbar-subnav .divider-vertical { + background-color: #f1f1f1; + border-right-color: #ffffff; +} + + // Change link colors back .navbar-subnav .nav > li > a { color: @linkColor; @@ -401,7 +408,10 @@ .navbar-subnav .nav > .active > a, .navbar-subnav .nav > .active > a:hover { color: #777; - background-color: #e5e5e5; + background-color: #eee; + -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.5), 1px 0 0 rgba(255,255,255,.5); + -moz-box-shadow: -1px 0 0 rgba(255,255,255,.5), 1px 0 0 rgba(255,255,255,.5); + box-shadow: -1px 0 0 rgba(255,255,255,.5), 1px 0 0 rgba(255,255,255,.5); } // Dropdown carets diff --git a/less/variables.less b/less/variables.less index dcd2d5558..5d900164c 100644 --- a/less/variables.less +++ b/less/variables.less @@ -73,7 +73,7 @@ @btnBorder: #ccc; @btnPrimaryBackground: @linkColor; -@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 15%); +@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%); @btnInfoBackground: #5bc0de; @btnInfoBackgroundHighlight: #2f96b4; @@ -155,8 +155,8 @@ // Navbar // ------------------------- @navbarHeight: 40px; -@navbarBackground: @grayDarker; -@navbarBackgroundHighlight: @grayDark; +@navbarBackground: #111; +@navbarBackgroundHighlight: #222; @navbarText: @grayLight; @navbarLinkColor: @grayLight; -- cgit v1.2.3 From a645664e503475af2b8ed6f81f6860aad188f327 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 5 Jul 2012 10:12:15 -0700 Subject: update thumbnails to fix display issues and refine aesthetics --- less/thumbnails.less | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'less') diff --git a/less/thumbnails.less b/less/thumbnails.less index d609c7df3..f229a2dad 100644 --- a/less/thumbnails.less +++ b/less/thumbnails.less @@ -27,10 +27,10 @@ .thumbnail { display: block; padding: 4px; - line-height: 1; + line-height: 20px; border: 1px solid #ddd; .border-radius(4px); - .box-shadow(0 1px 1px rgba(0,0,0,.075)); + .box-shadow(0 1px 3px rgba(0,0,0,.055)); } // Add a hover state for linked versions only a.thumbnail:hover { @@ -47,4 +47,5 @@ a.thumbnail:hover { } .thumbnail .caption { padding: 9px; + color: @gray; } -- cgit v1.2.3 From c6ee96c02587aeea0da52018325c100bfd45127a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 5 Jul 2012 10:37:23 -0700 Subject: fix up subnav styles, add subnav search form styles, add some basic docs for subnav --- less/navbar.less | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) (limited to 'less') diff --git a/less/navbar.less b/less/navbar.less index a5d1e7e65..a9582e0a4 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -379,10 +379,7 @@ // Override the default .navbar -.navbar-subnav { -} .navbar-subnav .navbar-inner { - padding: 0; #gradient > .vertical(#ffffff, #f1f1f1); .box-shadow(none); border: 1px solid #e5e5e5; @@ -421,6 +418,21 @@ border-bottom-color: @linkColor; } +// Reset search input form +.navbar-subnav .search-query { + background-color: #fff; + border-color: #ccc; + .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.25)"); + + // On :focus, keep the same padding and border + &:focus, + &.focused { + padding: 4px 9px; + border: 1px solid rgba(82,168,236,.8); + .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6)"); + } +} + // Open dropdown dropdown-toggle .navbar-subnav .nav .open > a { color: @linkColorHover; -- cgit v1.2.3 From 3c07eaa251b73e6c5eff4b56e074c54708a4b4ba Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 5 Jul 2012 15:11:54 -0700 Subject: updates to type scale --- less/navbar.less | 2 +- less/tests/css-tests.css | 17 ++++++++++- less/tests/css-tests.html | 39 +++++++++++++++++++++++++ less/type.less | 74 +++++++++++++++-------------------------------- less/variables.less | 4 +-- 5 files changed, 82 insertions(+), 54 deletions(-) (limited to 'less') diff --git a/less/navbar.less b/less/navbar.less index a9582e0a4..660838eb8 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -206,7 +206,7 @@ float: none; // Vertically center the text given @navbarHeight @elementHeight: 20px; - padding: ((@navbarHeight - @elementHeight) / 2) 12px ((@navbarHeight - @elementHeight) / 2 + 1); + padding: ((@navbarHeight - @elementHeight) / 2) 15px ((@navbarHeight - @elementHeight) / 2 + 1); line-height: 19px; color: @navbarLinkColor; text-decoration: none; diff --git a/less/tests/css-tests.css b/less/tests/css-tests.css index e0870be44..628dbba6f 100644 --- a/less/tests/css-tests.css +++ b/less/tests/css-tests.css @@ -12,9 +12,24 @@ body { .subhead { margin-bottom: 36px; } -h4 { +/*h4 { margin-bottom: 5px; } +*/ + +.type-test { + margin-bottom: 20px; + padding: 0 20px 20px; + background: url(../../docs/assets/img/grid-baseline-20px.png); +} +.type-test h1, +.type-test h2, +.type-test h3, +.type-test h4, +.type-test h5, +.type-test h6 { + xbackground-color: rgba(255,0,0,.2); +} /* colgroup tests */ diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html index 2396e348c..4b8b1a277 100644 --- a/less/tests/css-tests.html +++ b/less/tests/css-tests.html @@ -55,6 +55,45 @@ + + + + +
    +
    +
    +

    h1. Heading 1

    +

    h2. Heading 2

    +

    h3. Heading 3

    +

    h4. Heading 4

    +
    h5. Heading 5
    +
    h6. Heading 6
    +

    Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

    +
    +
    +
    +
    +

    h1. Heading 1

    +

    Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

    +

    h2. Heading 2

    +

    Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

    +

    h3. Heading 3

    +

    Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

    +

    h4. Heading 4

    +

    Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

    +
    h5. Heading 5
    +

    Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

    +
    h6. Heading 6
    +

    Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

    +
    +
    +
    + + + diff --git a/less/type.less b/less/type.less index 61a7db493..8ff42476a 100644 --- a/less/type.less +++ b/less/type.less @@ -3,8 +3,8 @@ // -------------------------------------------------- -// BODY TEXT -// --------- +// Body text +// ------------------------- p { margin: 0 0 @baseLineHeight / 2; @@ -20,13 +20,15 @@ p { line-height: @baseLineHeight * 1.5; } -// HEADINGS -// -------- + +// Headings +// ------------------------- h1, h2, h3, h4, h5, h6 { - margin: 0; + margin: (@baseLineHeight / 2) 0; font-family: @headingsFontFamily; font-weight: @headingsFontWeight; + line-height: 1; color: @headingsColor; text-rendering: optimizelegibility; // Fix the character spacing for headings small { @@ -34,59 +36,31 @@ h1, h2, h3, h4, h5, h6 { color: @grayLight; } } -h1 { - font-size: 30px; - line-height: @baseLineHeight * 2; - small { - font-size: 18px; - } -} -h2 { - font-size: 24px; - line-height: @baseLineHeight * 2; - small { - font-size: 18px; - } -} -h3 { - font-size: 18px; - line-height: @baseLineHeight * 1.5; - small { - font-size: 14px; - } -} -h4, h5, h6 { - line-height: @baseLineHeight; -} -h4 { - font-size: 14px; - small { - font-size: 12px; - } -} -h5 { - font-size: 12px; -} -h6 { - font-size: 11px; - color: @grayLight; - text-transform: uppercase; -} +h1 { font-size: 36px; line-height: 40px; } +h2 { font-size: 30px; line-height: 40px; } +h3 { font-size: 24px; line-height: 40px; } +h4 { font-size: 18px; line-height: 20px; } +h5 { font-size: 14px; line-height: 20px; } +h6 { font-size: 12px; line-height: 20px; } + +h1 small { font-size: 24px; } +h2 small { font-size: 18px; } +h3 small { font-size: 14px; } +h4 small { font-size: 14px; } + // Page header +// ------------------------- + .page-header { - padding-bottom: @baseLineHeight - 1; - margin: @baseLineHeight 0; + margin: @baseLineHeight 0 (@baseLineHeight - 1); border-bottom: 1px solid @grayLighter; } -.page-header h1 { - line-height: 1; -} -// LISTS -// ----- +// Lists +// -------------------------------------------------- // Unordered and Ordered lists ul, ol { diff --git a/less/variables.less b/less/variables.less index 5d900164c..9a3e0ed4e 100644 --- a/less/variables.less +++ b/less/variables.less @@ -48,9 +48,9 @@ @serifFontFamily: Georgia, "Times New Roman", Times, serif; @monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace; -@baseFontSize: 13px; +@baseFontSize: 14px; @baseFontFamily: @sansFontFamily; -@baseLineHeight: 18px; +@baseLineHeight: 20px; @altFontFamily: @serifFontFamily; @headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily -- cgit v1.2.3 From 68146db00454b46493545aff34d06cf2c11e0f6d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 5 Jul 2012 15:15:57 -0700 Subject: buttons and pre updates for font-size --- less/buttons.less | 2 +- less/variables.less | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'less') diff --git a/less/buttons.less b/less/buttons.less index c46b7cf3e..b48b0555b 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -10,7 +10,7 @@ .btn { display: inline-block; .ie7-inline-block(); - padding: 4px 10px 4px; + padding: 4px 14px 4px; margin-bottom: 0; // For input.btn font-size: @baseFontSize; line-height: @baseLineHeight; diff --git a/less/variables.less b/less/variables.less index 9a3e0ed4e..bc8ff4bed 100644 --- a/less/variables.less +++ b/less/variables.less @@ -46,7 +46,7 @@ // ------------------------- @sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif; @serifFontFamily: Georgia, "Times New Roman", Times, serif; -@monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace; +@monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace; @baseFontSize: 14px; @baseFontFamily: @sansFontFamily; -- cgit v1.2.3 From cd6915cdb4f53f6c8e89599bfacbbb298412ec33 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 5 Jul 2012 19:45:32 -0700 Subject: tests cleanup on type, homepage content tweaks --- less/tests/css-tests.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less') diff --git a/less/tests/css-tests.css b/less/tests/css-tests.css index 628dbba6f..6001f53aa 100644 --- a/less/tests/css-tests.css +++ b/less/tests/css-tests.css @@ -28,7 +28,7 @@ body { .type-test h4, .type-test h5, .type-test h6 { - xbackground-color: rgba(255,0,0,.2); + background-color: rgba(255,0,0,.2); } -- cgit v1.2.3 From 19ea4668e5d62303b26e322d32b45d6268837c18 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 6 Jul 2012 10:35:08 -0700 Subject: prevent small tags from increasing height of headings --- less/type.less | 1 + 1 file changed, 1 insertion(+) (limited to 'less') diff --git a/less/type.less b/less/type.less index 61a7db493..a424f0f5c 100644 --- a/less/type.less +++ b/less/type.less @@ -31,6 +31,7 @@ h1, h2, h3, h4, h5, h6 { text-rendering: optimizelegibility; // Fix the character spacing for headings small { font-weight: normal; + line-height: 1; color: @grayLight; } } -- cgit v1.2.3 From dc6eaafb00426315a3720324d7fc3a4a33a04ddf Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 6 Jul 2012 10:59:46 -0700 Subject: vertically align inline form content --- less/forms.less | 1 + 1 file changed, 1 insertion(+) (limited to 'less') diff --git a/less/forms.less b/less/forms.less index f97d6aeef..1b57b66be 100644 --- a/less/forms.less +++ b/less/forms.less @@ -502,6 +502,7 @@ input.search-query { display: inline-block; .ie7-inline-block(); margin-bottom: 0; + vertical-align: middle; } // Re-hide hidden elements due to specifity .hide { -- cgit v1.2.3 From e2336ef02ab620277e2d81f3fc6b4ff69e027ae4 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jul 2012 00:30:43 -0700 Subject: remove specific values for the fluid grid system and instead use LESS's percentage() function --- less/variables.less | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) (limited to 'less') diff --git a/less/variables.less b/less/variables.less index 09dc55494..4d07f0649 100644 --- a/less/variables.less +++ b/less/variables.less @@ -213,21 +213,23 @@ // 1200px min @gridColumnWidth1200: 70px; @gridGutterWidth1200: 30px; +@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1)); // 768px-979px @gridColumnWidth768: 42px; @gridGutterWidth768: 20px; +@gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1)); // Fluid grid // ------------------------- -@fluidGridColumnWidth: 6.382978723%; -@fluidGridGutterWidth: 2.127659574%; +@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth); +@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth); // 1200px min -@fluidGridColumnWidth1200: 5.982905983%; -@fluidGridGutterWidth1200: 2.564102564%; +@fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200); +@fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200); // 768px-979px -@fluidGridColumnWidth768: 5.801104972%; -@fluidGridGutterWidth768: 2.762430939%; +@fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768); +@fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768); -- cgit v1.2.3 From e2b777d9a3ea12ec10f6046975ec0f43c6636601 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jul 2012 12:34:47 -0700 Subject: docs pre font-size and nowrap on 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 1b57b66be..b53159a1e 100644 --- a/less/forms.less +++ b/less/forms.less @@ -381,6 +381,7 @@ textarea { .input-append { margin-bottom: 5px; font-size: 0; + white-space: nowrap; // Prevent span and input from separating input, select, .uneditable-input { -- cgit v1.2.3 From 3f2f96b0d71e64bd53d5175d0876f25f23a7835b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jul 2012 12:52:05 -0700 Subject: reoder forms a bit --- less/forms.less | 65 ++++++++++++++++++++++++++++++++------------------------- 1 file changed, 36 insertions(+), 29 deletions(-) (limited to 'less') diff --git a/less/forms.less b/less/forms.less index b53159a1e..a30cc3fcf 100644 --- a/less/forms.less +++ b/less/forms.less @@ -149,12 +149,6 @@ input[type="checkbox"] { width: auto; // Override of generic input selector } -// Make uneditable textareas behave like a textarea -.uneditable-textarea { - width: auto; - height: auto; -} - // Set the height of select and file controls to match text inputs select, input[type="file"] { @@ -184,6 +178,41 @@ input[type="checkbox"]:focus { } +// Uneditable inputs +// ------------------------- + +// Make uneditable inputs look inactive +.uneditable-input, +.uneditable-textarea { + color: @grayLight; + background-color: darken(@inputBackground, 1%); + border-color: @inputBorder; + .box-shadow(inset 0 1px 2px rgba(0,0,0,.025)); + cursor: not-allowed; +} + +// For text that needs to appear as an input but should not be an input +.uneditable-input { + overflow: hidden; // prevent text from wrapping, but still cut it off like an input does + white-space: nowrap; +} + +// Make uneditable textareas behave like a textarea +.uneditable-textarea { + width: auto; + height: auto; +} + + +// Placeholder +// ------------------------- + +// Placeholder text gets special styles; can't be bundled together though for some reason +input, +textarea { + .placeholder(); +} + // CHECKBOXES & RADIOS // ------------------- @@ -333,22 +362,6 @@ select:focus:required:invalid { .clearfix(); // Adding clearfix to allow for .pull-right button containers } -// For text that needs to appear as an input but should not be an input -.uneditable-input { - overflow: hidden; // prevent text from wrapping, but still cut it off like an input does - white-space: nowrap; - cursor: not-allowed; - background-color: @inputBackground; - border-color: #eee; - .box-shadow(inset 0 1px 2px rgba(0,0,0,.025)); -} - -// Placeholder text gets special styles; can't be bundled together though for some reason -input, -textarea { - .placeholder(); -} - // HELP TEXT @@ -382,6 +395,7 @@ textarea { margin-bottom: 5px; font-size: 0; white-space: nowrap; // Prevent span and input from separating + input, select, .uneditable-input { @@ -396,9 +410,6 @@ textarea { z-index: 2; } } - .uneditable-input { - border-left-color: #ccc; - } .add-on { display: inline-block; width: auto; @@ -440,10 +451,6 @@ textarea { .uneditable-input { .border-radius(@inputBorderRadius 0 0 @inputBorderRadius); } - .uneditable-input { - border-right-color: #ccc; - border-left-color: #eee; - } .add-on:last-child, .btn:last-child { .border-radius(0 @inputBorderRadius @inputBorderRadius 0); -- cgit v1.2.3 From 7d1c8c2a0ce16331583a965821690f7715e62908 Mon Sep 17 00:00:00 2001 From: nextgenthemes Date: Sat, 7 Jul 2012 23:20:50 +0300 Subject: Wrapped btn:hover, btn.disabled inside .btn --- less/buttons.less | 72 +++++++++++++++++++++++++++---------------------------- 1 file changed, 36 insertions(+), 36 deletions(-) (limited to 'less') diff --git a/less/buttons.less b/less/buttons.less index 876d35926..26f77d7b3 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -27,47 +27,47 @@ .border-radius(4px); .ie7-restore-left-whitespace(); // Give IE7 some love .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)"); -} - -// Hover state -.btn:hover { - 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 - // behind the gradient (there for IE<=9 fallback) gets mismatched - .transition(background-position .1s linear); -} - -// Focus state for keyboard and accessibility -.btn:focus { - .tab-focus(); -} + // Hover state + &:hover { + 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 + // behind the gradient (there for IE<=9 fallback) gets mismatched + .transition(background-position .1s linear); + } + + // Focus state for keyboard and accessibility + &:focus { + .tab-focus(); + } + + // Active state + &.active, + &:active { + background-color: darken(@white, 10%); + background-color: darken(@white, 15%) e("\9"); + background-image: none; + outline: 0; + .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)"); + } -// Active state -.btn.active, -.btn:active { - background-color: darken(@white, 10%); - background-color: darken(@white, 15%) e("\9"); - background-image: none; - outline: 0; - .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)"); -} + // Disabled state + &.disabled, + &[disabled] { + cursor: default; + background-color: darken(@white, 10%); + background-image: none; + .opacity(65); + .box-shadow(none); + } -// Disabled state -.btn.disabled, -.btn[disabled] { - cursor: default; - background-color: darken(@white, 10%); - background-image: none; - .opacity(65); - .box-shadow(none); } - // Button Sizes // -------------------------------------------------- -- cgit v1.2.3 From 5f861ef51735d8b0f2c0f0faf8f438808a480d99 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 7 Jul 2012 23:16:07 -0700 Subject: fix up docs to use default container, fix responsive home changes --- less/code.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'less') diff --git a/less/code.less b/less/code.less index a3602de11..97d30eafe 100644 --- a/less/code.less +++ b/less/code.less @@ -8,7 +8,7 @@ code, pre { padding: 0 3px 2px; #font > #family > .monospace; - font-size: @baseFontSize - 1; + font-size: @baseFontSize - 2; color: @grayDark; .border-radius(3px); } @@ -26,7 +26,7 @@ pre { display: block; padding: (@baseLineHeight - 1) / 2; margin: 0 0 @baseLineHeight / 2; - font-size: @baseFontSize * .925; // 13px to 12px + font-size: @baseFontSize - 2; // 14px to 12px line-height: @baseLineHeight; word-break: break-all; word-wrap: break-word; -- cgit v1.2.3 From 20676ddd4d3e46c9fb32aadfeddb3a4a68efa6a3 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 8 Jul 2012 01:47:36 -0700 Subject: adding getting started page based on Bootstrap University from awhile back, testing out side nav on docs instead of subnav bar --- less/type.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'less') diff --git a/less/type.less b/less/type.less index e3106c717..697b64a54 100644 --- a/less/type.less +++ b/less/type.less @@ -54,7 +54,8 @@ h4 small { font-size: 14px; } // ------------------------- .page-header { - margin: @baseLineHeight 0 (@baseLineHeight - 1); + padding-bottom: (@baseLineHeight / 2) - 1; + margin: @baseLineHeight 0 (@baseLineHeight * 1.5); border-bottom: 1px solid @grayLighter; } -- cgit v1.2.3 From db9925510ba9328f227e5ad3935f73e0c67904d8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 8 Jul 2012 21:47:16 -0700 Subject: fix up carousel alignment and line-height --- less/carousel.less | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) (limited to 'less') diff --git a/less/carousel.less b/less/carousel.less index 01675af72..33f98ac4d 100644 --- a/less/carousel.less +++ b/less/carousel.less @@ -105,6 +105,7 @@ } } + // Caption for text below images // ----------------------------- @@ -113,11 +114,18 @@ left: 0; right: 0; bottom: 0; - padding: 10px 15px 5px; + padding: 15px; background: @grayDark; background: rgba(0,0,0,.75); } .carousel-caption h4, .carousel-caption p { color: @white; + line-height: @baseLineHeight; +} +.carousel-caption h4 { + margin: 0 0 5px; +} +.carousel-caption p { + margin-bottom: 0; } -- cgit v1.2.3 From 9887d3cf4af4897c4959491ece2fe56bef3d1114 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 9 Jul 2012 00:26:32 -0700 Subject: updating docs examples to remove 13/18 resets, fix up buttons alignments and carets --- less/button-groups.less | 24 ++++++++++-------------- less/dropdowns.less | 7 ++++--- 2 files changed, 14 insertions(+), 17 deletions(-) (limited to 'less') diff --git a/less/button-groups.less b/less/button-groups.less index 26cc2091a..d421b8f42 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -107,23 +107,23 @@ // Give the line between buttons some depth .btn-group > .dropdown-toggle { - padding-left: 8px; - padding-right: 8px; + padding-left: 10px; + padding-right: 10px; .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: 4px; - *padding-bottom: 4px; + *padding-top: 8px; + *padding-bottom: 8px; } .btn-group > .btn-mini.dropdown-toggle { - padding-left: 5px; - padding-right: 5px; + padding-left: 8px; + padding-right: 8px; } .btn-group > .btn-small.dropdown-toggle { - *padding-top: 4px; - *padding-bottom: 4px; + *padding-top: 6px; + *padding-bottom: 6px; } .btn-group > .btn-large.dropdown-toggle { - padding-left: 12px; - padding-right: 12px; + padding-left: 14px; + padding-right: 14px; } .btn-group.open { @@ -162,7 +162,6 @@ // Reposition the caret .btn .caret { - margin-top: 7px; margin-left: 0; } .btn:hover .caret, @@ -171,13 +170,10 @@ } // Carets in other button sizes .btn-mini .caret { - margin-top: 5px; } .btn-small .caret { - margin-top: 6px; } .btn-large .caret { - margin-top: 6px; border-left-width: 5px; border-right-width: 5px; border-top-width: 5px; diff --git a/less/dropdowns.less b/less/dropdowns.less index e9e91b6a4..705b25d50 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -22,8 +22,8 @@ .caret { display: inline-block; width: 0; - height: 0; - vertical-align: top; + height: 3px; + vertical-align: middle; border-top: 4px solid @black; border-right: 4px solid transparent; border-left: 4px solid transparent; @@ -33,7 +33,6 @@ // Place the caret .dropdown .caret { - margin-top: 8px; margin-left: 2px; } .dropdown a:focus .caret, @@ -153,6 +152,8 @@ .navbar-fixed-bottom .dropdown { // Reverse the caret .caret { + margin-top: -2px; + height: 0; border-top: 0; border-bottom: 4px solid @black; content: "\2191"; -- cgit v1.2.3 From 25d0b341a9a89ae2f0da4a506c26ac77db011350 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 9 Jul 2012 00:31:54 -0700 Subject: wasn't feeling the new buttons, downsizing again until we get a better balance --- less/button-groups.less | 30 +++++++++++++++++------------- less/buttons.less | 6 +++--- less/dropdowns.less | 7 +++---- 3 files changed, 23 insertions(+), 20 deletions(-) (limited to 'less') diff --git a/less/button-groups.less b/less/button-groups.less index d421b8f42..05235b93b 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -34,16 +34,16 @@ } .btn-group > .btn, .btn-group > .dropdown-menu { - font-size: @baseFontSize; // redeclare as part 2 of font-size inline-block hack + font-size: 13px; // redeclare as part 2 of font-size inline-block hack } // Reset fonts for other sizes .btn-group > .btn-mini, .btn-group > .btn-small { - font-size: @baseFontSize - 2px; + font-size: 12px; } .btn-group > .btn-large { - font-size: @baseFontSize + 2px; + font-size: 16px; } // 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 @@ -107,23 +107,23 @@ // Give the line between buttons some depth .btn-group > .dropdown-toggle { - padding-left: 10px; - padding-right: 10px; + 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: 8px; - *padding-bottom: 8px; + *padding-top: 4px; + *padding-bottom: 4px; } .btn-group > .btn-mini.dropdown-toggle { - padding-left: 8px; - padding-right: 8px; + padding-left: 5px; + padding-right: 5px; } .btn-group > .btn-small.dropdown-toggle { - *padding-top: 6px; - *padding-bottom: 6px; + *padding-top: 4px; + *padding-bottom: 4px; } .btn-group > .btn-large.dropdown-toggle { - padding-left: 14px; - padding-right: 14px; + padding-left: 12px; + padding-right: 12px; } .btn-group.open { @@ -162,6 +162,7 @@ // Reposition the caret .btn .caret { + margin-top: 7px; margin-left: 0; } .btn:hover .caret, @@ -170,10 +171,13 @@ } // Carets in other button sizes .btn-mini .caret { + margin-top: 5px; } .btn-small .caret { + margin-top: 6px; } .btn-large .caret { + margin-top: 6px; border-left-width: 5px; border-right-width: 5px; border-top-width: 5px; diff --git a/less/buttons.less b/less/buttons.less index b48b0555b..c5b58c433 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -10,10 +10,10 @@ .btn { display: inline-block; .ie7-inline-block(); - padding: 4px 14px 4px; + padding: 4px 14px; margin-bottom: 0; // For input.btn - font-size: @baseFontSize; - line-height: @baseLineHeight; + font-size: 13px; + line-height: 20px; *line-height: 20px; color: @grayDark; text-align: center; diff --git a/less/dropdowns.less b/less/dropdowns.less index 705b25d50..e9e91b6a4 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -22,8 +22,8 @@ .caret { display: inline-block; width: 0; - height: 3px; - vertical-align: middle; + height: 0; + vertical-align: top; border-top: 4px solid @black; border-right: 4px solid transparent; border-left: 4px solid transparent; @@ -33,6 +33,7 @@ // Place the caret .dropdown .caret { + margin-top: 8px; margin-left: 2px; } .dropdown a:focus .caret, @@ -152,8 +153,6 @@ .navbar-fixed-bottom .dropdown { // Reverse the caret .caret { - margin-top: -2px; - height: 0; border-top: 0; border-bottom: 4px solid @black; content: "\2191"; -- cgit v1.2.3 From 07f80e6fd8664c9450b5e363631ed330bb7c3136 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 9 Jul 2012 00:42:38 -0700 Subject: fixes #4027: same margins on .pager and .pagination --- less/pager.less | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'less') diff --git a/less/pager.less b/less/pager.less index e19d50aaa..2b854b4be 100644 --- a/less/pager.less +++ b/less/pager.less @@ -4,8 +4,7 @@ .pager { - margin-left: 0; - margin-bottom: @baseLineHeight; + margin: @baseLineHeight 0; list-style: none; text-align: center; .clearfix(); -- cgit v1.2.3 From 7800fee7e0874446bbbcd6148206800cdebe2fe9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 9 Jul 2012 00:51:38 -0700 Subject: fixes #3973: same border on disabled inputs as default inputs: --- less/forms.less | 1 - 1 file changed, 1 deletion(-) (limited to 'less') diff --git a/less/forms.less b/less/forms.less index a30cc3fcf..63ee05751 100644 --- a/less/forms.less +++ b/less/forms.less @@ -306,7 +306,6 @@ select[readonly], textarea[readonly] { cursor: not-allowed; background-color: @inputDisabledBackground; - border-color: #ddd; } // Explicitly reset the colors here input[type="radio"][disabled], -- cgit v1.2.3 From dbea3e27849bc2e2aa5315e02e026872b913691f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 9 Jul 2012 00:53:56 -0700 Subject: update comments after merging gradient change --- less/mixins.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index 98a719978..10239b38c 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -403,7 +403,7 @@ background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+ background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10 - background-image: linear-gradient(to right, @startColor, @endColor); // Le standard, IE10 + background-image: linear-gradient(to right, @startColor, @endColor); // Standard, IE10 background-repeat: repeat-x; filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down } @@ -413,7 +413,7 @@ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+ background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10 - background-image: linear-gradient(to bottom, @startColor, @endColor); // The standard, IE10 + background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10 background-repeat: repeat-x; filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down } @@ -423,7 +423,7 @@ background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+ background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+ background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10 - background-image: linear-gradient(@deg, @startColor, @endColor); // The standard, IE10 + background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10 } .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { background-color: mix(@midColor, @endColor, 80%); -- cgit v1.2.3 From 93be608bf0a4b85ec3331ebcc14e40f99a1974f2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 9 Jul 2012 20:49:17 -0700 Subject: fixes #3384: add support for multiple inputs per line when using grid sizing --- less/forms.less | 10 ++++++++++ less/mixins.less | 5 +++++ 2 files changed, 15 insertions(+) (limited to 'less') diff --git a/less/forms.less b/less/forms.less index 63ee05751..078b36704 100644 --- a/less/forms.less +++ b/less/forms.less @@ -290,8 +290,18 @@ textarea[class*="span"], // GRID SIZING FOR INPUTS // ---------------------- +// Grid sizes #grid > .input(@gridColumnWidth, @gridGutterWidth); +// Control row for multiple inputs per line +.controls-row { + .clearfix(); // Clear the float from controls +} +.controls-row [class*="span"] { + float: left; // Float to collapse white-space for proper grid alignment +} + + // DISABLED STATE diff --git a/less/mixins.less b/less/mixins.less index 10239b38c..3b99f4061 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -721,6 +721,11 @@ margin-left: 0; // override margin-left from core grid system } + // Space grid-sized controls properly if multiple per line + .controls-row [class*="span"] + [class*="span"] { + margin-left: @gridGutterWidth; + } + // generate .spanX .spanX (@gridColumns); -- cgit v1.2.3 From f495a8d0cc48d1440198e784a8f336a82e3a48bd Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 9 Jul 2012 21:01:29 -0700 Subject: fixes #3210: add .btn to .navbar-form to remove bottom margin, improve vertical align of contents of .navbar-form --- less/navbar.less | 7 ++++--- less/scaffolding.less | 4 ++-- 2 files changed, 6 insertions(+), 5 deletions(-) (limited to 'less') diff --git a/less/navbar.less b/less/navbar.less index 660838eb8..c58fd83d0 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -72,7 +72,7 @@ // Buttons in navbar .btn, .btn-group { - .navbarVerticalAlign(30px); // Vertically center in navbar + .navbarVerticalAlign(28px); // Vertically center in navbar } .btn-group .btn { margin: 0; // then undo the margin here so we don't accidentally double it @@ -87,10 +87,11 @@ select, .radio, .checkbox { - .navbarVerticalAlign(30px); // Vertically center in navbar + .navbarVerticalAlign(28px); // Vertically center in navbar } input, - select { + select, + .btn { display: inline-block; margin-bottom: 0; } diff --git a/less/scaffolding.less b/less/scaffolding.less index 5bc90cc16..a218c5478 100644 --- a/less/scaffolding.less +++ b/less/scaffolding.less @@ -4,7 +4,7 @@ // Body reset -// ---------- +// ------------------------- body { margin: 0; @@ -17,7 +17,7 @@ body { // Links -// ----- +// ------------------------- a { color: @linkColor; -- cgit v1.2.3 From 148e5a3d899d5c2d395e2d5749b755efeef2cd38 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 9 Jul 2012 21:07:49 -0700 Subject: fixes #3291: remove float on responsive .thumbnails for 767px and down to ensure thumbnail images don't pop out of container in FF --- 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 105ac5984..b7fd7454f 100644 --- a/less/responsive-767px-max.less +++ b/less/responsive-767px-max.less @@ -51,6 +51,9 @@ .thumbnails { margin-left: 0; } + .thumbnails > li { + float: none; + } // Make all grid-sized elements block level again [class*="span"], .row-fluid [class*="span"] { -- cgit v1.2.3 From f4877c236968ba61ac76f4862bba49e0354c60e5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 9 Jul 2012 21:13:33 -0700 Subject: fix up docs popover examples and copy --- less/popovers.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'less') diff --git a/less/popovers.less b/less/popovers.less index 5ea79cf73..2d58a9a24 100644 --- a/less/popovers.less +++ b/less/popovers.less @@ -9,7 +9,7 @@ left: 0; z-index: @zindexPopover; display: none; - width: 218px; + width: 238px; background-color: #fff; -webkit-background-clip: padding-box; -moz-background-clip: padding; @@ -47,6 +47,7 @@ } .popover-title { + margin: 0; // reset heading margin padding: 8px 14px; font-size: 14px; font-weight: normal; -- cgit v1.2.3 From 64e87a85f5e17e3cf603b97e21d58b077060e7b2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 9 Jul 2012 22:14:30 -0700 Subject: remove popoverarrows mixin, relegate code to tooltips and popvers since we only used them once each; this fixes the problem of broken tooltips in 2.1 --- less/mixins.less | 70 +--------------------------------------- less/popovers.less | 93 +++++++++++++++++++++++++++++++++++++++++------------ less/tooltip.less | 49 +++++++++++++++++++++++----- less/variables.less | 14 ++++++++ 4 files changed, 128 insertions(+), 98 deletions(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index 3b99f4061..957e7facc 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -508,75 +508,7 @@ margin-top: (@navbarHeight - @elementHeight) / 2; } -// Popover arrows -// ------------------------- -// For tipsies and popovers -#popoverArrow { - .top(@arrowWidth: 10px, @color: rgba(0,0,0,.2)) { - bottom: -@arrowWidth; - left: 50%; - margin-left: -@arrowWidth; - border-left: @arrowWidth solid transparent; - border-right: @arrowWidth solid transparent; - border-top: @arrowWidth solid #ccc; - border-top: @arrowWidth solid @color; - &:after { - border-left: @arrowWidth - 1 solid transparent; - border-right: @arrowWidth - 1 solid transparent; - border-top: @arrowWidth - 1 solid #fff; - bottom: 1px; - left: -@arrowWidth + 1; - } - } - .right(@arrowWidth: 10px, @color: rgba(0,0,0,.2)) { - top: 50%; - left: -@arrowWidth; - margin-top: -@arrowWidth; - border-top: @arrowWidth solid transparent; - border-bottom: @arrowWidth solid transparent; - border-right: @arrowWidth solid #ccc; - border-right: @arrowWidth solid @color; - &:after { - border-top: @arrowWidth - 1 solid transparent; - border-bottom: @arrowWidth - 1 solid transparent; - border-right: @arrowWidth - 1 solid #fff; - bottom: -@arrowWidth + 1; - left: 1px; - } - } - .bottom(@arrowWidth: 10px, @color: rgba(0,0,0,.2)) { - top: -@arrowWidth; - left: 50%; - margin-left: -@arrowWidth; - border-left: @arrowWidth solid transparent; - border-right: @arrowWidth solid transparent; - border-bottom: @arrowWidth solid #ccc; - border-bottom: @arrowWidth solid @color; - &:after { - border-left: @arrowWidth - 1 solid transparent; - border-right: @arrowWidth - 1 solid transparent; - border-bottom: @arrowWidth - 1 solid #f5f5f5; - top: 1px; - left: -@arrowWidth + 1; - } - } - .left(@arrowWidth: 10px, @color: rgba(0,0,0,.2)) { - top: 50%; - right: -@arrowWidth; - margin-top: -@arrowWidth; - border-top: @arrowWidth solid transparent; - border-bottom: @arrowWidth solid transparent; - border-left: @arrowWidth solid #ccc; - border-left: @arrowWidth solid @color; - &:after { - border-top: @arrowWidth - 1 solid transparent; - border-bottom: @arrowWidth - 1 solid transparent; - border-left: @arrowWidth - 1 solid #fff; - bottom: -@arrowWidth + 1; - right: 1px; - } - } -} + // Grid System // ----------- diff --git a/less/popovers.less b/less/popovers.less index 2d58a9a24..147f54a5d 100644 --- a/less/popovers.less +++ b/less/popovers.less @@ -25,25 +25,6 @@ &.bottom { margin-top: 10px; } &.left { margin-right: 10px; } - // Call the mixin for the arrows - &.top .arrow { #popoverArrow > .top(); } - &.right .arrow { #popoverArrow > .right(); } - &.bottom .arrow { #popoverArrow > .bottom(); } - &.left .arrow { #popoverArrow > .left(); } - - // Common arrow styles - .arrow { - position: absolute; - width: 0; - height: 0; - &:after { - position: absolute; - display: inline-block; - width: 0; - height: 0; - content: ""; - } - } } .popover-title { @@ -52,8 +33,8 @@ font-size: 14px; font-weight: normal; line-height: 18px; - background-color: #f5f5f5; - border-bottom: 1px solid #e5e5e5; + background-color: @popoverTitleBackground; + border-bottom: 1px solid darken(@popoverTitleBackground, 10%); .border-radius(5px 5px 0 0); } @@ -63,3 +44,73 @@ margin-bottom: 0; } } + +// Arrows +.popover .arrow, +.popover .arrow:after { + position: absolute; + display: inline-block; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; +} +.popover .arrow:after { + content: ""; + z-index: -1; +} + +.popover { + &.top .arrow { + bottom: -@popoverArrowWidth; + left: 50%; + margin-left: -@popoverArrowWidth; + border-width: @popoverArrowWidth @popoverArrowWidth 0; + border-top-color: @popoverArrowColor; + &:after { + border-width: @popoverArrowOuterWidth @popoverArrowOuterWidth 0; + border-top-color: @popoverArrowOuterColor; + bottom: -1px; + left: -@popoverArrowOuterWidth; + } + } + &.right .arrow { + top: 50%; + left: -@popoverArrowWidth; + margin-top: -@popoverArrowWidth; + border-width: @popoverArrowWidth @popoverArrowWidth @popoverArrowWidth 0; + border-right-color: @popoverArrowColor; + &:after { + border-width: @popoverArrowOuterWidth @popoverArrowOuterWidth @popoverArrowOuterWidth 0; + border-right-color: @popoverArrowOuterColor; + bottom: -@popoverArrowOuterWidth; + left: -1px; + } + } + &.bottom .arrow { + top: -@popoverArrowWidth; + left: 50%; + margin-left: -@popoverArrowWidth; + border-width: 0 @popoverArrowWidth @popoverArrowWidth; + border-bottom-color: @popoverTitleBackground; + &:after { + border-width: 0 @popoverArrowOuterWidth @popoverArrowOuterWidth; + border-bottom-color: @popoverArrowOuterColor; + top: -1px; + left: -@popoverArrowOuterWidth; + } + } + &.left .arrow { + top: 50%; + right: -@popoverArrowWidth; + margin-top: -@popoverArrowWidth; + border-width: @popoverArrowWidth 0 @popoverArrowWidth @popoverArrowWidth; + border-left-color: @popoverArrowColor; + &:after { + border-width: @popoverArrowOuterWidth 0 @popoverArrowOuterWidth @popoverArrowOuterWidth; + border-left-color: @popoverArrowOuterColor; + bottom: -@popoverArrowOuterWidth; + right: -1px; + } + } +} diff --git a/less/tooltip.less b/less/tooltip.less index 8593e2b5f..89143deca 100644 --- a/less/tooltip.less +++ b/less/tooltip.less @@ -3,6 +3,7 @@ // -------------------------------------------------- +// Base class .tooltip { position: absolute; z-index: @zindexTooltip; @@ -12,15 +13,13 @@ font-size: 11px; .opacity(0); &.in { .opacity(80); } - &.top { margin-top: -2px; } - &.right { margin-left: 2px; } - &.bottom { margin-top: 2px; } - &.left { margin-left: -2px; } - &.top .tooltip-arrow { #popoverArrow > .top(); } - &.left .tooltip-arrow { #popoverArrow > .left(); } - &.bottom .tooltip-arrow { #popoverArrow > .bottom(); } - &.right .tooltip-arrow { #popoverArrow > .right(); } + &.top { margin-top: -3px; } + &.right { margin-left: 3px; } + &.bottom { margin-top: 3px; } + &.left { margin-left: -3px; } } + +// Wrapper for the tooltip content .tooltip-inner { max-width: 200px; padding: 3px 8px; @@ -30,8 +29,42 @@ background-color: @black; .border-radius(4px); } + +// Arrows .tooltip-arrow { position: absolute; width: 0; height: 0; + border-color: transparent; + border-style: solid; +} +.tooltip { + &.top .tooltip-arrow { + bottom: 0; + left: 50%; + margin-left: -@tooltipArrowWidth; + border-width: @tooltipArrowWidth @tooltipArrowWidth 0; + border-top-color: @tooltipArrowColor; + } + &.right .tooltip-arrow { + top: 50%; + left: 0; + margin-top: -@tooltipArrowWidth; + border-width: @tooltipArrowWidth @tooltipArrowWidth @tooltipArrowWidth 0; + border-right-color: @tooltipArrowColor; + } + &.left .tooltip-arrow { + top: 50%; + right: 0; + margin-top: -@tooltipArrowWidth; + border-width: @tooltipArrowWidth 0 @tooltipArrowWidth @tooltipArrowWidth; + border-left-color: @tooltipArrowColor; + } + &.bottom .tooltip-arrow { + top: 0; + left: 50%; + margin-left: -@tooltipArrowWidth; + border-width: 0 @tooltipArrowWidth @tooltipArrowWidth; + border-bottom-color: @tooltipArrowColor; + } } diff --git a/less/variables.less b/less/variables.less index 9e7146a75..394d10636 100644 --- a/less/variables.less +++ b/less/variables.less @@ -198,6 +198,20 @@ @infoBorder: darken(spin(@infoBackground, -10), 7%); +// Tooltips and popovers +// ------------------------- +@tooltipArrowWidth: 5px; +@tooltipArrowColor: #000; + +@popoverArrowWidth: 10px; +@popoverArrowColor: #fff; +@popoverTitleBackground: #f5f5f5; + +// Special enhancement for popovers +@popoverArrowOuterWidth: @popoverArrowWidth + 1; +@popoverArrowOuterColor: rgba(0,0,0,.2); + + // GRID // -------------------------------------------------- -- cgit v1.2.3 From 83846ba0d629a3882e727ccc7b64684507206cce Mon Sep 17 00:00:00 2001 From: Roberto - phproberto Date: Tue, 10 Jul 2012 08:12:16 +0200 Subject: Fixes #4002 responsive utilities classes --- less/responsive-utilities.less | 14 +++++++------- less/tests/css-tests.html | 31 +++++++++++++++++++++++++++++++ 2 files changed, 38 insertions(+), 7 deletions(-) (limited to 'less') diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less index 59deafe81..2c3f6c15f 100644 --- a/less/responsive-utilities.less +++ b/less/responsive-utilities.less @@ -15,29 +15,29 @@ // 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; } +.visible-desktop { display: inherit !important; } // Tablets & small desktops only @media (min-width: 768px) and (max-width: 979px) { + // Hide everything else + .hidden-desktop { display: inherit !important; } + .visible-desktop { display: none !important ; } // 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 ; } } // Phones only @media (max-width: 767px) { + // Hide everything else + .hidden-desktop { display: inherit !important; } + .visible-desktop { display: none !important; } // 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; } } diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html index 4b8b1a277..341c80264 100644 --- a/less/tests/css-tests.html +++ b/less/tests/css-tests.html @@ -1019,6 +1019,37 @@ + + + + +

    Visible on...

    +
      +
    • Phone✔ Phone
    • +
    • Tablet✔ Tablet
    • +
    • Desktop✔ Desktop
    • +
    +
      +
    • Phone + Tablet✔ Phone + Tablet
    • +
    • Tablet + Desktop✔ Tablet + Desktop
    • +
    • All✔ All
    • +
    + +

    Hidden on...

    +
      +
    • Phone✔ Phone
    • +
    • Tablet✔ Tablet
    • +
    • Desktop✔ Desktop
    • +
    +
      +
    • Phone + Tablet✔ Phone + Tablet
    • +
    • Tablet + Desktop✔ Tablet + Desktop
    • +
    • All✔ All
    • +
    + -- cgit v1.2.3 From 5d8e78e0faedb4365216f1ebbc5d70dc560f3f6e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 10 Jul 2012 00:32:04 -0700 Subject: fixes #3605: add support for input-prepend/-append to .form-search --- less/forms.less | 29 ++++++++++++++++++++++++----- 1 file changed, 24 insertions(+), 5 deletions(-) (limited to 'less') diff --git a/less/forms.less b/less/forms.less index 078b36704..ddadab8ca 100644 --- a/less/forms.less +++ b/less/forms.less @@ -22,7 +22,7 @@ legend { display: block; width: 100%; padding: 0; - margin-bottom: @baseLineHeight * 1.5; + margin-bottom: @baseLineHeight; font-size: @baseFontSize * 1.5; line-height: @baseLineHeight * 2; color: @grayDark; @@ -399,8 +399,8 @@ select:focus:required:invalid { // ------------ // Allow us to put symbols and text within the input field for a cleaner look -.input-prepend, -.input-append { +.input-append, +.input-prepend { margin-bottom: 5px; font-size: 0; white-space: nowrap; // Prevent span and input from separating @@ -489,15 +489,34 @@ select:focus:required:invalid { // SEARCH FORM // ----------- -input.search-query { +.search-query { padding-right: 14px; padding-right: 4px \9; padding-left: 14px; padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */ - margin-bottom: 0; // remove the default margin on all inputs + margin-bottom: 0; // Remove the default margin on all inputs .border-radius(14px); } +/* Allow for input prepend/append in search forms */ +.form-search .input-append .search-query, +.form-search .input-prepend .search-query { + .border-radius(0); // Override due to specificity +} +.form-search .input-append .search-query { + .border-radius(14px 0 0 14px) +} +.form-search .input-append .btn { + .border-radius(0 14px 14px 0) +} +.form-search .input-prepend .search-query { + .border-radius(0 14px 14px 0) +} +.form-search .input-prepend .btn { + .border-radius(14px 0 0 14px) +} + + // HORIZONTAL & VERTICAL FORMS -- cgit v1.2.3 From a750551feee3a70005327fb1ec9318629c4f1f29 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 10 Jul 2012 00:36:21 -0700 Subject: add vars for tooltip customization via background and color --- less/tooltip.less | 4 ++-- less/variables.less | 4 +++- 2 files changed, 5 insertions(+), 3 deletions(-) (limited to 'less') diff --git a/less/tooltip.less b/less/tooltip.less index 89143deca..fba1856f5 100644 --- a/less/tooltip.less +++ b/less/tooltip.less @@ -23,10 +23,10 @@ .tooltip-inner { max-width: 200px; padding: 3px 8px; - color: @white; + color: @tooltipColor; text-align: center; text-decoration: none; - background-color: @black; + background-color: @tooltipBackground; .border-radius(4px); } diff --git a/less/variables.less b/less/variables.less index 394d10636..725100443 100644 --- a/less/variables.less +++ b/less/variables.less @@ -200,8 +200,10 @@ // Tooltips and popovers // ------------------------- +@tooltipColor: #fff; +@tooltipBackground: #000; @tooltipArrowWidth: 5px; -@tooltipArrowColor: #000; +@tooltipArrowColor: @tooltipBackground; @popoverArrowWidth: 10px; @popoverArrowColor: #fff; -- cgit v1.2.3 From 713105774fcccf1250a7555b47483b578cf82eb6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 10 Jul 2012 00:45:44 -0700 Subject: fixes #3706: add textColor and textShadow as options to .buttonBackground mixin --- less/buttons.less | 21 +-------------------- less/mixins.less | 9 ++++++--- 2 files changed, 7 insertions(+), 23 deletions(-) (limited to 'less') diff --git a/less/buttons.less b/less/buttons.less index 222a587bd..b25d97180 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -15,12 +15,10 @@ font-size: 13px; line-height: 20px; *line-height: 20px; - color: @grayDark; text-align: center; - text-shadow: 0 1px 1px rgba(255,255,255,.75); vertical-align: middle; cursor: pointer; - .buttonBackground(@btnBackground, @btnBackgroundHighlight); + .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75)); border: 1px solid @btnBorder; *border: 0; // Remove the border to prevent IE7's black border on input:focus border-bottom-color: darken(@btnBorder, 10%); @@ -105,23 +103,6 @@ // Alternate buttons // -------------------------------------------------- -// Set text color -// ------------------------- -.btn-primary, -.btn-primary:hover, -.btn-warning, -.btn-warning:hover, -.btn-danger, -.btn-danger:hover, -.btn-success, -.btn-success:hover, -.btn-info, -.btn-info:hover, -.btn-inverse, -.btn-inverse:hover { - color: @white; - text-shadow: 0 -1px 0 rgba(0,0,0,.25); -} // Provide *some* extra contrast for those who can get it .btn-primary.active, .btn-warning.active, diff --git a/less/mixins.less b/less/mixins.less index 957e7facc..54490b73b 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -389,7 +389,9 @@ } // Gradient Bar Colors for buttons and alerts -.gradientBar(@primaryColor, @secondaryColor) { +.gradientBar(@primaryColor, @secondaryColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) { + color: @textColor; + text-shadow: @textShadow; #gradient > .vertical(@primaryColor, @secondaryColor); border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%); border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%); @@ -481,14 +483,15 @@ // Button backgrounds // ------------------ -.buttonBackground(@startColor, @endColor) { +.buttonBackground(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) { // gradientBar will set the background to a pleasing blend of these, to support IE<=9 - .gradientBar(@startColor, @endColor); + .gradientBar(@startColor, @endColor, @textColor, @textShadow); *background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ .reset-filter(); // in these cases the gradient won't cover the background, so we override &:hover, &:active, &.active, &.disabled, &[disabled] { + color: @textColor; background-color: @endColor; *background-color: darken(@endColor, 5%); } -- cgit v1.2.3 From c884d6eaa6bbcf4cb4d679c4d9be57d2f28ce93b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 12 Jul 2012 13:50:27 -0700 Subject: clean up docs for subnav --- less/navbar.less | 11 +++++++++++ 1 file changed, 11 insertions(+) (limited to 'less') diff --git a/less/navbar.less b/less/navbar.less index c58fd83d0..54c5079bd 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -439,6 +439,17 @@ color: @linkColorHover; } +// Collapse button +.navbar-subnav .btn-navbar { + .buttonBackground(darken(#ffffff, 5%), darken(#f1f1f1, 5%)); + .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.25), 0 1px 0 rgba(255,255,255,.25)"); +} +.navbar .btn-navbar .icon-bar { + background-color: #999; + .box-shadow(0 1px 0 rgba(0,0,0,.25)); +} + + // Fixed subnav on scroll, but only for 980px and up (sorry IE!) .navbar-subnav-fixed { position: fixed; -- cgit v1.2.3 From 549d61fc289cb9efe5f8959e706e170b080663ba Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 12 Jul 2012 17:02:55 -0700 Subject: updated footer --- less/tests/css-tests.html | 26 +++++++++++++++++--------- 1 file changed, 17 insertions(+), 9 deletions(-) (limited to 'less') diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html index 341c80264..6cc48a608 100644 --- a/less/tests/css-tests.html +++ b/less/tests/css-tests.html @@ -1054,17 +1054,25 @@ + - - - + + + -- cgit v1.2.3 From 5cb116beb897b783195e059b205af52b0f5b72c1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 13 Jul 2012 10:58:20 -0700 Subject: cleanup subnav example --- less/navbar.less | 3 +++ 1 file changed, 3 insertions(+) (limited to 'less') diff --git a/less/navbar.less b/less/navbar.less index 54c5079bd..8cb427411 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -117,6 +117,7 @@ .navbarVerticalAlign(28px); // Vertically center in navbar margin-bottom: 0; .search-query { + margin-bottom: 0; padding: 4px 9px; #font > .sans-serif(13px, normal, 1); color: @white; @@ -384,6 +385,8 @@ #gradient > .vertical(#ffffff, #f1f1f1); .box-shadow(none); border: 1px solid #e5e5e5; + padding-left: 10px; + padding-right: 10px; } // Lighten vertical dividers -- cgit v1.2.3 From 750badabf760d7fb0a68a1a214442ecbdff8a16c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 13 Jul 2012 14:43:51 -0700 Subject: copy edits and tweaks to utility classes to ensure they always are specific enough --- less/utilities.less | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'less') diff --git a/less/utilities.less b/less/utilities.less index 35267b305..9d3a405b1 100644 --- a/less/utilities.less +++ b/less/utilities.less @@ -12,11 +12,12 @@ } // Toggling content +// Uses `!important` for proper specifity over things like form controls .hide { - display: none; + display: none !important; } .show { - display: block; + display: block !important; } // Visibility -- cgit v1.2.3 From e20d2dfe9d1f43e164d8fdbef64f4041df70b762 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 15 Jul 2012 16:13:25 -0700 Subject: docs cleanup and blockquote cleanup for .pull-right option --- less/tests/css-tests.html | 1 - less/type.less | 8 ++++++++ 2 files changed, 8 insertions(+), 1 deletion(-) (limited to 'less') diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html index 6cc48a608..fd687ac3a 100644 --- a/less/tests/css-tests.html +++ b/less/tests/css-tests.html @@ -1053,7 +1053,6 @@ - diff --git a/less/type.less b/less/type.less index 697b64a54..5cb93af0f 100644 --- a/less/type.less +++ b/less/type.less @@ -179,6 +179,14 @@ blockquote { small { text-align: right; } + small { + &:before { + content: ''; + } + &:after { + content: '\00A0 \2014'; + } + } } } -- cgit v1.2.3 From 478396fd4eaacd505104f44f97e0470409ce433a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 17 Jul 2012 19:11:41 -0700 Subject: remove list-type declarations from ul and ol elements since those should just use browser defaults --- less/type.less | 6 ------ 1 file changed, 6 deletions(-) (limited to 'less') diff --git a/less/type.less b/less/type.less index 5cb93af0f..b1e323033 100644 --- a/less/type.less +++ b/less/type.less @@ -75,12 +75,6 @@ ol ol, ol ul { margin-bottom: 0; } -ul { - list-style: disc; -} -ol { - list-style: decimal; -} li { line-height: @baseLineHeight; } -- cgit v1.2.3 From 39f8996d6a34ac2fab1bdf47db65fd9bde891308 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 17 Jul 2012 22:26:53 -0700 Subject: fix dropdown vars and make hover state be link color again, add gradient to dropdown link hovers, fix caret positions and active states on nav tabs, tweak nav link padding --- less/dropdowns.less | 16 +++++++++++++--- less/navs.less | 9 ++++++++- less/variables.less | 2 +- 3 files changed, 22 insertions(+), 5 deletions(-) (limited to 'less') diff --git a/less/dropdowns.less b/less/dropdowns.less index e9e91b6a4..1e4f33ff6 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -84,7 +84,7 @@ // Links within the dropdown menu a { display: block; - padding: 3px 15px; + padding: 3px 20px; clear: both; font-weight: normal; line-height: @baseLineHeight; @@ -98,8 +98,9 @@ .dropdown-menu li > a:hover, .dropdown-menu li > a:focus { text-decoration: none; - color: @dropdownLinkColorActive; + color: @dropdownLinkColorHover; background-color: @dropdownLinkBackgroundHover; + #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%)); } // Active state @@ -108,8 +109,9 @@ .dropdown-menu .active > a:hover { color: @dropdownLinkColorHover; text-decoration: none; - background-color: @dropdownLinkBackgroundActive; outline: 0; + background-color: @dropdownLinkBackgroundActive; + #gradient > .vertical(@dropdownLinkBackgroundActive, darken(@dropdownLinkBackgroundActive, 5%)); } // Disabled state @@ -126,6 +128,14 @@ cursor: default; } +// Tweak nav headers +// ----------------- +// Increase padding from 15px to 20px on sides +.dropdown .dropdown-menu .nav-header { + padding-left: 20px; + padding-right: 20px; +} + // Open state for the dropdown // --------------------------- .open { diff --git a/less/navs.less b/less/navs.less index 33bdfe1d0..799a38ce5 100644 --- a/less/navs.less +++ b/less/navs.less @@ -213,6 +213,10 @@ border-top-color: @linkColorHover; border-bottom-color: @linkColorHover; } +/* move down carets for tabs */ +.nav-tabs .dropdown-toggle .caret { + margin-top: 8px; +} // Active dropdown links // ------------------------- @@ -220,11 +224,14 @@ border-top-color: #fff; border-bottom-color: #fff; } +.nav-tabs .active .dropdown-toggle .caret { + border-top-color: @gray; + border-bottom-color: @gray; +} // Active:hover dropdown links // ------------------------- .nav > .dropdown.active > a:hover { - color: #fff; cursor: pointer; } diff --git a/less/variables.less b/less/variables.less index 725100443..ae5cd5e00 100644 --- a/less/variables.less +++ b/less/variables.less @@ -109,7 +109,7 @@ @dropdownLinkColor: @grayDark; @dropdownLinkColorHover: @white; -@dropdownLinkBackgroundHover: @grayLighter; +@dropdownLinkBackgroundHover: @dropdownLinkBackgroundActive; @dropdownLinkColorActive: @dropdownLinkColor; @dropdownLinkBackgroundActive: @linkColor; -- cgit v1.2.3 From 326b665065d8a1901cf53c145b98cbbdbdae6057 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 17 Jul 2012 22:40:38 -0700 Subject: de-scope nav-header from .nav --- less/navs.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less') diff --git a/less/navs.less b/less/navs.less index 799a38ce5..96723ffc9 100644 --- a/less/navs.less +++ b/less/navs.less @@ -27,7 +27,7 @@ } // Nav headers (for dropdowns and lists) -.nav .nav-header { +.nav-header { display: block; padding: 3px 15px; font-size: 11px; -- cgit v1.2.3 From aac3736eeaa1ff1eaf3a6a04502efd6d5b9e7e49 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 17 Jul 2012 23:32:52 -0700 Subject: fixes #3845: add .btn-link for transparent buttons styled as links --- less/buttons.less | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) (limited to 'less') diff --git a/less/buttons.less b/less/buttons.less index b25d97180..8bdf34b20 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -173,3 +173,27 @@ input[type="submit"].btn { *padding-bottom: 1px; } } + + +// Link buttons +// -------------------------------------------------- + +// Make a button look and behave like a link +.btn-link { + background-color: transparent; + background-image: none; + border-color: transparent; + cursor: pointer; + color: @linkColor; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +.btn-link:hover { + color: @linkColorHover; + text-decoration: underline; + background-color: transparent; +} -- cgit v1.2.3 From 89d7ec5290912ddd762f743f450b58b865afc6c3 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 19 Jul 2012 21:06:42 -0700 Subject: fixes #4102: properly round top left corners of .table-border with caption/colgroup; also fix css tests page layout and footer --- less/tables.less | 20 ++++++++++++++++++++ less/tests/css-tests.html | 24 +++++++++++++----------- 2 files changed, 33 insertions(+), 11 deletions(-) (limited to 'less') diff --git a/less/tables.less b/less/tables.less index 10499a1db..4db484062 100644 --- a/less/tables.less +++ b/less/tables.less @@ -125,9 +125,29 @@ table { border-bottom-right-radius: 4px; -moz-border-radius-bottomright: 4px; } + + // Special fixes to round the left border on the first td/td + caption + thead tr:first-child th:first-child, + caption + tbody tr:first-child td:first-child, + colgroup + thead tr:first-child th:first-child, + colgroup + tbody tr:first-child td:first-child { + -webkit-border-top-left-radius: 4px; + border-top-left-radius: 4px; + -moz-border-radius-topleft: 4px; + } + caption + thead tr:first-child th:last-child, + caption + tbody tr:first-child td:last-child, + colgroup + thead tr:first-child th:last-child, + colgroup + tbody tr:first-child td:last-child { + -webkit-border-top-right-radius: 4px; + border-top-right-radius: 4px; + -moz-border-right-topleft: 4px; + } } + + // ZEBRA-STRIPING // -------------- diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html index fd687ac3a..527e96616 100644 --- a/less/tests/css-tests.html +++ b/less/tests/css-tests.html @@ -42,17 +42,19 @@ -
    -
    -

    CSS Tests

    -

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

    +
    +

    CSS Tests

    +

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

    +
    +
    + -- cgit v1.2.3 From 3c1a0fbda40d06ab0b89d07ad808aa6975c8381d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 19 Jul 2012 21:25:24 -0700 Subject: fixes #4103: simpler fix for tfoot in .table-border --- less/tables.less | 38 +++++++++++++++++++++++++++++++++++--- less/tests/css-tests.html | 27 ++++++++++++++++++++++++--- 2 files changed, 59 insertions(+), 6 deletions(-) (limited to 'less') diff --git a/less/tables.less b/less/tables.less index 4db484062..2ccca8689 100644 --- a/less/tables.less +++ b/less/tables.less @@ -113,20 +113,22 @@ table { } // 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 { + tbody:last-child tr:last-child td:first-child, + tfoot:last-child tr:last-child td:first-child { .border-radius(0 0 0 4px); -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -moz-border-radius-bottomleft: 4px; } thead:last-child tr:last-child th:last-child, - tbody:last-child tr:last-child td:last-child { + tbody:last-child tr:last-child td:last-child, + tfoot:last-child tr:last-child td:last-child { -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; -moz-border-radius-bottomright: 4px; } - // Special fixes to round the left border on the first td/td + // Special fixes to round the left border on the first td/th caption + thead tr:first-child th:first-child, caption + tbody tr:first-child td:first-child, colgroup + thead tr:first-child th:first-child, @@ -143,6 +145,36 @@ table { border-top-right-radius: 4px; -moz-border-right-topleft: 4px; } + + // Accounting for tfoot +/* thead:last-child tr:last-child th:first-child, + tbody:last-child tr:last-child td:first-child, + tfoot tr:last-child td:first-child { + -webkit-border-bottom-left-radius: 4px; + border-bottom-left-radius: 4px; + -moz-border-radius-bottomleft: 4px; + } + + tfoot ~ tbody:last-child tr:last-child td:first-child { + -webkit-border-bottom-left-radius: 0; + border-bottom-left-radius: 0; + -moz-border-radius-bottomleft: 0; + } + + thead:last-child tr:last-child th:last-child, + tbody:last-child tr:last-child td:last-child, + tfoot tr:last-child td:last-child { + -webkit-border-bottom-right-radius: 4px; + border-bottom-right-radius: 4px; + -moz-border-radius-bottomright: 4px; + } + + tfoot ~ tbody:last-child tr:last-child td:last-child { + -webkit-border-bottom-right-radius: 0; + border-bottom-right-radius: 0; + -moz-border-radius-bottomright: 0; + } +*/ } diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html index 527e96616..81d5b1896 100644 --- a/less/tests/css-tests.html +++ b/less/tests/css-tests.html @@ -404,6 +404,13 @@ 3 + + + 3 + 6 + 9 + +

    Bordered with thead, with colgroup

    @@ -414,9 +421,9 @@ - - - + + + @@ -436,6 +443,13 @@ + + + + + + +
    123ABC
    3
    369
    @@ -466,6 +480,13 @@ 3 + + + 3 + 6 + 9 + +

    Bordered with rowspan and colspan

    -- cgit v1.2.3 From 1d4660beeaa8ef987256a5e7008340505b00c859 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 19 Jul 2012 21:25:42 -0700 Subject: nuke commented out code from last fix --- less/tables.less | 29 ----------------------------- 1 file changed, 29 deletions(-) (limited to 'less') diff --git a/less/tables.less b/less/tables.less index 2ccca8689..b1d34fd24 100644 --- a/less/tables.less +++ b/less/tables.less @@ -146,35 +146,6 @@ table { -moz-border-right-topleft: 4px; } - // Accounting for tfoot -/* thead:last-child tr:last-child th:first-child, - tbody:last-child tr:last-child td:first-child, - tfoot tr:last-child td:first-child { - -webkit-border-bottom-left-radius: 4px; - border-bottom-left-radius: 4px; - -moz-border-radius-bottomleft: 4px; - } - - tfoot ~ tbody:last-child tr:last-child td:first-child { - -webkit-border-bottom-left-radius: 0; - border-bottom-left-radius: 0; - -moz-border-radius-bottomleft: 0; - } - - thead:last-child tr:last-child th:last-child, - tbody:last-child tr:last-child td:last-child, - tfoot tr:last-child td:last-child { - -webkit-border-bottom-right-radius: 4px; - border-bottom-right-radius: 4px; - -moz-border-radius-bottomright: 4px; - } - - tfoot ~ tbody:last-child tr:last-child td:last-child { - -webkit-border-bottom-right-radius: 0; - border-bottom-right-radius: 0; - -moz-border-radius-bottomright: 0; - } -*/ } -- cgit v1.2.3 From 5b8ff7061b659286bdd27c756bf8a58b05ba70d8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 22 Jul 2012 14:31:39 -0700 Subject: fixes #4136: use @dropdownBorder var, but keep IE7-8 fallback --- less/dropdowns.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'less') diff --git a/less/dropdowns.less b/less/dropdowns.less index 1e4f33ff6..5f62d27f0 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -60,8 +60,8 @@ margin: 1px 0 0; // override default ul list-style: none; background-color: @dropdownBackground; - border: 1px solid #ccc; - border: 1px solid rgba(0,0,0,.2); + border: 1px solid #ccc; // Fallback for IE7-8 + border: 1px solid @dropdownBorder; *border-right-width: 2px; *border-bottom-width: 2px; .border-radius(6px); -- cgit v1.2.3 From dcf75697ecd243517b23d8ef440f772d91f699c0 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sun, 22 Jul 2012 18:28:39 -0700 Subject: some progress on affix plugin --- less/utilities.less | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'less') diff --git a/less/utilities.less b/less/utilities.less index 9d3a405b1..b020e1c1b 100644 --- a/less/utilities.less +++ b/less/utilities.less @@ -24,3 +24,7 @@ .invisible { visibility: hidden; } + +.affix { + position: fixed; +} \ No newline at end of file -- cgit v1.2.3 From cd441e082f25836be85ecc14f0bed4d8e74965b2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 23 Jul 2012 23:56:13 -0700 Subject: fixes #4156: don't override border radius if stacked nav has one child --- less/navs.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'less') diff --git a/less/navs.less b/less/navs.less index 96723ffc9..4c38f7dbf 100644 --- a/less/navs.less +++ b/less/navs.less @@ -171,10 +171,10 @@ .border-radius(0); } .nav-tabs.nav-stacked > li:first-child > a { - .border-radius(4px 4px 0 0); + .border-top-radius(4px); } .nav-tabs.nav-stacked > li:last-child > a { - .border-radius(0 0 4px 4px); + .border-bottom-radius(4px); } .nav-tabs.nav-stacked > li > a:hover { border-color: #ddd; -- cgit v1.2.3 From 4912dd441d46dbacd7414628b6d70a8ae0d85d7f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 24 Jul 2012 00:35:54 -0700 Subject: fix h3 in modal and make modal unhidden by removing important from earlier issue --- less/modals.less | 5 +++++ less/utilities.less | 5 ++--- 2 files changed, 7 insertions(+), 3 deletions(-) (limited to 'less') diff --git a/less/modals.less b/less/modals.less index 32aab7acd..8cdaace36 100644 --- a/less/modals.less +++ b/less/modals.less @@ -56,6 +56,11 @@ border-bottom: 1px solid #eee; // Close icon .close { margin-top: 2px; } + // Heading + h3 { + margin: 0; + line-height: 1; + } } // Body (where all modal content resides) diff --git a/less/utilities.less b/less/utilities.less index b020e1c1b..5eef70fe7 100644 --- a/less/utilities.less +++ b/less/utilities.less @@ -12,12 +12,11 @@ } // Toggling content -// Uses `!important` for proper specifity over things like form controls .hide { - display: none !important; + display: none; } .show { - display: block !important; + display: block; } // Visibility -- cgit v1.2.3 From c37aa99e2836c333407db9d7d703ff731214f64e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 24 Jul 2012 00:37:19 -0700 Subject: modal heading line-height --- 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 8cdaace36..e515bb796 100644 --- a/less/modals.less +++ b/less/modals.less @@ -59,7 +59,7 @@ // Heading h3 { margin: 0; - line-height: 1; + line-height: 30px; } } -- cgit v1.2.3 From 87aa61001e908857416f8114a892ced7e796c8b9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 24 Jul 2012 00:44:11 -0700 Subject: fixes #4118: responsive modal gets width auto and improved positioning for narrower widths --- less/responsive-767px-max.less | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) (limited to 'less') diff --git a/less/responsive-767px-max.less b/less/responsive-767px-max.less index b7fd7454f..18c96ee0b 100644 --- a/less/responsive-767px-max.less +++ b/less/responsive-767px-max.less @@ -84,6 +84,17 @@ width: auto; } + // Modals + .modal { + position: fixed; + top: 20px; + left: 20px; + right: 20px; + width: auto; + margin: 0; + &.fade.in { top: auto; } + } + } @@ -133,13 +144,9 @@ // Modals .modal { - position: fixed; top: 10px; left: 10px; right: 10px; - width: auto; - margin: 0; - &.fade.in { top: auto; } } .modal-header .close { padding: 10px; -- cgit v1.2.3 From 7590e65f6f4641d946d0bfec2f4a84bbd3f561cd Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 24 Jul 2012 01:44:12 -0700 Subject: fix search form, mostly in navbar --- less/forms.less | 2 +- less/navbar.less | 7 ++++--- 2 files changed, 5 insertions(+), 4 deletions(-) (limited to 'less') diff --git a/less/forms.less b/less/forms.less index ddadab8ca..1a469072c 100644 --- a/less/forms.less +++ b/less/forms.less @@ -495,7 +495,7 @@ select:focus:required:invalid { padding-left: 14px; padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */ margin-bottom: 0; // Remove the default margin on all inputs - .border-radius(14px); + .border-radius(15px); } /* Allow for input prepend/append in search forms */ diff --git a/less/navbar.less b/less/navbar.less index 8cb427411..0a38ef56e 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -114,15 +114,16 @@ .navbar-search { position: relative; float: left; - .navbarVerticalAlign(28px); // Vertically center in navbar + .navbarVerticalAlign(30px); // Vertically center in navbar margin-bottom: 0; .search-query { margin-bottom: 0; - padding: 4px 9px; + padding: 4px 14px; #font > .sans-serif(13px, normal, 1); color: @white; background-color: @navbarSearchBackground; border: 1px solid @navbarSearchBorder; + .border-radius(15px); // redeclare because of specificity of the type attribute .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)"); .transition(none); @@ -131,7 +132,7 @@ // Focus states (we use .focused since IE7-8 and down doesn't support :focus) &:focus, &.focused { - padding: 5px 10px; + padding: 5px 15px; color: @grayDark; text-shadow: 0 1px 0 @white; background-color: @navbarSearchBackgroundFocus; -- cgit v1.2.3 From 6474190746fd163375200119b9d2cc7066e05d43 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 26 Jul 2012 23:42:36 -0700 Subject: increase height of homepage jumbotron, update vars and styles of popovers --- less/popovers.less | 9 +++++---- less/variables.less | 5 +++-- 2 files changed, 8 insertions(+), 6 deletions(-) (limited to 'less') diff --git a/less/popovers.less b/less/popovers.less index 147f54a5d..2b3f1b059 100644 --- a/less/popovers.less +++ b/less/popovers.less @@ -9,8 +9,9 @@ left: 0; z-index: @zindexPopover; display: none; - width: 238px; - background-color: #fff; + width: 236px; + padding: 1px; + background-color: @popoverBackground; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; @@ -34,7 +35,7 @@ font-weight: normal; line-height: 18px; background-color: @popoverTitleBackground; - border-bottom: 1px solid darken(@popoverTitleBackground, 10%); + border-bottom: 1px solid darken(@popoverTitleBackground, 5%); .border-radius(5px 5px 0 0); } @@ -92,7 +93,7 @@ left: 50%; margin-left: -@popoverArrowWidth; border-width: 0 @popoverArrowWidth @popoverArrowWidth; - border-bottom-color: @popoverTitleBackground; + border-bottom-color: @popoverArrowColor; &:after { border-width: 0 @popoverArrowOuterWidth @popoverArrowOuterWidth; border-bottom-color: @popoverArrowOuterColor; diff --git a/less/variables.less b/less/variables.less index ae5cd5e00..0e3e13f41 100644 --- a/less/variables.less +++ b/less/variables.less @@ -205,13 +205,14 @@ @tooltipArrowWidth: 5px; @tooltipArrowColor: @tooltipBackground; +@popoverBackground: #fff; @popoverArrowWidth: 10px; @popoverArrowColor: #fff; -@popoverTitleBackground: #f5f5f5; +@popoverTitleBackground: darken(@popoverBackground, 3%); // Special enhancement for popovers @popoverArrowOuterWidth: @popoverArrowWidth + 1; -@popoverArrowOuterColor: rgba(0,0,0,.2); +@popoverArrowOuterColor: rgba(0,0,0,.25); -- cgit v1.2.3 From 1e9b4506196bd448c4038151964733ca524c10bb Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 27 Jul 2012 00:06:43 -0700 Subject: add image styles, for now to scaffolding (soon to own file) --- less/scaffolding.less | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) (limited to 'less') diff --git a/less/scaffolding.less b/less/scaffolding.less index a218c5478..fe63c7cac 100644 --- a/less/scaffolding.less +++ b/less/scaffolding.less @@ -27,3 +27,25 @@ a:hover { color: @linkColorHover; text-decoration: underline; } + + +// Images +// ------------------------- + +.img-rounded { + .border-radius(6px); +} + +.img-polaroid { + padding: 4px; + background-color: #fff; + border: 1px solid #ccc; + border: 1px solid rgba(0,0,0,.2); + -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.1); + -moz-box-shadow: 0 1px 3px rgba(0,0,0,.1); + box-shadow: 0 1px 3px rgba(0,0,0,.1); +} + +.img-circle { + .border-radius(500px); +} \ No newline at end of file -- cgit v1.2.3 From 9d5c4312232ebb53b2499ed495851c0d61eb648c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 27 Jul 2012 10:06:54 -0700 Subject: add basic support for sub menus in dropdown menus --- less/dropdowns.less | 38 +++++++++++++++++++++++++++++--------- 1 file changed, 29 insertions(+), 9 deletions(-) (limited to 'less') diff --git a/less/dropdowns.less b/less/dropdowns.less index 5f62d27f0..a36c3a416 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -96,7 +96,8 @@ // Hover state // ----------- .dropdown-menu li > a:hover, -.dropdown-menu li > a:focus { +.dropdown-menu li > a:focus, +.dropdown-submenu:hover > a { text-decoration: none; color: @dropdownLinkColorHover; background-color: @dropdownLinkBackgroundHover; @@ -128,14 +129,6 @@ cursor: default; } -// Tweak nav headers -// ----------------- -// Increase padding from 15px to 20px on sides -.dropdown .dropdown-menu .nav-header { - padding-left: 20px; - padding-right: 20px; -} - // Open state for the dropdown // --------------------------- .open { @@ -175,6 +168,33 @@ } } +// Sub menus +// --------------------------- +.dropdown-submenu { + position: relative; +} +.dropdown-submenu > .dropdown-menu { + top: 0; + left: 100%; + margin-top: -5px; + margin-left: -1px; + -webkit-border-radius: 0 6px 6px 6px; + -moz-border-radius: 0 6px 6px 6px; + border-radius: 0 6px 6px 6px; +} +.dropdown-submenu:hover .dropdown-menu { + display: block; +} + + +// Tweak nav headers +// ----------------- +// Increase padding from 15px to 20px on sides +.dropdown .dropdown-menu .nav-header { + padding-left: 20px; + padding-right: 20px; +} + // Typeahead // --------- .typeahead { -- cgit v1.2.3 From 16b4ac0d8fd5fd2aa588a8b486b71b449e3821ca Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 27 Jul 2012 10:35:15 -0700 Subject: add docs for sub menu support on dropdowns, add caret via :after to submenu toggles --- less/dropdowns.less | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) (limited to 'less') diff --git a/less/dropdowns.less b/less/dropdowns.less index a36c3a416..fb85ca57a 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -176,7 +176,7 @@ .dropdown-submenu > .dropdown-menu { top: 0; left: 100%; - margin-top: -5px; + margin-top: -6px; margin-left: -1px; -webkit-border-radius: 0 6px 6px 6px; -moz-border-radius: 0 6px 6px 6px; @@ -186,6 +186,23 @@ display: block; } +.dropdown-submenu > a:after { + display: block; + content: " "; + float: right; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + border-width: 5px 0 5px 5px; + border-left-color: darken(@dropdownBackground, 20%); + margin-top: 5px; + margin-right: -10px; +} +.dropdown-submenu:hover > a:after { + border-left-color: @dropdownLinkColorHover; +} + // Tweak nav headers // ----------------- -- cgit v1.2.3 From fe6a4b0b5497a78a085e85125f4397a27b7737dc Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 27 Jul 2012 15:42:58 -0700 Subject: add .btn-block for a full-width button option --- less/buttons.less | 9 +++++++++ 1 file changed, 9 insertions(+) (limited to 'less') diff --git a/less/buttons.less b/less/buttons.less index 8bdf34b20..b6c78ce36 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -99,6 +99,15 @@ line-height: @baseLineHeight - 4px; } +// Block button +.btn-block { + display: block; + width: 100%; + padding-left: 0; + padding-right: 0; + .box-sizing(border-box); +} + // Alternate buttons // -------------------------------------------------- -- cgit v1.2.3 From a30045daef809edf5ed592ad842c04377898e444 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 29 Jul 2012 00:30:15 -0700 Subject: reverse navbar styles to save code --- less/bootstrap.less | 3 +- less/buttons.less | 3 + less/dropdowns.less | 12 +- less/navbar-redux.less | 418 +++++++++++++++++++++++++++++++++++++++++++++++++ less/navbar.less | 2 - less/variables.less | 37 ++++- 6 files changed, 453 insertions(+), 22 deletions(-) create mode 100644 less/navbar-redux.less (limited to 'less') diff --git a/less/bootstrap.less b/less/bootstrap.less index c43875a80..94e5a6c2f 100644 --- a/less/bootstrap.less +++ b/less/bootstrap.less @@ -40,7 +40,8 @@ // Components: Nav @import "navs.less"; -@import "navbar.less"; +//@import "navbar.less"; +@import "navbar-redux.less"; @import "breadcrumbs.less"; @import "pagination.less"; @import "pager.less"; diff --git a/less/buttons.less b/less/buttons.less index b6c78ce36..7184811b5 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -107,6 +107,9 @@ padding-right: 0; .box-sizing(border-box); } +.btn-block + .btn-block { + margin-top: 5px; +} // Alternate buttons diff --git a/less/dropdowns.less b/less/dropdowns.less index fb85ca57a..e83915dba 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -28,7 +28,6 @@ border-right: 4px solid transparent; border-left: 4px solid transparent; content: ""; - .opacity(30); } // Place the caret @@ -36,15 +35,6 @@ margin-top: 8px; margin-left: 2px; } -.dropdown a:focus .caret, -.dropdown a:hover .caret, -.open .caret { - .opacity(100); -} - -.navbar .nav .open > a { - color: @navbarLinkColorActive; -} // The dropdown menu (ul) // ---------------------- @@ -57,7 +47,7 @@ float: left; min-width: 160px; padding: 5px 0; - margin: 1px 0 0; // override default ul + margin: 2px 0 0; // override default ul list-style: none; background-color: @dropdownBackground; border: 1px solid #ccc; // Fallback for IE7-8 diff --git a/less/navbar-redux.less b/less/navbar-redux.less new file mode 100644 index 000000000..c13629c9b --- /dev/null +++ b/less/navbar-redux.less @@ -0,0 +1,418 @@ +// +// Navbars (Redux) +// -------------------------------------------------- + + +// COMMON STYLES +// ------------- + +// Base class and wrapper +.navbar { + overflow: visible; + margin-bottom: @baseLineHeight; + color: @navbarText; + + // Fix for IE7's bad z-indexing so dropdowns don't appear below content that follows the navbar + *position: relative; + *z-index: 2; +} + +// Inner for background effects +// Gradient is applied to its own element because overflow visible is not honored by IE when filter is present +.navbar-inner { + min-height: @navbarHeight; + padding-left: 20px; + padding-right: 20px; + #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground); + border: 1px solid @navbarBorder; + .border-radius(4px); + .box-shadow(0 1px 4px rgba(0,0,0,.065)); +} + +// Set width to auto for default container +// We then reset it for fixed navbars in the #gridSystem mixin +.navbar .container { + width: auto; +} + +// Override the default collapsed state +.nav-collapse.collapse { + height: auto; +} + + +// Brand: website or project name +// ------------------------- +.navbar .brand { + float: left; + display: block; + // Vertically center the text given @navbarHeight + @elementHeight: 20px; + padding: ((@navbarHeight - @elementHeight) / 2) 20px ((@navbarHeight - @elementHeight) / 2); + margin-left: -20px; // negative indent to left-align the text down the page + font-size: 20px; + font-weight: 200; + color: @navbarBrandColor; + text-shadow: 0 1px 0 @navbarBackgroundHighlight; + &:hover { + text-decoration: none; + } +} + +// Plain text in topbar +// ------------------------- +.navbar-text { + 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 +// ------------------------- +.navbar .btn, +.navbar .btn-group { + .navbarVerticalAlign(28px); // Vertically center in navbar +} +.navbar .btn-group .btn { + margin: 0; // then undo the margin here so we don't accidentally double it +} + +// Navbar forms +.navbar-form { + margin-bottom: 0; // remove default bottom margin + .clearfix(); + input, + select, + .radio, + .checkbox { + .navbarVerticalAlign(28px); // Vertically center in navbar + } + input, + select, + .btn { + display: inline-block; + margin-bottom: 0; + } + input[type="image"], + input[type="checkbox"], + input[type="radio"] { + margin-top: 3px; + } + .input-append, + .input-prepend { + margin-top: 6px; + white-space: nowrap; // preven two items from separating within a .navbar-form that has .pull-left + input { + margin-top: 0; // remove the margin on top since it's on the parent + } + } +} + +// Navbar search +.navbar-search { + position: relative; + float: left; + .navbarVerticalAlign(30px); // Vertically center in navbar + margin-bottom: 0; + .search-query { + margin-bottom: 0; + padding: 4px 14px; + #font > .sans-serif(13px, normal, 1); + .border-radius(15px); // redeclare because of specificity of the type attribute + .placeholder(@navbarSearchPlaceholderColor); + } +} + + + +// FIXED NAVBAR +// ------------ + +// Shared (top/bottom) styles +.navbar-fixed-top, +.navbar-fixed-bottom { + position: fixed; + right: 0; + left: 0; + z-index: @zindexFixedNavbar; + margin-bottom: 0; // remove 18px margin for static navbar +} +.navbar-fixed-top .navbar-inner, +.navbar-fixed-bottom .navbar-inner { + padding-left: 0; + padding-right: 0; + .border-radius(0); +} + +.navbar-fixed-top .container, +.navbar-fixed-bottom .container { + #grid > .core > .span(@gridColumns); +} + +// Fixed to top +.navbar-fixed-top { + top: 0; + .navbar-inner { + border-width: 0 0 1px; + .box-shadow(0 1px 10px rgba(0,0,0,.1)); + } +} + +// Fixed to bottom +.navbar-fixed-bottom { + bottom: 0; + .navbar-inner { + border-width: 1px 0 0; + .box-shadow(0 -1px 10px rgba(0,0,0,.1)); + } +} + + + +// NAVIGATION +// ---------- + +.navbar .nav { + position: relative; + left: 0; + display: block; + float: left; + margin: 0 10px 0 0; +} +.navbar .nav.pull-right { + float: right; // redeclare due to specificity +} +.navbar .nav > li { + float: left; +} + +// Links +.navbar .nav > li > a { + float: none; + // Vertically center the text given @navbarHeight + @elementHeight: 20px; + padding: ((@navbarHeight - @elementHeight) / 2) 15px ((@navbarHeight - @elementHeight) / 2); + color: @navbarLinkColor; + text-decoration: none; + text-shadow: 0 1px 0 @navbarBackgroundHighlight; +} +.navbar .nav .dropdown-toggle .caret { + margin-top: 8px; +} + +// Hover +.navbar .nav > li > a:focus, +.navbar .nav > li > a:hover { + background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active + color: @navbarLinkColorHover; + text-decoration: none; +} + +// Active nav items +.navbar .nav .active > a, +.navbar .nav .active > a:hover, +.navbar .nav .active > a:focus { + color: @navbarLinkColorActive; + text-decoration: none; + background-color: @navbarLinkBackgroundActive; + -webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.125); + -moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.125); + box-shadow: inset 0 3px 8px rgba(0,0,0,.125); +} + +// 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(darken(@navbarBackgroundHighlight, 5%), darken(@navbarBackground, 5%)); + .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 +// -------------- + +// Menu position and menu carets +.navbar .dropdown-menu { + &:before { + content: ''; + display: inline-block; + border-left: 7px solid transparent; + border-right: 7px solid transparent; + border-bottom: 7px solid #ccc; + border-bottom-color: @dropdownBorder; + position: absolute; + top: -7px; + left: 9px; + } + &:after { + content: ''; + display: inline-block; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + border-bottom: 6px solid @dropdownBackground; + position: absolute; + top: -6px; + left: 10px; + } +} +// Menu position and menu caret support for dropups via extra dropup class +.navbar-fixed-bottom .dropdown-menu { + &:before { + border-top: 7px solid #ccc; + border-top-color: @dropdownBorder; + border-bottom: 0; + bottom: -7px; + top: auto; + } + &:after { + border-top: 6px solid @dropdownBackground; + border-bottom: 0; + bottom: -6px; + top: auto; + } +} + +// Remove background color from open dropdown +.navbar .nav li.dropdown.open > .dropdown-toggle, +.navbar .nav li.dropdown.active > .dropdown-toggle, +.navbar .nav li.dropdown.open.active > .dropdown-toggle { + background-color: @navbarLinkBackgroundActive; + color: @navbarLinkColorActive; +} +.navbar .nav li.dropdown > .dropdown-toggle .caret { + border-top-color: @navbarLinkColor; + border-bottom-color: @navbarLinkColor; +} +.navbar .nav li.dropdown.open > .dropdown-toggle .caret, +.navbar .nav li.dropdown.active > .dropdown-toggle .caret, +.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret { + border-top-color: @navbarLinkColorActive; + border-bottom-color: @navbarLinkColorActive; +} + +// Right aligned menus need alt position +.navbar .pull-right .dropdown-menu, +.navbar .dropdown-menu.pull-right { + left: auto; + right: 0; + &:before { + left: auto; + right: 12px; + } + &:after { + left: auto; + right: 13px; + } +} + + +// Inverted navbar +// ------------------------- + +.navbar-inverse { + color: @navbarInverseText; + + .navbar-inner { + #gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground); + border-color: @navbarInverseBorder; + } + + .brand, + .nav > li > a { + color: @navbarInverseLinkColor; + text-shadow: 0 -1px 0 rgba(0,0,0,.25); + &:hover { + color: @navbarInverseLinkColorHover; + } + } + + .nav > li > a:focus, + .nav > li > a:hover { + background-color: @navbarInverseLinkBackgroundHover; + color: @navbarInverseLinkColorHover; + } + + .nav .active > a, + .nav .active > a:hover, + .nav .active > a:focus { + color: @navbarInverseLinkColorActive; + background-color: @navbarInverseLinkBackgroundActive; + } + + .navbar-link { + color: @navbarInverseLinkColor; + &:hover { + color: @navbarInverseLinkColorHover; + } + } + + .nav li.dropdown.open > .dropdown-toggle, + .nav li.dropdown.active > .dropdown-toggle, + .nav li.dropdown.open.active > .dropdown-toggle { + background-color: @navbarInverseLinkBackgroundActive; + color: @navbarInverseLinkColorActive; + } + .nav li.dropdown > .dropdown-toggle .caret { + border-top-color: @navbarInverseLinkColor; + border-bottom-color: @navbarInverseLinkColor; + } + .nav li.dropdown.open > .dropdown-toggle .caret, + .nav li.dropdown.active > .dropdown-toggle .caret, + .nav li.dropdown.open.active > .dropdown-toggle .caret { + border-top-color: @navbarInverseLinkColorActive; + border-bottom-color: @navbarInverseLinkColorActive; + } + + // Navbar search + .navbar-search { + .search-query { + color: @white; + background-color: @navbarInverseSearchBackground; + border-color: @navbarInverseSearchBorder; + .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)"); + .transition(none); + .placeholder(@navbarInverseSearchPlaceholderColor); + + // Focus states (we use .focused since IE7-8 and down doesn't support :focus) + &:focus, + &.focused { + padding: 5px 15px; + color: @grayDark; + text-shadow: 0 1px 0 @white; + background-color: @navbarInverseSearchBackgroundFocus; + border: 0; + .box-shadow(0 0 3px rgba(0,0,0,.15)); + outline: 0; + } + } + } + +} + + + diff --git a/less/navbar.less b/less/navbar.less index 0a38ef56e..d2f122784 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -483,5 +483,3 @@ -moz-border-radius: 0; border-radius: 0; } - - diff --git a/less/variables.less b/less/variables.less index 0e3e13f41..9c914d874 100644 --- a/less/variables.less +++ b/less/variables.less @@ -155,15 +155,16 @@ // Navbar // ------------------------- @navbarHeight: 40px; -@navbarBackground: #111; -@navbarBackgroundHighlight: #222; - -@navbarText: @grayLight; -@navbarLinkColor: @grayLight; -@navbarLinkColorHover: @white; -@navbarLinkColorActive: @navbarLinkColorHover; +@navbarBackground: darken(@navbarBackgroundHighlight, 5%); +@navbarBackgroundHighlight: #ffffff; +@navbarBorder: darken(@navbarBackground, 12%); + +@navbarText: @gray; +@navbarLinkColor: @gray; +@navbarLinkColorHover: @grayDark; +@navbarLinkColorActive: @gray; @navbarLinkBackgroundHover: transparent; -@navbarLinkBackgroundActive: @navbarBackground; +@navbarLinkBackgroundActive: darken(@navbarBackground, 5%); @navbarSearchBackground: lighten(@navbarBackground, 25%); @navbarSearchBackgroundFocus: @white; @@ -171,6 +172,26 @@ @navbarSearchPlaceholderColor: #ccc; @navbarBrandColor: @navbarLinkColor; +// Inverted navbar +@navbarInverseBackground: #111111; +@navbarInverseBackgroundHighlight: #222222; +@navbarInverseBorder: #252525; + +@navbarInverseText: @grayLight; +@navbarInverseLinkColor: @grayLight; +@navbarInverseLinkColorHover: @white; +@navbarInverseLinkColorActive: @navbarInverseLinkColorHover; +@navbarInverseLinkBackgroundHover: transparent; +@navbarInverseLinkBackgroundActive: @navbarInverseBackground; + +@navbarInverseSearchBackground: lighten(@navbarInverseBackground, 25%); +@navbarInverseSearchBackgroundFocus: @white; +@navbarInverseSearchBorder: @navbarInverseBackground; +@navbarInverseSearchPlaceholderColor: #ccc; + +@navbarInverseBrandColor: @navbarInverseLinkColor; + + // Hero unit // ------------------------- -- cgit v1.2.3 From 134d11b5283de087a6f069e59fbceed3de52092e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 29 Jul 2012 12:10:29 -0700 Subject: use shorthand on form field transitions for box-shadow mixin --- less/forms.less | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'less') diff --git a/less/forms.less b/less/forms.less index 1a469072c..0c913b952 100644 --- a/less/forms.less +++ b/less/forms.less @@ -118,8 +118,7 @@ input[type="color"], background-color: @inputBackground; border: 1px solid @inputBorder; .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); - @transition: border linear .2s, box-shadow linear .2s; - .transition(@transition); + .transition(~"border linear .2s, box-shadow linear .2s"); // Focus state &:focus { -- cgit v1.2.3 From 87ce3489d37ffa58c18de985808757785df8c7cc Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 29 Jul 2012 16:25:20 -0700 Subject: remove gradient, border, and box-shadow from .breadcrumb to differentiate from nav and buttons --- less/breadcrumbs.less | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) (limited to 'less') diff --git a/less/breadcrumbs.less b/less/breadcrumbs.less index c8a3807de..80291e82e 100644 --- a/less/breadcrumbs.less +++ b/less/breadcrumbs.less @@ -4,13 +4,11 @@ .breadcrumb { - padding: 7px 14px; + padding: 8px 15px; margin: 0 0 @baseLineHeight; list-style: none; - #gradient > .vertical(@white, #f5f5f5); - border: 1px solid #ddd; - .border-radius(3px); - .box-shadow(inset 0 1px 0 @white); + background-color: #f5f5f5; + .border-radius(4px); li { display: inline-block; .ie7-inline-block(); -- cgit v1.2.3 From d63ebe3f3c885be05d93a1133d6feaa5be302536 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 29 Jul 2012 16:36:16 -0700 Subject: more breadcrumb tweaks for contrast --- less/breadcrumbs.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'less') diff --git a/less/breadcrumbs.less b/less/breadcrumbs.less index 80291e82e..fd269b31a 100644 --- a/less/breadcrumbs.less +++ b/less/breadcrumbs.less @@ -16,9 +16,9 @@ } .divider { padding: 0 5px; - color: @grayLight; + color: #ccc; } - .active a { - color: @grayDark; + .active { + color: @grayLight; } } -- cgit v1.2.3 From 22a9a8365640cd8b09ee50580e7220e6d1d60e33 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 29 Jul 2012 16:51:24 -0700 Subject: fixes #3694: provide override classes for .hide and .pull-right for grid columns --- less/grid.less | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) (limited to 'less') diff --git a/less/grid.less b/less/grid.less index b63005c68..750d20351 100644 --- a/less/grid.less +++ b/less/grid.less @@ -7,4 +7,15 @@ #grid > .core(@gridColumnWidth, @gridGutterWidth); // Fluid (940px) -#grid > .fluid(@fluidGridColumnWidth, @fluidGridGutterWidth); \ No newline at end of file +#grid > .fluid(@fluidGridColumnWidth, @fluidGridGutterWidth); + +// Reset utility classes due to specificity +[class*="span"].hide, +.row-fluid [class*="span"].hide { + display: none; +} + +[class*="span"].pull-right, +.row-fluid [class*="span"].pull-right { + float: right; +} -- cgit v1.2.3 From cfac4bb59d120c747a2b410f6574f28fa464e271 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 29 Jul 2012 23:51:40 -0700 Subject: fixes #4221: correct border-collapse property for IE7 hack --- less/tables.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less') diff --git a/less/tables.less b/less/tables.less index b1d34fd24..90168c569 100644 --- a/less/tables.less +++ b/less/tables.less @@ -79,7 +79,7 @@ table { .table-bordered { border: 1px solid @tableBorder; border-collapse: separate; // Done so we can round those corners! - *border-collapse: collapsed; // IE7 can't round corners anyway + *border-collapse: collapse; // IE7 can't round corners anyway border-left: 0; .border-radius(4px); th, -- cgit v1.2.3 From b63543181aad029167de60bc3563aadcd6f895fc Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 30 Jul 2012 10:08:27 -0700 Subject: fix examples collapse classes, rename navbar-redux to navbar and delete the old one --- less/bootstrap.less | 3 +- less/navbar-redux.less | 418 ------------------------------------------------- less/navbar.less | 360 ++++++++++++++++++------------------------ 3 files changed, 151 insertions(+), 630 deletions(-) delete mode 100644 less/navbar-redux.less (limited to 'less') diff --git a/less/bootstrap.less b/less/bootstrap.less index 94e5a6c2f..c43875a80 100644 --- a/less/bootstrap.less +++ b/less/bootstrap.less @@ -40,8 +40,7 @@ // Components: Nav @import "navs.less"; -//@import "navbar.less"; -@import "navbar-redux.less"; +@import "navbar.less"; @import "breadcrumbs.less"; @import "pagination.less"; @import "pager.less"; diff --git a/less/navbar-redux.less b/less/navbar-redux.less deleted file mode 100644 index c13629c9b..000000000 --- a/less/navbar-redux.less +++ /dev/null @@ -1,418 +0,0 @@ -// -// Navbars (Redux) -// -------------------------------------------------- - - -// COMMON STYLES -// ------------- - -// Base class and wrapper -.navbar { - overflow: visible; - margin-bottom: @baseLineHeight; - color: @navbarText; - - // Fix for IE7's bad z-indexing so dropdowns don't appear below content that follows the navbar - *position: relative; - *z-index: 2; -} - -// Inner for background effects -// Gradient is applied to its own element because overflow visible is not honored by IE when filter is present -.navbar-inner { - min-height: @navbarHeight; - padding-left: 20px; - padding-right: 20px; - #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground); - border: 1px solid @navbarBorder; - .border-radius(4px); - .box-shadow(0 1px 4px rgba(0,0,0,.065)); -} - -// Set width to auto for default container -// We then reset it for fixed navbars in the #gridSystem mixin -.navbar .container { - width: auto; -} - -// Override the default collapsed state -.nav-collapse.collapse { - height: auto; -} - - -// Brand: website or project name -// ------------------------- -.navbar .brand { - float: left; - display: block; - // Vertically center the text given @navbarHeight - @elementHeight: 20px; - padding: ((@navbarHeight - @elementHeight) / 2) 20px ((@navbarHeight - @elementHeight) / 2); - margin-left: -20px; // negative indent to left-align the text down the page - font-size: 20px; - font-weight: 200; - color: @navbarBrandColor; - text-shadow: 0 1px 0 @navbarBackgroundHighlight; - &:hover { - text-decoration: none; - } -} - -// Plain text in topbar -// ------------------------- -.navbar-text { - 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 -// ------------------------- -.navbar .btn, -.navbar .btn-group { - .navbarVerticalAlign(28px); // Vertically center in navbar -} -.navbar .btn-group .btn { - margin: 0; // then undo the margin here so we don't accidentally double it -} - -// Navbar forms -.navbar-form { - margin-bottom: 0; // remove default bottom margin - .clearfix(); - input, - select, - .radio, - .checkbox { - .navbarVerticalAlign(28px); // Vertically center in navbar - } - input, - select, - .btn { - display: inline-block; - margin-bottom: 0; - } - input[type="image"], - input[type="checkbox"], - input[type="radio"] { - margin-top: 3px; - } - .input-append, - .input-prepend { - margin-top: 6px; - white-space: nowrap; // preven two items from separating within a .navbar-form that has .pull-left - input { - margin-top: 0; // remove the margin on top since it's on the parent - } - } -} - -// Navbar search -.navbar-search { - position: relative; - float: left; - .navbarVerticalAlign(30px); // Vertically center in navbar - margin-bottom: 0; - .search-query { - margin-bottom: 0; - padding: 4px 14px; - #font > .sans-serif(13px, normal, 1); - .border-radius(15px); // redeclare because of specificity of the type attribute - .placeholder(@navbarSearchPlaceholderColor); - } -} - - - -// FIXED NAVBAR -// ------------ - -// Shared (top/bottom) styles -.navbar-fixed-top, -.navbar-fixed-bottom { - position: fixed; - right: 0; - left: 0; - z-index: @zindexFixedNavbar; - margin-bottom: 0; // remove 18px margin for static navbar -} -.navbar-fixed-top .navbar-inner, -.navbar-fixed-bottom .navbar-inner { - padding-left: 0; - padding-right: 0; - .border-radius(0); -} - -.navbar-fixed-top .container, -.navbar-fixed-bottom .container { - #grid > .core > .span(@gridColumns); -} - -// Fixed to top -.navbar-fixed-top { - top: 0; - .navbar-inner { - border-width: 0 0 1px; - .box-shadow(0 1px 10px rgba(0,0,0,.1)); - } -} - -// Fixed to bottom -.navbar-fixed-bottom { - bottom: 0; - .navbar-inner { - border-width: 1px 0 0; - .box-shadow(0 -1px 10px rgba(0,0,0,.1)); - } -} - - - -// NAVIGATION -// ---------- - -.navbar .nav { - position: relative; - left: 0; - display: block; - float: left; - margin: 0 10px 0 0; -} -.navbar .nav.pull-right { - float: right; // redeclare due to specificity -} -.navbar .nav > li { - float: left; -} - -// Links -.navbar .nav > li > a { - float: none; - // Vertically center the text given @navbarHeight - @elementHeight: 20px; - padding: ((@navbarHeight - @elementHeight) / 2) 15px ((@navbarHeight - @elementHeight) / 2); - color: @navbarLinkColor; - text-decoration: none; - text-shadow: 0 1px 0 @navbarBackgroundHighlight; -} -.navbar .nav .dropdown-toggle .caret { - margin-top: 8px; -} - -// Hover -.navbar .nav > li > a:focus, -.navbar .nav > li > a:hover { - background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active - color: @navbarLinkColorHover; - text-decoration: none; -} - -// Active nav items -.navbar .nav .active > a, -.navbar .nav .active > a:hover, -.navbar .nav .active > a:focus { - color: @navbarLinkColorActive; - text-decoration: none; - background-color: @navbarLinkBackgroundActive; - -webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.125); - -moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.125); - box-shadow: inset 0 3px 8px rgba(0,0,0,.125); -} - -// 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(darken(@navbarBackgroundHighlight, 5%), darken(@navbarBackground, 5%)); - .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 -// -------------- - -// Menu position and menu carets -.navbar .dropdown-menu { - &:before { - content: ''; - display: inline-block; - border-left: 7px solid transparent; - border-right: 7px solid transparent; - border-bottom: 7px solid #ccc; - border-bottom-color: @dropdownBorder; - position: absolute; - top: -7px; - left: 9px; - } - &:after { - content: ''; - display: inline-block; - border-left: 6px solid transparent; - border-right: 6px solid transparent; - border-bottom: 6px solid @dropdownBackground; - position: absolute; - top: -6px; - left: 10px; - } -} -// Menu position and menu caret support for dropups via extra dropup class -.navbar-fixed-bottom .dropdown-menu { - &:before { - border-top: 7px solid #ccc; - border-top-color: @dropdownBorder; - border-bottom: 0; - bottom: -7px; - top: auto; - } - &:after { - border-top: 6px solid @dropdownBackground; - border-bottom: 0; - bottom: -6px; - top: auto; - } -} - -// Remove background color from open dropdown -.navbar .nav li.dropdown.open > .dropdown-toggle, -.navbar .nav li.dropdown.active > .dropdown-toggle, -.navbar .nav li.dropdown.open.active > .dropdown-toggle { - background-color: @navbarLinkBackgroundActive; - color: @navbarLinkColorActive; -} -.navbar .nav li.dropdown > .dropdown-toggle .caret { - border-top-color: @navbarLinkColor; - border-bottom-color: @navbarLinkColor; -} -.navbar .nav li.dropdown.open > .dropdown-toggle .caret, -.navbar .nav li.dropdown.active > .dropdown-toggle .caret, -.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret { - border-top-color: @navbarLinkColorActive; - border-bottom-color: @navbarLinkColorActive; -} - -// Right aligned menus need alt position -.navbar .pull-right .dropdown-menu, -.navbar .dropdown-menu.pull-right { - left: auto; - right: 0; - &:before { - left: auto; - right: 12px; - } - &:after { - left: auto; - right: 13px; - } -} - - -// Inverted navbar -// ------------------------- - -.navbar-inverse { - color: @navbarInverseText; - - .navbar-inner { - #gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground); - border-color: @navbarInverseBorder; - } - - .brand, - .nav > li > a { - color: @navbarInverseLinkColor; - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - &:hover { - color: @navbarInverseLinkColorHover; - } - } - - .nav > li > a:focus, - .nav > li > a:hover { - background-color: @navbarInverseLinkBackgroundHover; - color: @navbarInverseLinkColorHover; - } - - .nav .active > a, - .nav .active > a:hover, - .nav .active > a:focus { - color: @navbarInverseLinkColorActive; - background-color: @navbarInverseLinkBackgroundActive; - } - - .navbar-link { - color: @navbarInverseLinkColor; - &:hover { - color: @navbarInverseLinkColorHover; - } - } - - .nav li.dropdown.open > .dropdown-toggle, - .nav li.dropdown.active > .dropdown-toggle, - .nav li.dropdown.open.active > .dropdown-toggle { - background-color: @navbarInverseLinkBackgroundActive; - color: @navbarInverseLinkColorActive; - } - .nav li.dropdown > .dropdown-toggle .caret { - border-top-color: @navbarInverseLinkColor; - border-bottom-color: @navbarInverseLinkColor; - } - .nav li.dropdown.open > .dropdown-toggle .caret, - .nav li.dropdown.active > .dropdown-toggle .caret, - .nav li.dropdown.open.active > .dropdown-toggle .caret { - border-top-color: @navbarInverseLinkColorActive; - border-bottom-color: @navbarInverseLinkColorActive; - } - - // Navbar search - .navbar-search { - .search-query { - color: @white; - background-color: @navbarInverseSearchBackground; - border-color: @navbarInverseSearchBorder; - .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)"); - .transition(none); - .placeholder(@navbarInverseSearchPlaceholderColor); - - // Focus states (we use .focused since IE7-8 and down doesn't support :focus) - &:focus, - &.focused { - padding: 5px 15px; - color: @grayDark; - text-shadow: 0 1px 0 @white; - background-color: @navbarInverseSearchBackgroundFocus; - border: 0; - .box-shadow(0 0 3px rgba(0,0,0,.15)); - outline: 0; - } - } - } - -} - - - diff --git a/less/navbar.less b/less/navbar.less index d2f122784..02535a467 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -1,28 +1,32 @@ // -// Navbars +// Navbars (Redux) // -------------------------------------------------- // COMMON STYLES // ------------- +// Base class and wrapper .navbar { + overflow: visible; + margin-bottom: @baseLineHeight; + color: @navbarText; + // Fix for IE7's bad z-indexing so dropdowns don't appear below content that follows the navbar *position: relative; *z-index: 2; - - overflow: visible; - margin-bottom: @baseLineHeight; } +// Inner for background effects // Gradient is applied to its own element because overflow visible is not honored by IE when filter is present .navbar-inner { min-height: @navbarHeight; padding-left: 20px; padding-right: 20px; #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground); + border: 1px solid @navbarBorder; .border-radius(4px); - .box-shadow(~"0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1)"); + .box-shadow(0 1px 4px rgba(0,0,0,.065)); } // Set width to auto for default container @@ -37,48 +41,50 @@ } -// Brand, links, text, and buttons -.navbar { - color: @navbarText; - // Hover and active states - .brand:hover { +// Brand: website or project name +// ------------------------- +.navbar .brand { + float: left; + display: block; + // Vertically center the text given @navbarHeight + @elementHeight: 20px; + padding: ((@navbarHeight - @elementHeight) / 2) 20px ((@navbarHeight - @elementHeight) / 2); + margin-left: -20px; // negative indent to left-align the text down the page + font-size: 20px; + font-weight: 200; + color: @navbarBrandColor; + text-shadow: 0 1px 0 @navbarBackgroundHighlight; + &:hover { text-decoration: none; } - // Website or project name - .brand { - float: left; - display: block; - // 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; - line-height: 1; - color: @navbarBrandColor; - } - // Plain text in topbar - .navbar-text { - 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 { - .navbarVerticalAlign(28px); // Vertically center in navbar - } - .btn-group .btn { - margin: 0; // then undo the margin here so we don't accidentally double it +} + +// Plain text in topbar +// ------------------------- +.navbar-text { + 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 +// ------------------------- +.navbar .btn, +.navbar .btn-group { + .navbarVerticalAlign(28px); // Vertically center in navbar +} +.navbar .btn-group .btn { + margin: 0; // then undo the margin here so we don't accidentally double it +} + // Navbar forms .navbar-form { margin-bottom: 0; // remove default bottom margin @@ -120,26 +126,8 @@ margin-bottom: 0; padding: 4px 14px; #font > .sans-serif(13px, normal, 1); - color: @white; - background-color: @navbarSearchBackground; - border: 1px solid @navbarSearchBorder; .border-radius(15px); // redeclare because of specificity of the type attribute - .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)"); - .transition(none); - .placeholder(@navbarSearchPlaceholderColor); - - // Focus states (we use .focused since IE7-8 and down doesn't support :focus) - &:focus, - &.focused { - padding: 5px 15px; - color: @grayDark; - text-shadow: 0 1px 0 @white; - background-color: @navbarSearchBackgroundFocus; - border: 0; - .box-shadow(0 0 3px rgba(0,0,0,.15)); - outline: 0; - } } } @@ -172,17 +160,19 @@ // Fixed to top .navbar-fixed-top { top: 0; - -webkit-box-shadow: 0 1px 10px rgba(0,0,0,.1); - -moz-box-shadow: 0 1px 10px rgba(0,0,0,.1); - box-shadow: 0 1px 10px rgba(0,0,0,.1); + .navbar-inner { + border-width: 0 0 1px; + .box-shadow(0 1px 10px rgba(0,0,0,.1)); + } } // Fixed to bottom .navbar-fixed-bottom { bottom: 0; - -webkit-box-shadow: 0 -1px 10px rgba(0,0,0,.1); - -moz-box-shadow: 0 -1px 10px rgba(0,0,0,.1); - box-shadow: 0 -1px 10px rgba(0,0,0,.1); + .navbar-inner { + border-width: 1px 0 0; + .box-shadow(0 -1px 10px rgba(0,0,0,.1)); + } } @@ -209,31 +199,15 @@ float: none; // Vertically center the text given @navbarHeight @elementHeight: 20px; - padding: ((@navbarHeight - @elementHeight) / 2) 15px ((@navbarHeight - @elementHeight) / 2 + 1); - line-height: 19px; + padding: ((@navbarHeight - @elementHeight) / 2) 15px ((@navbarHeight - @elementHeight) / 2); color: @navbarLinkColor; text-decoration: none; - text-shadow: 0 -1px 0 rgba(0,0,0,.25); + text-shadow: 0 1px 0 @navbarBackgroundHighlight; } .navbar .nav .dropdown-toggle .caret { margin-top: 8px; } -// 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:focus, .navbar .nav > li > a:hover { @@ -249,22 +223,9 @@ color: @navbarLinkColorActive; text-decoration: none; background-color: @navbarLinkBackgroundActive; -} - -// Dividers (basically a vertical hr) -.navbar .divider-vertical { - height: @navbarHeight; - width: 1px; - margin: 0 9px; - overflow: hidden; - background-color: @navbarBackground; - border-right: 1px solid @navbarBackgroundHighlight; -} - -// Secondary (floated right) nav in topbar -.navbar .nav.pull-right { - margin-left: 10px; - margin-right: 0; + -webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.125); + -moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.125); + box-shadow: inset 0 3px 8px rgba(0,0,0,.125); } // Navbar button for toggling navbar items in responsive layouts @@ -291,6 +252,7 @@ } + // Dropdown menus // -------------- @@ -334,31 +296,26 @@ top: auto; } } -// Dropdown toggle caret -.navbar .nav li.dropdown .dropdown-toggle .caret, -.navbar .nav li.dropdown.open .caret { - border-top-color: @white; - border-bottom-color: @white; -} -.navbar .nav li.dropdown.active .caret { - .opacity(100); -} // Remove background color from open dropdown .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; + background-color: @navbarLinkBackgroundActive; + color: @navbarLinkColorActive; } - -// Dropdown link on hover -.navbar .nav li.dropdown.active > .dropdown-toggle:focus, -.navbar .nav li.dropdown.active > .dropdown-toggle:hover { - color: @white; +.navbar .nav li.dropdown > .dropdown-toggle .caret { + border-top-color: @navbarLinkColor; + border-bottom-color: @navbarLinkColor; +} +.navbar .nav li.dropdown.open > .dropdown-toggle .caret, +.navbar .nav li.dropdown.active > .dropdown-toggle .caret, +.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret { + border-top-color: @navbarLinkColorActive; + border-bottom-color: @navbarLinkColorActive; } // Right aligned menus need alt position -// TODO: rejigger this at some point to simplify the selectors .navbar .pull-right .dropdown-menu, .navbar .dropdown-menu.pull-right { left: auto; @@ -374,112 +331,95 @@ } -/* Subnav navbar --------------------------------------------------- */ -// In the future, we may make two options available for the navbar: -// a default state, the lighter one, and the darker one as an option -// to enable. This would prevent some overriding back to defaults. +// Inverted navbar +// ------------------------- +.navbar-inverse { + color: @navbarInverseText; -// Override the default .navbar -.navbar-subnav .navbar-inner { - #gradient > .vertical(#ffffff, #f1f1f1); - .box-shadow(none); - border: 1px solid #e5e5e5; - padding-left: 10px; - padding-right: 10px; -} + .navbar-inner { + #gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground); + border-color: @navbarInverseBorder; + } -// Lighten vertical dividers -.navbar-subnav .divider-vertical { - background-color: #f1f1f1; - border-right-color: #ffffff; -} + .brand, + .nav > li > a { + color: @navbarInverseLinkColor; + text-shadow: 0 -1px 0 rgba(0,0,0,.25); + &:hover { + color: @navbarInverseLinkColorHover; + } + } + .nav > li > a:focus, + .nav > li > a:hover { + background-color: @navbarInverseLinkBackgroundHover; + color: @navbarInverseLinkColorHover; + } -// Change link colors back -.navbar-subnav .nav > li > a { - color: @linkColor; - text-shadow: 0 1px 0 rgba(255,255,255,.5); -} -.navbar-subnav .nav > li > a:hover { - color: @linkColorHover; -} + .nav .active > a, + .nav .active > a:hover, + .nav .active > a:focus { + color: @navbarInverseLinkColorActive; + background-color: @navbarInverseLinkBackgroundActive; + } -// Active nav links -.navbar-subnav .nav > .active > a, -.navbar-subnav .nav > .active > a:hover { - color: #777; - background-color: #eee; - -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.5), 1px 0 0 rgba(255,255,255,.5); - -moz-box-shadow: -1px 0 0 rgba(255,255,255,.5), 1px 0 0 rgba(255,255,255,.5); - box-shadow: -1px 0 0 rgba(255,255,255,.5), 1px 0 0 rgba(255,255,255,.5); -} + // Inline text links + .navbar-link { + color: @navbarInverseLinkColor; + &:hover { + color: @navbarInverseLinkColorHover; + } + } -// Dropdown carets -.navbar-subnav .nav li.dropdown .dropdown-toggle .caret, -.navbar-subnav .nav li.dropdown.open .caret { - border-top-color: @linkColor; - border-bottom-color: @linkColor; -} + // Dropdowns + .nav li.dropdown.open > .dropdown-toggle, + .nav li.dropdown.active > .dropdown-toggle, + .nav li.dropdown.open.active > .dropdown-toggle { + background-color: @navbarInverseLinkBackgroundActive; + color: @navbarInverseLinkColorActive; + } + .nav li.dropdown > .dropdown-toggle .caret { + border-top-color: @navbarInverseLinkColor; + border-bottom-color: @navbarInverseLinkColor; + } + .nav li.dropdown.open > .dropdown-toggle .caret, + .nav li.dropdown.active > .dropdown-toggle .caret, + .nav li.dropdown.open.active > .dropdown-toggle .caret { + border-top-color: @navbarInverseLinkColorActive; + border-bottom-color: @navbarInverseLinkColorActive; + } -// Reset search input form -.navbar-subnav .search-query { - background-color: #fff; - border-color: #ccc; - .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.25)"); + // Navbar search + .navbar-search { + .search-query { + color: @white; + background-color: @navbarInverseSearchBackground; + border-color: @navbarInverseSearchBorder; + .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)"); + .transition(none); + .placeholder(@navbarInverseSearchPlaceholderColor); + + // Focus states (we use .focused since IE7-8 and down doesn't support :focus) + &:focus, + &.focused { + padding: 5px 15px; + color: @grayDark; + text-shadow: 0 1px 0 @white; + background-color: @navbarInverseSearchBackgroundFocus; + border: 0; + .box-shadow(0 0 3px rgba(0,0,0,.15)); + outline: 0; + } + } + } - // On :focus, keep the same padding and border - &:focus, - &.focused { - padding: 4px 9px; - border: 1px solid rgba(82,168,236,.8); - .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6)"); + // Navbar collapse button + .btn-navbar { + .buttonBackground(darken(@navbarInverseBackgroundHighlight, 5%), darken(@navbarInverseBackground, 5%)); } -} -// Open dropdown dropdown-toggle -.navbar-subnav .nav .open > a { - color: @linkColorHover; } -// Collapse button -.navbar-subnav .btn-navbar { - .buttonBackground(darken(#ffffff, 5%), darken(#f1f1f1, 5%)); - .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.25), 0 1px 0 rgba(255,255,255,.25)"); -} -.navbar .btn-navbar .icon-bar { - background-color: #999; - .box-shadow(0 1px 0 rgba(0,0,0,.25)); -} -// Fixed subnav on scroll, but only for 980px and up (sorry IE!) -.navbar-subnav-fixed { - position: fixed; - top: 40px; - left: 0; - right: 0; - z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */ - -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 10px rgba(0,0,0,.1); - -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 10px rgba(0,0,0,.1); - box-shadow: inset 0 1px 0 #fff, 0 1px 10px rgba(0,0,0,.1); -} -.navbar-subnav-fixed .navbar-inner { - border-color: #d5d5d5; - border-width: 0 0 1px; /* drop the border on the fixed edges */ - filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */ - .border-radius(0); -} -.navbar-subnav-fixed .nav { - float: none; - max-width: 970px; - margin: 0 auto; - padding: 0 1px; -} -.navbar-subnav .nav > li:first-child > a, -.navbar-subnav .nav > li:first-child > a:hover { - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; -} -- cgit v1.2.3 From 04164e4367134103a2ca94e49785a18b17032ec3 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 30 Jul 2012 10:24:41 -0700 Subject: fixes #3858: add var for responsive navbar. also add additional examples to navbar docs --- less/responsive-navbar.less | 2 +- less/variables.less | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) (limited to 'less') diff --git a/less/responsive-navbar.less b/less/responsive-navbar.less index 7f01059ce..d684fcafa 100644 --- a/less/responsive-navbar.less +++ b/less/responsive-navbar.less @@ -5,7 +5,7 @@ // TABLETS AND BELOW // ----------------- -@media (max-width: 979px) { +@media (max-width: @navbarCollapseWidth) { // UNFIX THE TOPBAR // ---------------- diff --git a/less/variables.less b/less/variables.less index 9c914d874..7d627f9ee 100644 --- a/less/variables.less +++ b/less/variables.less @@ -154,6 +154,8 @@ // Navbar // ------------------------- +@navbarCollapseWidth: 979px; + @navbarHeight: 40px; @navbarBackground: darken(@navbarBackgroundHighlight, 5%); @navbarBackgroundHighlight: #ffffff; -- cgit v1.2.3 From 7fa99fb1fe9392f61cb5c46f7e5082e73e8b8784 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 30 Jul 2012 12:15:08 -0700 Subject: fix navbar form alignment, and update examples to show these cases --- less/navbar.less | 5 +++-- less/tests/css-tests.html | 7 +++++-- 2 files changed, 8 insertions(+), 4 deletions(-) (limited to 'less') diff --git a/less/navbar.less b/less/navbar.less index 02535a467..0e027d2c3 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -48,7 +48,8 @@ display: block; // Vertically center the text given @navbarHeight @elementHeight: 20px; - padding: ((@navbarHeight - @elementHeight) / 2) 20px ((@navbarHeight - @elementHeight) / 2); + @heightDifference: @navbarHeight - @elementHeight; + padding: ((@heightDifference / 2) - 2) 20px ((@heightDifference / 2) + 2); margin-left: -20px; // negative indent to left-align the text down the page font-size: 20px; font-weight: 200; @@ -93,7 +94,7 @@ select, .radio, .checkbox { - .navbarVerticalAlign(28px); // Vertically center in navbar + .navbarVerticalAlign(30px); // Vertically center in navbar } input, select, diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html index 81d5b1896..a8f62c3cc 100644 --- a/less/tests/css-tests.html +++ b/less/tests/css-tests.html @@ -34,7 +34,7 @@ - -- cgit v1.2.3 From 1bb7c0e669bfa431b190ed3b283be93f27cf0eae Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 1 Aug 2012 19:33:37 -0700 Subject: fixes #4254: make .span12 expand full width of a parent when responsive --- less/responsive-767px-max.less | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'less') diff --git a/less/responsive-767px-max.less b/less/responsive-767px-max.less index 18c96ee0b..65e019a8f 100644 --- a/less/responsive-767px-max.less +++ b/less/responsive-767px-max.less @@ -62,6 +62,11 @@ width: auto; margin-left: 0; } + .span12, + .row-fluid .span12 { + width: 100%; + .box-sizing(border-box); + } // FORM FIELDS // ----------- -- cgit v1.2.3 From 225d0e0af36ef7aed818fb124c7ec13fbb52be5d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 1 Aug 2012 19:36:28 -0700 Subject: label new css test --- less/tests/css-tests.html | 1 + 1 file changed, 1 insertion(+) (limited to 'less') diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html index ef3c0ef6e..8d9785187 100644 --- a/less/tests/css-tests.html +++ b/less/tests/css-tests.html @@ -1103,6 +1103,7 @@
    +

    Fluid textarea at .span12

    -- cgit v1.2.3 From fc7ecd78c88771ca9b899f19d56f84970fe9429b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 1 Aug 2012 20:58:33 -0700 Subject: add select element responsive CSS test --- less/tests/css-tests.html | 37 ++++++++++++++++++++++++------------- 1 file changed, 24 insertions(+), 13 deletions(-) (limited to 'less') diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html index 8d9785187..d7bca7b0f 100644 --- a/less/tests/css-tests.html +++ b/less/tests/css-tests.html @@ -818,6 +818,30 @@
    +

    Fluid textarea at .span12

    +
    +
    + +
    +
    + + +
    + + +

    Selects

    +
    + + + + +
    + + + + @@ -1098,19 +1122,6 @@ -
    -
    -
    - - -

    Fluid textarea at .span12

    -
    -
    - -
    -
    - -
    -- cgit v1.2.3 From 1e2edaef48e45c1a085cd21ad2cbf86cfe2c7c06 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 1 Aug 2012 22:52:53 -0700 Subject: add test for #4236: button group, one button with text and one with icon, now line up properly --- less/tests/css-tests.html | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) (limited to 'less') diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html index d7bca7b0f..6786454cc 100644 --- a/less/tests/css-tests.html +++ b/less/tests/css-tests.html @@ -1033,6 +1033,7 @@
    +
    +
    @@ -1086,6 +1088,14 @@
    +

    Mini buttons: text and icon

    +
    + + +
    + +
    +