@apexcura/ui-components 0.0.15-Beta2 → 0.0.15-Beta21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.css CHANGED
@@ -1,463 +1,302 @@
1
- /* src/styles/index.css */
2
- *,
3
- ::before,
4
- ::after {
5
- box-sizing: border-box;
6
- border-width: 0;
7
- border-style: solid;
8
- border-color: #e5e7eb;
9
- }
10
- ::before,
11
- ::after {
12
- --tw-content: "";
1
+ /* src/styles/sidebar.css */
2
+ :root {
3
+ --background: #9c88ff;
4
+ --navbar-width: 256px;
5
+ --navbar-width-min: 80px;
6
+ --navbar-dark-primary: #18283b;
7
+ --navbar-dark-secondary: #2c3e50;
8
+ --navbar-light-primary: #f5f6fa;
9
+ --navbar-light-secondary: #8392a5;
13
10
  }
14
11
  html,
15
- :host {
16
- line-height: 1.5;
17
- -webkit-text-size-adjust: 100%;
18
- -moz-tab-size: 4;
19
- -o-tab-size: 4;
20
- tab-size: 4;
21
- font-family:
22
- ui-sans-serif,
23
- system-ui,
24
- sans-serif,
25
- "Apple Color Emoji",
26
- "Segoe UI Emoji",
27
- "Segoe UI Symbol",
28
- "Noto Color Emoji";
29
- font-feature-settings: normal;
30
- font-variation-settings: normal;
31
- -webkit-tap-highlight-color: transparent;
32
- }
33
12
  body {
34
13
  margin: 0;
35
- line-height: inherit;
14
+ background: var(--background);
15
+ }
16
+ #nav-bar {
17
+ position: absolute;
18
+ left: 1vw;
19
+ top: 1vw;
20
+ height: calc(100% - 2vw);
21
+ background: var(--navbar-dark-primary);
22
+ border-radius: 16px;
23
+ display: flex;
24
+ flex-direction: column;
25
+ color: var(--navbar-light-primary);
26
+ font-family:
27
+ Verdana,
28
+ Geneva,
29
+ Tahoma,
30
+ sans-serif;
31
+ overflow: hidden;
32
+ user-select: none;
33
+ }
34
+ #nav-bar hr {
35
+ margin: 0;
36
+ position: relative;
37
+ left: 16px;
38
+ width: calc(100% - 32px);
39
+ border: none;
40
+ border-top: solid 1px var(--navbar-dark-secondary);
36
41
  }
37
- hr {
38
- height: 0;
39
- color: inherit;
40
- border-top-width: 1px;
41
- }
42
- abbr:where([title]) {
43
- -webkit-text-decoration: underline dotted;
44
- text-decoration: underline dotted;
45
- }
46
- h1,
47
- h2,
48
- h3,
49
- h4,
50
- h5,
51
- h6 {
52
- font-size: inherit;
53
- font-weight: inherit;
54
- }
55
- a {
42
+ #nav-bar a {
56
43
  color: inherit;
57
44
  text-decoration: inherit;
58
45
  }
59
- b,
60
- strong {
61
- font-weight: bolder;
46
+ #nav-bar input[type=checkbox] {
47
+ display: none;
62
48
  }
