123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228 |
- //
- // Buttons
- // --------------------------------------------------
- // Base styles
- // --------------------------------------------------
- // Core
- .btn {
- display: inline-block;
- .ie7-inline-block();
- padding: 4px 12px;
- margin-bottom: 0; // For input.btn
- font-size: @baseFontSize;
- 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(@baseBorderRadius);
- .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/focus state
- &:hover,
- &:focus {
- color: @grayDark;
- text-decoration: none;
- background-position: 0 -15px;
- // 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;
- 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-image: none;
- .opacity(65);
- .box-shadow(none);
- }
- }
- // Button Sizes
- // --------------------------------------------------
- // Large
- .btn-large {
- padding: @paddingLarge;
- font-size: @fontSizeLarge;
- .border-radius(@borderRadiusLarge);
- }
- .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;
- font-size: @fontSizeMini;
- .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);
- }
- // 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: 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;
- }
|