src/scss/bootstrap-4.0.0-alpha.6/scss/_buttons.scss

   1 // scss-lint:disable QualifyingElement
   2
   3 //
   4 // Base styles
   5 //
   6
   7 .btn {
   8   display: inline-block;
   9   font-weight: $btn-font-weight;
  10   line-height: $btn-line-height;
  11   text-align: center;
  12   white-space: nowrap;
  13   vertical-align: middle;
  14   user-select: none;
  15   border: $input-btn-border-width solid transparent;
  16   @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius);
  17   @include transition($btn-transition);
  18
  19   // Share hover and focus styles
  20   @include hover-focus {
  21     text-decoration: none;
  22   }
  23   &:focus,
  24   &.focus {
  25     outline: 0;
  26     box-shadow: $btn-focus-box-shadow;
  27   }
  28
  29   // Disabled comes first so active can properly restyle
  30   &.disabled,
  31   &:disabled {
  32     cursor: $cursor-disabled;
  33     opacity: .65;
  34     @include box-shadow(none);
  35   }
  36
  37   &:active,
  38   &.active {
  39     background-image: none;
  40     @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
  41   }
  42 }
  43
  44 // Future-proof disabling of clicks on `<a>` elements
  45 a.btn.disabled,
  46 fieldset[disabled] a.btn {
  47   pointer-events: none;
  48 }
  49
  50
  51 //
  52 // Alternate buttons
  53 //
  54
  55 .btn-primary {
  56   @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
  57 }
  58 .btn-secondary {
  59   @include button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border);
  60 }
  61 .btn-info {
  62   @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
  63 }
  64 .btn-success {
  65   @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
  66 }
  67 .btn-warning {
  68   @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
  69 }
  70 .btn-danger {
  71   @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
  72 }
  73
  74 // Remove all backgrounds
  75 .btn-outline-primary {
  76   @include button-outline-variant($btn-primary-bg);
  77 }
  78 .btn-outline-secondary {
  79   @include button-outline-variant($btn-secondary-border);
  80 }
  81 .btn-outline-info {
  82   @include button-outline-variant($btn-info-bg);
  83 }
  84 .btn-outline-success {
  85   @include button-outline-variant($btn-success-bg);
  86 }
  87 .btn-outline-warning {
  88   @include button-outline-variant($btn-warning-bg);
  89 }
  90 .btn-outline-danger {
  91   @include button-outline-variant($btn-danger-bg);
  92 }
  93
  94
  95 //
  96 // Link buttons
  97 //
  98
  99 // Make a button look and behave like a link
 100 .btn-link {
 101   font-weight: $font-weight-normal;
 102   color: $link-color;
 103   border-radius: 0;
 104
 105   &,
 106   &:active,
 107   &.active,
 108   &:disabled {
 109     background-color: transparent;
 110     @include box-shadow(none);
 111   }
 112   &,
 113   &:focus,
 114   &:active {
 115     border-color: transparent;
 116   }
 117   @include hover {
 118     border-color: transparent;
 119   }
 120   @include hover-focus {
 121     color: $link-hover-color;
 122     text-decoration: $link-hover-decoration;
 123     background-color: transparent;
 124   }
 125   &:disabled {
 126     color: $btn-link-disabled-color;
 127
 128     @include hover-focus {
 129       text-decoration: none;
 130     }
 131   }
 132 }
 133
 134
 135 //
 136 // Button Sizes
 137 //
 138
 139 .btn-lg {
 140   // line-height: ensure even-numbered height of button next to large input
 141   @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-border-radius-lg);
 142 }
 143 .btn-sm {
 144   // line-height: ensure proper height of button next to small input
 145   @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius-sm);
 146 }
 147
 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: $btn-block-spacing-y;
 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 }