From fc9b1fbc019939bb38b5d81edd45b7c9d3049a58 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
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(-)

(limited to 'src/objects')

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-54-g00ecf