resources/scss/bootstrap/_buttons.scss

   1 //
   2 // Buttons
   3 // --------------------------------------------------
   4
   5 // Base styles
   6 // --------------------------------------------------
   7
   8 .btn {
   9   display: inline-block;
  10   margin-bottom: 0; // For input.btn
  11   font-weight: $btn-font-weight;
  12   text-align: center;
  13   vertical-align: middle;
  14   touch-action: manipulation;
  15   cursor: pointer;
  16   background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
  17   border: 1px solid transparent;
  18   white-space: nowrap;
  19   @include button-size($padding-base-vertical, $padding-base-horizontal, $font-size-base, $line-height-base, $btn-border-radius-base);
  20   @include user-select(none);
  21
  22   &,
  23   &:active,
  24   &.active {
  25         &:focus,
  26         &.focus {
  27           @include tab-focus;
  28         }
  29   }
  30
  31   &:hover,
  32   &:focus,
  33   &.focus {
  34         color: $btn-default-color;
  35         text-decoration: none;
  36   }
  37
  38   &:active,
  39   &.active {
  40         outline: 0;
  41         background-image: none;
  42         @include box-shadow(inset 0 3px 5px rgba(0, 0, 0, .125));
  43   }
  44
  45   &.disabled,
  46   &[disabled],
  47   fieldset[disabled] & {
  48         cursor: $cursor-disabled;
  49         @include opacity(.65);
  50         @include box-shadow(none);
  51   }
  52
  53   // [converter] extracted a& to a.btn
  54 }
  55
  56 a.btn {
  57   &.disabled,
  58   fieldset[disabled] & {
  59         pointer-events: none; // Future-proof disabling of clicks on `<a>` elements
  60   }
  61 }
  62
  63 // Alternate buttons
  64 // --------------------------------------------------
  65
  66 .btn-default {
  67   @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
  68 }
  69
  70 .btn-primary {
  71   @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
  72 }
  73
  74 // Success appears as green
  75 .btn-success {
  76   @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
  77 }
  78
  79 // Info appears as blue-green
  80 .btn-info {
  81   @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
  82 }
  83
  84 // Warning appears as orange
  85 .btn-warning {
  86   @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
  87 }
  88
  89 // Danger and error appear as red
  90 .btn-danger {
  91   @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
  92 }
  93
  94 // Link buttons
  95 // -------------------------
  96
  97 // Make a button look and behave like a link
  98 .btn-link {
  99   color: $link-color;
 100   font-weight: normal;
 101   border-radius: 0;
 102
 103   &,
 104   &:active,
 105   &.active,
 106   &[disabled],
 107   fieldset[disabled] & {
 108         background-color: transparent;
 109         @include box-shadow(none);
 110   }
 111   &,
 112   &:hover,
 113   &:focus,
 114   &:active {
 115         border-color: transparent;
 116   }
 117   &:hover,
 118   &:focus {
 119         color: $link-hover-color;
 120         text-decoration: $link-hover-decoration;
 121         background-color: transparent;
 122   }
 123   &[disabled],
 124   fieldset[disabled] & {
 125         &:hover,
 126         &:focus {
 127           color: $btn-link-disabled-color;
 128           text-decoration: none;
 129         }
 130   }
 131 }
 132
 133 // Button Sizes
 134 // --------------------------------------------------
 135
 136 .btn-lg {
 137   // line-height: ensure even-numbered height of button next to large input
 138   @include button-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $btn-border-radius-large);
 139 }
 140
 141 .btn-sm {
 142   // line-height: ensure proper height of button next to small input
 143   @include button-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $btn-border-radius-small);
 144 }
 145
 146 .btn-xs {
 147   @include button-size($padding-xs-vertical, $padding-xs-horizontal, $font-size-small, $line-height-small, $btn-border-radius-small);
 148 }
 149
 150 // Block button
 151 // --------------------------------------------------
 152
 153 .btn-block {
 154   display: block;
 155   width: 100%;
 156 }
 157
 158 // Vertically space out multiple block buttons
 159 .btn-block + .btn-block {
 160   margin-top: 5px;
 161 }
 162
 163 // Specificity overrides
 164 input[type="submit"],
 165 input[type="reset"],
 166 input[type="button"] {
 167   &.btn-block {
 168         width: 100%;
 169   }
 170 }