970 lines
17 KiB
SCSS
970 lines
17 KiB
SCSS
@import "properties";
|
|
@import "mixin";
|
|
|
|
:global {
|
|
.modal {
|
|
color: #999999; /* base color */
|
|
|
|
overflow: auto; /* allow scrolling if a modal is too big */
|
|
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
|
|
padding-right: 5%;
|
|
padding-left: 5%;
|
|
|
|
z-index: 100000;
|
|
position: fixed;
|
|
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
|
|
display: none;
|
|
|
|
margin-top: -7em;
|
|
opacity: 0;
|
|
|
|
$animation_length: .3s;
|
|
@include transition(opacity $animation_length ease-in, margin-top $animation_length ease-in);
|
|
&.shown {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
|
|
margin-top: 0;
|
|
opacity: 1;
|
|
|
|
@include transition(opacity $animation_length ease-out, margin-top $animation_length ease-out);
|
|
}
|
|
|
|
.modal-dialog {
|
|
display: block;
|
|
|
|
margin: 1.75rem 0;
|
|
|
|
/* width calculations */
|
|
align-items: center;
|
|
|
|
/* height stuff */
|
|
max-height: calc(100% - 3.5em);
|
|
|
|
.modal-content {
|
|
background: #19191b;
|
|
|
|
border: 1px solid black;
|
|
border-radius: $border_radius_middle;
|
|
|
|
width: max-content;
|
|
max-width: 100%;
|
|
min-width: 20em;
|
|
|
|
min-height: min-content;
|
|
|
|
/* align us in the center */
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
|
|
flex-shrink: 1;
|
|
flex-grow: 0; /* we dont want a grow over the limit set within the content, but we want to shrink the content if necessary */
|
|
align-self: center;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: stretch;
|
|
|
|
.modal-header, .modal-footer {
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.modal-header {
|
|
background-color: #222224;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: stretch;
|
|
|
|
padding: .25em;
|
|
|
|
.container-icon, .container-close {
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.container-close {
|
|
height: 1.4em;
|
|
width: 1.4em;
|
|
|
|
padding: .2em;
|
|
border-radius: .2em;
|
|
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
background-color: #1b1b1c;
|
|
}
|
|
}
|
|
|
|
.container-icon {
|
|
margin-right: .25em;
|
|
|
|
img {
|
|
height: 1em;
|
|
width: 1em;
|
|
}
|
|
}
|
|
|
|
.modal-title, modal-header {
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
|
|
color: #9d9d9e;
|
|
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
h5 {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.modal-body {
|
|
max-width: 100%;
|
|
min-width: 20em; /* may adjust if needed */
|
|
|
|
max-height: calc(100vh - 8em);
|
|
min-height: 5em;
|
|
|
|
overflow-y: auto;
|
|
overflow-x: auto;
|
|
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal {
|
|
//General style
|
|
.properties {
|
|
display: grid;
|
|
grid-template-columns: minmax(min-content, max-content) auto;
|
|
grid-column-gap: 10px;
|
|
grid-row-gap: 3px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
hr {
|
|
border-top: 3px double #8c8b8b;
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
.input_error {
|
|
border-radius: 1px;
|
|
border: solid red;
|
|
}
|
|
|
|
.properties_misc {
|
|
.complains {
|
|
display: grid;
|
|
grid-template-columns: auto auto auto;
|
|
grid-template-rows: auto auto;
|
|
grid-column-gap: 5px;
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
.container {
|
|
padding: 6px;
|
|
}
|
|
|
|
.modal-dialog {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: stretch;
|
|
|
|
&.modal-dialog-centered {
|
|
justify-content: stretch;
|
|
}
|
|
}
|
|
|
|
.modal-content {
|
|
/* max-height: 500px; */
|
|
min-height: 0; /* required for moz */
|
|
flex-direction: column;
|
|
justify-content: stretch;
|
|
|
|
.modal-header {
|
|
flex-shrink: 0;
|
|
flex-grow: 0;
|
|
|
|
&.modal-header-error {
|
|
//background-color: #ce0000;
|
|
background-color: hsla(0, 100%, 25%, 1);
|
|
}
|
|
|
|
&.modal-header-info {
|
|
background-color: hsla(199, 98%, 20%, 1);
|
|
}
|
|
|
|
&.modal-header-warning, &.modal-header-info, &.modal-header-error {
|
|
border-top-left-radius: .125rem;
|
|
border-top-right-radius: .125rem;
|
|
}
|
|
}
|
|
|
|
.modal-body {
|
|
padding: 20px 24px 24px;
|
|
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
|
|
input.is-invalid {
|
|
background-image: linear-gradient(0deg, #d50000 2px, rgba(213, 0, 0, 0) 0), linear-gradient(0deg, rgba(241, 1, 1, 0.61) 1px, transparent 0);
|
|
}
|
|
}
|
|
|
|
.modal-footer {
|
|
flex-shrink: 0;
|
|
flex-grow: 0;
|
|
|
|
&.modal-footer-button-group {
|
|
button {
|
|
min-width: 100px;
|
|
}
|
|
|
|
button:not(:first-of-type) {
|
|
margin-left: 15px;
|
|
};
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* special general modals */
|
|
.modal {
|
|
.modal-body.modal-blue {
|
|
border-left: 2px solid #0a73d2;
|
|
}
|
|
.modal-body.modal-green {
|
|
border-left: 2px solid #00d400;
|
|
}
|
|
.modal-body.modal-red {
|
|
border: none;
|
|
border-left: 2px solid #d50000;
|
|
}
|
|
|
|
.modal-body.modal-body-input {
|
|
color: #999999;
|
|
|
|
width: 100%;
|
|
|
|
.form-group:not(.with-title) {
|
|
padding-top: .75rem;
|
|
}
|
|
|
|
input.is-invalid ~ .container-help-feedback > .invalid-feedback {
|
|
display: block;
|
|
}
|
|
|
|
.container-help-feedback {
|
|
position: absolute;
|
|
}
|
|
|
|
.buttons {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
|
|
button {
|
|
width: 6em;
|
|
|
|
&:not(:last-of-type) {
|
|
margin-right: 1em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-body.modal-body-yesno {
|
|
color: #999999;
|
|
|
|
border: none;
|
|
border-left: 2px solid #d50000;
|
|
|
|
width: 100%;
|
|
|
|
.buttons {
|
|
padding-top: 2em;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
|
|
button {
|
|
width: 6em;
|
|
|
|
&:not(:last-of-type) {
|
|
margin-right: 1em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal-body.modal-info, .modal-body.modal-error {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
|
|
/* Input group */
|
|
.form-group {
|
|
position: relative;
|
|
|
|
padding-top: 1.75rem; /* the label above (might be floating) */
|
|
margin-bottom: 1rem; /* for invalid label/help label */
|
|
|
|
.form-control {
|
|
display: block;
|
|
width: 100%;
|
|
padding: .4375rem 0;
|
|
font-size: 1rem;
|
|
line-height: 1.5;
|
|
color: #cdd1d0;
|
|
background-color: transparent;
|
|
background-clip: padding-box;
|
|
border: 1px solid rgba(0, 0, 0, .26);
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
|
|
@include transition(border-color .15s ease-in-out, box-shadow .15s ease-in-out);
|
|
}
|
|
|
|
label {
|
|
color: #999999;
|
|
|
|
top: 1rem;
|
|
left: 0;
|
|
font-size: .75rem;
|
|
|
|
position: absolute;
|
|
pointer-events: none;
|
|
transition: all .3s ease;
|
|
|
|
line-height: 1;
|
|
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
|
|
max-width: 100%;
|
|
|
|
&.bmd-label-floating {
|
|
will-change: left, top, contents;
|
|
color: #999999;
|
|
top: 2.42rem;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
@include transition(color $button_hover_animation_time ease-in-out, top $button_hover_animation_time ease-in-out, font-size $button_hover_animation_time ease-in-out);
|
|
}
|
|
|
|
|
|
&:focus-within {
|
|
label {
|
|
color: #3c74a2;
|
|
|
|
&.bmd-label-floating {
|
|
//color: #343434;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:focus-within, &.is-filled {
|
|
label.bmd-label-floating {
|
|
top: 1rem;
|
|
font-size: .75rem;
|
|
color: #3c74a2;
|
|
}
|
|
}
|
|
|
|
.form-control {
|
|
height: 2.25em;
|
|
|
|
background: no-repeat bottom, 50% calc(100% - 1px);
|
|
background-size: 0 100%, 100% 100%;
|
|
border: 0;
|
|
transition: background 0s ease-out;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
|
|
|
|
background-image: linear-gradient(0deg, #008aff 2px, rgba(0, 150, 136, 0) 0), linear-gradient(0deg, #393939 1px, transparent 0);
|
|
|
|
&:focus {
|
|
height: 2.25em;
|
|
|
|
background-size: 100% 100%, 100% 100%;
|
|
transition-duration: .3s;
|
|
|
|
color: #ced3d3;
|
|
background-color: transparent;
|
|
outline: 0;
|
|
}
|
|
|
|
&.is-invalid {
|
|
background-image: linear-gradient(0deg, #d50000 2px,rgba(213,0,0,0) 0),linear-gradient(0deg,rgba(241,1,1,.61) 1px,transparent 0);
|
|
}
|
|
}
|
|
|
|
.invalid-feedback {
|
|
position: absolute;
|
|
opacity: 0;
|
|
width: 100%;
|
|
margin-top: .25rem;
|
|
font-size: 80%;
|
|
color: #f44336;
|
|
|
|
@include transition(opacity .25s ease-in-out);
|
|
}
|
|
|
|
.form-control.is-invalid ~ .invalid-feedback {
|
|
opacity: 1;
|
|
}
|
|
|
|
|
|
&.is-invalid {
|
|
.form-control {
|
|
background-image: linear-gradient(0deg, #d50000 2px,rgba(213,0,0,0) 0),linear-gradient(0deg,rgba(241,1,1,.61) 1px,transparent 0);
|
|
}
|
|
|
|
.invalid-feedback {
|
|
opacity: 1;
|
|
}
|
|
|
|
label {
|
|
color: #f44336!important;
|
|
}
|
|
}
|
|
|
|
.bmd-help {
|
|
position: absolute;
|
|
opacity: 0;
|
|
width: 100%;
|
|
margin-top: .25rem;
|
|
|
|
font-size: .75em;
|
|
|
|
@include transition(opacity .25s ease-in-out);
|
|
}
|
|
|
|
.form-control:focus-within ~ .bmd-help {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.modal-body.modal-disconnect-kick {
|
|
display: block;
|
|
|
|
a {
|
|
display: inline-block;
|
|
}
|
|
|
|
.htmltag-client {
|
|
display: inline-block;
|
|
color: unset!important;
|
|
}
|
|
}
|
|
|
|
/* button look */
|
|
.btn {
|
|
cursor: pointer;
|
|
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
|
|
border-width: 0;
|
|
border-radius: $border_radius_middle;
|
|
border-style: solid;
|
|
|
|
color: #7c7c7c;
|
|
|
|
padding: .25em 1em;
|
|
|
|
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
|
|
|
|
@include text-dotdotdot();
|
|
|
|
&:hover {
|
|
background-color: #0a0a0a;
|
|
}
|
|
|
|
&:disabled {
|
|
box-shadow: none;
|
|
background-color: rgba(0, 0, 0, 0.27);
|
|
|
|
&:hover {
|
|
background-color: rgba(0, 0, 0, 0.27);
|
|
}
|
|
}
|
|
|
|
&.btn-success, &.btn-green {
|
|
border-bottom-width: 2px;
|
|
border-bottom-color: #389738;
|
|
}
|
|
|
|
&.btn-info, &.btn-blue {
|
|
border-bottom-width: 2px;
|
|
border-bottom-color: #386896;
|
|
}
|
|
|
|
&.btn-warning, &.btn-danger, &.btn-red {
|
|
border-bottom-width: 2px;
|
|
border-bottom-color: #973838;
|
|
}
|
|
|
|
&.btn-purple {
|
|
border-bottom-width: 2px;
|
|
border-bottom-color: #5f3586;
|
|
}
|
|
|
|
&.btn-brown {
|
|
border-bottom-width: 2px;
|
|
border-bottom-color: #965238;
|
|
}
|
|
|
|
&.btn-yellow {
|
|
border-bottom-width: 2px;
|
|
border-bottom-color: #96903a;
|
|
}
|
|
|
|
@include transition(background-color $button_hover_animation_time ease-in-out);
|
|
}
|
|
|
|
/* general switch look */
|
|
.switch {
|
|
$ball_outer_width: 1.5em; /* 1.5? */
|
|
$ball_inner_width: .4em;
|
|
|
|
$slider_height: .8em;
|
|
$slider_width: 2em;
|
|
|
|
$slider_border_size: .1em;
|
|
|
|
position: relative;
|
|
display: inline-block;
|
|
outline: none;
|
|
|
|
width: $slider_width;
|
|
height: $slider_height;
|
|
|
|
/* "allocate" space for the slider */
|
|
margin-top: ($ball_outer_width - $slider_height) / 2;
|
|
margin-bottom: ($ball_outer_width - $slider_height) / 2;
|
|
margin-left: $ball_outer_width / 2;
|
|
margin-right: $ball_outer_width / 2;
|
|
|
|
/* fix size */
|
|
flex-shrink: 0;
|
|
flex-grow: 0;
|
|
|
|
input {
|
|
/* "hide" the actual input node */
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
outline: none;
|
|
}
|
|
|
|
.slider {
|
|
pointer-events: all!important;
|
|
position: absolute;
|
|
cursor: pointer;
|
|
outline: none;
|
|
|
|
top: -$slider_border_size;
|
|
left: -$slider_border_size;
|
|
right: -$slider_border_size;
|
|
bottom: -$slider_border_size;
|
|
|
|
background-color: #252424;
|
|
|
|
border: $slider_border_size solid #262628;
|
|
border-radius: 5px;
|
|
|
|
&:before {
|
|
position: absolute;
|
|
content: "";
|
|
|
|
height: $ball_outer_width;
|
|
width: $ball_outer_width;
|
|
|
|
left: - $ball_outer_width / 2;
|
|
bottom: -($ball_outer_width - $slider_height) / 2;
|
|
|
|
background-color: #3d3a3a;
|
|
|
|
@include transition(.4s);
|
|
border-radius: 50%;
|
|
|
|
box-shadow: 0 0 .2em 1px rgba(0, 0, 0, 0.27);
|
|
}
|
|
|
|
.dot {
|
|
position: absolute;
|
|
|
|
height: $ball_inner_width;
|
|
width: $ball_inner_width;
|
|
|
|
left: -($ball_inner_width / 2);
|
|
bottom: $slider_height / 2 - $ball_inner_width / 2;
|
|
|
|
background-color: #a5a5a5;
|
|
box-shadow: 0 0 1em 1px rgba(165, 165, 165, 0.4);
|
|
border-radius: 50%;
|
|
|
|
@include transition(.4s);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
input:focus + .slider {
|
|
}
|
|
|
|
input:checked + .slider {
|
|
&:before {
|
|
@include transform(translateX($slider_width));
|
|
}
|
|
|
|
.dot {
|
|
@include transform(translateX($slider_width));
|
|
background-color: #46c0ec;
|
|
box-shadow: 0 0 1em 1px #46c0ec;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* general radio button look */
|
|
.ratio-button, .radio-button {
|
|
$button_size: 1.2em;
|
|
$mark_size: .6em;
|
|
|
|
position: relative;
|
|
|
|
width: $button_size;
|
|
height: $button_size;
|
|
|
|
cursor: pointer;
|
|
|
|
overflow: hidden;
|
|
|
|
background-color: #272626;
|
|
border-radius: 50%;
|
|
|
|
input {
|
|
position: absolute;
|
|
width: 0;
|
|
height: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
//#07d1fe
|
|
.mark {
|
|
position: absolute;
|
|
opacity: 0;
|
|
|
|
top: ($button_size - $mark_size) / 2;
|
|
bottom: ($button_size - $mark_size) / 2;
|
|
right: ($button_size - $mark_size) / 2;
|
|
left: ($button_size - $mark_size) / 2;
|
|
|
|
background-color: #46c0ec;
|
|
box-shadow: 0 0 .5em 1px rgba(70, 192, 236, 0.4);
|
|
border-radius: 50%;
|
|
|
|
@include transition(.4s);
|
|
}
|
|
|
|
input:checked + .mark {
|
|
opacity: 1;
|
|
}
|
|
|
|
@include transition(background-color $button_hover_animation_time);
|
|
|
|
-webkit-box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.5);
|
|
-moz-box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.5);
|
|
box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
label:hover > .ratio-button, .ratio-button:hover,
|
|
label:hover > .radio-button, .radio-button:hover{
|
|
&.ratio-button, > .ratio-button,
|
|
&.radio-button, > .radio-button{
|
|
background-color: #2c2b2b;
|
|
}
|
|
}
|
|
|
|
label.disabled > .ratio-button, .ratio-button.disabled, .ratio-button:disabled,
|
|
label.disabled > .radio-button, .radio-button.disabled, .radio-button:disabled {
|
|
&.ratio-button, > .ratio-button,
|
|
&.radio-button, > .radio-button {
|
|
pointer-events: none!important;
|
|
background-color: #1a1919!important;
|
|
}
|
|
}
|
|
|
|
|
|
/*
|
|
<label class="checkbox">
|
|
<input type="checkbox">
|
|
<div class="mark"></div>
|
|
</label>
|
|
*/
|
|
.checkbox {
|
|
flex-shrink: 0;
|
|
flex-grow: 0;
|
|
|
|
position: relative;
|
|
|
|
width: 1.3em;
|
|
height: 1.3em;
|
|
|
|
cursor: pointer;
|
|
pointer-events: all;
|
|
|
|
overflow: hidden;
|
|
|
|
background-color: #272626;
|
|
border-radius: $border_radius_middle;
|
|
|
|
input {
|
|
position: absolute;
|
|
width: 0;
|
|
height: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
//#07d1fe
|
|
.mark {
|
|
position: absolute;
|
|
opacity: 0;
|
|
|
|
height: .5em;
|
|
width: .8em;
|
|
|
|
margin-left: 0.25em;
|
|
margin-top: .3em;
|
|
|
|
border: none;
|
|
border-bottom: .2em solid #46c0ec;
|
|
border-left: .2em solid #46c0ec;
|
|
|
|
transform: rotateY(0deg) rotate(-45deg); /* needs Y at 0 deg to behave properly*/
|
|
@include transition(.4s);
|
|
}
|
|
|
|
input:checked + .mark {
|
|
opacity: 1;
|
|
}
|
|
|
|
-webkit-box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.5);
|
|
-moz-box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.5);
|
|
box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
label.disabled > .checkbox, .checkbox:disabled, .checkbox.disabled {
|
|
&.checkbox, > .checkbox {
|
|
pointer-events: none!important;
|
|
background-color: #1a1a1e;
|
|
}
|
|
}
|
|
|
|
/* slider */
|
|
$track_height: .6em;
|
|
|
|
$thumb_width: .6em;
|
|
$thumb_height: 2em;
|
|
|
|
$tooltip_width: 4em;
|
|
$tooltip_height: 1.8em;
|
|
|
|
.container-slider {
|
|
font-size: .8em;
|
|
|
|
position: relative;
|
|
|
|
margin-top: .5em; /* for the track */
|
|
|
|
width: 100%;
|
|
height: $track_height;
|
|
|
|
cursor: pointer;
|
|
|
|
background-color: #242527;
|
|
border-radius: $border_radius_large;
|
|
|
|
overflow: visible;
|
|
|
|
.filler {
|
|
position: absolute;
|
|
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
|
|
background-color: #4370a2;
|
|
border-radius: $border_radius_large;
|
|
}
|
|
|
|
.thumb {
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
right: 0;
|
|
|
|
height: $thumb_height;
|
|
width: $thumb_width;
|
|
|
|
margin-left: -($thumb_width / 2);
|
|
margin-right: -($thumb_width / 2);
|
|
|
|
margin-top: -($thumb_height - $track_height) / 2;
|
|
margin-bottom: -($thumb_height - $track_height) / 2;
|
|
|
|
background-color: #808080;
|
|
|
|
.tooltip {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&:hover, &.active {
|
|
.tooltip {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
input::-webkit-outer-spin-button,
|
|
input::-webkit-inner-spin-button {
|
|
/* display: none; <- Crashes Chrome on hover */
|
|
-webkit-appearance: none;
|
|
margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
|
|
}
|
|
|
|
input[type=number] {
|
|
-moz-appearance:textfield; /* Firefox */
|
|
}
|
|
|
|
/* "Boxed input" Used in channeledit & serveredit */
|
|
.input-boxed {
|
|
height: 2.5em;
|
|
|
|
border-radius: .2em;
|
|
border: 1px solid #111112;
|
|
|
|
background-color: #121213;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: stretch;
|
|
|
|
color: #b3b3b3;
|
|
|
|
@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 {
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
|
|
padding: 0 0.5em;
|
|
|
|
background: transparent;
|
|
border: none;
|
|
outline: none;
|
|
margin: 0;
|
|
|
|
color: #b3b3b3;
|
|
}
|
|
|
|
.prefix + input {
|
|
padding-left: 0;
|
|
}
|
|
|
|
|
|
&:focus, &:focus-within {
|
|
.prefix + input {
|
|
padding-left: .5em;
|
|
}
|
|
}
|
|
|
|
&.disabled, &:disabled {
|
|
background-color: #1a1819;
|
|
}
|
|
|
|
@include transition($button_hover_animation_time ease-in-out);
|
|
}
|
|
|
|
input.input-boxed {
|
|
padding: 0.5em;
|
|
}
|
|
textarea.input-boxed {
|
|
resize: vertical;
|
|
width: 100%;
|
|
|
|
min-height: 2em;
|
|
padding: .2em .5em;
|
|
|
|
@include chat-scrollbar-vertical();
|
|
}
|
|
} |