45d1155054
fixed incorrect html with multiple interactive elements inside label fixed inconsistent placeholder attribute handling between browsers removed active state so not to prevent iOS from focusing inputs
60 lines
1.2 KiB
CSS
60 lines
1.2 KiB
CSS
.container {
|
|
align-content: center;
|
|
background-color: var(--Main-Grey-White);
|
|
border-color: var(--Scandic-Beige-40);
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
border-radius: var(--Corner-radius-md);
|
|
display: grid;
|
|
min-width: 0; /* allow shrinkage */
|
|
height: 60px;
|
|
padding: var(--Spacing-x1) var(--Spacing-x2);
|
|
transition: border-color 200ms ease;
|
|
}
|
|
|
|
.container:has(.input:focus) {
|
|
border-color: var(--Scandic-Blue-90);
|
|
}
|
|
|
|
.container:has(.input:disabled) {
|
|
background-color: var(--Main-Grey-10);
|
|
border: none;
|
|
color: var(--Main-Grey-40);
|
|
}
|
|
|
|
.container:has(.input[data-invalid="true"], .input[aria-invalid="true"]) {
|
|
border-color: var(--Scandic-Red-60);
|
|
}
|
|
|
|
.input {
|
|
background: none;
|
|
border: none;
|
|
color: var(--Main-Grey-100);
|
|
height: 18px;
|
|
margin: 0;
|
|
order: 2;
|
|
overflow: visible;
|
|
padding: 0;
|
|
}
|
|
|
|
.container:has(.input:placeholder-shown) {
|
|
align-content: space-around;
|
|
gap: var(--Spacing-x-half);
|
|
}
|
|
|
|
.input:not(:focus):not(:placeholder-shown) {
|
|
height: 1px;
|
|
transition: height 150ms ease;
|
|
}
|
|
|
|
.input:focus,
|
|
.input:focus:placeholder-shown {
|
|
height: 18px;
|
|
transition: height 150ms ease;
|
|
outline: none;
|
|
}
|
|
|
|
.input:disabled {
|
|
color: var(--Main-Grey-40);
|
|
}
|