102 lines
2.3 KiB
SCSS
102 lines
2.3 KiB
SCSS
@import '~bootstrap/scss/mixins';
|
|
|
|
|
|
@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%)
|
|
) {
|
|
color: color-yiq($background);
|
|
@include gradient-bg($background);
|
|
border-color: $border;
|
|
@include box-shadow($btn-box-shadow);
|
|
|
|
@include hover() {
|
|
color: color-yiq($hover-background);
|
|
@include gradient-bg($hover-background);
|
|
border-color: $hover-border;
|
|
}
|
|
|
|
&:focus,
|
|
&.focus {
|
|
color: color-yiq($hover-background);
|
|
@include gradient-bg($hover-background);
|
|
border-color: $hover-border;
|
|
}
|
|
|
|
// Disabled comes first so active can properly restyle
|
|
&.disabled,
|
|
&:disabled {
|
|
color: color-yiq($background);
|
|
background-color: $background;
|
|
border-color: $border;
|
|
}
|
|
|
|
&:not(:disabled):not(.disabled):active,
|
|
&:not(:disabled):not(.disabled).active,
|
|
.show > &.dropdown-toggle {
|
|
color: color-yiq($active-background);
|
|
background-color: $active-background;
|
|
border-color: $active-border;
|
|
|
|
&:focus {
|
|
border-color: $hover-border;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin dot-button-variant(
|
|
$background,
|
|
$border,
|
|
$hover-background: darken($background, 7.5%),
|
|
$hover-border: lighten($border, 5%),
|
|
$active-background: $background,
|
|
$active-border: $border
|
|
) {
|
|
color: color-yiq($background);
|
|
background-color: lighten($background, 15%);
|
|
@if $background == $white {
|
|
border-color: $black;
|
|
border-width: 3px;
|
|
} @else {
|
|
border-color: lighten($border, 15%);
|
|
}
|
|
|
|
&:focus,
|
|
&.focus {
|
|
color: color-yiq($hover-background);
|
|
@if $background == $white {
|
|
border-color: $black;
|
|
} @else {
|
|
border-color: $hover-border;
|
|
}
|
|
}
|
|
|
|
// Disabled comes first so active can properly restyle
|
|
// &.disabled,
|
|
// &:disabled {
|
|
// color: color-yiq($background);
|
|
// background-color: $background;
|
|
// border-color: $border;
|
|
// }
|
|
|
|
&:not(:disabled):not(.disabled):active,
|
|
&:not(:disabled):not(.disabled).active,
|
|
.show > &.dropdown-toggle {
|
|
color: color-yiq($active-background);
|
|
background-color: $active-background;
|
|
@if $background == $white {
|
|
border-color: $black;
|
|
} @else {
|
|
border-color: $active-border;
|
|
|
|
&:focus {
|
|
border-color: $hover-border;
|
|
}
|
|
}
|
|
}
|
|
}
|