Checkbox by LeonKohli
#e8e8e8
1.uv-checkbox-wrapper { 2 display: inline-block; 3} 4 5.uv-checkbox { 6 display: none; 7} 8 9.uv-checkbox-label { 10 display: flex; 11 align-items: center; 12 cursor: pointer; 13} 14 15.uv-checkbox-icon { 16 position: relative; 17 width: 2em; 18 height: 2em; 19 border: 2px solid #ccc; 20 border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; 21 transition: border-color 0.3s ease, border-radius 0.3s ease; 22} 23 24.uv-checkmark { 25 position: absolute; 26 top: 0.1em; 27 left: 0.1em; 28 width: 1.6em; 29 height: 1.6em; 30 fill: none; 31 stroke: #fff; 32 stroke-width: 2; 33 stroke-linecap: round; 34 stroke-linejoin: round; 35 stroke-dasharray: 24; 36 stroke-dashoffset: 24; 37 transition: stroke-dashoffset 0.5s cubic-bezier(0.45, 0.05, 0.55, 0.95); 38} 39 40.uv-checkbox-text { 41 margin-left: 0.5em; 42 transition: color 0.3s ease; 43} 44 45.uv-checkbox:checked + .uv-checkbox-label .uv-checkbox-icon { 46 border-color: #6c5ce7; 47 border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%; 48 background-color: #6c5ce7; 49} 50 51.uv-checkbox:checked + .uv-checkbox-label .uv-checkmark { 52 stroke-dashoffset: 0; 53} 54 55.uv-checkbox:checked + .uv-checkbox-label .uv-checkbox-text { 56 color: #6c5ce7; 57} 58
134 views
134 views
MIT License