summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-06-25 21:45:22 +0200
committerVolpeon <git@volpeon.ink>2024-06-25 21:45:22 +0200
commita6745cc1c39dca0a26a72ffde885dda33acfed5f (patch)
tree93801d1552ce1f30bf6b6b23c0dd731ba8fa6067 /src
parentFix form (diff)
downloadiro-design-a6745cc1c39dca0a26a72ffde885dda33acfed5f.tar.gz
iro-design-a6745cc1c39dca0a26a72ffde885dda33acfed5f.tar.bz2
iro-design-a6745cc1c39dca0a26a72ffde885dda33acfed5f.zip
Added back action button
Diffstat (limited to 'src')
-rw-r--r--src/_objects.scss2
-rw-r--r--src/objects/_action-button.scss (renamed from src/.old/objects/_action-button.scss)137
-rw-r--r--src/objects/_button.scss25
-rw-r--r--src/objects/_checkbox.scss2
-rw-r--r--src/objects/_radio.scss2
5 files changed, 86 insertions, 82 deletions
diff --git a/src/_objects.scss b/src/_objects.scss
index 525e31a..b1872c9 100644
--- a/src/_objects.scss
+++ b/src/_objects.scss
@@ -9,7 +9,7 @@
9@use 'objects/radio'; 9@use 'objects/radio';
10@use 'objects/checkbox'; 10@use 'objects/checkbox';
11@use 'objects/switch'; 11@use 'objects/switch';
12// @use 'objects/action-button'; 12@use 'objects/action-button';
13// @use 'objects/overflow-button'; 13// @use 'objects/overflow-button';
14// @use 'objects/status-indicator'; 14// @use 'objects/status-indicator';
15// @use 'objects/avatar'; 15// @use 'objects/avatar';
diff --git a/src/.old/objects/_action-button.scss b/src/objects/_action-button.scss
index 48ac2a6..6f0288d 100644
--- a/src/.old/objects/_action-button.scss
+++ b/src/objects/_action-button.scss
@@ -5,79 +5,84 @@
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --line-height: 1.4, 7 --line-height: 1.4,
8 --pad-x: fn.global-dim(--size --100), 8 --pad-i: fn.global-dim(--size --100),
9 --pad-y: fn.global-dim(--size --85), 9 --pad-b: fn.global-dim(--size --85),
10 --rounding: 3px, 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 ),
11 ), 18 ),
12 ), 'dims');
13
14 @include iro.props-store((
15 --colors: ( 19 --colors: (
16 --bg: fn.global-color(--bg-hi), 20 --bg: fn.global-color(--base --75),
17 --label: fn.global-color(--fg), 21 --label: fn.global-color(--text),
18 --border: fn.global-color(--obj-lo), 22 --border: fn.global-color(--border-strong),
19 23
20 --hover: ( 24 --hover: (
21 --bg: fn.global-color(--bg-hi2), 25 --bg: fn.global-color(--base --50),
22 --label: fn.global-color(--fg-lo), 26 --label: fn.global-color(--heading),
23 --border: fn.global-color(--fg-hi2), 27 --border: fn.global-color(--text-mute-more),
24 ), 28 ),
25 --active: ( 29 --active: (
26 --bg: fn.global-color(--obj-hi), 30 --bg: fn.global-color(--border-mute),
27 --label: fn.global-color(--fg-lo), 31 --label: fn.global-color(--heading),
28 --border: fn.global-color(--fg-hi2), 32 --border: fn.global-color(--text-mute-more),
29 ), 33 ),
30 --selected: ( 34 --selected: (
31 --bg: fn.global-color(--obj-hi), 35 --bg: fn.global-color(--border-mute),
32 --label: fn.global-color(--fg), 36 --label: fn.global-color(--text),
33 --border: fn.global-color(--fg-hi3), 37 --border: fn.global-color(--text-disabled),
34 38
35 --hover: ( 39 --hover: (
36 --label: fn.global-color(--fg-lo), 40 --label: fn.global-color(--heading),
37 --border: fn.global-color(--fg-hi2), 41 --border: fn.global-color(--text-mute-more),
38 ), 42 ),
39 ), 43 ),
40 --disabled: ( 44 --disabled: (
41 --bg: fn.global-color(--obj-hi), 45 --bg: fn.global-color(--bg-base),
42 --label: fn.global-color(--fg-hi3), 46 --label: fn.global-color(--text-disabled),
43 --border: fn.global-color(--obj-hi), 47 --border: fn.global-color(--border-mute),
44 ), 48 ),
45 --key-focus: ( 49 --key-focus: (
46 --border: fn.global-color(--focus --fill), 50 --border: fn.global-color(--focus --border),
47 --shadow: fn.global-color(--focus --shadow), 51 --outline: fn.global-color(--focus --outline),
48 ), 52 ),
49 --quiet: ( 53 --quiet: (
50 --label: fn.global-color(--fg), 54 --label: fn.global-color(--text),
51 55
52 --hover: ( 56 --hover: (
53 --bg: fn.global-color(--obj-hi), 57 --bg: fn.global-color(--border-mute),
54 --label: fn.global-color(--fg-lo), 58 --label: fn.global-color(--heading),
55 ), 59 ),
56 --active: ( 60 --active: (
57 --bg: fn.global-color(--obj), 61 --bg: fn.global-color(--border),
58 --label: fn.global-color(--fg-lo), 62 --label: fn.global-color(--heading),
59 ), 63 ),
60 --selected: ( 64 --selected: (
61 --bg: fn.global-color(--obj-hi), 65 --bg: fn.global-color(--border-mute),
62 --label: fn.global-color(--fg), 66 --label: fn.global-color(--text),
63 67
64 --hover: ( 68 --hover: (
65 --bg: fn.global-color(--obj), 69 --bg: fn.global-color(--border),
66 --label: fn.global-color(--fg-lo), 70 --label: fn.global-color(--heading),
67 ), 71 ),
68 ), 72 ),
69 --disabled: ( 73 --disabled: (
70 --label: fn.global-color(--fg-hi3), 74 --label: fn.global-color(--text-disabled),
71 ), 75 ),
72 ), 76 ),
73 ), 77 ),
74 ), 'colors'); 78 ));
75 79
76 @include iro.bem-object(iro.props-namespace()) { 80 @include iro.bem-object(iro.props-namespace()) {
77 display: inline-block; 81 display: inline-block;
78 padding: fn.dim(--pad-y) fn.dim(--pad-x); 82 position: relative;
79 overflow: hidden; 83 padding-block: fn.dim(--pad-b);
80 border: 1px solid fn.color(--disabled --border); 84 padding-inline: fn.dim(--pad-i);
85 border: fn.dim(--border) solid fn.color(--disabled --border);
81 border-radius: fn.dim(--rounding); 86 border-radius: fn.dim(--rounding);
82 background-color: fn.color(--disabled --bg); 87 background-color: fn.color(--disabled --bg);
83 color: fn.color(--disabled --label); 88 color: fn.color(--disabled --label);
@@ -88,6 +93,18 @@
88 vertical-align: top; 93 vertical-align: top;
89 white-space: nowrap; 94 white-space: nowrap;
90 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
91 &:link, 108 &:link,
92 &:visited, 109 &:visited,
93 &:enabled { 110 &:enabled {
@@ -95,7 +112,8 @@
95 background-color: fn.color(--bg); 112 background-color: fn.color(--bg);
96 color: fn.color(--label); 113 color: fn.color(--label);
97 114
98 &:hover { 115 &:hover,
116 &:focus-visible {
99 border-color: fn.color(--hover --border); 117 border-color: fn.color(--hover --border);
100 background-color: fn.color(--hover --bg); 118 background-color: fn.color(--hover --bg);
101 color: fn.color(--hover --label); 119 color: fn.color(--hover --label);
@@ -107,10 +125,9 @@
107 color: fn.color(--active --label); 125 color: fn.color(--active --label);
108 } 126 }
109 127
110 @include iro.bem-at-theme('keyboard') { 128 &:focus-visible {
111 &:focus { 129 &::after {
112 background-color: fn.color(--hover --bg); 130 display: block;
113 color: fn.color(--hover --label);
114 } 131 }
115 } 132 }
116 } 133 }
@@ -124,7 +141,8 @@
124 color: fn.color(--selected --label); 141 color: fn.color(--selected --label);
125 142
126 &:hover, 143 &:hover,
127 &:active { 144 &:active,
145 &:focus-visible {
128 border-color: fn.color(--selected --hover --border); 146 border-color: fn.color(--selected --hover --border);
129 background-color: fn.color(--selected --bg); 147 background-color: fn.color(--selected --bg);
130 color: fn.color(--selected --hover --label); 148 color: fn.color(--selected --hover --label);
@@ -153,7 +171,8 @@
153 box-shadow: none; 171 box-shadow: none;
154 color: fn.color(--quiet --label); 172 color: fn.color(--quiet --label);
155 173
156 &:hover { 174 &:hover,
175 &:focus-visible {
157 border-color: transparent; 176 border-color: transparent;
158 background-color: fn.color(--quiet --hover --bg); 177 background-color: fn.color(--quiet --hover --bg);
159 box-shadow: none; 178 box-shadow: none;
@@ -188,35 +207,21 @@
188 color: fn.color(--quiet --selected --label); 207 color: fn.color(--quiet --selected --label);
189 208
190 &:hover, 209 &:hover,
191 &:active { 210 &:active,
211 &:focus-visible {
192 border-color: transparent; 212 border-color: transparent;
193 background-color: fn.color(--quiet --selected --hover --bg); 213 background-color: fn.color(--quiet --selected --hover --bg);
194 box-shadow: none; 214 box-shadow: none;
195 color: fn.color(--quiet --selected --hover --label); 215 color: fn.color(--quiet --selected --hover --label);
196 } 216 }
197
198 @include iro.bem-at-theme('keyboard') {
199 &:focus {
200 background-color: fn.color(--quiet --selected --bg);
201 color: fn.color(--quiet --selected --hover --label);
202 }
203 }
204 } 217 }
205 } 218 }
206 } 219 }
207 220
208 @include iro.bem-at-theme('keyboard') {
209 &:focus {
210 border-color: fn.color(--key-focus --border);
211 box-shadow: inset 0 0 0 1px fn.color(--key-focus --border), fn.color(--key-focus --shadow);
212 }
213 }
214
215 @include iro.bem-modifier('round') { 221 @include iro.bem-modifier('round') {
216 width: calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-y)); 222 inline-size: calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-b));
217 padding-right: 0; 223 padding-inline: 0;
218 padding-left: 0; 224 border-radius: 100em;
219 border-radius: 100em;
220 } 225 }
221 } 226 }
222} 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-22 04:09:51 +0000