summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--src/index.scss1
-rw-r--r--src/layouts/_button-group.scss15
-rw-r--r--src/objects/_dialog.scss4
-rw-r--r--tpl/index.pug42
-rw-r--r--tpl/objects/dialog.pug2
5 files changed, 36 insertions, 28 deletions
diff --git a/src/index.scss b/src/index.scss
index 3796c18..21054db 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -6,6 +6,7 @@
6 6
7@use 'layouts/card'; 7@use 'layouts/card';
8@use 'layouts/container'; 8@use 'layouts/container';
9@use 'layouts/button-group';
9 10
10@use 'objects/icon'; 11@use 'objects/icon';
11@use 'objects/heading'; 12@use 'objects/heading';
diff --git a/src/layouts/_button-group.scss b/src/layouts/_button-group.scss
new file mode 100644
index 0000000..aee2000
--- /dev/null
+++ b/src/layouts/_button-group.scss
@@ -0,0 +1,15 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('button-group') {
5 @include iro.props-store((
6 --dims: (
7 --spacing: 1rem
8 ),
9 ), 'dims');
10
11 @include iro.bem-layout(iro.props-namespace()) {
12 display: flex;
13 gap: 1rem;
14 }
15}
diff --git a/src/objects/_dialog.scss b/src/objects/_dialog.scss
index 453b32b..4f18b08 100644
--- a/src/objects/_dialog.scss
+++ b/src/objects/_dialog.scss
@@ -50,8 +50,8 @@
50 } 50 }
51 51
52 @include iro.bem-elem('footer') { 52 @include iro.bem-elem('footer') {
53 padding-top: fn.dim(--pad-y); 53 justify-content: flex-end;
54 text-align: right; 54 padding-top: fn.dim(--pad-y);
55 } 55 }
56 } 56 }
57} 57}
diff --git a/tpl/index.pug b/tpl/index.pug
index 0b74ed8..605fa35 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -88,31 +88,23 @@ html
88 +rule('medium') 88 +rule('medium')
89 89
90 +box 90 +box
91 +a-button(variant='accent')= 'Button' 91 .l-button-group
92 = ' ' 92 +a-button(variant='accent')= 'Button'
93 +a-button(variant='accent' disabled=true)= 'Button' 93 +a-button(variant='accent' disabled=true)= 'Button'
94 = ' ' 94 +a-button(variant='accent' outline=true)= 'Button'
95 +a-button(variant='accent' outline=true)= 'Button' 95 +a-button(variant='accent' outline=true disabled=true)= 'Button'
96 = ' ' 96 br
97 +a-button(variant='accent' outline=true disabled=true)= 'Button' 97 .l-button-group
98 br 98 +a-button(variant='primary')= 'Button'
99 br 99 +a-button(variant='primary' disabled=true)= 'Button'
100 +a-button(variant='primary')= 'Button' 100 +a-button(variant='primary' outline=true)= 'Button'
101 = ' ' 101 +a-button(variant='primary' outline=true disabled=true)= 'Button'
102 +a-button(variant='primary' disabled=true)= 'Button' 102 br
103 = ' ' 103 .l-button-group
104 +a-button(variant='primary' outline=true)= 'Button' 104 +a-button(variant='secondary')= 'Button'
105 = ' ' 105 +a-button(variant='secondary' disabled=true)= 'Button'
106 +a-button(variant='primary' outline=true disabled=true)= 'Button' 106 +a-button(variant='secondary' outline=true)= 'Button'
107 br 107 +a-button(variant='secondary' outline=true disabled=true)= 'Button'
108 br
109 +a-button(variant='secondary')= 'Button'
110 = ' '
111 +a-button(variant='secondary' disabled=true)= 'Button'
112 = ' '
113 +a-button(variant='secondary' outline=true)= 'Button'
114 = ' '
115 +a-button(variant='secondary' outline=true disabled=true)= 'Button'
116 108
117 //----------------------------------------- 109 //-----------------------------------------
118 110
diff --git a/tpl/objects/dialog.pug b/tpl/objects/dialog.pug
index 2cbbd4f..3cbe95e 100644
--- a/tpl/objects/dialog.pug
+++ b/tpl/objects/dialog.pug
@@ -10,7 +10,7 @@ mixin dialog(title)
10 +rule('medium') 10 +rule('medium')
11 section.o-dialog__body 11 section.o-dialog__body
12 block 12 block
13 footer.o-dialog__footer 13 footer.o-dialog__footer.l-button-group
14 +a-button(outline=true)= 'Cancel' 14 +a-button(outline=true)= 'Cancel'
15 = ' ' 15 = ' '
16 +a-button(outline=true variant='primary')= 'Continue' 16 +a-button(outline=true variant='primary')= 'Continue'