Checkbox by Shoh2008
#212121
1.checkbox-wrapper-33 { 2 --s-xsmall: 0.625em; 3 --s-small: 1.2em; 4 --border-width: 1px; 5 --c-primary: #5f11e8; 6 --c-primary-20-percent-opacity: rgb(95 17 232 / 20%); 7 --c-primary-10-percent-opacity: rgb(95 17 232 / 10%); 8 --t-base: 0.4s; 9 --t-fast: 0.2s; 10 --e-in: ease-in; 11 --e-out: cubic-bezier(0.11, 0.29, 0.18, 0.98); 12} 13 14.checkbox-wrapper-33 .visuallyhidden { 15 border: 0; 16 clip: rect(0 0 0 0); 17 height: 1px; 18 margin: -1px; 19 overflow: hidden; 20 padding: 0; 21 position: absolute; 22 width: 1px; 23} 24 25.checkbox-wrapper-33 .checkbox { 26 display: flex; 27 align-items: center; 28 justify-content: flex-start; 29 color: white; 30} 31 32.checkbox-wrapper-33 .checkbox + .checkbox { 33 margin-top: var(--s-small); 34} 35 36.checkbox-wrapper-33 .checkbox__symbol { 37 display: inline-block; 38 display: flex; 39 margin-right: calc(var(--s-small) * 0.7); 40 border: var(--border-width) solid var(--c-primary); 41 position: relative; 42 border-radius: 0.1em; 43 width: 1.5em; 44 height: 1.5em; 45 transition: box-shadow var(--t-base) var(--e-out), 46 background-color var(--t-base); 47 box-shadow: 0 0 0 0 var(--c-primary-10-percent-opacity); 48} 49 50.checkbox-wrapper-33 .checkbox__symbol:after { 51 content: ""; 52 position: absolute; 53 top: 0.5em; 54 left: 0.5em; 55 width: 0.25em; 56 height: 0.25em; 57 background-color: var(--c-primary-20-percent-opacity); 58 opacity: 0; 59 border-radius: 3em; 60 transform: scale(1); 61 transform-origin: 50% 50%; 62} 63 64.checkbox-wrapper-33 .checkbox .icon-checkbox { 65 width: 1em; 66 height: 1em; 67 margin: auto; 68 fill: none; 69 stroke-width: 3; 70 stroke: currentColor; 71 stroke-linecap: round; 72 stroke-linejoin: round; 73 stroke-miterlimit: 10; 74 color: var(--c-primary); 75 display: inline-block; 76} 77 78.checkbox-wrapper-33 .checkbox .icon-checkbox path { 79 transition: stroke-dashoffset var(--t-fast) var(--e-in); 80 stroke-dasharray: 30px, 31px; 81 stroke-dashoffset: 31px; 82} 83 84.checkbox-wrapper-33 .checkbox__textwrapper { 85 margin: 0; 86} 87 88.checkbox-wrapper-33 .checkbox__trigger:checked + .checkbox__symbol:after { 89 -webkit-animation: ripple-33 1.5s var(--e-out); 90 animation: ripple-33 1.5s var(--e-out); 91} 92 93.checkbox-wrapper-33 94 .checkbox__trigger:checked 95 + .checkbox__symbol 96 .icon-checkbox 97 path { 98 transition: stroke-dashoffset var(--t-base) var(--e-out); 99 stroke-dashoffset: 0px; 100} 101 102.checkbox-wrapper-33 .checkbox__trigger:focus + .checkbox__symbol { 103 box-shadow: 0 0 0 0.25em var(--c-primary-20-percent-opacity); 104} 105 106@-webkit-keyframes ripple-33 { 107 from { 108 transform: scale(0); 109 opacity: 1; 110 } 111 112 to { 113 opacity: 0; 114 transform: scale(20); 115 } 116} 117 118@keyframes ripple-33 { 119 from { 120 transform: scale(0); 121 opacity: 1; 122 } 123 124 to { 125 opacity: 0; 126 transform: scale(20); 127 } 128} 129
1.7K views
1.7K views
MIT License