kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

Redo button states

Browse source 
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.
This commit is contained in:
Mark Otto 2016-12-26 14:42:29 -08:00 committed by Mark Otto
parent 150625265b
commit 7aa2a52069
2 changed files with 37 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
scss/_buttons.scss
View file

@ -17,15 +17,12 @@
@include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius);
@include transition($btn-transition);
&,
&:active,
&.active {
&:focus,
&.focus {
@include tab-focus();
}
&:focus,
&.focus {
@include tab-focus();
}
// Share hover and focus styles
@include hover-focus {
text-decoration: none;
}
@ -33,19 +30,20 @@
text-decoration: none;
}
&:active,
&.active {
background-image: none;
outline: 0;
@include box-shadow($btn-active-box-shadow);
}
// Disabled comes first so active can properly restyle
&.disabled,
&:disabled {
cursor: $cursor-disabled;
opacity: .65;
@include box-shadow(none);
}
&:active,
&.active {
background-image: none;
outline: 0;
@include box-shadow($btn-active-box-shadow);
}
}
// Future-proof disabling of clicks on `<a>` elements

78
scss/mixins/_buttons.scss
View file

@ -12,49 +12,34 @@
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;
border-color: $active-border;
}
&:focus,
&.focus {
color: $color;
background-color: $active-background;
border-color: $active-border;
border-color: $active-border;
}
// Disabled comes first so active can properly restyle
&.disabled,
&:disabled {
background-color: $background;
border-color: $border;
}
&:active,
&.active,
.open > &.dropdown-toggle {
.show > &.dropdown-toggle {
color: $color;
background-color: $active-background;
border-color: $active-border;
// Remove the gradient for the pressed/active state
background-image: none;
border-color: $active-border;
background-image: none; // Remove the gradient for the pressed/active state
@include box-shadow($btn-active-box-shadow);
&:hover,
&:focus,
&.focus {
color: $color;
background-color: darken($background, 17%);
border-color: darken($border, 25%);
}
}
&.disabled,
&:disabled {
&:focus,
&.focus {
background-color: $background;
border-color: $border;
}
@include hover {
background-color: $background;
border-color: $border;
}
}
}
@ -67,41 +52,28 @@
@include hover {
color: $color-hover;
background-color: $color;
border-color: $color;
border-color: $color;
}
&:focus,
&.focus {
color: $color-hover;
background-color: $color;
border-color: $color;
}
&:active,
&.active,
.open > &.dropdown-toggle {
color: $color-hover;
background-color: $color;
border-color: $color;
&:hover,
&:focus,
&.focus {
color: $color-hover;
background-color: darken($color, 17%);
border-color: darken($color, 25%);
}
border-color: $color;
}
&.disabled,
&:disabled {
&:focus,
&.focus {
border-color: lighten($color, 20%);
}
@include hover {
border-color: lighten($color, 20%);
}
color: $color;
background-color: transparent;
}
&:active,
&.active,
.show > &.dropdown-toggle {
color: $color-hover;
background-color: $color;
border-color: $color;
}
}