git.roojs.org Git - roojs1/blob - scss/bootstrap/_buttons.scss

   1 // stylelint-disable selector-no-qualifying-type
   2
   3 //
   4 // Base styles
   5 //
   6
   7 .btn {
   8   display: inline-block;
   9   font-family: $btn-font-family;
  10   font-weight: $btn-font-weight;
  11   color: $body-color;
  12   text-align: center;
  13   text-decoration: if($link-decoration == none, null, none);
  14   white-space: $btn-white-space;
  15   vertical-align: middle;
  16   user-select: none;
  17   background-color: transparent;
  18   border: $btn-border-width solid transparent;
  19   @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
  20   @include transition($btn-transition);
  21
  22   @include hover() {
  23     color: $body-color;
  24     text-decoration: none;
  25   }
  26
  27   &:focus,
  28   &.focus {
  29     outline: 0;
  30     box-shadow: $btn-focus-box-shadow;
  31   }
  32
  33   // Disabled comes first so active can properly restyle
  34   &.disabled,
  35   &:disabled {
  36     opacity: $btn-disabled-opacity;
  37     @include box-shadow(none);
  38   }
  39
  40   &:not(:disabled):not(.disabled) {
  41     cursor: if($enable-pointer-cursor-for-buttons, pointer, null);
  42
  43     &:active,
  44     &.active {
  45       @include box-shadow($btn-active-box-shadow);
  46
  47       &:focus {
  48         @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
  49       }
  50     }
  51   }
  52 }
  53
  54 // Future-proof disabling of clicks on `<a>` elements
  55 a.btn.disabled,
  56 fieldset:disabled a.btn {
  57   pointer-events: none;
  58 }
  59
  60
  61 //
  62 // Alternate buttons
  63 //
  64
  65 @each $color, $value in $theme-colors {
  66   .btn-#{$color} {
  67     @include button-variant($value, $value);
  68   }
  69 }
  70
  71 @each $color, $value in $theme-colors {
  72   .btn-outline-#{$color} {
  73     @include button-outline-variant($value);
  74   }
  75 }
  76
  77
  78 //
  79 // Link buttons
  80 //
  81
  82 // Make a button look and behave like a link
  83 .btn-link {
  84   font-weight: $font-weight-normal;
  85   color: $link-color;
  86   text-decoration: $link-decoration;
  87
  88   @include hover() {
  89     color: $link-hover-color;
  90     text-decoration: $link-hover-decoration;
  91   }
  92
  93   &:focus,
  94   &.focus {
  95     text-decoration: $link-hover-decoration;
  96   }
  97
  98   &:disabled,
  99   &.disabled {
 100     color: $btn-link-disabled-color;
 101     pointer-events: none;
 102   }
 103
 104   // No need for an active state here
 105 }
 106
 107
 108 //
 109 // Button Sizes
 110 //
 111
 112 .btn-lg {
 113   @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
 114 }
 115
 116 .btn-sm {
 117   @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
 118 }
 119
 120
 121 //
 122 // Block button
 123 //
 124
 125 .btn-block {
 126   display: block;
 127   width: 100%;
 128
 129   // Vertically space out multiple block buttons
 130   + .btn-block {
 131     margin-top: $btn-block-spacing-y;
 132   }
 133 }
 134
 135 // Specificity overrides
 136 input[type="submit"],
 137 input[type="reset"],
 138 input[type="button"] {
 139   &.btn-block {
 140     width: 100%;
 141   }
 142 }