@canopy-iiif/app 0.9.2 → 0.9.4

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 (16) hide show
  1. package/lib/build/iiif.js +18 -8
  2. package/lib/build/mdx.js +39 -23
  3. package/package.json +3 -2
  4. package/ui/dist/index.mjs +704 -293
  5. package/ui/dist/index.mjs.map +4 -4
  6. package/ui/dist/server.mjs +640 -76
  7. package/ui/dist/server.mjs.map +4 -4
  8. package/ui/styles/components/header/_header.scss +153 -3
  9. package/ui/styles/components/header/_logo.scss +3 -2
  10. package/ui/styles/components/header/_navbar.scss +52 -10
  11. package/ui/styles/components/index.scss +1 -0
  12. package/ui/styles/components/modal/_modal.scss +122 -0
  13. package/ui/styles/components/modal/index.scss +1 -0
  14. package/ui/styles/components/search/_filters.scss +197 -225
  15. package/ui/styles/index.css +532 -313
  16. package/ui/theme.js +8 -8
package/ui/styles/index.css CHANGED
@@ -2,74 +2,74 @@
2
2
  @layer properties {
3
3
  :root {
4
4
  --max-w-content: 1080px;
5
- --color-brand-50: #fdfdfe;
5
+ --color-brand-50: #f7f9ff;
6
6
  --color-brand-100: #edf2fe;
7
- --color-brand-200: #d2deff;
8
- --color-brand-300: #abbdf9;
9
- --color-brand-400: #8da4ef;
10
- --color-brand-500: #3e63dd;
11
- --color-brand-600: #3358d4;
12
- --color-brand-700: #3a5bc7;
13
- --color-brand-800: #1f2d5c;
7
+ --color-brand-200: #e1e9ff;
8
+ --color-brand-300: #c1d0ff;
9
+ --color-brand-400: #abbdf9;
10
+ --color-brand-500: #8da4ef;
11
+ --color-brand-600: #3e63dd;
12
+ --color-brand-700: #3358d4;
13
+ --color-brand-800: #3a5bc7;
14
14
  --color-brand-900: #172245;
15
- --color-brand-default: #3358d4;
16
- --color-gray-50: #fcfcfd;
15
+ --color-brand-default: #3e63dd;
16
+ --color-gray-50: #f9f9fb;
17
17
  --color-gray-100: #f0f0f3;
18
- --color-gray-200: #e0e1e6;
19
- --color-gray-300: #cdced6;
20
- --color-gray-400: #b9bbc6;
21
- --color-gray-500: #8b8d98;
22
- --color-gray-600: #80838d;
23
- --color-gray-700: #60646c;
24
- --color-gray-800: #1c2024;
18
+ --color-gray-200: #e8e8ec;
19
+ --color-gray-300: #d9d9e0;
20
+ --color-gray-400: #cdced6;
21
+ --color-gray-500: #b9bbc6;
22
+ --color-gray-600: #8b8d98;
23
+ --color-gray-700: #80838d;
24
+ --color-gray-800: #60646c;
25
25
  --color-gray-900: #111316;
26
26
  --color-gray-default: #111316;
27
- --color-gray-muted: #80838d;
28
- --colors-accent: #3358d4 !important;
29
- --colors-accentAlt: #1f2d5c !important;
30
- --colors-accentMuted: #8da4ef !important;
27
+ --color-gray-muted: #8b8d98;
28
+ --colors-accent: #3e63dd !important;
29
+ --colors-accentAlt: #3a5bc7 !important;
30
+ --colors-accentMuted: #abbdf9 !important;
31
31
  --colors-primary: #111316 !important;
32
32
  --colors-primaryAlt: #111316 !important;
33
33
  --colors-primaryMuted: #111316 !important;
34
- --colors-secondary: #fcfcfd !important;
35
- --colors-secondaryAlt: #fcfcfd !important;
36
- --colors-secondaryMuted: #fcfcfd !important;
34
+ --colors-secondary: #f9f9fb !important;
35
+ --colors-secondaryAlt: #f9f9fb !important;
36
+ --colors-secondaryMuted: #f9f9fb !important;
37
37
  color-scheme: light;
38
38
  }
39
39
  :host {
40
40
  --max-w-content: 1080px;
41
- --color-brand-50: #fdfdfe;
41
+ --color-brand-50: #f7f9ff;
42
42
  --color-brand-100: #edf2fe;
43
- --color-brand-200: #d2deff;
44
- --color-brand-300: #abbdf9;
45
- --color-brand-400: #8da4ef;
46
- --color-brand-500: #3e63dd;
47
- --color-brand-600: #3358d4;
48
- --color-brand-700: #3a5bc7;
49
- --color-brand-800: #1f2d5c;
43
+ --color-brand-200: #e1e9ff;
44
+ --color-brand-300: #c1d0ff;
45
+ --color-brand-400: #abbdf9;
46
+ --color-brand-500: #8da4ef;
47
+ --color-brand-600: #3e63dd;
48
+ --color-brand-700: #3358d4;
49
+ --color-brand-800: #3a5bc7;
50
50
  --color-brand-900: #172245;
51
- --color-brand-default: #3358d4;
52
- --color-gray-50: #fcfcfd;
51
+ --color-brand-default: #3e63dd;
52
+ --color-gray-50: #f9f9fb;
53
53
  --color-gray-100: #f0f0f3;
54
- --color-gray-200: #e0e1e6;
55
- --color-gray-300: #cdced6;
56
- --color-gray-400: #b9bbc6;
57
- --color-gray-500: #8b8d98;
58
- --color-gray-600: #80838d;
59
- --color-gray-700: #60646c;
60
- --color-gray-800: #1c2024;
54
+ --color-gray-200: #e8e8ec;
55
+ --color-gray-300: #d9d9e0;
56
+ --color-gray-400: #cdced6;
57
+ --color-gray-500: #b9bbc6;
58
+ --color-gray-600: #8b8d98;
59
+ --color-gray-700: #80838d;
60
+ --color-gray-800: #60646c;
61
61
  --color-gray-900: #111316;
62
62
  --color-gray-default: #111316;
63
- --color-gray-muted: #80838d;
64
- --colors-accent: #3358d4 !important;
65
- --colors-accentAlt: #1f2d5c !important;
66
- --colors-accentMuted: #8da4ef !important;
63
+ --color-gray-muted: #8b8d98;
64
+ --colors-accent: #3e63dd !important;
65
+ --colors-accentAlt: #3a5bc7 !important;
66
+ --colors-accentMuted: #abbdf9 !important;
67
67
  --colors-primary: #111316 !important;
68
68
  --colors-primaryAlt: #111316 !important;
69
69
  --colors-primaryMuted: #111316 !important;
70
- --colors-secondary: #fcfcfd !important;
71
- --colors-secondaryAlt: #fcfcfd !important;
72
- --colors-secondaryMuted: #fcfcfd !important;
70
+ --colors-secondary: #f9f9fb !important;
71
+ --colors-secondaryAlt: #f9f9fb !important;
72
+ --colors-secondaryMuted: #f9f9fb !important;
73
73
  color-scheme: light;
74
74
  }
75
75
  }