63
- code,
64
- kbd,
65
- samp,
66
- pre {
67
- font-family:
68
- ui-monospace,
69
- SFMono-Regular,
70
- Menlo,
71
- Monaco,
72
- Consolas,
73
- "Liberation Mono",
74
- "Courier New",
75
- monospace;
76
- font-feature-settings: normal;
77
- font-variation-settings: normal;
78
- font-size: 1em;
79
- }
80
- small {
81
- font-size: 80%;
82
- }
83
- sub,
84
- sup {
85
- font-size: 75%;
86
- line-height: 0;
49
+ #nav-header {
87
50
  position: relative;
88
- vertical-align: baseline;
89
- }
90
- sub {
91
- bottom: -0.25em;
92
- }
93
- sup {
94
- top: -0.5em;
95
- }
96
- table {
97
- text-indent: 0;
98
- border-color: inherit;
99
- border-collapse: collapse;
100
- }
101
- button,
102
- input,
103
- optgroup,
104
- select,
105
- textarea {
106
- font-family: inherit;
107
- font-feature-settings: inherit;
108
- font-variation-settings: inherit;
109
- font-size: 100%;
110
- font-weight: inherit;
111
- line-height: inherit;
112
- letter-spacing: inherit;
113
- color: inherit;
114
- margin: 0;
115
- padding: 0;
116
- }
117
- button,
118
- select {
119
- text-transform: none;
120
- }
121
- button,
122
- input:where([type=button]),
123
- input:where([type=reset]),
124
- input:where([type=submit]) {
125
- -webkit-appearance: button;
126
- background-color: transparent;
127
- background-image: none;
128
- }
129
- :-moz-focusring {
130
- outline: auto;
131
- }
132
- :-moz-ui-invalid {
133
- box-shadow: none;
134
- }
135
- progress {
136
- vertical-align: baseline;
137
- }
138
- ::-webkit-inner-spin-button,
139
- ::-webkit-outer-spin-button {
140
- height: auto;
141
- }
142
- [type=search] {
143
- -webkit-appearance: textfield;
144
- outline-offset: -2px;
145
- }
146
- ::-webkit-search-decoration {
147
- -webkit-appearance: none;
148
- }
149
- ::-webkit-file-upload-button {
150
- -webkit-appearance: button;
151
- font: inherit;
152
- }
153
- summary {
154
- display: list-item;
155
- }
156
- blockquote,
157
- dl,
158
- dd,
159
- h1,
160
- h2,
161
- h3,
162
- h4,
163
- h5,
164
- h6,
165
- hr,
166
- figure,
167
- p,
168
- pre {
169
- margin: 0;
170
- }
171
- fieldset {
172
- margin: 0;
173
- padding: 0;
174
- }
175
- legend {
176
- padding: 0;
177
- }
178
- ol,
179
- ul,
180
- menu {
181
- list-style: none;
182
- margin: 0;
183
- padding: 0;
184
- }
185
- dialog {
186
- padding: 0;
187
- }
188
- textarea {
189
- resize: vertical;
190
- }
191
- input::-moz-placeholder,
192
- textarea::-moz-placeholder {
193
- opacity: 1;
194
- color: #9ca3af;
195
- }
196
- input::placeholder,
197
- textarea::placeholder {
198
- opacity: 1;
199
- color: #9ca3af;
200
- }
201
- button,
202
- [role=button] {
51
+ width: var(--navbar-width);
52
+ left: 16px;
53
+ width: calc(var(--navbar-width) - 16px);
54
+ min-height: 80px;
55
+ background: var(--navbar-dark-primary);
56
+ border-radius: 16px;
57
+ z-index: 2;
58
+ display: flex;
59
+ align-items: center;
60
+ transition: width .2s;
61
+ }
62
+ #nav-header hr {
63
+ position: absolute;
64
+ bottom: 0;
65
+ }
66
+ #nav-title {
67
+ font-size: 1.5rem;
68
+ transition: opacity 1s;
69
+ }
70
+ label[for=nav-toggle] {
71
+ position: absolute;
72
+ right: 0;
73
+ width: 3rem;
74
+ height: 100%;
75
+ display: flex;
76
+ align-items: center;
77
+ justify-content: center;
203
78
  cursor: pointer;
204
79
  }
