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 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

5
src/components/main/SidePane/index.tsx
View file

@ -12,8 +12,9 @@ export const SidePane: FC<IProps> = ({
const [left, setLeft] = useState(0); const [left, setLeft] = useState(0);
const moveThis = useCallback(() => { const moveThis = useCallback(() => {
const shift = window.innerWidth > (content_width + 64 + 20) const { width } = document.body.getBoundingClientRect();
? ((window.innerWidth - content_width - 64 - 20) / 2) - 54 + 64 // + content_width + 74 const shift = width > (content_width + 64 + 20)
? ((width - content_width - 64 - 20) / 2) - 54 + 64 // + content_width + 74
: 10; : 10;
setLeft(shift); setLeft(shift);

7
src/containers/examples/EditorExample/index.tsx
View file

@ -12,6 +12,7 @@ import { Grid } from "~/components/containers/Grid";
import { Tags } from "~/components/node/Tags"; import { Tags } from "~/components/node/Tags";
import { Button } from "~/components/input/Button"; import { Button } from "~/components/input/Button";
import { Filler } from "~/components/containers/Filler"; import { Filler } from "~/components/containers/Filler";
import { InputText } from "~/components/input/InputText";
interface IProps {} interface IProps {}
@ -28,7 +29,11 @@ const EditorExample: FC<IProps> = () => (
<Group horizontal className={styles.group} seamless> <Group horizontal className={styles.group} seamless>
<div className={styles.editor}> <div className={styles.editor}>
<Panel> <Panel>
<TextInput onChange={console.log} label="Название" /> <TextInput onChange={console.log} label="Название" value="Значение" />
</Panel>
<Panel>
<InputText title="Заголовок" />
</Panel> </Panel>
<Panel className={classNames(styles.editor_panel, styles.editor_image_panel)}> <Panel className={classNames(styles.editor_panel, styles.editor_image_panel)}>

2
src/styles/colors.scss
View file

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

40
src/styles/inputs.scss
View file

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