Checkbox by Galahhad

1/* The design is inspired from the mockapi.io */
2
3.popup {
4  --burger-line-width: 1.125em;
5  --burger-line-height: 0.125em;
6  --burger-offset: 0.625em;
7  --burger-bg: rgba(0, 0, 0, .15);
8  --burger-color: #333;
9  --burger-line-border-radius: 0.1875em;
10  --burger-diameter: 2.125em;
11  --burger-btn-border-radius: calc(var(--burger-diameter) / 2);
12  --burger-line-transition: .3s;
13  --burger-transition: all .1s ease-in-out;
14  --burger-hover-scale: 1.1;
15  --burger-active-scale: .95;
16  --burger-enable-outline-color: var(--burger-bg);
17  --burger-enable-outline-width: 0.125em;
18  --burger-enable-outline-offset: var(--burger-enable-outline-width);
19  /* nav */
20  --nav-padding-x: 0.25em;
21  --nav-padding-y: 0.625em;
22  --nav-border-radius: 0.375em;
23  --nav-border-color: #ccc;
24  --nav-border-width: 0.0625em;
25  --nav-shadow-color: rgba(0, 0, 0, .2);
26  --nav-shadow-width: 0 1px 5px;
27  --nav-bg: #eee;
28  --nav-font-family: Menlo, Roboto Mono, monospace;
29  --nav-default-scale: .8;
30  --nav-active-scale: 1;
31  --nav-position-left: 0;
32  --nav-position-right: unset;
33  /* if you want to change sides just switch one property */
34  /* from properties to "unset" and the other to 0 */
35  /* title */
36  --nav-title-size: 0.625em;
37  --nav-title-color: #777;
38  --nav-title-padding-x: 1rem;
39  --nav-title-padding-y: 0.25em;
40  /* nav button */
41  --nav-button-padding-x: 1rem;
42  --nav-button-padding-y: 0.375em;
43  --nav-button-border-radius: 0.375em;
44  --nav-button-font-size: 12px;
45  --nav-button-hover-bg: #6495ed;
46  --nav-button-hover-text-color: #fff;
47  --nav-button-distance: 0.875em;
48  /* underline */
49  --underline-border-width: 0.0625em;
50  --underline-border-color: #ccc;
51  --underline-margin-y: 0.3125em;
52}
53
54/* popup settings 👆 */
55
56.popup {
57  display: inline-block;
58  text-rendering: optimizeLegibility;
59  position: relative;
60}
61
62.popup input {
63  display: none;
64}
65
66.burger {
67  display: flex;
68  position: relative;
69  align-items: center;
70  justify-content: center;
71  background: var(--burger-bg);
72  width: var(--burger-diameter);
73  height: var(--burger-diameter);
74  border-radius: var(--burger-btn-border-radius);
75  border: none;
76  cursor: pointer;
77  overflow: hidden;
78  transition: var(--burger-transition);
79  outline: var(--burger-enable-outline-width) solid transparent;
80  outline-offset: 0;
81}
82
83.burger span {
84  height: var(--burger-line-height);
85  width: var(--burger-line-width);
86  background: var(--burger-color);
87  border-radius: var(--burger-line-border-radius);
88  position: absolute;
89  transition: var(--burger-line-transition);
90}
91
92.burger span:nth-child(1) {
93  top: var(--burger-offset);
94}
95
96.burger span:nth-child(2) {
97  bottom: var(--burger-offset);
98}
99
100.burger span:nth-child(3) {
101  top: 50%;
102  transform: translateY(-50%);
103}
104
105.popup-window {
106  transform: scale(var(--nav-default-scale));
107  visibility: hidden;
108  opacity: 0;
109  position: absolute;
110  padding: var(--nav-padding-y) var(--nav-padding-x);
111  background: var(--nav-bg);
112  font-family: var(--nav-font-family);
113  color: var(--nav-text-color);
114  border-radius: var(--nav-border-radius);
115  box-shadow: var(--nav-shadow-width) var(--nav-shadow-color);
116  border: var(--nav-border-width) solid var(--nav-border-color);
117  top: calc(var(--burger-diameter) + var(--burger-enable-outline-width) + var(--burger-enable-outline-offset));
118  left: var(--nav-position-left);
119  right: var(--nav-position-right);
120  transition: var(--burger-transition);
121}
122
123.popup-window legend {
124  padding: var(--nav-title-padding-y) var(--nav-title-padding-x);
125  margin: 0;
126  color: var(--nav-title-color);
127  font-size: var(--nav-title-size);
128  text-transform: uppercase;
129}
130
131.popup-window ul {
132  margin: 0;
133  padding: 0;
134  list-style-type: none;
135}
136
137.popup-window ul button {
138  outline: none;
139  width: 100%;
140  border: none;
141  background: none;
142  display: flex;
143  align-items: center;
144  color: var(--burger-color);
145  font-size: var(--nav-button-font-size);
146  padding: var(--nav-button-padding-y) var(--nav-button-padding-x);
147  white-space: nowrap;
148  border-radius: var(--nav-button-border-radius);
149  cursor: pointer;
150  column-gap: var(--nav-button-distance);
151}
152
153.popup-window ul li:nth-child(1) svg,
154.popup-window ul li:nth-child(2) svg {
155  color: cornflowerblue;
156}
157
158.popup-window ul li:nth-child(4) svg,
159.popup-window ul li:nth-child(5) svg {
160  color: rgb(153, 153, 153);
161}
162
163.popup-window ul li:nth-child(7) svg {
164  color: red;
165}
166
167.popup-window hr {
168  margin: var(--underline-margin-y) 0;
169  border: none;
170  border-bottom: var(--underline-border-width) solid var(--underline-border-color);
171}
172
173/* actions */
174
175.popup-window ul button:hover,
176.popup-window ul button:focus-visible,
177.popup-window ul button:hover svg,
178.popup-window ul button:focus-visible svg {
179  color: var(--nav-button-hover-text-color);
180  background: var(--nav-button-hover-bg);
181}
182
183.burger:hover {
184  transform: scale(var(--burger-hover-scale));
185}
186
187.burger:active {
188  transform: scale(var(--burger-active-scale));
189}
190
191.burger:focus:not(:hover) {
192  outline-color: var(--burger-enable-outline-color);
193  outline-offset: var(--burger-enable-outline-offset);
194}
195
196.popup input:checked+.burger span:nth-child(1) {
197  top: 50%;
198  transform: translateY(-50%) rotate(45deg);
199}
200
201.popup input:checked+.burger span:nth-child(2) {
202  bottom: 50%;
203  transform: translateY(50%) rotate(-45deg);
204}
205
206.popup input:checked+.burger span:nth-child(3) {
207  transform: translateX(calc(var(--burger-diameter) * -1 - var(--burger-line-width)));
208}
209
210.popup input:checked~nav {
211  transform: scale(var(--nav-active-scale));
212  visibility: visible;
213  opacity: 1;
214}