@finqu/cool 1.3.0 → 2.0.2

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.
Files changed (74) hide show
  1. package/README.md +23 -9
  2. package/dist/css/cool.css +13391 -7742
  3. package/dist/css/cool.css.map +1 -1
  4. package/dist/css/cool.min.css +2 -93
  5. package/dist/css/cool.min.css.map +1 -1
  6. package/dist/js/cool.bundle.js +16051 -17050
  7. package/dist/js/cool.bundle.js.map +1 -1
  8. package/dist/js/cool.bundle.min.js +11 -18
  9. package/dist/js/cool.bundle.min.js.map +1 -1
  10. package/dist/js/cool.esm.js +3469 -4468
  11. package/dist/js/cool.esm.js.map +1 -1
  12. package/dist/js/cool.esm.min.js +2 -8
  13. package/dist/js/cool.esm.min.js.map +1 -1
  14. package/dist/js/cool.js +5083 -6089
  15. package/dist/js/cool.js.map +1 -1
  16. package/dist/js/cool.min.js +2 -8
  17. package/dist/js/cool.min.js.map +1 -1
  18. package/package.json +48 -16
  19. package/scss/LISENCE +15 -0
  20. package/scss/_badge.scss +134 -0
  21. package/scss/_button-group.scss +80 -0
  22. package/scss/_buttons.scss +304 -0
  23. package/scss/_dark.scss +637 -0
  24. package/scss/_dialog.scss +351 -0
  25. package/scss/_dropdown.scss +165 -0
  26. package/scss/_forms.scss +613 -0
  27. package/scss/_frame.scss +948 -0
  28. package/scss/_grid.scss +215 -0
  29. package/scss/_input-group.scss +326 -0
  30. package/scss/_list-group.scss +127 -0
  31. package/scss/_media.scss +439 -0
  32. package/scss/_navbar.scss +122 -0
  33. package/scss/_notification.scss +115 -0
  34. package/scss/_pagination.scss +82 -0
  35. package/scss/_popover.scss +61 -0
  36. package/scss/_reboot.scss +306 -0
  37. package/scss/_root.scss +848 -0
  38. package/scss/_section.scss +735 -0
  39. package/scss/_select.scss +559 -0
  40. package/scss/_tables.scss +611 -0
  41. package/scss/_tabs.scss +50 -0
  42. package/scss/_toast.scss +277 -0
  43. package/scss/_tooltip.scss +130 -0
  44. package/scss/_typography.scss +166 -0
  45. package/scss/_variables.scss +1229 -0
  46. package/scss/cool.scss +69 -0
  47. package/scss/utilities/_align.scss +51 -0
  48. package/scss/utilities/_animation.scss +165 -0
  49. package/scss/utilities/_background.scss +72 -0
  50. package/scss/utilities/_borders.scss +205 -0
  51. package/scss/utilities/_collapse.scss +28 -0
  52. package/scss/utilities/_cursor.scss +160 -0
  53. package/scss/utilities/_display.scss +116 -0
  54. package/scss/utilities/_embed.scss +89 -0
  55. package/scss/utilities/_fill.scss +79 -0
  56. package/scss/utilities/_filters.scss +233 -0
  57. package/scss/utilities/_flex.scss +216 -0
  58. package/scss/utilities/_grid.scss +136 -0
  59. package/scss/utilities/_opacity.scss +131 -0
  60. package/scss/utilities/_overflow.scss +242 -0
  61. package/scss/utilities/_perfect-scrollbar.scss +147 -0
  62. package/scss/utilities/_pointer-events.scss +125 -0
  63. package/scss/utilities/_position.scss +130 -0
  64. package/scss/utilities/_screen-readers.scss +95 -0
  65. package/scss/utilities/_shadows.scss +195 -0
  66. package/scss/utilities/_sizing.scss +288 -0
  67. package/scss/utilities/_spacing.scss +168 -0
  68. package/scss/utilities/_stroke.scss +124 -0
  69. package/scss/utilities/_text.scss +420 -0
  70. package/scss/utilities/_transform.scss +232 -0
  71. package/scss/utilities/_transitions.scss +147 -0
  72. package/scss/utilities/_user-select.scss +93 -0
  73. package/scss/utilities/_visibility.scss +66 -0
  74. package/scss/utilities/_z-index.scss +169 -0
