summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-03-09 19:55:45 +0100
committerVolpeon <git@volpeon.ink>2022-03-09 19:55:45 +0100
commitfc9b1fbc019939bb38b5d81edd45b7c9d3049a58 (patch)
tree6ac3a948537a7da63ca03d89e60c67ac78572cd2
parentFix menu header (diff)
downloadiro-design-fc9b1fbc019939bb38b5d81edd45b7c9d3049a58.tar.gz
iro-design-fc9b1fbc019939bb38b5d81edd45b7c9d3049a58.tar.bz2
iro-design-fc9b1fbc019939bb38b5d81edd45b7c9d3049a58.zip
Adjust text field to have same height as action button
-rw-r--r--src/objects/_text-field.scss18
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 @@
32@include iro.props-namespace('text-field') { 32@include iro.props-namespace('text-field') {
33 @include iro.props-store(( 33 @include iro.props-store((
34 --dims: ( 34 --dims: (
35 --pad-x: iro.fn-px-to-rem(10px), 35 --pad-x: fn.global-dim(--size --125),
36 --pad-y: iro.fn-px-to-rem(8px), 36 --pad-y: fn.global-dim(--size --125),
37 --border-width: fn.global-dim(--border-width --thin), 37 --border-width: fn.global-dim(--border-width --thin),
38 --border-radius: 2px, 38 --border-radius: 2px,
39 39
@@ -87,6 +87,8 @@
87 ), 'colors'); 87 ), 'colors');
88 88
89 @include iro.bem-object(iro.props-namespace()) { 89 @include iro.bem-object(iro.props-namespace()) {
90 $line-height: 1.4;
91
90 position: relative; 92 position: relative;
91 min-width: 0; 93 min-width: 0;
92 border-radius: fn.dim(--border-radius); 94 border-radius: fn.dim(--border-radius);
@@ -106,11 +108,13 @@
106 } 108 }
107 109
108 @include iro.bem-elem('native') { 110 @include iro.bem-elem('native') {
109 box-sizing: border-box; 111 box-sizing: border-box;
110 width: 100%; 112 width: 100%;
111 padding: fn.dim(--pad-y) fn.dim(--pad-x); 113 padding: calc(fn.dim(--pad-y) - .5em * ($line-height - 1)) fn.dim(--pad-x);
112 color: fn.color(--text); 114 border: 1px solid transparent;
113 resize: none; 115 color: fn.color(--text);
116 line-height: $line-height;
117 resize: none;
114 118
115 &::placeholder { 119 &::placeholder {
116 opacity: 1; 120 opacity: 1;