142 lines
2.8 KiB
SCSS
142 lines
2.8 KiB
SCSS
@import "../../../css/static/mixin";
|
|
@import "../../../css/static/properties";
|
|
|
|
html:root {
|
|
--input-field-border: #111112;
|
|
--input-field-background: #121213;
|
|
--input-field-text: #b3b3b3;
|
|
--input-field-placeholder: #606060;
|
|
|
|
--input-field-disabled-background: #1a1819;
|
|
|
|
--input-field-focus-border: #111112;
|
|
--input-field-focus-background: #121213;
|
|
--input-field-focus-text: #b3b3b3;
|
|
|
|
--input-field-invalid-border: #721c1c;
|
|
--input-field-invalid-background: #180d0d;
|
|
--input-field-invalid-text: #b3b3b3;
|
|
}
|
|
|
|
.container {
|
|
border-radius: .2em;
|
|
border: 1px solid var(--input-field-border);
|
|
|
|
background-color: var(--input-field-background);
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: stretch;
|
|
|
|
color: var(--input-field-text);
|
|
|
|
&.size-normal {
|
|
height: 2em;
|
|
}
|
|
|
|
&.size-large {
|
|
height: 2.5em;
|
|
}
|
|
|
|
&.size-small {
|
|
height: 1.7em;
|
|
}
|
|
|
|
@include placeholder(&) {
|
|
color: var(--input-field-placeholder);
|
|
};
|
|
|
|
.prefix {
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
|
|
margin: 0;
|
|
|
|
line-height: initial;
|
|
align-self: center;
|
|
padding: 0 .5em;
|
|
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
|
|
opacity: 1;
|
|
|
|
@include transition($button_hover_animation_time ease-in-out);
|
|
}
|
|
|
|
&.is-invalid {
|
|
background-color: var(--input-field-invalid-background);
|
|
border-color: var(--input-field-invalid-border);
|
|
color: var(--input-field-invalid-text);
|
|
|
|
background-image: unset!important;
|
|
}
|
|
|
|
&:focus, &:focus-within {
|
|
background-color: var(--input-field-focus-background);
|
|
border-color: var(--input-field-focus-border);
|
|
|
|
color: var(--input-field-focus-text);
|
|
|
|
.prefix {
|
|
width: 0;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
input, select, .inputBox {
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
|
|
background: transparent;
|
|
|
|
border: none;
|
|
outline: none;
|
|
margin: 0;
|
|
|
|
//color: #b3b3b3;
|
|
min-width: 2em;
|
|
|
|
&.editable {
|
|
cursor: text;
|
|
}
|
|
}
|
|
|
|
.inputBox {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.prefix + input {
|
|
padding-left: 0;
|
|
}
|
|
|
|
|
|
&:focus, &:focus-within {
|
|
.prefix + input {
|
|
padding-left: .5em;
|
|
}
|
|
}
|
|
|
|
&.disabled, &:disabled {
|
|
background-color: var(--input-field-disabled-background);
|
|
}
|
|
|
|
&.noRightIcon {
|
|
input, select {
|
|
padding-right: .5em;
|
|
}
|
|
}
|
|
|
|
&.noLeftIcon {
|
|
input, select {
|
|
padding-left: .5em;
|
|
}
|
|
}
|
|
|
|
@include transition($button_hover_animation_time ease-in-out);
|
|
} |