diff options
Diffstat (limited to 'src/scopes/_links.scss')
| -rw-r--r-- | src/scopes/_links.scss | 75 |
1 files changed, 51 insertions, 24 deletions
diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss index 2e68952..115b199 100644 --- a/src/scopes/_links.scss +++ b/src/scopes/_links.scss | |||
| @@ -3,42 +3,61 @@ | |||
| 3 | 3 | ||
| 4 | @include iro.props-namespace('links') { | 4 | @include iro.props-namespace('links') { |
| 5 | @include iro.props-store(( | 5 | @include iro.props-store(( |
| 6 | --dims: ( | ||
| 7 | --underline: fn.global-dim(--border --thin), | ||
| 8 | |||
| 9 | --hover: ( | ||
| 10 | --underline: fn.global-dim(--border --medium), | ||
| 11 | ) | ||
| 12 | ), | ||
| 6 | --colors: ( | 13 | --colors: ( |
| 7 | --underline: fn.global-color(--fg-hi2), | 14 | --underline: fn.global-color(--text-mute-more), |
| 8 | 15 | ||
| 9 | --idle: fn.global-color(--accent --link-idle --quiet --fg), | 16 | --idle: ( |
| 10 | --visited: fn.global-color(--accent --link-visited --quiet --fg), | 17 | --text: fn.global-color(--accent --1000), |
| 11 | --idle-underline: fn.global-color(--accent --link-idle --quiet --fg-hi), | 18 | --underline: fn.global-color(--accent --700), |
| 12 | --visited-underline: fn.global-color(--accent --link-visited --quiet --fg-hi), | ||
| 13 | 19 | ||
| 14 | --key-focus: ( | 20 | --hover: ( |
| 15 | --border: fn.global-color(--focus --fill), | 21 | --text: fn.global-color(--accent --1200), |
| 16 | --shadow: 0 0 0 calc(fn.global-dim(--focus --outline-width) + 2px) fn.global-color(--accent --primary --quiet --obj-lo), | 22 | ), |
| 17 | ), | 23 | ), |
| 18 | ) | ||
| 19 | ), 'colors'); | ||
| 20 | 24 | ||
| 21 | @include iro.props-store(( | 25 | --visited: ( |
| 22 | --colors: ( | 26 | --text: fn.global-color(--purple --1000), |
| 23 | --underline: fn.global-color(--fg-hi), | 27 | --underline: fn.global-color(--purple --700), |
| 28 | |||
| 29 | --hover: ( | ||
| 30 | --text: fn.global-color(--purple --1200), | ||
| 31 | ), | ||
| 32 | ), | ||
| 33 | |||
| 34 | --focus: ( | ||
| 35 | --bg: fn.global-color(--yellow-static --400), | ||
| 36 | --text: #000, | ||
| 37 | ) | ||
| 24 | ) | 38 | ) |
| 25 | ), 'colors-dark'); | 39 | )); |
| 26 | 40 | ||
| 27 | @include iro.bem-scope(iro.props-namespace()) { | 41 | @include iro.bem-scope(iro.props-namespace()) { |
| 28 | :link, | 42 | :link, |
| 29 | :visited { | 43 | :visited { |
| 30 | border-radius: .5px; | 44 | border-radius: .5px; |
| 31 | color: currentColor; | 45 | color: currentColor; |
| 32 | text-decoration: underline; | 46 | text-decoration: underline; |
| 33 | text-decoration-color: fn.color(--underline); | 47 | text-decoration-color: fn.color(--underline); |
| 48 | text-decoration-thickness: fn.dim(--underline); | ||
| 34 | 49 | ||
| 35 | &:hover { | 50 | &:hover { |
| 36 | text-decoration: underline; | 51 | text-decoration: underline; |
| 52 | text-decoration-thickness: fn.dim(--hover --underline); | ||
| 37 | } | 53 | } |
| 38 | 54 | ||
| 39 | @include iro.bem-at-theme('keyboard') { | 55 | @include iro.bem-at-theme('keyboard') { |
| 40 | &:focus { | 56 | &:focus { |
| 41 | box-shadow: 0 0 0 2px fn.color(--key-focus --border), fn.color(--key-focus --shadow); | 57 | background-color: fn.color(--focus --bg); |
| 58 | color: fn.color(--focus --text); | ||
| 59 | text-decoration: none; | ||
| 60 | border-block-end: fn.dim(--hover --underline) solid currentColor; | ||
| 42 | } | 61 | } |
| 43 | } | 62 | } |
| 44 | } | 63 | } |
| @@ -52,13 +71,21 @@ | |||
| 52 | 71 | ||
| 53 | @include iro.bem-modifier('colored') { | 72 | @include iro.bem-modifier('colored') { |
| 54 | :link { | 73 | :link { |
| 55 | color: fn.color(--idle); | 74 | color: fn.color(--idle --text); |
| 56 | text-decoration-color: fn.color(--idle-underline); | 75 | text-decoration-color: fn.color(--idle --underline); |
| 76 | |||
| 77 | &:hover { | ||
| 78 | color: fn.color(--idle --hover --text); | ||
| 79 | } | ||
| 57 | } | 80 | } |
| 58 | 81 | ||
| 59 | :visited { | 82 | :visited { |
| 60 | color: fn.color(--visited); | 83 | color: fn.color(--visited --text); |
| 61 | text-decoration-color: fn.color(--visited-underline); | 84 | text-decoration-color: fn.color(--visited --underline); |
| 85 | |||
| 86 | &:hover { | ||
| 87 | color: fn.color(--visited --hover --text); | ||
| 88 | } | ||
| 62 | } | 89 | } |
| 63 | } | 90 | } |
| 64 | } | 91 | } |
