henry-search 1.0.15 → 1.0.17

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.
@@ -12,6 +12,7 @@
12
12
 
13
13
  .ais-CurrentRefinements--noRefinement {
14
14
  border: none;
15
+ height: 0;
15
16
  }
16
17
 
17
18
  .ais-RefinementList {
@@ -24,7 +24,7 @@
24
24
  align-items: center !important;
25
25
 
26
26
  &::placeholder {
27
- color: #666;
27
+ color: #686F73;
28
28
  }
29
29
 
30
30
  @media screen and (min-width: 1070px) {
@@ -29,6 +29,9 @@
29
29
  font-size: 1.1rem;
30
30
  margin-right: .5rem;
31
31
  display: flex;
32
+ select {
33
+ margin: 0 0 0.2rem 0;
34
+ }
32
35
  //align-items: center;
33
36
  // select {
34
37
  // margin-bottom: 0;
@@ -9,6 +9,12 @@
9
9
  align-items: center;
10
10
  box-sizing: border-box;
11
11
 
12
+ &__form {
13
+ width: 100%;
14
+ display: flex;
15
+ justify-content: space-between;
16
+ }
17
+
12
18
  &.-filter {
13
19
  background-color:#ffffff;
14
20
  }
@@ -37,7 +43,7 @@
37
43
  border: none;
38
44
  outline: none;
39
45
  &::placeholder {
40
- color: var(--color-gray-100);
46
+ color: var(--color-mid-gray);
41
47
  }
42
48
  &.-filter {
43
49
  background-color:#ffffff;
@@ -47,7 +53,7 @@
47
53
  width: 100%;
48
54
  }
49
55
  &.-filter::placeholder {
50
- color: var(--color-gray-100);
56
+ color: var(--color-mid-gray);
51
57
  }
52
58
  }
53
59
 
@@ -66,4 +72,10 @@
66
72
  line-height: 1 !important;
67
73
  vertical-align: middle !important;
68
74
  }
75
+
76
+ .ais-SearchBox-resetIcon {
77
+ width: 16px;
78
+ height: 16px;
79
+
80
+ }
69
81
  }
