summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/_utils.scss8
-rw-r--r--src/index.scss2
-rw-r--r--src/objects/_action-menu.scss10
-rw-r--r--src/objects/_backdrop.scss36
-rw-r--r--src/objects/_dialog.scss57
-rw-r--r--tpl/index.pug106
-rw-r--r--tpl/objects/action-menu.pug9
-rw-r--r--tpl/objects/backdrop.pug3
-rw-r--r--tpl/objects/dialog.pug16
-rw-r--r--tpl/objects/heading.pug42
-rw-r--r--tpl/objects/rule.pug8
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
17include objects/avatar.pug 17include objects/avatar.pug
18include objects/action-menu.pug 18include objects/action-menu.pug
19include objects/menu.pug 19include objects/menu.pug
20include objects/backdrop.pug
21include objects/dialog.pug
20 22
21mixin box 23mixin 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
2include status-indicator.pug 2include status-indicator.pug
3 3
4mixin action-menu 4mixin 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
15mixin action-menu-item 8mixin 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 @@
1mixin 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 @@
1include rule.pug
2include button.pug
3include heading.pug
4
5mixin 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 @@
1mixin h1-heading 1mixin 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
6mixin h2-heading 6mixin 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
11mixin h3-heading 11mixin 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
16mixin h4-heading 16mixin 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
21mixin h5-heading 21mixin 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
26mixin h6-heading 26mixin 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
31mixin div-heading 31mixin 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 @@
1mixin rule 1mixin 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
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 06:39:54 +0000