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

fix: consistent height and focus states

Browse Source
This commit is contained in:
Christian Andolf
2025-06-13 12:17:23 +02:00
parent 73884aa428
commit ce399e696d
4 changed files with 17 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/scandic-web/components/TempDesignSystem/Form/Country/country.module.css
View File

@@ -3,6 +3,7 @@
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);
position: relative; position: relative;
height: 56px;
&[data-required] .label::after { &[data-required] .label::after {
content: " *"; content: " *";
@@ -15,7 +16,8 @@
} }
&[data-focused] { &[data-focused] {
border-color: var(--Border-Interactive-Focus); outline-offset: -2px;
outline: 2px solid var(--Border-Interactive-Focus);
.button, .button,
.input { .input {
@@ -54,9 +56,9 @@
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
gap: var(--Space-x1); gap: var(--Space-x1);
height: 56px;
padding: var(--Space-x15); padding: var(--Space-x15);
width: 100%; width: 100%;
height: 100%;
} }
.displayText { .displayText {

11
apps/scandic-web/components/TempDesignSystem/Form/Phone/phone.module.css
View File

@@ -61,17 +61,22 @@
.select { .select {
align-content: center; align-content: center;
background-color: var(--Main-Grey-White); background-color: var(--Main-Grey-White);
border-color: var(--Scandic-Beige-40); border-color: var(--Border-Interactive-Default);
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-radius-md);
display: grid; display: grid;
gap: var(--Space-x05); gap: var(--Space-x05);
grid-template-rows: auto auto; grid-template-rows: auto auto;
height: 60px; height: 56px;
padding: var(--Space-x1) var(--Space-x2); padding: var(--Space-x15);
transition: border-color 200ms ease; transition: border-color 200ms ease;
width: 100%; width: 100%;
&:focus {
outline-offset: -2px;
outline: 2px solid var(--Border-Interactive-Focus);
}
} }
.select[aria-expanded="true"] .chevron { .select[aria-expanded="true"] .chevron {

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

@@ -5,8 +5,8 @@
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: 60px; height: 56px;
padding: var(--Space-x1) var(--Space-x2); padding: var(--Space-x15);
box-sizing: border-box; box-sizing: border-box;
cursor: text; cursor: text;

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

@@ -3,6 +3,7 @@
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;
&[data-required] .label::after { &[data-required] .label::after {
content: ' *'; content: ' *';
@@ -17,7 +18,8 @@
} }
} }
&[data-focused] { &[data-focused] {
border-color: var(--Border-Interactive-Focus); outline-offset: -2px;
outline: 2px solid var(--Border-Interactive-Focus);
.button, .button,
.input { .input {