diff options
-rw-r--r-- | src/_utils.scss | 8 | ||||
-rw-r--r-- | src/index.scss | 2 | ||||
-rw-r--r-- | src/objects/_action-menu.scss | 10 | ||||
-rw-r--r-- | src/objects/_backdrop.scss | 36 | ||||
-rw-r--r-- | src/objects/_dialog.scss | 57 | ||||
-rw-r--r-- | tpl/index.pug | 106 | ||||
-rw-r--r-- | tpl/objects/action-menu.pug | 9 | ||||
-rw-r--r-- | tpl/objects/backdrop.pug | 3 | ||||
-rw-r--r-- | tpl/objects/dialog.pug | 16 | ||||
-rw-r--r-- | tpl/objects/heading.pug | 42 | ||||
-rw-r--r-- | tpl/objects/rule.pug | 8 |
11 files changed, 213 insertions, 84 deletions
diff --git a/src/_utils.scss b/src/_utils.scss index 72c1f2f..7525f34 100644 --- a/src/_utils.scss +++ b/src/_utils.scss | |||
@@ -12,3 +12,11 @@ | |||
12 | overflow: hidden; | 12 | overflow: hidden; |
13 | text-overflow: ellipsis; | 13 | text-overflow: ellipsis; |
14 | } | 14 | } |
15 | |||
16 | @include iro.bem-utility('ps') { | ||
17 | position: static; | ||
18 | } | ||
19 | |||
20 | @include iro.bem-utility('pr') { | ||
21 | position: relative; | ||
22 | } | ||
diff --git a/src/index.scss b/src/index.scss index 44fba76..3796c18 100644 --- a/src/index.scss +++ b/src/index.scss | |||
@@ -21,6 +21,8 @@ | |||
21 | @use 'objects/avatar'; | 21 | @use 'objects/avatar'; |
22 | @use 'objects/action-menu'; | 22 | @use 'objects/action-menu'; |
23 | @use 'objects/menu'; | 23 | @use 'objects/menu'; |
24 | @use 'objects/backdrop'; | ||
25 | @use 'objects/dialog'; | ||
24 | 26 | ||
25 | @use 'layouts/form'; | 27 | @use 'layouts/form'; |
26 | 28 | ||
diff --git a/src/objects/_action-menu.scss b/src/objects/_action-menu.scss index 1e95b39..3c10604 100644 --- a/src/objects/_action-menu.scss +++ b/src/objects/_action-menu.scss | |||
@@ -4,8 +4,6 @@ | |||
4 | @include iro.props-namespace('action-menu') { | 4 | @include iro.props-namespace('action-menu') { |
5 | @include iro.props-store(( | 5 | @include iro.props-store(( |
6 | --dims: ( | 6 | --dims: ( |
7 | --x: 0, | ||
8 | --y: 0, | ||
9 | --pad-x: 0, | 7 | --pad-x: 0, |
10 | --pad-y: .3rem, | 8 | --pad-y: .3rem, |
11 | --separator: .3rem, | 9 | --separator: .3rem, |
@@ -45,8 +43,8 @@ | |||
45 | @include iro.bem-object(iro.props-namespace()) { | 43 | @include iro.bem-object(iro.props-namespace()) { |
46 | position: absolute; | 44 | position: absolute; |
47 | z-index: 10000; | 45 | z-index: 10000; |
48 | top: fn.dim(--y); | 46 | top: var(--y); |
49 | left: fn.dim(--x); | 47 | left: var(--x); |
50 | padding: fn.dim(--pad-y) fn.dim(--pad-x); | 48 | padding: fn.dim(--pad-y) fn.dim(--pad-x); |
51 | border: fn.dim(--border) solid fn.color(--border); | 49 | border: fn.dim(--border) solid fn.color(--border); |
52 | border-radius: fn.dim(--rounding); | 50 | border-radius: fn.dim(--rounding); |
@@ -54,10 +52,6 @@ | |||
54 | box-shadow: fn.color(--shadow); | 52 | box-shadow: fn.color(--shadow); |
55 | color: fn.global-color(--fg); | 53 | color: fn.global-color(--fg); |
56 | 54 | ||
57 | @include iro.bem-modifier('static') { | ||
58 | position: static; | ||
59 | } | ||
60 | |||
61 | @include iro.bem-modifier('up-left') { | 55 | @include iro.bem-modifier('up-left') { |
62 | transform: translate(0, -100%); | 56 | transform: translate(0, -100%); |
63 | } | 57 | } |
diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss new file mode 100644 index 0000000..bc63a27 --- /dev/null +++ b/src/objects/_backdrop.scss | |||
@@ -0,0 +1,36 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | ||
2 | @use '../functions' as fn; | ||
3 | |||
4 | @include iro.props-namespace('backdrop') { | ||
5 | @include iro.props-store(( | ||
6 | --dims: ( | ||
7 | --z-index: 10000, | ||
8 | --pad-x: iro.fn-px-to-rem(14px), | ||
9 | --pad-y: iro.fn-px-to-rem(60px), | ||
10 | ), | ||
11 | ), 'dims'); | ||
12 | |||
13 | @include iro.props-store(( | ||
14 | --colors: ( | ||
15 | --bg: rgba(#000, .3), | ||
16 | ), | ||
17 | ), 'colors'); | ||
18 | |||
19 | @include iro.props-store(( | ||
20 | --dims: ( | ||
21 | --pad-y: iro.fn-px-to-rem(30px), | ||
22 | ) | ||
23 | ), 'sm'); | ||
24 | |||
25 | @include iro.bem-object(iro.props-namespace()) { | ||
26 | position: fixed; | ||
27 | z-index: fn.dim(--z-index); | ||
28 | top: 0; | ||
29 | right: 0; | ||
30 | bottom: 0; | ||
31 | left: 0; | ||
32 | box-sizing: border-box; | ||
33 | padding: fn.dim(--pad-y) fn.dim(--pad-x); | ||
34 | background-color: fn.color(--bg); | ||
35 | } | ||
36 | } | ||
diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss new file mode 100644 index 0000000..453b32b --- /dev/null +++ b/src/objects/_dialog.scss | |||
@@ -0,0 +1,57 @@ | |||
1 | @use 'iro-sass/src/index' as iro; | ||
2 | @use '../functions' as fn; | ||
3 | |||
4 | @include iro.props-namespace('dialog') { | ||
5 | @include iro.props-store(( | ||
6 | --dims: ( | ||
7 | --pad-x: iro.fn-px-to-rem(40px), | ||
8 | --pad-y: iro.fn-px-to-rem(40px), | ||
9 | --width-sm: iro.fn-px-to-rem(500px), | ||
10 | --width-md: iro.fn-px-to-rem(800px), | ||
11 | --width-lg: iro.fn-px-to-rem(1100px), | ||
12 | --rounding: 3px, | ||
13 | ), | ||
14 | ), 'dims'); | ||
15 | |||
16 | @include iro.props-store(( | ||
17 | --colors: ( | ||
18 | --shadow: 0 .2em .5em rgba(#000, .2), | ||
19 | ), | ||
20 | ), 'colors'); | ||
21 | |||
22 | @include iro.bem-object(iro.props-namespace()) { | ||
23 | max-width: fn.dim(--width-md); | ||
24 | margin: 0 auto; | ||
25 | padding: fn.dim(--pad-y) fn.dim(--pad-x); | ||
26 | overflow: hidden; | ||
27 | border-radius: fn.dim(--rounding); | ||
28 | background-color: fn.global-color(--bg); | ||
29 | box-shadow: fn.color(--shadow); | ||
30 | color: fn.global-color(--fg); | ||
31 | |||
32 | @include iro.bem-modifier('sm') { | ||
33 | max-width: fn.dim(--width-sm); | ||
34 | } | ||
35 | |||
36 | @include iro.bem-modifier('lg') { | ||
37 | max-width: fn.dim(--width-lg); | ||
38 | } | ||
39 | |||
40 | @include iro.bem-elem('header') { | ||
41 | padding-bottom: .5rem; | ||
42 | } | ||
43 | |||
44 | @include iro.bem-elem('title') { | ||
45 | margin-top: 0; | ||
46 | } | ||
47 | |||
48 | @include iro.bem-elem('body') { | ||
49 | padding-top: .5rem; | ||
50 | } | ||
51 | |||
52 | @include iro.bem-elem('footer') { | ||
53 | padding-top: fn.dim(--pad-y); | ||
54 | text-align: right; | ||
55 | } | ||
56 | } | ||
57 | } | ||
diff --git a/tpl/index.pug b/tpl/index.pug index 510e09b..0b74ed8 100644 --- a/tpl/index.pug +++ b/tpl/index.pug | |||
@@ -17,6 +17,8 @@ include objects/status-indicator.pug | |||
17 | include objects/avatar.pug | 17 | include objects/avatar.pug |
18 | include objects/action-menu.pug | 18 | include objects/action-menu.pug |
19 | include objects/menu.pug | 19 | include objects/menu.pug |
20 | include objects/backdrop.pug | ||
21 | include objects/dialog.pug | ||
20 | 22 | ||
21 | mixin box | 23 | mixin box |
22 | +container(padX=true padY=true inPage=true theme="raised") | 24 | +container(padX=true padY=true inPage=true theme="raised") |
@@ -44,46 +46,46 @@ html | |||
44 | body | 46 | body |
45 | +container(padX=true padY=true narrow=true) | 47 | +container(padX=true padY=true narrow=true) |
46 | 48 | ||
47 | +h1-heading(level='xl')= 'Heading' | 49 | +h1-heading('xl')= 'Heading' |
48 | +rule(level='medium') | 50 | +rule('medium') |
49 | 51 | ||
50 | +box | 52 | +box |
51 | +div-heading(level='xxl')= 'XXL Heading' | 53 | +div-heading('xxl')= 'XXL Heading' |
52 | +div-heading(level='xl')= 'XL Heading' | 54 | +div-heading('xl')= 'XL Heading' |
53 | +div-heading(level='lg')= 'LG Heading' | 55 | +div-heading('lg')= 'LG Heading' |
54 | +div-heading(level='md')= 'MD Heading' | 56 | +div-heading('md')= 'MD Heading' |
55 | +div-heading(level='sm')= 'SM Heading' | 57 | +div-heading('sm')= 'SM Heading' |
56 | +div-heading(level='xs')= 'XS Heading' | 58 | +div-heading('xs')= 'XS Heading' |
57 | 59 | ||
58 | //----------------------------------------- | 60 | //----------------------------------------- |
59 | 61 | ||
60 | +h1-heading(level='xl')= 'Rule' | 62 | +h1-heading('xl')= 'Rule' |
61 | +rule(level='medium') | 63 | +rule('medium') |
62 | 64 | ||
63 | +box | 65 | +box |
64 | +div-heading(level='lg')= 'Heading' | 66 | +div-heading('lg')= 'Heading' |
65 | +rule(level='strong') | 67 | +rule('strong') |
66 | p= loremIpsum | 68 | p= loremIpsum |
67 | 69 | ||
68 | +box | 70 | +box |
69 | +div-heading(level='sm')= 'Heading' | 71 | +div-heading('sm')= 'Heading' |
70 | +rule(level='medium') | 72 | +rule('medium') |
71 | p= loremIpsum | 73 | p= loremIpsum |
72 | 74 | ||
73 | +box | 75 | +box |
74 | +div-heading(level='xs')= 'Heading' | 76 | +div-heading('xs')= 'Heading' |
75 | +rule(level='faint') | 77 | +rule('faint') |
76 | p= loremIpsum | 78 | p= loremIpsum |
77 | 79 | ||
78 | +box | 80 | +box |
79 | +rule(level='strong')= 'Strong' | 81 | +rule('strong')= 'Strong' |
80 | +rule(level='medium')= 'Medium' | 82 | +rule('medium')= 'Medium' |
81 | +rule(level='faint')= 'Faint' | 83 | +rule('faint')= 'Faint' |
82 | 84 | ||
83 | //----------------------------------------- | 85 | //----------------------------------------- |
84 | 86 | ||
85 | +h1-heading(level='xl')= 'Button' | 87 | +h1-heading('xl')= 'Button' |
86 | +rule(level='medium') | 88 | +rule('medium') |
87 | 89 | ||
88 | +box | 90 | +box |
89 | +a-button(variant='accent')= 'Button' | 91 | +a-button(variant='accent')= 'Button' |
@@ -114,8 +116,8 @@ html | |||
114 | 116 | ||
115 | //----------------------------------------- | 117 | //----------------------------------------- |
116 | 118 | ||
117 | +h1-heading(level='xl')= 'Text field' | 119 | +h1-heading('xl')= 'Text field' |
118 | +rule(level='medium') | 120 | +rule('medium') |
119 | 121 | ||
120 | +box | 122 | +box |
121 | +text-field(placeholder='Placeholder') | 123 | +text-field(placeholder='Placeholder') |
@@ -143,8 +145,8 @@ html | |||
143 | 145 | ||
144 | //----------------------------------------- | 146 | //----------------------------------------- |
145 | 147 | ||
146 | +h1-heading(level='xl')= 'Field label' | 148 | +h1-heading('xl')= 'Field label' |
147 | +rule(level='medium') | 149 | +rule('medium') |
148 | 150 | ||
149 | +box | 151 | +box |
150 | +field-label('First name') | 152 | +field-label('First name') |
@@ -220,8 +222,8 @@ html | |||
220 | 222 | ||
221 | //----------------------------------------- | 223 | //----------------------------------------- |
222 | 224 | ||
223 | +h1-heading(level='xl')= 'Radio' | 225 | +h1-heading('xl')= 'Radio' |
224 | +rule(level='medium') | 226 | +rule('medium') |
225 | 227 | ||
226 | +box | 228 | +box |
227 | +radio(name="radio-demo-1")= 'Cats' | 229 | +radio(name="radio-demo-1")= 'Cats' |
@@ -242,8 +244,8 @@ html | |||
242 | 244 | ||
243 | //----------------------------------------- | 245 | //----------------------------------------- |
244 | 246 | ||
245 | +h1-heading(level='xl')= 'Checkbox' | 247 | +h1-heading('xl')= 'Checkbox' |
246 | +rule(level='medium') | 248 | +rule('medium') |
247 | 249 | ||
248 | +box | 250 | +box |
249 | +checkbox(indeterminate=true)= 'Cats' | 251 | +checkbox(indeterminate=true)= 'Cats' |
@@ -264,8 +266,8 @@ html | |||
264 | 266 | ||
265 | //----------------------------------------- | 267 | //----------------------------------------- |
266 | 268 | ||
267 | +h1-heading(level='xl')= 'Switch' | 269 | +h1-heading('xl')= 'Switch' |
268 | +rule(level='medium') | 270 | +rule('medium') |
269 | 271 | ||
270 | +box | 272 | +box |
271 | +switch= 'Cats' | 273 | +switch= 'Cats' |
@@ -286,8 +288,8 @@ html | |||
286 | 288 | ||
287 | //----------------------------------------- | 289 | //----------------------------------------- |
288 | 290 | ||
289 | +h1-heading(level='xl')= 'Form' | 291 | +h1-heading('xl')= 'Form' |
290 | +rule(level='medium') | 292 | +rule('medium') |
291 | 293 | ||
292 | +box | 294 | +box |
293 | +form(labelsAlign="left") | 295 | +form(labelsAlign="left") |
@@ -319,8 +321,8 @@ html | |||
319 | 321 | ||
320 | //----------------------------------------- | 322 | //----------------------------------------- |
321 | 323 | ||
322 | +h1-heading(level='xl')= 'Action button' | 324 | +h1-heading('xl')= 'Action button' |
323 | +rule(level='medium') | 325 | +rule('medium') |
324 | 326 | ||
325 | +box | 327 | +box |
326 | +action-button= 'Idle' | 328 | +action-button= 'Idle' |
@@ -378,8 +380,8 @@ html | |||
378 | 380 | ||
379 | //----------------------------------------- | 381 | //----------------------------------------- |
380 | 382 | ||
381 | +h1-heading(level='xl')= 'Status indicator' | 383 | +h1-heading('xl')= 'Status indicator' |
382 | +rule(level='medium') | 384 | +rule('medium') |
383 | 385 | ||
384 | +box | 386 | +box |
385 | +status-indicator | 387 | +status-indicator |
@@ -392,8 +394,8 @@ html | |||
392 | 394 | ||
393 | //----------------------------------------- | 395 | //----------------------------------------- |
394 | 396 | ||
395 | +h1-heading(level='xl')= 'Avatar' | 397 | +h1-heading('xl')= 'Avatar' |
396 | +rule(level='medium') | 398 | +rule('medium') |
397 | 399 | ||
398 | +box | 400 | +box |
399 | div(style={ display: 'flex', gap: '.3em' }) | 401 | div(style={ display: 'flex', gap: '.3em' }) |
@@ -449,8 +451,8 @@ html | |||
449 | 451 | ||
450 | //----------------------------------------- | 452 | //----------------------------------------- |
451 | 453 | ||
452 | +h1-heading(level='xl')= 'Action menu' | 454 | +h1-heading('xl')= 'Action menu' |
453 | +rule(level='medium') | 455 | +rule('medium') |
454 | 456 | ||
455 | +box | 457 | +box |
456 | div(style={ display: 'flex', 'flex-direction': 'column', 'align-items': 'flex-start' }) | 458 | div(style={ display: 'flex', 'flex-direction': 'column', 'align-items': 'flex-start' }) |
@@ -472,8 +474,8 @@ html | |||
472 | 474 | ||
473 | //----------------------------------------- | 475 | //----------------------------------------- |
474 | 476 | ||
475 | +h1-heading(level='xl')= 'Menu' | 477 | +h1-heading('xl')= 'Menu' |
476 | +rule(level='medium') | 478 | +rule('medium') |
477 | 479 | ||
478 | +box | 480 | +box |
479 | div(style={ display: 'flex', gap: '3rem' }) | 481 | div(style={ display: 'flex', gap: '3rem' }) |
@@ -516,4 +518,22 @@ html | |||
516 | +menu-item | 518 | +menu-item |
517 | +user-card('johndoe', 270) | 519 | +user-card('johndoe', 270) |
518 | 520 | ||
521 | //----------------------------------------- | ||
522 | |||
523 | +h1-heading('xl')= 'Backdrop' | ||
524 | +rule('medium') | ||
525 | |||
526 | +box | ||
527 | +backdrop | ||
528 | |||
529 | //----------------------------------------- | ||
530 | |||
531 | +h1-heading('xl')= 'Dialog' | ||
532 | +rule('medium') | ||
533 | |||
534 | +box | ||
535 | +backdrop | ||
536 | +dialog('Lorem ipsum') | ||
537 | = loremIpsum | ||
538 | |||
519 | 539 | ||
diff --git a/tpl/objects/action-menu.pug b/tpl/objects/action-menu.pug index 8c1a584..e8cecb2 100644 --- a/tpl/objects/action-menu.pug +++ b/tpl/objects/action-menu.pug | |||
@@ -2,14 +2,7 @@ include icon.pug | |||
2 | include status-indicator.pug | 2 | include status-indicator.pug |
3 | 3 | ||
4 | mixin action-menu | 4 | mixin action-menu |
5 | - | 5 | .o-action-menu.u-ps.t-raised |
6 | let classes = { | ||
7 | 'o-action-menu': true, | ||
8 | 'o-action-menu--static': true, | ||
9 | 't-raised': true | ||
10 | } | ||
11 | |||
12 | div(class=classes) | ||
13 | block | 6 | block |
14 | 7 | ||
15 | mixin action-menu-item | 8 | mixin action-menu-item |
diff --git a/tpl/objects/backdrop.pug b/tpl/objects/backdrop.pug new file mode 100644 index 0000000..6ad72d7 --- /dev/null +++ b/tpl/objects/backdrop.pug | |||
@@ -0,0 +1,3 @@ | |||
1 | mixin backdrop | ||
2 | .o-backdrop.u-ps(style={ width: '100%', 'min-height': '5em' }) | ||
3 | block | ||
diff --git a/tpl/objects/dialog.pug b/tpl/objects/dialog.pug new file mode 100644 index 0000000..2cbbd4f --- /dev/null +++ b/tpl/objects/dialog.pug | |||
@@ -0,0 +1,16 @@ | |||
1 | include rule.pug | ||
2 | include button.pug | ||
3 | include heading.pug | ||
4 | |||
5 | mixin dialog(title) | ||
6 | .o-dialog.t-raised | ||
7 | header.o-dialog__header | ||
8 | +div-heading('lg')(class='o-dialog__title') | ||
9 | = title | ||
10 | +rule('medium') | ||
11 | section.o-dialog__body | ||
12 | block | ||
13 | footer.o-dialog__footer | ||
14 | +a-button(outline=true)= 'Cancel' | ||
15 | = ' ' | ||
16 | +a-button(outline=true variant='primary')= 'Continue' | ||
diff --git a/tpl/objects/heading.pug b/tpl/objects/heading.pug index 546df43..a0de4af 100644 --- a/tpl/objects/heading.pug +++ b/tpl/objects/heading.pug | |||
@@ -1,34 +1,34 @@ | |||
1 | mixin h1-heading | 1 | mixin h1-heading(level) |
2 | - let classes = ['o-heading', 'o-heading--' + attributes.level] | 2 | - let classes = ['o-heading', 'o-heading--' + level] |
3 | h1(class=classes) | 3 | h1(class=classes)&attributes(attributes) |
4 | block | 4 | block |
5 | 5 | ||
6 | mixin h2-heading | 6 | mixin h2-heading(level) |
7 | - let classes = ['o-heading', 'o-heading--' + attributes.level] | 7 | - let classes = ['o-heading', 'o-heading--' + level] |
8 | h2(class=classes) | 8 | h2(class=classes)&attributes(attributes) |
9 | block | 9 | block |
10 | 10 | ||
11 | mixin h3-heading | 11 | mixin h3-heading(level) |
12 | - let classes = ['o-heading', 'o-heading--' + attributes.level] | 12 | - let classes = ['o-heading', 'o-heading--' + level] |
13 | h3(class=classes) | 13 | h3(class=classes)&attributes(attributes) |
14 | block | 14 | block |
15 | 15 | ||
16 | mixin h4-heading | 16 | mixin h4-heading(level) |
17 | - let classes = ['o-heading', 'o-heading--' + attributes.level] | 17 | - let classes = ['o-heading', 'o-heading--' + level] |
18 | h4(class=classes) | 18 | h4(class=classes)&attributes(attributes) |
19 | block | 19 | block |
20 | 20 | ||
21 | mixin h5-heading | 21 | mixin h5-heading(level) |
22 | - let classes = ['o-heading', 'o-heading--' + attributes.level] | 22 | - let classes = ['o-heading', 'o-heading--' + level] |
23 | h5(class=classes) | 23 | h5(class=classes)&attributes(attributes) |
24 | block | 24 | block |
25 | 25 | ||
26 | mixin h6-heading | 26 | mixin h6-heading(level) |
27 | - let classes = ['o-heading', 'o-heading--' + attributes.level] | 27 | - let classes = ['o-heading', 'o-heading--' + level] |
28 | h6(class=classes) | 28 | h6(class=classes)&attributes(attributes) |
29 | block | 29 | block |
30 | 30 | ||
31 | mixin div-heading | 31 | mixin div-heading(level) |
32 | - let classes = ['o-heading', 'o-heading--' + attributes.level] | 32 | - let classes = ['o-heading', 'o-heading--' + level] |
33 | div(class=classes) | 33 | div(class=classes)&attributes(attributes) |
34 | block | 34 | block |
diff --git a/tpl/objects/rule.pug b/tpl/objects/rule.pug index 958ff18..63a039f 100644 --- a/tpl/objects/rule.pug +++ b/tpl/objects/rule.pug | |||
@@ -1,10 +1,10 @@ | |||
1 | mixin rule | 1 | mixin rule(level) |
2 | - | 2 | - |
3 | let classes = { | 3 | let classes = { |
4 | 'o-rule': true, | 4 | 'o-rule': true, |
5 | 'o-rule--labelled': !!block | 5 | 'o-rule--labelled': !!block, |
6 | ['o-rule--' + level]: true | ||
6 | } | 7 | } |
7 | classes['o-rule--' + attributes.level] = true | ||
8 | 8 | ||
9 | div(class=classes) | 9 | div(class=classes) |
10 | if block | 10 | if block |