From bfd2f3750498826f457f96b7dd89476589fa31cd Mon Sep 17 00:00:00 2001 From: Volpeon Date: Tue, 25 Jun 2024 19:17:42 +0200 Subject: Fix form --- src/layouts/_form.scss | 20 ++++++++++---------- src/objects/_field-label.scss | 4 ++-- src/objects/_switch.scss | 6 +++--- tpl/objects/form.pug | 4 ++-- tpl/views/form.pug | 43 ++++++++++++++++++++++--------------------- 5 files changed, 39 insertions(+), 38 deletions(-) diff --git a/src/layouts/_form.scss b/src/layouts/_form.scss index 9c741ec..f6b60ea 100644 --- a/src/layouts/_form.scss +++ b/src/layouts/_form.scss @@ -6,8 +6,8 @@ @include iro.props-namespace('form') { @include iro.props-store(( --dims: ( - --item-spacing-y: fn.global-dim(--size --325), - --label-spacing-x: fn.global-dim(--size --325), + --item-spacing-b: fn.global-dim(--size --325), + --label-spacing-i: fn.global-dim(--size --325), --hint-font-size: fn.global-dim(--font-size --75), ), )); @@ -15,7 +15,7 @@ @include iro.bem-layout(iro.props-namespace()) { display: flex; flex-direction: column; - gap: fn.dim(--item-spacing-y) fn.dim(--label-spacing-x); + gap: fn.dim(--item-spacing-b) fn.dim(--label-spacing-i); @include iro.bem-elem('item') { display: block; @@ -32,7 +32,7 @@ align-items: flex-end; } - @include iro.bem-modifier('labels-left', 'labels-right') { + @include iro.bem-modifier('labels-start', 'labels-end') { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto; @@ -43,19 +43,19 @@ } @include iro.bem-elem('item-label') { - grid-column: 1; - padding-right: 0; + grid-column: 1; + padding-inline-end: 0; } @include iro.bem-elem('item-content') { - grid-column: 2; - margin-top: 0; + grid-column: 2; + margin-block-start: 0; } } - @include iro.bem-modifier('labels-right') { + @include iro.bem-modifier('labels-end') { @include iro.bem-elem('item-label') { - text-align: right; + text-align: end; } } } diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss index 9f267cb..1518ea6 100644 --- a/src/objects/_field-label.scss +++ b/src/objects/_field-label.scss @@ -35,8 +35,8 @@ } @include iro.bem-elem('content') { - display: block; - inline-size: 100%; + display: block; + flex: 1 1 auto; } @include iro.bem-elem('hint') { diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss index a67aa8d..e1f1132 100644 --- a/src/objects/_switch.scss +++ b/src/objects/_switch.scss @@ -16,17 +16,17 @@ --key-focus: ( --border: fn.global-dim(--key-focus --border), --border-offset: fn.global-dim(--key-focus --border-offset), - --outline: fn.global-dim(--key-focus --border), + --outline: fn.global-dim(--key-focus --outline), ), ), --colors: ( --track-bg: fn.global-color(--border), - --handle-border: fn.global-color(--text-mute), + --handle-border: fn.global-color(--text-mute-more), --handle-bg: fn.global-color(--base --50), --hover: ( --label: fn.global-color(--heading), - --handle-border: fn.global-color(--text), + --handle-border: fn.global-color(--text-mute), ), --accent: ( --handle-border: fn.global-color(--accent --900), diff --git a/tpl/objects/form.pug b/tpl/objects/form.pug index 24ac3f0..cbb1758 100644 --- a/tpl/objects/form.pug +++ b/tpl/objects/form.pug @@ -3,8 +3,8 @@ 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-start': attributes.labelsAlign === 'start', + 'l-form--labels-end': attributes.labelsAlign === 'end', 'l-form--labels-above': attributes.labelsAlign === 'above' }) block diff --git a/tpl/views/form.pug b/tpl/views/form.pug index 859e9a6..5b24757 100644 --- a/tpl/views/form.pug +++ b/tpl/views/form.pug @@ -1,29 +1,30 @@ mixin view-form +view('form', 'Form') - .c-box - +form(labelsAlign="left") - +form-item('Username') - +text-field(placeholder='Example: Volpeon') + each align in ['above', 'start', 'end'] + .c-box + +form(labelsAlign=align) + +form-item('Username') + +text-field(placeholder='Example: Volpeon') - +form-item('Password', 'At least 6 characters, all characters allowed') - +text-field(placeholder='Example: hunter2' type='password') + +form-item('Password', 'At least 6 characters, all characters allowed') + +text-field(placeholder='Example: hunter2' type='password') - +form-item('Bio') - +text-field(placeholder='Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam...') + +form-item('Bio') + +text-field(placeholder='Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam...') - +form-item('Favorite animal') - +radio(name="form-demo-1" checked=true)= 'Foxes' - +radio(name="form-demo-1")= 'Other' + +form-item('Favorite animal') + +radio(name="form-demo-1" checked=true)= 'Foxes' + +radio(name="form-demo-1")= 'Other' - +form-item('Notification settings') - +switch= 'In-app notifications' - br - +switch= 'Desktop notifications' - br - +switch= 'Email notifications' + +form-item('Notification settings') + +switch= 'In-app notifications' + br + +switch= 'Desktop notifications' + br + +switch= 'Email notifications' - +form-item('') - +checkbox= 'I\'ve read and accept the terms and conditions' + +form-item('') + +checkbox= 'I\'ve read and accept the terms and conditions' - +form-item('') - +a-button(variant='primary')= 'Register' + +form-item('') + +a-button(variant='primary')= 'Register' -- cgit v1.2.3-70-g09d2