GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-24 16:56:36 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Add slight inset shadow to hovered buttons (#2267)

Browse source 
* 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
Show stats Download patch file Download diff file Expand all files Collapse all files

4
sass/_button-mixins.scss
View file

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

8
sass/_vars.scss
View file

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