summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--package.json2
-rw-r--r--src/index.scss1
-rw-r--r--src/objects/_action-button.scss243
-rw-r--r--tpl/index.pug61
-rw-r--r--tpl/objects/action-button.pug21
5 files changed, 327 insertions, 1 deletions
diff --git a/package.json b/package.json
index b19ffa4..273342d 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
11 "build": "npm run build:app && npm run build:style && npm run build:icons && npm run build:assets", 11 "build": "npm run build:app && npm run build:style && npm run build:icons && npm run build:assets",
12 "build:assets": "cp -r static/* public/", 12 "build:assets": "cp -r static/* public/",
13 "build:app": "pug tpl/index.pug -p tpl --out public/", 13 "build:app": "pug tpl/index.pug -p tpl --out public/",
14 "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js check public/icons.svg", 14 "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js check trash public/icons.svg",
15 "build:style": "sass --load-path=node_modules src/index.scss public/style.css", 15 "build:style": "sass --load-path=node_modules src/index.scss public/style.css",
16 "lint:style": "stylelint \"src/**/*.scss\"", 16 "lint:style": "stylelint \"src/**/*.scss\"",
17 "fix:style": "stylelint \"src/**/*.scss\" --fix", 17 "fix:style": "stylelint \"src/**/*.scss\" --fix",
diff --git a/src/index.scss b/src/index.scss
index 9f7f85e..1124840 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -15,6 +15,7 @@
15@import 'objects/radio'; 15@import 'objects/radio';
16@import 'objects/checkbox'; 16@import 'objects/checkbox';
17@import 'objects/switch'; 17@import 'objects/switch';
18@import 'objects/action-button';
18 19
19@import 'layouts/form'; 20@import 'layouts/form';
20 21
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
new file mode 100644
index 0000000..153780d
--- /dev/null
+++ b/src/objects/_action-button.scss
@@ -0,0 +1,243 @@
1@use 'iro-sass/src/index' as iro;
2
3@include iro.props-namespace('action-button') {
4 @include iro.props-store((
5 --dims: (
6 --padding-x: .6rem,
7 --padding-y: .6rem,
8 --rounding: 3px,
9 ),
10 --colors: (
11 --bg: iro.props-get(--colors --bg-hi, $global: true),
12 --label: iro.props-get(--colors --fg, $global: true),
13 --border: iro.props-get(--colors --obj-lo, $global: true),
14 --shadow: 0 0 0 0 transparent,
15
16 --hover: (
17 --bg: iro.props-get(--colors --bg-hi2, $global: true),
18 --label: iro.props-get(--colors --fg-lo, $global: true),
19 --border: iro.props-get(--colors --fg-hi2, $global: true),
20 --shadow: 0 0 0 0 transparent,
21 ),
22 --active: (
23 --bg: iro.props-get(--colors --obj-hi, $global: true),
24 --label: iro.props-get(--colors --fg-lo, $global: true),
25 --border: iro.props-get(--colors --fg-hi2, $global: true),
26 --shadow: 0 0 0 0 transparent,
27 ),
28 --selected: (
29 --bg: iro.props-get(--colors --obj-hi, $global: true),
30 --label: iro.props-get(--colors --fg-lo, $global: true),
31 --border: iro.props-get(--colors --fg-hi3, $global: true),
32 --shadow: 0 0 0 0 transparent,
33
34 --hover: (
35 --border: iro.props-get(--colors --fg-hi2, $global: true),
36 --shadow: 0 0 0 0 transparent,
37 ),
38 --key-focus: (
39 --bg: iro.props-get(--colors --obj-hi, $global: true),
40 ),
41 ),
42 --disabled: (
43 --bg: iro.props-get(--colors --obj-hi, $global: true),
44 --label: iro.props-get(--colors --fg-hi3, $global: true),
45 --border: iro.props-get(--colors --obj-hi, $global: true),
46 --shadow: 0 0 0 0 transparent,
47 ),
48 --key-focus: (
49 --bg: iro.props-get(--colors --bg-hi2, $global: true),
50 --label: iro.props-get(--colors --fg-lo, $global: true),
51 --border: iro.props-get(--colors --focus --fill, $global: true),
52 --shadow: iro.props-get(--colors --focus --shadow, $global: true),
53 ),
54 --quiet: (
55 --label: iro.props-get(--colors --fg, $global: true),
56
57 --hover: (
58 --bg: iro.props-get(--colors --obj-hi, $global: true),
59 --label: iro.props-get(--colors --fg-lo, $global: true),
60 ),
61 --active: (
62 --bg: iro.props-get(--colors --obj, $global: true),
63 --label: iro.props-get(--colors --fg-lo, $global: true),
64 ),
65 --selected: (
66 --bg: iro.props-get(--colors --obj-hi, $global: true),
67 --label: iro.props-get(--colors --fg-lo, $global: true),
68
69 --key-focus: (
70 --bg: iro.props-get(--colors --obj, $global: true),
71 ),
72 ),
73 --disabled: (
74 --label: iro.props-get(--colors --fg-hi3, $global: true),
75 ),
76 --key-focus: (
77 --bg: iro.props-get(--colors --bg-hi2, $global: true),
78 --label: iro.props-get(--colors --fg-lo, $global: true),
79 --border: iro.props-get(--colors --focus --fill, $global: true),
80 --shadow: iro.props-get(--colors --focus --shadow, $global: true),
81 ),
82 ),
83 ),
84 ));
85
86 @include iro.bem-object(iro.props-namespace()) {
87 display: inline-block;
88 padding: iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x);
89 border: 1px solid iro.props-get(--colors --border);
90 border-radius: iro.props-get(--dims --rounding);
91 background-color: iro.props-get(--colors --bg);
92 box-shadow: iro.props-get(--colors --shadow);
93 color: iro.props-get(--colors --label);
94 line-height: 1;
95 text-align: center;
96 text-decoration: none;
97 text-overflow: ellipsis;
98 white-space: nowrap;
99
100 @include iro.bem-multi('&:link, &:visited', 'modifier:' 'native') {
101 &:hover {
102 border-color: iro.props-get(--colors --hover --border);
103 background-color: iro.props-get(--colors --hover --bg);
104 box-shadow: iro.props-get(--colors --hover --shadow);
105 color: iro.props-get(--colors --hover --label);
106 }
107
108 &:active {
109 border-color: iro.props-get(--colors --active --border);
110 background-color: iro.props-get(--colors --active --bg);
111 box-shadow: iro.props-get(--colors --active --shadow);
112 color: iro.props-get(--colors --active --label);
113 }
114 }
115
116 @include iro.bem-at-theme('keyboard') {
117 &:focus {
118 border-color: iro.props-get(--colors --key-focus --border);
119 background-color: iro.props-get(--colors --key-focus --bg);
120 box-shadow: inset 0 0 0 1px iro.props-get(--colors --key-focus --border), iro.props-get(--colors --key-focus --shadow);
121 color: iro.props-get(--colors --key-focus --label);
122 }
123 }
124
125 @include iro.bem-is('selected') {
126 border-color: iro.props-get(--colors --selected --border);
127 background-color: iro.props-get(--colors --selected --bg);
128 box-shadow: iro.props-get(--colors --selected --shadow);
129 color: iro.props-get(--colors --selected --label);
130
131 @include iro.bem-multi('&:link, &:visited', 'modifier:' 'native') {
132 &:hover,
133 &:active {
134 border-color: iro.props-get(--colors --selected --hover --border);
135 background-color: iro.props-get(--colors --selected --bg);
136 box-shadow: iro.props-get(--colors --selected --hover --shadow);
137 color: iro.props-get(--colors --selected --label);
138 }
139 }
140
141 @include iro.bem-at-theme('keyboard') {
142 &:focus {
143 border-color: iro.props-get(--colors --key-focus --border);
144 background-color: iro.props-get(--colors --selected --key-focus --bg);
145 box-shadow: inset 0 0 0 1px iro.props-get(--colors --key-focus --border), iro.props-get(--colors --key-focus --shadow);
146 color: iro.props-get(--colors --key-focus --label);
147 }
148 }
149 }
150
151 @include iro.bem-modifier('quiet') {
152 border-color: transparent;
153 background-color: transparent;
154 box-shadow: none;
155 color: iro.props-get(--colors --quiet --label);
156
157 @include iro.bem-multi('&:link, &:visited', 'modifier:' 'native') {
158 &:hover {
159 border-color: transparent;
160 background-color: iro.props-get(--colors --quiet --hover --bg);
161 box-shadow: none;
162 color: iro.props-get(--colors --quiet --hover --label);
163 }
164
165 &:active {
166 border-color: transparent;
167 background-color: iro.props-get(--colors --quiet --active --bg);
168 box-shadow: none;
169 color: iro.props-get(--colors --quiet --active --label);
170 }
171 }
172
173 @include iro.bem-at-theme('keyboard') {
174 &:focus {
175 border-color: iro.props-get(--colors --quiet --key-focus --border);
176 background-color: iro.props-get(--colors --quiet --key-focus --bg);
177 box-shadow: inset 0 0 0 1px iro.props-get(--colors --quiet --key-focus --border), iro.props-get(--colors --quiet --key-focus --shadow);
178 color: iro.props-get(--colors --quiet --key-focus --label);
179 }
180 }
181
182 @include iro.bem-is('selected') {
183 border-color: transparent;
184 background-color: iro.props-get(--colors --quiet --selected --bg);
185 box-shadow: none;
186 color: iro.props-get(--colors --quiet --selected --label);
187
188 @include iro.bem-multi('&:link, &:visited', 'modifier:' 'native') {
189 &:hover,
190 &:active {
191 border-color: transparent;
192 background-color: iro.props-get(--colors --quiet --selected --bg);
193 box-shadow: none;
194 color: iro.props-get(--colors --quiet --selected --label);
195 }
196 }
197
198 @include iro.bem-at-theme('keyboard') {
199 &:focus {
200 border-color: iro.props-get(--colors --quiet --key-focus --border);
201 background-color: iro.props-get(--colors --quiet --selected --key-focus --bg);
202 box-shadow: inset 0 0 0 1px iro.props-get(--colors --quiet --key-focus --border), iro.props-get(--colors --quiet --key-focus --shadow);
203 color: iro.props-get(--colors --quiet --key-focus --label);
204 }
205 }
206 }
207 }
208
209 @include iro.bem-is('disabled') {
210 border-color: iro.props-get(--colors --disabled --border);
211 background-color: iro.props-get(--colors --disabled --bg);
212 box-shadow: iro.props-get(--colors --disabled --shadow);
213 color: iro.props-get(--colors --disabled --label);
214
215 @include iro.bem-multi('&:link, &:visited', 'modifier:' 'native') {
216 &:hover,
217 &:active {
218 border-color: iro.props-get(--colors --disabled --border);
219 background-color: iro.props-get(--colors --disabled --bg);
220 box-shadow: iro.props-get(--colors --disabled --shadow);
221 color: iro.props-get(--colors --disabled --label);
222 }
223 }
224
225 @include iro.bem-modifier('quiet') {
226 border-color: transparent;
227 background-color: transparent;
228 box-shadow: none;
229 color: iro.props-get(--colors --quiet --disabled --label);
230
231 @include iro.bem-multi('&:link, &:visited', 'modifier:' 'native') {
232 &:hover,
233 &:active {
234 border-color: transparent;
235 background-color: transparent;
236 box-shadow: none;
237 color: iro.props-get(--colors --quiet --disabled --label);
238 }
239 }
240 }
241 }
242 }
243}
diff --git a/tpl/index.pug b/tpl/index.pug
index 6971faa..2980016 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -12,6 +12,7 @@ include objects/radio.pug
12include objects/checkbox.pug 12include objects/checkbox.pug
13include objects/switch.pug 13include objects/switch.pug
14include objects/form.pug 14include objects/form.pug
15include objects/action-button.pug
15 16
16mixin box 17mixin box
17 +container(padX=true padY=true inPage=true theme="raised") 18 +container(padX=true padY=true inPage=true theme="raised")
@@ -302,3 +303,63 @@ html
302 303
303 +form-item('') 304 +form-item('')
304 +a-button(variant='primary')= 'Register' 305 +a-button(variant='primary')= 'Register'
306
307 //-----------------------------------------
308
309 +h1-heading(level='xl')= 'Action button'
310 +rule(level='medium')
311
312 +box
313 +action-button= 'Idle'
314 = ' '
315 +action-button(selected=true)= 'Selected'
316 = ' '
317 +action-button(disabled=true)= 'Disabled'
318 = ' '
319 +action-button(selected=true disabled=true)= 'Selected + disabled'
320 br
321 br
322 +action-button(icon='trash')= 'Idle'
323 = ' '
324 +action-button(icon='trash' selected=true)= 'Selected'
325 = ' '
326 +action-button(icon='trash' disabled=true)= 'Disabled'
327 = ' '
328 +action-button(icon='trash' selected=true disabled=true)= 'Selected + disabled'
329 br
330 br
331 +action-button(icon='trash')
332 = ' '
333 +action-button(icon='trash' selected=true)
334 = ' '
335 +action-button(icon='trash' disabled=true)
336 = ' '
337 +action-button(icon='trash' selected=true disabled=true)
338
339 +box
340 +action-button(quiet=true )= 'Idle'
341 = ' '
342 +action-button(quiet=true selected=true)= 'Selected'
343 = ' '
344 +action-button(quiet=true disabled=true)= 'Disabled'
345 = ' '
346 +action-button(quiet=true selected=true disabled=true)= 'Selected + disabled'
347 br
348 br
349 +action-button(quiet=true icon='trash')= 'Idle'
350 = ' '
351 +action-button(quiet=true icon='trash' selected=true)= 'Selected'
352 = ' '
353 +action-button(quiet=true icon='trash' disabled=true)= 'Disabled'
354 = ' '
355 +action-button(quiet=true icon='trash' selected=true disabled=true)= 'Selected + disabled'
356 br
357 br
358 +action-button(quiet=true icon='trash')
359 = ' '
360 +action-button(quiet=true icon='trash' selected=true)
361 = ' '
362 +action-button(quiet=true icon='trash' disabled=true)
363 = ' '
364 +action-button(quiet=true icon='trash' selected=true disabled=true)
365
diff --git a/tpl/objects/action-button.pug b/tpl/objects/action-button.pug
new file mode 100644
index 0000000..0afe1ea
--- /dev/null
+++ b/tpl/objects/action-button.pug
@@ -0,0 +1,21 @@
1include icon.pug
2
3mixin action-button
4 -
5 let classes = {
6 'o-action-button': true,
7 'o-action-button--block': attributes.block,
8 'o-action-button--quiet': attributes.quiet,
9 'is-disabled': attributes.disabled,
10 'is-selected': attributes.selected
11 }
12
13 let href = attributes.disabled ? null : '#';
14
15 a(class=classes href=href)
16 if attributes.icon
17 +icon(attributes.icon)
18 = ' '
19 if block
20 span.o-action-button__label
21 block
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 12:04:42 +0000