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 <xhmikosr@gmail.com>
Co-authored-by: Mark Otto <markd.otto@gmail.com>
This commit is contained in:
Gaël Poupard 2020-08-04 20:42:55 +02:00 committed by GitHub
parent 2c9067516c
commit 9181c84f0f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 5 additions and 5 deletions

View File

@ -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));
}
}
}

View File

@ -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,