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