diff --git a/.changeset/curvy-bobcats-tie.md b/.changeset/curvy-bobcats-tie.md new file mode 100644 index 000000000..53c93a37f --- /dev/null +++ b/.changeset/curvy-bobcats-tie.md @@ -0,0 +1,5 @@ +--- +"@ebay/skin": patch +--- + +fix(textbox): fixed large textbox height diff --git a/dist/textbox/textbox.css b/dist/textbox/textbox.css index bee6a2b75..c10917b72 100644 --- a/dist/textbox/textbox.css +++ b/dist/textbox/textbox.css @@ -1,3 +1,8 @@ +:root { + --input-default-height: 40px; + --input-large-height: 48px; +} + .textbox { align-items: center; background-color: var( @@ -148,8 +153,12 @@ textarea.textbox__control::placeholder { opacity: 1; } -.textbox--large > input.textbox__control { - height: 48px; +input.textbox__control { + height: calc(var(--input-default-height) - 2px); +} + +.textbox--large input.textbox__control { + height: calc(var(--input-large-height) - 2px); } .textbox .icon-btn > svg, diff --git a/src/sass/textbox/textbox.scss b/src/sass/textbox/textbox.scss index 54077b92b..7af997226 100644 --- a/src/sass/textbox/textbox.scss +++ b/src/sass/textbox/textbox.scss @@ -1,6 +1,11 @@ @import "../variables/variables"; @import "../mixins/private/token-mixins"; +:root { + --input-default-height: 40px; + --input-large-height: 48px; +} + .textbox { @include color-token( textbox-foreground-color, @@ -193,8 +198,12 @@ textarea.textbox__control { } } -.textbox--large > input.textbox__control { - height: 48px; +input.textbox__control { + height: calc(var(--input-default-height) - 2px); +} + +.textbox--large input.textbox__control { + height: calc(var(--input-large-height) - 2px); } .textbox > svg,