diff options
Diffstat (limited to 'src/scopes')
-rw-r--r-- | src/scopes/_invisible-links.scss | 32 | ||||
-rw-r--r-- | src/scopes/_links.scss (renamed from src/scopes/_colored-links.scss) | 36 |
2 files changed, 25 insertions, 43 deletions
diff --git a/src/scopes/_invisible-links.scss b/src/scopes/_invisible-links.scss deleted file mode 100644 index 32e8e7c..0000000 --- a/src/scopes/_invisible-links.scss +++ /dev/null | |||
@@ -1,32 +0,0 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | ||
2 | @use '../functions' as fn; | ||
3 | |||
4 | @include iro.props-namespace('invisible-links') { | ||
5 | @include iro.props-store(( | ||
6 | --colors: ( | ||
7 | --key-focus: ( | ||
8 | --border: fn.global-color(--focus --fill), | ||
9 | --shadow: 0 0 0 calc(fn.global-dim(--focus --outline-width) + 2px) fn.global-color(--accent --primary --quiet --bg), | ||
10 | ), | ||
11 | ) | ||
12 | ), 'colors'); | ||
13 | |||
14 | @include iro.bem-scope(iro.props-namespace()) { | ||
15 | :link, | ||
16 | :visited { | ||
17 | border-radius: .5px; | ||
18 | color: currentColor; | ||
19 | text-decoration: none; | ||
20 | |||
21 | &:hover { | ||
22 | text-decoration: underline; | ||
23 | } | ||
24 | |||
25 | @include iro.bem-at-theme('keyboard') { | ||
26 | &:focus { | ||
27 | box-shadow: 0 0 0 2px fn.color(--key-focus --border), fn.color(--key-focus --shadow); | ||
28 | } | ||
29 | } | ||
30 | } | ||
31 | } | ||
32 | } | ||
diff --git a/src/scopes/_colored-links.scss b/src/scopes/_links.scss index 15614ba..4d9e571 100644 --- a/src/scopes/_colored-links.scss +++ b/src/scopes/_links.scss | |||
@@ -1,11 +1,12 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | 1 | @use 'iro-sass/src/index' as iro; |
2 | @use '../functions' as fn; | 2 | @use '../functions' as fn; |
3 | 3 | ||
4 | @include iro.props-namespace('colored-links') { | 4 | @include iro.props-namespace('links') { |
5 | @include iro.props-store(( | 5 | @include iro.props-store(( |
6 | --colors: ( | 6 | --colors: ( |
7 | --idle: fn.global-color(--accent --link-idle --quiet --fg), | 7 | --idle: fn.global-color(--accent --link-idle --quiet --fg), |
8 | --visited: fn.global-color(--accent --link-visited --quiet --fg), | 8 | --visited: fn.global-color(--accent --link-visited --quiet --fg), |
9 | |||
9 | --key-focus: ( | 10 | --key-focus: ( |
10 | --border: fn.global-color(--focus --fill), | 11 | --border: fn.global-color(--focus --fill), |
11 | --shadow: 0 0 0 calc(fn.global-dim(--focus --outline-width) + 2px) fn.global-color(--accent --primary --quiet --obj-lo), | 12 | --shadow: 0 0 0 calc(fn.global-dim(--focus --outline-width) + 2px) fn.global-color(--accent --primary --quiet --obj-lo), |
@@ -14,19 +15,15 @@ | |||
14 | ), 'colors'); | 15 | ), 'colors'); |
15 | 16 | ||
16 | @include iro.bem-scope(iro.props-namespace()) { | 17 | @include iro.bem-scope(iro.props-namespace()) { |
17 | :link { | 18 | :link, |
18 | color: fn.color(--idle); | ||
19 | text-decoration: underline; | ||
20 | } | ||
21 | |||
22 | :visited { | 19 | :visited { |
23 | color: fn.color(--visited); | 20 | border-radius: .5px; |
21 | color: currentColor; | ||
24 | text-decoration: underline; | 22 | text-decoration: underline; |
25 | } | ||
26 | 23 | ||
27 | :link, | 24 | &:hover { |
28 | :visited { | 25 | text-decoration: underline; |
29 | border-radius: .5px; | 26 | } |
30 | 27 | ||
31 | @include iro.bem-at-theme('keyboard') { | 28 | @include iro.bem-at-theme('keyboard') { |
32 | &:focus { | 29 | &:focus { |
@@ -34,5 +31,22 @@ | |||
34 | } | 31 | } |
35 | } | 32 | } |
36 | } | 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 | } | ||
37 | } | 51 | } |
38 | } | 52 | } |