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

Fix checkbox in safari

Browse source
This commit is contained in:
Robert Long 2021-10-06 16:47:05 -07:00
parent 0d771e0aa4
commit 8bf1a0799b
1 changed files with 12 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/Input.module.css
View file

@ -29,7 +29,7 @@
.inputField { .inputField {
border-radius: 4px; border-radius: 4px;
transition: border-color .25s; transition: border-color 0.25s;
border: 1px solid #394049; border: 1px solid #394049;
} }
@ -51,12 +51,13 @@
} }
.inputField input:placeholder-shown:focus::placeholder { .inputField input:placeholder-shown:focus::placeholder {
transition: color .25s ease-in .1s; transition: color 0.25s ease-in 0.1s;
color: #6f7882; color: #6f7882;
} }
.inputField label { .inputField label {
transition: font-size .25s ease-out .1s,color .25s ease-out .1s,top .25s ease-out .1s,background-color .25s ease-out .1s; transition: font-size 0.25s ease-out 0.1s, color 0.25s ease-out 0.1s,
top 0.25s ease-out 0.1s, background-color 0.25s ease-out 0.1s;
color: white; color: white;
background-color: transparent; background-color: transparent;
font-size: 14px; font-size: 14px;
@ -80,9 +81,11 @@
outline: 0; outline: 0;
} }
.inputField input:focus + label, .inputField input:not(:placeholder-shown) + label { .inputField input:focus + label,
.inputField input:not(:placeholder-shown) + label {
background-color: #21262c; background-color: #21262c;
transition: font-size .25s ease-out 0s,color .25s ease-out 0s,top .25s ease-out 0s,background-color .25s ease-out 0s; transition: font-size 0.25s ease-out 0s, color 0.25s ease-out 0s,
top 0.25s ease-out 0s, background-color 0.25s ease-out 0s;
font-size: 10px; font-size: 10px;
top: -13px; top: -13px;
padding: 0 2px; padding: 0 2px;
@ -107,6 +110,7 @@
.checkboxField input { .checkboxField input {
appearance: none; appearance: none;
-webkit-appearance: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
@ -119,7 +123,7 @@
flex-shrink: 0; flex-shrink: 0;
height: 16px; height: 16px;
width: 16px; width: 16px;
border: 1.5px solid rgba(185,190,198,.5); border: 1.5px solid rgba(185, 190, 198, 0.5);
box-sizing: border-box; box-sizing: border-box;
border-radius: 4px; border-radius: 4px;
margin-right: 10px; margin-right: 10px;
@ -130,7 +134,7 @@
} }
.checkbox svg * { .checkbox svg * {
stroke: #FFF; stroke: #fff;
} }
.checkboxField input[type="checkbox"]:checked + label > .checkbox { .checkboxField input[type="checkbox"]:checked + label > .checkbox {
@ -161,11 +165,9 @@
} }
.button:hover { .button:hover {
} }
.button:active { .button:active {
} }
.errorMessage { .errorMessage {
@ -173,4 +175,4 @@
font-size: 13px; font-size: 13px;
color: #ff5b55; color: #ff5b55;
font-weight: 600; font-weight: 600;
} }