@@ -3,6 +3,7 @@
3
3
  .filters {
4
4
  flex: 1;
5
5
  min-width: 0;
6
+ width: 100%;
6
7
 
7
8
  &__button {
8
9
  justify-self: end;
@@ -26,14 +27,13 @@
26
27
  &__header {
27
28
  align-items: center;
28
29
  display: flex;
29
- padding-top:0.85rem;
30
30
  width: 100%;
31
31
  justify-content: space-between;
32
32
  }
33
33
 
34
34
  &__filterRail {
35
35
  grid-column-start: 1;
36
- padding-right: 2rem;
36
+ padding-right: 0;
37
37
  padding-top: 3rem;
38
38
  background-color:#ffffff;
39
39
  transition: width 400ms, padding-left 400ms;
@@ -47,7 +47,7 @@
47
47
  width: 28rem;
48
48
  flex-direction: column;
49
49
  gap: 1rem;
50
- padding-left: 8rem;
50
+ padding-left: 6.25rem;
51
51
  }
52
52
 
53
53
  .clearRefinements {
@@ -59,7 +59,7 @@
59
59
  @include at(lg) {
60
60
  --accent-color: var(--link-color, var(--color-turquoise));
61
61
  align-items: center;
62
- color: var(--accent-color);
62
+ color: var(--color-mid-gray);
63
63
  display: inline-flex;
64
64
  gap: 1em;
65
65
  text-decoration: none;
@@ -109,31 +109,41 @@
109
109
  .ais-ClearRefinements {
110
110
  width: 100%;
111
111
  height: 100%;
112
- a {
113
112
  display: grid;
114
113
  grid-template-columns: 1fr 1fr;
115
- gap: 1rem;
116
- justify-content: space-around;
117
- padding: .5rem 2rem 0.5rem 1rem;
118
- width: 100%;
119
- height: 100%;
120
- }
121
- button {
122
- align-self: top;
123
- width: 100%;
124
- }
114
+ align-items: center;
115
+ justify-content: space-between;
125
116
  }
126
- button {
127
- width: 100%;
117
+ a {
118
+ display: inline;
119
+ height: 95%;
120
+ width: 105%;
121
+ padding-top: 0.35rem;
122
+ padding-left: 1rem;
123
+ }
124
+ button.filterApply,
125
+ button.filterClear {
126
+ gap: 1rem;
127
+ justify-content: space-between;
128
+ width: 90%;
128
129
  height: 80%;
129
130
  justify-self: center;
130
131
  border: 0;
131
132
  border-radius: 5px;
132
- &.filterApply {
133
+ padding: 1rem;
134
+
135
+ }
136
+ button.filterClear {
137
+ background-color: var(--color-gray-100);
138
+ border: none;
139
+ height: 90%;
140
+
141
+ }
142
+ button.filterApply {
133
143
  background-color: var(--color-turquoise);
134
144
  color: var(--color-dark-blue);
135
145
  font-weight: 600;
136
- }
146
+ margin-right: 2rem;
137
147
  }
138
148
 
139
149
  }
@@ -148,7 +158,7 @@
148
158
  .location {
149
159
  padding: 0 0.5rem;
150
160
  @include at(lg) {
151
- padding: 0;
161
+ padding: 0;
152
162
  }
153
163
  }
154
164
 
@@ -159,7 +169,7 @@
159
169
  width: 28rem;
160
170
  flex-direction: column;
161
171
  gap: 1rem;
162
- padding-left: 8rem;
172
+ padding-left: 6.25rem;
163
173
  height: auto;
164
174
  padding-right: 2rem;
165
175
  padding-top: 3rem;
@@ -200,7 +210,7 @@
200
210
  "date date button";
201
211
 
202
212
  @include at(lg) {
203
- grid-template-columns: minmax(18rem, 2fr) minmax(24rem, 1fr) 18rem;
213
+ grid-template-columns: minmax(18rem, 3fr) minmax(24rem, 2fr) minmax(12rem, 1fr);
204
214
  //grid-template-columns: 100% rem 18rem;
205
215
  grid-template-areas:
206
216
  "search date button";
@@ -16,9 +16,9 @@
16
16
  font-size: 0.9rem;
17
17
  font-weight: bold;
18
18
  grid-column: 1/span 2;
19
- padding: 0.5rem 1rem;
19
+ padding: 0.5rem .75rem;
20
20
  @include at(lg) {
21
- padding: 1rem;
21
+ padding: .75rem;
22
22
  grid-column: auto;
23
23
  border: none;
24
24
  border-right: thin solid var(--color-gray-200);
@@ -68,7 +68,7 @@
68
68
  }
69
69
  &.-first {
70
70
  border-top: thin solid var(--color-gray-200);
71
- padding-top: 1rem;
71
+ padding-top: 0.75rem;
72
72
  @include at(lg) {
73
73
  border-top: none;
74
74
  border-left: thin solid var(--color-gray-200);
@@ -81,7 +81,7 @@
81
81
  border-top: thin solid var(--color-gray-200);
82
82
  border-bottom: thin solid var(--color-gray-200);
83
83
  font-weight:100;
84
- color: var(--color-gray-400);
84
+ color: var(--color-mid-gray);
85
85
  }
86
86
  }
87
87
  &.-hideMobile {
@@ -41,16 +41,16 @@
41
41
  padding-top: 0.75rem;
42
42
 
43
43
  @include at(lg) {
44
- padding-top:3rem;
45
- padding-right:4rem;
46
- padding-left: 2rem;
44
+ padding-top: 3rem;
45
+ padding-right: 6.25rem;
46
+ padding-left: 2.5rem;
47
47
  }
48
48
 
49
49
  transition: padding-left 400ms;
50
50
 
51
51
  &.closed {
52
52
  @include at(lg) {
53
- padding-left: 8rem;
53
+ padding-left: 6.25rem;
54
54
  }
55
55
 
56
56
  }
@@ -104,6 +104,9 @@
104
104
  display: flex;
105
105
  align-items: baseline;
106
106
  //width: 75%;
107
+ h2 {
108
+ margin-bottom: 0.2rem;
109
+ }
107
110
  }
108
111
 
109
112
  &__search {
@@ -165,14 +168,11 @@
165
168
  box-sizing: border-box;
166
169
 
167
170
  padding: 1rem 1.5rem;
168
- @include at(lg) {
169
- padding: 2rem 4rem;
170
- }
171
171
 
172
- @include at(lg) {
172
+ @include at(lg) {
173
173
  flex-direction: column;
174
174
  gap: 1rem;
175
- padding: 2rem 4rem 2rem 8rem;
175
+ padding: 1rem 6.25rem 2.5rem 6.25rem;
176
176
  }
177
177
 
178
178
  }
@@ -184,33 +184,33 @@
184
184
 
185
185
 
186
186
  // Mobile date picker modal styles
187
- .dp__mobile_modal {
188
- .dp__menu {
189
- position: static !important;
190
- top: auto !important;
191
- left: auto !important;
192
- right: auto !important;
193
- bottom: auto !important;
194
- width: 100% !important;
195
- height: auto !important;
196
- max-width: none !important;
197
- max-height: none !important;
198
- border-radius: 0 !important;
199
- z-index: auto !important;
200
- background: transparent !important;
201
- box-shadow: none !important;
202
- border: none !important;
203
- margin: 0 !important;
204
- padding: 0 !important;
205
- }
206
-
207
- .dp__modal_body {
208
- padding: 1rem !important;
209
- flex: 1 !important;
210
- display: flex !important;
211
- flex-direction: column !important;
212
- }
213
- }
187
+ // .dp__mobile_modal {
188
+ // .dp__menu {
189
+ // position: static !important;
190
+ // top: auto !important;
191
+ // left: auto !important;
192
+ // right: auto !important;
193
+ // bottom: auto !important;
194
+ // width: 100% !important;
195
+ // height: auto !important;
196
+ // max-width: none !important;
197
+ // max-height: none !important;
198
+ // border-radius: 0 !important;
199
+ // z-index: auto !important;
200
+ // background: transparent !important;
201
+ // box-shadow: none !important;
202
+ // border: none !important;
203
+ // margin: 0 !important;
204
+ // padding: 0 !important;
205
+ // }
206
+
207
+ // .dp__modal_body {
208
+ // padding: 1rem !important;
209
+ // flex: 1 !important;
210
+ // display: flex !important;
211
+ // flex-direction: column !important;
212
+ // }
213
+ // }
214
214
 
215
215
  // Make dropdown menus span across both venue and ensemble filters
216
216
  .eventsSearch__filtersRow {
@@ -220,6 +220,7 @@
220
220
  &__refinementCount {
221
221
  justify-self: end;
222
222
  padding-right: 0.5rem;
223
+ color: var(--color-mid-gray);
223
224
  }
224
225
 
225
226
 
@@ -245,7 +246,7 @@
245
246
  // Desktop positioning for date picker to span across Date and Venue inputs
246
247
  .eventsSearch__filterGroup--date {
247
248
  --dp-menu-width: 300px;
248
- @media (min-width: 769px) {
249
+ @media (min-width: 769px) {
249
250
  position: relative;
250
251
  }
251
252
 
@@ -254,7 +255,7 @@
254
255
  position: absolute !important;
255
256
  left: 0 !important;
256
257
  top: calc(100% + .5rem) !important;
257
- //width: calc(150% + 1rem) !important;
258
+ width: auto;
258
259
  z-index: 1000 !important;
259
260
  }
260
261
 
@@ -280,10 +281,11 @@
280
281
  color: var(--c-brand) !important;
281
282
  }
282
283
 
284
+ //HERE
285
+
283
286
  .dp__cell_inner {
284
287
  --dp-cell-border-radius: 16px !important;
285
288
  --dp-font-size: 14px !important;
286
- --dp-cell-size: 48px;
287
289
  font-size: var(--dp-font-size);
288
290
  }
289
291
 
@@ -302,7 +304,7 @@
302
304
  .dp__calendar_item,
303
305
  .dp__calendar_header_item {
304
306
  flex-grow: 0 !important;
305
- --dp-cell-size: 48px;
307
+ //--dp-cell-size: 48px;
306
308
  }
307
309
 
308
310
  .dp--year-select, .dp__month_year_select {
@@ -357,6 +359,7 @@
357
359
  }
358
360
  }
359
361
  }
362
+
360
363
  .dp__calendar_header_separator{
361
364
  height: 0 !important;
362
365
  }
@@ -378,4 +381,8 @@
378
381
  .dp__input_icon {
379
382
  --dp-icon-color: var(--color-dark-blue);
380
383
  }
384
+
385
+ .dp__selection_preview {
386
+ max-width: 100px !important;
387
+ }
381
388
  }
@@ -6,7 +6,7 @@
6
6
  padding: 0.5rem 2rem 0.5rem 4rem;
7
7
  }
8
8
  @include at(lg) {
9
- padding: 0.5rem 4rem 0.5rem 8rem;
9
+ padding: 0.5rem 6.25rem 0.5rem 6.25rem;
10
10
  }
11
11
 
12
12
  &__grid {
@@ -8,7 +8,7 @@
8
8
  &__dataTitle {
9
9
  font-weight: 100;
10
10
  font-size: 0.9rem;
11
- color: var(--color-dark-gray);
11
+ color: var(--color-mid-gray);
12
12
 
13
13
  }
14
14
  &__details {
@@ -21,7 +21,7 @@
21
21
  padding: 0.5rem 2rem 0.5rem 4rem;
22
22
  }
23
23
  @include at(lg) {
24
- padding: 0.5rem 4rem 0.5rem 8rem;
24
+ padding: 0.5rem 6.25rem 0.5rem 6.25rem;
25
25
  }
26
26
  }
27
27