tools/side_chain_tool/web/node_modules/bootstrap/scss/_buttons.scss

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