#e8e8e8
1.cl-toggle-switch { 2 position: relative; 3} 4 5.cl-switch { 6 position: relative; 7 display: inline-block; 8} 9/* Input */ 10.cl-switch > input { 11 appearance: none; 12 -moz-appearance: none; 13 -webkit-appearance: none; 14 z-index: -1; 15 position: absolute; 16 right: 6px; 17 top: -8px; 18 display: block; 19 margin: 0; 20 border-radius: 50%; 21 width: 40px; 22 height: 40px; 23 background-color: rgb(0, 0, 0, 0.38); 24 outline: none; 25 opacity: 0; 26 transform: scale(1); 27 pointer-events: none; 28 transition: opacity 0.3s 0.1s, transform 0.2s 0.1s; 29} 30/* Track */ 31.cl-switch > span::before { 32 content: ""; 33 float: right; 34 display: inline-block; 35 margin: 5px 0 5px 10px; 36 border-radius: 7px; 37 width: 36px; 38 height: 14px; 39 background-color: rgb(0, 0, 0, 0.38); 40 vertical-align: top; 41 transition: background-color 0.2s, opacity 0.2s; 42} 43/* Thumb */ 44.cl-switch > span::after { 45 content: ""; 46 position: absolute; 47 top: 2px; 48 right: 16px; 49 border-radius: 50%; 50 width: 20px; 51 height: 20px; 52 background-color: #fff; 53 box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); 54 transition: background-color 0.2s, transform 0.2s; 55} 56/* Checked */ 57.cl-switch > input:checked { 58 right: -10px; 59 background-color: #85b8b7; 60} 61 62.cl-switch > input:checked + span::before { 63 background-color: #85b8b7; 64} 65 66.cl-switch > input:checked + span::after { 67 background-color: #018786; 68 transform: translateX(16px); 69} 70/* Hover, Focus */ 71.cl-switch:hover > input { 72 opacity: 0.04; 73} 74 75.cl-switch > input:focus { 76 opacity: 0.12; 77} 78 79.cl-switch:hover > input:focus { 80 opacity: 0.16; 81} 82/* Active */ 83.cl-switch > input:active { 84 opacity: 1; 85 transform: scale(0); 86 transition: transform 0s, opacity 0s; 87} 88 89.cl-switch > input:active + span::before { 90 background-color: #8f8f8f; 91} 92 93.cl-switch > input:checked:active + span::before { 94 background-color: #85b8b7; 95} 96/* Disabled */ 97.cl-switch > input:disabled { 98 opacity: 0; 99} 100 101.cl-switch > input:disabled + span::before { 102 background-color: #ddd; 103} 104 105.cl-switch > input:checked:disabled + span::before { 106 background-color: #bfdbda; 107} 108 109.cl-switch > input:checked:disabled + span::after { 110 background-color: #61b5b4; 111}
Comments
MIT License