diff options
author | Volpeon <git@volpeon.ink> | 2023-02-15 21:55:30 +0100 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2023-02-15 21:55:30 +0100 |
commit | 72267cf11140ba5a339bd8cd238e2942b545203c (patch) | |
tree | ccf708b6099ec7be38fd611f6d5228de9cb2b2aa /src/scopes/_links.scss | |
parent | Added 125 size for moji (diff) | |
download | iro-design-72267cf11140ba5a339bd8cd238e2942b545203c.tar.gz iro-design-72267cf11140ba5a339bd8cd238e2942b545203c.tar.bz2 iro-design-72267cf11140ba5a339bd8cd238e2942b545203c.zip |
Updated link scope
Diffstat (limited to 'src/scopes/_links.scss')
-rw-r--r-- | src/scopes/_links.scss | 52 |
1 files changed, 52 insertions, 0 deletions
diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss new file mode 100644 index 0000000..4d9e571 --- /dev/null +++ b/src/scopes/_links.scss | |||
@@ -0,0 +1,52 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | ||
2 | @use '../functions' as fn; | ||
3 | |||
4 | @include iro.props-namespace('links') { | ||
5 | @include iro.props-store(( | ||
6 | --colors: ( | ||
7 | --idle: fn.global-color(--accent --link-idle --quiet --fg), | ||
8 | --visited: fn.global-color(--accent --link-visited --quiet --fg), | ||
9 | |||
10 | --key-focus: ( | ||
11 | --border: fn.global-color(--focus --fill), | ||
12 | --shadow: 0 0 0 calc(fn.global-dim(--focus --outline-width) + 2px) fn.global-color(--accent --primary --quiet --obj-lo), | ||
13 | ), | ||
14 | ) | ||
15 | ), 'colors'); | ||
16 | |||
17 | @include iro.bem-scope(iro.props-namespace()) { | ||
18 | :link, | ||
19 | :visited { | ||
20 | border-radius: .5px; | ||
21 | color: currentColor; | ||
22 | text-decoration: underline; | ||
23 | |||
24 | &:hover { | ||
25 | text-decoration: underline; | ||
26 | } | ||
27 | |||
28 | @include iro.bem-at-theme('keyboard') { | ||
29 | &:focus { | ||
30 | box-shadow: 0 0 0 2px fn.color(--key-focus --border), fn.color(--key-focus --shadow); | ||
31 | } | ||
32 | } | ||
33 | } | ||
34 | |||
35 | @include iro.bem-modifier('invisible') { | ||
36 | :link, | ||
37 | :visited { | ||
38 | text-decoration: none; | ||
39 | } | ||
40 | } | ||
41 | |||
42 | @include iro.bem-modifier('colored') { | ||
43 | :link { | ||
44 | color: fn.color(--idle); | ||
45 | } | ||
46 | |||
47 | :visited { | ||
48 | color: fn.color(--visited); | ||
49 | } | ||
50 | } | ||
51 | } | ||
52 | } | ||