0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 16:54:24 +01:00

Cleans up IE7 inline margins for buttons and adds them for sprites, also fixes button padding for large/small sizes

This commit is contained in:
Pete Hopkins 2012-01-27 14:17:06 -05:00
parent 43f1a42f7f
commit 347a15b69a
3 changed files with 40 additions and 10 deletions

View File

@ -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;
}
}

View File

@ -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) {

View File

@ -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);