From 70d95b1bd72a039d47695495aac6b71da17df7dc Mon Sep 17 00:00:00 2001 From: Pete Hopkins Date: Fri, 27 Jan 2012 13:27:55 -0500 Subject: [PATCH 1/9] Moves IE7-specific button padding to only apply to form controls --- less/buttons.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/less/buttons.less b/less/buttons.less index f18cf9d955..5f6f0c24b2 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -67,7 +67,6 @@ // Button Base display: inline-block; padding: 4px 10px 4px; - *padding: 2px 10px; // IE7 likes to collapse the whitespace before the button, so bring it back... *margin-left: 4px; &:first-child { @@ -151,6 +150,8 @@ // Help Firefox not be a jerk about adding extra padding to buttons button.btn, input[type=submit].btn { + // IE7 has some default padding on button controls + *padding: 2px 10px; &::-moz-focus-inner { padding: 0; border: 0; From 7b31f4a33467d8e69c0723525b8d9d8e024eaeb6 Mon Sep 17 00:00:00 2001 From: Pete Hopkins Date: Fri, 27 Jan 2012 13:56:41 -0500 Subject: [PATCH 2/9] Brings back uneditable input --- docs/templates/pages/base-css.mustache | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index c3d10eb081..2e7af5cc75 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -969,6 +969,12 @@ +
+ +
+ Some value here +
+
@@ -1424,4 +1430,4 @@
- \ No newline at end of file + From 43f1a42f7f254ad5d776564122bdae6547a4fbcd Mon Sep 17 00:00:00 2001 From: Pete Hopkins Date: Fri, 27 Jan 2012 13:57:51 -0500 Subject: [PATCH 3/9] Adds necessary ie7-inline-block macros --- less/button-groups.less | 1 + less/forms.less | 1 + 2 files changed, 2 insertions(+) diff --git a/less/button-groups.less b/less/button-groups.less index 5fb0a8e975..fd802cc359 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -17,6 +17,7 @@ .btn-toolbar { .btn-group { display: inline-block; + .ie7-inline-block; } } diff --git a/less/forms.less b/less/forms.less index 55a6463687..52f5063f05 100644 --- a/less/forms.less +++ b/less/forms.less @@ -377,6 +377,7 @@ select:focus:required:invalid { .help-inline { display: inline-block; + .ie7-inline-block; margin-bottom: 9px; vertical-align: middle; padding-left: 5px; From 347a15b69aff9cf3f9bc5c47c9bcadb459eb895b Mon Sep 17 00:00:00 2001 From: Pete Hopkins Date: Fri, 27 Jan 2012 14:17:06 -0500 Subject: [PATCH 4/9] Cleans up IE7 inline margins for buttons and adds them for sprites, also fixes button padding for large/small sizes --- less/buttons.less | 26 ++++++++++++++++---------- less/mixins.less | 22 ++++++++++++++++++++++ less/sprites.less | 2 ++ 3 files changed, 40 insertions(+), 10 deletions(-) diff --git a/less/buttons.less b/less/buttons.less index 5f6f0c24b2..06a7d91bdf 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -67,12 +67,6 @@ // Button Base display: inline-block; padding: 4px 10px 4px; - // IE7 likes to collapse the whitespace before the button, so bring it back... - *margin-left: 4px; - &:first-child { - // ...but not before the first button - *margin-left: 0; - } font-size: @baseFontSize; line-height: @baseLineHeight; color: @grayDark; @@ -85,6 +79,8 @@ .box-shadow(@shadow); cursor: pointer; + .ie7-restore-left-whitespace; + &:hover { color: @grayDark; text-decoration: none; @@ -129,7 +125,7 @@ // Button Sizes &.large { - padding: 9px 14px 9px; + padding: 9px 14px; font-size: @baseFontSize + 2px; line-height: normal; .border-radius(5px); @@ -138,7 +134,7 @@ margin-top: 1px; } &.small { - padding: 5px 9px 5px; + padding: 5px 9px; font-size: @baseFontSize - 2px; line-height: @baseLineHeight - 2px; } @@ -150,10 +146,20 @@ // Help Firefox not be a jerk about adding extra padding to buttons button.btn, input[type=submit].btn { - // IE7 has some default padding on button controls - *padding: 2px 10px; &::-moz-focus-inner { padding: 0; border: 0; } + + // IE7 has some default padding on button controls + *padding-top: 2px; + *padding-bottom: 2px; + &.large { + *padding-top: 7px; + *padding-bottom: 7px; + } + &.small { + *padding-top: 3px; + *padding-bottom: 3px; + } } diff --git a/less/mixins.less b/less/mixins.less index dd331ebf28..745fe33d95 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -36,6 +36,28 @@ *zoom: 1; } +// IE7 likes to collapse whitespace on either side of the inline-block elements. +// Ems because we're attempting to match the width of a space character. Left +// version is for form buttons, which typically come after other elements, and +// right version is for icons, which come before. Applying both is ok, but it will +// mean that space between those elements will be .6em (~2 space characters) in IE7, +// instead of the 1 space in other browsers. +.ie7-restore-left-whitespace() { + *margin-left: .3em; + + &:first-child { + *margin-left: 0; + } +} + +.ie7-restore-right-whitespace() { + *margin-right: .3em; + + &:last-child { + *margin-left: 0; + } +} + // Sizing shortcuts // ------------------------- .size(@height: 5px, @width: 5px) { diff --git a/less/sprites.less b/less/sprites.less index 599434b2bc..fac416df33 100644 --- a/less/sprites.less +++ b/less/sprites.less @@ -19,6 +19,8 @@ vertical-align: text-top; width: 14px; height: 14px; + + .ie7-restore-right-whitespace; } .icon.white { background-image: url(../img/glyphicons-halflings-sprite-white.png); From 8328987b15e0bb9e1c2ee1bd90e8dee9843f0ea7 Mon Sep 17 00:00:00 2001 From: Pete Hopkins Date: Fri, 27 Jan 2012 16:06:58 -0500 Subject: [PATCH 5/9] IE7 fixes for split buttons and dropdowns --- less/button-groups.less | 30 ++++++++++++++++++++---------- less/dropdowns.less | 21 +++++++++++++++++++-- 2 files changed, 39 insertions(+), 12 deletions(-) diff --git a/less/button-groups.less b/less/button-groups.less index fd802cc359..a058f03448 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -6,6 +6,7 @@ .btn-group { position: relative; .clearfix(); // clears the floated buttons + .ie7-restore-left-whitespace; } // Space out series of button groups @@ -84,18 +85,27 @@ padding-right: 8px; @shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); .box-shadow(@shadow); + *padding-top: 5px; + *padding-bottom: 5px; } -// Reposition menu on open and round all corners -.btn-group.open .dropdown-menu { - display: block; - margin-top: 1px; - .border-radius(5px); -} -.btn-group.open .dropdown-toggle { - background-image: none; - @shadow: inset 0 1px 6px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); - .box-shadow(@shadow); +.btn-group.open { + // IE7's z-index only goes to the nearest positioned ancestor, which would + // make the menu appear below buttons that appeared later on the page + *z-index: @zindexDropdown; + + // Reposition menu on open and round all corners + .dropdown-menu { + display: block; + margin-top: 1px; + .border-radius(5px); + } + + .dropdown-toggle { + background-image: none; + @shadow: inset 0 1px 6px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); + .box-shadow(@shadow); + } } // Reposition the caret diff --git a/less/dropdowns.less b/less/dropdowns.less index 06114b254d..e73b056e96 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -5,12 +5,19 @@ .dropdown { position: relative; } +.dropdown .dropdown-toggle { + // The caret makes the toggle a bit too tall in IE7 + *margin-bottom: -3px; +} // Dropdown arrow/caret .caret { display: inline-block; width: 0; height: 0; text-indent: -99999px; + // IE7 won't do the border trick if there's a text indent, but it doesn't + // do the content that text-indent is hiding, either, so we're ok. + *text-indent: 0; vertical-align: top; border-left: 4px solid transparent; border-right: 4px solid transparent; @@ -21,7 +28,6 @@ .dropdown .caret { margin-top: 8px; margin-left: 2px; - *margin-top: 7px; } .dropdown:hover .caret, .open.dropdown .caret { @@ -31,6 +37,7 @@ .dropdown-menu { position: absolute; top: 100%; + left: 0; z-index: @zindexDropdown; float: left; display: none; // none by default, but block on "open" of the menu @@ -50,7 +57,6 @@ -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; - zoom: 1; // do we need this? *border-right-width: 2px; *border-bottom-width: 2px; @@ -68,6 +74,13 @@ overflow: hidden; background-color: #e5e5e5; border-bottom: 1px solid @white; + + // IE7 needs a set width since we gave a height. Restricting just + // to IE7 to keep the 1px left/right space in other browsers. + // It is unclear where IE is getting the extra space that we need + // to negative-margin away, but so it goes. + *width: 100%; + *margin: -5px 0 5px; } // Links within the dropdown menu @@ -93,6 +106,10 @@ // Open state for the dropdown .dropdown.open { + // IE7's z-index only goes to the nearest positioned ancestor, which would + // make the menu appear below buttons that appeared later on the page + *z-index: @zindexDropdown; + .dropdown-toggle { color: @white; background: #ccc; From faa719d59c45eb05a7e77db311d7bb277341f85d Mon Sep 17 00:00:00 2001 From: Pete Hopkins Date: Fri, 27 Jan 2012 16:35:21 -0500 Subject: [PATCH 6/9] Fixes left/right border overlap for IE7 --- less/navs.less | 2 ++ 1 file changed, 2 insertions(+) diff --git a/less/navs.less b/less/navs.less index cd356d9bb8..f1d5b565c4 100644 --- a/less/navs.less +++ b/less/navs.less @@ -317,6 +317,7 @@ .tabs-left .tabs .active > a, .tabs-left .tabs .active > a:hover { border-color: #ddd transparent #ddd #ddd; + *border-right-color: @white; } // Tabs on the right @@ -335,4 +336,5 @@ .tabs-right .tabs .active > a, .tabs-right .tabs .active > a:hover { border-color: #ddd #ddd #ddd transparent; + *border-left-color: @white; } From a1fc352cc2b8e94557c1414178a59c73a6c3b849 Mon Sep 17 00:00:00 2001 From: Pete Hopkins Date: Thu, 26 Jan 2012 17:03:15 -0500 Subject: [PATCH 7/9] Changes non-transparent navbar search box color to match transparent one better --- less/navbar.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/less/navbar.less b/less/navbar.less index dba95e5cd9..bdd71a1b1a 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -74,7 +74,7 @@ #font > .sans-serif(13px, normal, 1); color: @white; color: rgba(255,255,255,.75); - background: #444; + background: #6a6a6a; background: rgba(255,255,255,.3); border: 1px solid #111; @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15); From 1c9db106fadd544d8af93a60c128842f95724f03 Mon Sep 17 00:00:00 2001 From: Pete Hopkins Date: Fri, 27 Jan 2012 16:39:27 -0500 Subject: [PATCH 8/9] Moves buttonBackground to mixins (issue 1292) --- less/buttons.less | 25 ------------------------- less/mixins.less | 23 +++++++++++++++++++++++ 2 files changed, 23 insertions(+), 25 deletions(-) diff --git a/less/buttons.less b/less/buttons.less index 06a7d91bdf..843af6c622 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -35,31 +35,6 @@ } } - -// Mixin for generating button backgrounds -// --------------------------------------- -.buttonBackground(@startColor, @endColor) { - // gradientBar will set the background to a pleasing blend of these, to support IE<=9 - .gradientBar(@startColor, @endColor); - - // in these cases the gradient won't cover the background, so we override - &:hover, &:active, &.active, &.disabled { - background-color: @endColor; - } - - // called out separately because IE8 would ignore otherwise - &[disabled] { - background-color: @endColor; - } - - // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves - &:active, - &.active { - background-color: darken(@endColor, 10%) e("\9"); - } -} - - // Base styles // ----------- diff --git a/less/mixins.less b/less/mixins.less index 745fe33d95..bbbba1e025 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -339,6 +339,29 @@ } +// Mixin for generating button backgrounds +// --------------------------------------- +.buttonBackground(@startColor, @endColor) { + // gradientBar will set the background to a pleasing blend of these, to support IE<=9 + .gradientBar(@startColor, @endColor); + + // in these cases the gradient won't cover the background, so we override + &:hover, &:active, &.active, &.disabled { + background-color: @endColor; + } + + // called out separately because IE8 would ignore otherwise + &[disabled] { + background-color: @endColor; + } + + // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves + &:active, + &.active { + background-color: darken(@endColor, 10%) e("\9"); + } +} + // COMPONENT MIXINS // -------------------------------------------------- From 84b9a1bfb6ff5d1406f5c0393d6556caff6de40c Mon Sep 17 00:00:00 2001 From: Pete Hopkins Date: Fri, 27 Jan 2012 16:39:38 -0500 Subject: [PATCH 9/9] Rebuild css and html --- docs/assets/css/bootstrap.css | 58 ++++++++++++++++++++++++++++++----- docs/base-css.html | 7 +++++ 2 files changed, 57 insertions(+), 8 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index b2284bc164..e36ec0b3cb 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -6,7 +6,7 @@ * http://www.apache.org/licenses/LICENSE-2.0 * * Designed and built with all the love in the world @twitter by @mdo and @fat. - * Date: Fri Jan 27 11:07:13 PST 2012 + * Date: Fri Jan 27 16:39:29 EST 2012 */ article, aside, @@ -814,6 +814,10 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec } .help-inline { display: inline-block; + *display: inline; + /* IE7 inline-block hack */ + + *zoom: 1; margin-bottom: 9px; vertical-align: middle; padding-left: 5px; @@ -1083,6 +1087,10 @@ table .span12 { vertical-align: text-top; width: 14px; height: 14px; + *margin-right: .3em; +} +.icon:last-child { + *margin-left: 0; } .icon.white { background-image: url(../img/glyphicons-halflings-sprite-white.png); @@ -1360,11 +1368,15 @@ table .span12 { .dropdown { position: relative; } +.dropdown .dropdown-toggle { + *margin-bottom: -3px; +} .caret { display: inline-block; width: 0; height: 0; text-indent: -99999px; + *text-indent: 0; vertical-align: top; border-left: 4px solid transparent; border-right: 4px solid transparent; @@ -1376,7 +1388,6 @@ table .span12 { .dropdown .caret { margin-top: 8px; margin-left: 2px; - *margin-top: 7px; } .dropdown:hover .caret, .open.dropdown .caret { opacity: 1; @@ -1385,6 +1396,7 @@ table .span12 { .dropdown-menu { position: absolute; top: 100%; + left: 0; z-index: 1000; float: left; display: none; @@ -1408,7 +1420,6 @@ table .span12 { -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; - zoom: 1; *border-right-width: 2px; *border-bottom-width: 2px; } @@ -1423,6 +1434,8 @@ table .span12 { overflow: hidden; background-color: #e5e5e5; border-bottom: 1px solid #ffffff; + *width: 100%; + *margin: -5px 0 5px; } .dropdown-menu a { display: block; @@ -1438,6 +1451,9 @@ table .span12 { text-decoration: none; background-color: #0088cc; } +.dropdown.open { + *z-index: 1000; +} .dropdown.open .dropdown-toggle { color: #ffffff; background: #ccc; @@ -1742,6 +1758,7 @@ table .span12 { } .tabs-left .tabs .active > a, .tabs-left .tabs .active > a:hover { border-color: #ddd transparent #ddd #ddd; + *border-right-color: #ffffff; } .tabs-right .tabs { float: right; @@ -1759,6 +1776,7 @@ table .span12 { } .tabs-right .tabs .active > a, .tabs-right .tabs .active > a:hover { border-color: #ddd #ddd #ddd transparent; + *border-left-color: #ffffff; } .navbar { overflow: visible; @@ -1826,7 +1844,7 @@ table .span12 { line-height: 1; color: #ffffff; color: rgba(255, 255, 255, 0.75); - background: #444; + background: #6a6a6a; background: rgba(255, 255, 255, 0.3); border: 1px solid #111; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15); @@ -2455,8 +2473,6 @@ table .span12 { .btn { display: inline-block; padding: 4px 10px 4px; - *padding: 2px 10px; - *margin-left: 4px; font-size: 13px; line-height: 18px; color: #333333; @@ -2478,6 +2494,7 @@ table .span12 { -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); cursor: pointer; + *margin-left: .3em; } .btn:first-child { *margin-left: 0; @@ -2525,7 +2542,7 @@ table .span12 { box-shadow: none; } .btn.large { - padding: 9px 14px 9px; + padding: 9px 14px; font-size: 15px; line-height: normal; -webkit-border-radius: 5px; @@ -2536,20 +2553,33 @@ table .span12 { margin-top: 1px; } .btn.small { - padding: 5px 9px 5px; + padding: 5px 9px; font-size: 11px; line-height: 16px; } .btn.small .icon { margin-top: -2px; } +button.btn, input[type=submit].btn { + *padding-top: 2px; + *padding-bottom: 2px; +} button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { padding: 0; border: 0; } +button.btn.large, input[type=submit].btn.large { + *padding-top: 7px; + *padding-bottom: 7px; +} +button.btn.small, input[type=submit].btn.small { + *padding-top: 3px; + *padding-bottom: 3px; +} .btn-group { position: relative; *zoom: 1; + *margin-left: .3em; } .btn-group:before, .btn-group:after { display: table; @@ -2558,11 +2588,18 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { .btn-group:after { clear: both; } +.btn-group:first-child { + *margin-left: 0; +} .btn-group + .btn-group { margin-left: 5px; } .btn-toolbar .btn-group { display: inline-block; + *display: inline; + /* IE7 inline-block hack */ + + *zoom: 1; } .btn-group .btn { position: relative; @@ -2615,6 +2652,11 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { -webkit-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + *padding-top: 5px; + *padding-bottom: 5px; +} +.btn-group.open { + *z-index: 1000; } .btn-group.open .dropdown-menu { display: block; diff --git a/docs/base-css.html b/docs/base-css.html index 9cad9de017..d1399aaffe 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1034,6 +1034,12 @@ +
+ +
+ Some value here +
+
@@ -1491,6 +1497,7 @@
+