summaryrefslogtreecommitdiffstats
path: root/src/objects
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects')
-rw-r--r--src/objects/_action-button.scss227
-rw-r--r--src/objects/_button.scss25
-rw-r--r--src/objects/_checkbox.scss2
-rw-r--r--src/objects/_radio.scss2
4 files changed, 241 insertions, 15 deletions
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
new file mode 100644
index 0000000..6f0288d
--- /dev/null
+++ b/src/objects/_action-button.scss
@@ -0,0 +1,227 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('action-button') {
5 @include iro.props-store((
6 --dims: (
7 --line-height: 1.4,
8 --pad-i: fn.global-dim(--size --100),
9 --pad-b: fn.global-dim(--size --85),
10 --border: fn.global-dim(--border --thin),
11 --rounding: fn.global-dim(--rounding),
12
13 --key-focus: (
14 --border: fn.global-dim(--key-focus --border),
15 --border-offset: fn.global-dim(--key-focus --border-offset),
16 --outline: fn.global-dim(--key-focus --outline),
17 ),
18 ),
19 --colors: (
20 --bg: fn.global-color(--base --75),
21 --label: fn.global-color(--text),
22 --border: fn.global-color(--border-strong),
23
24 --hover: (
25 --bg: fn.global-color(--base --50),
26 --label: fn.global-color(--heading),
27 --border: fn.global-color(--text-mute-more),
28 ),
29 --active: (
30 --bg: fn.global-color(--border-mute),
31 --label: fn.global-color(--heading),
32 --border: fn.global-color(--text-mute-more),
33 ),
34 --selected: (
35 --bg: fn.global-color(--border-mute),
36 --label: fn.global-color(--text),
37 --border: fn.global-color(--text-disabled),
38
39 --hover: (
40 --label: fn.global-color(--heading),
41 --border: fn.global-color(--text-mute-more),
42 ),
43 ),
44 --disabled: (
45 --bg: fn.global-color(--bg-base),
46 --label: fn.global-color(--text-disabled),
47 --border: fn.global-color(--border-mute),
48 ),
49 --key-focus: (
50 --border: fn.global-color(--focus --border),
51 --outline: fn.global-color(--focus --outline),
52 ),
53 --quiet: (
54 --label: fn.global-color(--text),
55
56 --hover: (
57 --bg: fn.global-color(--border-mute),
58 --label: fn.global-color(--heading),
59 ),
60 --active: (
61 --bg: fn.global-color(--border),
62 --label: fn.global-color(--heading),
63 ),
64 --selected: (
65 --bg: fn.global-color(--border-mute),
66 --label: fn.global-color(--text),
67
68 --hover: (
69 --bg: fn.global-color(--border),
70 --label: fn.global-color(--heading),
71 ),
72 ),
73 --disabled: (
74 --label: fn.global-color(--text-disabled),
75 ),
76 ),
77 ),
78 ));
79
80 @include iro.bem-object(iro.props-namespace()) {
81 display: inline-block;
82 position: relative;
83 padding-block: fn.dim(--pad-b);
84 padding-inline: fn.dim(--pad-i);
85 border: fn.dim(--border) solid fn.color(--disabled --border);
86 border-radius: fn.dim(--rounding);
87 background-color: fn.color(--disabled --bg);
88 color: fn.color(--disabled --label);
89 line-height: fn.dim(--line-height);
90 text-align: center;
91 text-decoration: none;
92 text-overflow: ellipsis;
93 vertical-align: top;
94 white-space: nowrap;
95
96 &::after {
97 content: '';
98 display: none;
99 position: absolute;
100 z-index: 1;
101 inset: calc(-1 * fn.dim(--border) - fn.dim(--key-focus --border-offset));
102 border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset));
103 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
104 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
105 pointer-events: none;
106 }
107
108 &:link,
109 &:visited,
110 &:enabled {
111 border-color: fn.color(--border);
112 background-color: fn.color(--bg);
113 color: fn.color(--label);
114
115 &:hover,
116 &:focus-visible {
117 border-color: fn.color(--hover --border);
118 background-color: fn.color(--hover --bg);
119 color: fn.color(--hover --label);
120 }
121
122 &:active {
123 border-color: fn.color(--active --border);
124 background-color: fn.color(--active --bg);
125 color: fn.color(--active --label);
126 }
127
128 &:focus-visible {
129 &::after {
130 display: block;
131 }
132 }
133 }
134
135 @include iro.bem-is('selected') {
136 &:link,
137 &:visited,
138 &:enabled {
139 border-color: fn.color(--selected --border);
140 background-color: fn.color(--selected --bg);
141 color: fn.color(--selected --label);
142
143 &:hover,
144 &:active,
145 &:focus-visible {
146 border-color: fn.color(--selected --hover --border);
147 background-color: fn.color(--selected --bg);
148 color: fn.color(--selected --hover --label);
149 }
150
151 @include iro.bem-at-theme('keyboard') {
152 &:focus {
153 background-color: fn.color(--selected --bg);
154 color: fn.color(--selected --hover --label);
155 }
156 }
157 }
158 }
159
160 @include iro.bem-modifier('quiet') {
161 border-color: transparent;
162 background-color: transparent;
163 box-shadow: none;
164 color: fn.color(--quiet --disabled --label);
165
166 &:link,
167 &:visited,
168 &:enabled {
169 border-color: transparent;
170 background-color: transparent;
171 box-shadow: none;
172 color: fn.color(--quiet --label);
173
174 &:hover,
175 &:focus-visible {
176 border-color: transparent;
177 background-color: fn.color(--quiet --hover --bg);
178 box-shadow: none;
179 color: fn.color(--quiet --hover --label);
180 }
181
182 &:active {
183 border-color: transparent;
184 background-color: fn.color(--quiet --active --bg);
185 box-shadow: none;
186 color: fn.color(--quiet --active --label);
187 }
188
189 @include iro.bem-at-theme('keyboard') {
190 &:focus {
191 background-color: fn.color(--quiet --hover --bg);
192 color: fn.color(--quiet --hover --label);
193 }
194 }
195 }
196
197 @include iro.bem-is('selected') {
198 background-color: fn.color(--quiet --selected --bg);
199 color: fn.color(--quiet --disabled --label);
200
201 &:link,
202 &:visited,
203 &:enabled {
204 border-color: transparent;
205 background-color: fn.color(--quiet --selected --bg);
206 box-shadow: none;
207 color: fn.color(--quiet --selected --label);
208
209 &:hover,
210 &:active,
211 &:focus-visible {
212 border-color: transparent;
213 background-color: fn.color(--quiet --selected --hover --bg);
214 box-shadow: none;
215 color: fn.color(--quiet --selected --hover --label);
216 }
217 }
218 }
219 }
220
221 @include iro.bem-modifier('round') {
222 inline-size: calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-b));
223 padding-inline: 0;
224 border-radius: 100em;
225 }
226 }
227}
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index 49f3f67..1c907c0 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -231,13 +231,22 @@ $static-themes: 'black' 'white' !default;
231 display: none; 231 display: none;
232 position: absolute; 232 position: absolute;
233 z-index: 1; 233 z-index: 1;
234 inset-block: calc(-1 * fn.dim(--border) - fn.dim(--key-focus --border-offset)); 234 inset: calc(-1 * fn.dim(--border) - fn.dim(--key-focus --border-offset));
235 inset-inline: calc(-1 * fn.dim(--border) - fn.dim(--key-focus --border-offset)); 235 border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset));
236 border-radius: fn.dim(--rounding);
237 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); 236 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
238 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); 237 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
239 pointer-events: none; 238 pointer-events: none;
240 } 239 }
240
241 &:link,
242 &:visited,
243 &:enabled {
244 &:focus-visible {
245 &::after {
246 display: block;
247 }
248 }
249 }
241 250
242 @include iro.bem-modifier('block') { 251 @include iro.bem-modifier('block') {
243 display: block; 252 display: block;
@@ -268,16 +277,6 @@ $static-themes: 'black' 'white' !default;
268 @include theme($theme); 277 @include theme($theme);
269 } 278 }
270 } 279 }
271
272 &:link,
273 &:visited,
274 &:enabled {
275 &:focus-visible {
276 &::after {
277 display: block;
278 }
279 }
280 }
281 280
282 @each $theme in $static-themes { 281 @each $theme in $static-themes {
283 @include iro.bem-modifier(static-#{$theme}) { 282 @include iro.bem-modifier(static-#{$theme}) {
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss
index 509822b..8527948 100644
--- a/src/objects/_checkbox.scss
+++ b/src/objects/_checkbox.scss
@@ -15,7 +15,7 @@
15 --key-focus: ( 15 --key-focus: (
16 --border: fn.global-dim(--key-focus --border), 16 --border: fn.global-dim(--key-focus --border),
17 --border-offset: fn.global-dim(--key-focus --border-offset), 17 --border-offset: fn.global-dim(--key-focus --border-offset),
18 --outline: fn.global-dim(--key-focus --border), 18 --outline: fn.global-dim(--key-focus --outline),
19 ), 19 ),
20 ), 20 ),
21 --colors: ( 21 --colors: (
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss
index 7ade7e1..9fa937d 100644
--- a/src/objects/_radio.scss
+++ b/src/objects/_radio.scss
@@ -15,7 +15,7 @@
15 --key-focus: ( 15 --key-focus: (
16 --border: fn.global-dim(--key-focus --border), 16 --border: fn.global-dim(--key-focus --border),
17 --border-offset: fn.global-dim(--key-focus --border-offset), 17 --border-offset: fn.global-dim(--key-focus --border-offset),
18 --outline: fn.global-dim(--key-focus --border), 18 --outline: fn.global-dim(--key-focus --outline),
19 ), 19 ),
20 ), 20 ),
21 --colors: ( 21 --colors: (
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-11 03:22:28 +0000