89 lines
1.7 KiB
SCSS
89 lines
1.7 KiB
SCSS
// Form variables
|
|
$form-background: #f1f5f9;
|
|
|
|
.ds-form {
|
|
.form-group label {
|
|
transition: all 0.1s ease-in-out;
|
|
}
|
|
|
|
.form-group:focus-within {
|
|
label,
|
|
input,
|
|
select {
|
|
color: #313747 !important;
|
|
}
|
|
}
|
|
|
|
input,
|
|
input:-webkit-autofill,
|
|
select {
|
|
background-color: $form-background;
|
|
border-radius: 15px;
|
|
border: 1.75px solid transparent;
|
|
outline: 0;
|
|
padding: 1rem !important;
|
|
color: #757d94 !important;
|
|
|
|
&:focus,
|
|
&:active {
|
|
background-color: $form-background;
|
|
border: 1.75px solid #2962ff;
|
|
}
|
|
|
|
&:read-only {
|
|
background-color: #eaebee;
|
|
cursor: default;
|
|
color: #9aa2b8;
|
|
|
|
&:focus,
|
|
&:active {
|
|
border: 1.75px solid transparent;
|
|
color: #757d94;
|
|
}
|
|
}
|
|
}
|
|
|
|
select {
|
|
background-color: $form-background !important;
|
|
appearance: none;
|
|
cursor: pointer !important;
|
|
border: none;
|
|
outline: 0;
|
|
|
|
background: url(./../../img_datasurvey/down-arrow.svg) no-repeat right;
|
|
background-size: 3.5%;
|
|
-webkit-appearance: none;
|
|
background-position-x: 94%;
|
|
|
|
&:focus,
|
|
&:active {
|
|
background-color: $form-background !important;
|
|
border: 1.75px solid #2962ff !important;
|
|
}
|
|
|
|
option {
|
|
background-color: #fff !important;
|
|
color: #313747 !important;
|
|
padding: 1rem !important;
|
|
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
background-color: #efefef !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
label {
|
|
color: #757d94;
|
|
}
|
|
}
|
|
|
|
input:-internal-autofill-selected,
|
|
input:-webkit-autofill,
|
|
input:-webkit-autofill:hover,
|
|
input:-webkit-autofill:focus,
|
|
input:-webkit-autofill:active {
|
|
background-color: $form-background !important;
|
|
}
|