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 | } | ||