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

fixed text inputs

Browse source
This commit is contained in:
muerwre 2019-07-30 13:58:41 +07:00
parent 3ba862ee5e
commit 7ae8205e27
5 changed files with 34 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/styles/colors.scss
View file

@ -31,7 +31,7 @@ $text_small: 14px;
$text_big: 20px;
$text_sign: 22px;
$input_bg_color: transparentize(black, 0.8);
$input_bg_color: darken($content_bg, 2%);
$button_bg_color: $red_gradient;
$comment_bg: lighten($main_bg_color, 0%);

40
src/styles/inputs.scss
View file

@ -2,21 +2,24 @@
position: relative;
min-height: 40px;
border-radius: $input_radius;
box-shadow: $input_shadow;
//box-shadow: $input_shadow;
flex: 1;
display: flex;
opacity: 1;
transition: opacity 0.25s;
z-index: 1;
@include inner_shadow();
background: $input_bg_color;
&::before {
content: ' ';
background: linear-gradient(270deg, white $gap, transparentize(white, 1));
background: linear-gradient(270deg, $input_bg_color $gap, transparentize($input_bg_color, 1));
position: absolute;
width: $gap * 2;
height: $input_height - 4px;
top: 2px;
right: 2px;
height: $input_height;
top: 0;
right: 1px;
transform: translateX(0);
transition: transform 0.25s;
border-radius: 0 $input_radius $input_radius 0;
@ -52,7 +55,7 @@
}
.title {
color: transparentize(black, 0.3);
color: transparentize(white, 0.3);
}
}
@ -67,6 +70,7 @@
padding: 0 18px;
flex: 1 0 0;
outline: none;
color: white;
}
&.required {
@ -106,7 +110,7 @@
&.focused {
.title {
padding-right: 16px;
color: black;
color: transparentize(white, 0.3);
}
}
}
@ -183,7 +187,7 @@
font: inherit;
box-sizing: border-box;
background: transparent;
color: black;
color: white;
flex: 1;
resize: none;
}
@ -227,7 +231,7 @@
width: 100%;
top: 12px;
bottom: auto;
padding: 0 14px;
padding: 0 16px;
box-sizing: border-box;
display: inline-flex;
align-items: center;
@ -235,34 +239,36 @@
transition: top 0.25s, bottom 0.25s, font 0.25s, color 0.25s;
pointer-events: none;
touch-action: none;
color: transparentize(black, 0.3);
color: transparentize(white, 0.3);
text-transform: capitalize;
span {
background: white;
font: $font;
//background: $input_bg_color;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 5px;
padding: 0 2px;
text-transform: uppercase;
}
}
&.focused .title, &.has_value .title {
font: $font_12_regular;
top: -10px;
font: $font_10_semibold;
top: -6px;
bottom: auto;
}
&.has_value {
box-shadow: $input_shadow_filled;
//box-shadow: $input_shadow_filled;
.title {
color: #C2C2C2;
color: transparentize(white, 0.3);
}
&.focused {
.title {
color: transparentize(black, 0.3);
color: transparentize(white, 0.3);
}
}
}

2
src/styles/variables.scss
View file

@ -58,7 +58,7 @@ $node_shadow: transparentize(black, 0.8) 1px 2px;
$tag_height: 22px;
$input_shadow: inset white 0 0 0 1px;
$input_shadow: inset transparentize(white, 0.9) 0 0 0 1px;
$input_shadow_error: inset $red 0 0 0 1px;
$input_shadow_filled: $input_shadow;