From fc9b1fbc019939bb38b5d81edd45b7c9d3049a58 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 9 Mar 2022 19:55:45 +0100 Subject: Adjust text field to have same height as action button --- src/objects/_text-field.scss | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss index 84c3299..e9330ce 100644 --- a/src/objects/_text-field.scss +++ b/src/objects/_text-field.scss @@ -32,8 +32,8 @@ @include iro.props-namespace('text-field') { @include iro.props-store(( --dims: ( - --pad-x: iro.fn-px-to-rem(10px), - --pad-y: iro.fn-px-to-rem(8px), + --pad-x: fn.global-dim(--size --125), + --pad-y: fn.global-dim(--size --125), --border-width: fn.global-dim(--border-width --thin), --border-radius: 2px, @@ -87,6 +87,8 @@ ), 'colors'); @include iro.bem-object(iro.props-namespace()) { + $line-height: 1.4; + position: relative; min-width: 0; border-radius: fn.dim(--border-radius); @@ -106,11 +108,13 @@ } @include iro.bem-elem('native') { - box-sizing: border-box; - width: 100%; - padding: fn.dim(--pad-y) fn.dim(--pad-x); - color: fn.color(--text); - resize: none; + box-sizing: border-box; + width: 100%; + padding: calc(fn.dim(--pad-y) - .5em * ($line-height - 1)) fn.dim(--pad-x); + border: 1px solid transparent; + color: fn.color(--text); + line-height: $line-height; + resize: none; &::placeholder { opacity: 1; -- cgit v1.2.3-70-g09d2