125 lines
No EOL
2.1 KiB
SCSS
125 lines
No EOL
2.1 KiB
SCSS
@import "../../../css/static/mixin";
|
|
@import "../../../css/static/properties";
|
|
|
|
.container {
|
|
border-radius: .2em;
|
|
border: 1px solid #111112;
|
|
|
|
background-color: #121213;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: stretch;
|
|
|
|
color: #b3b3b3;
|
|
|
|
&.size-normal {
|
|
height: 2em;
|
|
}
|
|
|
|
&.size-large {
|
|
height: 2.5em;
|
|
}
|
|
|
|
&.size-small {
|
|
height: 1.7em;
|
|
}
|
|
|
|
@include placeholder(&) {
|
|
color: #606060;
|
|
};
|
|
|
|
.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: #180d0d;
|
|
border-color: #721c1c;
|
|
|
|
background-image: unset!important;
|
|
}
|
|
|
|
&:focus, &:focus-within {
|
|
background-color: #131b22;
|
|
border-color: #284262;
|
|
|
|
color: #e1e2e3;
|
|
|
|
.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: #1a1819;
|
|
}
|
|
|
|
&.noRightIcon {
|
|
input, select {
|
|
padding-right: .5em;
|
|
}
|
|
}
|
|
|
|
&.noLeftIcon {
|
|
input, select {
|
|
padding-left: .5em;
|
|
}
|
|
}
|
|
|
|
@include transition($button_hover_animation_time ease-in-out);
|
|
} |