From b45574b83da655d9b5e48d5ef5ce7f2e147e3bbf Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 12 Feb 2022 12:13:52 +0100 Subject: Text field update --- package.json | 2 +- src/layouts/_card.scss | 4 ++++ src/objects/_text-field.scss | 18 +++++------------- tpl/index.pug | 39 ++++++++++++++++++--------------------- tpl/objects/text-field.pug | 29 ++++++++++++++++++++++++----- 5 files changed, 52 insertions(+), 40 deletions(-) diff --git a/package.json b/package.json index b1233f2..de64393 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "build": "npm run build:app && npm run build:style && npm run build:icons && npm run build:assets", "build:assets": "cp -r static/* public/", "build:app": "pug tpl/index.pug -p tpl --out public/", - "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js check trash bookmark tags user chevron-right hash x public/icons.svg", + "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js check trash bookmark tags user chevron-right hash x send smile public/icons.svg", "build:style": "sass --load-path=node_modules src/index.scss public/style.css", "lint:style": "stylelint \"src/**/*.scss\"", "fix:style": "stylelint \"src/**/*.scss\" --fix", diff --git a/src/layouts/_card.scss b/src/layouts/_card.scss index 75c16ff..19e097c 100644 --- a/src/layouts/_card.scss +++ b/src/layouts/_card.scss @@ -30,6 +30,10 @@ padding: 0; } + @include iro.bem-modifier('gapless') { + gap: 0; + } + @include iro.bem-elem('block') { flex: 0 0 auto; diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss index 1bd7ea1..b18b404 100644 --- a/src/objects/_text-field.scss +++ b/src/objects/_text-field.scss @@ -89,7 +89,6 @@ @include iro.bem-object(iro.props-namespace()) { position: relative; min-width: 0; - padding: fn.dim(--pad-y) fn.dim(--pad-x); background-color: fn.color(--bg); @include iro.bem-elem('bg') { @@ -106,9 +105,11 @@ } @include iro.bem-elem('native') { - width: 100%; - color: fn.color(--text); - resize: none; + box-sizing: border-box; + width: 100%; + padding: fn.dim(--pad-y) fn.dim(--pad-x); + color: fn.color(--text); + resize: none; &::placeholder { opacity: 1; @@ -167,15 +168,6 @@ } } - @include iro.bem-modifier('fill') { - padding: 0; - - @include iro.bem-elem('native') { - box-sizing: border-box; - padding: fn.dim(--pad-y) fn.dim(--pad-x); - } - } - @include iro.bem-is('disabled') { background-color: fn.color(--disabled --bg); box-shadow: fn.color(--disabled --shadow); diff --git a/tpl/index.pug b/tpl/index.pug index a6a8f87..365ca52 100644 --- a/tpl/index.pug +++ b/tpl/index.pug @@ -112,28 +112,25 @@ html +rule('medium') +box - +text-field(placeholder='Placeholder') - br - br - +text-field(value='Just landed in L.A.') - br - br - +text-field(value='Readonly' readonly=true) - br - br - +text-field(value='Incorrect input' pattern='a+' required=true) - br - br - +text-field(placeholder='Placeholder' disabled=true) - br - br - +text-field(value='Just landed in L.A.' disabled=true) - br - br - +text-field(value='Readonly' readonly=true disabled=true) - br + div(style={ display: 'flex', gap: '1rem' }) + +text-field(placeholder='Placeholder') + +text-field(value='Just landed in L.A.') + +text-field(value='Readonly' readonly=true) + +text-field(value='Incorrect input' pattern='a+' required=true) br - +text-field(value='Incorrect input' pattern='a+' required=true disabled=true) + div(style={ display: 'flex', gap: '1rem' }) + +text-field(placeholder='Placeholder' disabled=true) + +text-field(value='Just landed in L.A.' disabled=true) + +text-field(value='Readonly' readonly=true disabled=true) + +text-field(value='Incorrect input' pattern='a+' required=true disabled=true) + br + div + +text-field(placeholder='Just landed in L.A.') + +slot('pre') + +action-button(quiet=true selected=true class='l-card__block')= 'Volpeon' + +slot('post') + +action-button(quiet=true icon='smile' class='l-card__block') + +action-button(quiet=true icon='send' class='l-card__block') //----------------------------------------- diff --git a/tpl/objects/text-field.pug b/tpl/objects/text-field.pug index c933b69..24f8e21 100644 --- a/tpl/objects/text-field.pug +++ b/tpl/objects/text-field.pug @@ -1,13 +1,32 @@ include icon.pug mixin text-field + - const slots = {} + + mixin slot(key) + - slots[key] = block + - + block ? block() : undefined + let classes = { - 'o-text-field': true, - 'is-invalid': attributes.invalid, - 'is-disabled': attributes.disabled, + 'o-text-field': true, + 'o-text-field--ext': attributes.ext, + 'is-invalid': attributes.invalid, + 'is-disabled': attributes.disabled, + 'l-card': !!block, + 'l-card--flush': !!block, + 'l-card--gapless': !!block } div(class=classes aria-disabled=attributes.disabled && String(attributes.disabled)) - input(class='o-text-field__native')&attributes(attributes) - .o-text-field__bg + if !!block + if slots.pre + - slots.pre() + input.o-text-field__native.l-card__block.l-card__block--main&attributes(attributes) + if slots.post + - slots.post() + .o-text-field__bg + else + input.o-text-field__native&attributes(attributes) + .o-text-field__bg -- cgit v1.2.3-70-g09d2