46 lines
1.1 KiB
SCSS
46 lines
1.1 KiB
SCSS
//
|
|
// Buttons
|
|
// --------------------------------------------------
|
|
|
|
// Hero variant
|
|
@mixin button-hero-variant($background, $hover-background: lighten($background, 10%), $active-background: darken($background, 15%)) {
|
|
$btn-hero-box-shadow: 0 .125rem .75rem rgba($active-background, .25);
|
|
$btn-hero-box-shadow-hover: 0 .375rem .75rem rgba($active-background, .4);
|
|
|
|
text-transform: uppercase;
|
|
letter-spacing: .0625rem;
|
|
font-weight: 700;
|
|
@include button-size($btn-hero-padding-y, $btn-hero-padding-x, $font-size-sm, $btn-hero-border-radius);
|
|
box-shadow: $btn-hero-box-shadow;
|
|
transition: $btn-transition, transform .12s ease-out;
|
|
|
|
&:hover {
|
|
box-shadow: $btn-hero-box-shadow-hover;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.btn-check:focus + &,
|
|
&:focus {
|
|
box-shadow: $btn-hero-box-shadow;
|
|
}
|
|
|
|
.btn-check:checked + &,
|
|
.btn-check:active + &,
|
|
&:active,
|
|
&.active,
|
|
.show > &.dropdown-toggle {
|
|
box-shadow: $btn-hero-box-shadow;
|
|
transform: translateY(0);
|
|
|
|
&:focus {
|
|
box-shadow: $btn-hero-box-shadow;
|
|
}
|
|
}
|
|
|
|
&.disabled,
|
|
&:disabled {
|
|
box-shadow: $btn-hero-box-shadow;
|
|
transform: translateY(0);
|
|
}
|
|
}
|