205
- :disabled {
206
- cursor: default;
207
- }
208
- img,
209
- svg,
210
- video,
211
- canvas,
212
- audio,
213
- iframe,
214
- embed,
215
- object {
216
- display: block;
217
- vertical-align: middle;
218
- }
219
- img,
220
- video {
221
- max-width: 100%;
222
- height: auto;
223
- }
224
- [hidden] {
225
- display: none;
80
+ #nav-toggle-burger {
81
+ position: relative;
82
+ width: 16px;
83
+ height: 2px;
84
+ background: var(--navbar-dark-primary);
85
+ border-radius: 99px;
86
+ }
87
+ #nav-toggle-burger:before,
88
+ #nav-toggle-burger:after {
89
+ content: "";
90
+ position: absolute;
91
+ width: 10px;
92
+ height: 2px;
93
+ background: var(--navbar-light-primary);
94
+ border-radius: 99px;
95
+ transition: .2s;
96
+ }
97
+ #nav-toggle-burger:before {
98
+ top: -6px;
99
+ transform: translate(2px, 8px) rotate(30deg);
100
+ }
101
+ #nav-toggle-burger:after {
102
+ top: 6px;
103
+ transform: translate(2px, -8px) rotate(-30deg);
104
+ }
105
+ #nav-content {
106
+ margin: -16px 0;
107
+ padding: 16px 0;
108
+ position: relative;
109
+ flex: 1;
110
+ width: var(--navbar-width);
111
+ background: var(--navbar-dark-primary);
112
+ box-shadow: 0 0 0 16px var(--navbar-dark-primary);
113
+ direction: rtl;
114
+ overflow-x: hidden;
115
+ transition: width .2s;
116
+ }
117
+ #nav-content::-webkit-scrollbar {
118
+ width: 8px;
119
+ height: 8px;
120
+ }
121
+ #nav-content::-webkit-scrollbar-thumb {
122
+ border-radius: 99px;
123
+ background-color: #D62929;
124
+ }
125
+ #nav-content::-webkit-scrollbar-button {
126
+ height: 16px;
226
127
  }
227
- *,
228
- ::before,
229
- ::after {
230
- --tw-border-spacing-x: 0;
231
- --tw-border-spacing-y: 0;
232
- --tw-translate-x: 0;
233
- --tw-translate-y: 0;
234
- --tw-rotate: 0;
235
- --tw-skew-x: 0;
236
- --tw-skew-y: 0;
237
- --tw-scale-x: 1;
238
- --tw-scale-y: 1;
239
- --tw-pan-x: ;
240
- --tw-pan-y: ;
241
- --tw-pinch-zoom: ;
242
- --tw-scroll-snap-strictness: proximity;
243
- --tw-gradient-from-position: ;
244
- --tw-gradient-via-position: ;
245
- --tw-gradient-to-position: ;
246
- --tw-ordinal: ;
247
- --tw-slashed-zero: ;
248
- --tw-numeric-figure: ;
249
- --tw-numeric-spacing: ;
250
- --tw-numeric-fraction: ;
251
- --tw-ring-inset: ;
252
- --tw-ring-offset-width: 0px;
253
- --tw-ring-offset-color: #fff;
254
- --tw-ring-color: rgb(59 130 246 / 0.5);
255
- --tw-ring-offset-shadow: 0 0 #0000;
256
- --tw-ring-shadow: 0 0 #0000;
257
- --tw-shadow: 0 0 #0000;
258
- --tw-shadow-colored: 0 0 #0000;
259
- --tw-blur: ;
260
- --tw-brightness: ;
261
- --tw-contrast: ;
262
- --tw-grayscale: ;
263
- --tw-hue-rotate: ;
264
- --tw-invert: ;
265
- --tw-saturate: ;
266
- --tw-sepia: ;
267
- --tw-drop-shadow: ;
268
- --tw-backdrop-blur: ;
269
- --tw-backdrop-brightness: ;
270
- --tw-backdrop-contrast: ;
271
- --tw-backdrop-grayscale: ;
272
- --tw-backdrop-hue-rotate: ;
273
- --tw-backdrop-invert: ;
274
- --tw-backdrop-opacity: ;
275
- --tw-backdrop-saturate: ;
276
- --tw-backdrop-sepia: ;
277
- --tw-contain-size: ;
278
- --tw-contain-layout: ;
279
- --tw-contain-paint: ;
280
- --tw-contain-style: ;
281
- }
282
- ::backdrop {
283
- --tw-border-spacing-x: 0;
284
- --tw-border-spacing-y: 0;
285
- --tw-translate-x: 0;
286
- --tw-translate-y: 0;
287
- --tw-rotate: 0;
288
- --tw-skew-x: 0;
289
- --tw-skew-y: 0;
290
- --tw-scale-x: 1;
291
- --tw-scale-y: 1;
292
- --tw-pan-x: ;
293
- --tw-pan-y: ;
294
- --tw-pinch-zoom: ;
295
- --tw-scroll-snap-strictness: proximity;
296
- --tw-gradient-from-position: ;
297
- --tw-gradient-via-position: ;
298
- --tw-gradient-to-position: ;
299
- --tw-ordinal: ;
300
- --tw-slashed-zero: ;
301
- --tw-numeric-figure: ;
302
- --tw-numeric-spacing: ;
303
- --tw-numeric-fraction: ;
304
- --tw-ring-inset: ;
305
- --tw-ring-offset-width: 0px;
306
- --tw-ring-offset-color: #fff;
307
- --tw-ring-color: rgb(59 130 246 / 0.5);
308
- --tw-ring-offset-shadow: 0 0 #0000;
309
- --tw-ring-shadow: 0 0 #0000;
310
- --tw-shadow: 0 0 #0000;
311
- --tw-shadow-colored: 0 0 #0000;
312
- --tw-blur: ;
313
- --tw-brightness: ;
314
- --tw-contrast: ;
315
- --tw-grayscale: ;
316
- --tw-hue-rotate: ;
317
- --tw-invert: ;
318
- --tw-saturate: ;
319
- --tw-sepia: ;
320
- --tw-drop-shadow: ;
321
- --tw-backdrop-blur: ;
322
- --tw-backdrop-brightness: ;
323
- --tw-backdrop-contrast: ;
324
- --tw-backdrop-grayscale: ;
325
- --tw-backdrop-hue-rotate: ;
326
- --tw-backdrop-invert: ;
327
- --tw-backdrop-opacity: ;
328
- --tw-backdrop-saturate: ;
329
- --tw-backdrop-sepia: ;
330
- --tw-contain-size: ;
331
- --tw-contain-layout: ;
332
- --tw-contain-paint: ;
333
- --tw-contain-style: ;
334
- }
335
- .visible {
336
- visibility: visible;
337
- }
338
- .fixed {
339
- position: fixed;
340
- }
341
- .m-\[10px\] {
342
- margin: 10px;
343
- }
344
- .mr-3 {
345
- margin-right: 0.75rem;
346
- }
347
- .flex {
128
+ #nav-content-highlight {
129
+ position: absolute;
130
+ left: 16px;
131
+ top: calc(0 * 54 + 16px);
132
+ width: calc(100% - 16px);
133
+ height: 54px;
134
+ background: var(--background);
135
+ background-attachment: fixed;
136
+ border-radius: 16px 0 0 16px;
137
+ transition: top .2s;
138
+ }
139
+ #nav-content-highlight:before,
140
+ #nav-content-highlight:after {
141
+ content: "";
142
+ position: absolute;
143
+ right: 0;
144
+ bottom: 100%;
145
+ width: 32px;
146
+ height: 32px;
147
+ border-radius: 50%;
148
+ box-shadow: 16px 16px var(--background);
149
+ }
150
+ #nav-content-highlight:after {
151
+ top: 100%;
152
+ box-shadow: 16px -16px var(--background);
153
+ }
154
+ .nav-button {
155
+ position: relative;
156
+ margin-left: 16px;
157
+ height: 54px;
348
158
  display: flex;
159
+ align-items: center;
160
+ color: var(--navbar-light-secondary);
161
+ direction: ltr;
162
+ cursor: pointer;
163
+ z-index: 1;
164
+ transition: color .2s;
349
165
  }
