| // BUTTON STYLES |
| // ------------- |
| |
| |
| // Base styles |
| // -------------------------------------------------- |
| |
| // Core |
| .btn { |
| display: inline-block; |
| padding: 4px 10px 4px; |
| margin-bottom: 0; // For input.btn |
| font-size: @baseFontSize; |
| line-height: @baseLineHeight; |
| color: @grayDark; |
| text-align: center; |
| text-shadow: 0 1px 1px rgba(255,255,255,.75); |
| vertical-align: middle; |
| .buttonBackground(@white, darken(@white, 10%)); |
| border: 1px solid #ccc; |
| border-bottom-color: #bbb; |
| .border-radius(4px); |
| @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); |
| .box-shadow(@shadow); |
| cursor: pointer; |
| |
| // Give IE7 some love |
| .reset-filter(); |
| .ie7-restore-left-whitespace(); |
| } |
| |
| // Hover state |
| .btn:hover { |
| color: @grayDark; |
| text-decoration: none; |
| background-color: darken(@white, 10%); |
| 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 |
| .btn:focus { |
| .tab-focus(); |
| } |
| |
| // Active state |
| .btn.active, |
| .btn:active { |
| background-image: none; |
| @shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); |
| .box-shadow(@shadow); |
| background-color: darken(@white, 10%); |
| background-color: darken(@white, 15%) e("\9"); |
| outline: 0; |
| } |
| |
| // Disabled state |
| .btn.disabled, |
| .btn[disabled] { |
| cursor: default; |
| background-image: none; |
| background-color: darken(@white, 10%); |
| .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: 1px; |
| } |
| |
| // Small |
| .btn-small { |
| padding: 5px 9px; |
| font-size: @baseFontSize - 2px; |
| line-height: @baseLineHeight - 2px; |
| } |
| .btn-small [class^="icon-"] { |
| margin-top: -1px; |
| } |
| |
| // Mini |
| .btn-mini { |
| padding: 2px 6px; |
| font-size: @baseFontSize - 2px; |
| line-height: @baseLineHeight - 4px; |
| } |
| |
| |
| // Alternate buttons |
| // -------------------------------------------------- |
| |
| // Set text color |
| // ------------------------- |
| .btn-primary, |
| .btn-primary:hover, |
| .btn-warning, |
| .btn-warning:hover, |
| .btn-danger, |
| .btn-danger:hover, |
| .btn-success, |
| .btn-success:hover, |
| .btn-info, |
| .btn-info:hover, |
| .btn-inverse, |
| .btn-inverse:hover { |
| text-shadow: 0 -1px 0 rgba(0,0,0,.25); |
| color: @white; |
| } |
| // 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-dark.active { |
| color: rgba(255,255,255,.75); |
| } |
| |
| // Set the backgrounds |
| // ------------------------- |
| .btn-primary { |
| .buttonBackground(@primaryButtonBackground, spin(@primaryButtonBackground, 20)); |
| } |
| // Warning appears are orange |
| .btn-warning { |
| .buttonBackground(lighten(@orange, 15%), @orange); |
| } |
| // Danger and error appear as red |
| .btn-danger { |
| .buttonBackground(#ee5f5b, #bd362f); |
| } |
| // Success appears as green |
| .btn-success { |
| .buttonBackground(#62c462, #51a351); |
| } |
| // Info appears as a neutral blue |
| .btn-info { |
| .buttonBackground(#5bc0de, #2f96b4); |
| } |
| // Inverse appears as dark gray |
| .btn-inverse { |
| .buttonBackground(#454545, #262626); |
| } |
| |
| |
| // 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: 2px; |
| *padding-bottom: 2px; |
| &.large { |
| *padding-top: 7px; |
| *padding-bottom: 7px; |
| } |
| &.small { |
| *padding-top: 3px; |
| *padding-bottom: 3px; |
| } |
| } |