diff options
Diffstat (limited to 'src/scopes/_links.scss')
-rw-r--r-- | src/scopes/_links.scss | 33 |
1 files changed, 20 insertions, 13 deletions
diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss index 9e0b18a..552b02a 100644 --- a/src/scopes/_links.scss +++ b/src/scopes/_links.scss | |||
@@ -9,7 +9,13 @@ | |||
9 | 9 | ||
10 | --hover: ( | 10 | --hover: ( |
11 | --underline: fn.global-dim(--border --medium), | 11 | --underline: fn.global-dim(--border --medium), |
12 | ) | 12 | ), |
13 | |||
14 | --key-focus: ( | ||
15 | --border: fn.global-dim(--key-focus --border), | ||
16 | --border-offset: fn.global-dim(--key-focus --border-offset), | ||
17 | --outline: fn.global-dim(--key-focus --border), | ||
18 | ), | ||
13 | ), | 19 | ), |
14 | --colors: ( | 20 | --colors: ( |
15 | --underline: fn.global-color(--text-mute-more), | 21 | --underline: fn.global-color(--text-mute-more), |
@@ -33,22 +39,24 @@ | |||
33 | ), | 39 | ), |
34 | 40 | ||
35 | --key-focus: ( | 41 | --key-focus: ( |
36 | --bg: fn.global-color(--focus-static --400), | 42 | --text: fn.global-color(--focus --text), |
37 | --text: fn.global-color(--focus-static --400-text), | 43 | --border: fn.global-color(--focus --border), |
38 | ) | 44 | --outline: fn.global-color(--focus --outline), |
39 | ) | 45 | ), |
46 | ), | ||
40 | )); | 47 | )); |
41 | 48 | ||
42 | @include iro.bem-scope(iro.props-namespace()) { | 49 | @include iro.bem-scope(iro.props-namespace()) { |
43 | :link, | 50 | :link, |
44 | :visited { | 51 | :visited { |
45 | margin: calc(-1 * fn.global-dim(--border --thick)); | 52 | margin: calc(-1 * fn.dim(--key-focus --border-offset)); |
46 | padding: fn.global-dim(--border --thick); | 53 | padding: fn.dim(--key-focus --border-offset); |
47 | border-radius: calc(fn.dim(--rounding) + fn.global-dim(--border --thick)); | 54 | border-radius: fn.dim(--rounding); |
48 | color: currentColor; | 55 | color: currentColor; |
49 | text-decoration: underline; | 56 | text-decoration: underline; |
50 | text-decoration-color: fn.color(--underline); | 57 | text-decoration-color: fn.color(--underline); |
51 | text-decoration-thickness: fn.dim(--underline); | 58 | text-decoration-thickness: fn.dim(--underline); |
59 | box-decoration-break: clone; | ||
52 | 60 | ||
53 | &:hover { | 61 | &:hover { |
54 | text-decoration: underline; | 62 | text-decoration: underline; |
@@ -57,11 +65,10 @@ | |||
57 | } | 65 | } |
58 | 66 | ||
59 | &:focus-visible { | 67 | &:focus-visible { |
60 | background-color: fn.color(--key-focus --bg); | 68 | outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); |
61 | color: fn.color(--key-focus --text); | 69 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); |
62 | text-decoration: underline; | 70 | color: fn.color(--key-focus --text); |
63 | text-decoration-thickness: fn.dim(--hover --underline); | 71 | text-decoration: none; |
64 | text-decoration-skip-ink: none; | ||
65 | } | 72 | } |
66 | } | 73 | } |
67 | 74 | ||