Adjust text field to have same height as action button

1 files 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;