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