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