sora/OTM
1
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

Update src/style/module/input.css
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
sora-ext 2025-03-04 17:20:32 +01:00
parent e88ca4de26
commit b1b5e1b73b
1 changed files with 70 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
src/style/module/input.css
View File

@ -1,3 +1,4 @@
switch,
input, input,
textarea { textarea {
-webkit-appearance: none; -webkit-appearance: none;
@ -15,6 +16,7 @@ input:-webkit-autofill {
box-shadow: 0 0 0 1000px #eceff1 inset; box-shadow: 0 0 0 1000px #eceff1 inset;
} }
.switch,
.textarea, .textarea,
.input, .input,
.select { .select {
@ -167,7 +169,7 @@ input:-webkit-autofill {
display: none; display: none;
} }
.checkbox input[type="checkbox"]:checked+label::after { .checkbox input[type="checkbox"]:checked::after {
-webkit-animation: checkboxAndRadioAnimation 0.25s; -webkit-animation: checkboxAndRadioAnimation 0.25s;
animation: checkboxAndRadioAnimation 0.25s; animation: checkboxAndRadioAnimation 0.25s;
content: ""; content: "";
@ -175,7 +177,7 @@ input:-webkit-autofill {
transform: scale(1) rotate(45deg); transform: scale(1) rotate(45deg);
} }
.checkbox input[type="checkbox"]+label { .checkbox input[type="checkbox"] {
display: block; display: block;
overflow: hidden; overflow: hidden;
padding-left: 30px; padding-left: 30px;
@ -183,7 +185,7 @@ input:-webkit-autofill {
white-space: nowrap; white-space: nowrap;
} }
.checkbox input[type="checkbox"]+label::before { .checkbox input[type="checkbox"]::before {
background-color: #eceff1; background-color: #eceff1;
border: 1px solid var(--white); border: 1px solid var(--white);
border-radius: var(--border-radius); border-radius: var(--border-radius);
@ -197,7 +199,7 @@ input:-webkit-autofill {
width: 20px; width: 20px;
} }
.checkbox input[type="checkbox"]+label::after { .checkbox input[type="checkbox"]::after {
border-bottom: 3px solid #03a9f4; border-bottom: 3px solid #03a9f4;
border-right: 3px solid #03a9f4; border-right: 3px solid #03a9f4;
display: block; display: block;
@ -220,7 +222,7 @@ input:-webkit-autofill {
display: none; display: none;
} }
.radio input[type="radio"]:checked+label::after { .radio input[type="radio"]:checked::after {
-webkit-animation: checkboxAndRadioAnimation 0.25s; -webkit-animation: checkboxAndRadioAnimation 0.25s;
animation: checkboxAndRadioAnimation 0.25s; animation: checkboxAndRadioAnimation 0.25s;
content: ""; content: "";
@ -228,7 +230,7 @@ input:-webkit-autofill {
transform: scale(1) rotate(45deg); transform: scale(1) rotate(45deg);
} }
.radio input[type="radio"]+label { .radio input[type="radio"] {
display: block; display: block;
overflow: hidden; overflow: hidden;
padding-left: 30px; padding-left: 30px;
@ -236,7 +238,7 @@ input:-webkit-autofill {
white-space: nowrap; white-space: nowrap;
} }
.radio input[type="radio"]+label::before { .radio input[type="radio"]::before {
background-color: #eceff1; background-color: #eceff1;
border: 1px solid var(--white); border: 1px solid var(--white);
border-radius: 20px; border-radius: 20px;
@ -250,7 +252,7 @@ input:-webkit-autofill {
width: 20px; width: 20px;
} }
.radio input[type="radio"]+label::after { .radio input[type="radio"]::after {
background-color: #03a9f4; background-color: #03a9f4;
border-radius: 20px; border-radius: 20px;
display: block; display: block;
@ -304,6 +306,7 @@ input:-webkit-autofill {
border: 0 !important; border: 0 !important;
} }
.switch,
.input { .input {
background-color: var(--white); background-color: var(--white);
padding: 0; padding: 0;
@ -316,6 +319,7 @@ input:-webkit-autofill {
border-radius: var(--border-radius); border-radius: var(--border-radius);
} }
.switch .rocker,
.input input, .input input,
.input textarea { .input textarea {
background: transparent; background: transparent;
@ -360,3 +364,61 @@ input:-webkit-autofill {
top: 50%; top: 50%;
width: 16px; width: 16px;
} }
.switch {
overflow: hidden;
display: block;
}
.switch input[type="checkbox"] {
position: absolute;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
z-index: 3;
}
.switch .rocker {
padding: 0;
display: flex;
}
.switch .rocker-left,
.switch .rocker-right {
max-width: 50%;
font-weight: bold;
text-align: center;
font-size: 10px;
line-height: 1;
width: 50%;
color: var(--darkdark);
padding: 8px 16px;
-webkit-transition: background-position .25s;
-moz-transition: background-position .25s;
transition: background-position .25s;
background-size: 200% 100%;
background-image: linear-gradient(to right, transparent 50%, var(--blue) 50%);
}
.switch .rocker-left {
background-position-x: 100%;
}
.switch .rocker-bg {
position: relative;
border-radius: 50%;
transition: 0.4s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
left: 0;
width: 50%;
background-color: var(--blue);
z-index: 1;
}
.switch input:checked+.rocker .rocker-left {
background-position-x: 0%;
}
.switch input:checked+.rocker .rocker-right {
background-position-x: -100%;
}