123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187 |
- // BUTTON STYLES
- // -------------
- // Base styles
- // --------------------------------------------------
- // Core
- .btn {
- display: inline-block;
- .ie7-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(@btnBackground, @btnBackgroundHighlight);
- border: 1px solid @btnBorder;
- border-bottom-color: darken(@btnBorder, 10%);
- .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
- .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-inverse.active {
- color: rgba(255,255,255,.75);
- }
- // Set the backgrounds
- // -------------------------
- .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: 2px;
- *padding-bottom: 2px;
- &.btn-large {
- *padding-top: 7px;
- *padding-bottom: 7px;
- }
- &.btn-small {
- *padding-top: 3px;
- *padding-bottom: 3px;
- }
- &.btn-mini {
- *padding-top: 1px;
- *padding-bottom: 1px;
- }
- }
|