granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Dark mode and CSS refactors for inputs

Browse source
This commit is contained in:
Justin Edmund 2022-12-05 19:47:23 -08:00
parent 2ee8060c63
commit 0f99cd878c
6 changed files with 44 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
components/CharLimitedFieldset/index.scss
View file

@ -1,15 +1,19 @@
.Limited { .Limited {
background: $grey-100; $offset: 2px;
border-radius: 6px;
border: 2px solid transparent; background: var(--input-bg);
border-radius: $input-corner;
border: $offset solid transparent;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
gap: $unit; gap: $unit;
padding-right: $unit * 2; padding-top: 2px;
padding-bottom: 2px;
padding-right: calc($unit-2x - $offset);
&:focus-within { &:focus-within {
border: 2px solid $blue; border: $offset solid $blue;
box-shadow: 0 2px rgba(255, 255, 255, 1); // box-shadow: 0 2px rgba(255, 255, 255, 1);
} }
.Counter { .Counter {
@ -21,6 +25,7 @@
.Input { .Input {
background: transparent; background: transparent;
border-radius: 0; border-radius: 0;
padding-left: calc($unit-2x - $offset);
&:focus { &:focus {
outline: none; outline: none;

11
components/Fieldset/index.scss
View file

@ -5,17 +5,14 @@
padding: 0; padding: 0;
margin: 0; margin: 0;
.Input { input {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
background-color: var(--input-bg);
border: none; border: none;
background-color: $grey-100;
border-radius: 6px; border-radius: 6px;
box-sizing: border-box; box-sizing: border-box;
color: $grey-10;
display: block; display: block;
font-size: $font-regular; padding: ($unit * 1.5) $unit-2x;
padding: 12px 16px;
width: 100%; width: 100%;
} }
@ -29,6 +26,6 @@
::placeholder { ::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */ /* Chrome, Firefox, Opera, Safari 10.1+ */
color: #a9a9a9 !important; color: var(--text-tertiary) !important;
opacity: 1; /* Firefox */ opacity: 1; /* Firefox */
} }

4
components/Select/index.scss
View file

@ -25,6 +25,10 @@
.SelectIcon { .SelectIcon {
display: flex; display: flex;
align-items: center; align-items: center;
svg {
fill: var(--icon-secondary);
}
} }
} }

18
components/TextFieldset/index.scss
View file

@ -1,6 +1,18 @@
.Fieldset textarea { .Fieldset textarea {
color: $grey-10; $offset: 2px;
font-family: system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial,
sans-serif; background-color: var(--input-bg);
border: $offset solid transparent;
border-radius: $input-corner;
box-sizing: border-box;
color: var(--text-primary);
display: block;
line-height: 21px; line-height: 21px;
-webkit-font-smoothing: antialiased;
padding: $unit-2x calc($unit-2x - $offset);
&:focus-within {
border: $offset solid $blue;
outline: none;
}
} }

4
public/icons/Arrow.svg
View file

@ -1,3 +1,3 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.93618 4.62991C2.73179 4.44423 2.41557 4.4594 2.22989 4.6638C2.04421 4.8682 2.05938 5.18441 2.26378 5.37009L6.65743 9.36145C6.72962 9.42702 6.81576 9.46755 6.90516 9.48353C7.05808 9.51688 7.2243 9.47812 7.34882 9.3647L11.7346 5.36964C11.9388 5.18368 11.9535 4.86745 11.7676 4.6633C11.5816 4.45916 11.2654 4.44441 11.0612 4.63037L7.00447 8.32569L2.93618 4.62991Z" fill="black"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M2.93618 4.62991C2.73179 4.44423 2.41557 4.4594 2.22989 4.6638C2.04421 4.8682 2.05938 5.18441 2.26378 5.37009L6.65743 9.36145C6.72962 9.42702 6.81576 9.46755 6.90516 9.48353C7.05808 9.51688 7.2243 9.47812 7.34882 9.3647L11.7346 5.36964C11.9388 5.18368 11.9535 4.86745 11.7676 4.6633C11.5816 4.45916 11.2654 4.44441 11.0612 4.63037L7.00447 8.32569L2.93618 4.62991Z" />
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 532 B

After

Width:  |  Height:  |  Size: 508 B

14
styles/globals.scss
View file

@ -1,5 +1,5 @@
@import "~meyer-reset-scss"; @import '~meyer-reset-scss';
@import "themes.scss"; @import 'themes.scss';
html { html {
background-color: var(--background); background-color: var(--background);
@ -10,7 +10,7 @@ html {
body { body {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
box-sizing: border-box; box-sizing: border-box;
font-family: system-ui, -apple-system, "Helvetica Neue", Helvetica, Arial, font-family: system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial,
sans-serif; sans-serif;
font-size: 1.4rem; font-size: 1.4rem;
height: 100%; height: 100%;
@ -58,9 +58,11 @@ a {
} }
button, button,
input { input,
font-family: system-ui, -apple-system, "Helvetica Neue", Helvetica, Arial, textarea {
font-family: system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial,
sans-serif; sans-serif;
font-size: $font-regular;
} }
h1, h1,
@ -79,7 +81,7 @@ h1 {
select { select {
appearance: none; appearance: none;
background-color: var(--input-bound-bg); background-color: var(--input-bound-bg);
background-image: url("/icons/Arrow.svg"); background-image: url('/icons/Arrow.svg');
background-repeat: no-repeat; background-repeat: no-repeat;
background-position-y: center; background-position-y: center;
background-position-x: 97%; background-position-x: 97%;