libs/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 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 }