diff --git a/src/components/main/SidePane/index.tsx b/src/components/main/SidePane/index.tsx index bfd983cd..2b149df5 100644 --- a/src/components/main/SidePane/index.tsx +++ b/src/components/main/SidePane/index.tsx @@ -12,8 +12,9 @@ export const SidePane: FC = ({ const [left, setLeft] = useState(0); const moveThis = useCallback(() => { - const shift = window.innerWidth > (content_width + 64 + 20) - ? ((window.innerWidth - content_width - 64 - 20) / 2) - 54 + 64 // + content_width + 74 + const { width } = document.body.getBoundingClientRect(); + const shift = width > (content_width + 64 + 20) + ? ((width - content_width - 64 - 20) / 2) - 54 + 64 // + content_width + 74 : 10; setLeft(shift); diff --git a/src/containers/examples/EditorExample/index.tsx b/src/containers/examples/EditorExample/index.tsx index 2cf837b6..60c9c5d2 100644 --- a/src/containers/examples/EditorExample/index.tsx +++ b/src/containers/examples/EditorExample/index.tsx @@ -12,6 +12,7 @@ import { Grid } from "~/components/containers/Grid"; import { Tags } from "~/components/node/Tags"; import { Button } from "~/components/input/Button"; import { Filler } from "~/components/containers/Filler"; +import { InputText } from "~/components/input/InputText"; interface IProps {} @@ -28,7 +29,11 @@ const EditorExample: FC = () => (
- + + + + + diff --git a/src/styles/colors.scss b/src/styles/colors.scss index 55037a33..6616668f 100644 --- a/src/styles/colors.scss +++ b/src/styles/colors.scss @@ -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%); diff --git a/src/styles/inputs.scss b/src/styles/inputs.scss index 8f48c439..0aa862d4 100644 --- a/src/styles/inputs.scss +++ b/src/styles/inputs.scss @@ -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); } } } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 95e811c3..a1906bb1 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -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;