diff options
Diffstat (limited to 'src_old/scopes/_links.scss')
| -rw-r--r-- | src_old/scopes/_links.scss | 143 |
1 files changed, 0 insertions, 143 deletions
diff --git a/src_old/scopes/_links.scss b/src_old/scopes/_links.scss deleted file mode 100644 index d47c406..0000000 --- a/src_old/scopes/_links.scss +++ /dev/null | |||
| @@ -1,143 +0,0 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | ||
| 2 | @use '../functions' as fn; | ||
| 3 | |||
| 4 | $static-themes: 'black' 'white' !default; | ||
| 5 | |||
| 6 | @include iro.props-namespace('links') { | ||
| 7 | @include iro.props-store(( | ||
| 8 | --dims: ( | ||
| 9 | --rounding: fn.global-dim(--rounding), | ||
| 10 | --underline: fn.global-dim(--border --thin), | ||
| 11 | |||
| 12 | --hover: ( | ||
| 13 | --underline: fn.global-dim(--border --medium), | ||
| 14 | ), | ||
| 15 | |||
| 16 | --key-focus: ( | ||
| 17 | --border: fn.global-dim(--key-focus --border), | ||
| 18 | --border-offset: fn.global-dim(--key-focus --border-offset), | ||
| 19 | --outline: fn.global-dim(--key-focus --border), | ||
| 20 | ), | ||
| 21 | ), | ||
| 22 | --colors: ( | ||
| 23 | --underline: fn.global-color(--text-mute-more), | ||
| 24 | |||
| 25 | --colored: ( | ||
| 26 | --text: fn.global-color(--accent --1100), | ||
| 27 | --underline: fn.global-color(--accent --600), | ||
| 28 | |||
| 29 | --hover: ( | ||
| 30 | --text: fn.global-color(--accent --1300), | ||
| 31 | ), | ||
| 32 | |||
| 33 | --visited: ( | ||
| 34 | --text: fn.global-color(--purple --1100), | ||
| 35 | --underline: fn.global-color(--purple --600), | ||
| 36 | |||
| 37 | --hover: ( | ||
| 38 | --text: fn.global-color(--purple --1300), | ||
| 39 | ), | ||
| 40 | ), | ||
| 41 | ), | ||
| 42 | |||
| 43 | --key-focus: ( | ||
| 44 | --text: fn.global-color(--focus --text), | ||
| 45 | --border: fn.global-color(--focus --border), | ||
| 46 | --outline: fn.global-color(--focus --outline), | ||
| 47 | ), | ||
| 48 | ), | ||
| 49 | )); | ||
| 50 | |||
| 51 | @each $theme in $static-themes { | ||
| 52 | @include iro.props-store(( | ||
| 53 | --colors: ( | ||
| 54 | --static-#{$theme}: ( | ||
| 55 | --text: fn.global-color(--#{$theme}-transparent --800), | ||
| 56 | --underline: fn.global-color(--#{$theme}-transparent --500), | ||
| 57 | |||
| 58 | --hover: ( | ||
| 59 | --text: fn.global-color(--#{$theme}-transparent --900), | ||
| 60 | ), | ||
| 61 | |||
| 62 | --key-focus: ( | ||
| 63 | --text: fn.global-color(--#{$theme}-transparent --900), | ||
| 64 | --border: fn.global-color(--#{$theme}-transparent --900), | ||
| 65 | --outline: fn.global-color(--#{$theme}-transparent --300), | ||
| 66 | ), | ||
| 67 | ) | ||
| 68 | ) | ||
| 69 | )); | ||
| 70 | } | ||
| 71 | |||
| 72 | @include iro.bem-scope(iro.props-namespace()) { | ||
| 73 | :link, | ||
| 74 | :visited { | ||
| 75 | border-radius: fn.dim(--rounding); | ||
| 76 | color: currentColor; | ||
| 77 | text-decoration: underline; | ||
| 78 | text-decoration-color: fn.color(--underline); | ||
| 79 | text-decoration-thickness: fn.dim(--underline); | ||
| 80 | box-decoration-break: clone; | ||
| 81 | |||
| 82 | &:hover { | ||
| 83 | text-decoration: underline; | ||
| 84 | text-decoration-thickness: fn.dim(--hover --underline); | ||
| 85 | text-decoration-skip-ink: none; | ||
| 86 | } | ||
| 87 | |||
| 88 | &:focus-visible { | ||
| 89 | outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); | ||
| 90 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); | ||
| 91 | color: fn.color(--key-focus --text); | ||
| 92 | text-decoration: none; | ||
| 93 | } | ||
| 94 | } | ||
| 95 | |||
| 96 | @include iro.bem-modifier('invisible') { | ||
| 97 | :link, | ||
| 98 | :visited { | ||
| 99 | text-decoration: none; | ||
| 100 | } | ||
| 101 | } | ||
| 102 | |||
| 103 | @include iro.bem-modifier('colored') { | ||
| 104 | :link { | ||
| 105 | color: fn.color(--colored --text); | ||
| 106 | text-decoration-color: fn.color(--colored --underline); | ||
| 107 | |||
| 108 | &:hover { | ||
| 109 | color: fn.color(--colored --hover --text); | ||
| 110 | } | ||
| 111 | } | ||
| 112 | |||
| 113 | :visited { | ||
| 114 | color: fn.color(--colored --visited --text); | ||
| 115 | text-decoration-color: fn.color(--colored --visited --underline); | ||
| 116 | |||
| 117 | &:hover { | ||
| 118 | color: fn.color(--colored --visited --hover --text); | ||
| 119 | } | ||
| 120 | } | ||
| 121 | } | ||
| 122 | |||
| 123 | @each $theme in $static-themes { | ||
| 124 | @include iro.bem-modifier(static-#{$theme}) { | ||
| 125 | :link, | ||
| 126 | :visited { | ||
| 127 | color: fn.color(--static-#{$theme} --text); | ||
| 128 | text-decoration-color: fn.color(--static-#{$theme} --underline); | ||
| 129 | |||
| 130 | &:hover { | ||
| 131 | color: fn.color(--static-#{$theme} --hover --text); | ||
| 132 | } | ||
| 133 | |||
| 134 | &:focus-visible { | ||
| 135 | outline-color: fn.color(--static-#{$theme} --key-focus --border); | ||
| 136 | box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--static-#{$theme} --key-focus --outline); | ||
| 137 | color: fn.color(--static-#{$theme} --key-focus --text); | ||
| 138 | } | ||
| 139 | } | ||
| 140 | } | ||
| 141 | } | ||
| 142 | } | ||
| 143 | } | ||
