Skip to content

Commit

Permalink
handle updated menu search structure styling overrides
Browse files Browse the repository at this point in the history
  • Loading branch information
@sampsonj
sampsonj committed Jun 28, 2022
1 parent 66ee88a commit 9e55015
Show file tree
Hide file tree
Showing 2 changed files with 90 additions and 47 deletions.
69 changes: 45 additions & 24 deletions lib/components/NeonHeader/NeonHeader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,35 +163,40 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
}
}, _defineProperty(_headerContainer, theme.breakpoints.up('lg'), {
'& .header__search--inner > .header__search--title': {
fontSize: '1.2rem !important' // Changed from 1.0 to match Drupal site.
fontSize: '1.25rem !important' // Changed from 1.0 to match Drupal site.

}
}), _defineProperty(_headerContainer, '& .header__search--inner > .form-item', {
width: '100%',
}), _defineProperty(_headerContainer, '& .header__search--inner > div.search-api-form > form#search-api-form', {
display: 'flex',
'-ms-flex-pack': 'start',
justifyContent: 'flex-start',
'-ms-flex-align': 'center',
alignItems: 'center'
}), _defineProperty(_headerContainer, '& .header__search--inner > form.search-form', {
alignItems: 'center',
width: '100%'
}), _defineProperty(_headerContainer, '& .header__search--inner > div.search-api-form > form#search-api-form > .form-item', {
width: '100%',
display: 'flex',
'-ms-flex-pack': 'start',
justifyContent: 'flex-start',
'-ms-flex-align': 'center',
alignItems: 'center',
margin: '20px 0'
}), _defineProperty(_headerContainer, '& .header__search--inner > div.search-api-form', {
width: '100%'
}), _defineProperty(_headerContainer, '& .header__search--inner > form.search-form > .form-item', {
width: '100%'
}), _defineProperty(_headerContainer, '& .header__search--inner > form.search-form > .form-item > .search-form__input', {
}), _defineProperty(_headerContainer, '& .header__search--inner > div.search-api-form > form#search-api-form > .form-actions.form-wrapper', {
display: 'flex'
}), _defineProperty(_headerContainer, '& .header__search--inner > div.search-api-form > form#search-api-form > .form-item > .form-search', {
width: '100%',
height: '48px',
background: '#fff',
border: '1px solid #d7d9d9',
boxSizing: 'border-box',
borderRadius: '3px 0 0 3px',
padding: '14px'
}), _defineProperty(_headerContainer, '& .header__search--inner > form.search-form > .search-form__actions > .search-form__button', {
padding: '12px 18px'
}), _defineProperty(_headerContainer, '& .header__search--inner > div.search-api-form > form#search-api-form > .form-actions > .form-submit.button--search', {
borderRadius: '0px 3px 3px 0px',
width: '60px',
width: '48px',
height: '48px',
background: '#0073cf',
border: '#0073cf 1px solid',
color: 'transparent !important',
Expand All @@ -200,11 +205,11 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
backgroundRepeat: 'no-repeat',
padding: '0.86rem 0',
transition: 'all 0.2s ease-in-out'
}), _defineProperty(_headerContainer, '& .header__search--inner > form.search-form > .search-form__actions > .search-form__button:hover', {
}), _defineProperty(_headerContainer, '& .header__search--inner > div.search-api-form > form#search-api-form > .form-actions > .form-submit.button--search:hover', {
transition: 'all 0.2s ease-in-out',
backgroundColor: '#002c77',
border: '#002c77 1px solid'
}), _defineProperty(_headerContainer, '& .header__search--inner > form.search-form > label', {
}), _defineProperty(_headerContainer, '& .header__search--inner > div.search-api-form > form#search-api-form > .form-item > label', {
fontWeight: 600,
fontSize: '20px',
margin: 'auto 2.6rem'
Expand All @@ -222,34 +227,50 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
fill: '#002c77',
transition: 'all 0.2s ease-in-out'
}), _defineProperty(_headerContainer, theme.breakpoints.down('md'), {
'& nav#block-neon-main-menu > ul > li.siteSearch': {
padding: '0 1.5rem 0.5rem 1.5rem'
'& nav#block-neon-main-menu > ul.menu.menu--main > li.siteSearch': {
padding: '0 1.875rem 0.625rem 1.875rem !important'
},
'& .search-form-mobile.isMobile': {
display: 'flex',
'-ms-flex-pack': 'start',
justifyContent: 'flex-start',
'-ms-flex-align': 'center',
alignItems: 'center'
},
'& .search-form-mobile': {
width: '100%'
},
'& form.search-form': {
'& .search-form-mobile > div.search-api-form > form#search-api-form': {
display: 'flex',
'-ms-flex-pack': 'start',
justifyContent: 'flex-start',
'-ms-flex-align': 'center',
alignItems: 'center',
width: '100%'
},
'& form.search-form > .form-item': {
'& .search-form-mobile > div.search-api-form': {
width: '100%'
},
'& form.search-form > .form-item > .search-form__input': {
'& .search-form-mobile > div.search-api-form > form#search-api-form > .form-item': {
width: '100%',
margin: '20px 0'
},
'& .search-form-mobile > div.search-api-form > form#search-api-form > .form-item > .form-search': {
width: '100%',
height: '48px',
background: '#fff',
border: '1px solid #d7d9d9',
boxSizing: 'border-box',
borderRadius: '3px 0 0 3px',
padding: '0.88rem'
padding: '0.75rem 1.125rem'
},
'& .search-form-mobile > div.search-api-form > form#search-api-form > .form-actions.form-wrapper': {
display: 'flex'
},
'& form.search-form > .search-form__actions > .search-form__button': {
'& .search-form-mobile > div.search-api-form > form#search-api-form > .form-actions > .form-submit.button--search': {
borderRadius: '0px 3px 3px 0px',
width: '60px',
width: '48px',
height: '48px',
background: '#0073cf',
border: '#0073cf 1px solid',
color: 'transparent !important',
Expand All @@ -259,12 +280,12 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
padding: '14px 0',
transition: 'all 0.2s ease-in-out'
},
'& form.search-form > .search-form__actions > .search-form__button:hover': {
'& .search-form-mobile > div.search-api-form > form#search-api-form > .form-actions > .form-submit.button--search:hover': {
transition: 'all 0.2s ease-in-out',
backgroundColor: '#002c77',
border: '#002c77 1px solid'
},
'& form.search-form > .form-item > label': {
'& .search-form-mobile > div.search-api-form > form#search-api-form > .form-item > label': {
display: 'none !important'
}
}), _headerContainer)
Expand Down Expand Up @@ -406,7 +427,7 @@ var NeonHeader = /*#__PURE__*/(0, _react.forwardRef)(function (props, headerRef)
attribs = _domNode$attribs === void 0 ? {} : _domNode$attribs,
name = domNode.name;

if (name === 'form' && attribs.class === 'search-form') {
if (name === 'form' && attribs.id === 'search-api-form') {
var nextAttribs = {};
Object.keys(attribs).forEach(function (attr) {
applyAttribute(nextAttribs, attribs, attr);
Expand Down
68 changes: 45 additions & 23 deletions src/lib_components/components/NeonHeader/NeonHeader.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,39 +122,45 @@ const useStyles = makeStyles((theme) => ({
},
[theme.breakpoints.up('lg')]: {
'& .header__search--inner > .header__search--title': {
fontSize: '1.2rem !important', // Changed from 1.0 to match Drupal site.
fontSize: '1.25rem !important', // Changed from 1.0 to match Drupal site.
},
},
'& .header__search--inner > .form-item': {
width: '100%',
'& .header__search--inner > div.search-api-form > form#search-api-form': {
display: 'flex',
'-ms-flex-pack': 'start',
justifyContent: 'flex-start',
'-ms-flex-align': 'center',
alignItems: 'center',
width: '100%',
},
'& .header__search--inner > form.search-form': {
'& .header__search--inner > div.search-api-form > form#search-api-form > .form-item': {
width: '100%',
display: 'flex',
'-ms-flex-pack': 'start',
justifyContent: 'flex-start',
'-ms-flex-align': 'center',
alignItems: 'center',
width: '100%',
margin: '20px 0',
},
'& .header__search--inner > form.search-form > .form-item': {
'& .header__search--inner > div.search-api-form': {
width: '100%',
},
'& .header__search--inner > form.search-form > .form-item > .search-form__input': {
'& .header__search--inner > div.search-api-form > form#search-api-form > .form-actions.form-wrapper': {
display: 'flex',
},
'& .header__search--inner > div.search-api-form > form#search-api-form > .form-item > .form-search': {
width: '100%',
height: '48px',
background: '#fff',
border: '1px solid #d7d9d9',
boxSizing: 'border-box',
borderRadius: '3px 0 0 3px',
padding: '14px',
padding: '12px 18px',
},
'& .header__search--inner > form.search-form > .search-form__actions > .search-form__button': {
'& .header__search--inner > div.search-api-form > form#search-api-form > .form-actions > .form-submit.button--search': {
borderRadius: '0px 3px 3px 0px',
width: '60px',
width: '48px',
height: '48px',
background: '#0073cf',
border: '#0073cf 1px solid',
color: 'transparent !important',
Expand All @@ -164,12 +170,12 @@ const useStyles = makeStyles((theme) => ({
padding: '0.86rem 0',
transition: 'all 0.2s ease-in-out',
},
'& .header__search--inner > form.search-form > .search-form__actions > .search-form__button:hover': {
'& .header__search--inner > div.search-api-form > form#search-api-form > .form-actions > .form-submit.button--search:hover': {
transition: 'all 0.2s ease-in-out',
backgroundColor: '#002c77',
border: '#002c77 1px solid',
},
'& .header__search--inner > form.search-form > label': {
'& .header__search--inner > div.search-api-form > form#search-api-form > .form-item > label': {
fontWeight: 600,
fontSize: '20px',
margin: 'auto 2.6rem',
Expand All @@ -193,34 +199,50 @@ const useStyles = makeStyles((theme) => ({
transition: 'all 0.2s ease-in-out',
},
[theme.breakpoints.down('md')]: {
'& nav#block-neon-main-menu > ul > li.siteSearch': {
padding: '0 1.5rem 0.5rem 1.5rem',
'& nav#block-neon-main-menu > ul.menu.menu--main > li.siteSearch': {
padding: '0 1.875rem 0.625rem 1.875rem !important',
},
'& .search-form-mobile.isMobile': {
display: 'flex',
'-ms-flex-pack': 'start',
justifyContent: 'flex-start',
'-ms-flex-align': 'center',
alignItems: 'center',
},
'& .search-form-mobile': {
width: '100%',
},
'& form.search-form': {
'& .search-form-mobile > div.search-api-form > form#search-api-form': {
display: 'flex',
'-ms-flex-pack': 'start',
justifyContent: 'flex-start',
'-ms-flex-align': 'center',
alignItems: 'center',
width: '100%',
},
'& form.search-form > .form-item': {
'& .search-form-mobile > div.search-api-form': {
width: '100%',
},
'& form.search-form > .form-item > .search-form__input': {
'& .search-form-mobile > div.search-api-form > form#search-api-form > .form-item': {
width: '100%',
margin: '20px 0',
},
'& .search-form-mobile > div.search-api-form > form#search-api-form > .form-item > .form-search': {
width: '100%',
height: '48px',
background: '#fff',
border: '1px solid #d7d9d9',
boxSizing: 'border-box',
borderRadius: '3px 0 0 3px',
padding: '0.88rem',
padding: '0.75rem 1.125rem',
},
'& .search-form-mobile > div.search-api-form > form#search-api-form > .form-actions.form-wrapper': {
display: 'flex',
},
'& form.search-form > .search-form__actions > .search-form__button': {
'& .search-form-mobile > div.search-api-form > form#search-api-form > .form-actions > .form-submit.button--search': {
borderRadius: '0px 3px 3px 0px',
width: '60px',
width: '48px',
height: '48px',
background: '#0073cf',
border: '#0073cf 1px solid',
color: 'transparent !important',
Expand All @@ -230,12 +252,12 @@ const useStyles = makeStyles((theme) => ({
padding: '14px 0',
transition: 'all 0.2s ease-in-out',
},
'& form.search-form > .search-form__actions > .search-form__button:hover': {
'& .search-form-mobile > div.search-api-form > form#search-api-form > .form-actions > .form-submit.button--search:hover': {
transition: 'all 0.2s ease-in-out',
backgroundColor: '#002c77',
border: '#002c77 1px solid',
},
'& form.search-form > .form-item > label': {
'& .search-form-mobile > div.search-api-form > form#search-api-form > .form-item > label': {
display: 'none !important',
},
},
Expand Down Expand Up @@ -355,7 +377,7 @@ const NeonHeader = forwardRef((props, headerRef) => {
const injectAuth = !auth.useCore ? null : {
replace: (domNode) => {
const { attribs = {}, name } = domNode;
if ((name === 'form') && (attribs.class === 'search-form')) {
if ((name === 'form') && (attribs.id === 'search-api-form')) {
const nextAttribs = {};
Object.keys(attribs).forEach((attr) => {
applyAttribute(nextAttribs, attribs, attr);
Expand Down

0 comments on commit 9e55015

Please sign in to comment.