// Button variants // // Easily pump out default styles, as well as :hover, :focus, :active, // and disabled options for all buttons // scss-docs-start btn-variant-mixin @mixin button-variant( $background, $border, $color: color-contrast($background), $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)), $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)), $hover-color: color-contrast($hover-background), $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)), $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)), $active-color: color-contrast($active-background), $disabled-background: $background, $disabled-border: $border, $disabled-color: color-contrast($disabled-background) ) { color: $color; @include gradient-bg($background); border-color: $border; @include box-shadow($btn-box-shadow); &:hover { color: $hover-color; @include gradient-bg($hover-background); border-color: $hover-border; } .btn-check:focus + &, &:focus { color: $hover-color; @include gradient-bg($hover-background); border-color: $hover-border; @if $enable-shadows { @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5)); } @else { // Avoid using mixin so we can pass custom focus shadow properly box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5); } } .btn-check:checked + &, .btn-check:active + &, &:active, &.active, .show > &.dropdown-toggle { color: $active-color; background-color: $active-background; // Remove CSS gradients if they're enabled background-image: if($enable-gradients, none, null); border-color: $active-border; &:focus { @if $enable-shadows { @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5)); } @else { // Avoid using mixin so we can pass custom focus shadow properly box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5); } } } &:disabled, &.disabled { color: $disabled-color; background-color: $disabled-background; // Remove CSS gradients if they're enabled background-image: if($enable-gradients, none, null); border-color: $disabled-border; } } // scss-docs-end btn-variant-mixin // scss-docs-start btn-outline-variant-mixin @mixin button-outline-variant( $color, $color-hover: color-contrast($color), $active-background: $color, $active-border: $color, $active-color: color-contrast($active-background) ) { color: $color; border-color: $color; &:hover { color: $color-hover; background-color: $active-background; border-color: $active-border; } .btn-check:focus + &, &:focus { box-shadow: 0 0 0 $btn-focus-width rgba($color, .5); } .btn-check:checked + &, .btn-check:active + &, &:active, &.active, &.dropdown-toggle.show { color: $active-color; background-color: $active-background; border-color: $active-border; &:focus { @if $enable-shadows { @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5)); } @else { // Avoid using mixin so we can pass custom focus shadow properly box-shadow: 0 0 0 $btn-focus-width rgba($color, .5); } } } &:disabled, &.disabled { color: $color; background-color: transparent; } } // scss-docs-end btn-outline-variant-mixin // scss-docs-start btn-size-mixin @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) { padding: $padding-y $padding-x; @include font-size($font-size); // Manually declare to provide an override to the browser default @include border-radius($border-radius, 0); } // scss-docs-end btn-size-mixin