diff options
| author | Gaël Poupard <[email protected]> | 2020-08-04 20:42:55 +0200 |
|---|---|---|
| committer | GitHub <[email protected]> | 2020-08-04 21:42:55 +0300 |
| commit | 9181c84f0f4536aaeea3ec3157271dcc5d7d6e39 (patch) | |
| tree | af8aa27af0259ac90f660bccbd0277334278adb5 | |
| parent | 2c9067516cffb852aa386e49225907da0ff2eda9 (diff) | |
| download | bootstrap-9181c84f0f4536aaeea3ec3157271dcc5d7d6e39.tar.xz bootstrap-9181c84f0f4536aaeea3ec3157271dcc5d7d6e39.zip | |
Ensure to increase contrasts on buttons & colored links hover/active states (#30989)
* feat(buttons): ensure to increase contrasts on hover/active
* Update _buttons.scss
Co-authored-by: XhmikosR <[email protected]>
Co-authored-by: Mark Otto <[email protected]>
| -rw-r--r-- | scss/helpers/_colored-links.scss | 2 | ||||
| -rw-r--r-- | scss/mixins/_buttons.scss | 8 |
2 files changed, 5 insertions, 5 deletions
diff --git a/scss/helpers/_colored-links.scss b/scss/helpers/_colored-links.scss index 4eea8d333..d135194d1 100644 --- a/scss/helpers/_colored-links.scss +++ b/scss/helpers/_colored-links.scss @@ -5,7 +5,7 @@ @if $emphasized-link-hover-darken-percentage != 0 { &:hover, &:focus { - color: darken($value, $emphasized-link-hover-darken-percentage); + color: if(color-contrast($value) == $color-contrast-light, darken($value, $emphasized-link-hover-darken-percentage), lighten($value, $emphasized-link-hover-darken-percentage)); } } } diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss index b72836fad..eeade6a32 100644 --- a/scss/mixins/_buttons.scss +++ b/scss/mixins/_buttons.scss @@ -7,11 +7,11 @@ $background, $border, $color: color-contrast($background), - $hover-background: darken($background, 7.5%), - $hover-border: darken($border, 10%), + $hover-background: if($color == $color-contrast-light, darken($background, 7.5%), lighten($background, 7.5%)), + $hover-border: if($color == $color-contrast-light, darken($border, 10%), lighten($border, 5%)), $hover-color: color-contrast($hover-background), - $active-background: darken($background, 10%), - $active-border: darken($border, 12.5%), + $active-background: if($color == $color-contrast-light, darken($background, 10%), lighten($background, 10%)), + $active-border: if($color == $color-contrast-light, darken($border, 12.5%), lighten($border, 5%)), $active-color: color-contrast($active-background), $disabled-background: $background, $disabled-border: $border, |