#e8e8e8
1/* Hide the default checkbox */ 2.container input { 3 opacity: 0; 4 cursor: pointer; 5 width: 0; 6 height: 0; 7} 8 9.container { 10 display: block; 11 position: relative; 12 cursor: pointer; 13 font-size: 20px; 14 user-select: none; 15 width: 30px; 16 height: 30px; 17 border-radius: 3px; 18 background: rgba(216, 216, 216, 0.603); 19} 20 21.container:hover { 22 background: rgba(197, 197, 197, 0.527); 23} 24 25.line { 26 width: calc(100% - 8px); 27 height: 3px; 28 left: 4px; 29 background: rgb(58, 58, 58); 30 position: absolute; 31 top: 50%; 32 transform: translateY(-50%); 33 transition: .7s transform cubic-bezier(0,1,.33,1.2), background .4s; 34} 35 36.line-indicator { 37 transform: translateY(-50%) rotate(90deg); 38} 39 40.container input:checked ~ .line-indicator { 41 transform: translateY(-50%); 42}
4.9K views
4.9K views
Comments
MIT License