[Summary view] [Print] [Text view]

   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 12px;
  14    margin-bottom: 0; // For input.btn
  15    font-size: @baseFontSize;
  16    line-height: @baseLineHeight;
  17    text-align: center;
  18    vertical-align: middle;
  19    cursor: pointer;
  20    .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
  21    border: 1px solid @btnBorder;
  22    *border: 0; // Remove the border to prevent IE7's black border on input:focus
  23    border-bottom-color: darken(@btnBorder, 10%);
  24    .border-radius(@baseBorderRadius);
  25    .ie7-restore-left-whitespace(); // Give IE7 some love
  26    .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
  27  
  28    // Hover/focus state
  29    &:hover,
  30    &:focus {
  31      color: @grayDark;
  32      text-decoration: none;
  33      background-position: 0 -15px;
  34  
  35      // transition is only when going to hover/focus, otherwise the background
  36      // behind the gradient (there for IE<=9 fallback) gets mismatched
  37      .transition(background-position .1s linear);
  38    }
  39  
  40    // Focus state for keyboard and accessibility
  41    &:focus {
  42      .tab-focus();
  43    }
  44  
  45    // Active state
  46    &.active,
  47    &:active {
  48      background-image: none;
  49      outline: 0;
  50      .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
  51    }
  52  
  53    // Disabled state
  54    &.disabled,
  55    &[disabled] {
  56      cursor: default;
  57      background-image: none;
  58      .opacity(65);
  59      .box-shadow(none);
  60    }
  61  
  62  }
  63  
  64  
  65  
  66  // Button Sizes
  67  // --------------------------------------------------
  68  
  69  // Large
  70  .btn-large {
  71    padding: @paddingLarge;
  72    font-size: @fontSizeLarge;
  73    .border-radius(@borderRadiusLarge);
  74  }
  75  .btn-large [class^="icon-"],
  76  .btn-large [class*=" icon-"] {
  77    margin-top: 4px;
  78  }
  79  
  80  // Small
  81  .btn-small {
  82    padding: @paddingSmall;
  83    font-size: @fontSizeSmall;
  84    .border-radius(@borderRadiusSmall);
  85  }
  86  .btn-small [class^="icon-"],
  87  .btn-small [class*=" icon-"] {
  88    margin-top: 0;
  89  }
  90  .btn-mini [class^="icon-"],
  91  .btn-mini [class*=" icon-"] {
  92    margin-top: -1px;
  93  }
  94  
  95  // Mini
  96  .btn-mini {
  97    padding: @paddingMini;
  98    font-size: @fontSizeMini;
  99    .border-radius(@borderRadiusSmall);
 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-primary {
 146    .buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight);
 147  }
 148  // Warning appears are orange
 149  .btn-warning {
 150    .buttonBackground(@btnWarningBackground, @btnWarningBackgroundHighlight);
 151  }
 152  // Danger and error appear as red
 153  .btn-danger {
 154    .buttonBackground(@btnDangerBackground, @btnDangerBackgroundHighlight);
 155  }
 156  // Success appears as green
 157  .btn-success {
 158    .buttonBackground(@btnSuccessBackground, @btnSuccessBackgroundHighlight);
 159  }
 160  // Info appears as a neutral blue
 161  .btn-info {
 162    .buttonBackground(@btnInfoBackground, @btnInfoBackgroundHighlight);
 163  }
 164  // Inverse appears as dark gray
 165  .btn-inverse {
 166    .buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight);
 167  }
 168  
 169  
 170  // Cross-browser Jank
 171  // --------------------------------------------------
 172  
 173  button.btn,
 174  input[type="submit"].btn {
 175  
 176    // Firefox 3.6 only I believe
 177    &::-moz-focus-inner {
 178      padding: 0;
 179      border: 0;
 180    }
 181  
 182    // IE7 has some default padding on button controls
 183    *padding-top: 3px;
 184    *padding-bottom: 3px;
 185  
 186    &.btn-large {
 187      *padding-top: 7px;
 188      *padding-bottom: 7px;
 189    }
 190    &.btn-small {
 191      *padding-top: 3px;
 192      *padding-bottom: 3px;
 193    }
 194    &.btn-mini {
 195      *padding-top: 1px;
 196      *padding-bottom: 1px;
 197    }
 198  }
 199  
 200  
 201  // Link buttons
 202  // --------------------------------------------------
 203  
 204  // Make a button look and behave like a link
 205  .btn-link,
 206  .btn-link:active,
 207  .btn-link[disabled] {
 208    background-color: transparent;
 209    background-image: none;
 210    .box-shadow(none);
 211  }
 212  .btn-link {
 213    border-color: transparent;
 214    cursor: pointer;
 215    color: @linkColor;
 216    .border-radius(0);
 217  }
 218  .btn-link:hover,
 219  .btn-link:focus {
 220    color: @linkColorHover;
 221    text-decoration: underline;
 222    background-color: transparent;
 223  }
 224  .btn-link[disabled]:hover,
 225  .btn-link[disabled]:focus {
 226    color: @grayDark;
 227    text-decoration: none;
 228  }