Skip to content

Commit 9e55015

Browse files
sampsonjsampsonj
committed
handle updated menu search structure styling overrides
1 parent 66ee88a commit 9e55015

File tree

2 files changed

+90
-47
lines changed

2 files changed

+90
-47
lines changed

‎lib/components/NeonHeader/NeonHeader.js‎

Lines changed: 45 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -163,35 +163,40 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
163163
}
164164
}, _defineProperty(_headerContainer, theme.breakpoints.up('lg'), {
165165
'& .header__search--inner > .header__search--title': {
166-
fontSize: '1.2rem !important' // Changed from 1.0 to match Drupal site.
166+
fontSize: '1.25rem !important' // Changed from 1.0 to match Drupal site.
167167

168168
}
169-
}), _defineProperty(_headerContainer, '& .header__search--inner > .form-item', {
170-
width: '100%',
169+
}), _defineProperty(_headerContainer, '& .header__search--inner > div.search-api-form > form#search-api-form', {
171170
display: 'flex',
172171
'-ms-flex-pack': 'start',
173172
justifyContent: 'flex-start',
174173
'-ms-flex-align': 'center',
175-
alignItems: 'center'
176-
}), _defineProperty(_headerContainer, '& .header__search--inner > form.search-form', {
174+
alignItems: 'center',
175+
width: '100%'
176+
}), _defineProperty(_headerContainer, '& .header__search--inner > div.search-api-form > form#search-api-form > .form-item', {
177+
width: '100%',
177178
display: 'flex',
178179
'-ms-flex-pack': 'start',
179180
justifyContent: 'flex-start',
180181
'-ms-flex-align': 'center',
181182
alignItems: 'center',
183+
margin: '20px 0'
184+
}), _defineProperty(_headerContainer, '& .header__search--inner > div.search-api-form', {
182185
width: '100%'
183-
}), _defineProperty(_headerContainer, '& .header__search--inner > form.search-form > .form-item', {
184-
width: '100%'
185-
}), _defineProperty(_headerContainer, '& .header__search--inner > form.search-form > .form-item > .search-form__input', {
186+
}), _defineProperty(_headerContainer, '& .header__search--inner > div.search-api-form > form#search-api-form > .form-actions.form-wrapper', {
187+
display: 'flex'
188+
}), _defineProperty(_headerContainer, '& .header__search--inner > div.search-api-form > form#search-api-form > .form-item > .form-search', {
186189
width: '100%',
190+
height: '48px',
187191
background: '#fff',
188192
border: '1px solid #d7d9d9',
189193
boxSizing: 'border-box',
190194
borderRadius: '3px 0 0 3px',
191-
padding: '14px'
192-
}), _defineProperty(_headerContainer, '& .header__search--inner > form.search-form > .search-form__actions > .search-form__button', {
195+
padding: '12px 18px'
196+
}), _defineProperty(_headerContainer, '& .header__search--inner > div.search-api-form > form#search-api-form > .form-actions > .form-submit.button--search', {
193197
borderRadius: '0px 3px 3px 0px',
194-
width: '60px',
198+
width: '48px',
199+
height: '48px',
195200
background: '#0073cf',
196201
border: '#0073cf 1px solid',
197202
color: 'transparent !important',
@@ -200,11 +205,11 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
200205
backgroundRepeat: 'no-repeat',
201206
padding: '0.86rem 0',
202207
transition: 'all 0.2s ease-in-out'
203-
}), _defineProperty(_headerContainer, '& .header__search--inner > form.search-form > .search-form__actions > .search-form__button:hover', {
208+
}), _defineProperty(_headerContainer, '& .header__search--inner > div.search-api-form > form#search-api-form > .form-actions > .form-submit.button--search:hover', {
204209
transition: 'all 0.2s ease-in-out',
205210
backgroundColor: '#002c77',
206211
border: '#002c77 1px solid'
207-
}), _defineProperty(_headerContainer, '& .header__search--inner > form.search-form > label', {
212+
}), _defineProperty(_headerContainer, '& .header__search--inner > div.search-api-form > form#search-api-form > .form-item > label', {
208213
fontWeight: 600,
209214
fontSize: '20px',
210215
margin: 'auto 2.6rem'
@@ -222,34 +227,50 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
222227
fill: '#002c77',
223228
transition: 'all 0.2s ease-in-out'
224229
}), _defineProperty(_headerContainer, theme.breakpoints.down('md'), {
225-
'& nav#block-neon-main-menu > ul > li.siteSearch': {
226-
padding: '0 1.5rem 0.5rem 1.5rem'
230+
'& nav#block-neon-main-menu > ul.menu.menu--main > li.siteSearch': {
231+
padding: '0 1.875rem 0.625rem 1.875rem !important'
232+
},
233+
'& .search-form-mobile.isMobile': {
234+
display: 'flex',
235+
'-ms-flex-pack': 'start',
236+
justifyContent: 'flex-start',
237+
'-ms-flex-align': 'center',
238+
alignItems: 'center'
227239
},
228240
'& .search-form-mobile': {
229241
width: '100%'
230242
},
231-
'& form.search-form': {
243+
'& .search-form-mobile > div.search-api-form > form#search-api-form': {
232244
display: 'flex',
233245
'-ms-flex-pack': 'start',
234246
justifyContent: 'flex-start',
235247
'-ms-flex-align': 'center',
236248
alignItems: 'center',
237249
width: '100%'
238250
},
239-
'& form.search-form > .form-item': {
251+
'& .search-form-mobile > div.search-api-form': {
240252
width: '100%'
241253
},
242-
'& form.search-form > .form-item > .search-form__input': {
254+
'& .search-form-mobile > div.search-api-form > form#search-api-form > .form-item': {
243255
width: '100%',
256+
margin: '20px 0'
257+
},
258+
'& .search-form-mobile > div.search-api-form > form#search-api-form > .form-item > .form-search': {
259+
width: '100%',
260+
height: '48px',
244261
background: '#fff',
245262
border: '1px solid #d7d9d9',
246263
boxSizing: 'border-box',
247264
borderRadius: '3px 0 0 3px',
248-
padding: '0.88rem'
265+
padding: '0.75rem 1.125rem'
266+
},
267+
'& .search-form-mobile > div.search-api-form > form#search-api-form > .form-actions.form-wrapper': {
268+
display: 'flex'
249269
},
250-
'& form.search-form > .search-form__actions > .search-form__button': {
270+
'& .search-form-mobile > div.search-api-form > form#search-api-form > .form-actions > .form-submit.button--search': {
251271
borderRadius: '0px 3px 3px 0px',
252-
width: '60px',
272+
width: '48px',
273+
height: '48px',
253274
background: '#0073cf',
254275
border: '#0073cf 1px solid',
255276
color: 'transparent !important',
@@ -259,12 +280,12 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
259280
padding: '14px 0',
260281
transition: 'all 0.2s ease-in-out'
261282
},
262-
'& form.search-form > .search-form__actions > .search-form__button:hover': {
283+
'& .search-form-mobile > div.search-api-form > form#search-api-form > .form-actions > .form-submit.button--search:hover': {
263284
transition: 'all 0.2s ease-in-out',
264285
backgroundColor: '#002c77',
265286
border: '#002c77 1px solid'
266287
},
267-
'& form.search-form > .form-item > label': {
288+
'& .search-form-mobile > div.search-api-form > form#search-api-form > .form-item > label': {
268289
display: 'none !important'
269290
}
270291
}), _headerContainer)
@@ -406,7 +427,7 @@ var NeonHeader = /*#__PURE__*/(0, _react.forwardRef)(function (props, headerRef)
406427
attribs = _domNode$attribs === void 0 ? {} : _domNode$attribs,
407428
name = domNode.name;
408429

409-
if (name === 'form' && attribs.class === 'search-form') {
430+
if (name === 'form' && attribs.id === 'search-api-form') {
410431
var nextAttribs = {};
411432
Object.keys(attribs).forEach(function (attr) {
412433
applyAttribute(nextAttribs, attribs, attr);

‎src/lib_components/components/NeonHeader/NeonHeader.jsx‎

Lines changed: 45 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -122,39 +122,45 @@ const useStyles = makeStyles((theme) => ({
122122
},
123123
[theme.breakpoints.up('lg')]: {
124124
'& .header__search--inner > .header__search--title': {
125-
fontSize: '1.2rem !important', // Changed from 1.0 to match Drupal site.
125+
fontSize: '1.25rem !important', // Changed from 1.0 to match Drupal site.
126126
},
127127
},
128-
'& .header__search--inner > .form-item': {
129-
width: '100%',
128+
'& .header__search--inner > div.search-api-form > form#search-api-form': {
130129
display: 'flex',
131130
'-ms-flex-pack': 'start',
132131
justifyContent: 'flex-start',
133132
'-ms-flex-align': 'center',
134133
alignItems: 'center',
134+
width: '100%',
135135
},
136-
'& .header__search--inner > form.search-form': {
136+
'& .header__search--inner > div.search-api-form > form#search-api-form > .form-item': {
137+
width: '100%',
137138
display: 'flex',
138139
'-ms-flex-pack': 'start',
139140
justifyContent: 'flex-start',
140141
'-ms-flex-align': 'center',
141142
alignItems: 'center',
142-
width: '100%',
143+
margin: '20px 0',
143144
},
144-
'& .header__search--inner > form.search-form > .form-item': {
145+
'& .header__search--inner > div.search-api-form': {
145146
width: '100%',
146147
},
147-
'& .header__search--inner > form.search-form > .form-item > .search-form__input': {
148+
'& .header__search--inner > div.search-api-form > form#search-api-form > .form-actions.form-wrapper': {
149+
display: 'flex',
150+
},
151+
'& .header__search--inner > div.search-api-form > form#search-api-form > .form-item > .form-search': {
148152
width: '100%',
153+
height: '48px',
149154
background: '#fff',
150155
border: '1px solid #d7d9d9',
151156
boxSizing: 'border-box',
152157
borderRadius: '3px 0 0 3px',
153-
padding: '14px',
158+
padding: '12px 18px',
154159
},
155-
'& .header__search--inner > form.search-form > .search-form__actions > .search-form__button': {
160+
'& .header__search--inner > div.search-api-form > form#search-api-form > .form-actions > .form-submit.button--search': {
156161
borderRadius: '0px 3px 3px 0px',
157-
width: '60px',
162+
width: '48px',
163+
height: '48px',
158164
background: '#0073cf',
159165
border: '#0073cf 1px solid',
160166
color: 'transparent !important',
@@ -164,12 +170,12 @@ const useStyles = makeStyles((theme) => ({
164170
padding: '0.86rem 0',
165171
transition: 'all 0.2s ease-in-out',
166172
},
167-
'& .header__search--inner > form.search-form > .search-form__actions > .search-form__button:hover': {
173+
'& .header__search--inner > div.search-api-form > form#search-api-form > .form-actions > .form-submit.button--search:hover': {
168174
transition: 'all 0.2s ease-in-out',
169175
backgroundColor: '#002c77',
170176
border: '#002c77 1px solid',
171177
},
172-
'& .header__search--inner > form.search-form > label': {
178+
'& .header__search--inner > div.search-api-form > form#search-api-form > .form-item > label': {
173179
fontWeight: 600,
174180
fontSize: '20px',
175181
margin: 'auto 2.6rem',
@@ -193,34 +199,50 @@ const useStyles = makeStyles((theme) => ({
193199
transition: 'all 0.2s ease-in-out',
194200
},
195201
[theme.breakpoints.down('md')]: {
196-
'& nav#block-neon-main-menu > ul > li.siteSearch': {
197-
padding: '0 1.5rem 0.5rem 1.5rem',
202+
'& nav#block-neon-main-menu > ul.menu.menu--main > li.siteSearch': {
203+
padding: '0 1.875rem 0.625rem 1.875rem !important',
204+
},
205+
'& .search-form-mobile.isMobile': {
206+
display: 'flex',
207+
'-ms-flex-pack': 'start',
208+
justifyContent: 'flex-start',
209+
'-ms-flex-align': 'center',
210+
alignItems: 'center',
198211
},
199212
'& .search-form-mobile': {
200213
width: '100%',
201214
},
202-
'& form.search-form': {
215+
'& .search-form-mobile > div.search-api-form > form#search-api-form': {
203216
display: 'flex',
204217
'-ms-flex-pack': 'start',
205218
justifyContent: 'flex-start',
206219
'-ms-flex-align': 'center',
207220
alignItems: 'center',
208221
width: '100%',
209222
},
210-
'& form.search-form > .form-item': {
223+
'& .search-form-mobile > div.search-api-form': {
211224
width: '100%',
212225
},
213-
'& form.search-form > .form-item > .search-form__input': {
226+
'& .search-form-mobile > div.search-api-form > form#search-api-form > .form-item': {
214227
width: '100%',
228+
margin: '20px 0',
229+
},
230+
'& .search-form-mobile > div.search-api-form > form#search-api-form > .form-item > .form-search': {
231+
width: '100%',
232+
height: '48px',
215233
background: '#fff',
216234
border: '1px solid #d7d9d9',
217235
boxSizing: 'border-box',
218236
borderRadius: '3px 0 0 3px',
219-
padding: '0.88rem',
237+
padding: '0.75rem 1.125rem',
238+
},
239+
'& .search-form-mobile > div.search-api-form > form#search-api-form > .form-actions.form-wrapper': {
240+
display: 'flex',
220241
},
221-
'& form.search-form > .search-form__actions > .search-form__button': {
242+
'& .search-form-mobile > div.search-api-form > form#search-api-form > .form-actions > .form-submit.button--search': {
222243
borderRadius: '0px 3px 3px 0px',
223-
width: '60px',
244+
width: '48px',
245+
height: '48px',
224246
background: '#0073cf',
225247
border: '#0073cf 1px solid',
226248
color: 'transparent !important',
@@ -230,12 +252,12 @@ const useStyles = makeStyles((theme) => ({
230252
padding: '14px 0',
231253
transition: 'all 0.2s ease-in-out',
232254
},
233-
'& form.search-form > .search-form__actions > .search-form__button:hover': {
255+
'& .search-form-mobile > div.search-api-form > form#search-api-form > .form-actions > .form-submit.button--search:hover': {
234256
transition: 'all 0.2s ease-in-out',
235257
backgroundColor: '#002c77',
236258
border: '#002c77 1px solid',
237259
},
238-
'& form.search-form > .form-item > label': {
260+
'& .search-form-mobile > div.search-api-form > form#search-api-form > .form-item > label': {
239261
display: 'none !important',
240262
},
241263
},
@@ -355,7 +377,7 @@ const NeonHeader = forwardRef((props, headerRef) => {
355377
const injectAuth = !auth.useCore ? null : {
356378
replace: (domNode) => {
357379
const { attribs = {}, name } = domNode;
358-
if ((name === 'form') && (attribs.class === 'search-form')) {
380+
if ((name === 'form') && (attribs.id === 'search-api-form')) {
359381
const nextAttribs = {};
360382
Object.keys(attribs).forEach((attr) => {
361383
applyAttribute(nextAttribs, attribs, attr);

0 commit comments

Comments
 (0)