xmj/element-call
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add input theming

Browse source
This commit is contained in:
Robert Long 2021-11-17 18:05:41 -08:00
parent 950e713cb8
commit e438d85018
4 changed files with 21 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.env
View file

@ -16,4 +16,7 @@
# VITE_BG_COLOR_2=#f0f1f4 # VITE_BG_COLOR_2=#f0f1f4
# VITE_BG_COLOR_3=#dbdfe4 # VITE_BG_COLOR_3=#dbdfe4
# VITE_BG_COLOR_4=#d1d3d7 # VITE_BG_COLOR_4=#d1d3d7
# VITE_TEXT_COLOR_1=#000000 # VITE_INPUT_BORDER_COLOR=#e7e7e7
# VITE_INPUT_BORDER_COLOR_FOCUSED=#238cf5
# VITE_TEXT_COLOR_1=#17191c
# VITE_TEXT_COLOR_2=#61708b

8
src/Input.module.css
View file

@ -30,7 +30,7 @@
.inputField { .inputField {
border-radius: 4px; border-radius: 4px;
transition: border-color 0.25s; transition: border-color 0.25s;
border: 1px solid #394049; border: 1px solid var(--inputBorderColor);
} }
.inputField input { .inputField input {
@ -52,7 +52,7 @@
.inputField input:placeholder-shown:focus::placeholder { .inputField input:placeholder-shown:focus::placeholder {
transition: color 0.25s ease-in 0.1s; transition: color 0.25s ease-in 0.1s;
color: #6f7882; color: var(--textColor2);
} }
.inputField label { .inputField label {
@ -74,7 +74,7 @@
} }
.inputField:focus-within { .inputField:focus-within {
border-color: #0086e6; border-color: var(--inputBorderColorFocused);
} }
.inputField input:focus { .inputField input:focus {
@ -93,7 +93,7 @@
} }
.inputField input:focus + label { .inputField input:focus + label {
color: #0086e6; color: var(--inputBorderColorFocused);
} }
.checkboxField { .checkboxField {

3
src/index.css
View file

@ -30,6 +30,9 @@ limitations under the License.
--bgColor4: #394049; --bgColor4: #394049;
--bgColor5: #8d97a5; --bgColor5: #8d97a5;
--textColor1: #fff; --textColor1: #fff;
--textColor2: #6f7882;
--inputBorderColor: #394049;
--inputBorderColorFocused: #0086e6;
} }
@font-face { @font-face {

10
src/main.jsx
View file

@ -29,7 +29,17 @@ if (import.meta.env.VITE_CUSTOM_THEME) {
style.setProperty("--bgColor2", import.meta.env.VITE_BG_COLOR_2); style.setProperty("--bgColor2", import.meta.env.VITE_BG_COLOR_2);
style.setProperty("--bgColor3", import.meta.env.VITE_BG_COLOR_3); style.setProperty("--bgColor3", import.meta.env.VITE_BG_COLOR_3);
style.setProperty("--bgColor4", import.meta.env.VITE_BG_COLOR_4); style.setProperty("--bgColor4", import.meta.env.VITE_BG_COLOR_4);
style.setProperty("--bgColor5", import.meta.env.VITE_BG_COLOR_5);
style.setProperty("--textColor1", import.meta.env.VITE_TEXT_COLOR_1); style.setProperty("--textColor1", import.meta.env.VITE_TEXT_COLOR_1);
style.setProperty("--textColor2", import.meta.env.VITE_TEXT_COLOR_2);
style.setProperty(
"--inputBorderColor",
import.meta.env.VITE_INPUT_BORDER_COLOR
);
style.setProperty(
"--inputBorderColorFocused",
import.meta.env.VITE_INPUT_BORDER_COLOR_FOCUSED
);
} }
const history = createBrowserHistory(); const history = createBrowserHistory();