portal-FE-common/src/styles/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-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     background-image: none;
  44     @include box-shadow($btn-active-box-shadow);
  45
  46     &:focus {
  47       @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
  48     }
  49   }
  50 }
  51
  52 // Future-proof disabling of clicks on `<a>` elements
  53 a.btn.disabled,
  54 fieldset[disabled] a.btn {
  55   pointer-events: none;
  56 }
  57
  58
  59 //
  60 // Alternate buttons
  61 //
  62
  63 @each $color, $value in $theme-colors {
  64   .btn-#{$color} {
  65     @include button-variant($value, $value);
  66   }
  67 }
  68
  69 @each $color, $value in $theme-colors {
  70   .btn-outline-#{$color} {
  71     @if $color == "light" {
  72       @include button-outline-variant($value, $gray-900);
  73     } @else {
  74       @include button-outline-variant($value, $white);
  75     }
  76   }
  77 }
  78
  79
  80 //
  81 // Link buttons
  82 //
  83
  84 // Make a button look and behave like a link
  85 .btn-link {
  86   font-weight: $font-weight-normal;
  87   color: $link-color;
  88   background-color: transparent;
  89
  90   @include hover {
  91     color: $link-hover-color;
  92     text-decoration: $link-hover-decoration;
  93     background-color: transparent;
  94     border-color: transparent;
  95   }
  96
  97   &:focus,
  98   &.focus {
  99     text-decoration: $link-hover-decoration;
 100     border-color: transparent;
 101     box-shadow: none;
 102   }
 103
 104   &:disabled,
 105   &.disabled {
 106     color: $btn-link-disabled-color;
 107   }
 108
 109   // No need for an active state here
 110 }
 111
 112
 113 //
 114 // Button Sizes
 115 //
 116
 117 .btn-lg {
 118   @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
 119 }
 120
 121 .btn-sm {
 122   @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
 123 }
 124
 125
 126 //
 127 // Block button
 128 //
 129
 130 .btn-block {
 131   display: block;
 132   width: 100%;
 133
 134   // Vertically space out multiple block buttons
 135   + .btn-block {
 136     margin-top: $btn-block-spacing-y;
 137   }
 138 }
 139
 140 // Specificity overrides
 141 input[type="submit"],
 142 input[type="reset"],
 143 input[type="button"] {
 144   &.btn-block {
 145     width: 100%;
 146   }
 147 }