350
- .table {
351
- display: table;
352
- }
353
- .h-5 {
354
- height: 1.25rem;
355
- }
356
- .w-5 {
357
- width: 1.25rem;
358
- }
359
- @keyframes spin {
360
- to {
361
- transform: rotate(360deg);
362
- }
363
- }
364
- .animate-spin {
365
- animation: spin 1s linear infinite;
366
- }
367
- .rounded-\[8px\] {
368
- border-radius: 8px;
369
- }
370
- .border {
371
- border-width: 1px;
372
- }
373
- .border-\[\#919191\] {
374
- --tw-border-opacity: 1;
375
- border-color: rgb(145 145 145 / var(--tw-border-opacity));
376
- }
377
- .border-\[\#B8A4DE\] {
378
- --tw-border-opacity: 1;
379
- border-color: rgb(184 164 222 / var(--tw-border-opacity));
166
+ .nav-button span {
167
+ transition: opacity 1s;
380
168
  }
381
- .bg-\[\#E2D6F8\] {
382
- --tw-bg-opacity: 1;
383
- background-color: rgb(226 214 248 / var(--tw-bg-opacity));
169
+ .nav-button .fas {
170
+ transition: min-width .2s;
384
171
  }
385
- .bg-\[\#F2F2F2\] {
386
- --tw-bg-opacity: 1;
387
- background-color: rgb(242 242 242 / var(--tw-bg-opacity));
172
+ .nav-button:hover {
173
+ color: var(--navbar-dark-primary);
388
174
  }
389
- .p-\[6px\] {
390
- padding: 6px;
175
+ .nav-button:hover ~ #nav-content-highlight {
176
+ top: calc(var(--nav-button-index) * 54 + 16px);
391
177
  }
392
- .text-center {
178
+ #nav-bar .fas {
179
+ min-width: 3rem;
393
180
  text-align: center;
394
181
  }
395
- .italic {
396
- font-style: italic;
397
- }
398
- .text-\[\\w-\] {
399
- color: w-;
400
- }
401
- .text-black {
402
- --tw-text-opacity: 1;
403
- color: rgb(0 0 0 / var(--tw-text-opacity));
404
- }
405
- .shadow-\[0px_0px_1px_1px_\#919191\] {
406
- --tw-shadow: 0px 0px 1px 1px #919191;
407
- --tw-shadow-colored: 0px 0px 1px 1px var(--tw-shadow-color);
408
- box-shadow:
409
- var(--tw-ring-offset-shadow, 0 0 #0000),
410
- var(--tw-ring-shadow, 0 0 #0000),
411
- var(--tw-shadow);
412
- }
413
- .shadow-\[0px_0px_1px_1px_\#B8A4DE\] {
414
- --tw-shadow: 0px 0px 1px 1px #B8A4DE;
415
- --tw-shadow-colored: 0px 0px 1px 1px var(--tw-shadow-color);
416
- box-shadow:
417
- var(--tw-ring-offset-shadow, 0 0 #0000),
418
- var(--tw-ring-shadow, 0 0 #0000),
419
- var(--tw-shadow);
420
- }
421
- .filter {
422
- filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
423
- }
424
- .submit:where(.css-dev-only-do-not-override-1r287do).ant-btn-default:not(:disabled):not(.ant-btn-disabled):hover {
425
- color: #472D7A;
426
- background-color: white;
427
- border: solid 1px #472D7A;
428
- }
429
- :where(.css-dev-only-do-not-override-1r287do).ant-radio-button-wrapper {
430
- border: 1px solid #919191;
431
- }
432
- :where(.css-dev-only-do-not-override-1r287do).ant-input-affix-wrapper {
433
- border: solid 1px #919191;
434
- width: 275px;
435
- height: 16px;
436
- padding: 16px;
437
- gap: 10px;
438
- }
439
- :where(.css-dev-only-do-not-override-1r287do).ant-input-outlined:hover {
440
- border: solid 1px #919191;
441
- }
442
- :where(.css-dev-only-do-not-override-1r287do).ant-input-outlined:focus {
443
- border: solid 1px #919191;
444
- }
445
- :where(.css-dev-only-do-not-override-1r287do).ant-input-outlined:focus-within {
446
- border: solid 1px #919191;
447
- }
448
- :where(.css-dev-only-do-not-override-1r287do).ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before {
449
- display: none;
450
- }
451
- :where(.css-dev-only-do-not-override-1r287do).ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::after {
452
- display: none;
453
- }
454
- :where(.css-dev-only-do-not-override-1r287do).ant-radio-button-wrapper:not(:first-child)::before {
455
- width: 0;
456
- }
457
- :where(.css-dev-only-do-not-override-1r287do).ant-radio-button-wrapper:first-child {
458
- border-inline-start: 1px solid rgb(145 145 145);
182
+ #nav-footer {
183
+ position: relative;
184
+ width: var(--navbar-width);
185
+ height: 54px;
186
+ background: var(--navbar-dark-secondary);
187
+ border-radius: 16px;
188
+ display: flex;
189
+ flex-direction: column;
190
+ z-index: 2;
191
+ transition: width .2s, height .2s;
459
192
  }
460
- .hover\:bg-\[\#F2F2F2\]:hover {
461
- --tw-bg-opacity: 1;
462
- background-color: rgb(242 242 242 / var(--tw-bg-opacity));
193
+ #nav-footer-heading {
194
+ position: relative;
195
+ width: 100%;
196
+ height: 54px;
197
+ display: flex;
198
+ align-items: center;
463
199
  }
200
+ #nav-footer-avatar {
201
+ position: relative;
202
+ margin: 11px 0 11px 16px;
203
+ left: 0;
204
+ width: 32px;
205
+ height: 32px;
206
+ border-radius: 50%;
207
+ overflow: hidden;
208
+ transform: translate(0);
209
+ transition: .2s;
210
+ }
211
+ #nav-footer-avatar img {
212
+ height: 100%;
213
+ }
214
+ #nav-footer-titlebox {
215
+ position: relative;
216
+ margin-left: 16px;
217
+ width: 10px;
218
+ display: flex;
219
+ flex-direction: column;
220
+ transition: opacity 1s;
221
+ }
222
+ #nav-footer-subtitle {
223
+ color: var(--navbar-light-secondary);
224
+ font-size: .6rem;
225
+ }
226
+ #nav-toggle:not(:checked) ~ #nav-footer-toggle:checked + #nav-footer {
227
+ height: 30%;
228
+ min-height: 54px;
229
+ }
230
+ #nav-footer label[for=nav-footer-toggle] {
231
+ position: absolute;
232
+ right: 0;
233
+ width: 3rem;
234
+ height: 100%;
235
+ display: flex;
236
+ align-items: center;
237
+ cursor: pointer;
238
+ transition: transform .2s, opacity .2s;
239
+ }
240
+ #nav-footer label[for=nav-footer-toggle] {
241
+ transform: rotate(180deg);
242
+ }
243
+ #nav-footer-content {
244
+ margin: 0 16px 16px 16px;
245
+ border-top: solid 1px var(--navbar-light-secondary);
246
+ padding: 16px 0;
247
+ color: var(--navbar-light-secondary);
248
+ font-size: .8rem;
249
+ overflow: auto;
250
+ }
251
+ #nav-footer-content::-webkit-scrollbar {
252
+ width: 8px;
253
+ height: 8px;
254
+ }
255
+ #nav-footer-content::-webkit-scrollbar-thumb {
256
+ border-radius: 99px;
257
+ background-color: #D62929;
258
+ }
259
+ #nav-toggle:checked ~ #nav-header {
260
+ width: calc(var(--navbar-width-min) - 16px);
261
+ }
262
+ #nav-toggle:checked ~ #nav-content,
263
+ #nav-toggle:checked ~ #nav-footer {
264
+ width: var(--navbar-width-min);
265
+ }
266
+ #nav-toggle:checked ~ #nav-header #nav-title {
267
+ opacity: 0;
268
+ pointer-events: none;
269
+ transition: opacity .1s;
270
+ }
271
+ #nav-toggle:checked ~ #nav-header label[for=nav-toggle] {
272
+ left: calc(50% - 8px);
273
+ transform: translate(-50%);
274
+ }
275
+ #nav-toggle:checked ~ #nav-header #nav-toggle-burger {
276
+ background: var(--navbar-light-primary);
277
+ }
278
+ #nav-toggle:checked ~ #nav-header #nav-toggle-burger:before,
279
+ #nav-toggle:checked ~ #nav-header #nav-toggle-burger:after {
280
+ width: 16px;
281
+ background: var(--navbar-light-secondary);
282
+ transform: translate(0, 0) rotate(0deg);
283
+ }
284
+ #nav-toggle:checked ~ #nav-content .nav-button span {
285
+ opacity: 0;
286
+ transition: opacity .1s;
287
+ }
288
+ #nav-toggle:checked ~ #nav-content .nav-button .fas {
289
+ min-width: calc(100% - 16px);
290
+ }
291
+ #nav-toggle:checked ~ #nav-footer #nav-footer-avatar {
292
+ margin-left: 0;
293
+ left: 50%;
294
+ transform: translate(-50%);
295
+ }
296
+ #nav-toggle:checked ~ #nav-footer #nav-footer-titlebox,
297
+ #nav-toggle:checked ~ #nav-footer label[for=nav-footer-toggle] {
298
+ opacity: 0;
299
+ transition: opacity .1s;
300
+ pointer-events: none;
301
+ }
302
+ /*# sourceMappingURL=index.css.map */