src/bootstrap/less/buttons.less

   1 //
   2 // Buttons
   3 // --------------------------------------------------
   4
   5
   6 // Base styles
   7 // --------------------------------------------------
   8
   9 // Core
  10 .btn {
  11   display: inline-block;
  12   .ie7-inline-block();
  13   padding: 4px 14px;
  14   margin-bottom: 0; // For input.btn
  15   font-size: @baseFontSize;
  16   line-height: @baseLineHeight;
  17   *line-height: @baseLineHeight;
  18   text-align: center;
  19   vertical-align: middle;
  20   cursor: pointer;
  21   .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
  22   border: 1px solid @btnBorder;
  23   *border: 0; // Remove the border to prevent IE7's black border on input:focus
  24   border-bottom-color: darken(@btnBorder, 10%);
  25   .border-radius(4px);
  26   .ie7-restore-left-whitespace(); // Give IE7 some love
  27   .box-shadow(inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05));
  28
  29   // Hover state
  30   &:hover {
  31     color: @grayDark;
  32     text-decoration: none;
  33     background-color: darken(@white, 10%);
  34     *background-color: darken(@white, 15%); /* Buttons in IE7 don't get borders, so darken on hover */
  35     background-position: 0 -15px;
  36
  37     // transition is only when going to hover, otherwise the background
  38     // behind the gradient (there for IE<=9 fallback) gets mismatched
  39     .transition(background-position .1s linear);
  40   }
  41
  42   // Focus state for keyboard and accessibility
  43   &:focus {
  44     .tab-focus();
  45   }
  46
  47   // Active state
  48   &.active,
  49   &:active {
  50     background-color: darken(@white, 10%);
  51     background-color: darken(@white, 15%) e("\9");
  52     background-image: none;
  53     outline: 0;
  54     .box-shadow(inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05));
  55   }
  56
  57   // Disabled state
  58   &.disabled,
  59   &[disabled] {
  60     cursor: default;
  61     background-color: darken(@white, 10%);
  62     background-image: none;
  63     .opacity(65);
  64     .box-shadow(none);
  65   }
  66
  67 }
  68
  69
  70
  71 // Button Sizes
  72 // --------------------------------------------------
  73
  74 // Large
  75 .btn-large {
  76   padding: 9px 14px;
  77   font-size: @baseFontSize + 2px;
  78   line-height: normal;
  79   .border-radius(5px);
  80 }
  81 .btn-large [class^="icon-"] {
  82   margin-top: 2px;
  83 }
  84
  85 // Small
  86 .btn-small {
  87   padding: 3px 9px;
  88   font-size: @baseFontSize - 2px;
  89   line-height: @baseLineHeight - 2px;
  90 }
  91 .btn-small [class^="icon-"] {
  92   margin-top: 0;
  93 }
  94
  95 // Mini
  96 .btn-mini {
  97   padding: 2px 6px;
  98   font-size: @baseFontSize - 3px;
  99   line-height: @baseLineHeight - 3px;
 100 }
 101
 102
 103 // Block button
 104 // -------------------------
 105
 106 .btn-block {
 107   display: block;
 108   width: 100%;
 109   padding-left: 0;
 110   padding-right: 0;
 111   .box-sizing(border-box);
 112 }
 113
 114 // Vertically space out multiple block buttons
 115 .btn-block + .btn-block {
 116   margin-top: 5px;
 117 }
 118
 119 // Specificity overrides
 120 input[type="submit"],
 121 input[type="reset"],
 122 input[type="button"] {
 123   &.btn-block {
 124     width: 100%;
 125   }
 126 }
 127
 128
 129
 130 // Alternate buttons
 131 // --------------------------------------------------
 132
 133 // Provide *some* extra contrast for those who can get it
 134 .btn-primary.active,
 135 .btn-warning.active,
 136 .btn-danger.active,
 137 .btn-success.active,
 138 .btn-info.active,
 139 .btn-inverse.active {
 140   color: rgba(255,255,255,.75);
 141 }
 142
 143 // Set the backgrounds
 144 // -------------------------
 145 .btn {
 146   // reset here as of 2.0.3 due to Recess property order
 147   border-color: #c5c5c5;
 148   border-color: rgba(0,0,0,.15) rgba(0,0,0,.15) rgba(0,0,0,.25);
 149 }
 150 .btn-primary {
 151   .buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight);
 152 }
 153 // Warning appears are orange
 154 .btn-warning {
 155   .buttonBackground(@btnWarningBackground, @btnWarningBackgroundHighlight);
 156 }
 157 // Danger and error appear as red
 158 .btn-danger {
 159   .buttonBackground(@btnDangerBackground, @btnDangerBackgroundHighlight);
 160 }
 161 // Success appears as green
 162 .btn-success {
 163   .buttonBackground(@btnSuccessBackground, @btnSuccessBackgroundHighlight);
 164 }
 165 // Info appears as a neutral blue
 166 .btn-info {
 167   .buttonBackground(@btnInfoBackground, @btnInfoBackgroundHighlight);
 168 }
 169 // Inverse appears as dark gray
 170 .btn-inverse {
 171   .buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight);
 172 }
 173
 174
 175 // Cross-browser Jank
 176 // --------------------------------------------------
 177
 178 button.btn,
 179 input[type="submit"].btn {
 180
 181   // Firefox 3.6 only I believe
 182   &::-moz-focus-inner {
 183     padding: 0;
 184     border: 0;
 185   }
 186
 187   // IE7 has some default padding on button controls
 188   *padding-top: 3px;
 189   *padding-bottom: 3px;
 190
 191   &.btn-large {
 192     *padding-top: 7px;
 193     *padding-bottom: 7px;
 194   }
 195   &.btn-small {
 196     *padding-top: 3px;
 197     *padding-bottom: 3px;
 198   }
 199   &.btn-mini {
 200     *padding-top: 1px;
 201     *padding-bottom: 1px;
 202   }
 203 }
 204
 205
 206 // Link buttons
 207 // --------------------------------------------------
 208
 209 // Make a button look and behave like a link
 210 .btn-link,
 211 .btn-link:active,
 212 .btn-link[disabled] {
 213   background-color: transparent;
 214   background-image: none;
 215   .box-shadow(none);
 216 }
 217 .btn-link {
 218   border-color: transparent;
 219   cursor: pointer;
 220   color: @linkColor;
 221   .border-radius(0);
 222 }
 223 .btn-link:hover {
 224   color: @linkColorHover;
 225   text-decoration: underline;
 226   background-color: transparent;
 227 }
 228 .btn-link[disabled]:hover {
 229   color: @grayDark;
 230   text-decoration: none;
 231 }