@canopy-iiif/app 0.10.9 → 0.10.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/package.json +1 -1
- package/ui/dist/index.mjs +32 -31
- package/ui/dist/index.mjs.map +2 -2
- package/ui/dist/server.mjs +32 -31
- package/ui/dist/server.mjs.map +2 -2
- package/ui/styles/components/_buttons.scss +40 -8
- package/ui/styles/components/iiif/_image.scss +29 -0
- package/ui/styles/components/iiif/index.scss +1 -0
- package/ui/styles/components/index.scss +1 -0
- package/ui/styles/components/search/_form.scss +1 -1
- package/ui/styles/index.css +67 -5
- package/ui/styles/index.scss +8 -0
|
@@ -6,8 +6,8 @@
|
|
|
6
6
|
gap: 0.35rem;
|
|
7
7
|
padding: 0.55rem 1.4rem;
|
|
8
8
|
border-radius: 9999px;
|
|
9
|
-
font-size: 0.
|
|
10
|
-
font-weight:
|
|
9
|
+
font-size: 0.9222rem;
|
|
10
|
+
font-weight: 300;
|
|
11
11
|
text-decoration: none;
|
|
12
12
|
transition:
|
|
13
13
|
background-color 0.2s ease,
|
|
@@ -29,12 +29,8 @@
|
|
|
29
29
|
|
|
30
30
|
&--secondary {
|
|
31
31
|
border: 1px solid
|
|
32
|
-
color-mix(in srgb, var(--color-gray-
|
|
33
|
-
color: color-mix(
|
|
34
|
-
in srgb,
|
|
35
|
-
var(--color-gray-900) 92%,
|
|
36
|
-
transparent
|
|
37
|
-
);
|
|
32
|
+
color-mix(in srgb, var(--color-gray-300) 60%, transparent);
|
|
33
|
+
color: color-mix(in srgb, var(--color-gray-900) 92%, transparent);
|
|
38
34
|
background-color: var(--color-gray-50);
|
|
39
35
|
|
|
40
36
|
&:hover,
|
|
@@ -55,10 +51,46 @@
|
|
|
55
51
|
}
|
|
56
52
|
|
|
57
53
|
.canopy-button-group {
|
|
54
|
+
display: flex;
|
|
55
|
+
flex-direction: column;
|
|
56
|
+
align-items: flex-start;
|
|
57
|
+
gap: 0.5rem;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.canopy-button-group__text {
|
|
61
|
+
font-size: 1.38rem;
|
|
62
|
+
font-weight: 600;
|
|
63
|
+
color: var(--color-gray-900);
|
|
64
|
+
margin-bottom: 1rem;
|
|
65
|
+
letter-spacing: -0.0125em;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.canopy-button-group__actions {
|
|
58
69
|
display: flex;
|
|
59
70
|
flex-wrap: wrap;
|
|
60
71
|
align-items: center;
|
|
61
72
|
gap: 0.75rem;
|
|
62
73
|
padding: 1rem 0;
|
|
74
|
+
width: 100%;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.canopy-button-group--interstitial {
|
|
78
|
+
width: 100%;
|
|
79
|
+
align-items: center;
|
|
80
|
+
text-align: center;
|
|
81
|
+
padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 4vw, 4rem);
|
|
82
|
+
margin: 2rem 0;
|
|
83
|
+
border-radius: 1.25rem;
|
|
84
|
+
background: linear-gradient(
|
|
85
|
+
173deg,
|
|
86
|
+
transparent 0%,
|
|
87
|
+
var(--color-brand-200) 100%
|
|
88
|
+
);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.canopy-button-group--interstitial .canopy-button-group__actions {
|
|
92
|
+
justify-content: center;
|
|
93
|
+
padding: 0;
|
|
94
|
+
gap: 1rem;
|
|
63
95
|
}
|
|
64
96
|
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
/* Placeholder/hydration styles for the IIIF Image component */
|
|
2
|
+
.canopy-iiif-image {
|
|
3
|
+
--canopy-iiif-image-height: 600px;
|
|
4
|
+
--canopy-iiif-image-bg: var(--color-gray-200);
|
|
5
|
+
|
|
6
|
+
display: block;
|
|
7
|
+
margin: 1.618rem 0 2.618rem;
|
|
8
|
+
|
|
9
|
+
&__placeholder {
|
|
10
|
+
position: relative;
|
|
11
|
+
width: 100%;
|
|
12
|
+
height: var(--canopy-iiif-image-height);
|
|
13
|
+
background-color: var(--canopy-iiif-image-bg);
|
|
14
|
+
border-radius: 0.5rem;
|
|
15
|
+
overflow: hidden;
|
|
16
|
+
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
&__placeholder > script {
|
|
20
|
+
display: none;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
&__caption {
|
|
24
|
+
margin: 0.75rem 0 0;
|
|
25
|
+
color: var(--color-gray-600);
|
|
26
|
+
font-size: 0.875rem;
|
|
27
|
+
line-height: 1.4;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@use "./image";
|
package/ui/styles/index.css
CHANGED
|
@@ -72,6 +72,9 @@
|
|
|
72
72
|
}
|
|
73
73
|
}
|
|
74
74
|
/* canopy-theme:end */
|
|
75
|
+
/**
|
|
76
|
+
* Main stylesheet for the @canopy-iiif/app/ui package
|
|
77
|
+
*/
|
|
75
78
|
@layer base {
|
|
76
79
|
body {
|
|
77
80
|
margin: 0;
|
|
@@ -182,8 +185,8 @@
|
|
|
182
185
|
gap: 0.35rem;
|
|
183
186
|
padding: 0.55rem 1.4rem;
|
|
184
187
|
border-radius: 9999px;
|
|
185
|
-
font-size: 0.
|
|
186
|
-
font-weight:
|
|
188
|
+
font-size: 0.9222rem;
|
|
189
|
+
font-weight: 300;
|
|
187
190
|
text-decoration: none;
|
|
188
191
|
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
|
|
189
192
|
}
|
|
@@ -197,7 +200,7 @@
|
|
|
197
200
|
color: var(--color-gray-50);
|
|
198
201
|
}
|
|
199
202
|
.canopy-button--secondary {
|
|
200
|
-
border: 1px solid color-mix(in srgb, var(--color-gray-
|
|
203
|
+
border: 1px solid color-mix(in srgb, var(--color-gray-300) 60%, transparent);
|
|
201
204
|
color: color-mix(in srgb, var(--color-gray-900) 92%, transparent);
|
|
202
205
|
background-color: var(--color-gray-50);
|
|
203
206
|
}
|
|
@@ -207,11 +210,39 @@
|
|
|
207
210
|
color: var(--color-brand-700);
|
|
208
211
|
}
|
|
209
212
|
.canopy-button-group {
|
|
213
|
+
display: flex;
|
|
214
|
+
flex-direction: column;
|
|
215
|
+
align-items: flex-start;
|
|
216
|
+
gap: 0.5rem;
|
|
217
|
+
}
|
|
218
|
+
.canopy-button-group__text {
|
|
219
|
+
font-size: 1.38rem;
|
|
220
|
+
font-weight: 600;
|
|
221
|
+
color: var(--color-gray-900);
|
|
222
|
+
margin-bottom: 1rem;
|
|
223
|
+
letter-spacing: -0.0125em;
|
|
224
|
+
}
|
|
225
|
+
.canopy-button-group__actions {
|
|
210
226
|
display: flex;
|
|
211
227
|
flex-wrap: wrap;
|
|
212
228
|
align-items: center;
|
|
213
229
|
gap: 0.75rem;
|
|
214
230
|
padding: 1rem 0;
|
|
231
|
+
width: 100%;
|
|
232
|
+
}
|
|
233
|
+
.canopy-button-group--interstitial {
|
|
234
|
+
width: 100%;
|
|
235
|
+
align-items: center;
|
|
236
|
+
text-align: center;
|
|
237
|
+
padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 4vw, 4rem);
|
|
238
|
+
margin: 2rem 0;
|
|
239
|
+
border-radius: 1.25rem;
|
|
240
|
+
background: linear-gradient(173deg, transparent 0%, var(--color-brand-200) 100%);
|
|
241
|
+
}
|
|
242
|
+
.canopy-button-group--interstitial .canopy-button-group__actions {
|
|
243
|
+
justify-content: center;
|
|
244
|
+
padding: 0;
|
|
245
|
+
gap: 1rem;
|
|
215
246
|
}
|
|
216
247
|
}
|
|
217
248
|
/* Canopy Card component styles */
|
|
@@ -1044,6 +1075,32 @@
|
|
|
1044
1075
|
padding-inline: 4rem;
|
|
1045
1076
|
}
|
|
1046
1077
|
}
|
|
1078
|
+
/* Placeholder/hydration styles for the IIIF Image component */
|
|
1079
|
+
.canopy-iiif-image {
|
|
1080
|
+
--canopy-iiif-image-height: 600px;
|
|
1081
|
+
--canopy-iiif-image-bg: var(--color-gray-200);
|
|
1082
|
+
display: block;
|
|
1083
|
+
margin: 1.618rem 0 2.618rem;
|
|
1084
|
+
}
|
|
1085
|
+
.canopy-iiif-image__placeholder {
|
|
1086
|
+
position: relative;
|
|
1087
|
+
width: 100%;
|
|
1088
|
+
height: var(--canopy-iiif-image-height);
|
|
1089
|
+
background-color: var(--canopy-iiif-image-bg);
|
|
1090
|
+
border-radius: 0.5rem;
|
|
1091
|
+
overflow: hidden;
|
|
1092
|
+
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
|
|
1093
|
+
}
|
|
1094
|
+
.canopy-iiif-image__placeholder > script {
|
|
1095
|
+
display: none;
|
|
1096
|
+
}
|
|
1097
|
+
.canopy-iiif-image__caption {
|
|
1098
|
+
margin: 0.75rem 0 0;
|
|
1099
|
+
color: var(--color-gray-600);
|
|
1100
|
+
font-size: 0.875rem;
|
|
1101
|
+
line-height: 1.4;
|
|
1102
|
+
}
|
|
1103
|
+
|
|
1047
1104
|
.canopy-search-form-shell {
|
|
1048
1105
|
--search-form-label-padding-x: 0.75rem;
|
|
1049
1106
|
--search-form-label-padding-y: 0.625rem;
|
|
@@ -1183,7 +1240,7 @@
|
|
|
1183
1240
|
border: 0;
|
|
1184
1241
|
background: var(--color-brand-default);
|
|
1185
1242
|
color: #fff;
|
|
1186
|
-
font-weight:
|
|
1243
|
+
font-weight: 300;
|
|
1187
1244
|
font-size: 1rem;
|
|
1188
1245
|
padding: 0.382rem 0.618rem;
|
|
1189
1246
|
transition: background-color var(--duration-fast) var(--easing-standard), transform var(--duration-fast) var(--easing-standard);
|
|
@@ -1651,4 +1708,9 @@
|
|
|
1651
1708
|
|
|
1652
1709
|
.canopy-content-navigation--collapsed .canopy-sub-navigation__list {
|
|
1653
1710
|
display: none;
|
|
1654
|
-
}
|
|
1711
|
+
}
|
|
1712
|
+
|
|
1713
|
+
/**
|
|
1714
|
+
* Define source files for utility classes
|
|
1715
|
+
*/
|
|
1716
|
+
@source "../dist";
|