@canopy-iiif/app 0.9.1 → 0.9.3

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 (18) hide show
  1. package/lib/build/mdx.js +57 -23
  2. package/lib/build/search-index.js +10 -5
  3. package/lib/build/search.js +9 -1
  4. package/lib/search/search.js +1 -2
  5. package/package.json +4 -2
  6. package/ui/dist/index.mjs +731 -307
  7. package/ui/dist/index.mjs.map +4 -4
  8. package/ui/dist/server.mjs +640 -76
  9. package/ui/dist/server.mjs.map +4 -4
  10. package/ui/styles/components/header/_header.scss +153 -3
  11. package/ui/styles/components/header/_logo.scss +3 -2
  12. package/ui/styles/components/header/_navbar.scss +52 -10
  13. package/ui/styles/components/index.scss +1 -0
  14. package/ui/styles/components/modal/_modal.scss +122 -0
  15. package/ui/styles/components/modal/index.scss +1 -0
  16. package/ui/styles/components/search/_filters.scss +197 -225
  17. package/ui/styles/index.css +532 -313
  18. package/ui/theme.js +8 -8
package/ui/styles/components/header/_logo.scss CHANGED
@@ -7,14 +7,15 @@ a.canopy-logo {
7
7
  font-family: var(--font-serif);
8
8
  color: var(--color-gray-default) !important;
9
9
  letter-spacing: -0.025em;
10
+ line-height: 1;
10
11
 
11
12
  &:hover {
12
13
  text-decoration: none;
13
14
  }
14
15
 
15
16
  svg {
16
- height: 1.618rem;
17
- margin-bottom: -1px;
17
+ height: 1.65rem;
18
+ display: block;
18
19
 
19
20
  circle.canopy-logo-backlight {
20
21
  fill: var(--color-brand-900);
package/ui/styles/components/header/_navbar.scss CHANGED
@@ -1,15 +1,57 @@
1
- .canopy-navbar {
2
- display: flex;
3
- align-items: center;
4
- gap: 1rem;
5
- font-size: 1rem;
6
-
7
- a {
8
- color: var(--color-primary);
1
+ @layer components {
2
+ .canopy-nav-links {
3
+ display: flex;
4
+ align-items: center;
5
+ gap: 1rem;
6
+ font-size: 1rem;
7
+ }
8
+
9
+ .canopy-nav-links a {
10
+ color: var(--color-gray-900, #0f172a);
11
+ font-weight: 500;
9
12
  text-decoration: none;
13
+ padding: 0.25rem 0;
14
+ transition: color 150ms ease;
15
+ }
16
+
17
+ .canopy-nav-links a:hover,
18
+ .canopy-nav-links a:focus-visible {
19
+ color: var(--color-brand-default, #3e63dd);
20
+ outline: none;
21
+ }
22
+
23
+ .canopy-modal--nav .canopy-modal__panel {
24
+ width: min(100%, 20rem);
25
+ }
26
+
27
+ .canopy-modal--nav .canopy-modal__body {
28
+ display: flex;
29
+ flex-direction: column;
30
+ gap: 1.5rem;
31
+ }
32
+
33
+ .canopy-modal--nav .canopy-nav-links {
34
+ flex-direction: column;
35
+ align-items: stretch;
36
+ gap: 0.75rem;
37
+ font-size: 1.125rem;
38
+ }
39
+
40
+ .canopy-modal--nav .canopy-nav-links a {
41
+ display: block;
42
+ padding: 0.75rem 0;
43
+ font-weight: 600;
44
+ }
45
+
46
+ @media (max-width: 48rem) {
47
+ .canopy-header__desktop-nav {
48
+ display: none;
49
+ }
50
+ }
10
51
 
11
- &:hover {
12
- text-decoration: underline;
52
+ @media (min-width: 48rem) {
53
+ .canopy-modal--nav {
54
+ display: none !important;
13
55
  }
14
56
  }
15
57
  }
package/ui/styles/components/index.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  @use "./buttons";
2
2
  @use "./card";
3
3
  @use "./header";
4
+ @use "./modal";
4
5
  @use "./interstitial-hero";
5
6
  @use "./search";
6
7
  @use "./sub-navigation";
package/ui/styles/components/modal/_modal.scss ADDED
@@ -0,0 +1,122 @@
1
+ @layer components {
2
+ .canopy-modal {
3
+ position: fixed;
4
+ inset: 0;
5
+ z-index: 50;
6
+ display: none;
7
+ align-items: center;
8
+ justify-content: center;
9
+ background: rgba(15, 23, 42, 0.6);
10
+ backdrop-filter: blur(8px);
11
+ box-sizing: border-box;
12
+ padding: clamp(1.25rem, 4vw, 2.5rem);
13
+ overflow: hidden;
14
+ }
15
+
16
+ .canopy-modal[data-open='true'] {
17
+ display: flex;
18
+ }
19
+
20
+ .canopy-modal__panel {
21
+ position: relative;
22
+ display: flex;
23
+ flex-direction: column;
24
+ width: min(100%, 38rem);
25
+ max-width: 38rem;
26
+ max-height: min(90vh, 640px);
27
+ background: var(--color-gray-50, #f8fafc);
28
+ border-radius: 1rem;
29
+ box-shadow: 0 28px 60px -24px rgba(15, 23, 42, 0.65);
30
+ overflow: hidden;
31
+ margin: 0;
32
+ }
33
+
34
+ .canopy-modal__body {
35
+ flex: 1 1 auto;
36
+ overflow-y: auto;
37
+ }
38
+
39
+ .canopy-modal__body--padded {
40
+ padding: 1.5rem;
41
+ }
42
+
43
+ .canopy-modal__brand {
44
+ display: flex;
45
+ align-items: center;
46
+ gap: 0.75rem;
47
+ margin-bottom: 1.25rem;
48
+ }
49
+
50
+ .canopy-modal__brand .canopy-logo {
51
+ font-size: 1.35rem;
52
+ line-height: 1;
53
+ }
54
+
55
+ .canopy-modal__title {
56
+ margin: 0 0 1rem;
57
+ font-size: 1.25rem;
58
+ font-weight: 600;
59
+ color: var(--color-gray-900, #0f172a);
60
+ }
61
+
62
+ .canopy-modal__close {
63
+ position: absolute;
64
+ top: 0.75rem;
65
+ right: 0.75rem;
66
+ display: inline-flex;
67
+ align-items: center;
68
+ justify-content: center;
69
+ width: 2.5rem;
70
+ height: 2.5rem;
71
+ border-radius: 9999px;
72
+ border: 1px solid var(--color-gray-200, #e2e8f0);
73
+ background: rgba(255, 255, 255, 0.92);
74
+ color: var(--color-gray-700, #334155);
75
+ cursor: pointer;
76
+ transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
77
+ }
78
+
79
+ .canopy-modal__close:hover,
80
+ .canopy-modal__close:focus-visible {
81
+ background: rgba(248, 250, 252, 1);
82
+ color: var(--color-gray-900, #0f172a);
83
+ outline: none;
84
+ }
85
+
86
+ .canopy-modal__close-icon {
87
+ width: 1.25rem;
88
+ height: 1.25rem;
89
+ }
90
+
91
+ @media (max-width: 48rem) {
92
+ .canopy-modal {
93
+ align-items: stretch;
94
+ justify-content: stretch;
95
+ backdrop-filter: blur(2px);
96
+ padding: 0;
97
+ }
98
+
99
+ .canopy-modal__panel {
100
+ width: 100%;
101
+ height: 100%;
102
+ max-height: none;
103
+ border-radius: 0;
104
+ margin: 0;
105
+ box-shadow: none;
106
+ }
107
+
108
+ .canopy-modal__close {
109
+ top: 1rem;
110
+ right: 1rem;
111
+ border-radius: 0.75rem;
112
+ }
113
+
114
+ .canopy-modal__body--padded {
115
+ padding: 1rem;
116
+ }
117
+
118
+ .canopy-modal__brand {
119
+ margin-bottom: 1rem;
120
+ }
121
+ }
122
+ }
package/ui/styles/components/modal/index.scss ADDED
@@ -0,0 +1 @@
1
+ @use "./modal";
package/ui/styles/components/search/_filters.scss CHANGED
@@ -1,263 +1,235 @@
1
- .canopy-search-filters-overlay {
2
- position: fixed;
3
- inset: 0;
4
- z-index: 1050;
5
- display: flex;
6
- align-items: flex-start;
7
- justify-content: center;
8
- background: rgba(15, 23, 42, 0.5);
9
- padding: 2rem 1rem;
10
- overflow-y: auto;
11
- }
12
-
13
- .canopy-search-filters {
14
- width: 100%;
15
- max-width: 48rem;
16
- overflow: hidden;
17
- border-radius: 0.75rem;
18
- background: var(--color-gray-100, #ffffff);
19
- box-shadow:
20
- 0 25px 50px -12px rgba(15, 23, 42, 0.4),
21
- 0 10px 20px rgba(15, 23, 42, 0.12);
22
- display: flex;
23
- flex-direction: column;
24
- gap: 0;
25
- }
1
+ @layer components {
2
+ .canopy-modal--filters .canopy-modal__panel {
3
+ width: min(100%, 48rem);
4
+ max-height: min(90vh, 720px);
5
+ background: var(--color-gray-100, #ffffff);
6
+ }
26
7
 
27
- .canopy-search-filters__header {
28
- display: flex;
29
- align-items: flex-start;
30
- justify-content: space-between;
31
- gap: 1rem;
32
- border-bottom: 1px solid var(--color-gray-200, #e0e1e6);
33
- padding: 1rem 1.5rem;
34
- }
8
+ .canopy-modal--filters .canopy-modal__body--filters {
9
+ display: flex;
10
+ flex-direction: column;
11
+ gap: 1.5rem;
12
+ padding: 1.5rem;
13
+ }
35
14
 
36
- .canopy-search-filters__title {
37
- margin: 0;
38
- font-size: var(--font-size-lg, 1.125rem);
39
- line-height: var(--line-height-lg, 1.75rem);
40
- font-weight: 600;
41
- color: var(--color-gray-900, #121418);
42
- }
15
+ .canopy-search-filters__subtitle {
16
+ margin: 0 0 0.75rem;
17
+ font-size: var(--font-size-sm, 0.875rem);
18
+ line-height: var(--line-height-sm, 1.25rem);
19
+ color: var(--color-gray-500, #8b8d98);
20
+ }
43
21
 
44
- .canopy-search-filters__subtitle {
45
- margin: 0.25rem 0 0;
46
- font-size: var(--font-size-sm, 0.875rem);
47
- line-height: var(--line-height-sm, 1.25rem);
48
- color: var(--color-gray-500, #8b8d98);
49
- }
22
+ .canopy-search-filters__body {
23
+ display: grid;
24
+ gap: 1rem;
25
+ }
50
26
 
51
- .canopy-search-filters__close {
52
- border-radius: 0.375rem;
53
- border: 1px solid transparent;
54
- background: transparent;
55
- padding: 0.25rem 0.5rem;
56
- font-size: var(--font-size-sm, 0.875rem);
57
- color: var(--color-gray-600, #80838d);
58
- transition: background-color var(--duration-fast, 150ms) var(--easing-standard, ease),
59
- color var(--duration-fast, 150ms) var(--easing-standard, ease);
60
-
61
- &:hover {
62
- background: var(--color-gray-100, #f0f0f3);
63
- color: var(--color-gray-900, #121418);
27
+ .canopy-search-filters__facets {
28
+ display: flex;
29
+ flex-direction: column;
30
+ gap: 0.75rem;
64
31
  }
65
- }
66
32
 
67
- .canopy-search-filters__body {
68
- padding: 1.5rem;
69
- display: grid;
70
- gap: 1rem;
71
- }
33
+ .canopy-search-filters__empty {
34
+ font-size: var(--font-size-sm, 0.875rem);
35
+ line-height: var(--line-height-sm, 1.25rem);
36
+ color: var(--color-gray-500, #8b8d98);
37
+ }
72
38
 
73
- .canopy-search-filters__facets {
74
- display: flex;
75
- flex-direction: column;
76
- gap: 0.75rem;
77
- }
39
+ .canopy-search-filters__facet {
40
+ border: 1px solid var(--color-gray-200, #e0e1e6);
41
+ border-radius: 0.75rem;
42
+ background: var(--color-gray-50, #fcfcfd);
43
+ overflow: hidden;
78
44
 
79
- .canopy-search-filters__empty {
80
- font-size: var(--font-size-sm, 0.875rem);
81
- line-height: var(--line-height-sm, 1.25rem);
82
- color: var(--color-gray-500, #8b8d98);
83
- }
45
+ &[open] {
46
+ background: var(--color-gray-100, #ffffff);
47
+ }
48
+ }
84
49
 
85
- .canopy-search-filters__facet {
86
- border: 1px solid var(--color-gray-200, #e0e1e6);
87
- border-radius: 0.75rem;
88
- background: var(--color-gray-50, #fcfcfd);
89
- overflow: hidden;
50
+ .canopy-search-filters__facet-summary {
51
+ display: flex;
52
+ align-items: center;
53
+ justify-content: space-between;
54
+ gap: 0.75rem;
55
+ padding: 0.75rem 1rem;
56
+ font-size: var(--font-size-sm, 0.875rem);
57
+ font-weight: 600;
58
+ color: var(--color-gray-900, #121418);
59
+ cursor: pointer;
60
+ list-style: none;
61
+ }
90
62
 
91
- &[open] {
92
- background: var(--color-gray-100, #ffffff);
63
+ .canopy-search-filters__facet-summary::-webkit-details-marker {
64
+ display: none;
93
65
  }
94
- }
95
66
 
96
- .canopy-search-filters__facet-summary {
97
- display: flex;
98
- align-items: center;
99
- justify-content: space-between;
100
- gap: 0.75rem;
101
- padding: 0.75rem 1rem;
102
- font-size: var(--font-size-sm, 0.875rem);
103
- font-weight: 600;
104
- color: var(--color-gray-900, #121418);
105
- cursor: pointer;
106
- list-style: none;
107
- }
67
+ .canopy-search-filters__facet-count {
68
+ font-size: var(--font-size-xs, 0.75rem);
69
+ font-weight: 400;
70
+ color: var(--color-gray-500, #8b8d98);
71
+ }
108
72
 
109
- .canopy-search-filters__facet-summary::-webkit-details-marker {
110
- display: none;
111
- }
73
+ .canopy-search-filters__facet-content {
74
+ border-top: 1px solid var(--color-gray-200, #e0e1e6);
75
+ background: var(--color-gray-100, #ffffff);
76
+ padding: 1rem;
77
+ max-height: 15rem;
78
+ overflow-y: auto;
79
+ }
112
80
 
113
- .canopy-search-filters__facet-count {
114
- font-size: var(--font-size-xs, 0.75rem);
115
- font-weight: 400;
116
- color: var(--color-gray-500, #8b8d98);
117
- }
81
+ .canopy-search-filters__quick {
82
+ display: flex;
83
+ align-items: center;
84
+ gap: 0.5rem;
85
+ margin-bottom: 0.75rem;
86
+ }
118
87
 
119
- .canopy-search-filters__facet-content {
120
- border-top: 1px solid var(--color-gray-200, #e0e1e6);
121
- background: var(--color-gray-100, #ffffff);
122
- padding: 1rem;
123
- max-height: 15rem;
124
- overflow-y: auto;
125
- }
88
+ .canopy-search-filters__quick-input {
89
+ flex: 1;
90
+ min-width: 0;
91
+ border-radius: 0.5rem;
92
+ border: 1px solid var(--color-gray-300, #cdced6);
93
+ padding: 0.375rem 0.75rem;
94
+ font-size: var(--font-size-sm, 0.875rem);
95
+ color: var(--color-gray-700, #60646c);
96
+ transition: border-color var(--duration-fast, 150ms) var(--easing-standard, ease),
97
+ box-shadow var(--duration-fast, 150ms) var(--easing-standard, ease);
98
+
99
+ &:focus {
100
+ outline: none;
101
+ border-color: var(--color-brand-500, #3e63dd);
102
+ box-shadow: 0 0 0 1px var(--color-brand-500, #3e63dd);
103
+ }
104
+ }
126
105
 
127
- .canopy-search-filters__quick {
128
- display: flex;
129
- align-items: center;
130
- gap: 0.5rem;
131
- margin-bottom: 0.75rem;
132
- }
106
+ .canopy-search-filters__quick-clear {
107
+ border-radius: 0.375rem;
108
+ border: 1px solid var(--color-gray-200, #e0e1e6);
109
+ padding: 0.25rem 0.5rem;
110
+ font-size: var(--font-size-xs, 0.75rem);
111
+ color: var(--color-gray-600, #80838d);
112
+ background: var(--color-gray-100, #ffffff);
113
+ transition: background-color var(--duration-fast, 150ms) var(--easing-standard, ease),
114
+ color var(--duration-fast, 150ms) var(--easing-standard, ease);
133
115
 
134
- .canopy-search-filters__quick-input {
135
- flex: 1;
136
- min-width: 0;
137
- border-radius: 0.5rem;
138
- border: 1px solid var(--color-gray-300, #cdced6);
139
- padding: 0.375rem 0.75rem;
140
- font-size: var(--font-size-sm, 0.875rem);
141
- color: var(--color-gray-700, #60646c);
142
- transition: border-color var(--duration-fast, 150ms) var(--easing-standard, ease),
143
- box-shadow var(--duration-fast, 150ms) var(--easing-standard, ease);
144
-
145
- &:focus {
146
- outline: none;
147
- border-color: var(--color-brand-500, #3e63dd);
148
- box-shadow: 0 0 0 1px var(--color-brand-500, #3e63dd);
116
+ &:hover {
117
+ background: var(--color-gray-100, #f0f0f3);
118
+ color: var(--color-gray-900, #121418);
119
+ }
149
120
  }
150
- }
151
121
 
152
- .canopy-search-filters__quick-clear {
153
- border-radius: 0.375rem;
154
- border: 1px solid var(--color-gray-200, #e0e1e6);
155
- padding: 0.25rem 0.5rem;
156
- font-size: var(--font-size-xs, 0.75rem);
157
- color: var(--color-gray-600, #80838d);
158
- background: var(--color-gray-100, #ffffff);
159
- transition: background-color var(--duration-fast, 150ms) var(--easing-standard, ease),
160
- color var(--duration-fast, 150ms) var(--easing-standard, ease);
161
-
162
- &:hover {
163
- background: var(--color-gray-100, #f0f0f3);
164
- color: var(--color-gray-900, #121418);
122
+ .canopy-search-filters__facet-list {
123
+ list-style: none;
124
+ margin: 0;
125
+ padding: 0;
126
+ display: flex;
127
+ flex-direction: column;
128
+ gap: 0.5rem;
129
+ font-size: var(--font-size-sm, 0.875rem);
130
+ color: var(--color-gray-700, #60646c);
165
131
  }
166
- }
167
-
168
- .canopy-search-filters__facet-list {
169
- list-style: none;
170
- margin: 0;
171
- padding: 0;
172
- display: flex;
173
- flex-direction: column;
174
- gap: 0.5rem;
175
- font-size: var(--font-size-sm, 0.875rem);
176
- color: var(--color-gray-700, #60646c);
177
- }
178
132
 
179
- .canopy-search-filters__facet-item {
180
- display: flex;
181
- align-items: flex-start;
182
- gap: 0.5rem;
183
- }
133
+ .canopy-search-filters__facet-item {
134
+ display: flex;
135
+ align-items: flex-start;
136
+ gap: 0.5rem;
137
+ }
184
138
 
185
- .canopy-search-filters__facet-checkbox {
186
- margin-top: 0.25rem;
187
- width: 1rem;
188
- height: 1rem;
189
- border-radius: 0.375rem;
190
- border: 1px solid var(--color-gray-300, #cdced6);
191
- color: var(--color-brand-500, #3e63dd);
192
- accent-color: var(--color-brand-500, #3e63dd);
193
- }
139
+ .canopy-search-filters__facet-checkbox {
140
+ margin-top: 0.25rem;
141
+ width: 1rem;
142
+ height: 1rem;
143
+ border-radius: 0.375rem;
144
+ border: 1px solid var(--color-gray-300, #cdced6);
145
+ color: var(--color-brand-500, #3e63dd);
146
+ accent-color: var(--color-brand-500, #3e63dd);
147
+ }
194
148
 
195
- .canopy-search-filters__facet-label {
196
- display: flex;
197
- flex: 1;
198
- flex-direction: column;
199
- gap: 0.25rem;
200
- }
149
+ .canopy-search-filters__facet-label {
150
+ display: flex;
151
+ flex: 1;
152
+ flex-direction: column;
153
+ gap: 0.25rem;
154
+ }
201
155
 
202
- .canopy-search-filters__facet-empty,
203
- .canopy-search-filters__facet-notice {
204
- font-size: var(--font-size-xs, 0.75rem);
205
- color: rgba(148, 163, 184, 0.9);
206
- }
156
+ .canopy-search-filters__facet-empty {
157
+ font-size: var(--font-size-sm, 0.875rem);
158
+ color: var(--color-gray-500, #8b8d98);
159
+ }
207
160
 
208
- .canopy-search-filters__footer {
209
- display: flex;
210
- align-items: center;
211
- justify-content: space-between;
212
- gap: 1rem;
213
- border-top: 1px solid var(--color-gray-200, #e0e1e6);
214
- padding: 1rem 1.5rem;
215
- font-size: var(--font-size-sm, 0.875rem);
216
- color: var(--color-gray-500, #8b8d98);
217
- }
161
+ .canopy-search-filters__footer {
162
+ display: flex;
163
+ flex-wrap: wrap;
164
+ align-items: center;
165
+ justify-content: space-between;
166
+ gap: 0.75rem;
167
+ border-top: 1px solid var(--color-gray-200, #e0e1e6);
168
+ padding-top: 1.25rem;
169
+ }
218
170
 
219
- .canopy-search-filters__footer-actions {
220
- display: flex;
221
- align-items: center;
222
- gap: 0.5rem;
223
- }
171
+ .canopy-search-filters__footer-actions {
172
+ display: flex;
173
+ align-items: center;
174
+ gap: 0.75rem;
175
+ }
224
176
 
225
- .canopy-search-filters__button {
226
- border-radius: 0.5rem;
227
- padding: 0.375rem 0.75rem;
228
- font-size: var(--font-size-sm, 0.875rem);
229
- font-weight: 500;
230
- line-height: var(--line-height-sm, 1.25rem);
231
- transition:
232
- background-color var(--duration-fast, 150ms) var(--easing-standard, ease),
233
- color var(--duration-fast, 150ms) var(--easing-standard, ease),
234
- box-shadow var(--duration-fast, 150ms) var(--easing-standard, ease);
235
- }
177
+ .canopy-search-filters__button {
178
+ border-radius: 9999px;
179
+ padding: 0.5rem 1.25rem;
180
+ font-size: var(--font-size-sm, 0.875rem);
181
+ font-weight: 600;
182
+ cursor: pointer;
183
+ transition: background-color var(--duration-fast, 150ms) var(--easing-standard, ease),
184
+ color var(--duration-fast, 150ms) var(--easing-standard, ease);
185
+ }
236
186
 
237
- .canopy-search-filters__button--secondary {
238
- border: 1px solid var(--color-gray-200, #e0e1e6);
239
- background: var(--color-gray-100, #ffffff);
240
- color: var(--color-gray-600, #80838d);
187
+ .canopy-search-filters__button--secondary {
188
+ border: 1px solid var(--color-gray-300, #cdced6);
189
+ background: transparent;
190
+ color: var(--color-gray-700, #60646c);
191
+ }
241
192
 
242
- &:hover:not([disabled]) {
193
+ .canopy-search-filters__button--secondary:hover,
194
+ .canopy-search-filters__button--secondary:focus-visible {
243
195
  background: var(--color-gray-100, #f0f0f3);
244
196
  color: var(--color-gray-900, #121418);
197
+ outline: none;
245
198
  }
246
199
 
247
- &:disabled {
248
- cursor: not-allowed;
249
- color: rgba(148, 163, 184, 0.8);
200
+ .canopy-search-filters__button--primary {
201
+ border: none;
202
+ background: var(--color-brand-600, #3e63dd);
203
+ color: var(--color-gray-50, #f9fafb);
250
204
  }
251
- }
252
205
 
253
- .canopy-search-filters__button--primary {
254
- border: 1px solid transparent;
255
- background: var(--color-brand-500, #3e63dd);
256
- color: #fff;
257
- box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
206
+ .canopy-search-filters__button--primary:hover,
207
+ .canopy-search-filters__button--primary:focus-visible {
208
+ background: var(--color-brand-700, #3358d4);
209
+ outline: none;
210
+ }
211
+
212
+ @media (max-width: 48rem) {
213
+ .canopy-modal--filters .canopy-modal__body--filters {
214
+ padding: 1.5rem 1.25rem 2rem 1.25rem;
215
+ gap: 1.25rem;
216
+ }
217
+
218
+ .canopy-search-filters__subtitle {
219
+ margin-bottom: 0.5rem;
220
+ }
221
+
222
+ .canopy-search-filters__facet-content {
223
+ max-height: 40vh;
224
+ }
225
+
226
+ .canopy-search-filters__footer {
227
+ flex-direction: column;
228
+ align-items: stretch;
229
+ }
258
230
 
259
- &:hover {
260
- background: var(--color-brand-700, #2c4bbd);
261
- box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
231
+ .canopy-search-filters__footer-actions {
232
+ justify-content: flex-end;
233
+ }
262
234
  }
263
235
  }