fix: consistent height and focus states

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

View File

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

View File

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