EH22/design
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

move glow -filter & -transition to base styles
All checks were successful
/ build (push) Successful in 11s
Details

Browse source
This commit is contained in:
kritzl 2025-02-16 19:20:02 +01:00
commit 36128b16d4
Signed by: kritzl
SSH key fingerprint: SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
6 changed files with 82 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

34
styleguide/assets/style/styleguide.scss
View file

@ -93,8 +93,8 @@ body {
box-sizing: content-box;
&:hover {
filter: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-primary)) drop-shadow(0 0 0.25em var(--color-primary));
transition: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 50ms;
filter: var(--filter-glow-primary);
transition: var(--transition-glow);
}
}
@ -110,18 +110,19 @@ body {
border-radius: 0.5rem;
background-color: var(--color-shade-1);
transition: background-color 150ms;
--local-primary: var(--color-primary);
--local-border: var(--color-shade-1);
&.link-back {
--local-primary: var(--color-secondary);
--local-border: var(--color-shade-4);
background-color: var(--color-background);
}
&.active {
background-color: var(--color-shade-2);
--local-border: var(--color-shade-4);
}
&.link-back, &.active {
a {
border-color: var(--color-shade-4);
}
}
> a {
@ -129,7 +130,7 @@ body {
align-items: center;
gap: 0.5rem;
border-radius: 0.5rem;
border: solid 0.1em var(--local-border);
border: solid 0.1em var(--color-shade-1);
padding: 0.4rem 1rem;
color: var(--color-foreground);
text-decoration: none;
@ -156,14 +157,21 @@ body {
background-color: transparent;
a {
border: solid 0.1em var(--color-white);
border: solid 0.1em var(--color-glow-primary);
background-color: transparent;
filter: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--local-primary)) drop-shadow(0 0 0.25em var(--local-primary));
transition: filter 100ms cubic-bezier(0, 2.01, .99, -0.72) 50ms,
border-color 100ms cubic-bezier(0, 2.01, .99, -0.72) 50ms;
filter: var(--filter-glow-primary);
transition: var(--transition-glow);
&:visited, &:focus, &:active, &:hover {
color: var(--color-white);
color: var(--color-glow-primary);
}
}
&.link-back a {
filter: var(--filter-glow-secondary);
&:visited, &:focus, &:active, &:hover {
color: var(--color-glow-secondary);
}
}
}