@canopy-iiif/app 1.9.7 → 1.9.9

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.
@@ -95,4 +95,5 @@
95
95
  padding: 0;
96
96
  gap: 1rem;
97
97
  }
98
+
98
99
  }
@@ -6,7 +6,7 @@
6
6
  position: relative;
7
7
  display: flex;
8
8
  align-items: center;
9
- gap: 1.618rem;
9
+ gap: 0.618rem;
10
10
  padding: 1rem 1.618rem;
11
11
  z-index: 1;
12
12
  }
@@ -15,10 +15,16 @@
15
15
  display: flex;
16
16
  align-items: center;
17
17
  gap: 0.75rem;
18
- flex: 0 0 auto;
18
+ flex: 0 1 auto;
19
19
  min-width: 0;
20
20
  }
21
21
 
22
+ .canopy-header__brand-link {
23
+ flex: 1 1 auto;
24
+ min-width: 0;
25
+ max-width: 100%;
26
+ }
27
+
22
28
  .canopy-header__menu {
23
29
  @include buttons.canopy-button-base(0.25rem, 0.75rem);
24
30
  width: 2.5rem;
@@ -57,7 +63,6 @@
57
63
  .canopy-header__actions {
58
64
  display: flex;
59
65
  align-items: center;
60
- gap: 0.5rem;
61
66
  margin-left: auto;
62
67
  flex: 0 0 auto;
63
68
  }
@@ -6,6 +6,8 @@
6
6
  font-size: 1.382rem;
7
7
  color: var(--color-gray-default) !important;
8
8
  line-height: 1;
9
+ min-width: 0;
10
+ max-width: 100%;
9
11
 
10
12
  &:hover {
11
13
  text-decoration: none;
@@ -14,6 +16,7 @@
14
16
  svg {
15
17
  height: 1.65rem;
16
18
  display: block;
19
+ flex: 0 0 auto;
17
20
 
18
21
  circle.canopy-logo-backlight {
19
22
  fill: var(--color-accent-900);
@@ -25,6 +28,18 @@
25
28
  color: var(--color-accent-default);
26
29
  }
27
30
  }
31
+
32
+ span {
33
+ display: block;
34
+ min-width: 0;
35
+ max-width: 100%;
36
+ white-space: nowrap;
37
+ overflow: hidden;
38
+ text-overflow: ellipsis;
39
+
40
+ height: 3rem;
41
+ line-height: 3rem;
42
+ }
28
43
  }
29
44
 
30
45
  html.dark .canopy-logo {
@@ -44,11 +44,20 @@
44
44
  align-items: center;
45
45
  gap: 0.75rem;
46
46
  margin-bottom: 1.25rem;
47
+ min-width: 0;
48
+ padding-right: 3rem;
47
49
  }
48
50
 
49
51
  .canopy-modal__brand .canopy-logo {
50
52
  font-size: 1.35rem;
51
53
  line-height: 1;
54
+ max-width: 100%;
55
+ }
56
+
57
+ .canopy-modal__brand-link {
58
+ flex: 1 1 auto;
59
+ min-width: 0;
60
+ max-width: 100%;
52
61
  }
53
62
 
54
63
  .canopy-modal__title {
@@ -67,6 +76,11 @@
67
76
  height: 2.5rem;
68
77
  color: var(--color-accent-900);
69
78
  border: none;
79
+ background: linear-gradient(
80
+ 90deg,
81
+ rgba(255, 255, 255, 0) 0%,
82
+ var(--color-gray-50) 60%
83
+ );
70
84
 
71
85
  svg path {
72
86
  stroke-width: 2.618px;
@@ -1,9 +1,17 @@
1
1
  @use "../buttons" as buttons;
2
2
 
3
3
  @layer components {
4
+ .canopy-modal--filters {
5
+ align-items: stretch;
6
+ justify-content: stretch;
7
+ padding: 0;
8
+ }
9
+
4
10
  .canopy-modal--filters .canopy-modal__panel {
5
11
  width: min(100%, 48rem);
6
- max-height: min(90vh, 720px);
12
+ height: 100%;
13
+ max-height: none;
14
+ margin: 0;
7
15
  }
8
16
 
9
17
  .canopy-modal--filters .canopy-modal__body--filters {
@@ -34,3 +34,14 @@
34
34
  transition-property: transform, width, opacity;
35
35
  transition-timing-function: ease-out;
36
36
  }
37
+
38
+ .canopy-search-tabs__filters-button {
39
+ display: inline-flex;
40
+ align-items: center;
41
+ gap: 0.35rem;
42
+ }
43
+
44
+ .canopy-search-tabs__filters-count {
45
+ font-weight: 500;
46
+ opacity: 0.8;
47
+ }
@@ -735,7 +735,7 @@ section[data-footnotes] ul li,
735
735
  position: relative;
736
736
  display: flex;
737
737
  align-items: center;
738
- gap: 1.618rem;
738
+ gap: 0.618rem;
739
739
  padding: 1rem 1.618rem;
740
740
  z-index: 1;
741
741
  }
@@ -743,9 +743,14 @@ section[data-footnotes] ul li,
743
743
  display: flex;
744
744
  align-items: center;
745
745
  gap: 0.75rem;
746
- flex: 0 0 auto;
746
+ flex: 0 1 auto;
747
747
  min-width: 0;
748
748
  }
749
+ .canopy-header__brand-link {
750
+ flex: 1 1 auto;
751
+ min-width: 0;
752
+ max-width: 100%;
753
+ }
749
754
  .canopy-header__menu {
750
755
  display: inline-flex;
751
756
  align-items: center;
@@ -789,7 +794,6 @@ section[data-footnotes] ul li,
789
794
  .canopy-header__actions {
790
795
  display: flex;
791
796
  align-items: center;
792
- gap: 0.5rem;
793
797
  margin-left: auto;
794
798
  flex: 0 0 auto;
795
799
  }
@@ -977,6 +981,8 @@ section[data-footnotes] ul li,
977
981
  font-size: 1.382rem;
978
982
  color: var(--color-gray-default) !important;
979
983
  line-height: 1;
984
+ min-width: 0;
985
+ max-width: 100%;
980
986
  }
981
987
  .canopy-logo:hover {
982
988
  text-decoration: none;
@@ -984,6 +990,7 @@ section[data-footnotes] ul li,
984
990
  .canopy-logo svg {
985
991
  height: 1.65rem;
986
992
  display: block;
993
+ flex: 0 0 auto;
987
994
  }
988
995
  .canopy-logo svg circle.canopy-logo-backlight {
989
996
  fill: var(--color-accent-900);
@@ -993,6 +1000,16 @@ section[data-footnotes] ul li,
993
1000
  fill: var(--color-accent-default);
994
1001
  color: var(--color-accent-default);
995
1002
  }
1003
+ .canopy-logo span {
1004
+ display: block;
1005
+ min-width: 0;
1006
+ max-width: 100%;
1007
+ white-space: nowrap;
1008
+ overflow: hidden;
1009
+ text-overflow: ellipsis;
1010
+ height: 3rem;
1011
+ line-height: 3rem;
1012
+ }
996
1013
  html.dark .canopy-logo svg circle.canopy-logo-backlight {
997
1014
  fill: var(--color-accent-200) !important;
998
1015
  color: var(--color-accent-200) !important;
@@ -1183,10 +1200,18 @@ section[data-footnotes] ul li,
1183
1200
  align-items: center;
1184
1201
  gap: 0.75rem;
1185
1202
  margin-bottom: 1.25rem;
1203
+ min-width: 0;
1204
+ padding-right: 3rem;
1186
1205
  }
1187
1206
  .canopy-modal__brand .canopy-logo {
1188
1207
  font-size: 1.35rem;
1189
1208
  line-height: 1;
1209
+ max-width: 100%;
1210
+ }
1211
+ .canopy-modal__brand-link {
1212
+ flex: 1 1 auto;
1213
+ min-width: 0;
1214
+ max-width: 100%;
1190
1215
  }
1191
1216
  .canopy-modal__title {
1192
1217
  margin: 0 0 1rem;
@@ -1214,6 +1239,7 @@ section[data-footnotes] ul li,
1214
1239
  height: 2.5rem;
1215
1240
  color: var(--color-accent-900);
1216
1241
  border: none;
1242
+ background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--color-gray-50) 60%);
1217
1243
  }
1218
1244
  .canopy-modal__close svg path {
1219
1245
  stroke-width: 2.618px;
@@ -2169,9 +2195,16 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
2169
2195
  }
2170
2196
 
2171
2197
  @layer components {
2198
+ .canopy-modal--filters {
2199
+ align-items: stretch;
2200
+ justify-content: stretch;
2201
+ padding: 0;
2202
+ }
2172
2203
  .canopy-modal--filters .canopy-modal__panel {
2173
2204
  width: min(100%, 48rem);
2174
- max-height: min(90vh, 720px);
2205
+ height: 100%;
2206
+ max-height: none;
2207
+ margin: 0;
2175
2208
  }
2176
2209
  .canopy-modal--filters .canopy-modal__body--filters {
2177
2210
  display: flex;
@@ -2409,6 +2442,17 @@ html.dark .clover-iiif-image-openseadragon .clover-iiif-image-openseadragon-anno
2409
2442
  transition-timing-function: ease-out;
2410
2443
  }
2411
2444
 
2445
+ .canopy-search-tabs__filters-button {
2446
+ display: inline-flex;
2447
+ align-items: center;
2448
+ gap: 0.35rem;
2449
+ }
2450
+
2451
+ .canopy-search-tabs__filters-count {
2452
+ font-weight: 500;
2453
+ opacity: 0.8;
2454
+ }
2455
+
2412
2456
  .canopy-search-teaser.is-empty {
2413
2457
  display: none;
2414
2458
  }