src/style/module/input.css

@@ -1,3 +1,4 @@
+switch,
 input,
 textarea {
     -webkit-appearance: none;
@@ -15,6 +16,7 @@ input:-webkit-autofill {
     box-shadow: 0 0 0 1000px #eceff1 inset;
 }
 
+.switch,
 .textarea,
 .input,
 .select {
@@ -167,7 +169,7 @@ input:-webkit-autofill {
     display: none;
 }
 
-.checkbox input[type="checkbox"]:checked+label::after {
+.checkbox input[type="checkbox"]:checked::after {
     -webkit-animation: checkboxAndRadioAnimation 0.25s;
     animation: checkboxAndRadioAnimation 0.25s;
     content: "";
@@ -175,7 +177,7 @@ input:-webkit-autofill {
     transform: scale(1) rotate(45deg);
 }
 
-.checkbox input[type="checkbox"]+label {
+.checkbox input[type="checkbox"] {
     display: block;
     overflow: hidden;
     padding-left: 30px;
@@ -183,7 +185,7 @@ input:-webkit-autofill {
     white-space: nowrap;
 }
 
-.checkbox input[type="checkbox"]+label::before {
+.checkbox input[type="checkbox"]::before {
     background-color: #eceff1;
     border: 1px solid var(--white);
     border-radius: var(--border-radius);
@@ -197,7 +199,7 @@ input:-webkit-autofill {
     width: 20px;
 }
 
-.checkbox input[type="checkbox"]+label::after {
+.checkbox input[type="checkbox"]::after {
     border-bottom: 3px solid #03a9f4;
     border-right: 3px solid #03a9f4;
     display: block;
@@ -220,7 +222,7 @@ input:-webkit-autofill {
     display: none;
 }
 
-.radio input[type="radio"]:checked+label::after {
+.radio input[type="radio"]:checked::after {
     -webkit-animation: checkboxAndRadioAnimation 0.25s;
     animation: checkboxAndRadioAnimation 0.25s;
     content: "";
@@ -228,7 +230,7 @@ input:-webkit-autofill {
     transform: scale(1) rotate(45deg);
 }
 
-.radio input[type="radio"]+label {
+.radio input[type="radio"] {
     display: block;
     overflow: hidden;
     padding-left: 30px;
@@ -236,7 +238,7 @@ input:-webkit-autofill {
     white-space: nowrap;
 }
 
-.radio input[type="radio"]+label::before {
+.radio input[type="radio"]::before {
     background-color: #eceff1;
     border: 1px solid var(--white);
     border-radius: 20px;
@@ -250,7 +252,7 @@ input:-webkit-autofill {
     width: 20px;
 }
 
-.radio input[type="radio"]+label::after {
+.radio input[type="radio"]::after {
     background-color: #03a9f4;
     border-radius: 20px;
     display: block;
@@ -304,6 +306,7 @@ input:-webkit-autofill {
     border: 0 !important;
 }
 
+.switch,
 .input {
     background-color: var(--white);
     padding: 0;
@@ -316,6 +319,7 @@ input:-webkit-autofill {
     border-radius: var(--border-radius);
 }
 
+.switch .rocker,
 .input input,
 .input textarea {
     background: transparent;
@@ -359,4 +363,62 @@ input:-webkit-autofill {
     right: 16px;
     top: 50%;
     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%;
 }