summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-03-08 22:00:33 +0100
committerVolpeon <git@volpeon.ink>2022-03-08 22:00:33 +0100
commitbdd534a2fea536f4143d29dd26138a4705c1f825 (patch)
tree3ff5dbc4f9de8e3c77918f444a1bc20550db764d
parentDialog (diff)
downloadiro-design-bdd534a2fea536f4143d29dd26138a4705c1f825.tar.gz
iro-design-bdd534a2fea536f4143d29dd26138a4705c1f825.tar.bz2
iro-design-bdd534a2fea536f4143d29dd26138a4705c1f825.zip
Improved dialog
Diffstat
-rw-r--r--src/_layouts.scss2
-rw-r--r--src/layouts/_card.scss9
-rw-r--r--src/layouts/_flex.scss23
-rw-r--r--src/layouts/_overflow.scss9
-rw-r--r--src/objects/_dialog.scss115
-rw-r--r--src/objects/_lightbox.scss2
-rw-r--r--src/objects/_menu.scss18
-rw-r--r--src/objects/_rule.scss8
-rw-r--r--tpl/index.pug28
-rw-r--r--tpl/objects/dialog.pug36
-rw-r--r--tpl/objects/menu.pug7
11 files changed, 192 insertions, 65 deletions
diff --git a/src/_layouts.scss b/src/_layouts.scss
index 99a003e..3a4c32b 100644
--- a/src/_layouts.scss
+++ b/src/_layouts.scss
@@ -2,3 +2,5 @@
2@use 'layouts/container'; 2@use 'layouts/container';
3@use 'layouts/button-group'; 3@use 'layouts/button-group';
4@use 'layouts/form'; 4@use 'layouts/form';
5@use 'layouts/flex';
6@use 'layouts/overflow';
diff --git a/src/layouts/_card.scss b/src/layouts/_card.scss
index 3022da0..e6c379d 100644
--- a/src/layouts/_card.scss
+++ b/src/layouts/_card.scss
@@ -14,6 +14,10 @@
14 --200: ( 14 --200: (
15 --pad-x: fn.global-dim(--size --300), 15 --pad-x: fn.global-dim(--size --300),
16 --pad-y: fn.global-dim(--size --150), 16 --pad-y: fn.global-dim(--size --150),
17 ),
18 --300: (
19 --pad-x: fn.global-dim(--size --450),
20 --pad-y: fn.global-dim(--size --225),
17 ) 21 )
18 ) 22 )
19 ), 'dims'); 23 ), 'dims');
@@ -35,6 +39,11 @@
35 gap: fn.dim(--200 --pad-x); 39 gap: fn.dim(--200 --pad-x);
36 } 40 }
37 41
42 @include iro.bem-modifier('300') {
43 padding: fn.dim(--300 --pad-y) fn.dim(--300 --pad-x);
44 gap: fn.dim(--300 --pad-x);
45 }
46
38 @include iro.bem-modifier('flush') { 47 @include iro.bem-modifier('flush') {
39 padding: 0; 48 padding: 0;
40 } 49 }
diff --git a/src/layouts/_flex.scss b/src/layouts/_flex.scss
new file mode 100644
index 0000000..e8cdbaa
--- /dev/null
+++ b/src/layouts/_flex.scss
@@ -0,0 +1,23 @@
1@use 'iro-sass/src/index' as iro;
2
3@include iro.props-namespace('flex') {
4 @include iro.bem-layout(iro.props-namespace()) {
5 display: flex;
6
7 @include iro.bem-modifier('align-stretch') {
8 align-items: stretch;
9 }
10
11 @include iro.bem-modifier('align-center') {
12 align-items: center;
13 }
14
15 @include iro.bem-modifier('align-start') {
16 align-items: flex-start;
17 }
18
19 @include iro.bem-modifier('align-end') {
20 align-items: flex-end;
21 }
22 }
23}
diff --git a/src/layouts/_overflow.scss b/src/layouts/_overflow.scss
new file mode 100644
index 0000000..d3af570
--- /dev/null
+++ b/src/layouts/_overflow.scss
@@ -0,0 +1,9 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('overflow') {
5 @include iro.bem-layout(iro.props-namespace()) {
6 overflow: auto;
7 scrollbar-color: fn.global-color(--obj-lo) transparent;
8 }
9}
diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss
index d5b6ed9..9c61e93 100644
--- a/src/objects/_dialog.scss
+++ b/src/objects/_dialog.scss
@@ -4,13 +4,15 @@
4@include iro.props-namespace('dialog') { 4@include iro.props-namespace('dialog') {
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --pad-x: fn.global-dim(--size --300), 7 --pad-x: fn.global-dim(--size --300),
8 --pad-y: fn.global-dim(--size --300), 8 --pad-y: fn.global-dim(--size --300),
9 --width-sm: iro.fn-px-to-rem(500px), 9 --width-sm: iro.fn-px-to-rem(500px),
10 --width-md: iro.fn-px-to-rem(800px), 10 --width-md: iro.fn-px-to-rem(800px),
11 --width-lg: iro.fn-px-to-rem(1100px), 11 --width-lg: iro.fn-px-to-rem(1100px),
12 --rounding: 3px, 12 --rounding: 3px,
13 --title-body-spacing: fn.global-dim(--size --200), 13 --sidebar: (
14 --pad-x: fn.global-dim(--size --150),
15 )
14 ), 16 ),
15 ), 'dims'); 17 ), 'dims');
16 18
@@ -24,24 +26,40 @@
24 @include iro.props-store(( 26 @include iro.props-store((
25 --colors: ( 27 --colors: (
26 --shadow: 0 .2em .5em rgba(#000, .2), 28 --shadow: 0 .2em .5em rgba(#000, .2),
29 --sidebar: (
30 --bg: fn.global-color(--bg),
31 --border: fn.global-color(--obj),
32 )
27 ), 33 ),
28 ), 'colors'); 34 ), 'colors');
29 35
36 @include iro.props-store((
37 --colors: (
38 --sidebar: (
39 --bg: fn.global-color(--bg-hi),
40 --border: fn.global-color(--bg-hi),
41 ),
42 ),
43 ), 'colors-dark');
44
30 @include iro.bem-object(iro.props-namespace()) { 45 @include iro.bem-object(iro.props-namespace()) {
31 display: grid; 46 display: grid;
32 grid-template-rows: auto auto 1fr auto; 47 grid-template-rows: auto 1fr auto;
33 grid-template-areas: 'header' 'rule' 'body' 'footer'; 48 grid-template-columns: auto 1fr;
34 position: relative; 49 grid-template-areas:
35 box-sizing: border-box; 50 'sidebar header'
36 width: 100%; 51 'sidebar body'
37 max-width: fn.dim(--width-md); 52 'sidebar footer';
38 margin: 0 auto; 53 position: relative;
39 padding: fn.dim(--pad-y) fn.dim(--pad-x); 54 box-sizing: border-box;
40 overflow: hidden; 55 width: 100%;
41 border-radius: fn.dim(--rounding); 56 max-width: fn.dim(--width-md);
42 background-color: fn.global-color(--bg); 57 margin: 0 auto;
43 box-shadow: fn.color(--shadow); 58 overflow: hidden;
44 color: fn.global-color(--fg); 59 border-radius: fn.dim(--rounding);
60 background-color: fn.global-color(--bg);
61 box-shadow: fn.color(--shadow);
62 color: fn.global-color(--fg);
45 63
46 @include iro.bem-modifier('sm') { 64 @include iro.bem-modifier('sm') {
47 max-width: fn.dim(--width-sm); 65 max-width: fn.dim(--width-sm);
@@ -51,39 +69,52 @@
51 max-width: fn.dim(--width-lg); 69 max-width: fn.dim(--width-lg);
52 } 70 }
53 71
54 @include iro.bem-elem('header') { 72 @include iro.bem-elem('sidebar') {
55 grid-area: header; 73 grid-area: sidebar;
56 margin-bottom: fn.dim(--title-body-spacing); 74 padding: fn.dim(--pad-y) fn.dim(--sidebar --pad-x);
75 border-right: 1px solid fn.color(--sidebar --border);
76 background-color: fn.color(--sidebar --bg);
57 } 77 }
58 78
59 @include iro.bem-elem('close-btn') { 79 @include iro.bem-elem('header') {
60 position: absolute; 80 grid-area: header;
61 top: iro.fn-px-to-rem(12px); 81 margin: fn.dim(--pad-y) fn.dim(--pad-x) 0;
62 right: iro.fn-px-to-rem(12px);
63 font-size: fn.global-dim(--font-size --150);
64 }
65 82
66 @include iro.bem-elem('rule') { 83 @include iro.bem-sibling-elem('body') {
67 grid-area: rule; 84 &::before {
68 margin: 0; 85 display: none;
86 }
87 }
69 } 88 }
70 89
71 @include iro.bem-elem('title') { 90 @include iro.bem-elem('body') {
72 margin-top: 0; 91 grid-area: body;
92 min-height: 0;
93 margin: fn.dim(--pad-y) fn.dim(--pad-x);
94
95 &::before {
96 content: '';
97 width: fn.global-dim(--size --500);
98 height: fn.global-dim(--size --500);
99 float: right;
100 }
73 } 101 }
74 102
75 @include iro.bem-elem('body') { 103 @include iro.bem-elem('close-btn') {
76 grid-area: body; 104 position: absolute;
77 min-height: 0; 105 top: fn.global-dim(--size --150);
78 margin-top: fn.dim(--title-body-spacing); 106 right: fn.global-dim(--size --150);
79 overflow: auto; 107 font-size: fn.global-dim(--font-size --150);
80 scrollbar-color: fn.global-color(--obj-lo) transparent;
81 } 108 }
82 109
83 @include iro.bem-elem('footer') { 110 @include iro.bem-elem('footer') {
84 grid-area: footer; 111 grid-area: footer;
85 justify-content: flex-end; 112 justify-content: flex-end;
86 margin-top: fn.dim(--pad-y); 113 margin: fn.dim(--pad-y) fn.dim(--pad-x);
114 }
115
116 @include iro.bem-elem('title') {
117 margin-top: 0;
87 } 118 }
88 } 119 }
89} 120}
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index 6d83f01..f3addf7 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -10,7 +10,7 @@
10 --thumbnail: ( 10 --thumbnail: (
11 --size: fn.global-dim(--size --800), 11 --size: fn.global-dim(--size --800),
12 --spacing: fn.global-dim(--size --100), 12 --spacing: fn.global-dim(--size --100),
13 --selected: 3px, //fn.global-dim(--border-width --medium), 13 --selected: 2px, //fn.global-dim(--border-width --medium),
14 ), 14 ),
15 --button: ( 15 --button: (
16 --font-size: fn.global-dim(--font-size --200), 16 --font-size: fn.global-dim(--font-size --200),
diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss
index f03dbc1..40610e0 100644
--- a/src/objects/_menu.scss
+++ b/src/objects/_menu.scss
@@ -9,8 +9,9 @@
9 ), 9 ),
10 --separator: fn.global-dim(--size --150), 10 --separator: fn.global-dim(--size --150),
11 --item: ( 11 --item: (
12 --pad-x: fn.global-dim(--size --150), 12 --pad-x: fn.global-dim(--size --150),
13 --pad-y: fn.global-dim(--size --100), 13 --pad-y: fn.global-dim(--size --100),
14 --rounding: 3px,
14 ), 15 ),
15 ), 16 ),
16 ), 'dims'); 17 ), 'dims');
@@ -52,12 +53,13 @@
52 } 53 }
53 54
54 @include iro.bem-elem('item') { 55 @include iro.bem-elem('item') {
55 display: block; 56 display: block;
56 box-sizing: border-box; 57 box-sizing: border-box;
57 width: 100%; 58 width: 100%;
58 padding: calc(fn.dim(--item --pad-y) - 2px) calc(fn.dim(--item --pad-x) - 2px); 59 padding: calc(fn.dim(--item --pad-y) - 2px) calc(fn.dim(--item --pad-x) - 2px);
59 border: 2px solid transparent; 60 border: 2px solid transparent;
60 color: fn.color(--item --disabled --label); 61 border-radius: fn.dim(--item --rounding);
62 color: fn.color(--item --disabled --label);
61 63
62 &:link, 64 &:link,
63 &:visited, 65 &:visited,
diff --git a/src/objects/_rule.scss b/src/objects/_rule.scss
index 777e864..693729a 100644
--- a/src/objects/_rule.scss
+++ b/src/objects/_rule.scss
@@ -45,6 +45,14 @@
45 margin-bottom: fn.dim(--margin-y); 45 margin-bottom: fn.dim(--margin-y);
46 background-color: fn.color(--strong --bg); 46 background-color: fn.color(--strong --bg);
47 47
48 @include iro.bem-modifier('vertical') {
49 width: 1px;
50 height: auto;
51 margin-top: 0;
52 margin-bottom: 0;
53 background-color: fn.color(--faint --bg);
54 }
55
48 @include iro.bem-modifier('medium') { 56 @include iro.bem-modifier('medium') {
49 height: fn.dim(--medium --border-width); 57 height: fn.dim(--medium --border-width);
50 background-color: fn.color(--medium --bg); 58 background-color: fn.color(--medium --bg);
diff --git a/tpl/index.pug b/tpl/index.pug
index 623a513..98aec2e 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -533,16 +533,30 @@ html
533 +box 533 +box
534 +backdrop 534 +backdrop
535 +dialog('Lorem ipsum') 535 +dialog('Lorem ipsum')
536 = loremIpsum 536 +slot('body')
537 = loremIpsum
537 538
538 +box 539 +box
539 +backdrop 540 +backdrop
540 +dialog('Lorem ipsum') 541 +dialog('Lorem ipsum')(bodyClass='l-overflow')
541 p.u-mt-0= loremIpsum 542 +slot('body')
542 p= loremIpsum 543 p.u-mt-0= loremIpsum
543 p= loremIpsum 544 p= loremIpsum
544 p= loremIpsum 545 p= loremIpsum
545 p= loremIpsum 546 p= loremIpsum
547 p= loremIpsum
548
549 +box
550 +backdrop
551 +dialog('Lorem ipsum')(noRule=true)
552 +slot('sidebar')
553 +menu(style={ 'min-width': '10em' })
554 +menu-header= '#channel'
555 +menu-item(icon='bookmark', selected=true)= 'Bookmark'
556 +menu-item(icon='tags')= 'Tags'
557 +slot('body')
558 p.u-mt-0= loremIpsum
559
546 560
547 //----------------------------------------- 561 //-----------------------------------------
548 562
diff --git a/tpl/objects/dialog.pug b/tpl/objects/dialog.pug
index 0ee52df..3a47b2f 100644
--- a/tpl/objects/dialog.pug
+++ b/tpl/objects/dialog.pug
@@ -4,15 +4,39 @@ include heading.pug
4include action-button.pug 4include action-button.pug
5 5
6mixin dialog(title) 6mixin dialog(title)
7 .o-dialog.t-raised 7 - const slots = {}
8
9 mixin slot(key)
10 - slots[key] = block
11
12 -
13 block ? block() : undefined
14
15 let classes = {
16 'o-dialog': true,
17 't-raised': true,
18 'o-dialog--split': !!slots.sidebar,
19 }
20
21 let bodyClass = {
22 'o-dialog__body': true
23 }
24 if (attributes.bodyClass) {
25 bodyClass[attributes.bodyClass] = true;
26 }
27
28 div(class=classes)
29 if slots.sidebar
30 .o-dialog__sidebar
31 - slots.sidebar()
8 header.o-dialog__header 32 header.o-dialog__header
9 +div-heading('lg')(class='o-dialog__title') 33 +div-heading('lg')(class='o-dialog__title')
10 = title 34 = title
11 +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn') 35 section(class=bodyClass)
12 +rule('medium')(class='o-dialog__rule') 36 +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn')
13 section.o-dialog__body 37 if slots.body
14 block 38 - slots.body()
15 footer.o-dialog__footer.l-button-group 39 footer.o-dialog__footer.l-button-group
16 +a-button(outline=true)= 'Cancel' 40 +a-button(outline=true)= 'Cancel'
17 = ' ' 41 = ' '
18 +a-button(outline=true variant='primary')= 'Continue' 42 +a-button(variant='accent')= 'Continue'
diff --git a/tpl/objects/menu.pug b/tpl/objects/menu.pug
index 0a654ce..84321d7 100644
--- a/tpl/objects/menu.pug
+++ b/tpl/objects/menu.pug
@@ -3,7 +3,12 @@ include status-indicator.pug
3include action-button.pug 3include action-button.pug
4 4
5mixin menu 5mixin menu
6 .o-menu 6 -
7 let classes = {
8 'o-menu': true,
9 }
10
11 div(class=classes)&attributes(attributes)
7 block 12 block
8 13
9mixin menu-item 14mixin menu-item
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 06:01:59 +0000