// // Buttons // -------------------------------------------------- // Base styles // -------------------------------------------------- // Core .btn { display: inline-block; .ie7-inline-block(); padding: 4px 14px; margin-bottom: 0; // For input.btn font-size: @baseFontSize; line-height: @baseLineHeight; *line-height: @baseLineHeight; text-align: center; vertical-align: middle; cursor: pointer; .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%); .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 &: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)); } // Disabled state &.disabled, &[disabled] { cursor: default; background-color: darken(@white, 10%); background-image: none; .opacity(65); .box-shadow(none); } } // Button Sizes // -------------------------------------------------- // Large .btn-large { padding: 9px 14px; font-size: @baseFontSize + 2px; line-height: normal; .border-radius(5px); } .btn-large [class^="icon-"] { margin-top: 2px; } // Small .btn-small { padding: 3px 9px; font-size: @baseFontSize - 2px; line-height: @baseLineHeight - 2px; } .btn-small [class^="icon-"] { margin-top: 0; } // Mini .btn-mini { padding: 2px 6px; font-size: @baseFontSize - 3px; line-height: @baseLineHeight - 3px; } // Block button // ------------------------- .btn-block { display: block; width: 100%; padding-left: 0; padding-right: 0; .box-sizing(border-box); } // Vertically space out multiple block buttons .btn-block + .btn-block { margin-top: 5px; } // Specificity overrides input[type="submit"], input[type="reset"], input[type="button"] { &.btn-block { width: 100%; } } // Alternate buttons // -------------------------------------------------- // Provide *some* extra contrast for those who can get it .btn-primary.active, .btn-warning.active, .btn-danger.active, .btn-success.active, .btn-info.active, .btn-inverse.active { color: rgba(255,255,255,.75); } // Set the backgrounds // ------------------------- .btn { // reset here as of 2.0.3 due to Recess property order border-color: #c5c5c5; border-color: rgba(0,0,0,.15) rgba(0,0,0,.15) rgba(0,0,0,.25); } .btn-primary { .buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight); } // Warning appears are orange .btn-warning { .buttonBackground(@btnWarningBackground, @btnWarningBackgroundHighlight); } // Danger and error appear as red .btn-danger { .buttonBackground(@btnDangerBackground, @btnDangerBackgroundHighlight); } // Success appears as green .btn-success { .buttonBackground(@btnSuccessBackground, @btnSuccessBackgroundHighlight); } // Info appears as a neutral blue .btn-info { .buttonBackground(@btnInfoBackground, @btnInfoBackgroundHighlight); } // Inverse appears as dark gray .btn-inverse { .buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight); } // Cross-browser Jank // -------------------------------------------------- button.btn, input[type="submit"].btn { // Firefox 3.6 only I believe &::-moz-focus-inner { padding: 0; border: 0; } // IE7 has some default padding on button controls *padding-top: 3px; *padding-bottom: 3px; &.btn-large { *padding-top: 7px; *padding-bottom: 7px; } &.btn-small { *padding-top: 3px; *padding-bottom: 3px; } &.btn-mini { *padding-top: 1px; *padding-bottom: 1px; } } // Link buttons // -------------------------------------------------- // Make a button look and behave like a link .btn-link, .btn-link:active, .btn-link[disabled] { background-color: transparent; background-image: none; .box-shadow(none); } .btn-link { border-color: transparent; cursor: pointer; color: @linkColor; .border-radius(0); } .btn-link:hover { color: @linkColorHover; text-decoration: underline; background-color: transparent; } .btn-link[disabled]:hover { color: @grayDark; text-decoration: none; }