112 lines
1.8 KiB
SCSS
112 lines
1.8 KiB
SCSS
v-input input {
|
|
font-size: 1em;
|
|
background-color: rgba(0, 0, 0, .4);
|
|
border: none;
|
|
border-bottom: 0.15em solid $primary;
|
|
color: $textColor;
|
|
padding: 0.5em;
|
|
}
|
|
|
|
v-input.focus input,
|
|
v-input input:focus {
|
|
border-color: $second;
|
|
}
|
|
|
|
v-input.valid input {
|
|
border-color: $validOnColor;
|
|
}
|
|
|
|
v-input.invalid input {
|
|
border-color: $errorInYourFaceBorder;
|
|
}
|
|
|
|
v-input {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-bottom: 0.2em;
|
|
position: relative;
|
|
font-size: 1.3rem;
|
|
padding-top: 1em;
|
|
|
|
&.no-space {
|
|
padding-top: .1em;
|
|
}
|
|
}
|
|
|
|
v-input label {
|
|
font-size: .7em;
|
|
position: absolute;
|
|
top: 1.8em;
|
|
left: .5em;
|
|
pointer-events: none;
|
|
vertical-align: middle;
|
|
transform: translateY(50%);
|
|
color: #dcdcdc;
|
|
transition: all .2s ease-out;
|
|
}
|
|
|
|
v-input.focus label,
|
|
v-input input:focus ~ label {
|
|
top: 0.3em;
|
|
left: 0;
|
|
transform: translateY(0);
|
|
font-size: .6em;
|
|
}
|
|
|
|
v-input .error {
|
|
display: none;
|
|
}
|
|
|
|
v-input.invalid .error {
|
|
margin-top: 0.2em;
|
|
display: block;
|
|
font-size: .7em;
|
|
color: $errorInYourFace;
|
|
}
|
|
|
|
$height: 1.5rem;
|
|
$innerHeight: 1rem;
|
|
$width: 3rem;
|
|
$innerWidth: 1rem;
|
|
|
|
v-switch {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
margin-top: .5rem;
|
|
|
|
input {
|
|
position: absolute;
|
|
appearance: none;
|
|
opacity: 0;
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
border-radius: 9999px;
|
|
width: $width;
|
|
height: $height;
|
|
background-color: $hoverDark;
|
|
position: relative;
|
|
cursor: pointer;
|
|
margin-right: 0.5rem;
|
|
|
|
&:after {
|
|
content: '';
|
|
background-color: #dcdcdc;
|
|
position: absolute;
|
|
top: 0.2rem;
|
|
left: 0.25rem;
|
|
height: $innerHeight;
|
|
width: $innerWidth;
|
|
border-radius: 9999px;
|
|
transition: .5s;
|
|
}
|
|
}
|
|
|
|
input:checked + label:after {
|
|
transform: translateX($width - $height);
|
|
background-color: $primary;
|
|
}
|
|
}
|