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: gold;
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}
67
68.bookmark::before {
69  content: "";
70  position: absolute;
71  border-radius: 50%;
72  border: var(--icon-circle-border);
73  opacity: 0;
74}
75
76/* actions */
77
78.ui-bookmark:hover .bookmark {
79  fill: var(--icon-hover-color);
80}
81
82.ui-bookmark input:checked + .bookmark::after {
83  -webkit-animation: circles var(--icon-anmt-duration)
84    cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
85  animation: circles var(--icon-anmt-duration)
86    cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
87  -webkit-animation-delay: var(--icon-anmt-duration);
88  animation-delay: var(--icon-anmt-duration);
89}
90
91.ui-bookmark input:checked + .bookmark {
92  fill: var(--icon-primary-color);
93  -webkit-animation: bookmark var(--icon-anmt-duration) forwards;
94  animation: bookmark var(--icon-anmt-duration) forwards;
95  -webkit-transition-delay: 0.3s;
96  -o-transition-delay: 0.3s;
97  transition-delay: 0.3s;
98}
99
100.ui-bookmark input:checked + .bookmark::before {
101  -webkit-animation: circle var(--icon-anmt-duration)
102    cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
103  animation: circle var(--icon-anmt-duration)
104    cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
105  -webkit-animation-delay: var(--icon-anmt-duration);
106  animation-delay: var(--icon-anmt-duration);
107}
108
109@-webkit-keyframes bookmark {
110  50% {
111    -webkit-transform: scaleY(0.6);
112    transform: scaleY(0.6);
113  }
114
115  100% {
116    -webkit-transform: scaleY(1);
117    transform: scaleY(1);
118  }
119}
120
121@keyframes bookmark {
122  50% {
123    -webkit-transform: scaleY(0.6);
124    transform: scaleY(0.6);
125  }
126
127  100% {
128    -webkit-transform: scaleY(1);
129    transform: scaleY(1);
130  }
131}
132
133@-webkit-keyframes circle {
134  from {
135    width: 0;
136    height: 0;
137    opacity: 0;
138  }
139
140  90% {
141    width: var(--icon-circle-size);
142    height: var(--icon-circle-size);
143    opacity: 1;
144  }
145
146  to {
147    opacity: 0;
148  }
149}
150
151@keyframes circle {
152  from {
153    width: 0;
154    height: 0;
155    opacity: 0;
156  }
157
158  90% {
159    width: var(--icon-circle-size);
160    height: var(--icon-circle-size);
161    opacity: 1;
162  }
163
164  to {
165    opacity: 0;
166  }
167}
168
169@-webkit-keyframes circles {
170  from {
171    -webkit-transform: scale(0);
172    transform: scale(0);
173  }
174
175  40% {
176    opacity: 1;
177  }
178
179  to {
180    -webkit-transform: scale(0.8);
181    transform: scale(0.8);
182    opacity: 0;
183  }
184}
185
186@keyframes circles {
187  from {
188    -webkit-transform: scale(0);
189    transform: scale(0);
190  }
191
192  40% {
193    opacity: 1;
194  }
195
196  to {
197    -webkit-transform: scale(0.8);
198    transform: scale(0.8);
199    opacity: 0;
200  }
201}