130 lines
2.0 KiB
SCSS
130 lines
2.0 KiB
SCSS
@import "../_base.scss";
|
|
|
|
%base-text-input {
|
|
$horizontal-padding: 1vw;
|
|
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
border: $border-normal;
|
|
border-color: get-color(primary, 90);
|
|
border-radius: $border-radius;
|
|
|
|
padding: 0px $horizontal-padding;
|
|
}
|
|
|
|
%base-input {
|
|
$horizontal-padding: 1vw;
|
|
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
border: 0;
|
|
border-radius: $border-radius;
|
|
|
|
font-size: 2vh;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
|
|
&.invalid {
|
|
border-color: get-color(critical, 100);
|
|
}
|
|
}
|
|
|
|
%base-helper-text {
|
|
margin: 0;
|
|
margin-top: 0.3vh;
|
|
|
|
font-size: 1.2vh;
|
|
|
|
color: get-color(primary, 90);
|
|
|
|
p {
|
|
margin: 0;
|
|
|
|
&.invalid {
|
|
color: get-color(critical, 100);
|
|
}
|
|
}
|
|
}
|
|
|
|
.text-input {
|
|
@extend %base-text-input;
|
|
|
|
&__input {
|
|
@extend %base-input;
|
|
}
|
|
|
|
&__helper-text {
|
|
@extend %base-helper-text;
|
|
}
|
|
}
|
|
|
|
.password-text-input {
|
|
@extend %base-text-input;
|
|
|
|
display: grid;
|
|
grid-template-columns: auto 7.5% 1% 7.5%;
|
|
grid-template-rows: 100%;
|
|
grid-template-areas:
|
|
"input strength . toggle"
|
|
"helper helper helper helper"
|
|
;
|
|
|
|
transition: $transition-duration;
|
|
|
|
&.no-strength {
|
|
grid-template-columns: auto 0% 0% 7.5%;
|
|
}
|
|
|
|
&__input {
|
|
@extend %base-input;
|
|
|
|
grid-area: input;
|
|
}
|
|
|
|
%inner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
&__strength-level {
|
|
@extend %inner;
|
|
|
|
grid-area: strength;
|
|
|
|
p {
|
|
margin: 0;
|
|
text-align: center;
|
|
width: 100%;
|
|
|
|
font-size: 2vh;
|
|
}
|
|
}
|
|
|
|
&__show-toggle {
|
|
@extend %inner;
|
|
|
|
grid-area: toggle;
|
|
|
|
svg {
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
color: get-color(secondary, 100),
|
|
}
|
|
}
|
|
|
|
&__helper-text {
|
|
@extend %base-helper-text;
|
|
|
|
grid-area: helper;
|
|
}
|
|
}
|