Checkbox by Tsiangana
#e8e8e8
1.ui-bookmark { 2 --icon-size: 24px; 3 --icon-secondary-color: rgb(77, 77, 77); 4 --icon-hover-color: rgb(97, 97, 97); 5 --icon-primary-color: rgb(252, 54, 54); 6 --icon-circle-border: 1px solid var(--icon-primary-color); 7 --icon-circle-size: 35px; 8 --icon-anmt-duration: 0.3s; 9} 10 11.ui-bookmark input { 12 -webkit-appearance: none; 13 -moz-appearance: none; 14 appearance: none; 15 display: none; 16} 17 18.ui-bookmark .bookmark { 19 width: var(--icon-size); 20 height: auto; 21 fill: var(--icon-secondary-color); 22 cursor: pointer; 23 -webkit-transition: 0.2s; 24 -o-transition: 0.2s; 25 transition: 0.2s; 26 display: -webkit-box; 27 display: -ms-flexbox; 28 display: flex; 29 -webkit-box-pack: center; 30 -ms-flex-pack: center; 31 justify-content: center; 32 -webkit-box-align: center; 33 -ms-flex-align: center; 34 align-items: center; 35 position: relative; 36 -webkit-transform-origin: top; 37 -ms-transform-origin: top; 38 transform-origin: top; 39} 40 41.bookmark::after { 42 content: ""; 43 position: absolute; 44 width: 10px; 45 height: 10px; 46 -webkit-box-shadow: 0 30px 0 -4px var(--icon-primary-color), 47 30px 0 0 -4px var(--icon-primary-color), 48 0 -30px 0 -4px var(--icon-primary-color), 49 -30px 0 0 -4px var(--icon-primary-color), 50 -22px 22px 0 -4px var(--icon-primary-color), 51 -22px -22px 0 -4px var(--icon-primary-color), 52 22px -22px 0 -4px var(--icon-primary-color), 53 22px 22px 0 -4px var(--icon-primary-color); 54 box-shadow: 0 30px 0 -4px var(--icon-primary-color), 55 30px 0 0 -4px var(--icon-primary-color), 56 0 -30px 0 -4px var(--icon-primary-color), 57 -30px 0 0 -4px var(--icon-primary-color), 58 -22px 22px 0 -4px var(--icon-primary-color), 59 -22px -22px 0 -4px var(--icon-primary-color), 60 22px -22px 0 -4px var(--icon-primary-color), 61 22px 22px 0 -4px var(--icon-primary-color); 62 border-radius: 50%; 63 -webkit-transform: scale(0); 64 -ms-transform: scale(0); 65 transform: scale(0); 66 padding: 1px; 67} 68 69.bookmark::before { 70 content: ""; 71 position: absolute; 72 border-radius: 50%; 73 border: var(--icon-circle-border); 74 opacity: 0; 75} 76 77/* actions */ 78 79.ui-bookmark:hover .bookmark { 80 fill: var(--icon-hover-color); 81} 82 83.ui-bookmark input:checked + .bookmark::after { 84 -webkit-animation: circles var(--icon-anmt-duration) 85 cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; 86 animation: circles var(--icon-anmt-duration) 87 cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; 88 -webkit-animation-delay: var(--icon-anmt-duration); 89 animation-delay: var(--icon-anmt-duration); 90} 91 92.ui-bookmark input:checked + .bookmark { 93 fill: var(--icon-primary-color); 94 -webkit-animation: bookmark var(--icon-anmt-duration) forwards; 95 animation: bookmark var(--icon-anmt-duration) forwards; 96 -webkit-transition-delay: 0.3s; 97 -o-transition-delay: 0.3s; 98 transition-delay: 0.3s; 99} 100 101.ui-bookmark input:checked + .bookmark::before { 102 -webkit-animation: circle var(--icon-anmt-duration) 103 cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; 104 animation: circle var(--icon-anmt-duration) 105 cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; 106 -webkit-animation-delay: var(--icon-anmt-duration); 107 animation-delay: var(--icon-anmt-duration); 108} 109 110@-webkit-keyframes bookmark { 111 50% { 112 -webkit-transform: scaleY(0.6); 113 transform: scaleY(0.6); 114 } 115 116 100% { 117 -webkit-transform: scaleY(1); 118 transform: scaleY(1); 119 } 120} 121 122@keyframes bookmark { 123 50% { 124 -webkit-transform: scaleY(0.6); 125 transform: scaleY(0.6); 126 } 127 128 100% { 129 -webkit-transform: scaleY(1); 130 transform: scaleY(1); 131 } 132} 133 134@-webkit-keyframes circle { 135 from { 136 width: 0; 137 height: 0; 138 opacity: 0; 139 } 140 141 90% { 142 width: var(--icon-circle-size); 143 height: var(--icon-circle-size); 144 opacity: 1; 145 } 146 147 to { 148 opacity: 0; 149 } 150} 151 152@keyframes circle { 153 from { 154 width: 0; 155 height: 0; 156 opacity: 0; 157 } 158 159 90% { 160 width: var(--icon-circle-size); 161 height: var(--icon-circle-size); 162 opacity: 1; 163 } 164 165 to { 166 opacity: 0; 167 } 168} 169 170@-webkit-keyframes circles { 171 from { 172 -webkit-transform: scale(0); 173 transform: scale(0); 174 } 175 176 40% { 177 opacity: 1; 178 } 179 180 to { 181 -webkit-transform: scale(0.8); 182 transform: scale(0.8); 183 opacity: 0; 184 } 185} 186 187@keyframes circles { 188 from { 189 -webkit-transform: scale(0); 190 transform: scale(0); 191 } 192 193 40% { 194 opacity: 1; 195 } 196 197 to { 198 -webkit-transform: scale(0.8); 199 transform: scale(0.8); 200 opacity: 0; 201 } 202} 203
507 views
507 views
MIT License