mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-26 23:54:23 +01:00
7aa2a52069
Trying to simplify our output here by revamping these selectors. We overcomplicated things by setting hover styles for nearly every state (disabled and active included), and we set them in the wrong order. This commit does the following: - Reorders states so disabled comes before active, thereby removing the need to set disabled-active styles. - Removes all focus and hover styles from disabled states as those will naturally inherit from the default button state. - Renamed `.open` to `.show` to fix dropdown toggle highlighting. - Tweaked some indendation in the Sass.
86 lines
1.9 KiB
SCSS
86 lines
1.9 KiB
SCSS
// Button variants
|
|
//
|
|
// Easily pump out default styles, as well as :hover, :focus, :active,
|
|
// and disabled options for all buttons
|
|
|
|
@mixin button-variant($color, $background, $border) {
|
|
$active-background: darken($background, 10%);
|
|
$active-border: darken($border, 12%);
|
|
|
|
color: $color;
|
|
background-color: $background;
|
|
border-color: $border;
|
|
@include box-shadow($btn-box-shadow);
|
|
|
|
// Hover and focus styles are shared
|
|
@include hover {
|
|
color: $color;
|
|
background-color: $active-background;
|
|
border-color: $active-border;
|
|
}
|
|
&:focus,
|
|
&.focus {
|
|
color: $color;
|
|
background-color: $active-background;
|
|
border-color: $active-border;
|
|
}
|
|
|
|
// Disabled comes first so active can properly restyle
|
|
&.disabled,
|
|
&:disabled {
|
|
background-color: $background;
|
|
border-color: $border;
|
|
}
|
|
|
|
&:active,
|
|
&.active,
|
|
.show > &.dropdown-toggle {
|
|
color: $color;
|
|
background-color: $active-background;
|
|
border-color: $active-border;
|
|
background-image: none; // Remove the gradient for the pressed/active state
|
|
@include box-shadow($btn-active-box-shadow);
|
|
}
|
|
}
|
|
|
|
@mixin button-outline-variant($color, $color-hover: #fff) {
|
|
color: $color;
|
|
background-image: none;
|
|
background-color: transparent;
|
|
border-color: $color;
|
|
|
|
@include hover {
|
|
color: $color-hover;
|
|
background-color: $color;
|
|
border-color: $color;
|
|
}
|
|
|
|
&:focus,
|
|
&.focus {
|
|
color: $color-hover;
|
|
background-color: $color;
|
|
border-color: $color;
|
|
}
|
|
|
|
&.disabled,
|
|
&:disabled {
|
|
color: $color;
|
|
background-color: transparent;
|
|
}
|
|
|
|
&:active,
|
|
&.active,
|
|
.show > &.dropdown-toggle {
|
|
color: $color-hover;
|
|
background-color: $color;
|
|
border-color: $color;
|
|
}
|
|
}
|
|
|
|
// Button sizes
|
|
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
|
|
padding: $padding-y $padding-x;
|
|
font-size: $font-size;
|
|
@include border-radius($border-radius);
|
|
}
|