frontend/src/components/Textarea/Textarea.module.scss
2023-09-09 00:53:05 +03:00

136 lines
2.3 KiB
SCSS

@import 'src/app/styles/vars';
.Input {
@include text-body-m-regular;
@include transition(border-color);
position: relative;
display: flex;
align-items: center;
padding: 15px $spacing-small-x;
color: $color-text-primary;
overflow: hidden;
border: 1px solid $color-border-default;
border-radius: $radius-small;
background-color: $color-background-primary;
cursor: text;
box-sizing: border-box;
overflow-y: auto;
word-wrap: break-word;
&:hover:not(.Input_focus, .Input_error) {
border-color: $color-border-hover;
}
}
.Input_error {
border-color: $color-system-error;
}
.Input_focus {
border-color: $color-border-active;
}
.Input_disabled {
color: $color-text-tertiary;
border-color: transparent;
background: $color-on-surface-dark-300;
cursor: default;
&:hover {
box-shadow: none;
}
}
.Input__input {
@include reset-default-input;
@include remove-autofill-style;
position: relative;
flex-grow: 1;
min-width: 0;
height: 100%;
//resize: none;
//white-space: break-spaces;
&:placeholder-shown + .Input__clear {
display: none;
}
&[type='number'] {
appearance: textfield;
}
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
appearance: none;
}
&:-webkit-autofill,
&:-webkit-autofill:hover,
&:-webkit-autofill:focus,
&:-webkit-autofill:active {
caret-color: $color-text-primary;
-webkit-text-fill-color: $color-text-primary;
}
}
.Input__input_disabled {
cursor: default;
}
.Input__input::placeholder {
color: $color-text-secondary;
opacity: 1;
}
.Input__icon {
display: flex;
flex: 0 0 auto;
align-items: center;
max-height: 100%;
color: $color-on-surface-light-300;
}
.Input__icon_active {
@include transition(color);
cursor: pointer;
&:hover {
color: $color-on-surface-light-200;
}
}
.Input__icon_left {
justify-content: flex-start;
margin-right: $spacing-small-3x;
margin-left: -$spacing-small-3x;
}
.Input__icon_right {
justify-content: flex-end;
margin-left: $spacing-small-3x;
&:last-child {
margin-right: -$spacing-small-3x;
}
}
.Input__icon_clear {
@include transition(color);
position: relative;
cursor: pointer;
&:hover {
color: $color-on-surface-light-200;
}
}
.Input_disabled .Input__icon_clear {
pointer-events: none;
}