7

2026-01-08 05:42:44 +08:00
parent 7439a4a794
commit c153975eed
1976 changed files with 776 additions and 133 deletions
@@ -3021,8 +3021,9 @@ input[type=radio] {
    opacity: 0;
 }

-.lyear-switch span {
-    display: inline-block;
+.lyear-switch i {
+    display: inline-flex;
+    align-items: center;
    position: relative;
    width: 40px;
    height: 10px;
@@ -3036,7 +3037,7 @@ input[type=radio] {
    transition: all .1s ease
 }

-.lyear-switch span:after {
+.lyear-switch i:after {
    content: '';
    height: 20px;
    width: 20px;
@@ -3044,7 +3045,8 @@ input[type=radio] {
    border-radius: 50%;
    position: absolute;
    left: 1px;
-    top: -7px;
+    top: 50%;
+    margin-top: -10px;
    color: #aaa;
    -webkit-transition: all .1s ease;
    -o-transition: all .1s ease;
@@ -3056,191 +3058,214 @@ input[type=radio] {
    box-shadow: rgba(0, 0, 0, .12) 0 1px 6px, rgba(0, 0, 0, .12) 0 1px 4px
 }

-.lyear-switch input:checked~span:after {
+.lyear-switch input:checked~i:after {
    left: -webkit-calc(100% - 20px);
    left: calc(100% - 20px);
 }
+.lyear-switch i:before {
+    display: none;
+    content: attr(data-off-text);
+    margin: 0 10px 0 25px;
+    font-style: normal;
+    transition: all 0.2s;
+}
+.lyear-switch input:checked~i:before {
+    content: attr(data-on-text);
+    margin: 0 25px 0 10px;
+}

-.switch-primary input:checked~span:after {
+.switch-primary input:checked~i:after {
    background-color: #33cabb
 }

-.switch-success input:checked~span:after {
+.switch-success input:checked~i:after {
    background-color: #15c377
 }

-.switch-info input:checked~span:after {
+.switch-info input:checked~i:after {
    background-color: #48b0f7
 }

-.switch-warning input:checked~span:after {
+.switch-warning input:checked~i:after {
    background-color: #faa64b
 }

-.switch-danger input:checked~span:after {
+.switch-danger input:checked~i:after {
    background-color: #f96868
 }

-.switch-secondary input:checked~span:after {
+.switch-secondary input:checked~i:after {
    background-color: #868e96
 }

-.switch-dark input:checked~span:after {
+.switch-dark input:checked~i:after {
    background-color: #465161
 }

-.switch-purple input:checked~span:after {
+.switch-purple input:checked~i:after {
    background-color: #926dde
 }

-.switch-pink input:checked~span:after {
+.switch-pink input:checked~i:after {
    background-color: #f96197
 }

-.switch-cyan input:checked~span:after {
+.switch-cyan input:checked~i:after {
    background-color: #57c7d4
 }

-.switch-yellow input:checked~span:after {
+.switch-yellow input:checked~i:after {
    background-color: #fcc525
 }

-.switch-brown input:checked~span:after {
+.switch-brown input:checked~i:after {
    background-color: #8d6658
 }

-.lyear-switch.switch-solid span,
-.lyear-switch.switch-light span,
-.lyear-switch.switch-outline span {
-    height: 20px;
+.lyear-switch.switch-solid i,
+.lyear-switch.switch-light i,
+.lyear-switch.switch-outline i {
+    height: 25px;
+    font-size: 12px;
+    width: auto;
+    border-radius: 15px;
 }

-.lyear-switch.switch-solid span:after,
-.lyear-switch.switch-light span:after,
-.lyear-switch.switch-outline span:after {
-    top: -2px;
+.lyear-switch.switch-solid i:before,
+.lyear-switch.switch-light i:before,
+.lyear-switch.switch-outline i:before {
+    display: block;
+}
+.lyear-switch.switch-solid i:after,
+.lyear-switch.switch-light i:after,
+.lyear-switch.switch-outline i:after {
+
+}
+.lyear-switch.switch-solid i:after,
+.lyear-switch.switch-light i:after,
+.lyear-switch.switch-outline i:after {
 }

-.lyear-switch.switch-outline span {
+.lyear-switch.switch-outline i {
    background-color: #fff
 }

-.switch-solid.switch-primary input:checked~span {
+.switch-solid.switch-primary input:checked~i {
    background-color: #33cabb;
    border-color: #33cabb
 }

-.switch-solid.switch-primary input:checked~span:after {
+.switch-solid.switch-primary input:checked~i:after {
    background-color: #fff;
    color: #33cabb
 }

-.switch-solid.switch-success input:checked~span {
+.switch-solid.switch-success input:checked~i {
    background-color: #15c377;
    border-color: #15c377
 }

-.switch-solid.switch-success input:checked~span:after {
+.switch-solid.switch-success input:checked~i:after {
    background-color: #fff;
    color: #15c377
 }

-.switch-solid.switch-info input:checked~span {
+.switch-solid.switch-info input:checked~i {
    background-color: #48b0f7;
    border-color: #48b0f7
 }

-.switch-solid.switch-info input:checked~span:after {
+.switch-solid.switch-info input:checked~i:after {
    background-color: #fff;
    color: #48b0f7
 }

-.switch-solid.switch-warning input:checked~span {
+.switch-solid.switch-warning input:checked~i {
    background-color: #faa64b;
    border-color: #faa64b
 }

-.switch-solid.switch-warning input:checked~span:after {
+.switch-solid.switch-warning input:checked~i:after {
    background-color: #fff;
    color: #faa64b
 }

-.switch-solid.switch-danger input:checked~span {
+.switch-solid.switch-danger input:checked~i {
    background-color: #f96868;
    border-color: #f96868
 }

-.switch-solid.switch-danger input:checked~span:after {
+.switch-solid.switch-danger input:checked~i:after {
    background-color: #fff;
    color: #f96868
 }

-.switch-solid.switch-secondary input:checked~span {
+.switch-solid.switch-secondary input:checked~i {
    background-color: #868e96;
    border-color: #868e96
 }

-.switch-solid.switch-secondary input:checked~span:after {
+.switch-solid.switch-secondary input:checked~i:after {
    background-color: #fff;
    color: #868e96
 }

-.switch-solid.switch-dark input:checked~span {
+.switch-solid.switch-dark input:checked~i {
    background-color: #465161;
    border-color: #465161
 }

-.switch-solid.switch-dark input:checked~span:after {
+.switch-solid.switch-dark input:checked~i:after {
    background-color: #fff;
    color: #465161
 }

-.switch-solid.switch-purple input:checked~span {
+.switch-solid.switch-purple input:checked~i {
    background-color: #926dde;
    border-color: #926dde
 }

-.switch-solid.switch-purple input:checked~span:after {
+.switch-solid.switch-purple input:checked~i:after {
    background-color: #fff;
    color: #926dde
 }

-.switch-solid.switch-pink input:checked~span {
+.switch-solid.switch-pink input:checked~i {
    background-color: #f96197;
    border-color: #f96197
 }

-.switch-solid.switch-pink input:checked~span:after {
+.switch-solid.switch-pink input:checked~i:after {
    background-color: #fff;
    color: #f96197
 }

-.switch-solid.switch-cyan input:checked~span {
+.switch-solid.switch-cyan input:checked~i {
    background-color: #57c7d4;
    border-color: #57c7d4
 }

-.switch-solid.switch-cyan input:checked~span:after {
+.switch-solid.switch-cyan input:checked~i:after {
    background-color: #fff;
    color: #57c7d4
 }

-.switch-solid.switch-yellow input:checked~span {
+.switch-solid.switch-yellow input:checked~i {
    background-color: #fcc525;
    border-color: #fcc525
 }

-.switch-solid.switch-yellow input:checked~span:after {
+.switch-solid.switch-yellow input:checked~i:after {
    background-color: #fff;
    color: #fcc525
 }

-.switch-solid.switch-brown input:checked~span {
+.switch-solid.switch-brown input:checked~i {
    background-color: #8d6658;
    border-color: #8d6658
 }

-.switch-solid.switch-brown input:checked~span:after {
+.switch-solid.switch-brown input:checked~i:after {
    background-color: #fff;
    color: #8d6658
 }