package/scss/_frame.scss ADDED
@@ -0,0 +1,948 @@
1
+ @use "variables" as *;
2
+ /* Frame ========================================================================== */
3
+
4
+ @mixin cool-frame {
5
+ .container-content {
6
+ display: flex;
7
+ flex-direction: column;
8
+ max-width: var(--cool-container-content-max-width);
9
+ min-height: 100%;
10
+ gap: var(--cool-spacing-4);
11
+
12
+ .content-header {
13
+ display: flex;
14
+ flex-direction: column;
15
+ position: relative;
16
+ width: 100%;
17
+ gap: var(--cool-spacing-1);
18
+
19
+ .breadcrumbs {
20
+ display: flex;
21
+ gap: var(--cool-icon-spacer);
22
+ font-family: var(--cool-font-family-title);
23
+ font-weight: var(--cool-font-weight-normal);
24
+ }
25
+
26
+ .content-header-title {
27
+ font-family: var(--cool-font-family-title);
28
+ font-size: var(--cool-h5-font-size);
29
+ font-weight: var(--cool-font-weight-bold);
30
+ word-break: break-all;
31
+ }
32
+
33
+ .content-header-primary-action .btn {
34
+ @include media-breakpoint-down(md) {
35
+ --cool-btn-padding-y: var(--cool-btn-padding-y-sm);
36
+ --cool-btn-padding-x: var(--cool-btn-padding-x-sm);
37
+ --cool-btn-font-size: var(--cool-btn-font-size-sm);
38
+ --cool-btn-line-height: var(--cool-btn-line-height-sm);
39
+ --cool-btn-border-radius: var(--cool-btn-border-radius-sm);
40
+ }
41
+ }
42
+
43
+ .content-header-helper-actions {
44
+ display: flex;
45
+ gap: var(--cool-spacing-1);
46
+ align-items: center;
47
+ flex-wrap: wrap;
48
+ }
49
+
50
+ *:not(:empty) + .content-header-secondary-actions {
51
+ margin-top: var(--cool-spacing-2);
52
+ }
53
+
54
+ .content-header-secondary-actions {
55
+ display: flex;
56
+ gap: var(--cool-spacing-1);
57
+ align-items: center;
58
+ flex-wrap: wrap;
59
+ }
60
+ }
61
+
62
+ .content-inner {
63
+ position: relative;
64
+ overflow: visible;
65
+ }
66
+ }
67
+
68
+ html:not(:has(.site-main)) {
69
+ .container-content {
70
+ margin-top: calc(var(--cool-grid-gutter-x) * 2);
71
+ }
72
+ }
73
+
74
+ html:has(.site-main) {
75
+ overflow-y: hidden;
76
+ width: 100%;
77
+ height: 100%;
78
+ overflow-x: hidden;
79
+
80
+ &.sidebar-transitioning {
81
+ @include media-breakpoint-down(md) {
82
+ .sidebar-left,
83
+ .site-header,
84
+ .content {
85
+ transition: transform 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
86
+ }
87
+ }
88
+
89
+ @include media-breakpoint-sidebar-right-down() {
90
+ .sidebar-right,
91
+ .site-header,
92
+ .content {
93
+ transition: transform 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
94
+ }
95
+ }
96
+
97
+ @include media-breakpoint-up(lg) {
98
+ .sidebar-left,
99
+ .content {
100
+ transition:
101
+ transform 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1),
102
+ width 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
103
+ }
104
+ }
105
+
106
+ @include media-breakpoint-sidebar-right-up() {
107
+ .sidebar-right,
108
+ .content {
109
+ transition:
110
+ transform 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1),
111
+ width 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
112
+ }
113
+ }
114
+ }
115
+
116
+ body {
117
+ width: 100%;
118
+ height: 100%;
119
+ overflow-x: hidden;
120
+
121
+ @include media-breakpoint-down(md) {
122
+ &.sidebar-left-open {
123
+ &:not(:has(.sidebar-left.sidebar-floating)) {
124
+ .site-header,
125
+ .site-main .sidebar-left + .content {
126
+ transform: translate3d(calc(var(--cool-frame-sidebar-left-width) * -1), 0, 0);
127
+ }
128
+ }
129
+
130
+ .site-main .sidebar-left {
131
+ transform: translate3d(0px, 0, 0);
132
+ }
133
+ }
134
+
135
+ &.sidebar-left-closed {
136
+ &:not(:has(.sidebar-left.sidebar-floating)) {
137
+ .site-header {
138
+ transform: translate3d(0 0, 0);
139
+ }
140
+
141
+ .site-main .sidebar-left + .content {
142
+ transform: translate3d(0 0, 0);
143
+ width: 100%;
144
+ float: none;
145
+ }
146
+ }
147
+
148
+ .site-main .sidebar-left {
149
+ transform: translate3d(calc(var(--cool-frame-sidebar-left-width) * -1), 0, 0);
150
+ }
151
+ }
152
+ }
153
+
154
+ @include media-breakpoint-sidebar-right-down() {
155
+ &.sidebar-right-open {
156
+ &:not(:has(.sidebar-right.sidebar-floating)) {
157
+ .site-header,
158
+ .site-main .content:has(+ .sidebar-right) {
159
+ transform: translate3d(calc(var(--cool-frame-sidebar-right-width) * -1), 0, 0);
160
+ }
161
+ }
162
+
163
+ .site-main .sidebar-right {
164
+ transform: translate3d(0px, 0, 0);
165
+ }
166
+ }
167
+
168
+ &.sidebar-right-closed {
169
+ &:not(:has(.sidebar-right.sidebar-floating)) {
170
+ .site-header {
171
+ transform: translate3d(0 0, 0);
172
+ }
173
+
174
+ .site-main .content:has(+ .sidebar-right) {
175
+ transform: translate3d(0 0, 0);
176
+ width: 100%;
177
+ float: none;
178
+ }
179
+ }
180
+
181
+ .site-main .sidebar-right {
182
+ transform: translate3d(var(--cool-frame-sidebar-right-width), 0, 0);
183
+ }
184
+ }
185
+ }
186
+
187
+ @include media-breakpoint-up(lg) {
188
+ &.sidebar-left-closed {
189
+ &:not(:has(.sidebar-left.sidebar-floating)) {
190
+ .site-header {
191
+ transform: translate3d(0 0, 0);
192
+ }
193
+
194
+ .site-main .sidebar-left + .content {
195
+ width: 100%;
196
+ margin-left: 0;
197
+ float: none;
198
+ }
199
+ }
200
+
201
+ .site-main .sidebar-left {
202
+ transform: translate3d(calc(var(--cool-frame-sidebar-left-width) * -1), 0, 0);
203
+ }
204
+ }
205
+
206
+ .site-main .sidebar-left {
207
+ transform: translate3d(0px, 0, 0);
208
+
209
+ & + .content {
210
+ width: calc(100% - var(--cool-frame-sidebar-left-width));
211
+ margin-left: var(--cool-frame-sidebar-left-width);
212
+ float: none;
213
+ }
214
+ }
215
+ }
216
+
217
+ @include media-breakpoint-sidebar-right-up() {
218
+ &.sidebar-right-closed {
219
+ &:not(:has(.sidebar-right.sidebar-floating)) {
220
+ .site-header {
221
+ transform: translate3d(0 0, 0);
222
+ }
223
+
224
+ .site-main .content:has(+ .sidebar-right) {
225
+ width: 100%;
226
+ margin-right: 0;
227
+ float: none;
228
+ }
229
+ }
230
+
231
+ .site-main .sidebar-right {
232
+ transform: translate3d(var(--cool-frame-sidebar-right-width), 0, 0);
233
+ }
234
+ }
235
+
236
+ .site-main .sidebar-right {
237
+ transform: translate3d(0px, 0, 0);
238
+ }
239
+
240
+ &:not(.sidebar-right-closed) .site-main .content:has(+ .sidebar-right) {
241
+ width: calc(100% - var(--cool-frame-sidebar-right-width));
242
+ margin-right: var(--cool-frame-sidebar-right-width);
243
+ float: none;
244
+ }
245
+ }
246
+
247
+ // Combined logic for when both sidebars are present
248
+ @include media-breakpoint-up(lg) {
249
+ &.sidebar-left-closed {
250
+ @include media-breakpoint-sidebar-right-up() {
251
+ // When left sidebar is closed but right is open
252
+ .site-main .sidebar-left + .content:has(+ .sidebar-right) {
253
+ width: calc(100% - var(--cool-frame-sidebar-right-width));
254
+ margin-left: 0;
255
+ margin-right: var(--cool-frame-sidebar-right-width);
256
+ float: none;
257
+ }
258
+ }
259
+ }
260
+ }
261
+
262
+ @include media-breakpoint-sidebar-right-up() {
263
+ &.sidebar-right-closed {
264
+ @include media-breakpoint-up(lg) {
265
+ // When right sidebar is closed but left is open
266
+ .site-main .sidebar-left + .content:has(+ .sidebar-right) {
267
+ width: calc(100% - var(--cool-frame-sidebar-left-width));
268
+ margin-left: var(--cool-frame-sidebar-left-width);
269
+ margin-right: 0;
270
+ float: none;
271
+ }
272
+ }
273
+ }
274
+
275
+ // When both sidebars are closed
276
+ &.sidebar-right-closed {
277
+ @include media-breakpoint-up(lg) {
278
+ &.sidebar-left-closed {
279
+ .site-main .sidebar-left + .content:has(+ .sidebar-right) {
280
+ width: 100% !important;
281
+ margin-left: 0 !important;
282
+ margin-right: 0 !important;
283
+ float: none !important;
284
+ }
285
+ }
286
+ }
287
+ }
288
+
289
+ // When both sidebars are present and open
290
+ &:not(.sidebar-left-closed):not(.sidebar-right-closed) {
291
+ @include media-breakpoint-up(lg) {
292
+ .site-main .sidebar-left + .content:has(+ .sidebar-right) {
293
+ width: calc(
294
+ 100% - var(--cool-frame-sidebar-left-width) - var(--cool-frame-sidebar-right-width)
295
+ );
296
+ margin-left: var(--cool-frame-sidebar-left-width);
297
+ margin-right: var(--cool-frame-sidebar-right-width);
298
+ float: none;
299
+ }
300
+ }
301
+ }
302
+ }
303
+ }
304
+
305
+ .site-header {
306
+ position: relative;
307
+ z-index: 1;
308
+
309
+ &:has(.navbar) + .site-main {
310
+ height: calc(100% - var(--cool-navbar-height));
311
+ border-top-left-radius: var(--cool-navbar-border-radius);
312
+ margin-top: calc(var(--cool-navbar-border-width) * -1);
313
+ z-index: 1;
314
+
315
+ @include media-breakpoint-down(md) {
316
+ height: calc(100% - var(--cool-navbar-height-sm));
317
+ }
318
+ }
319
+
320
+ @each $breakpoint, $container-max-width in $container-max-widths {
321
+ @include media-breakpoint-up($breakpoint) {
322
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
323
+
324
+ &.d#{$infix}-none + .site-main {
325
+ height: 100%;
326
+ }
327
+ }
328
+ }
329
+ }
330
+
331
+ @include media-breakpoint-sidebar-right-up() {
332
+ body:not(.sidebar-right-closed):has(.sidebar-right) .site-main {
333
+ border-top-right-radius: var(--cool-navbar-border-radius);
334
+ }
335
+ }
336
+
337
+ .site-main {
338
+ position: relative;
339
+ overflow: hidden;
340
+ height: 100%;
341
+ background-color: var(--cool-body-bg);
342
+
343
+ .content {
344
+ position: relative;
345
+ width: 100%;
346
+ height: 100%;
347
+ overflow-x: hidden;
348
+ overflow-y: auto;
349
+ float: none;
350
+ padding: calc(var(--cool-grid-gutter-x) * 2) 0;
351
+ -webkit-overflow-scrolling: touch;
352
+
353
+ .container-content {
354
+ &.container-content-fluid {
355
+ max-width: 100%;
356
+ }
357
+
358
+ &:has(> .h-100) {
359
+ height: 100%;
360
+ }
361
+
362
+ .content-header {
363
+ .content-header-title button[data-toggle="dropdown"] {
364
+ font-size: inherit;
365
+ font-family: inherit;
366
+ font-weight: inherit;
367
+ appearance: none;
368
+ border: none;
369
+ outline: none;
370
+ background-color: transparent;
371
+ padding: 0;
372
+ margin: 0;
373
+ width: max-content;
374
+
375
+ &:after {
376
+ width: calc(var(--cool-spacer) * 4);
377
+ height: calc(var(--cool-spacer) * 4);
378
+ padding-left: 0;
379
+ }
380
+
381
+ span {
382
+ border-bottom: var(--cool-border-width) dashed currentColor;
383
+ }
384
+ }
385
+ }
386
+
387
+ .content-footer {
388
+ position: relative;
389
+ width: 100%;
390
+ }
391
+ }
392
+ }
393
+
394
+ .sidebar-inset {
395
+ display: flex;
396
+ flex-direction: column;
397
+ height: 100%;
398
+ }
399
+
400
+ .sidebar-left {
401
+ display: flex;
402
+ flex-direction: column;
403
+ position: absolute;
404
+ top: 0;
405
+ bottom: 0;
406
+ left: 0;
407
+ overflow: hidden;
408
+ transform: translate3d(calc(var(--cool-frame-sidebar-left-width) * -1), 0, 0);
409
+ width: var(--cool-frame-sidebar-left-width);
410
+ height: 100%;
411
+ max-height: 100%;
412
+ overflow-y: auto;
413
+ background-color: var(--cool-frame-sidebar-bg-mobile);
414
+ border-right: var(--cool-frame-sidebar-border-width) solid var(--cool-frame-sidebar-border-color);
415
+ z-index: auto;
416
+ padding: var(--cool-frame-sidebar-padding-y) var(--cool-frame-sidebar-padding-x);
417
+ gap: var(--cool-spacing-4);
418
+
419
+ &.sidebar-floating {
420
+ border-right: none;
421
+
422
+ @include media-breakpoint-down(md) {
423
+ border-top-right-radius: var(--cool-frame-sidebar-floating-border-radius);
424
+ border-bottom-right-radius: var(--cool-frame-sidebar-floating-border-radius);
425
+ }
426
+
427
+ @include media-breakpoint-up(lg) {
428
+ padding: var(--cool-frame-sidebar-floating-padding-y)
429
+ var(--cool-frame-sidebar-floating-padding-x);
430
+ }
431
+
432
+ .sidebar-inset {
433
+ background-color: var(--cool-frame-sidebar-floating-bg);
434
+ box-shadow: var(--cool-frame-sidebar-floating-box-shadow);
435
+
436
+ @include media-breakpoint-up(lg) {
437
+ border-radius: var(--cool-frame-sidebar-floating-border-radius);
438
+ border: var(--cool-frame-sidebar-floating-border-width) solid
439
+ var(--cool-frame-sidebar-floating-border-color);
440
+ }
441
+ }
442
+ }
443
+
444
+ @include media-breakpoint-down(md) {
445
+ position: fixed;
446
+ right: auto;
447
+ visibility: visible;
448
+ z-index: calc(var(--cool-zindex-fixed) + 1);
449
+ }
450
+
451
+ @include media-breakpoint-up(lg) {
452
+ background-color: var(--cool-frame-sidebar-bg);
453
+ }
454
+
455
+ .sidebar-header {
456
+ display: flex;
457
+ padding: var(--cool-frame-sidebar-header-padding-y) var(--cool-frame-sidebar-header-padding-x) 0
458
+ var(--cool-frame-sidebar-header-padding-x);
459
+ z-index: 11;
460
+ position: relative;
461
+ justify-content: space-between;
462
+ }
463
+
464
+ .sidebar-content {
465
+ position: relative;
466
+ height: 100%;
467
+ z-index: 10;
468
+ padding: var(--cool-frame-sidebar-content-padding-y) var(--cool-frame-sidebar-content-padding-x);
469
+ display: flex;
470
+ flex-direction: column;
471
+
472
+ > * {
473
+ flex-shrink: 0;
474
+ }
475
+
476
+ .ps__thumb-y {
477
+ background-color: rgba(0, 0, 0, 0.5);
478
+ }
479
+
480
+ .ps__rail-y:focus > .ps__thumb-y {
481
+ background-color: rgba(0, 0, 0, 0.8);
482
+ }
483
+
484
+ .collapse,
485
+ .collapsing {
486
+ width: 100%;
487
+ }
488
+
489
+ .nav {
490
+ position: relative;
491
+ margin: 0;
492
+ padding: 0;
493
+ list-style: none;
494
+ display: grid;
495
+ gap: 2px;
496
+
497
+ li {
498
+ position: relative;
499
+ display: flex;
500
+ flex-wrap: wrap;
501
+ align-items: center;
502
+
503
+ .nav-additional-action {
504
+ padding: 0;
505
+ flex: 0 auto;
506
+ border: 0;
507
+ background: none;
508
+ margin: 0;
509
+ line-height: calc(var(--cool-spacer) * 3.8);
510
+ font-size: var(--cool-frame-sidebar-nav-a-icon-size);
511
+ min-width: calc(var(--cool-spacer) * 3.2);
512
+ text-align: center;
513
+ box-sizing: content-box;
514
+ outline: 0;
515
+
516
+ &:hover {
517
+ .icon {
518
+ color: var(--cool-frame-sidebar-nav-a-icon-hover-color);
519
+ }
520
+ }
521
+
522
+ .icon {
523
+ color: var(--cool-frame-sidebar-nav-a-icon-color);
524
+ }
525
+ }
526
+
527
+ &.nav-parent {
528
+ .nav {
529
+ gap: 2px;
530
+
531
+ &:has(.nav-child:nth-child(2)) {
532
+ margin-top: 2px;
533
+ }
534
+ }
535
+
536
+ .nav-item-wrapper,
537
+ > .nav-item {
538
+ padding: var(--cool-frame-sidebar-nav-item-padding-y)
539
+ var(--cool-frame-sidebar-nav-item-padding-x);
540
+
541
+ &[disabled] {
542
+ cursor: default;
543
+ }
544
+
545
+ &:hover,
546
+ &:focus {
547
+ outline: 0;
548
+ background-color: var(--cool-frame-sidebar-nav-item-parent-hover-bg);
549
+
550
+ .nav-item-title {
551
+ color: var(--cool-frame-sidebar-nav-item-parent-hover-color);
552
+ }
553
+
554
+ .nav-icon {
555
+ color: var(--cool-frame-sidebar-nav-icon-hover-color);
556
+ }
557
+ }
558
+
559
+ &[aria-expanded="true"],
560
+ &.active {
561
+ .nav-icon {
562
+ color: var(--cool-frame-sidebar-nav-icon-active-color);
563
+ }
564
+ }
565
+
566
+ @include media-breakpoint-up(lg) {
567
+ &.active {
568
+ background-color: var(--cool-frame-sidebar-nav-item-parent-active-bg);
569
+
570
+ .nav-item-title {
571
+ color: var(--cool-frame-sidebar-nav-item-parent-active-color);
572
+ }
573
+ }
574
+ }
575
+
576
+ .nav-item-title {
577
+ display: block;
578
+ position: relative;
579
+ font-size: var(--cool-frame-sidebar-nav-item-parent-font-size);
580
+ font-weight: var(--cool-frame-sidebar-nav-item-parent-font-weight);
581
+ color: var(--cool-frame-sidebar-nav-item-parent-color);
582
+ line-height: calc(var(--cool-spacer) * 3.8);
583
+ align-self: center;
584
+ text-align: left;
585
+ width: 100%;
586
+ }
587
+
588
+ .nav-icon {
589
+ align-self: center;
590
+ float: left;
591
+ text-align: center;
592
+ line-height: calc(var(--cool-spacer) * 3.8);
593
+ font-size: var(--cool-frame-sidebar-nav-icon-size);
594
+ margin: 0 auto;
595
+ color: var(--cool-frame-sidebar-nav-icon-color);
596
+ min-width: calc(var(--cool-spacer) * 3.2);
597
+
598
+ & + span {
599
+ margin-left: calc(var(--cool-spacer) * 1.6);
600
+ }
601
+ }
602
+
603
+ @include media-breakpoint-up(lg) {
604
+ &[data-collapse-container] ~ div,
605
+ &[data-toggle="collapse"] ~ div {
606
+ .nav {
607
+ .nav-child:first-child {
608
+ display: none;
609
+ }
610
+ }
611
+ }
612
+ }
613
+ }
614
+
615
+ .nav-item-wrapper > .nav-item {
616
+ &[aria-expanded="true"],
617
+ &.active {
618
+ .nav-icon {
619
+ color: var(--cool-frame-sidebar-nav-icon-active-color);
620
+ }
621
+ }
622
+ }
623
+ }
624
+
625
+ > .nav-item-wrapper {
626
+ display: flex;
627
+ align-items: center;
628
+
629
+ .nav-item {
630
+ padding: 0;
631
+ flex: 1;
632
+ }
633
+ }
634
+
635
+ .nav-item-wrapper,
636
+ .nav-item {
637
+ position: relative;
638
+ align-items: center;
639
+ display: inline-flex;
640
+ flex: 1 0;
641
+ cursor: pointer;
642
+ padding: var(--cool-frame-sidebar-nav-item-child-padding-y)
643
+ var(--cool-frame-sidebar-nav-item-child-padding-x);
644
+ margin: 0;
645
+ border: 0;
646
+ background: none;
647
+ font-family: var(--cool-frame-sidebar-nav-font-family);
648
+ outline: 0;
649
+ word-break: break-all;
650
+ border-radius: var(--cool-border-radius);
651
+
652
+ .nav-item-title {
653
+ color: var(--cool-frame-sidebar-nav-item-child-color);
654
+ }
655
+
656
+ &:hover,
657
+ &:focus {
658
+ outline: 0;
659
+ background-color: var(--cool-frame-sidebar-nav-item-child-hover-bg);
660
+
661
+ .nav-item-title {
662
+ color: var(--cool-frame-sidebar-nav-item-child-hover-color);
663
+ }
664
+ }
665
+ }
666
+
667
+ li {
668
+ &.divider {
669
+ margin-left: calc(var(--cool-spacer) * 7.2);
670
+ margin-right: calc(var(--cool-spacer) * 4);
671
+ border-bottom: var(--cool-border-width) solid
672
+ var(--cool-frame-sidebar-nav-item-border-color);
673
+ }
674
+
675
+ > .nav-item {
676
+ padding-left: calc(var(--cool-spacer) * 7.2);
677
+
678
+ &.active {
679
+ outline: 0;
680
+ background-color: var(--cool-frame-sidebar-nav-item-child-active-bg);
681
+ font-weight: var(--cool-frame-sidebar-nav-item-child-font-weight);
682
+
683
+ .nav-item-title {
684
+ color: var(--cool-frame-sidebar-nav-item-child-active-color);
685
+ }
686
+ }
687
+ }
688
+ }
689
+ }
690
+ }
691
+
692
+ > .nav {
693
+ padding: var(--cool-frame-sidebar-sub-nav-padding-y) var(--cool-frame-sidebar-sub-nav-padding-x);
694
+ }
695
+ }
696
+
697
+ .sidebar-footer {
698
+ display: grid;
699
+ gap: 2px;
700
+ padding: var(--cool-frame-sidebar-footer-padding-y) var(--cool-frame-sidebar-footer-padding-x);
701
+
702
+ .footer-item {
703
+ display: flex;
704
+ gap: var(--cool-spacing-1);
705
+ padding: calc(var(--cool-spacer) * 1.6) var(--cool-spacing-2);
706
+ align-items: center;
707
+ border-radius: var(--cool-border-radius);
708
+ appearance: none;
709
+ -webkit-appearance: none;
710
+ border: none;
711
+ outline: none;
712
+ box-shadow: none;
713
+ text-align: left;
714
+ background-color: var(--cool-frame-sidebar-footer-item-bg, transparent);
715
+ cursor: pointer;
716
+
717
+ &:hover {
718
+ background-color: var(
719
+ --cool-frame-sidebar-footer-item-hover-bg,
720
+ var(--cool-frame-sidebar-nav-item-parent-hover-bg)
721
+ );
722
+ }
723
+
724
+ @each $color, $value in $theme-bg-colors {
725
+ &.footer-item-#{$color} {
726
+ --cool-frame-sidebar-footer-item-bg: var(--cool-theme-bg-color-#{$color});
727
+ --cool-frame-sidebar-footer-item-hover-bg: color-mix(
728
+ in srgb,
729
+ var(--cool-theme-bg-color-#{$color}),
730
+ white 10%
731
+ );
732
+ --cool-frame-sidebar-footer-item-title-color: var(
733
+ --cool-theme-foreground-color-#{$color}
734
+ );
735
+ --cool-frame-sidebar-footer-item-icon-bg: color-mix(
736
+ in srgb,
737
+ var(--cool-theme-bg-color-#{$color}),
738
+ white 10%
739
+ );
740
+ --cool-frame-sidebar-footer-item-icon-color: var(
741
+ --cool-theme-foreground-color-#{$color}
742
+ );
743
+ }
744
+ }
745
+
746
+ .icon-container {
747
+ aspect-ratio: 1/1;
748
+ flex-shrink: 0;
749
+ flex-grow: 0;
750
+ width: calc(var(--cool-spacer) * 4);
751
+ border-radius: 50%;
752
+ overflow: hidden;
753
+ color: var(--cool-frame-sidebar-footer-item-icon-color, white);
754
+ display: flex;
755
+ justify-content: center;
756
+ align-items: center;
757
+
758
+ img {
759
+ width: 100%;
760
+ height: 100%;
761
+ object-fit: cover;
762
+ }
763
+
764
+ &.icon-container-bg {
765
+ background-color: var(
766
+ --cool-frame-sidebar-footer-item-icon-bg,
767
+ var(--cool-theme-color-medium)
768
+ );
769
+
770
+ .icon {
771
+ font-size: calc(var(--cool-spacer) * 2);
772
+ }
773
+ }
774
+ }
775
+
776
+ .title {
777
+ flex: 1;
778
+ font-size: var(--cool-font-size-sm);
779
+ color: var(--cool-frame-sidebar-footer-item-title-color, var(--cool-theme-color-dark));
780
+ font-weight: var(--cool-font-weight-bold);
781
+ }
782
+ }
783
+ }
784
+
785
+ .sidebar-spacer {
786
+ flex-grow: 1;
787
+ flex-shrink: 1;
788
+ }
789
+ }
790
+
791
+ .sidebar-right {
792
+ display: flex;
793
+ flex-direction: column;
794
+ position: absolute;
795
+ top: 0;
796
+ bottom: 0;
797
+ right: 0;
798
+ transform: translate3d(var(--cool-frame-sidebar-right-width), 0, 0);
799
+ width: var(--cool-frame-sidebar-right-width);
800
+ height: 100%;
801
+ max-height: 100%;
802
+ // background-color: var(--cool-frame-sidebar-bg-mobile);
803
+ border-left: var(--cool-frame-sidebar-border-width) solid var(--cool-frame-sidebar-border-color);
804
+ z-index: auto;
805
+ padding: var(--cool-frame-sidebar-padding-y) var(--cool-frame-sidebar-padding-x);
806
+ gap: var(--cool-spacing-4);
807
+ max-width: 95vw;
808
+
809
+ &.sidebar-floating {
810
+ border-left: none;
811
+
812
+ @include media-breakpoint-down(md) {
813
+ border-top-left-radius: var(--cool-frame-sidebar-floating-border-radius);
814
+ border-bottom-left-radius: var(--cool-frame-sidebar-floating-border-radius);
815
+ }
816
+
817
+ @include media-breakpoint-sidebar-right-up() {
818
+ padding: var(--cool-frame-sidebar-floating-padding-y)
819
+ var(--cool-frame-sidebar-floating-padding-x);
820
+ }
821
+
822
+ .sidebar-inset {
823
+ background-color: var(--cool-frame-sidebar-floating-bg);
824
+ box-shadow: var(--cool-frame-sidebar-floating-box-shadow);
825
+
826
+ @include media-breakpoint-sidebar-right-up() {
827
+ border-radius: var(--cool-frame-sidebar-floating-border-radius);
828
+ border: var(--cool-frame-sidebar-floating-border-width) solid
829
+ var(--cool-frame-sidebar-floating-border-color);
830
+ }
831
+ }
832
+ }
833
+
834
+ @include media-breakpoint-sidebar-right-down() {
835
+ position: fixed;
836
+ left: auto;
837
+ visibility: visible;
838
+ z-index: calc(var(--cool-zindex-fixed) + 1);
839
+ }
840
+
841
+ @include media-breakpoint-sidebar-right-up() {
842
+ background-color: var(--cool-frame-sidebar-bg);
843
+ }
844
+
845
+ .sidebar-header {
846
+ display: flex;
847
+ padding: var(--cool-frame-sidebar-header-padding-y) var(--cool-frame-sidebar-header-padding-x) 0
848
+ var(--cool-frame-sidebar-header-padding-x);
849
+ z-index: 11;
850
+ position: relative;
851
+ justify-content: space-between;
852
+ }
853
+
854
+ .sidebar-content {
855
+ position: relative;
856
+ height: 100%;
857
+ z-index: 10;
858
+ padding: var(--cool-frame-sidebar-content-padding-y) var(--cool-frame-sidebar-content-padding-x);
859
+ display: flex;
860
+ flex-direction: column;
861
+
862
+ > * {
863
+ flex-shrink: 0;
864
+ }
865
+
866
+ .ps__thumb-y {
867
+ background-color: rgba(255, 255, 255, 0.5);
868
+ }
869
+
870
+ .ps__rail-y:focus > .ps__thumb-y {
871
+ background-color: rgba(255, 255, 255, 0.8);
872
+ }
873
+ }
874
+
875
+ .sidebar-spacer {
876
+ flex-grow: 1;
877
+ flex-shrink: 1;
878
+ }
879
+ }
880
+
881
+ .sidebar-backdrop {
882
+ position: fixed;
883
+ top: 0;
884
+ left: 0;
885
+ width: 100%;
886
+ height: 100%;
887
+ background-color: rgba(0, 0, 0, 0.5);
888
+ z-index: var(--cool-zindex-fixed);
889
+ opacity: 0;
890
+ visibility: hidden;
891
+ transition: opacity 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1);
892
+
893
+ &.show {
894
+ opacity: 1;
895
+ visibility: visible;
896
+ }
897
+ }
898
+
899
+ @include media-breakpoint-up(lg) {
900
+ &.compressed {
901
+ .content {
902
+ .container-content {
903
+ padding-left: calc(var(--cool-spacer) * 2);
904
+ }
905
+ }
906
+
907
+ .sidebar-left {
908
+ .sidebar-content {
909
+ padding: calc(var(--cool-spacer) * 4) var(--cool-spacer) calc(var(--cool-spacer) * 6)
910
+ calc(var(--cool-spacer) * 3);
911
+ }
912
+ }
913
+ }
914
+ }
915
+ }
916
+ }
917
+ }
918
+
919
+ @if $cool-use-component-layer {
920
+ @layer components {
921
+ @include cool-frame;
922
+ }
923
+ } @else {
924
+ @include cool-frame;
925
+ }
926
+
927
+ /* Frame overrides for components/utilities ========================================================================== */
928
+ @layer app {
929
+ html:has(.site-main) {
930
+ .site-main {
931
+ .sidebar-left {
932
+ .sidebar-content {
933
+ .nav {
934
+ li {
935
+ [data-collapse-indicator] {
936
+ width: calc(var(--cool-spacer) * 4.2);
937
+
938
+ @include media-breakpoint-up(lg) {
939
+ display: none;
940
+ }
941
+ }
942
+ }
943
+ }
944
+ }
945
+ }
946
+ }
947
+ }
948
+ }