henry-search 1.0.20 → 1.0.21
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/dist/HenrySearch.css +1 -1
- package/dist/HenrySearch.js +4100 -4096
- package/dist/HenrySearch.umd.cjs +29 -29
- package/package.json +1 -1
- package/src/components/EventLinks.vue +11 -10
- package/src/components/Search.vue +9 -6
- package/src/components/SearchDetail.vue +5 -4
- package/src/components/SearchTab.vue +40 -29
- package/src/styles/atoms/eventLinks/index.scss +40 -23
- package/src/styles/config/index.scss +1 -0
- package/src/styles/molecules/currentRefinements/index.scss +5 -1
- package/src/styles/molecules/dateRange/index.scss +4 -0
- package/src/styles/molecules/headerLinks/index.scss +2 -2
- package/src/styles/molecules/resultActions/index.scss +16 -6
- package/src/styles/molecules/searchBox/index.scss +7 -2
- package/src/styles/organisms/filters/index.scss +29 -5
- package/src/styles/organisms/performanceGrid/index.scss +4 -0
- package/src/styles/organisms/resultsGrid/index.scss +5 -1
- package/src/styles/templates/eventsSearch/index.scss +11 -6
package/package.json
CHANGED
|
@@ -64,28 +64,29 @@ const showAudioLinks = (event) => {
|
|
|
64
64
|
<template v-else>
|
|
65
65
|
<div :class="`eventLinks ${ props.extraClasses }`">
|
|
66
66
|
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
67
|
-
<circle cx="9" cy="9" r="
|
|
68
|
-
<path d="M5 9H13" stroke
|
|
69
|
-
<path d="M9 5L13 9L9 13" stroke
|
|
67
|
+
<circle cx="9" cy="9" r="8.5" />
|
|
68
|
+
<path d="M5 9H13" stroke-width="1.5"/>
|
|
69
|
+
<path d="M9 5L13 9L9 13" stroke-width="1.5"/>
|
|
70
70
|
</svg>
|
|
71
71
|
<a class="eventLinks__details" :href="`/details?performanceId=${props.item.id}`" :title="formatDate(item.performance_date) + ' Details'">Details</a>
|
|
72
72
|
</div>
|
|
73
73
|
<div v-if="props.item.program_book_link" :class="`eventLinks ${ props.extraClasses }`">
|
|
74
74
|
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
75
|
-
<circle cx="9" cy="9" r="
|
|
76
|
-
<path d="M6.22876 12.
|
|
77
|
-
<path d="M6.22864 6.
|
|
75
|
+
<circle cx="9" cy="9" r="9" />
|
|
76
|
+
<path d="M6.22876 12.0714L11.8854 6.41475" stroke-width="1.5"/>
|
|
77
|
+
<path d="M6.22864 6.41376L11.8854 6.41388L11.8855 12.0706" stroke-width="1.5"/>
|
|
78
78
|
</svg>
|
|
79
|
+
|
|
79
80
|
<a class="eventLinks__details" target="_blank" :href="props.item.program_book_link" :title="formatDate(item.performance_date) + ' Details'">Program</a>
|
|
80
81
|
</div>
|
|
81
82
|
<div v-if="props.item.media && props.item.media.includes('audio') && props.item.bso_audio_id" :class="`eventLinks ${ props.extraClasses }`">
|
|
82
83
|
<button class="eventLinks__details" @click="showAudioLinks" :title="formatDate(item.performance_date) + ' Audio'">
|
|
83
84
|
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
84
|
-
<circle cx="9" cy="9" r="
|
|
85
|
-
<path d="M9.81086 5L6.92983 7.30483H4.625V10.7621H6.92983L9.81086 13.0669V5Z"
|
|
86
|
-
<path d="M12.4268 6.99219C12.9669 7.53246 13.2703 8.26513 13.2703 9.02908C13.2703 9.79302 12.9669 10.5257 12.4268 11.066"
|
|
87
|
-
<path d="M12.4268 6.99219C12.9669 7.53246 13.2703 8.26513 13.2703 9.02908C13.2703 9.79302 12.9669 10.5257 12.4268 11.066" stroke="#01ABE6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
85
|
+
<circle cx="9" cy="9" r="9" />
|
|
86
|
+
<path d="M9.81086 5L6.92983 7.30483H4.625V10.7621H6.92983L9.81086 13.0669V5Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
87
|
+
<path d="M12.4268 6.99219C12.9669 7.53246 13.2703 8.26513 13.2703 9.02908C13.2703 9.79302 12.9669 10.5257 12.4268 11.066" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
88
88
|
</svg>
|
|
89
|
+
|
|
89
90
|
Audio
|
|
90
91
|
</button>
|
|
91
92
|
<audio-links :audio-id="props.item.bso_audio_id" />
|
|
@@ -206,9 +206,10 @@
|
|
|
206
206
|
{{ w?.composers?.join("; ") }} / {{ w?.title }}
|
|
207
207
|
<div v-if="w.has_recording" class="toolTip">
|
|
208
208
|
<a :href="`/details?performanceId=${item.id}`">
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
209
|
+
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" class="resultsGrid__icon">
|
|
210
|
+
<circle cx="9" cy="9" r="9" fill="#14284E"/>
|
|
211
|
+
<path d="M9.81086 5L6.92983 7.30483H4.625V10.7621H6.92983L9.81086 13.0669V5Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
212
|
+
<path d="M12.4268 6.99219C12.9669 7.53246 13.2703 8.26513 13.2703 9.02908C13.2703 9.79302 12.9669 10.5257 12.4268 11.066" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
212
213
|
</svg>
|
|
213
214
|
</a>
|
|
214
215
|
<span class="toolTip__text">Access Audio</span>
|
|
@@ -247,10 +248,12 @@
|
|
|
247
248
|
{{ w?.composers?.join("; ") }} / {{ w?.title }}
|
|
248
249
|
<div v-if="w.has_recording" class="toolTip">
|
|
249
250
|
<a :href="`/details?performanceId=${item.id}`">
|
|
250
|
-
<svg width="18" height="18" viewBox="0 0
|
|
251
|
-
|
|
252
|
-
|
|
251
|
+
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" class="resultsGrid__icon">
|
|
252
|
+
<circle cx="9" cy="9" r="9" fill="#14284E"/>
|
|
253
|
+
<path d="M9.81086 5L6.92983 7.30483H4.625V10.7621H6.92983L9.81086 13.0669V5Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
254
|
+
<path d="M12.4268 6.99219C12.9669 7.53246 13.2703 8.26513 13.2703 9.02908C13.2703 9.79302 12.9669 10.5257 12.4268 11.066" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
253
255
|
</svg>
|
|
256
|
+
|
|
254
257
|
</a>
|
|
255
258
|
<span class="toolTip__text">Access Audio</span>
|
|
256
259
|
</div>
|
|
@@ -181,10 +181,11 @@ const createURL = (facet, value) => {
|
|
|
181
181
|
<div class="performanceGrid__workItem">
|
|
182
182
|
<span class="performanceGrid__infoItem">
|
|
183
183
|
<a :href="createURL('works.title', work.title)">{{ work.title }}</a>
|
|
184
|
-
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"
|
|
185
|
-
<
|
|
186
|
-
<path d="
|
|
187
|
-
|
|
184
|
+
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" v-if="work.has_recording">
|
|
185
|
+
<circle cx="9" cy="9" r="9" />
|
|
186
|
+
<path d="M9.81086 5L6.92983 7.30483H4.625V10.7621H6.92983L9.81086 13.0669V5Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
187
|
+
<path d="M12.4268 6.99219C12.9669 7.53246 13.2703 8.26513 13.2703 9.02908C13.2703 9.79302 12.9669 10.5257 12.4268 11.066" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
188
|
+
</svg>
|
|
188
189
|
</span>
|
|
189
190
|
<span v-if="work.premiere" class="performanceGrid__infoItem -small">Work Premiere:<br/>
|
|
190
191
|
<a :href="createURL('works.premiere', work.premier)">{{ work.premiere }}</a>
|
|
@@ -156,6 +156,7 @@
|
|
|
156
156
|
const wrapper = document.getElementById(`${props.indexName}_filterRail`)
|
|
157
157
|
const leftPane = document.getElementById(`${props.indexName}_eventsSearch__results`)
|
|
158
158
|
const containers = document.querySelectorAll('.container')
|
|
159
|
+
const otherHiddenEls = document.querySelectorAll('.mobileHide')
|
|
159
160
|
wrapper.classList.toggle('openMobile')
|
|
160
161
|
leftPane.classList.toggle('openMobile')
|
|
161
162
|
containers.forEach((el) => {
|
|
@@ -165,6 +166,14 @@
|
|
|
165
166
|
el.style.display = "grid"
|
|
166
167
|
}
|
|
167
168
|
|
|
169
|
+
})
|
|
170
|
+
otherHiddenEls.forEach((el) => {
|
|
171
|
+
if (el.style.display != "none") {
|
|
172
|
+
el.style.display = "none"
|
|
173
|
+
} else {
|
|
174
|
+
el.style.display = "grid"
|
|
175
|
+
}
|
|
176
|
+
|
|
168
177
|
})
|
|
169
178
|
const detailsEls = document.querySelectorAll('details')
|
|
170
179
|
detailsEls.forEach((el) => {
|
|
@@ -532,9 +541,9 @@
|
|
|
532
541
|
</div>
|
|
533
542
|
<div class="filters__button">
|
|
534
543
|
<button class="button info">
|
|
535
|
-
<svg width="
|
|
536
|
-
<path d="M6.00037 11.2504C8.90007 11.2504 11.2507 8.89978 11.2507 6.00018C11.2507 3.10059 8.90007 0.75 6.00037 0.75C3.10067 0.75 0.75 3.10059 0.75 6.00018C0.75 8.89978 3.10067 11.2504 6.00037 11.2504Z" stroke
|
|
537
|
-
<path d="M9.7124 9.71265L12.7502 12.7503" stroke
|
|
544
|
+
<svg width="32" height="32" viewBox="-9 -9 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" class="mobileSearch">
|
|
545
|
+
<path d="M6.00037 11.2504C8.90007 11.2504 11.2507 8.89978 11.2507 6.00018C11.2507 3.10059 8.90007 0.75 6.00037 0.75C3.10067 0.75 0.75 3.10059 0.75 6.00018C0.75 8.89978 3.10067 11.2504 6.00037 11.2504Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
|
|
546
|
+
<path d="M9.7124 9.71265L12.7502 12.7503" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
|
|
538
547
|
</svg>
|
|
539
548
|
<span class="filters__searchButton">Search</span>
|
|
540
549
|
</button>
|
|
@@ -550,13 +559,13 @@
|
|
|
550
559
|
<div class="filters__header">
|
|
551
560
|
<div class="filters__toggle">
|
|
552
561
|
<svg width="24" height="24" viewBox="0 0 24 24" class="filters__icon">
|
|
553
|
-
<rect width="24" height="24" rx="4"
|
|
554
|
-
<path d="M6 7.25H18.8864" stroke
|
|
555
|
-
<path d="M6 12.5681H18.8864" stroke
|
|
556
|
-
<path d="M6 17.75H18.8864"
|
|
557
|
-
<circle cx="8.72709" cy="17.9544" r="1.54545"
|
|
558
|
-
<circle cx="14.8633" cy="12.5" r="1.54545"
|
|
559
|
-
<circle cx="10.7725" cy="7.04545" r="1.54545"
|
|
562
|
+
<rect width="24" height="24" rx="4" />
|
|
563
|
+
<path d="M6 7.25H18.8864" stroke-linecap="round"/>
|
|
564
|
+
<path d="M6 12.5681H18.8864" stroke-linecap="round"/>
|
|
565
|
+
<path d="M6 17.75H18.8864" stroke-linecap="round"/>
|
|
566
|
+
<circle cx="8.72709" cy="17.9544" r="1.54545" />
|
|
567
|
+
<circle cx="14.8633" cy="12.5" r="1.54545" />
|
|
568
|
+
<circle cx="10.7725" cy="7.04545" r="1.54545" />
|
|
560
569
|
</svg>
|
|
561
570
|
<span class="label">Filters</span>
|
|
562
571
|
</div>
|
|
@@ -737,7 +746,7 @@
|
|
|
737
746
|
<div class="filters__toggle">
|
|
738
747
|
<button class="filterButton" @click="toggleFiltersMobile()">
|
|
739
748
|
<svg width="24" height="24" viewBox="0 0 24 24" >
|
|
740
|
-
<rect width="24" height="24" rx="4"
|
|
749
|
+
<rect width="24" height="24" rx="4"/>
|
|
741
750
|
<path d="M6 7.25H18.8864" stroke="white" stroke-linecap="round"/>
|
|
742
751
|
<path d="M6 12.5681H18.8864" stroke="white" stroke-linecap="round"/>
|
|
743
752
|
<path d="M6 17.75H18.8864" stroke="white" stroke-linecap="round"/>
|
|
@@ -757,15 +766,15 @@
|
|
|
757
766
|
</div>
|
|
758
767
|
</div>
|
|
759
768
|
<div class="eventsSearch__resultsHeader">
|
|
760
|
-
<div class="eventsSearch__resultsTitle" id="resultsTitle">
|
|
769
|
+
<div class="eventsSearch__resultsTitle -title" id="resultsTitle">
|
|
761
770
|
<svg width="24" height="24" viewBox="0 0 24 24" :id="`${props.indexName}_filterToggleOn`" :class="`filters__toggleOn ${filtersClosed ? 'closed' : ''}`" @click="toggleFilters()">
|
|
762
|
-
<rect width="24" height="24" rx="4"
|
|
763
|
-
<path d="M6 7.25H18.8864" stroke
|
|
764
|
-
<path d="M6 12.5681H18.8864" stroke
|
|
765
|
-
<path d="M6 17.75H18.8864"
|
|
766
|
-
<circle cx="8.72709" cy="17.9544" r="1.54545"
|
|
767
|
-
<circle cx="14.8633" cy="12.5" r="1.54545"
|
|
768
|
-
<circle cx="10.7725" cy="7.04545" r="1.54545"
|
|
771
|
+
<rect width="24" height="24" rx="4" />
|
|
772
|
+
<path d="M6 7.25H18.8864" stroke-linecap="round"/>
|
|
773
|
+
<path d="M6 12.5681H18.8864" stroke-linecap="round"/>
|
|
774
|
+
<path d="M6 17.75H18.8864" stroke-linecap="round"/>
|
|
775
|
+
<circle cx="8.72709" cy="17.9544" r="1.54545" />
|
|
776
|
+
<circle cx="14.8633" cy="12.5" r="1.54545" />
|
|
777
|
+
<circle cx="10.7725" cy="7.04545" r="1.54545" />
|
|
769
778
|
</svg>
|
|
770
779
|
<h2 v-if="showNumHits">
|
|
771
780
|
<ais-stats>
|
|
@@ -788,22 +797,24 @@
|
|
|
788
797
|
</div>
|
|
789
798
|
<div v-if="showNumHits" class="resultActions__buttons">
|
|
790
799
|
<div class="toolTip">
|
|
791
|
-
<a onclick="navigator.clipboard.writeText(window.location.href);"
|
|
792
|
-
<svg width="
|
|
793
|
-
<
|
|
794
|
-
<path d="
|
|
800
|
+
<a onclick="navigator.clipboard.writeText(window.location.href);">
|
|
801
|
+
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="resultActions__icon" outline="black">
|
|
802
|
+
<!-- <circle cx="12" cy="12" stroke="none" r="12"/> -->
|
|
803
|
+
<path d="M11.3334 12.5068C11.5012 12.7435 11.7153 12.9393 11.9611 13.081C12.2069 13.2227 12.4788 13.307 12.7582 13.3281C13.0376 13.3492 13.3181 13.3066 13.5806 13.2034C13.8431 13.1001 14.0814 12.9384 14.2795 12.7294L15.4516 11.4928C15.8075 11.1041 16.0044 10.5835 16 10.0431C15.9955 9.50271 15.7901 8.98578 15.4278 8.60365C15.0656 8.22153 14.5756 8.00477 14.0634 8.00008C13.5511 7.99538 13.0577 8.20312 12.6892 8.57855L12.0171 9.28341" stroke-linecap="round" stroke-linejoin="round"/>
|
|
804
|
+
<path d="M13.3333 11.4932C13.1416 11.2565 12.8969 11.0607 12.6159 10.919C12.335 10.7773 12.0243 10.6931 11.7049 10.672C11.3856 10.6508 11.0651 10.6934 10.7651 10.7967C10.4651 10.9 10.1927 11.0616 9.96639 11.2706L8.62675 12.5072C8.22004 12.8959 7.995 13.4165 8.00008 13.9569C8.00517 14.4973 8.23998 15.0142 8.65395 15.3964C9.06791 15.7785 9.62791 15.9952 10.2133 15.9999C10.7987 16.0046 11.3627 15.7969 11.7838 15.4215L12.5474 14.7166" stroke-linecap="round" stroke-linejoin="round"/>
|
|
795
805
|
</svg>
|
|
796
|
-
|
|
797
806
|
</a>
|
|
798
807
|
<span class="toolTip__text">Copy Link</span>
|
|
799
808
|
</div>
|
|
800
809
|
<div class="toolTip">
|
|
801
|
-
<a :href="`/actions/csvexport/csv-export${ routing.router.getLocation().search }`"
|
|
802
|
-
<svg width="
|
|
803
|
-
<
|
|
804
|
-
<path d="
|
|
805
|
-
<path d="
|
|
810
|
+
<a :href="`/actions/csvexport/csv-export${ routing.router.getLocation().search }`" >
|
|
811
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="resultActions__icon">
|
|
812
|
+
<!-- <circle cx="12" cy="12" r="12" stroke="none "/> -->
|
|
813
|
+
<path d="M15.9785 17.41L9.00049 17.41" stroke-linecap="round" stroke-linejoin="round"/>
|
|
814
|
+
<path d="M9.25317 11.4406L12.425 14.6124L15.5969 11.4406" stroke-linecap="round" stroke-linejoin="round"/>
|
|
815
|
+
<path d="M12.425 14.6124V7" stroke-linecap="round" stroke-linejoin="round"/>
|
|
806
816
|
</svg>
|
|
817
|
+
|
|
807
818
|
</a>
|
|
808
819
|
<span class="toolTip__text">Export CSV</span>
|
|
809
820
|
</div>
|
|
@@ -2,29 +2,46 @@
|
|
|
2
2
|
|
|
3
3
|
.eventLinks
|
|
4
4
|
{
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
}
|
|
11
|
-
}
|
|
12
|
-
a.eventLinks__details,
|
|
13
|
-
button,
|
|
14
|
-
&__details {
|
|
15
|
-
display: flex;
|
|
16
|
-
background-color: inherit;
|
|
17
|
-
padding: 0 0.5rem 0 0.25rem;
|
|
18
|
-
border: none;
|
|
19
|
-
color: var(--color-turquoise);
|
|
20
|
-
font-weight: bold;
|
|
5
|
+
display: flex;
|
|
6
|
+
gap: 0.1rem;
|
|
7
|
+
&.-detailsMobile {
|
|
8
|
+
@include at(lg) {
|
|
9
|
+
display: none;
|
|
21
10
|
}
|
|
22
|
-
button.eventLinks__details {
|
|
23
|
-
display: flex;
|
|
24
|
-
gap: .35rem;
|
|
25
|
-
align-items: flex-start;
|
|
26
|
-
text-align: left;
|
|
27
|
-
padding-left: 0;
|
|
28
|
-
padding-top: 0.1rem;
|
|
29
11
|
}
|
|
12
|
+
a.eventLinks__details,
|
|
13
|
+
button,
|
|
14
|
+
&__details {
|
|
15
|
+
display: flex;
|
|
16
|
+
background-color: inherit;
|
|
17
|
+
padding: 0 0.5rem 0 0.25rem;
|
|
18
|
+
border: none;
|
|
19
|
+
color: var(--color-dark-blue);
|
|
20
|
+
font-weight: bold;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
// button:hover {
|
|
24
|
+
// background-color: var(--color-dark-blue);
|
|
25
|
+
// }
|
|
26
|
+
button.eventLinks__details {
|
|
27
|
+
display: flex;
|
|
28
|
+
gap: .35rem;
|
|
29
|
+
align-items: flex-start;
|
|
30
|
+
text-align: left;
|
|
31
|
+
padding-left: 0;
|
|
32
|
+
padding-top: 0.1rem;
|
|
33
|
+
}
|
|
34
|
+
svg {
|
|
35
|
+
fill: var(--color-dark-blue);
|
|
36
|
+
stroke: var(--color-white);
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
.eventLinks:hover svg {
|
|
40
|
+
stroke: var(--color-dark-blue);
|
|
41
|
+
outline: var(--color-dark-blue);
|
|
42
|
+
fill: var(--color-white);
|
|
43
|
+
}
|
|
44
|
+
.eventLinks:hover a, .eventLinks:hover button {
|
|
45
|
+
text-decoration: underline;
|
|
46
|
+
fill: none;
|
|
30
47
|
}
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
z-index: 100;
|
|
15
15
|
display: block;
|
|
16
16
|
|
|
17
|
-
@include at(
|
|
17
|
+
@include at(lg) {
|
|
18
18
|
left: 7rem;
|
|
19
19
|
}
|
|
20
20
|
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
margin-bottom: 0;
|
|
30
30
|
flex-wrap: wrap;
|
|
31
31
|
gap: 1rem;
|
|
32
|
-
@include at(
|
|
32
|
+
@include at(lg) {
|
|
33
33
|
gap: 2rem;
|
|
34
34
|
}
|
|
35
35
|
}
|
|
@@ -9,21 +9,31 @@
|
|
|
9
9
|
|
|
10
10
|
&__buttons {
|
|
11
11
|
@include at(lg) {
|
|
12
|
-
display:
|
|
12
|
+
display: flex;
|
|
13
|
+
gap: 0.25rem;
|
|
13
14
|
border-left: thin solid var(--color-gray-200);
|
|
14
15
|
height: 1.75rem;
|
|
15
|
-
padding-left: .
|
|
16
|
+
padding-left: .5rem;
|
|
16
17
|
}
|
|
17
18
|
}
|
|
18
19
|
|
|
19
20
|
&__icon {
|
|
20
|
-
background-color: var(--color-light-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
21
|
+
background-color: var(--color-light-blue);
|
|
22
|
+
border-radius: 15px;
|
|
23
|
+
fill: var(--color-light-blue);
|
|
24
|
+
stroke: var(--color-dark-blue);
|
|
25
|
+
outline: none;
|
|
26
|
+
width: 2rem;
|
|
27
|
+
height: 2rem;
|
|
24
28
|
cursor: pointer;
|
|
25
29
|
}
|
|
26
30
|
|
|
31
|
+
&__icon:hover {
|
|
32
|
+
background-color: var(--color-white);
|
|
33
|
+
border: 1px solid var(--color-dark-blue);
|
|
34
|
+
fill: var(--color-white);
|
|
35
|
+
}
|
|
36
|
+
|
|
27
37
|
&__sort {
|
|
28
38
|
font-weight: 100;
|
|
29
39
|
font-size: 1.1rem;
|
|
@@ -1,10 +1,15 @@
|
|
|
1
|
+
@use "@imarc/pronto/resources/styles/imported" as *;
|
|
2
|
+
|
|
1
3
|
.searchBox {
|
|
2
4
|
border: 1px solid #D7D7D7;
|
|
3
5
|
border-radius: 5px;
|
|
4
6
|
width: 100%;
|
|
5
7
|
background-color: #FDF9F7;
|
|
6
|
-
|
|
7
|
-
|
|
8
|
+
@include at (md) {
|
|
9
|
+
padding: .5rem;
|
|
10
|
+
margin: .5rem .5rem .5rem 0;
|
|
11
|
+
}
|
|
12
|
+
|
|
8
13
|
height: 40px;
|
|
9
14
|
display: flex;
|
|
10
15
|
align-items: center;
|
|
@@ -7,17 +7,24 @@
|
|
|
7
7
|
|
|
8
8
|
&__button {
|
|
9
9
|
justify-self: end;
|
|
10
|
-
@include at(
|
|
11
|
-
|
|
10
|
+
@include at(lg) {
|
|
11
|
+
padding-top: 0.5rem;
|
|
12
|
+
justify-self: stretch;
|
|
12
13
|
}
|
|
13
14
|
|
|
14
15
|
|
|
15
16
|
.mobileSearch {
|
|
16
17
|
display: inline;
|
|
17
|
-
|
|
18
|
-
|
|
18
|
+
width: 2rem;
|
|
19
|
+
height: 2rem;
|
|
20
|
+
stroke: var(--color-dark-blue);
|
|
21
|
+
@include at(lg) {
|
|
22
|
+
display: none;
|
|
19
23
|
}
|
|
20
24
|
}
|
|
25
|
+
.mobileSearch:hover {
|
|
26
|
+
stroke: var(--color-white);
|
|
27
|
+
}
|
|
21
28
|
}
|
|
22
29
|
|
|
23
30
|
&__filterGroup {
|
|
@@ -185,17 +192,25 @@
|
|
|
185
192
|
|
|
186
193
|
&__icon {
|
|
187
194
|
display: none;
|
|
195
|
+
fill: var(--color-dark-blue);
|
|
196
|
+
stroke: var(--color-white);
|
|
188
197
|
@include at(lg) {
|
|
198
|
+
|
|
189
199
|
display:inline;
|
|
190
200
|
}
|
|
191
201
|
}
|
|
202
|
+
&__icon:hover {
|
|
203
|
+
fill: var(--color-white);
|
|
204
|
+
stroke: var(--color-dark-blue);
|
|
205
|
+
outline: var(--color-dark-blue)
|
|
206
|
+
}
|
|
192
207
|
&__search {
|
|
193
208
|
grid-area: search;
|
|
194
209
|
}
|
|
195
210
|
|
|
196
211
|
&__searchButton {
|
|
197
212
|
display: none;
|
|
198
|
-
@include at(
|
|
213
|
+
@include at(lg) {
|
|
199
214
|
display: inline;
|
|
200
215
|
}
|
|
201
216
|
}
|
|
@@ -234,6 +249,9 @@
|
|
|
234
249
|
display: none;
|
|
235
250
|
margin-right: 1rem;
|
|
236
251
|
transition: display 400ms;
|
|
252
|
+
|
|
253
|
+
stroke: var(--color-white);
|
|
254
|
+
fill: var(--color-dark-blue);
|
|
237
255
|
&.closed {
|
|
238
256
|
//display: none;
|
|
239
257
|
@include at(lg) {
|
|
@@ -242,6 +260,12 @@
|
|
|
242
260
|
}
|
|
243
261
|
|
|
244
262
|
}
|
|
263
|
+
|
|
264
|
+
&__toggleOn:hover {
|
|
265
|
+
fill: var(--color-white);
|
|
266
|
+
stroke: var(--color-dark-blue);
|
|
267
|
+
outline: var(--color-dark-blue);
|
|
268
|
+
}
|
|
245
269
|
|
|
246
270
|
&__wrapper {
|
|
247
271
|
overflow: scroll;
|
|
@@ -23,8 +23,8 @@
|
|
|
23
23
|
padding: 0;
|
|
24
24
|
width: 2.5rem;
|
|
25
25
|
height: 100%;
|
|
26
|
-
@include at(
|
|
27
|
-
height:
|
|
26
|
+
@include at(lg) {
|
|
27
|
+
height: 80%;
|
|
28
28
|
width: 100%;
|
|
29
29
|
}
|
|
30
30
|
}
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
// Pagination styles
|
|
39
39
|
&__results {
|
|
40
40
|
grid-column-start: 2;
|
|
41
|
-
padding-top: 0.75rem;
|
|
41
|
+
//padding-top: 0.75rem;
|
|
42
42
|
|
|
43
43
|
@include at(lg) {
|
|
44
44
|
padding-top: 3rem;
|
|
@@ -65,15 +65,15 @@
|
|
|
65
65
|
&__resultsHeader {
|
|
66
66
|
display: flex;
|
|
67
67
|
justify-content: space-between;
|
|
68
|
-
|
|
69
|
-
|
|
68
|
+
|
|
69
|
+
padding: 0 1rem 0;
|
|
70
70
|
@include at(lg) {
|
|
71
71
|
padding: 0;
|
|
72
72
|
border-bottom: none;
|
|
73
73
|
}
|
|
74
74
|
&.-mobile {
|
|
75
75
|
display: flex;
|
|
76
|
-
|
|
76
|
+
border-bottom: thin solid var(--color-gray-200);
|
|
77
77
|
@include at(lg) {
|
|
78
78
|
display: none;
|
|
79
79
|
}
|
|
@@ -98,15 +98,20 @@
|
|
|
98
98
|
font-weight: 100;
|
|
99
99
|
font-size: 1.1rem;
|
|
100
100
|
margin-right: .5rem;
|
|
101
|
+
padding-top: 0.25rem;
|
|
101
102
|
}
|
|
102
103
|
|
|
103
104
|
&__resultsTitle {
|
|
104
105
|
display: flex;
|
|
105
106
|
align-items: baseline;
|
|
107
|
+
padding-top: 1rem;
|
|
106
108
|
//width: 75%;
|
|
107
109
|
h2 {
|
|
108
110
|
margin-bottom: 0.2rem;
|
|
109
111
|
}
|
|
112
|
+
@include at(lg) {
|
|
113
|
+
padding-top: 0;
|
|
114
|
+
}
|
|
110
115
|
}
|
|
111
116
|
|
|
112
117
|
&__search {
|