summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-02-06 11:24:41 +0100
committerVolpeon <git@volpeon.ink>2022-02-06 11:24:41 +0100
commitf932673fb4f6e6444cfdb50f5df4a4ab8465a038 (patch)
tree75052efa371dacce844180e43dc929602b571d6d
parentAdded form (diff)
downloadiro-design-f932673fb4f6e6444cfdb50f5df4a4ab8465a038.tar.gz
iro-design-f932673fb4f6e6444cfdb50f5df4a4ab8465a038.tar.bz2
iro-design-f932673fb4f6e6444cfdb50f5df4a4ab8465a038.zip
Improved form
-rw-r--r--src/layouts/_form.scss44
-rw-r--r--src/objects/_text-field.scss4
-rw-r--r--tpl/index.pug2
-rw-r--r--tpl/objects/form.pug1
4 files changed, 26 insertions, 25 deletions
diff --git a/src/layouts/_form.scss b/src/layouts/_form.scss
index 9e6520f..3c7edcb 100644
--- a/src/layouts/_form.scss
+++ b/src/layouts/_form.scss
@@ -10,22 +10,29 @@
10 )); 10 ));
11 11
12 @include iro.bem-layout(iro.props-namespace()) { 12 @include iro.bem-layout(iro.props-namespace()) {
13 display: grid; 13 display: flex;
14 grid-template-columns: auto 1fr; 14 flex-direction: column;
15 grid-template-rows: auto; 15 align-items: baseline;
16 align-items: baseline; 16 gap: iro.props-get(--dims --item-spacing-y) iro.props-get(--dims --label-spacing-x);
17 gap: iro.props-get(--dims --item-spacing-y) iro.props-get(--dims --label-spacing-x);
18 17
19 @include iro.bem-elem('item') { 18 @include iro.bem-modifier('labels-left', 'labels-right') {
20 display: contents; 19 display: grid;
21 } 20 grid-template-columns: auto 1fr;
22 21 grid-template-rows: auto;
23 @include iro.bem-elem('item-label') {
24 grid-column: 1;
25 }
26 22
27 @include iro.bem-elem('item-content') { 23 @include iro.bem-elem('item') {
28 grid-column: 2; 24 display: contents;
25 }
26
27 @include iro.bem-elem('item-label') {
28 grid-column: 1;
29 padding-right: 0;
30 }
31
32 @include iro.bem-elem('item-content') {
33 grid-column: 2;
34 margin-top: 0;
35 }
29 } 36 }
30 37
31 @include iro.bem-modifier('labels-right') { 38 @include iro.bem-modifier('labels-right') {
@@ -33,14 +40,5 @@
33 text-align: right; 40 text-align: right;
34 } 41 }
35 } 42 }
36
37 @include iro.bem-modifier('labels-above') {
38 display: flex;
39 flex-direction: column;
40
41 @include iro.bem-elem('item') {
42 display: block;
43 }
44 }
45 } 43 }
46} 44}
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss
index 4201f00..2ea2739 100644
--- a/src/objects/_text-field.scss
+++ b/src/objects/_text-field.scss
@@ -78,6 +78,7 @@
78 @include iro.bem-elem('native') { 78 @include iro.bem-elem('native') {
79 @include typography.set-font(vars.$font--main, (size: 1em, line-height: vars.$line-height)); 79 @include typography.set-font(vars.$font--main, (size: 1em, line-height: vars.$line-height));
80 80
81 width: 100%;
81 color: iro.props-get(--colors --text); 82 color: iro.props-get(--colors --text);
82 resize: none; 83 resize: none;
83 84
@@ -145,7 +146,8 @@
145 padding: 0; 146 padding: 0;
146 147
147 @include iro.bem-elem('native') { 148 @include iro.bem-elem('native') {
148 padding: iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x); 149 box-sizing: border-box;
150 padding: iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x);
149 } 151 }
150 } 152 }
151 153
diff --git a/tpl/index.pug b/tpl/index.pug
index 2ebb625..6971faa 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -276,7 +276,7 @@ html
276 +rule(level='medium') 276 +rule(level='medium')
277 277
278 +box 278 +box
279 +form 279 +form(labelsAlign="left")
280 +form-item('Username') 280 +form-item('Username')
281 +text-field(placeholder='Example: Volpeon') 281 +text-field(placeholder='Example: Volpeon')
282 282
diff --git a/tpl/objects/form.pug b/tpl/objects/form.pug
index 496ed48..24ac3f0 100644
--- a/tpl/objects/form.pug
+++ b/tpl/objects/form.pug
@@ -3,6 +3,7 @@ include field-label.pug
3mixin form 3mixin form
4 form(class={ 4 form(class={
5 'l-form': true, 5 'l-form': true,
6 'l-form--labels-left': attributes.labelsAlign === 'left',
6 'l-form--labels-right': attributes.labelsAlign === 'right', 7 'l-form--labels-right': attributes.labelsAlign === 'right',
7 'l-form--labels-above': attributes.labelsAlign === 'above' 8 'l-form--labels-above': attributes.labelsAlign === 'above'
8 }) 9 })