Checkbox by milegelu
#e8e8e8
1.container { 2 --UnChacked-color: hsl(0, 0%, 10%); 3 --chacked-color: hsl(216, 100%, 60%); 4 --font-color: white; 5 --chacked-font-color: var(--font-color); 6 --icon-size: 1.5em; 7 --anim-time: 0.2s; 8 --anim-scale: 0.1; 9 --base-radius: 0.8em; 10} 11 12.container { 13 display: flex; 14 align-items: center; 15 position: relative; 16 cursor: pointer; 17 font-size: 20px; 18 user-select: none; 19 fill: var(--font-color); 20 color: var(--font-color); 21} 22 23/* Hide the default checkbox */ 24.container input { 25 display: none; 26} 27 28/* Base custom checkbox */ 29.checkmark { 30 background: var(--UnChacked-color); 31 border-radius: var(--base-radius); 32 33 display: flex; 34 padding: 0.5em; 35} 36.icon { 37 width: var(--icon-size); 38 height: auto; 39 filter: drop-shadow(0px 2px var(--base-radius) rgba(0, 0, 0, 0.25)); 40} 41.name { 42 margin: 0 0.25em; 43} 44.Yes { 45 width: 0; 46} 47.name.Yes { 48 display: none; 49} 50 51/* action custom checkbox */ 52.container:hover .checkmark, 53.container:hover .icon, 54.container:hover .name { 55 transform: scale(calc(1 + var(--anim-scale))); 56} 57 58.container:active .checkmark, 59.container:active .icon, 60.container:active .name { 61 transform: scale(calc(1 - var(--anim-scale) / 2)); 62 border-radius: calc(var(--base-radius) * 2); 63} 64.checkmark::before { 65 content: ""; 66 opacity: 0.5; 67 transform: scale(1); 68 border-radius: var(--base-radius); 69 position: absolute; 70 box-sizing: border-box; 71 left: 0; 72 top: 0; 73 height: 100%; 74 width: 100%; 75} 76.checkmark:hover:before { 77 background-color: hsla(0, 0%, 50%, 0.2); 78} 79.container input:checked + .checkmark:before { 80 animation: boon calc(var(--anim-time)) ease; 81 animation-delay: calc(var(--anim-time) / 2); 82} 83 84/* When the checkbox is checked*/ 85.container input:checked + .checkmark { 86 --UnChacked-color: var(--chacked-color); 87 fill: var(--chacked-font-color); 88 color: var(--chacked-font-color); 89} 90 91.container input:checked ~ .checkmark .No { 92 width: 0; 93} 94.container input:checked ~ .checkmark .name.No { 95 display: none; 96} 97 98.container input:checked ~ .checkmark .Yes { 99 width: var(--icon-size); 100} 101.container input:checked ~ .checkmark .name.Yes { 102 width: auto; 103 display: unset; 104} 105 106/*Animation*/ 107.container, 108.checkmark, 109.checkmark:after, 110.icon, 111.checkmark .name { 112 transition: all var(--anim-time); 113} 114 115/*Unuse*/ 116@keyframes icon-rot { 117 50% { 118 transform: rotateZ(180deg) scale(calc(1 - var(--anim-scale))); 119 border-radius: 1em; 120 } 121 to { 122 transform: rotate(360deg); 123 border-radius: var(--base-radius); 124 } 125} 126/*Unuse*/ 127@keyframes boo { 128 80% { 129 transform: scale(1.4); 130 } 131 99% { 132 transform: scale(1.7); 133 border: 2px solid var(--UnChacked-color); 134 } 135 to { 136 transform: scale(0); 137 } 138} 139
973 views
973 views
MIT License