muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 04:46:40 +07:00
Code Packages Activity Actions

fixed inputs

Browse source
This commit is contained in:
Fedor Katurov 2022-01-04 17:36:05 +07:00
parent 6e89271ea9
commit 811e14fd4c
29 changed files with 566 additions and 901 deletions
Download patch file Download diff file Expand all files Collapse all files

62
src/components/input/InputWrapper/styles.module.scss Normal file
View file

@ -0,0 +1,62 @@
@import '~/styles/variables';
.content {
@include inner_shadow;
background: $input_bg_color;
min-height: $input_height;
border-radius: $radius;
position: relative;
color: $input_text_color;
font: $input_font;
::placeholder {
font: $input_placeholder_font;
color: $input-grey_color;
text-transform: uppercase;
}
&.has_error {
box-shadow: inset $red 0 0 0 1px;
}
}
.error {
position: absolute;
font: $font_12_semibold;
padding: 0 $gap / 2;
border-radius: 4px;
color: white;
background-color: $red;
bottom: 0;
right: $gap / 2;
transform: translate(0, 50%);
pointer-events: none;
touch-action: none;
}
.title {
position: absolute;
top: $gap;
left: $gap / 2;
padding: 0 $gap / 2;
transform: translate(0, 0) scale(1);
font: $input_font;
transition: transform 0.25s;
transform-origin: 0 50%;
border-radius: 6px;
background-color: $input_bg_color;
color: $input_grey_color;
text-transform: uppercase;
pointer-events: none;
touch-action: none;
.focused &, .not_empty & {
transform: translate(0, -100%) scale(0.75);
}
.focused.has_error &, .not_empty.has_error & {
color: white;
background-color: $red;
}
}