resources/tools/dash/app/pal/static/sass/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 // scss-docs-start btn-variant-mixin
   7 @mixin button-variant(
   8   $background,
   9   $border,
  10   $color: color-contrast($background),
  11   $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
  12   $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
  13   $hover-color: color-contrast($hover-background),
  14   $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
  15   $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
  16   $active-color: color-contrast($active-background),
  17   $disabled-background: $background,
  18   $disabled-border: $border,
  19   $disabled-color: color-contrast($disabled-background)
  20 ) {
  21   --#{$prefix}btn-color: #{$color};
  22   --#{$prefix}btn-bg: #{$background};
  23   --#{$prefix}btn-border-color: #{$border};
  24   --#{$prefix}btn-hover-color: #{$hover-color};
  25   --#{$prefix}btn-hover-bg: #{$hover-background};
  26   --#{$prefix}btn-hover-border-color: #{$hover-border};
  27   --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
  28   --#{$prefix}btn-active-color: #{$active-color};
  29   --#{$prefix}btn-active-bg: #{$active-background};
  30   --#{$prefix}btn-active-border-color: #{$active-border};
  31   --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  32   --#{$prefix}btn-disabled-color: #{$disabled-color};
  33   --#{$prefix}btn-disabled-bg: #{$disabled-background};
  34   --#{$prefix}btn-disabled-border-color: #{$disabled-border};
  35 }
  36 // scss-docs-end btn-variant-mixin
  37
  38 // scss-docs-start btn-outline-variant-mixin
  39 @mixin button-outline-variant(
  40   $color,
  41   $color-hover: color-contrast($color),
  42   $active-background: $color,
  43   $active-border: $color,
  44   $active-color: color-contrast($active-background)
  45 ) {
  46   --#{$prefix}btn-color: #{$color};
  47   --#{$prefix}btn-border-color: #{$color};
  48   --#{$prefix}btn-hover-color: #{$color-hover};
  49   --#{$prefix}btn-hover-bg: #{$active-background};
  50   --#{$prefix}btn-hover-border-color: #{$active-border};
  51   --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
  52   --#{$prefix}btn-active-color: #{$active-color};
  53   --#{$prefix}btn-active-bg: #{$active-background};
  54   --#{$prefix}btn-active-border-color: #{$active-border};
  55   --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  56   --#{$prefix}btn-disabled-color: #{$color};
  57   --#{$prefix}btn-disabled-bg: transparent;
  58   --#{$prefix}btn-disabled-border-color: #{$color};
  59   --#{$prefix}gradient: none;
  60 }
  61 // scss-docs-end btn-outline-variant-mixin
  62
  63 // scss-docs-start btn-size-mixin
  64 @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
  65   --#{$prefix}btn-padding-y: #{$padding-y};
  66   --#{$prefix}btn-padding-x: #{$padding-x};
  67   @include rfs($font-size, --#{$prefix}btn-font-size);
  68   --#{$prefix}btn-border-radius: #{$border-radius};
  69 }
  70 // scss-docs-end btn-size-mixin