scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: use exported variable for input height

Browse Source
This commit is contained in:
Christian Andolf
2025-06-16 14:03:56 +02:00
parent 603c7dd2bf
commit c476f29512
3 changed files with 17 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/design-system/lib/components/Input/input.module.css
View File

@@ -1,3 +1,6 @@
@value globals: "../../styles/globals.css";
@value inputContainerHeight, inputExpandedHeight from globals;
.container { .container {
align-content: center; align-content: center;
background-color: var(--Surface-Primary-Default); background-color: var(--Surface-Primary-Default);
@@ -5,7 +8,7 @@
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-radius-md);
display: grid; display: grid;
min-width: 0; /* allow shrinkage */ min-width: 0; /* allow shrinkage */
height: 56px; height: inputContainerHeight;
padding: 0 var(--Space-x15); padding: 0 var(--Space-x15);
box-sizing: border-box; box-sizing: border-box;
cursor: text; cursor: text;
@@ -43,7 +46,7 @@
&:focus, &:focus,
&:placeholder-shown, &:placeholder-shown,
&[value]:not([value='']) { &[value]:not([value='']) {
height: 24px; height: inputExpandedHeight;
outline: none; outline: none;
} }
@@ -54,7 +57,7 @@
@media (hover: hover) { @media (hover: hover) {
.input:active:not(:disabled) { .input:active:not(:disabled) {
height: 24px; height: inputExpandedHeight;
outline: none; outline: none;
} }
} }

13
packages/design-system/lib/components/Select/select.module.css
View File

@@ -1,9 +1,12 @@
@value globals: "../../styles/globals.css";
@value inputContainerHeight, inputExpandedHeight from globals;
.select { .select {
position: relative; position: relative;
background-color: var(--Surface-UI-Fill-Default); background-color: var(--Surface-UI-Fill-Default);
border: 1px solid var(--Border-Interactive-Default); border: 1px solid var(--Border-Interactive-Default);
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-radius-md);
height: 56px; height: inputContainerHeight;
box-sizing: border-box; box-sizing: border-box;
&[data-required] .label::after { &[data-required] .label::after {
@@ -15,7 +18,7 @@
} }
.selectedText { .selectedText {
min-height: 24px; min-height: inputExpandedHeight;
} }
} }
&[data-focused] { &[data-focused] {
@@ -27,7 +30,7 @@
outline: none; outline: none;
} }
.input { .input {
min-height: 24px; min-height: inputExpandedHeight;
} }
.label { .label {
color: var(--Text-Interactive-Focus); color: var(--Text-Interactive-Focus);
@@ -84,7 +87,7 @@
width: 100%; width: 100%;
&[value]:not([value='']) { &[value]:not([value='']) {
min-height: 24px; min-height: inputExpandedHeight;
} }
} }
@@ -95,7 +98,7 @@
} }
.selectedText:not(:empty) { .selectedText:not(:empty) {
min-height: 24px; min-height: inputExpandedHeight;
} }
.displayText { .displayText {

3
packages/design-system/lib/styles/globals.css
View File

@@ -1,3 +1,6 @@
@value inputContainerHeight: 56px;
@value inputExpandedHeight: 24px;
* { * {
margin: 0; margin: 0;
} }