#212121
1.checkbox-wrapper-8 .tgl { 2 display: none; 3} 4 5.checkbox-wrapper-8 .tgl, 6 .checkbox-wrapper-8 .tgl:after, 7 .checkbox-wrapper-8 .tgl:before, 8 .checkbox-wrapper-8 .tgl *, 9 .checkbox-wrapper-8 .tgl *:after, 10 .checkbox-wrapper-8 .tgl *:before, 11 .checkbox-wrapper-8 .tgl + .tgl-btn { 12 box-sizing: border-box; 13} 14 15.checkbox-wrapper-8 .tgl::-moz-selection, 16 .checkbox-wrapper-8 .tgl:after::-moz-selection, 17 .checkbox-wrapper-8 .tgl:before::-moz-selection, 18 .checkbox-wrapper-8 .tgl *::-moz-selection, 19 .checkbox-wrapper-8 .tgl *:after::-moz-selection, 20 .checkbox-wrapper-8 .tgl *:before::-moz-selection, 21 .checkbox-wrapper-8 .tgl + .tgl-btn::-moz-selection, 22 .checkbox-wrapper-8 .tgl::selection, 23 .checkbox-wrapper-8 .tgl:after::selection, 24 .checkbox-wrapper-8 .tgl:before::selection, 25 .checkbox-wrapper-8 .tgl *::selection, 26 .checkbox-wrapper-8 .tgl *:after::selection, 27 .checkbox-wrapper-8 .tgl *:before::selection, 28 .checkbox-wrapper-8 .tgl + .tgl-btn::selection { 29 background: none; 30} 31 32.checkbox-wrapper-8 .tgl + .tgl-btn { 33 outline: 0; 34 display: block; 35 width: 4em; 36 height: 2em; 37 position: relative; 38 cursor: pointer; 39 -webkit-user-select: none; 40 -moz-user-select: none; 41 -ms-user-select: none; 42 user-select: none; 43} 44 45.checkbox-wrapper-8 .tgl + .tgl-btn:after, 46 .checkbox-wrapper-8 .tgl + .tgl-btn:before { 47 position: relative; 48 display: block; 49 content: ""; 50 width: 50%; 51 height: 100%; 52} 53 54.checkbox-wrapper-8 .tgl + .tgl-btn:after { 55 left: 0; 56} 57 58.checkbox-wrapper-8 .tgl + .tgl-btn:before { 59 display: none; 60} 61 62.checkbox-wrapper-8 .tgl:checked + .tgl-btn:after { 63 left: 50%; 64} 65 66.checkbox-wrapper-8 .tgl-skewed + .tgl-btn { 67 overflow: hidden; 68 transform: skew(-10deg); 69 -webkit-backface-visibility: hidden; 70 backface-visibility: hidden; 71 transition: all 0.2s ease; 72 font-family: sans-serif; 73 background: #888; 74} 75 76.checkbox-wrapper-8 .tgl-skewed + .tgl-btn:after, 77 .checkbox-wrapper-8 .tgl-skewed + .tgl-btn:before { 78 transform: skew(10deg); 79 display: inline-block; 80 transition: all 0.2s ease; 81 width: 100%; 82 text-align: center; 83 position: absolute; 84 line-height: 2em; 85 font-weight: bold; 86 color: #fff; 87 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); 88} 89 90.checkbox-wrapper-8 .tgl-skewed + .tgl-btn:after { 91 left: 100%; 92 content: attr(data-tg-on); 93} 94 95.checkbox-wrapper-8 .tgl-skewed + .tgl-btn:before { 96 left: 0; 97 content: attr(data-tg-off); 98} 99 100.checkbox-wrapper-8 .tgl-skewed + .tgl-btn:active { 101 background: #888; 102} 103 104.checkbox-wrapper-8 .tgl-skewed + .tgl-btn:active:before { 105 left: -10%; 106} 107 108.checkbox-wrapper-8 .tgl-skewed:checked + .tgl-btn { 109 background: #86d993; 110} 111 112.checkbox-wrapper-8 .tgl-skewed:checked + .tgl-btn:before { 113 left: -100%; 114} 115 116.checkbox-wrapper-8 .tgl-skewed:checked + .tgl-btn:after { 117 left: 0; 118} 119 120.checkbox-wrapper-8 .tgl-skewed:checked + .tgl-btn:active:after { 121 left: 10%; 122}
3.2K views
3.2K views
Comments
MIT License