Files
explainegy-nextjs/styles/inputs.scss
2023-01-15 02:48:17 +01:00

74 lines
1.4 KiB
SCSS

@import "variables_colors.scss";
@import "variables.scss";
input {
border: 2px solid rgba(95, 95, 95, 0.5);
background-color: transparent;
height: 30px;
padding: 5px 5px 5px 5px;
color: var(--color-font);
border-radius: 3px;
outline: none;
transition: all 50ms linear;
&::placeholder {
font-weight: bold;
}
&:hover {
border-color: rgba(177, 177, 177, 0.608);
}
&:focus {
border-color: var(--color-accent);
}
&.error {
border-color: var(--color-error);
}
&.success {
border-color: var(--color-success);
}
&.warning {
border-color: var(--color-warning);
}
&.info {
border-color: var(--color-info);
}
}
.react-select-container {
.react-select__control {
background-color: var(--color-background-secondary);
border-color: rgba(95, 95, 95, 0.5);
transition: none;
&:hover {
border-color: rgba(95, 95, 95, 0.5);
}
}
.react-select__menu {
background-color: var(--color-background-secondary);
border: 1px solid rgba(95, 95, 95, 0.5);
}
.react-select__option {
background-color: var(--color-background-secondary);
&:hover {
background-color: var(--bg-primary);
}
}
.react-select__indicator-separator {
background-color: rgba(95, 95, 95, 0.5);
}
.react-select__placeholder,
.react-select__single-value {
color: var(--font-color);
}
}