tools/side_chain_tool/web/node_modules/bootstrap/scss/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     color: color-yiq($background);
  32     background-color: $background;
  33     border-color: $border;
  34   }
  35
  36   &:not(:disabled):not(.disabled):active,
  37   &:not(:disabled):not(.disabled).active,
  38   .show > &.dropdown-toggle {
  39     color: color-yiq($active-background);
  40     background-color: $active-background;
  41     @if $enable-gradients {
  42       background-image: none; // Remove the gradient for the pressed/active state
  43     }
  44     border-color: $active-border;
  45
  46     &:focus {
  47       // Avoid using mixin so we can pass custom focus shadow properly
  48       @if $enable-shadows {
  49         box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
  50       } @else {
  51         box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
  52       }
  53     }
  54   }
  55 }
  56
  57 @mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
  58   color: $color;
  59   background-color: transparent;
  60   background-image: none;
  61   border-color: $color;
  62
  63   &:hover {
  64     color: $color-hover;
  65     background-color: $active-background;
  66     border-color: $active-border;
  67   }
  68
  69   &:focus,
  70   &.focus {
  71     box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
  72   }
  73
  74   &.disabled,
  75   &:disabled {
  76     color: $color;
  77     background-color: transparent;
  78   }
  79
  80   &:not(:disabled):not(.disabled):active,
  81   &:not(:disabled):not(.disabled).active,
  82   .show > &.dropdown-toggle {
  83     color: color-yiq($active-background);
  84     background-color: $active-background;
  85     border-color: $active-border;
  86
  87     &:focus {
  88       // Avoid using mixin so we can pass custom focus shadow properly
  89       @if $enable-shadows and $btn-active-box-shadow != none {
  90         box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5);
  91       } @else {
  92         box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
  93       }
  94     }
  95   }
  96 }
  97
  98 // Button sizes
  99 @mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
 100   padding: $padding-y $padding-x;
 101   font-size: $font-size;
 102   line-height: $line-height;
 103   // Manually declare to provide an override to the browser default
 104   @if $enable-rounded {
 105     border-radius: $border-radius;
 106   } @else {
 107     border-radius: 0;
 108   }
 109 }