portal-FE-common/src/styles/bootstrap/mixins/_buttons.scss

   1 // Button variants
   2 //
   3 // Easily pump out default styles, as well as :hover, :focus, :active,
   4 // and disabled options for all buttons
   5
   6 @mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {
   7   color: color-yiq($background);
   8   @include gradient-bg($background);
   9   border-color: $border;
  10   @include box-shadow($btn-box-shadow);
  11
  12   @include hover {
  13     color: color-yiq($hover-background);
  14     @include gradient-bg($hover-background);
  15     border-color: $hover-border;
  16   }
  17
  18   &:focus,
  19   &.focus {
  20     // Avoid using mixin so we can pass custom focus shadow properly
  21     @if $enable-shadows {
  22       box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
  23     } @else {
  24       box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
  25     }
  26   }
  27
  28   // Disabled comes first so active can properly restyle
  29   &.disabled,
  30   &:disabled {
  31     background-color: $background;
  32     border-color: $border;
  33   }
  34
  35   &:not([disabled]):not(.disabled):active,
  36   &:not([disabled]):not(.disabled).active,
  37   .show > &.dropdown-toggle {
  38     color: color-yiq($active-background);
  39     background-color: $active-background;
  40     @if $enable-gradients {
  41       background-image: none; // Remove the gradient for the pressed/active state
  42     }
  43     border-color: $active-border;
  44
  45     &:focus {
  46       // Avoid using mixin so we can pass custom focus shadow properly
  47       @if $enable-shadows {
  48         box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
  49       } @else {
  50         box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
  51       }
  52     }
  53   }
  54 }
  55
  56 @mixin button-outline-variant($color, $color-hover: #fff, $active-background: $color, $active-border: $color) {
  57   color: $color;
  58   background-color: transparent;
  59   background-image: none;
  60   border-color: $color;
  61
  62   &:hover {
  63     color: color-yiq($color);
  64     background-color: $active-background;
  65     border-color: $active-border;
  66   }
  67
  68   &:focus,
  69   &.focus {
  70     box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
  71   }
  72
  73   &.disabled,
  74   &:disabled {
  75     color: $color;
  76     background-color: transparent;
  77   }
  78
  79   &:not([disabled]):not(.disabled):active,
  80   &:not([disabled]):not(.disabled).active,
  81   .show > &.dropdown-toggle {
  82     color: color-yiq($color-hover);
  83     background-color: $active-background;
  84     border-color: $active-border;
  85     // Avoid using mixin so we can pass custom focus shadow properly
  86     box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
  87   }
  88 }
  89
  90 // Button sizes
  91 @mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
  92   padding: $padding-y $padding-x;
  93   font-size: $font-size;
  94   line-height: $line-height;
  95   // Manually declare to provide an override to the browser default
  96   @if $enable-rounded {
  97     border-radius: $border-radius;
  98   } @else {
  99     border-radius: 0;
 100   }
 101 }