diff options
-rw-r--r-- | package.json | 2 | ||||
-rw-r--r-- | src/index.scss | 1 | ||||
-rw-r--r-- | src/objects/_action-button.scss | 243 | ||||
-rw-r--r-- | tpl/index.pug | 61 | ||||
-rw-r--r-- | tpl/objects/action-button.pug | 21 |
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 | |||
12 | include objects/checkbox.pug | 12 | include objects/checkbox.pug |
13 | include objects/switch.pug | 13 | include objects/switch.pug |
14 | include objects/form.pug | 14 | include objects/form.pug |
15 | include objects/action-button.pug | ||
15 | 16 | ||
16 | mixin box | 17 | mixin 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 @@ | |||
1 | include icon.pug | ||
2 | |||
3 | mixin 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 | ||