#e8e8e8
1.plus-minus { 2 --primary: #1E2235; 3 --secondary: #FAFBFF; 4 --duration: .5s; 5 -webkit-appearance: none; 6 -moz-appearance: none; 7 -webkit-tap-highlight-color: transparent; 8 -webkit-mask-image: -webkit-radial-gradient(white, black); 9 outline: none; 10 cursor: pointer; 11 position: relative; 12 overflow: hidden; 13 transform-style: preserve-3d; 14 perspective: 240px; 15 border-radius: 50%; 16 width: 36px; 17 height: 36px; 18 border: 4px solid var(--primary); 19 background-size: 300% 300%; 20 transition: transform 0.3s; 21 transform: scale(var(--scale, 1)) translateZ(0); 22 -webkit-animation: var(--name, unchecked) var(--duration) ease forwards; 23 animation: var(--name, unchecked) var(--duration) ease forwards; 24} 25 26.plus-minus:before, .plus-minus:after { 27 content: ""; 28 position: absolute; 29 width: 16px; 30 height: var(--height, 16px); 31 left: 6px; 32 top: var(--top, 6px); 33 background: var(--background, var(--primary)); 34 -webkit-animation: var(--name-icon-b, var(--name-icon, unchecked-icon)) var(--duration) ease forwards; 35 animation: var(--name-icon-b, var(--name-icon, unchecked-icon)) var(--duration) ease forwards; 36} 37 38.plus-minus:before { 39 -webkit-clip-path: polygon(0 6px, 6px 6px, 6px 0, 10px 0, 10px 6px, 16px 6px, 16px 10px, 10px 10px, 10px 16px, 6px 16px, 6px 10px, 0 10px); 40 clip-path: polygon(0 6px, 6px 6px, 6px 0, 10px 0, 10px 6px, 16px 6px, 16px 10px, 10px 10px, 10px 16px, 6px 16px, 6px 10px, 0 10px); 41} 42 43.plus-minus:after { 44 --height: 4px; 45 --top: 12px; 46 --background: var(--secondary); 47 --name-icon-b: var(--name-icon-a, checked-icon); 48} 49 50.plus-minus:active { 51 --scale: .95; 52} 53 54.plus-minus:checked { 55 --name: checked; 56 --name-icon-b: checked-icon; 57 --name-icon-a: unchecked-icon; 58} 59 60@keyframes checked-icon { 61 from { 62 transform: translateZ(12px); 63 } 64 65 to { 66 transform: translateX(16px) rotateY(90deg) translateZ(12px); 67 } 68} 69 70@keyframes unchecked-icon { 71 from { 72 transform: translateX(-16px) rotateY(-90deg) translateZ(12px); 73 } 74 75 to { 76 transform: translateZ(12px); 77 } 78} 79 80@keyframes checked { 81 from { 82 background-image: radial-gradient(ellipse at center, var(--primary) 0%, var(--primary) 25%, var(--secondary) 25.1%, var(--secondary) 100%); 83 background-position: 100% 50%; 84 } 85 86 to { 87 background-image: radial-gradient(ellipse at center, var(--primary) 0%, var(--primary) 25%, var(--secondary) 25.1%, var(--secondary) 100%); 88 background-position: 50% 50%; 89 } 90} 91 92@keyframes unchecked { 93 from { 94 background-image: radial-gradient(ellipse at center, var(--secondary) 0%, var(--secondary) 25%, var(--primary) 25.1%, var(--primary) 100%); 95 background-position: 100% 50%; 96 } 97 98 to { 99 background-image: radial-gradient(ellipse at center, var(--secondary) 0%, var(--secondary) 25%, var(--primary) 25.1%, var(--primary) 100%); 100 background-position: 50% 50%; 101 } 102}
Comments
MIT License