#212121
1.checkbox-wrapper-4 * { 2 box-sizing: border-box; 3 color: white; 4} 5 6.checkbox-wrapper-4 .cbx { 7 -webkit-user-select: none; 8 user-select: none; 9 cursor: pointer; 10 padding: 6px 8px; 11 border-radius: 6px; 12 overflow: hidden; 13 transition: all 0.2s ease; 14 display: inline-block; 15} 16 17.checkbox-wrapper-4 .cbx:not(:last-child) { 18 margin-right: 6px; 19} 20 21.checkbox-wrapper-4 .cbx:hover { 22 background: rgba(0,119,255,0.06); 23} 24 25.checkbox-wrapper-4 .cbx span { 26 float: left; 27 vertical-align: middle; 28 transform: translate3d(0, 0, 0); 29} 30 31.checkbox-wrapper-4 .cbx span:first-child { 32 position: relative; 33 width: 18px; 34 height: 18px; 35 border-radius: 4px; 36 transform: scale(1); 37 border: 1px solid #cccfdb; 38 transition: all 0.2s ease; 39 box-shadow: 0 1px 1px rgba(0,16,75,0.05); 40} 41 42.checkbox-wrapper-4 .cbx span:first-child svg { 43 position: absolute; 44 top: 3px; 45 left: 2px; 46 fill: none; 47 stroke: #fff; 48 stroke-width: 2; 49 stroke-linecap: round; 50 stroke-linejoin: round; 51 stroke-dasharray: 16px; 52 stroke-dashoffset: 16px; 53 transition: all 0.3s ease; 54 transition-delay: 0.1s; 55 transform: translate3d(0, 0, 0); 56} 57 58.checkbox-wrapper-4 .cbx span:last-child { 59 padding-left: 8px; 60 line-height: 18px; 61} 62 63.checkbox-wrapper-4 .cbx:hover span:first-child { 64 border-color: #07f; 65} 66 67.checkbox-wrapper-4 .inp-cbx { 68 position: absolute; 69 visibility: hidden; 70} 71 72.checkbox-wrapper-4 .inp-cbx:checked + .cbx span:first-child { 73 background: #07f; 74 border-color: #07f; 75 animation: wave-4 0.4s ease; 76} 77 78.checkbox-wrapper-4 .inp-cbx:checked + .cbx span:first-child svg { 79 stroke-dashoffset: 0; 80} 81 82.checkbox-wrapper-4 .inline-svg { 83 position: absolute; 84 width: 0; 85 height: 0; 86 pointer-events: none; 87 user-select: none; 88} 89 90@media screen and (max-width: 640px) { 91 .checkbox-wrapper-4 .cbx { 92 width: 100%; 93 display: inline-block; 94 } 95} 96 97@-moz-keyframes wave-4 { 98 50% { 99 transform: scale(0.9); 100 } 101} 102 103@-webkit-keyframes wave-4 { 104 50% { 105 transform: scale(0.9); 106 } 107} 108 109@-o-keyframes wave-4 { 110 50% { 111 transform: scale(0.9); 112 } 113} 114 115@keyframes wave-4 { 116 50% { 117 transform: scale(0.9); 118 } 119}
Comments
MIT License