#e8e8e8
1.label { 2 display: inline-flex; 3 align-items: center; 4 cursor: pointer; 5 color: #394a56; 6} 7 8.label-text { 9 margin-left: 16px; 10} 11 12.toggle { 13 isolation: isolate; 14 position: relative; 15 height: 30px; 16 width: 60px; 17 border-radius: 15px; 18 overflow: hidden; 19 box-shadow: -8px -4px 8px 0px #ffffff, 20 8px 4px 12px 0px #d1d9e6, 21 4px 4px 4px 0px #d1d9e6 inset, 22 -4px -4px 4px 0px #ffffff inset; 23} 24 25.toggle-state { 26 display: none; 27} 28 29.indicator { 30 height: 100%; 31 width: 200%; 32 background: #ecf0f3; 33 border-radius: 15px; 34 transform: translate3d(-75%, 0, 0); 35 transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35); 36 box-shadow: -8px -4px 8px 0px #ffffff, 37 8px 4px 12px 0px #d1d9e6; 38} 39 40.toggle-state:checked ~ .indicator { 41 transform: translate3d(25%, 0, 0); 42}
10K views
10K views
Comments
MIT License