@canopy-iiif/app 1.5.9 → 1.5.11
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/lib/build/iiif.js +7 -2
- package/lib/build/pages.js +20 -2
- package/lib/components/navigation.js +21 -0
- package/package.json +1 -1
- package/ui/dist/index.mjs +524 -204
- package/ui/dist/index.mjs.map +4 -4
- package/ui/dist/server.mjs +602 -309
- package/ui/dist/server.mjs.map +4 -4
- package/ui/styles/base/_heading.scss +1 -1
- package/ui/styles/base/_markdown.scss +1 -1
- package/ui/styles/components/_article-card.scss +1 -1
- package/ui/styles/components/_bibliography.scss +1 -2
- package/ui/styles/components/_card.scss +1 -1
- package/ui/styles/components/_diagram.scss +1 -1
- package/ui/styles/components/_footer.scss +1 -1
- package/ui/styles/components/_interstitial-hero.scss +3 -3
- package/ui/styles/components/_layout.scss +16 -2
- package/ui/styles/components/_map.scss +4 -4
- package/ui/styles/components/_nav-tree.scss +67 -0
- package/ui/styles/components/_referenced-items.scss +3 -3
- package/ui/styles/components/_sub-navigation.scss +42 -21
- package/ui/styles/components/_timeline.scss +10 -10
- package/ui/styles/components/_work.scss +1 -1
- package/ui/styles/components/header/_header.scss +4 -2
- package/ui/styles/components/header/_navbar.scss +65 -50
- package/ui/styles/components/iiif/_image.scss +1 -1
- package/ui/styles/components/index.scss +1 -0
- package/ui/styles/components/modal/_modal.scss +1 -1
- package/ui/styles/components/search/_filters.scss +15 -19
- package/ui/styles/components/search/_form.scss +1 -1
- package/ui/styles/components/search/_results.scss +4 -4
- package/ui/styles/index.css +217 -123
- package/ui/styles/settings/_breakpoints.scss +7 -0
- package/ui/theme.js +9 -9
|
@@ -70,11 +70,10 @@
|
|
|
70
70
|
.bibliography__note-label {
|
|
71
71
|
font-variant-numeric: tabular-nums;
|
|
72
72
|
font-weight: 600;
|
|
73
|
-
color: var(--color-gray-
|
|
73
|
+
color: var(--color-gray-muted);
|
|
74
74
|
}
|
|
75
75
|
|
|
76
76
|
.bibliography__note-body {
|
|
77
|
-
color: var(--color-gray-900);
|
|
78
77
|
font-size: 0.95rem;
|
|
79
78
|
line-height: 1.5;
|
|
80
79
|
}
|
|
@@ -139,7 +139,7 @@
|
|
|
139
139
|
.canopy-interstitial__description {
|
|
140
140
|
font-size: 0.9222rem;
|
|
141
141
|
font-weight: 700;
|
|
142
|
-
color: var(--color-accent-
|
|
142
|
+
color: var(--color-accent-default);
|
|
143
143
|
font-family: var(--font-mono);
|
|
144
144
|
}
|
|
145
145
|
}
|
|
@@ -153,12 +153,12 @@
|
|
|
153
153
|
&__breadcrumb a {
|
|
154
154
|
color: inherit;
|
|
155
155
|
text-decoration: none;
|
|
156
|
-
color: var(--color-gray-
|
|
156
|
+
color: var(--color-gray-muted);
|
|
157
157
|
}
|
|
158
158
|
|
|
159
159
|
&__breadcrumb a:hover,
|
|
160
160
|
&__breadcrumb a:focus-visible {
|
|
161
|
-
color: var(--color-accent-
|
|
161
|
+
color: var(--color-accent-default);
|
|
162
162
|
outline: none;
|
|
163
163
|
}
|
|
164
164
|
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
@use "../settings/breakpoints" as bp;
|
|
2
|
+
|
|
1
3
|
.canopy-layout {
|
|
2
4
|
--canopy-layout-sidebar-width: 13rem;
|
|
3
5
|
--canopy-layout-content-nav-width: 14rem;
|
|
@@ -31,8 +33,12 @@
|
|
|
31
33
|
position: relative;
|
|
32
34
|
}
|
|
33
35
|
|
|
36
|
+
.canopy-layout__sidebar {
|
|
37
|
+
display: none;
|
|
38
|
+
}
|
|
39
|
+
|
|
34
40
|
.canopy-layout__content-nav {
|
|
35
|
-
display:
|
|
41
|
+
display: none;
|
|
36
42
|
flex-direction: column;
|
|
37
43
|
gap: 0.75rem;
|
|
38
44
|
align-items: stretch;
|
|
@@ -51,7 +57,15 @@
|
|
|
51
57
|
margin-left: calc(-1 * var(--canopy-layout-column-gap));
|
|
52
58
|
}
|
|
53
59
|
|
|
54
|
-
@media (min-width:
|
|
60
|
+
@media (min-width: bp.$canopy-desktop-breakpoint) {
|
|
61
|
+
.canopy-layout__sidebar {
|
|
62
|
+
display: block;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.canopy-layout__content-nav {
|
|
66
|
+
display: flex;
|
|
67
|
+
}
|
|
68
|
+
|
|
55
69
|
.canopy-layout--with-sidebar {
|
|
56
70
|
grid-template-columns: var(--canopy-layout-sidebar-width) minmax(0, 1fr);
|
|
57
71
|
}
|
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
padding: 0;
|
|
76
76
|
font-size: 0.9222rem;
|
|
77
77
|
line-height: 1.4;
|
|
78
|
-
color: var(--color-gray-
|
|
78
|
+
color: var(--color-gray-muted);
|
|
79
79
|
}
|
|
80
80
|
|
|
81
81
|
&-link {
|
|
@@ -96,7 +96,7 @@
|
|
|
96
96
|
font-weight: 600;
|
|
97
97
|
letter-spacing: 0.05em;
|
|
98
98
|
text-transform: uppercase;
|
|
99
|
-
color: var(--color-gray-
|
|
99
|
+
color: var(--color-gray-muted);
|
|
100
100
|
}
|
|
101
101
|
|
|
102
102
|
&-list {
|
|
@@ -127,13 +127,13 @@
|
|
|
127
127
|
}
|
|
128
128
|
|
|
129
129
|
&-text {
|
|
130
|
-
color: var(--color-gray-
|
|
130
|
+
color: var(--color-gray-muted);
|
|
131
131
|
}
|
|
132
132
|
|
|
133
133
|
&-summary {
|
|
134
134
|
margin: 0.125rem 0 0;
|
|
135
135
|
font-size: 0.8125rem;
|
|
136
|
-
color: var(--color-gray-
|
|
136
|
+
color: var(--color-gray-muted);
|
|
137
137
|
}
|
|
138
138
|
}
|
|
139
139
|
}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
@layer components {
|
|
2
|
+
.canopy-nav-tree {
|
|
3
|
+
color: inherit;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.canopy-nav-tree__heading {
|
|
7
|
+
font-weight: 600;
|
|
8
|
+
margin-bottom: 0.618rem;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.canopy-nav-tree__list {
|
|
12
|
+
list-style: none;
|
|
13
|
+
margin: 0;
|
|
14
|
+
padding: 0;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.canopy-nav-tree__item {
|
|
18
|
+
margin: 0;
|
|
19
|
+
padding: 0;
|
|
20
|
+
list-style: none;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.canopy-nav-tree__row {
|
|
24
|
+
display: flex;
|
|
25
|
+
align-items: center;
|
|
26
|
+
gap: 0.25rem;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.canopy-nav-tree__row .canopy-nav-tree__link {
|
|
30
|
+
flex: 1;
|
|
31
|
+
min-width: 0;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.canopy-nav-tree__link {
|
|
35
|
+
text-decoration: none;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.canopy-nav-tree__toggle {
|
|
39
|
+
appearance: none;
|
|
40
|
+
border: none;
|
|
41
|
+
background: transparent;
|
|
42
|
+
padding: 0.25rem;
|
|
43
|
+
margin: -0.25rem;
|
|
44
|
+
display: inline-flex;
|
|
45
|
+
align-items: center;
|
|
46
|
+
justify-content: center;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.canopy-nav-tree__toggle:focus-visible {
|
|
50
|
+
outline: 2px solid var(--color-accent-default);
|
|
51
|
+
outline-offset: 2px;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.canopy-nav-tree__toggle-icon {
|
|
55
|
+
width: 1.25rem;
|
|
56
|
+
height: 1.25rem;
|
|
57
|
+
transition: transform 150ms ease;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.canopy-nav-tree__children {
|
|
61
|
+
margin-top: 0.25rem;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.canopy-nav-tree__item[data-expanded='true'] .canopy-nav-tree__toggle-icon {
|
|
65
|
+
transform: rotate(180deg);
|
|
66
|
+
}
|
|
67
|
+
}
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
.referenced-items--empty {
|
|
30
30
|
border-top: 1px solid var(--color-gray-200);
|
|
31
31
|
padding: 1.5rem 0;
|
|
32
|
-
color: var(--color-gray-
|
|
32
|
+
color: var(--color-gray-muted);
|
|
33
33
|
font-style: italic;
|
|
34
34
|
}
|
|
35
35
|
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
text-transform: uppercase;
|
|
50
50
|
margin: 0;
|
|
51
51
|
font-weight: 400;
|
|
52
|
-
color: var(--color-gray-
|
|
52
|
+
color: var(--color-gray-muted);
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
.references__item {
|
|
@@ -69,6 +69,6 @@
|
|
|
69
69
|
}
|
|
70
70
|
|
|
71
71
|
.references__empty {
|
|
72
|
-
color: var(--color-gray-
|
|
72
|
+
color: var(--color-gray-muted);
|
|
73
73
|
font-style: italic;
|
|
74
74
|
}
|
|
@@ -2,24 +2,25 @@
|
|
|
2
2
|
color: inherit;
|
|
3
3
|
}
|
|
4
4
|
|
|
5
|
-
.canopy-sub-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
.canopy-sub-navigation__list {
|
|
5
|
+
.canopy-sub-navigation__list,
|
|
6
|
+
.canopy-sub-navigation__tree .canopy-nav-tree__list,
|
|
7
|
+
.canopy-modal__section-nav .canopy-nav-tree__list {
|
|
11
8
|
list-style: none;
|
|
12
9
|
margin: 0;
|
|
13
10
|
padding: 0;
|
|
14
11
|
}
|
|
15
12
|
|
|
16
|
-
.canopy-sub-navigation__item
|
|
13
|
+
.canopy-sub-navigation__item,
|
|
14
|
+
.canopy-sub-navigation__tree .canopy-nav-tree__item,
|
|
15
|
+
.canopy-modal__section-nav .canopy-nav-tree__item {
|
|
17
16
|
margin: 0;
|
|
18
17
|
padding: 0;
|
|
19
18
|
list-style: none;
|
|
20
19
|
}
|
|
21
20
|
|
|
22
|
-
.canopy-sub-navigation__link
|
|
21
|
+
.canopy-sub-navigation__link,
|
|
22
|
+
.canopy-sub-navigation__tree .canopy-nav-tree__link,
|
|
23
|
+
.canopy-modal__section-nav .canopy-nav-tree__link {
|
|
23
24
|
display: block;
|
|
24
25
|
padding: 0.382rem 0.618;
|
|
25
26
|
border-radius: 0.382rem;
|
|
@@ -31,22 +32,29 @@
|
|
|
31
32
|
color 120ms ease;
|
|
32
33
|
}
|
|
33
34
|
|
|
34
|
-
.canopy-sub-navigation__link:hover
|
|
35
|
+
.canopy-sub-navigation__link:hover,
|
|
36
|
+
.canopy-sub-navigation__tree .canopy-nav-tree__link:hover,
|
|
37
|
+
.canopy-modal__section-nav .canopy-nav-tree__link:hover {
|
|
35
38
|
color: var(--color-accent-default);
|
|
36
39
|
}
|
|
37
40
|
|
|
38
|
-
.canopy-sub-navigation__link.is-label
|
|
41
|
+
.canopy-sub-navigation__link.is-label,
|
|
42
|
+
.canopy-sub-navigation__tree .canopy-nav-tree__link.is-label,
|
|
43
|
+
.canopy-modal__section-nav .canopy-nav-tree__link.is-label {
|
|
39
44
|
cursor: default;
|
|
40
|
-
color: var(--color-gray-
|
|
45
|
+
color: var(--color-gray-muted);
|
|
41
46
|
}
|
|
42
47
|
|
|
43
|
-
.canopy-sub-navigation__link.is-disabled
|
|
48
|
+
.canopy-sub-navigation__link.is-disabled,
|
|
49
|
+
.canopy-sub-navigation__tree .canopy-nav-tree__link.is-disabled,
|
|
50
|
+
.canopy-modal__section-nav .canopy-nav-tree__link.is-disabled {
|
|
44
51
|
cursor: default;
|
|
45
|
-
color: var(--color-gray-
|
|
52
|
+
color: var(--color-gray-muted);
|
|
46
53
|
font-style: italic;
|
|
47
54
|
}
|
|
48
55
|
|
|
49
|
-
.canopy-sub-navigation__badge
|
|
56
|
+
.canopy-sub-navigation__badge,
|
|
57
|
+
.canopy-nav-tree__badge {
|
|
50
58
|
display: inline-flex;
|
|
51
59
|
align-items: center;
|
|
52
60
|
justify-content: center;
|
|
@@ -58,7 +66,7 @@
|
|
|
58
66
|
z-index: 0;
|
|
59
67
|
position: relative;
|
|
60
68
|
background: var(--color-accent-200);
|
|
61
|
-
color: var(--color-accent-
|
|
69
|
+
color: var(--color-accent-default);
|
|
62
70
|
font-family: var(--font-sans);
|
|
63
71
|
padding: 0.175rem 0.175rem;
|
|
64
72
|
top: -1px;
|
|
@@ -66,23 +74,33 @@
|
|
|
66
74
|
letter-spacing: -0.0125em;
|
|
67
75
|
}
|
|
68
76
|
|
|
69
|
-
.canopy-sub-navigation__link.is-active
|
|
77
|
+
.canopy-sub-navigation__link.is-active,
|
|
78
|
+
.canopy-sub-navigation__tree .canopy-nav-tree__link.is-active,
|
|
79
|
+
.canopy-modal__section-nav .canopy-nav-tree__link.is-active {
|
|
70
80
|
color: var(--color-gray-900);
|
|
71
81
|
font-weight: 600;
|
|
72
82
|
}
|
|
73
83
|
|
|
74
|
-
.canopy-sub-navigation__list--nested
|
|
84
|
+
.canopy-sub-navigation__list--nested,
|
|
85
|
+
.canopy-sub-navigation__tree .canopy-nav-tree__list--nested,
|
|
86
|
+
.canopy-modal__section-nav .canopy-nav-tree__list--nested {
|
|
75
87
|
margin: 0.382rem 0 0.382rem 0.618rem;
|
|
76
88
|
padding-left: 0.618rem;
|
|
77
89
|
border-left: 1px solid var(--color-gray-200);
|
|
78
90
|
}
|
|
79
91
|
|
|
80
|
-
.canopy-sub-navigation__link.depth-0
|
|
92
|
+
.canopy-sub-navigation__link.depth-0,
|
|
93
|
+
.canopy-sub-navigation__tree .canopy-nav-tree__link.depth-0,
|
|
94
|
+
.canopy-modal__section-nav .canopy-nav-tree__link.depth-0 {
|
|
81
95
|
padding-left: 0.382rem;
|
|
82
96
|
}
|
|
83
97
|
|
|
84
98
|
.canopy-sub-navigation__link.depth-1,
|
|
85
|
-
.canopy-sub-navigation__link.depth-2
|
|
99
|
+
.canopy-sub-navigation__link.depth-2,
|
|
100
|
+
.canopy-sub-navigation__tree .canopy-nav-tree__link.depth-1,
|
|
101
|
+
.canopy-sub-navigation__tree .canopy-nav-tree__link.depth-2,
|
|
102
|
+
.canopy-modal__section-nav .canopy-nav-tree__link.depth-1,
|
|
103
|
+
.canopy-modal__section-nav .canopy-nav-tree__link.depth-2 {
|
|
86
104
|
padding-left: calc(0.382rem);
|
|
87
105
|
font-size: 0.9222rem;
|
|
88
106
|
}
|
|
@@ -121,7 +139,7 @@
|
|
|
121
139
|
var(--color-accent-200) 25%,
|
|
122
140
|
transparent
|
|
123
141
|
);
|
|
124
|
-
color: var(--color-accent-
|
|
142
|
+
color: var(--color-accent-default);
|
|
125
143
|
}
|
|
126
144
|
|
|
127
145
|
.canopy-layout__content-nav.is-collapsed .canopy-content-navigation {
|
|
@@ -143,6 +161,9 @@
|
|
|
143
161
|
letter-spacing: 0.05em;
|
|
144
162
|
}
|
|
145
163
|
|
|
146
|
-
.canopy-content-navigation--collapsed .canopy-sub-navigation__list
|
|
164
|
+
.canopy-content-navigation--collapsed .canopy-sub-navigation__list,
|
|
165
|
+
.canopy-content-navigation--collapsed
|
|
166
|
+
.canopy-sub-navigation__tree
|
|
167
|
+
.canopy-nav-tree__list {
|
|
147
168
|
display: none;
|
|
148
169
|
}
|
|
@@ -17,12 +17,12 @@
|
|
|
17
17
|
.canopy-timeline__description {
|
|
18
18
|
margin: 0;
|
|
19
19
|
font-size: 0.9222rem;
|
|
20
|
-
color: var(--color-gray-
|
|
20
|
+
color: var(--color-gray-muted);
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
.canopy-timeline__range {
|
|
24
24
|
margin: 0;
|
|
25
|
-
color: var(--color-accent-
|
|
25
|
+
color: var(--color-accent-default);
|
|
26
26
|
font-size: 1.382rem;
|
|
27
27
|
font-weight: 600;
|
|
28
28
|
}
|
|
@@ -90,7 +90,7 @@
|
|
|
90
90
|
.canopy-timeline__step-label {
|
|
91
91
|
font-size: 0.8333rem;
|
|
92
92
|
font-weight: 300;
|
|
93
|
-
color: var(--color-gray-
|
|
93
|
+
color: var(--color-gray-muted);
|
|
94
94
|
transform: translateX(0.5rem);
|
|
95
95
|
margin-top: -0.618rem;
|
|
96
96
|
margin-left: -0.382rem;
|
|
@@ -137,7 +137,7 @@
|
|
|
137
137
|
.canopy-timeline__group-point-date {
|
|
138
138
|
font-size: 1.111rem;
|
|
139
139
|
letter-spacing: 0.0125em;
|
|
140
|
-
color: var(--color-gray-
|
|
140
|
+
color: var(--color-gray-muted);
|
|
141
141
|
font-weight: 300;
|
|
142
142
|
margin-bottom: 0.382rem;
|
|
143
143
|
}
|
|
@@ -155,7 +155,7 @@
|
|
|
155
155
|
.canopy-timeline__group-count {
|
|
156
156
|
font-size: 0.9222rem;
|
|
157
157
|
font-weight: 300;
|
|
158
|
-
color: var(--color-gray-
|
|
158
|
+
color: var(--color-gray-muted);
|
|
159
159
|
}
|
|
160
160
|
|
|
161
161
|
.canopy-timeline__connector {
|
|
@@ -168,22 +168,22 @@
|
|
|
168
168
|
width: clamp(2.618rem, 6vw, 2.618rem);
|
|
169
169
|
height: 0.125rem;
|
|
170
170
|
border-radius: 999px;
|
|
171
|
-
background: var(--color-accent-
|
|
171
|
+
background: var(--color-accent-default);
|
|
172
172
|
}
|
|
173
173
|
|
|
174
174
|
.canopy-timeline__connector-dot {
|
|
175
175
|
width: 0.618rem;
|
|
176
176
|
height: 0.618rem;
|
|
177
177
|
border-radius: 50%;
|
|
178
|
-
background: var(--color-accent-
|
|
179
|
-
border: 2px solid var(--color-accent-
|
|
178
|
+
background: var(--color-accent-default);
|
|
179
|
+
border: 2px solid var(--color-accent-default);
|
|
180
180
|
}
|
|
181
181
|
|
|
182
182
|
.canopy-timeline__connector-dot.is-active {
|
|
183
183
|
width: 1rem;
|
|
184
184
|
height: 1rem;
|
|
185
|
-
background: var(--color-accent-
|
|
186
|
-
border-color: var(--color-accent-
|
|
185
|
+
background: var(--color-accent-default);
|
|
186
|
+
border-color: var(--color-accent-default);
|
|
187
187
|
}
|
|
188
188
|
|
|
189
189
|
.canopy-timeline__resources {
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
@use "../../settings/breakpoints" as bp;
|
|
2
|
+
|
|
1
3
|
@layer components {
|
|
2
4
|
.canopy-header {
|
|
3
5
|
position: relative;
|
|
@@ -91,7 +93,7 @@
|
|
|
91
93
|
|
|
92
94
|
.canopy-header__icon-button:hover,
|
|
93
95
|
.canopy-header__icon-button:focus-visible {
|
|
94
|
-
color: var(--color-accent-
|
|
96
|
+
color: var(--color-accent-default);
|
|
95
97
|
outline: none;
|
|
96
98
|
}
|
|
97
99
|
|
|
@@ -135,7 +137,7 @@
|
|
|
135
137
|
padding: 0.25rem 0;
|
|
136
138
|
}
|
|
137
139
|
|
|
138
|
-
@media (min-width:
|
|
140
|
+
@media (min-width: bp.$canopy-desktop-breakpoint) {
|
|
139
141
|
.canopy-header__menu {
|
|
140
142
|
display: none;
|
|
141
143
|
}
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
@use "../../settings/breakpoints" as bp;
|
|
2
|
+
|
|
1
3
|
@layer components {
|
|
2
4
|
.canopy-nav-links {
|
|
3
5
|
display: flex;
|
|
@@ -6,9 +8,12 @@
|
|
|
6
8
|
font-size: 1rem;
|
|
7
9
|
}
|
|
8
10
|
|
|
11
|
+
.canopy-nav-links.canopy-header__desktop-nav {
|
|
12
|
+
display: none;
|
|
13
|
+
}
|
|
14
|
+
|
|
9
15
|
.canopy-nav-links a {
|
|
10
16
|
color: var(--color-gray-900);
|
|
11
|
-
font-weight: 500;
|
|
12
17
|
text-decoration: none;
|
|
13
18
|
padding: 0.25rem 0;
|
|
14
19
|
transition: color 150ms ease;
|
|
@@ -27,86 +32,96 @@
|
|
|
27
32
|
.canopy-modal--nav .canopy-modal__body {
|
|
28
33
|
display: flex;
|
|
29
34
|
flex-direction: column;
|
|
30
|
-
gap:
|
|
35
|
+
gap: 1rem;
|
|
31
36
|
}
|
|
32
37
|
|
|
33
38
|
.canopy-modal--nav .canopy-nav-links {
|
|
34
39
|
flex-direction: column;
|
|
35
40
|
align-items: stretch;
|
|
36
|
-
gap: 0.
|
|
37
|
-
font-size: 1.
|
|
41
|
+
gap: 0.618rem;
|
|
42
|
+
font-size: 1.111rem;
|
|
38
43
|
}
|
|
39
44
|
|
|
40
|
-
.canopy-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
45
|
+
.canopy-modal__nav-list {
|
|
46
|
+
list-style: none;
|
|
47
|
+
margin: 0;
|
|
48
|
+
padding: 0;
|
|
49
|
+
display: flex;
|
|
50
|
+
flex-direction: column;
|
|
51
|
+
gap: 0.618rem;
|
|
44
52
|
}
|
|
45
53
|
|
|
46
|
-
.canopy-
|
|
47
|
-
|
|
48
|
-
padding
|
|
54
|
+
.canopy-modal__nav-item {
|
|
55
|
+
margin: 0;
|
|
56
|
+
padding: 0;
|
|
57
|
+
display: flex;
|
|
58
|
+
flex-direction: column;
|
|
59
|
+
gap: 0.5rem;
|
|
49
60
|
}
|
|
50
61
|
|
|
51
|
-
.canopy-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
color: var(--color-gray-500);
|
|
57
|
-
margin-bottom: 0.5rem;
|
|
62
|
+
.canopy-modal__nav-row {
|
|
63
|
+
display: flex;
|
|
64
|
+
align-items: center;
|
|
65
|
+
justify-content: space-between;
|
|
66
|
+
gap: 0.5rem;
|
|
58
67
|
}
|
|
59
68
|
|
|
60
|
-
.canopy-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
padding: 0;
|
|
69
|
+
.canopy-modal__nav-row a {
|
|
70
|
+
flex: 1;
|
|
71
|
+
min-width: 0;
|
|
64
72
|
}
|
|
65
73
|
|
|
66
|
-
.canopy-
|
|
67
|
-
|
|
68
|
-
|
|
74
|
+
.canopy-modal--nav .canopy-nav-links a {
|
|
75
|
+
display: inline-flex;
|
|
76
|
+
align-items: center;
|
|
77
|
+
padding: 0.618rem 0;
|
|
69
78
|
}
|
|
70
79
|
|
|
71
|
-
.canopy-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
80
|
+
.canopy-modal__nav-toggle {
|
|
81
|
+
appearance: none;
|
|
82
|
+
border: none;
|
|
83
|
+
background: transparent;
|
|
84
|
+
padding: 0.25rem;
|
|
85
|
+
margin: -0.25rem;
|
|
86
|
+
display: inline-flex;
|
|
87
|
+
align-items: center;
|
|
88
|
+
justify-content: center;
|
|
89
|
+
color: var(--color-gray-muted);
|
|
77
90
|
}
|
|
78
91
|
|
|
79
|
-
.canopy-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
outline: none;
|
|
92
|
+
.canopy-modal__nav-toggle:focus-visible {
|
|
93
|
+
outline: 2px solid var(--color-accent-default);
|
|
94
|
+
outline-offset: 2px;
|
|
83
95
|
}
|
|
84
96
|
|
|
85
|
-
.canopy-
|
|
86
|
-
|
|
97
|
+
.canopy-modal__nav-toggle-icon {
|
|
98
|
+
width: 1.25rem;
|
|
99
|
+
height: 1.25rem;
|
|
100
|
+
transition: transform 150ms ease;
|
|
87
101
|
}
|
|
88
102
|
|
|
89
|
-
.canopy-
|
|
90
|
-
|
|
91
|
-
font-weight: 600;
|
|
92
|
-
cursor: default;
|
|
103
|
+
.canopy-modal__nav-item[data-expanded="true"] .canopy-modal__nav-toggle-icon {
|
|
104
|
+
transform: rotate(180deg);
|
|
93
105
|
}
|
|
94
106
|
|
|
95
|
-
.canopy-modal__section-
|
|
96
|
-
|
|
97
|
-
padding-
|
|
98
|
-
border-left: 1px solid var(--color-gray-200);
|
|
107
|
+
.canopy-modal--nav .canopy-modal__section-nav {
|
|
108
|
+
border-top: 1px solid var(--color-gray-200);
|
|
109
|
+
padding-top: 1rem;
|
|
99
110
|
}
|
|
100
111
|
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
112
|
+
.canopy-modal__section-nav--nested {
|
|
113
|
+
border-top: none;
|
|
114
|
+
padding-top: 0;
|
|
115
|
+
margin-top: -0.25rem;
|
|
105
116
|
}
|
|
106
117
|
|
|
107
|
-
@media (min-width:
|
|
118
|
+
@media (min-width: bp.$canopy-desktop-breakpoint) {
|
|
108
119
|
.canopy-modal--nav {
|
|
109
120
|
display: none !important;
|
|
110
121
|
}
|
|
122
|
+
|
|
123
|
+
.canopy-nav-links.canopy-header__desktop-nav {
|
|
124
|
+
display: flex;
|
|
125
|
+
}
|
|
111
126
|
}
|
|
112
127
|
}
|