#212121
1/* Switch starts here */ 2.rocker { 3 display: inline-block; 4 position: relative; 5 /* 6 SIZE OF SWITCH 7 ============== 8 All sizes are in em - therefore 9 changing the font-size here 10 will change the size of the switch. 11 See .rocker-small below as example. 12 */ 13 font-size: 2em; 14 font-weight: bold; 15 text-align: center; 16 text-transform: uppercase; 17 color: #888; 18 width: 7em; 19 height: 4em; 20 overflow: hidden; 21 border-bottom: 0.5em solid #eee; 22} 23 24.rocker-small { 25 font-size: 0.75em; 26 /* Sizes the switch */ 27 margin: 1em; 28} 29 30.rocker::before { 31 content: ""; 32 position: absolute; 33 top: 0.5em; 34 left: 0; 35 right: 0; 36 bottom: 0; 37 background-color: #999; 38 border: 0.5em solid #eee; 39 border-bottom: 0; 40} 41 42.rocker input { 43 opacity: 0; 44 width: 0; 45 height: 0; 46} 47 48.switch-left, 49.switch-right { 50 cursor: pointer; 51 position: absolute; 52 display: flex; 53 align-items: center; 54 justify-content: center; 55 height: 2.5em; 56 width: 3em; 57 transition: 0.2s; 58 user-select: none; 59} 60 61.switch-left { 62 height: 2.4em; 63 width: 2.75em; 64 left: 0.85em; 65 bottom: 0.4em; 66 background-color: #ddd; 67 transform: rotate(15deg) skewX(15deg); 68} 69 70.switch-right { 71 right: 0.5em; 72 bottom: 0; 73 background-color: #bd5757; 74 color: #fff; 75} 76 77.switch-left::before, 78.switch-right::before { 79 content: ""; 80 position: absolute; 81 width: 0.4em; 82 height: 2.45em; 83 bottom: -0.45em; 84 background-color: #ccc; 85 transform: skewY(-65deg); 86} 87 88.switch-left::before { 89 left: -0.4em; 90} 91 92.switch-right::before { 93 right: -0.375em; 94 background-color: transparent; 95 transform: skewY(65deg); 96} 97 98input:checked + .switch-left { 99 background-color: #0084d0; 100 color: #fff; 101 bottom: 0px; 102 left: 0.5em; 103 height: 2.5em; 104 width: 3em; 105 transform: rotate(0deg) skewX(0deg); 106} 107 108input:checked + .switch-left::before { 109 background-color: transparent; 110 width: 3.0833em; 111} 112 113input:checked + .switch-left + .switch-right { 114 background-color: #ddd; 115 color: #888; 116 bottom: 0.4em; 117 right: 0.8em; 118 height: 2.4em; 119 width: 2.75em; 120 transform: rotate(-15deg) skewX(-15deg); 121} 122 123input:checked + .switch-left + .switch-right::before { 124 background-color: #ccc; 125} 126 127/* Keyboard Users */ 128input:focus + .switch-left { 129 color: #333; 130} 131 132input:checked:focus + .switch-left { 133 color: #fff; 134} 135 136input:focus + .switch-left + .switch-right { 137 color: #fff; 138} 139 140input:checked:focus + .switch-left + .switch-right { 141 color: #333; 142}
Comments
MIT License