Merge branch 'ie_7_components' of https://github.com/phopkins/bootstrap into phopkins-ie_7_components
Conflicts: docs/assets/css/bootstrap.css
This commit is contained in:
Mark Otto
commit
d9759abeeb
|
|
@ -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 16:25:59 PST 2012
|
||||
* Date: Fri Jan 27 16:35:26 PST 2012
|
||||
*/
|
||||
article,
|
||||
aside,
|
||||
|
|
@ -822,6 +822,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;
|
||||
|
|
@ -1091,6 +1095,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-white.png);
|
||||
|
|
@ -1458,11 +1466,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;
|
||||
|
|
@ -1474,7 +1486,6 @@ table .span12 {
|
|||
.dropdown .caret {
|
||||
margin-top: 8px;
|
||||
margin-left: 2px;
|
||||
*margin-top: 7px;
|
||||
}
|
||||
.dropdown:hover .caret, .open.dropdown .caret {
|
||||
opacity: 1;
|
||||
|
|
@ -1483,6 +1494,7 @@ table .span12 {
|
|||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
float: left;
|
||||
display: none;
|
||||
|
|
@ -1506,7 +1518,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;
|
||||
}
|
||||
|
|
@ -1521,6 +1532,8 @@ table .span12 {
|
|||
overflow: hidden;
|
||||
background-color: #e5e5e5;
|
||||
border-bottom: 1px solid #ffffff;
|
||||
*width: 100%;
|
||||
*margin: -5px 0 5px;
|
||||
}
|
||||
.dropdown-menu a {
|
||||
display: block;
|
||||
|
|
@ -1536,6 +1549,9 @@ table .span12 {
|
|||
text-decoration: none;
|
||||
background-color: #0088cc;
|
||||
}
|
||||
.dropdown.open {
|
||||
*z-index: 1000;
|
||||
}
|
||||
.dropdown.open .dropdown-toggle {
|
||||
color: #ffffff;
|
||||
background: #ccc;
|
||||
|
|
@ -1840,6 +1856,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;
|
||||
|
|
@ -1857,6 +1874,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;
|
||||
|
|
@ -1926,7 +1944,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);
|
||||
|
|
@ -2555,8 +2573,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;
|
||||
|
|
@ -2579,6 +2595,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;
|
||||
|
|
@ -2626,7 +2643,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;
|
||||
|
|
@ -2637,20 +2654,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;
|
||||
|
|
@ -2659,11 +2689,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;
|
||||
|
|
@ -2716,6 +2753,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;
|
||||
|
|
|
|||
|
|
@ -1034,6 +1034,12 @@
|
|||
<input class="input-xlarge focused" id="focusedInput" type="text" value="This is focused…">
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label class="control-label">Uneditable input</label>
|
||||
<div class="controls">
|
||||
<span class="input-xlarge uneditable-input">Some value here</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="disabledInput">Disabled input</label>
|
||||
<div class="controls">
|
||||
|
|
@ -1530,6 +1536,7 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- Footer
|
||||
================================================== -->
|
||||
<footer class="footer">
|
||||
|
|
|
|||
|
|
@ -969,6 +969,12 @@
|
|||
<input class="input-xlarge focused" id="focusedInput" type="text" value="{{_i}}This is focused…{{/i}}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label class="control-label">Uneditable input</label>
|
||||
<div class="controls">
|
||||
<span class="input-xlarge uneditable-input">Some value here</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-group">
|
||||
<label class="control-label" for="disabledInput">{{_i}}Disabled input{{/i}}</label>
|
||||
<div class="controls">
|
||||
|
|
@ -1463,4 +1469,4 @@
|
|||
</div> <!-- /well -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
.btn-group {
|
||||
position: relative;
|
||||
.clearfix(); // clears the floated buttons
|
||||
.ie7-restore-left-whitespace;
|
||||
}
|
||||
|
||||
// Space out series of button groups
|
||||
|
|
@ -17,6 +18,7 @@
|
|||
.btn-toolbar {
|
||||
.btn-group {
|
||||
display: inline-block;
|
||||
.ie7-inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -83,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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
// -----------
|
||||
|
||||
|
|
@ -67,13 +42,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 {
|
||||
// ...but not before the first button
|
||||
*margin-left: 0;
|
||||
}
|
||||
font-size: @baseFontSize;
|
||||
line-height: @baseLineHeight;
|
||||
color: @grayDark;
|
||||
|
|
@ -87,6 +55,8 @@
|
|||
.box-shadow(@shadow);
|
||||
cursor: pointer;
|
||||
|
||||
.ie7-restore-left-whitespace;
|
||||
|
||||
&:hover {
|
||||
color: @grayDark;
|
||||
text-decoration: none;
|
||||
|
|
@ -131,7 +101,7 @@
|
|||
|
||||
// Button Sizes
|
||||
&.large {
|
||||
padding: 9px 14px 9px;
|
||||
padding: 9px 14px;
|
||||
font-size: @baseFontSize + 2px;
|
||||
line-height: normal;
|
||||
.border-radius(5px);
|
||||
|
|
@ -140,7 +110,7 @@
|
|||
margin-top: 1px;
|
||||
}
|
||||
&.small {
|
||||
padding: 5px 9px 5px;
|
||||
padding: 5px 9px;
|
||||
font-size: @baseFontSize - 2px;
|
||||
line-height: @baseLineHeight - 2px;
|
||||
}
|
||||
|
|
@ -156,4 +126,16 @@ input[type=submit].btn {
|
|||
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
@ -317,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
|
||||
// --------------------------------------------------
|
||||
|
|
|
|||
|
|
@ -76,7 +76,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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,6 +21,8 @@
|
|||
vertical-align: text-top;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
|
||||
.ie7-restore-right-whitespace;
|
||||
}
|
||||
.icon.white {
|
||||
background-image: url(../img/glyphicons-halflings-white.png);
|
||||
|
|
|
|||
Loading…
Reference in New Issue