@@ -255,13 +255,139 @@ h2 {
255
255
 
256
256
  @layer components {
257
257
  .canopy-header {
258
+ position: relative;
258
259
  display: flex;
259
- justify-content: space-between;
260
260
  align-items: center;
261
- gap: 1.618rem;
262
- padding: 0.618rem 1rem;
261
+ gap: 0.75rem;
262
+ padding: 0.75rem 1rem;
263
263
  background: var(--color-gray-50);
264
264
  }
265
+ .canopy-header__brand {
266
+ display: flex;
267
+ align-items: center;
268
+ gap: 0.75rem;
269
+ flex: 0 0 auto;
270
+ min-width: 0;
271
+ }
272
+ .canopy-header__menu {
273
+ display: inline-flex;
274
+ align-items: center;
275
+ justify-content: center;
276
+ width: 2.5rem;
277
+ height: 2.5rem;
278
+ border-radius: 0.75rem;
279
+ border: 1px solid var(--color-gray-200, #e2e8f0);
280
+ background: rgba(255, 255, 255, 0.8);
281
+ color: var(--color-gray-800, #1f2937);
282
+ transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
283
+ }
284
+ .canopy-header__menu:hover,
285
+ .canopy-header__menu:focus-visible {
286
+ background: rgba(255, 255, 255, 0.95);
287
+ color: var(--color-gray-900, #0f172a);
288
+ outline: none;
289
+ }
290
+ .canopy-header__menu-icon {
291
+ width: 1.5rem;
292
+ height: 1.5rem;
293
+ }
294
+ .canopy-header__desktop-search {
295
+ display: none;
296
+ flex: 1 1 20rem;
297
+ min-width: 0;
298
+ }
299
+ .canopy-header__desktop-search [data-canopy-search-form] {
300
+ width: 100%;
301
+ }
302
+ .canopy-header__desktop-nav {
303
+ display: none;
304
+ align-items: center;
305
+ gap: 1rem;
306
+ font-size: 1rem;
307
+ }
308
+ .canopy-header__actions {
309
+ display: flex;
310
+ align-items: center;
311
+ gap: 0.5rem;
312
+ margin-left: auto;
313
+ flex: 0 0 auto;
314
+ }
315
+ .canopy-header__icon-button {
316
+ display: inline-flex;
317
+ align-items: center;
318
+ justify-content: center;
319
+ width: 2.5rem;
320
+ height: 2.5rem;
321
+ border-radius: 0.75rem;
322
+ border: 1px solid var(--color-gray-200, #e2e8f0);
323
+ background: rgba(255, 255, 255, 0.8);
324
+ color: var(--color-gray-800, #1f2937);
325
+ transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
326
+ }
327
+ .canopy-header__icon-button:hover,
328
+ .canopy-header__icon-button:focus-visible {
329
+ background: rgb(255, 255, 255);
330
+ color: var(--color-gray-900, #0f172a);
331
+ outline: none;
332
+ }
333
+ .canopy-header__search-icon {
334
+ width: 1.25rem;
335
+ height: 1.25rem;
336
+ }
337
+ .canopy-header__search-trigger {
338
+ order: 0;
339
+ }
340
+ .canopy-header__menu {
341
+ order: 1;
342
+ }
343
+ .canopy-modal--search .canopy-modal__panel {
344
+ width: min(100%, 40rem);
345
+ }
346
+ .canopy-modal--search .canopy-modal__body--search {
347
+ display: flex;
348
+ flex-direction: column;
349
+ gap: 1.25rem;
350
+ }
351
+ .canopy-modal--search [data-canopy-search-form] {
352
+ width: 100%;
353
+ }
354
+ .canopy-modal--search .canopy-search-teaser {
355
+ position: static;
356
+ background: transparent;
357
+ border: none;
358
+ box-shadow: none;
359
+ max-height: clamp(20rem, 60vh, 32rem);
360
+ padding: 0;
361
+ display: block;
362
+ }
363
+ .canopy-modal--search .canopy-search-teaser > #cplist {
364
+ padding: 0.25rem 0;
365
+ }
366
+ @media (min-width: 48rem) {
367
+ .canopy-header {
368
+ gap: 1.25rem;
369
+ }
370
+ .canopy-header__menu {
371
+ display: none;
372
+ }
373
+ .canopy-header__desktop-search {
374
+ display: block;
375
+ }
376
+ .canopy-header__desktop-nav {
377
+ display: flex;
378
+ margin-left: 1.5rem;
379
+ }
380
+ .canopy-header__actions {
381
+ margin-left: auto;
382
+ gap: 0.75rem;
383
+ }
384
+ .canopy-header__search-trigger {
385
+ display: none;
386
+ }
387
+ .canopy-modal--search {
388
+ display: none !important;
389
+ }
390
+ }
265
391
  }
266
392
  a.canopy-logo {
267
393
  display: flex;
@@ -272,13 +398,14 @@ a.canopy-logo {
272
398
  font-family: var(--font-serif);
273
399
  color: var(--color-gray-default) !important;
274
400
  letter-spacing: -0.025em;
401
+ line-height: 1;
275
402
  }
276
403
  a.canopy-logo:hover {
277
404
  text-decoration: none;
278
405
  }
279
406
  a.canopy-logo svg {
280
- height: 1.618rem;
281
- margin-bottom: -1px;
407
+ height: 1.65rem;
408
+ display: block;
282
409
  }
283
410
  a.canopy-logo svg circle.canopy-logo-backlight {
284
411
  fill: var(--color-brand-900);
@@ -298,20 +425,162 @@ html.dark a.canopy-logo svg path.canopy-logo-overlay {
298
425
  color: var(--color-brand-500) !important;
299
426
  }
300
427
 
301
- .canopy-navbar {
302
- display: flex;
303
- align-items: center;
304
- gap: 1rem;
305
- font-size: 1rem;
306
- }
307
- .canopy-navbar a {
308
- color: var(--color-primary);
309
- text-decoration: none;
428
+ @layer components {
429
+ .canopy-nav-links {
430
+ display: flex;
431
+ align-items: center;
432
+ gap: 1rem;
433
+ font-size: 1rem;
434
+ }
435
+ .canopy-nav-links a {
436
+ color: var(--color-gray-900, #0f172a);
437
+ font-weight: 500;
438
+ text-decoration: none;
439
+ padding: 0.25rem 0;
440
+ transition: color 150ms ease;
441
+ }
442
+ .canopy-nav-links a:hover,
443
+ .canopy-nav-links a:focus-visible {
444
+ color: var(--color-brand-default, #3e63dd);
445
+ outline: none;
446
+ }
447
+ .canopy-modal--nav .canopy-modal__panel {
448
+ width: min(100%, 20rem);
449
+ }
450
+ .canopy-modal--nav .canopy-modal__body {
451
+ display: flex;
452
+ flex-direction: column;
453
+ gap: 1.5rem;
454
+ }
455
+ .canopy-modal--nav .canopy-nav-links {
456
+ flex-direction: column;
457
+ align-items: stretch;
458
+ gap: 0.75rem;
459
+ font-size: 1.125rem;
460
+ }
461
+ .canopy-modal--nav .canopy-nav-links a {
462
+ display: block;
463
+ padding: 0.75rem 0;
464
+ font-weight: 600;
465
+ }
466
+ @media (max-width: 48rem) {
467
+ .canopy-header__desktop-nav {
468
+ display: none;
469
+ }
470
+ }
471
+ @media (min-width: 48rem) {
472
+ .canopy-modal--nav {
473
+ display: none !important;
474
+ }
475
+ }
310
476
  }
311
- .canopy-navbar a:hover {
312
- text-decoration: underline;
477
+ @layer components {
478
+ .canopy-modal {
479
+ position: fixed;
480
+ inset: 0;
481
+ z-index: 50;
482
+ display: none;
483
+ align-items: center;
484
+ justify-content: center;
485
+ background: rgba(15, 23, 42, 0.6);
486
+ backdrop-filter: blur(8px);
487
+ box-sizing: border-box;
488
+ padding: clamp(1.25rem, 4vw, 2.5rem);
489
+ overflow: hidden;
490
+ }
491
+ .canopy-modal[data-open=true] {
492
+ display: flex;
493
+ }
494
+ .canopy-modal__panel {
495
+ position: relative;
496
+ display: flex;
497
+ flex-direction: column;
498
+ width: min(100%, 38rem);
499
+ max-width: 38rem;
500
+ max-height: min(90vh, 640px);
501
+ background: var(--color-gray-50, #f8fafc);
502
+ border-radius: 1rem;
503
+ box-shadow: 0 28px 60px -24px rgba(15, 23, 42, 0.65);
504
+ overflow: hidden;
505
+ margin: 0;
506
+ }
507
+ .canopy-modal__body {
508
+ flex: 1 1 auto;
509
+ overflow-y: auto;
510
+ }
511
+ .canopy-modal__body--padded {
512
+ padding: 1.5rem;
513
+ }
514
+ .canopy-modal__brand {
515
+ display: flex;
516
+ align-items: center;
517
+ gap: 0.75rem;
518
+ margin-bottom: 1.25rem;
519
+ }
520
+ .canopy-modal__brand .canopy-logo {
521
+ font-size: 1.35rem;
522
+ line-height: 1;
523
+ }
524
+ .canopy-modal__title {
525
+ margin: 0 0 1rem;
526
+ font-size: 1.25rem;
527
+ font-weight: 600;
528
+ color: var(--color-gray-900, #0f172a);
529
+ }
530
+ .canopy-modal__close {
531
+ position: absolute;
532
+ top: 0.75rem;
533
+ right: 0.75rem;
534
+ display: inline-flex;
535
+ align-items: center;
536
+ justify-content: center;
537
+ width: 2.5rem;
538
+ height: 2.5rem;
539
+ border-radius: 9999px;
540
+ border: 1px solid var(--color-gray-200, #e2e8f0);
541
+ background: rgba(255, 255, 255, 0.92);
542
+ color: var(--color-gray-700, #334155);
543
+ cursor: pointer;
544
+ transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
545
+ }
546
+ .canopy-modal__close:hover,
547
+ .canopy-modal__close:focus-visible {
548
+ background: rgb(248, 250, 252);
549
+ color: var(--color-gray-900, #0f172a);
550
+ outline: none;
551
+ }
552
+ .canopy-modal__close-icon {
553
+ width: 1.25rem;
554
+ height: 1.25rem;
555
+ }
556
+ @media (max-width: 48rem) {
557
+ .canopy-modal {
558
+ align-items: stretch;
559
+ justify-content: stretch;
560
+ backdrop-filter: blur(2px);
561
+ padding: 0;
562
+ }
563
+ .canopy-modal__panel {
564
+ width: 100%;
565
+ height: 100%;
566
+ max-height: none;
567
+ border-radius: 0;
568
+ margin: 0;
569
+ box-shadow: none;
570
+ }
571
+ .canopy-modal__close {
572
+ top: 1rem;
573
+ right: 1rem;
574
+ border-radius: 0.75rem;
575
+ }
576
+ .canopy-modal__body--padded {
577
+ padding: 1rem;
578
+ }
579
+ .canopy-modal__brand {
580
+ margin-bottom: 1rem;
581
+ }
582
+ }
313
583
  }
314
-
315
584
  .canopy-interstitial {
316
585
  position: relative;
317
586
  width: 100%;
@@ -939,255 +1208,205 @@ html.dark a.canopy-logo svg path.canopy-logo-overlay {
939
1208
  display: block;
940
1209
  }
941
1210
 
942
- .canopy-search-filters-overlay {
943
- position: fixed;
944
- inset: 0;
945
- z-index: 1050;
946
- display: flex;
947
- align-items: flex-start;
948
- justify-content: center;
949
- background: rgba(15, 23, 42, 0.5);
950
- padding: 2rem 1rem;
951
- overflow-y: auto;
952
- }
953
-
954
- .canopy-search-filters {
955
- width: 100%;
956
- max-width: 48rem;
957
- overflow: hidden;
958
- border-radius: 0.75rem;
959
- background: var(--color-gray-100, #ffffff);
960
- box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.4), 0 10px 20px rgba(15, 23, 42, 0.12);
961
- display: flex;
962
- flex-direction: column;
963
- gap: 0;
964
- }
965
-
966
- .canopy-search-filters__header {
967
- display: flex;
968
- align-items: flex-start;
969
- justify-content: space-between;
970
- gap: 1rem;
971
- border-bottom: 1px solid var(--color-gray-200, #e0e1e6);
972
- padding: 1rem 1.5rem;
973
- }
974
-
975
- .canopy-search-filters__title {
976
- margin: 0;
977
- font-size: var(--font-size-lg, 1.125rem);
978
- line-height: var(--line-height-lg, 1.75rem);
979
- font-weight: 600;
980
- color: var(--color-gray-900, #121418);
981
- }
982
-
983
- .canopy-search-filters__subtitle {
984
- margin: 0.25rem 0 0;
985
- font-size: var(--font-size-sm, 0.875rem);
986
- line-height: var(--line-height-sm, 1.25rem);
987
- color: var(--color-gray-500, #8b8d98);
988
- }
989
-
990
- .canopy-search-filters__close {
991
- border-radius: 0.375rem;
992
- border: 1px solid transparent;
993
- background: transparent;
994
- padding: 0.25rem 0.5rem;
995
- font-size: var(--font-size-sm, 0.875rem);
996
- color: var(--color-gray-600, #80838d);
997
- transition: background-color var(--duration-fast, 150ms) var(--easing-standard, ease), color var(--duration-fast, 150ms) var(--easing-standard, ease);
998
- }
999
- .canopy-search-filters__close:hover {
1000
- background: var(--color-gray-100, #f0f0f3);
1001
- color: var(--color-gray-900, #121418);
1002
- }
1003
-
1004
- .canopy-search-filters__body {
1005
- padding: 1.5rem;
1006
- display: grid;
1007
- gap: 1rem;
1008
- }
1009
-
1010
- .canopy-search-filters__facets {
1011
- display: flex;
1012
- flex-direction: column;
1013
- gap: 0.75rem;
1014
- }
1015
-
1016
- .canopy-search-filters__empty {
1017
- font-size: var(--font-size-sm, 0.875rem);
1018
- line-height: var(--line-height-sm, 1.25rem);
1019
- color: var(--color-gray-500, #8b8d98);
1020
- }
1021
-
1022
- .canopy-search-filters__facet {
1023
- border: 1px solid var(--color-gray-200, #e0e1e6);
1024
- border-radius: 0.75rem;
1025
- background: var(--color-gray-50, #fcfcfd);
1026
- overflow: hidden;
1027
- }
1028
- .canopy-search-filters__facet[open] {
1029
- background: var(--color-gray-100, #ffffff);
1030
- }
1031
-
1032
- .canopy-search-filters__facet-summary {
1033
- display: flex;
1034
- align-items: center;
1035
- justify-content: space-between;
1036
- gap: 0.75rem;
1037
- padding: 0.75rem 1rem;
1038
- font-size: var(--font-size-sm, 0.875rem);
1039
- font-weight: 600;
1040
- color: var(--color-gray-900, #121418);
1041
- cursor: pointer;
1042
- list-style: none;
1043
- }
1044
-
1045
- .canopy-search-filters__facet-summary::-webkit-details-marker {
1046
- display: none;
1047
- }
1048
-
1049
- .canopy-search-filters__facet-count {
1050
- font-size: var(--font-size-xs, 0.75rem);
1051
- font-weight: 400;
1052
- color: var(--color-gray-500, #8b8d98);
1053
- }
1054
-
1055
- .canopy-search-filters__facet-content {
1056
- border-top: 1px solid var(--color-gray-200, #e0e1e6);
1057
- background: var(--color-gray-100, #ffffff);
1058
- padding: 1rem;
1059
- max-height: 15rem;
1060
- overflow-y: auto;
1061
- }
1062
-
1063
- .canopy-search-filters__quick {
1064
- display: flex;
1065
- align-items: center;
1066
- gap: 0.5rem;
1067
- margin-bottom: 0.75rem;
1068
- }
1069
-
1070
- .canopy-search-filters__quick-input {
1071
- flex: 1;
1072
- min-width: 0;
1073
- border-radius: 0.5rem;
1074
- border: 1px solid var(--color-gray-300, #cdced6);
1075
- padding: 0.375rem 0.75rem;
1076
- font-size: var(--font-size-sm, 0.875rem);
1077
- color: var(--color-gray-700, #60646c);
1078
- transition: border-color var(--duration-fast, 150ms) var(--easing-standard, ease), box-shadow var(--duration-fast, 150ms) var(--easing-standard, ease);
1079
- }
1080
- .canopy-search-filters__quick-input:focus {
1081
- outline: none;
1082
- border-color: var(--color-brand-500, #3e63dd);
1083
- box-shadow: 0 0 0 1px var(--color-brand-500, #3e63dd);
1084
- }
1085
-
1086
- .canopy-search-filters__quick-clear {
1087
- border-radius: 0.375rem;
1088
- border: 1px solid var(--color-gray-200, #e0e1e6);
1089
- padding: 0.25rem 0.5rem;
1090
- font-size: var(--font-size-xs, 0.75rem);
1091
- color: var(--color-gray-600, #80838d);
1092
- background: var(--color-gray-100, #ffffff);
1093
- transition: background-color var(--duration-fast, 150ms) var(--easing-standard, ease), color var(--duration-fast, 150ms) var(--easing-standard, ease);
1094
- }
1095
- .canopy-search-filters__quick-clear:hover {
1096
- background: var(--color-gray-100, #f0f0f3);
1097
- color: var(--color-gray-900, #121418);
1098
- }
1099
-
1100
- .canopy-search-filters__facet-list {
1101
- list-style: none;
1102
- margin: 0;
1103
- padding: 0;
1104
- display: flex;
1105
- flex-direction: column;
1106
- gap: 0.5rem;
1107
- font-size: var(--font-size-sm, 0.875rem);
1108
- color: var(--color-gray-700, #60646c);
1109
- }
1110
-
1111
- .canopy-search-filters__facet-item {
1112
- display: flex;
1113
- align-items: flex-start;
1114
- gap: 0.5rem;
1115
- }
1116
-
1117
- .canopy-search-filters__facet-checkbox {
1118
- margin-top: 0.25rem;
1119
- width: 1rem;
1120
- height: 1rem;
1121
- border-radius: 0.375rem;
1122
- border: 1px solid var(--color-gray-300, #cdced6);
1123
- color: var(--color-brand-500, #3e63dd);
1124
- accent-color: var(--color-brand-500, #3e63dd);
1125
- }
1126
-
1127
- .canopy-search-filters__facet-label {
1128
- display: flex;
1129
- flex: 1;
1130
- flex-direction: column;
1131
- gap: 0.25rem;
1132
- }
1133
-
1134
- .canopy-search-filters__facet-empty,
1135
- .canopy-search-filters__facet-notice {
1136
- font-size: var(--font-size-xs, 0.75rem);
1137
- color: rgba(148, 163, 184, 0.9);
1138
- }
1139
-
1140
- .canopy-search-filters__footer {
1141
- display: flex;
1142
- align-items: center;
1143
- justify-content: space-between;
1144
- gap: 1rem;
1145
- border-top: 1px solid var(--color-gray-200, #e0e1e6);
1146
- padding: 1rem 1.5rem;
1147
- font-size: var(--font-size-sm, 0.875rem);
1148
- color: var(--color-gray-500, #8b8d98);
1149
- }
1150
-
1151
- .canopy-search-filters__footer-actions {
1152
- display: flex;
1153
- align-items: center;
1154
- gap: 0.5rem;
1155
- }
1156
-
1157
- .canopy-search-filters__button {
1158
- border-radius: 0.5rem;
1159
- padding: 0.375rem 0.75rem;
1160
- font-size: var(--font-size-sm, 0.875rem);
1161
- font-weight: 500;
1162
- line-height: var(--line-height-sm, 1.25rem);
1163
- transition: background-color var(--duration-fast, 150ms) var(--easing-standard, ease), color var(--duration-fast, 150ms) var(--easing-standard, ease), box-shadow var(--duration-fast, 150ms) var(--easing-standard, ease);
1164
- }
1165
-
1166
- .canopy-search-filters__button--secondary {
1167
- border: 1px solid var(--color-gray-200, #e0e1e6);
1168
- background: var(--color-gray-100, #ffffff);
1169
- color: var(--color-gray-600, #80838d);
1170
- }
1171
- .canopy-search-filters__button--secondary:hover:not([disabled]) {
1172
- background: var(--color-gray-100, #f0f0f3);
1173
- color: var(--color-gray-900, #121418);
1174
- }
1175
- .canopy-search-filters__button--secondary:disabled {
1176
- cursor: not-allowed;
1177
- color: rgba(148, 163, 184, 0.8);
1178
- }
1179
-
1180
- .canopy-search-filters__button--primary {
1181
- border: 1px solid transparent;
1182
- background: var(--color-brand-500, #3e63dd);
1183
- color: #fff;
1184
- box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
1185
- }
1186
- .canopy-search-filters__button--primary:hover {
1187
- background: var(--color-brand-700, #2c4bbd);
1188
- box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
1211
+ @layer components {
1212
+ .canopy-modal--filters .canopy-modal__panel {
1213
+ width: min(100%, 48rem);
1214
+ max-height: min(90vh, 720px);
1215
+ background: var(--color-gray-100, #ffffff);
1216
+ }
1217
+ .canopy-modal--filters .canopy-modal__body--filters {
1218
+ display: flex;
1219
+ flex-direction: column;
1220
+ gap: 1.5rem;
1221
+ padding: 1.5rem;
1222
+ }
1223
+ .canopy-search-filters__subtitle {
1224
+ margin: 0 0 0.75rem;
1225
+ font-size: var(--font-size-sm, 0.875rem);
1226
+ line-height: var(--line-height-sm, 1.25rem);
1227
+ color: var(--color-gray-500, #8b8d98);
1228
+ }
1229
+ .canopy-search-filters__body {
1230
+ display: grid;
1231
+ gap: 1rem;
1232
+ }
1233
+ .canopy-search-filters__facets {
1234
+ display: flex;
1235
+ flex-direction: column;
1236
+ gap: 0.75rem;
1237
+ }
1238
+ .canopy-search-filters__empty {
1239
+ font-size: var(--font-size-sm, 0.875rem);
1240
+ line-height: var(--line-height-sm, 1.25rem);
1241
+ color: var(--color-gray-500, #8b8d98);
1242
+ }
1243
+ .canopy-search-filters__facet {
1244
+ border: 1px solid var(--color-gray-200, #e0e1e6);
1245
+ border-radius: 0.75rem;
1246
+ background: var(--color-gray-50, #fcfcfd);
1247
+ overflow: hidden;
1248
+ }
1249
+ .canopy-search-filters__facet[open] {
1250
+ background: var(--color-gray-100, #ffffff);
1251
+ }
1252
+ .canopy-search-filters__facet-summary {
1253
+ display: flex;
1254
+ align-items: center;
1255
+ justify-content: space-between;
1256
+ gap: 0.75rem;
1257
+ padding: 0.75rem 1rem;
1258
+ font-size: var(--font-size-sm, 0.875rem);
1259
+ font-weight: 600;
1260
+ color: var(--color-gray-900, #121418);
1261
+ cursor: pointer;
1262
+ list-style: none;
1263
+ }
1264
+ .canopy-search-filters__facet-summary::-webkit-details-marker {
1265
+ display: none;
1266
+ }
1267
+ .canopy-search-filters__facet-count {
1268
+ font-size: var(--font-size-xs, 0.75rem);
1269
+ font-weight: 400;
1270
+ color: var(--color-gray-500, #8b8d98);
1271
+ }
1272
+ .canopy-search-filters__facet-content {
1273
+ border-top: 1px solid var(--color-gray-200, #e0e1e6);
1274
+ background: var(--color-gray-100, #ffffff);
1275
+ padding: 1rem;
1276
+ max-height: 15rem;
1277
+ overflow-y: auto;
1278
+ }
1279
+ .canopy-search-filters__quick {
1280
+ display: flex;
1281
+ align-items: center;
1282
+ gap: 0.5rem;
1283
+ margin-bottom: 0.75rem;
1284
+ }
1285
+ .canopy-search-filters__quick-input {
1286
+ flex: 1;
1287
+ min-width: 0;
1288
+ border-radius: 0.5rem;
1289
+ border: 1px solid var(--color-gray-300, #cdced6);
1290
+ padding: 0.375rem 0.75rem;
1291
+ font-size: var(--font-size-sm, 0.875rem);
1292
+ color: var(--color-gray-700, #60646c);
1293
+ transition: border-color var(--duration-fast, 150ms) var(--easing-standard, ease), box-shadow var(--duration-fast, 150ms) var(--easing-standard, ease);
1294
+ }
1295
+ .canopy-search-filters__quick-input:focus {
1296
+ outline: none;
1297
+ border-color: var(--color-brand-500, #3e63dd);
1298
+ box-shadow: 0 0 0 1px var(--color-brand-500, #3e63dd);
1299
+ }
1300
+ .canopy-search-filters__quick-clear {
1301
+ border-radius: 0.375rem;
1302
+ border: 1px solid var(--color-gray-200, #e0e1e6);
1303
+ padding: 0.25rem 0.5rem;
1304
+ font-size: var(--font-size-xs, 0.75rem);
1305
+ color: var(--color-gray-600, #80838d);
1306
+ background: var(--color-gray-100, #ffffff);
1307
+ transition: background-color var(--duration-fast, 150ms) var(--easing-standard, ease), color var(--duration-fast, 150ms) var(--easing-standard, ease);
1308
+ }
1309
+ .canopy-search-filters__quick-clear:hover {
1310
+ background: var(--color-gray-100, #f0f0f3);
1311
+ color: var(--color-gray-900, #121418);
1312
+ }
1313
+ .canopy-search-filters__facet-list {
1314
+ list-style: none;
1315
+ margin: 0;
1316
+ padding: 0;
1317
+ display: flex;
1318
+ flex-direction: column;
1319
+ gap: 0.5rem;
1320
+ font-size: var(--font-size-sm, 0.875rem);
1321
+ color: var(--color-gray-700, #60646c);
1322
+ }
1323
+ .canopy-search-filters__facet-item {
1324
+ display: flex;
1325
+ align-items: flex-start;
1326
+ gap: 0.5rem;
1327
+ }
1328
+ .canopy-search-filters__facet-checkbox {
1329
+ margin-top: 0.25rem;
1330
+ width: 1rem;
1331
+ height: 1rem;
1332
+ border-radius: 0.375rem;
1333
+ border: 1px solid var(--color-gray-300, #cdced6);
1334
+ color: var(--color-brand-500, #3e63dd);
1335
+ accent-color: var(--color-brand-500, #3e63dd);
1336
+ }
1337
+ .canopy-search-filters__facet-label {
1338
+ display: flex;
1339
+ flex: 1;
1340
+ flex-direction: column;
1341
+ gap: 0.25rem;
1342
+ }
1343
+ .canopy-search-filters__facet-empty {
1344
+ font-size: var(--font-size-sm, 0.875rem);
1345
+ color: var(--color-gray-500, #8b8d98);
1346
+ }
1347
+ .canopy-search-filters__footer {
1348
+ display: flex;
1349
+ flex-wrap: wrap;
1350
+ align-items: center;
1351
+ justify-content: space-between;
1352
+ gap: 0.75rem;
1353
+ border-top: 1px solid var(--color-gray-200, #e0e1e6);
1354
+ padding-top: 1.25rem;
1355
+ }
1356
+ .canopy-search-filters__footer-actions {
1357
+ display: flex;
1358
+ align-items: center;
1359
+ gap: 0.75rem;
1360
+ }
1361
+ .canopy-search-filters__button {
1362
+ border-radius: 9999px;
1363
+ padding: 0.5rem 1.25rem;
1364
+ font-size: var(--font-size-sm, 0.875rem);
1365
+ font-weight: 600;
1366
+ cursor: pointer;
1367
+ transition: background-color var(--duration-fast, 150ms) var(--easing-standard, ease), color var(--duration-fast, 150ms) var(--easing-standard, ease);
1368
+ }
1369
+ .canopy-search-filters__button--secondary {
1370
+ border: 1px solid var(--color-gray-300, #cdced6);
1371
+ background: transparent;
1372
+ color: var(--color-gray-700, #60646c);
1373
+ }
1374
+ .canopy-search-filters__button--secondary:hover,
1375
+ .canopy-search-filters__button--secondary:focus-visible {
1376
+ background: var(--color-gray-100, #f0f0f3);
1377
+ color: var(--color-gray-900, #121418);
1378
+ outline: none;
1379
+ }
1380
+ .canopy-search-filters__button--primary {
1381
+ border: none;
1382
+ background: var(--color-brand-600, #3e63dd);
1383
+ color: var(--color-gray-50, #f9fafb);
1384
+ }
1385
+ .canopy-search-filters__button--primary:hover,
1386
+ .canopy-search-filters__button--primary:focus-visible {
1387
+ background: var(--color-brand-700, #3358d4);
1388
+ outline: none;
1389
+ }
1390
+ @media (max-width: 48rem) {
1391
+ .canopy-modal--filters .canopy-modal__body--filters {
1392
+ padding: 1.5rem 1.25rem 2rem 1.25rem;
1393
+ gap: 1.25rem;
1394
+ }
1395
+ .canopy-search-filters__subtitle {
1396
+ margin-bottom: 0.5rem;
1397
+ }
1398
+ .canopy-search-filters__facet-content {
1399
+ max-height: 40vh;
1400
+ }
1401
+ .canopy-search-filters__footer {
1402
+ flex-direction: column;
1403
+ align-items: stretch;
1404
+ }
1405
+ .canopy-search-filters__footer-actions {
1406
+ justify-content: flex-end;
1407
+ }
1408
+ }
1189
1409
  }
1190
-
1191
1410
  .canopy-sub-navigation {
1192
1411
  color: inherit;
1193
1412
  }