maguodong/jingshuiji
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
jingshuiji/utils/switch_style.wxss
qiaojiale 2b53798b0d 6.6
2025-06-06 15:07:26 +08:00

615 lines
19 KiB
Plaintext
Raw Permalink Blame History

/* =====================================================
Some defaults across all toggle demos
===================================================== */
.toggle--checkbox {
display: none;
}
.toggle--btn {
display: block;
margin: 0 auto;
font-size: 1.4em;
transition: all 350ms ease-in;
}
.toggle--btn:hover {
cursor: pointer;
}
.toggle--btn, .toggle--btn:before, .toggle--btn:after,
.toggle--checkbox,
.toggle--checkbox:before,
.toggle--checkbox:after,
.toggle--feature,
.toggle--feature:before,
.toggle--feature:after {
transition: all 250ms ease-in;
}
.toggle--btn:before, .toggle--btn:after,
.toggle--checkbox:before,
.toggle--checkbox:after,
.toggle--feature:before,
.toggle--feature:after {
content: '';
display: block;
}
/* ===================================================
Day/Night and Gender toggle buttons
=================================================== */
.toggle--daynight .toggle--btn,
.toggle--like .toggle--btn {
position: relative;
height: 70px;
width: 125px;
border-radius: 70px;
}
.toggle--daynight .toggle--btn:before,
.toggle--like .toggle--btn:before {
position: absolute;
top: 2px;
left: 4px;
width: 56px;
height: 56px;
border-radius: 50%;
}
.toggle--daynight .toggle--btn {
border: 5px solid #1c1c1c;
background-color: #3c4145;
}
.toggle--daynight .toggle--btn:before {
background-color: #fff;
border: 5px solid #e3e3c7;
}
.toggle--daynight .toggle--btn:after {
position: absolute;
top: 62%;
left: 39px;
z-index: 10;
width: 11.2px;
height: 11.2px;
opacity: 0;
background-color: #fff;
border-radius: 50%;
box-shadow: #fff 0 0, #fff 3px 0, #fff 6px 0, #fff 9px 0, #fff 11px 0, #fff 14px 0, #fff 16px 0, #fff 21px -1px 0 1px, #fff 16px -7px 0 -2px, #fff 7px -7px 0 1px, #d3d3d3 0 0 0 4px, #d3d3d3 6px 0 0 4px, #d3d3d3 11px 0 0 4px, #d3d3d3 16px 0 0 4px, #d3d3d3 21px -1px 0 5px, #d3d3d3 16px -7px 0 1px, #d3d3d3 7px -7px 0 5px;
transition: opacity 100ms ease-in;
}
@keyframes starry_star {
50% {
background-color: rgba(255, 255, 255, 0.1);
box-shadow: #fff 30px -3px 0 0, #fff 12px 10px 0 -1px, rgba(255, 255, 255, 0.1) 38px 18px 0 1px, #fff 32px 34px 0 0, rgba(255, 255, 255, 0.1) 20px 24px 0 -1.5px, #fff 5px 38px 0 1px;
}
}
@keyframes bounceIn {
0% {
opacity: 0;
transform: scale(0.3);
}
50% {
opacity: 100;
transform: scale(1.1);
}
55% {
transform: scale(1.1);
}
75% {
transform: scale(0.9);
}
100% {
opacity: 100;
transform: scale(1);
}
}
.toggle--daynight .toggle--feature {
display: block;
position: absolute;
top: 9px;
left: 52.5%;
z-index: 20;
width: 4px;
height: 4px;
border-radius: 50%;
background-color: #fff;
box-shadow: rgba(255, 255, 255, 0.1) 30px -3px 0 0, rgba(255, 255, 255, 0.1) 12px 10px 0 -1px, #fff 38px 18px 0 1px, rgba(255, 255, 255, 0.1) 32px 34px 0 0, #fff 20px 24px 0 -1.5px, rgba(255, 255, 255, 0.1) 5px 38px 0 1px;
animation: starry_star 5s ease-in-out infinite;
}
.toggle--daynight .toggle--feature:before {
position: absolute;
top: -2px;
left: -25px;
width: 18px;
height: 18px;
background-color: #fff;
border-radius: 50%;
border: 5px solid #e3e3c7;
box-shadow: #e3e3c7 -28px 0 0 -3px, #e3e3c7 -8px 24px 0 -2px;
transform-origin: -6px 130%;
}
.toggle--daynight .toggle--checkbox:checked + .toggle--btn {
background-color: #9ee3fb;
border: 5px solid #86c3d7;
}
.toggle--daynight .toggle--checkbox:checked + .toggle--btn:before {
left: 55px;
background-color: #ffdf6d;
border: 5px solid #e1c348;
}
.toggle--daynight .toggle--checkbox:checked + .toggle--btn:after {
opacity: 100;
animation-name: bounceIn;
animation-duration: 0.60s;
animation-delay: 0.10s;
animation-fill-mode: backwards;
animation-timing-function: ease-in-out;
}
.toggle--daynight .toggle--checkbox:checked + .toggle--btn > .toggle--feature {
opacity: 0;
box-shadow: rgba(255, 255, 255, 0.1) 30px -3px 0 -4px, rgba(255, 255, 255, 0.1) 12px 10px 0 -5px, #fff 38px 18px 0 -3px, rgba(255, 255, 255, 0.1) 32px 34px 0 -4px, #fff 20px 24px 0 -5.5px, rgba(255, 255, 255, 0.1) 5px 38px 0 -3px;
animation: none;
}
.toggle--daynight .toggle--checkbox:checked + .toggle--btn > .toggle--feature:before {
left: 25px;
transform: rotate(70deg);
}
/* ==================================================
Like specific styling
================================================== */
.toggle--like {
position: relative;
}
.toggle--like .toggle--btn {
border: 5px solid #0865B0;
background-color: #3498db;
}
.toggle--like .toggle--btn:before {
background-color: #f2dd68;
border: 5px solid #e5ce5e;
}
.toggle--like .toggle--feature {
position: absolute;
left: 14px;
top: 32%;
width: 7px;
height: 7px;
border-radius: 50%;
background-color: #995710;
box-shadow: 28px 0 0 0 #995710;
}
.toggle--like .toggle--feature:before {
position: absolute;
left: 0;
top: 11px;
width: 36px;
height: 17px;
background-color: #995710;
border-radius: 36px 36px 0 0;
}
.toggle--like .toggle--feature:after {
position: absolute;
left: 9px;
top: 21px;
width: 17px;
height: 7px;
background-color: #d8aa2b;
border-radius: 17px 17px 0 0;
}
.toggle--like .toggle--checkbox:checked + .toggle--btn {
background-color: #e25d5d;
border: 5px solid #AD1000;
}
.toggle--like .toggle--checkbox:checked + .toggle--btn:before {
transform: translate(51px, 0);
}
.toggle--like .toggle--checkbox:checked + .toggle--btn .toggle--feature {
transform: translate(53px, 0);
}
.toggle--like .toggle--checkbox:checked + .toggle--btn .toggle--feature:before {
border-radius: 0 0 36px 36px;
top: 11px;
}
.toggle--like .toggle--checkbox:checked + .toggle--btn .toggle--feature:after {
top: 21px;
border-radius: 50%/50%;
}
/* ====================================================
Text toggle button
==================================================== */
.toggle--text .toggle--btn {
position: relative;
width: 180px;
height: 70px;
font-family: 'PT Sans', Sans Serif;
text-transform: uppercase;
font-weight: bold;
border-radius: 40px;
border: 1px solid #8c8c8c;
border-right: 2px solid #8c8c8c;
box-shadow: inset 90px 0 10px rgba(255, 255, 255, 0.6), inset -3px 3px 18px -2px #8c8c8c, 0 0 15px #ccc, 0px -5px 16px 1px #ddd, -5px -5px 16px 1px #ddd, 5px -5px 16px 1px #ddd, -5px -5px 16px 1px #ddd, 5px -5px 16px 1px #ddd, 17px 9px 0 -5px rgba(255, 255, 255, 0.6), -3px 6px 12px -7px #000, 0 0 0 14px #fff, 0 0 0 15px #999;
}
.toggle--text .toggle--btn:before, .toggle--text .toggle--btn:after {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.toggle--text .toggle--btn:before {
content: attr(data-label-on);
left: 15%;
color: #999;
}
.toggle--text .toggle--btn:after {
content: attr(data-label-off);
right: 15%;
color: #db4c00;
}
.toggle--text .toggle--checkbox:checked + .toggle--btn {
border-left: 2px solid #8c8c8c;
border-right: 1px solid #8c8c8c;
box-shadow: inset 90px 0 10px rgba(255, 255, 255, 0), inset 3px 3px 18px -2px #8c8c8c, 0 0 15px #ccc, 0px -5px 16px 1px #ddd, -5px -5px 16px 1px #ddd, 5px -5px 16px 1px #ddd, -5px -5px 16px 1px #ddd, 5px -5px 16px 1px #ddd, -17px 9px 0 -5px rgba(255, 255, 255, 0.6), 3px 6px 12px -7px #000, 0 0 0 14px #fff, 0 0 0 15px #999;
}
.toggle--text .toggle--checkbox:checked + .toggle--btn:before {
color: #db4c00;
}
.toggle--text .toggle--checkbox:checked + .toggle--btn:after {
color: #999;
}
/* =====================================================
Toggle - knob button style
===================================================== */
.toggle--knob .toggle--btn {
position: relative;
width: 120px;
height: 40px;
font-family: 'PT Sans', Sans Serif;
text-transform: uppercase;
color: #fff;
background: #a4bf4d;
box-shadow: inset 0 20px 40px -10px #7b9d25;
border-radius: 40px;
}
.toggle--knob .toggle--btn:before {
display: block;
position: absolute;
top: 50%;
left: 60%;
transform: translateY(-50%);
width: 48px;
height: 48px;
border-radius: 50%;
background: #f1f1f1;
box-shadow: 0 4px 10px 0 #999, inset 0 10px 10px 8px rgba(241, 241, 241, 0.6), inset 0 0 8px 0px #333, inset 0 0 0 13px #ccc, inset 0 0 0 14px #f1f1f1;
text-indent: -100%;
}
.toggle--knob .toggle--feature {
position: relative;
display: block;
overflow: hidden;
height: 40px;
text-shadow: 0 1px 2px #666;
}
.toggle--knob .toggle--feature:before, .toggle--knob .toggle--feature:after {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.toggle--knob .toggle--feature:before {
content: attr(data-label-on);
left: 20%;
}
.toggle--knob .toggle--feature:after {
content: attr(data-label-off);
right: -60%;
}
.toggle--knob .toggle--checkbox:checked + .toggle--btn {
background: #a2a2a2;
box-shadow: inset 0 20px 40px -10px #7e7e7e;
}
.toggle--knob .toggle--checkbox:checked + .toggle--btn:before {
left: 0;
}
.toggle--knob .toggle--checkbox:checked + .toggle--btn .toggle--feature:before {
left: -60%;
}
.toggle--knob .toggle--checkbox:checked + .toggle--btn .toggle--feature:after {
right: 20%;
}
/* =====================================================
Toggle - switch stylee
===================================================== */
.toggle--switch .toggle--btn {
position: relative;
width: 120px;
height: 44px;
font-family: 'PT Sans', Sans Serif;
text-transform: uppercase;
color: #fff;
background: linear-gradient(90deg, #a4bf4d 0%, #a4bf4d 50%, #ca5046 50%, #ca5046 200%);
background-position: -80px 0;
background-size: 200% 100%;
box-shadow: inset 0 0px 22px -8px #111;
}
.toggle--switch .toggle--btn, .toggle--switch .toggle--btn:before {
border-radius: 4px;
}
.toggle--switch .toggle--btn:before {
display: block;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 52px;
height: 44px;
border: 2px solid #202027;
background-image: linear-gradient(90deg, transparent 50%, rgba(255, 255, 255, 0.15) 100%);
background-color: #2b2e3a;
background-size: 5px 5px;
text-indent: -100%;
}
.toggle--switch .toggle--feature {
position: relative;
display: block;
overflow: hidden;
height: 44px;
text-shadow: 0 1px 2px #666;
}
.toggle--switch .toggle--feature:before, .toggle--switch .toggle--feature:after {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.toggle--switch .toggle--feature:before {
content: attr(data-label-on);
left: -60%;
}
.toggle--switch .toggle--feature:after {
content: attr(data-label-off);
right: 16%;
}
.toggle--switch .toggle--checkbox:checked + .toggle--btn {
background-position: 0 0;
}
.toggle--switch .toggle--checkbox:checked + .toggle--btn:before {
left: calc(100% - 52px);
}
.toggle--switch .toggle--checkbox:checked + .toggle--btn .toggle--feature:before {
left: 20%;
}
.toggle--switch .toggle--checkbox:checked + .toggle--btn .toggle--feature:after {
right: -60%;
}
/* ======================================================
Push button toggle
====================================================== */
.toggle--push .toggle--btn {
position: relative;
width: 50px;
height: 50px;
background-color: #f9f8f6;
border-radius: 50%;
box-shadow: 0 5px 10px 0px #333, 0 15px 20px 0px #cccccc;
}
.toggle--push .toggle--btn, .toggle--push .toggle--btn:before, .toggle--push .toggle--btn:after {
transition-duration: 150ms;
}
.toggle--push .toggle--btn:before {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 22.72727px;
height: 22.72727px;
border-radius: 50%;
background-color: #FF9900;
box-shadow: inset 0 0 0 5px #ccc, inset 0 0 0 14px #f9f8f6;
}
.toggle--push .toggle--btn:after {
position: absolute;
left: 50%;
top: 35%;
transform: translate(-50%, -50%);
width: 4px;
height: 12px;
background-color: #ccc;
box-shadow: 0 0 0 2.5px #f9f8f6;
}
.toggle--push .toggle--btn:hover:before {
box-shadow: inset 0 0 0 5px #b3b3b3, inset 0 0 0 14px #f9f8f6;
}
.toggle--push .toggle--btn:hover:after {
background-color: #b3b3b3;
}
.toggle--push .toggle--checkbox:checked + .toggle--btn {
box-shadow: 0 2px 5px 0px gray, 0 15px 20px 0px transparent;
}
.toggle--push .toggle--checkbox:checked + .toggle--btn:before {
box-shadow: inset 0 0 0 5px #FF9900, inset 0 0 0 14px #f9f8f6;
}
.toggle--push .toggle--checkbox:checked + .toggle--btn:after {
background-color: #FF9900;
}
.toggle--push--glow {
/* background: #fff; */
padding: 15px 0;
}
.toggle--push--glow .toggle--btn {
background-color: #ffffff;
box-shadow: 0 0px 10px 0px #afafaf, 0 0 0 3px #afafaf, 0 0 8px 2px transparent, 0 0 0 6px #d4d4d4;
}
.toggle--push--glow .toggle--btn:before {
box-shadow: inset 0 0 0 5px #aaa, inset 0 0 0 14px #ffffff;
}
.toggle--push--glow .toggle--btn:after {
background-color: #aaa;
box-shadow: 0 0 0 2.5px #ffffff;
}
.toggle--push--glow .toggle--btn:hover:before {
box-shadow: inset 0 0 0 5px #b3b3b3, inset 0 0 0 14px #ffffff;
}
.toggle--push--glow .toggle--btn:hover:after {
background-color: #b3b3b3;
}
.toggle--push--glow .toggle--checkbox:checked + .toggle--btn {
box-shadow: 0 0px 8px 0 #00a8ff, 0 0 0 3px #0094e0, 0 0 15px 0 #0094e0, 0 0 0 6px #d4d4d4;
}
.toggle--push--glow .toggle--checkbox:checked + .toggle--btn:before {
box-shadow: inset 0 0 0 5px #0094e0, inset 0 0 0 14px #ffffff;
}
.toggle--push--glow .toggle--checkbox:checked + .toggle--btn:after {
background-color: #0094e0;
}
/* ======================================================
Neon toggle
====================================================== */
@keyframes neon {
0% {
text-shadow: 0 0 10px #fff, 0 0 15px #fff, 0 0 25px #fff, 0 0 40px #FF9900, 0 0 70px #FF9900, 0 0 90px #FF9900, 0 0 90px #FF9900;
}
100% {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF9900, 0 0 35px #FF9900, 0 0 40px #FF9900, 0 0 50px #FF9900;
}
}
.toggle--neon {
background-color: #222;
margin-top: 0;
padding: 50px 0;
}
.toggle--neon .toggle--btn {
font-family: Audiowide;
text-transform: uppercase;
font-size: 6.2em;
color: #333;
text-shadow: 0 0 10px transparent, 0 0 15px transparent, 0 0 25px transparent, 0 0 40px transparent, 0 0 70px transparent, 0 0 90px transparent, 0 0 90px transparent;
}
.toggle--neon .toggle--btn:before, .toggle--neon .toggle--btn:after {
display: inline-block;
margin: 0 20px;
transition: all 220ms ease-in-out;
}
.toggle--neon .toggle--btn:before {
content: attr(data-label-off);
animation: neon 1.5s ease-in-out infinite alternate;
animation-delay: 90ms;
color: #f1f1f1;
}
.toggle--neon .toggle--btn:after {
content: attr(data-label-on);
}
.toggle--neon .toggle--checkbox:checked + .toggle--btn:before {
animation: none;
color: #333;
}
.toggle--neon .toggle--checkbox:checked + .toggle--btn:after {
animation: neon 1.5s ease-in-out infinite alternate;
animation-delay: 90ms;
color: #f1f1f1;
}
/* 20210826鏂板 鎸夐挳寮忛€変腑*/
.toggle--push--button {
background: #fff;
width: auto;
position: relative;
overflow: hidden;
display: flex;
float: left;
margin: 5px;
}
.toggle--push--button .toggle--button {
background-color: #ffffff;
box-shadow: unset;
border-radius: 50px;
/* background: #f3f3f3; */
padding: 5px 10px;
font-size: 13px;
border: 1px solid #cccccc;
}
.toggle--push--button .toggle--button.disabled{
background: #f3f3f3;
border: 1px solid #f3f3f3;
}
.toggle--push--button .toggle--button:hover:before {
box-shadow: inset 0 0 0 5px #b3b3b3, inset 0 0 0 14px #ffffff;
}
.toggle--push--button .toggle--button:hover:after {
background-color: #b3b3b3;
}
.toggle--push--button .toggle--checkbox:checked + .toggle--button {
background: #249dee;
color: #fff;
border: 1px solid #fff;
}
.toggle--push--button .toggle--checkbox:checked + .toggle--button:before {
box-shadow: inset 0 0 0 5px #0094e0, inset 0 0 0 14px #ffffff;
}
.toggle--push--button .toggle--checkbox:checked + .toggle--button:after {
background-color: #0094e0;
}
/* 20220114鏂板 涓€鑸殑鎸夐挳寮忛€変腑*/
.toggle-normal-checkbox {
position: relative;
height: 30px;
}
.toggle-normal-checkbox input[type='checkbox'] {
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 20px;
opacity: 0;
}
.toggle-normal-checkbox label {
position: absolute;
left: 30px;
top: 0;
height: 20px;
line-height: 20px;
}
.toggle-normal-checkbox label:before {
content: '';
position: absolute;
left: -30px;
top: 0;
width: 20px;
height: 20px;
border: 1px solid #ddd;
border-radius: 50%;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
}
.toggle-normal-checkbox label:after {
content: '';
position: absolute;
left: -22px;
top: 3px;
width: 6px;
height: 12px;
border: 0;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
background: #fff;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
}
.toggle-normal-checkbox input[type='checkbox']:checked + label:before {
background: #249dee;
border-color: #249dee;
}
.toggle-normal-checkbox input[type='checkbox']:checked + label:after {
background: #249dee;
}
Reference in New Issue View Git Blame Copy Permalink