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