Checkbox by Shoh2008
#e8e8e8
1.checkbox-wrapper-19 { 2 box-sizing: border-box; 3 --background-color: #fff; 4 --checkbox-height: 25px; 5} 6 7@-moz-keyframes dothabottomcheck-19 { 8 0% { 9 height: 0; 10 } 11 12 100% { 13 height: calc(var(--checkbox-height) / 2); 14 } 15} 16 17@-webkit-keyframes dothabottomcheck-19 { 18 0% { 19 height: 0; 20 } 21 22 100% { 23 height: calc(var(--checkbox-height) / 2); 24 } 25} 26 27@keyframes dothabottomcheck-19 { 28 0% { 29 height: 0; 30 } 31 32 100% { 33 height: calc(var(--checkbox-height) / 2); 34 } 35} 36 37@keyframes dothatopcheck-19 { 38 0% { 39 height: 0; 40 } 41 42 50% { 43 height: 0; 44 } 45 46 100% { 47 height: calc(var(--checkbox-height) * 1.2); 48 } 49} 50 51@-webkit-keyframes dothatopcheck-19 { 52 0% { 53 height: 0; 54 } 55 56 50% { 57 height: 0; 58 } 59 60 100% { 61 height: calc(var(--checkbox-height) * 1.2); 62 } 63} 64 65@-moz-keyframes dothatopcheck-19 { 66 0% { 67 height: 0; 68 } 69 70 50% { 71 height: 0; 72 } 73 74 100% { 75 height: calc(var(--checkbox-height) * 1.2); 76 } 77} 78 79.checkbox-wrapper-19 input[type=checkbox] { 80 display: none; 81} 82 83.checkbox-wrapper-19 .check-box { 84 height: var(--checkbox-height); 85 width: var(--checkbox-height); 86 background-color: transparent; 87 border: calc(var(--checkbox-height) * .1) solid #000; 88 border-radius: 5px; 89 position: relative; 90 display: inline-block; 91 -moz-box-sizing: border-box; 92 -webkit-box-sizing: border-box; 93 box-sizing: border-box; 94 -moz-transition: border-color ease 0.2s; 95 -o-transition: border-color ease 0.2s; 96 -webkit-transition: border-color ease 0.2s; 97 transition: border-color ease 0.2s; 98 cursor: pointer; 99} 100 101.checkbox-wrapper-19 .check-box::before, 102 .checkbox-wrapper-19 .check-box::after { 103 -moz-box-sizing: border-box; 104 -webkit-box-sizing: border-box; 105 box-sizing: border-box; 106 position: absolute; 107 height: 0; 108 width: calc(var(--checkbox-height) * .2); 109 background-color: #34b93d; 110 display: inline-block; 111 -moz-transform-origin: left top; 112 -ms-transform-origin: left top; 113 -o-transform-origin: left top; 114 -webkit-transform-origin: left top; 115 transform-origin: left top; 116 border-radius: 5px; 117 content: " "; 118 -webkit-transition: opacity ease 0.5; 119 -moz-transition: opacity ease 0.5; 120 transition: opacity ease 0.5; 121} 122 123.checkbox-wrapper-19 .check-box::before { 124 top: calc(var(--checkbox-height) * .72); 125 left: calc(var(--checkbox-height) * .41); 126 box-shadow: 0 0 0 calc(var(--checkbox-height) * .05) var(--background-color); 127 -moz-transform: rotate(-135deg); 128 -ms-transform: rotate(-135deg); 129 -o-transform: rotate(-135deg); 130 -webkit-transform: rotate(-135deg); 131 transform: rotate(-135deg); 132} 133 134.checkbox-wrapper-19 .check-box::after { 135 top: calc(var(--checkbox-height) * .37); 136 left: calc(var(--checkbox-height) * .05); 137 -moz-transform: rotate(-45deg); 138 -ms-transform: rotate(-45deg); 139 -o-transform: rotate(-45deg); 140 -webkit-transform: rotate(-45deg); 141 transform: rotate(-45deg); 142} 143 144.checkbox-wrapper-19 input[type=checkbox]:checked + .check-box, 145 .checkbox-wrapper-19 .check-box.checked { 146 border-color: #34b93d; 147} 148 149.checkbox-wrapper-19 input[type=checkbox]:checked + .check-box::after, 150 .checkbox-wrapper-19 .check-box.checked::after { 151 height: calc(var(--checkbox-height) / 2); 152 -moz-animation: dothabottomcheck-19 0.2s ease 0s forwards; 153 -o-animation: dothabottomcheck-19 0.2s ease 0s forwards; 154 -webkit-animation: dothabottomcheck-19 0.2s ease 0s forwards; 155 animation: dothabottomcheck-19 0.2s ease 0s forwards; 156} 157 158.checkbox-wrapper-19 input[type=checkbox]:checked + .check-box::before, 159 .checkbox-wrapper-19 .check-box.checked::before { 160 height: calc(var(--checkbox-height) * 1.2); 161 -moz-animation: dothatopcheck-19 0.4s ease 0s forwards; 162 -o-animation: dothatopcheck-19 0.4s ease 0s forwards; 163 -webkit-animation: dothatopcheck-19 0.4s ease 0s forwards; 164 animation: dothatopcheck-19 0.4s ease 0s forwards; 165}
1.8K views
1.8K views
MIT License