diff options
-rw-r--r-- | src/index.scss | 1 | ||||
-rw-r--r-- | src/layouts/_button-group.scss | 15 | ||||
-rw-r--r-- | src/objects/_dialog.scss | 4 | ||||
-rw-r--r-- | tpl/index.pug | 42 | ||||
-rw-r--r-- | tpl/objects/dialog.pug | 2 |
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' |