From f932673fb4f6e6444cfdb50f5df4a4ab8465a038 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sun, 6 Feb 2022 11:24:41 +0100 Subject: Improved form --- src/layouts/_form.scss | 44 +++++++++++++++++++++----------------------- src/objects/_text-field.scss | 4 +++- tpl/index.pug | 2 +- tpl/objects/form.pug | 1 + 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 @@ )); @include iro.bem-layout(iro.props-namespace()) { - display: grid; - grid-template-columns: auto 1fr; - grid-template-rows: auto; - align-items: baseline; - gap: iro.props-get(--dims --item-spacing-y) iro.props-get(--dims --label-spacing-x); + display: flex; + flex-direction: column; + align-items: baseline; + gap: iro.props-get(--dims --item-spacing-y) iro.props-get(--dims --label-spacing-x); - @include iro.bem-elem('item') { - display: contents; - } - - @include iro.bem-elem('item-label') { - grid-column: 1; - } + @include iro.bem-modifier('labels-left', 'labels-right') { + display: grid; + grid-template-columns: auto 1fr; + grid-template-rows: auto; - @include iro.bem-elem('item-content') { - grid-column: 2; + @include iro.bem-elem('item') { + display: contents; + } + + @include iro.bem-elem('item-label') { + grid-column: 1; + padding-right: 0; + } + + @include iro.bem-elem('item-content') { + grid-column: 2; + margin-top: 0; + } } @include iro.bem-modifier('labels-right') { @@ -33,14 +40,5 @@ text-align: right; } } - - @include iro.bem-modifier('labels-above') { - display: flex; - flex-direction: column; - - @include iro.bem-elem('item') { - display: block; - } - } } } 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 @@ @include iro.bem-elem('native') { @include typography.set-font(vars.$font--main, (size: 1em, line-height: vars.$line-height)); + width: 100%; color: iro.props-get(--colors --text); resize: none; @@ -145,7 +146,8 @@ padding: 0; @include iro.bem-elem('native') { - padding: iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x); + box-sizing: border-box; + padding: iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x); } } 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 +rule(level='medium') +box - +form + +form(labelsAlign="left") +form-item('Username') +text-field(placeholder='Example: Volpeon') 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 mixin form form(class={ 'l-form': true, + 'l-form--labels-left': attributes.labelsAlign === 'left', 'l-form--labels-right': attributes.labelsAlign === 'right', 'l-form--labels-above': attributes.labelsAlign === 'above' }) -- cgit v1.2.3-70-g09d2