// // Buttons // -------------------------------------------------- // Base styles // -------------------------------------------------- // Core .btn { display: inline-block; .ie7-inline-block(); font-weight: 400; padding: 0 8px; margin: 0; height: 29px; min-height: 29px; line-height: 1; vertical-align: bottom; // min-width: 46px; text-align: center; color: @grayDark; // font-size: 11px; font-weight: bold; font-size: @baseFontSize; text-align: center; vertical-align: middle; cursor: pointer; .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, none); 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(@baseBorderRadius); .ie7-restore-left-whitespace(); // Give IE7 some love .box-shadow(none); // Hover/focus state &:hover, &:focus { text-decoration: none; background-position: 0 -15px; // .buttonBackground(darken(@btnBackground, 0.6%), @btnBackgroundHighlight, @grayDark, none); .box-shadow(0 1px 1px rgba(0,0,0,.1)); color: @grayDarken; // border-color: darken(@btnBorder, 0.6%); // transition is only when going to hover/focus, 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-image: none; border-color: darken(@btnBorder, 0.6%); // #gradient > .vertical(#fff,#f8f8f8); outline: 0; .box-shadow(0 1px 2px rgba(0, 0, 0, 0.1) inset); } // Disabled state &.disabled, &[disabled] { cursor: default; background-image: none; .opacity(65); .box-shadow(none); } } a.btn { line-height: 29px; } a.btn-mini { line-height: 19px; } // Button Sizes // -------------------------------------------------- // Large .btn-large { height: 54px; min-height: 54px; padding: @paddingLarge; font-size: @fontSizeLarge; .border-radius(@borderRadiusLarge); } a.btn-large { height: 30px; min-height: 30px; line-height: 30px; } .btn-large [class^="icon-"], .btn-large [class*=" icon-"] { margin-top: 4px; } // Small .btn-small { padding: @paddingSmall; font-size: @fontSizeSmall; .border-radius(@borderRadiusSmall); } .btn-small [class^="icon-"], .btn-small [class*=" icon-"] { margin-top: 0; } .btn-mini [class^="icon-"], .btn-mini [class*=" icon-"] { margin-top: -1px; } // Mini .btn-mini { padding: @paddingMini; width: auto; min-width: 10px; height: 20px; min-height: 20px; font-size: @fontSizeMini; line-height: 20px; .border-radius(@borderRadiusSmall); } // 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); } .btn-primary:hover, .btn-warning:hover, .btn-danger:hover, .btn-success:hover, .btn-info:hover, .btn-inverse:hover { color: @white; } // Set the backgrounds // ------------------------- .btn-primary { .buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight); // &:hover { // .buttonBackground(darken(@btnPrimaryBackground, 0.6%), @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, .btn-link:focus { color: @linkColorHover; text-decoration: underline; background-color: transparent; } .btn-link[disabled]:hover, .btn-link[disabled]:focus { color: @grayDark; text-decoration: none; }