#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(.11,.29,.18,.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} 30 31.checkbox-wrapper-33 .checkbox + .checkbox { 32 margin-top: var(--s-small); 33} 34 35.checkbox-wrapper-33 .checkbox__symbol { 36 display: inline-block; 37 display: flex; 38 margin-right: calc(var(--s-small) * 0.7); 39 border: var(--border-width) solid var(--c-primary); 40 position: relative; 41 border-radius: 0.1em; 42 width: 1.5em; 43 height: 1.5em; 44 transition: box-shadow var(--t-base) var(--e-out), background-color var(--t-base); 45 box-shadow: 0 0 0 0 var(--c-primary-10-percent-opacity); 46} 47 48.checkbox-wrapper-33 .checkbox__symbol:after { 49 content: ""; 50 position: absolute; 51 top: 0.5em; 52 left: 0.5em; 53 width: 0.25em; 54 height: 0.25em; 55 background-color: var(--c-primary-20-percent-opacity); 56 opacity: 0; 57 border-radius: 3em; 58 transform: scale(1); 59 transform-origin: 50% 50%; 60} 61 62.checkbox-wrapper-33 .checkbox .icon-checkbox { 63 width: 1em; 64 height: 1em; 65 margin: auto; 66 fill: none; 67 stroke-width: 3; 68 stroke: currentColor; 69 stroke-linecap: round; 70 stroke-linejoin: round; 71 stroke-miterlimit: 10; 72 color: var(--c-primary); 73 display: inline-block; 74} 75 76.checkbox-wrapper-33 .checkbox .icon-checkbox path { 77 transition: stroke-dashoffset var(--t-fast) var(--e-in); 78 stroke-dasharray: 30px, 31px; 79 stroke-dashoffset: 31px; 80} 81 82.checkbox-wrapper-33 .checkbox__textwrapper { 83 margin: 0; 84} 85 86.checkbox-wrapper-33 .checkbox__trigger:checked + .checkbox__symbol:after { 87 -webkit-animation: ripple-33 1.5s var(--e-out); 88 animation: ripple-33 1.5s var(--e-out); 89} 90 91.checkbox-wrapper-33 .checkbox__trigger:checked + .checkbox__symbol .icon-checkbox path { 92 transition: stroke-dashoffset var(--t-base) var(--e-out); 93 stroke-dashoffset: 0px; 94} 95 96.checkbox-wrapper-33 .checkbox__trigger:focus + .checkbox__symbol { 97 box-shadow: 0 0 0 0.25em var(--c-primary-20-percent-opacity); 98} 99 100@-webkit-keyframes ripple-33 { 101 from { 102 transform: scale(0); 103 opacity: 1; 104 } 105 106 to { 107 opacity: 0; 108 transform: scale(20); 109 } 110} 111 112@keyframes ripple-33 { 113 from { 114 transform: scale(0); 115 opacity: 1; 116 } 117 118 to { 119 opacity: 0; 120 transform: scale(20); 121 } 122}
Comments
MIT License