70 lines
1.3 KiB
SCSS
70 lines
1.3 KiB
SCSS
@use 'sass:color';
|
|
|
|
.base {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
&:not(:last-child):not(.noMargin) {
|
|
margin-bottom: var(--gutter);
|
|
}
|
|
}
|
|
|
|
.label {
|
|
order: 1;
|
|
font-weight: bold;
|
|
margin-bottom: var(--form-label-margin);
|
|
|
|
&:has(input:invalid) {
|
|
color: var(--form-invalid-color);
|
|
}
|
|
|
|
&:has(input:valid) {
|
|
color: var(--form-valid-color);
|
|
}
|
|
}
|
|
|
|
.element {
|
|
order: 2;
|
|
width: 100%;
|
|
box-shadow: none;
|
|
border: 1px solid var(--form-border-color);
|
|
padding: var(--form-element-padding);
|
|
font-family: var(--body-font-family);
|
|
background: white;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
border-color: var(--color-blue);
|
|
// box-shadow: 0 0 5px 0px color.scale(var(--color-blue), $alpha: -20%);
|
|
}
|
|
|
|
.touched &:invalid {
|
|
border-color: var(--form-invalid-color);
|
|
|
|
~ .label {
|
|
color: var(--form-invalid-color);
|
|
}
|
|
|
|
&:focus {
|
|
// box-shadow: 0 0 5px 0px color.scale(var(--form-invalid-color), $alpha: -20%);
|
|
}
|
|
}
|
|
|
|
.touched &:valid {
|
|
border-color: var(--form-valid-color);
|
|
|
|
~ .label {
|
|
color: var(--form-valid-color);
|
|
}
|
|
|
|
&:focus {
|
|
// box-shadow: 0 0 5px 0px color.scale(var(--form-valid-color), $alpha: -20%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.errorLabel {
|
|
color: var(--form-invalid-color);
|
|
margin-top: var(--form-label-margin);
|
|
}
|