Add slight inset shadow to hovered buttons (#2267)

* Replace border-with inset shadow on button hover

* Align gradient-end with base color for primary buttons too

to achieve a more natural hover effect.
This commit is contained in:
Matthias Metelka 2022-12-12 06:41:23 +01:00 committed by GitHub
parent ec4c1b1a20
commit 968a14784f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 6 deletions

View file

@ -30,7 +30,6 @@
var(--button-primary-gradient-start) 0%,
var(--button-primary-gradient-end) 100%
);
border-color: var(--button-hover-border);
}
}
} @else {
@ -42,7 +41,8 @@
var(--button-gradient-start) 0%,
var(--button-gradient-end) 100%
);
border-color: var(--button-hover-border);
/* Makes distinguishing hover state in light theme easier */
@include impressed-shadow(0.2);
}
}
}

View file

@ -182,7 +182,7 @@ $vars: (
bg: (
"Background color of primary button",
(
light: palette(blue, 5),
light: color.scale(palette(blue, 6), $lightness: 5%),
dark: color.scale(palette(blue, 7), $saturation: -10%),
),
),
@ -190,15 +190,15 @@ $vars: (
start: (
"Start value of primary button gradient",
(
light: palette(blue, 4),
light: palette(blue, 5),
dark: color.scale(palette(blue, 6), $saturation: -10%),
),
),
end: (
"End value of primary button gradient",
(
light: palette(blue, 6),
dark: color.scale(palette(blue, 8), $saturation: -10%),
light: color.scale(palette(blue, 6), $lightness: 5%),
dark: color.scale(palette(blue, 7), $saturation: -10%),
),
),
),