GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-11-18 10:37:12 -05:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Adjust box-shadow of EditingArea to make fields look inset

Browse source
This commit is contained in:
Matthias Metelka 2022-08-30 10:06:05 +02:00
parent ec290a23cb
commit bb172edf05
2 changed files with 32 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
sass/_vars.scss
View file

@ -13,19 +13,19 @@ $vars: (
colors: (
canvas: (
default: (
light: color(gray, 1),
dark: color(gray, 7),
light: color(gray, 0),
dark: color(gray, 6),
),
outset: (
light: color(gray, 0),
light: white,
dark: color(gray, 5),
),
inset: (
light: color(gray, 1),
dark: color(gray, 8),
dark: color(gray, 7),
),
overlay: (
light: color(gray, 0),
light: white,
dark: color(gray, 9),
),
),
@ -35,11 +35,11 @@ $vars: (
dark: color(gray, 8),
),
subtle: (
light: color(gray, 2),
light: color(gray, 3),
dark: color(gray, 7),
),
focus: (
light: color(indigo, 6),
light: color(indigo, 5),
dark: color(indigo, 5),
),
),
@ -61,6 +61,16 @@ $vars: (
dark: color(gray, 8),
),
),
shadow: (
default: (
light: color(gray, 3),
dark: color(gray, 8),
),
inset: (
light: color(gray, 2),
dark: color(gray, 7),
),
),
accent: (
card: (
light: color(blue, 5),

28
ts/editor/EditingArea.svelte
View file

@ -190,25 +190,27 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
position: relative;
background: var(--canvas-outset);
border-radius: 5px;
border: 1px solid var(--border-default);
box-shadow: 0px 0px 2px 0px var(--border-default);
transition: box-shadow 80ms cubic-bezier(0.33, 1, 0.68, 1);
/* This pseudo-element is required to display
the inset box-shadow above field contents */
&::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
border-radius: 5px;
border: 1px solid var(--border-subtle);
box-shadow: inset 0 0 1px 1px var(--shadow-inset);
}
&:focus-within {
outline: none;
/* This pseudo-element is required to display
the inset box-shadow above field contents */
&::after {
content: "";
position: absolute;
top: -1px;
right: -1px;
bottom: -1px;
left: -1px;
pointer-events: none;
border-radius: 5px;
box-shadow: inset 0 0 0 2px var(--border-focus);
}
}