#e8e8e8
1.checkbox-wrapper-35 .switch { 2 display: none; 3} 4 5.checkbox-wrapper-35 .switch + label { 6 -webkit-box-align: center; 7 -webkit-align-items: center; 8 -ms-flex-align: center; 9 align-items: center; 10 color: #78768d; 11 cursor: pointer; 12 display: -webkit-box; 13 display: -webkit-flex; 14 display: -ms-flexbox; 15 display: flex; 16 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 17 font-size: 12px; 18 line-height: 15px; 19 position: relative; 20 -webkit-user-select: none; 21 -moz-user-select: none; 22 -ms-user-select: none; 23 user-select: none; 24} 25 26.checkbox-wrapper-35 .switch + label::before, 27 .checkbox-wrapper-35 .switch + label::after { 28 content: ''; 29 display: block; 30} 31 32.checkbox-wrapper-35 .switch + label::before { 33 background-color: #05012c; 34 border-radius: 500px; 35 height: 15px; 36 margin-right: 8px; 37 -webkit-transition: background-color 0.125s ease-out; 38 transition: background-color 0.125s ease-out; 39 width: 25px; 40} 41 42.checkbox-wrapper-35 .switch + label::after { 43 background-color: #fff; 44 border-radius: 13px; 45 box-shadow: 0 3px 1px 0 rgba(37, 34, 71, 0.05), 0 2px 2px 0 rgba(37, 34, 71, 0.1), 0 3px 3px 0 rgba(37, 34, 71, 0.05); 46 height: 13px; 47 left: 1px; 48 position: absolute; 49 top: 1px; 50 -webkit-transition: -webkit-transform 0.125s ease-out; 51 transition: -webkit-transform 0.125s ease-out; 52 transition: transform 0.125s ease-out; 53 transition: transform 0.125s ease-out, -webkit-transform 0.125s ease-out; 54 width: 13px; 55} 56 57.checkbox-wrapper-35 .switch + label .switch-x-text { 58 display: block; 59 margin-right: .3em; 60} 61 62.checkbox-wrapper-35 .switch + label .switch-x-toggletext { 63 display: block; 64 font-weight: bold; 65 height: 15px; 66 overflow: hidden; 67 position: relative; 68 width: 25px; 69} 70 71.checkbox-wrapper-35 .switch + label .switch-x-unchecked, 72 .checkbox-wrapper-35 .switch + label .switch-x-checked { 73 left: 0; 74 position: absolute; 75 top: 0; 76 -webkit-transition: opacity 0.125s ease-out, -webkit-transform 0.125s ease-out; 77 transition: opacity 0.125s ease-out, -webkit-transform 0.125s ease-out; 78 transition: transform 0.125s ease-out, opacity 0.125s ease-out; 79 transition: transform 0.125s ease-out, opacity 0.125s ease-out, -webkit-transform 0.125s ease-out; 80} 81 82.checkbox-wrapper-35 .switch + label .switch-x-unchecked { 83 opacity: 1; 84 -webkit-transform: none; 85 transform: none; 86} 87 88.checkbox-wrapper-35 .switch + label .switch-x-checked { 89 opacity: 0; 90 -webkit-transform: translate3d(0, 100%, 0); 91 transform: translate3d(0, 100%, 0); 92} 93 94.checkbox-wrapper-35 .switch + label .switch-x-hiddenlabel { 95 position: absolute; 96 visibility: hidden; 97} 98 99.checkbox-wrapper-35 .switch:checked + label::before { 100 background-color: #ffb500; 101} 102 103.checkbox-wrapper-35 .switch:checked + label::after { 104 -webkit-transform: translate3d(10px, 0, 0); 105 transform: translate3d(10px, 0, 0); 106} 107 108.checkbox-wrapper-35 .switch:checked + label .switch-x-unchecked { 109 opacity: 0; 110 -webkit-transform: translate3d(0, -100%, 0); 111 transform: translate3d(0, -100%, 0); 112} 113 114.checkbox-wrapper-35 .switch:checked + label .switch-x-checked { 115 opacity: 1; 116 -webkit-transform: none; 117 transform: none; 118} 119
3.6K views
3.6K views
Comments
MIT License