@uqds/header 0.0.9-alpha.0 → 0.0.12-alpha.0

package/README.md

@@ -7,11 +7,13 @@
 ### Installation
 
 With Yarn:
+
 ```shell
 yarn add @uqds/header
 ```
 
 With NPM:
+
 ```shell
 npm i @uqds/header
 ```

package/dist/css/main.css

@@ -1 +1 @@
-.uq-header{background:#51247a;display:grid;align-items:center;grid-template-columns:auto;grid-template-areas:"mainheader" "secondarynav";position:relative}@media(min-width: 64rem){.uq-header{grid-template-areas:"secondarynav" "mainheader"}}.uq-header__container{display:grid;align-items:center;grid-template-columns:1fr 15fr 1fr;grid-area:mainheader;grid-template-areas:"menutoggle logo searchtoggle" "mainnav-mobile mainnav-mobile mainnav-mobile"}@media(min-width: 64rem){.uq-header__container{max-width:73.25rem;margin-left:auto;margin-right:auto;grid-template-areas:"logo mainnav searchtoggle";padding-left:1rem;padding-right:1rem}}.uq-header__menu-toggle{grid-area:menutoggle}@media(min-width: 64rem){.uq-header__menu-toggle{display:none}}.uq-header__search-toggle{grid-area:searchtoggle;height:100%;text-align:right;color:#fff}@media(min-width: 64rem){.uq-header__search-toggle{height:auto}}.uq-header__search-toggle .search-toggle__label{display:none}@media(min-width: 64rem){.uq-header__search-toggle .search-toggle__label{display:block;font-family:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:1rem;text-align:right;width:3.2rem}}.uq-header .nav-primary__toggle{background:none;border:none;padding:1.75rem 2rem;height:100%}@media(min-width: 64rem){.uq-header .nav-primary__toggle{padding:1rem 0 1rem 1.5rem;height:auto}}.uq-header .nav-primary__menu-toggle{cursor:pointer;color:#fff;position:relative;text-indent:-9999px;white-space:nowrap}.uq-header .nav-primary__menu-toggle::before{content:"";background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4 18h16M4 12h16M4 6h16' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e");background-repeat:no-repeat;width:1.5rem;height:1.5rem;transform:translate(50%, 50%);position:absolute;top:.625rem;right:2rem}.uq-header .nav-primary__menu-toggle--is-open::before{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m5 5 14 14M19 5 5 19' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e")}.uq-header .nav-primary__search-toggle{cursor:pointer;color:#fff;position:relative}.uq-header .nav-primary__search-toggle::before{content:"";background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M10.5 17a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13Z' stroke='%23fff' stroke-width='1.5'%3e%3c/path%3e%3cpath d='M15.5 15.5 20 20' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e");background-repeat:no-repeat;width:1.5rem;height:1.5rem;transform:translate(50%, 50%);position:absolute;top:.625rem;right:2rem}@media(min-width: 64rem){.uq-header .nav-primary__search-toggle::before{top:.1rem;left:-1rem}}@media(min-width: 64rem){.uq-header .nav-primary__search-toggle:hover{color:#d4c8de;text-decoration:underline}}.uq-header .nav-primary__search-toggle--is-open::before{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m5 5 14 14M19 5 5 19' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e")}.uq-header__logo{grid-area:logo}.uq-header__logo a{display:grid;padding:1rem 0}.uq-header__logo img{height:32px}@media(min-width: 64rem){.uq-header__logo img{height:40px}}.uq-header__nav-primary{grid-area:mainnav;display:none;width:100%;z-index:99}@media(min-width: 64rem){.uq-header__nav-primary{display:block}}@media(min-width: 64rem){.uq-header__nav-primary-container{padding:0 0 0 2.5rem}}.uq-header__nav-primary-list{list-style-type:none;margin:0;padding-left:0;display:flex;justify-content:flex-start;align-items:stretch;flex-direction:column}@media(min-width: 64rem){.uq-header__nav-primary-list{align-items:center;flex-direction:row}}.uq-header__nav-primary-item{margin:0;padding-left:2rem}.uq-header__nav-primary-item:first-child{padding-left:0}.uq-header__nav-primary-item--is-open>.uq-header__megamenu{height:auto;visibility:visible}.uq-header__nav-primary-item--is-open .uq-header__nav-primary-link{border-bottom:4px solid #fff}.uq-header__nav-primary-item .uq-header__nav-primary-link--active{border-bottom:4px solid #fff}.uq-header__nav-primary-link{display:block;color:#fff;text-decoration:none;padding:1rem 1.5rem;transition:background-color .25s,border-color .25s;font-weight:400;position:relative;border-bottom:4px solid rgba(0,0,0,0)}.uq-header__nav-primary-link:hover{color:#fff;text-decoration:none}@media(min-width: 64rem){.uq-header__nav-primary-link{padding:2rem .5rem}}.uq-header .nav-primary-link--has-dropdown{padding:2rem 1.5rem 2rem .5rem}.uq-header .nav-primary-link--has-dropdown::after{content:"";background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m7 10 5 5 5-5' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e");background-repeat:no-repeat;width:1rem;height:1rem;transform:translateY(50%);position:absolute;top:1.7rem;right:1.75rem}@media(min-width: 64rem){.uq-header .nav-primary-link--has-dropdown::after{right:.25rem}}.uq-header .mega-menu{display:none;background-color:#fff;list-style-type:none;margin:0;padding-left:0}.uq-header .mega-menu li a{padding-left:3rem;color:#51247a}.uq-header .mega-menu ul{list-style-type:none;margin:0;padding-left:0}.uq-header .mega-menu ul li a{padding-left:4.5rem}.uq-header__nav-secondary{background-color:#48206c;grid-area:secondarynav}@media(min-width: 64rem){.uq-header__nav-secondary-container{text-align:right;max-width:73.25rem;margin-left:auto;margin-right:auto}}.uq-header__nav-secondary-list{list-style-type:none;margin:0;padding-left:0;display:flex;justify-content:flex-start;align-items:stretch;flex-direction:column}@media(min-width: 64rem){.uq-header__nav-secondary-list{justify-content:flex-end;align-items:center;flex-direction:row}}.uq-header__nav-secondary-item{margin:0}.uq-header__nav-secondary-link{display:block;color:#fff;padding:1rem 1.5rem}@media(min-width: 64rem){.uq-header__nav-secondary-link{font-size:.875rem;padding:.625rem 1rem}}.uq-header__nav-secondary-link:hover{color:#d4c8de}.uq-header__search{background:#51247a;position:absolute;width:100%;top:3.95rem;z-index:20;box-shadow:0 .75rem 1.5rem rgba(24,24,24,.2);transition:max-height .2s ease-in-out,transform .2s ease-in-out;transform:translateY(-1rem);max-height:0;overflow:hidden;visibility:hidden}@media(min-width: 64rem){.uq-header__search{top:8.3rem}}.uq-header__search--is-open{transform:translateY(0);max-height:50vh;visibility:visible}.uq-header__search-container{padding:0 1.5rem}@media(min-width: 64rem){.uq-header__search-container{padding-left:1rem;padding-right:1rem;max-width:73.25rem;margin-left:auto;margin-right:auto;padding-top:0;padding-bottom:1rem}}.uq-header__search-query{position:relative;display:inline-block;max-width:100%;min-width:100%;border-radius:5px;background-position:1rem;padding-top:1rem;padding-bottom:1rem}.uq-header__search-query-label{color:#fff}.uq-header__search-query-input{margin:0 !important;padding:.75rem 1rem !important}.uq-header__search-query-button{background-clip:padding-box;background-color:#fff;border-radius:5px;border:2px solid rgba(0,0,0,0);color:#51247a;display:inline-block;font-size:1rem;height:2.75rem;line-height:1.5;margin-bottom:0;margin-right:0;overflow:hidden;position:absolute;right:.5rem;text-decoration:none;text-indent:0;top:calc(50% - 1.375rem);transition:color .2s,background-color .2s,border-color .2s;width:2.75rem}.uq-header__search-query-button::before{content:"";position:absolute;display:block;width:1.5rem;height:1.5rem;top:.5rem;left:.5rem;background-size:100%;background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M10.5 17a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13Z' stroke='%2351247A' stroke-width='1.5'%3e%3c/path%3e%3cpath d='M15.5 15.5 20 20' stroke='%2351247A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e")}.uq-header__search-query-submit{color:rgba(0,0,0,0);position:relative;display:block;width:100%;height:100%;margin:0;border:0;background-color:rgba(0,0,0,0);z-index:3;cursor:pointer;outline-offset:-2px;font-size:1rem}.uq-header__search-range{display:inline-block}.uq-header__search-range label{color:#fff}.uq-header .uq-header__search-radio:checked{border-color:#fff}.uq-header .uq-header__search-radio:checked:focus{border-color:#fff}.uq-header .uq-header__search-radio:checked::after{background-color:#fff}.uq-header__search-label{font-size:.8rem !important;line-height:1.7 !important}@media(min-width: 64rem){.uq-header__search-label{font-size:1rem !important;line-height:1.4 !important}}@media(max-width: 63.9375rem){.uq-header__nav-primary,.uq-header__nav-secondary{display:none}}.uq-header__megamenu{position:absolute;top:8.3rem;left:0;width:100%;z-index:30;height:0;visibility:hidden}.uq-header__megamenu-container{max-width:73.25rem;margin-left:auto;margin-right:auto;padding:1rem 3rem 2.5rem 3rem;background:#fff;box-shadow:0 .75rem 1.5rem rgba(24,24,24,.2);border-radius:0 0 .25rem .25rem}@media(min-width: 75rem){.uq-header__megamenu-container{max-width:77.25rem}}.uq-header .megamenu__row{display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr))}.uq-header .megamenu__overview-link{display:block;padding:1rem 0;color:#51247a}.uq-header .megamenu__heading{color:#51247a;font-weight:500;padding-top:.25rem;padding-bottom:.25rem}.uq-header .megamenu__heading:nth-of-type(2){padding-top:2.5rem}.uq-header .megamenu__menu ul{list-style-type:none;margin:0;padding-left:0}.uq-header .megamenu__menu ul li{margin:0}.uq-header .megamenu__menu ul li a{display:inline-block;padding-top:.5rem;color:#51247a}:root{--app-height: 100%}body.no-scroll{position:fixed}@media(min-width: 64rem){body.no-scroll{position:relative}}.slide-menu{width:100%;max-width:100%;background-color:#fff;height:calc(var(--app-height) - 4.3rem);display:none;box-sizing:border-box;transition:transform .3s ease-in-out;transform:translateX(100%);will-change:transform;z-index:1000;grid-area:mainnav-mobile;position:fixed;top:4.3rem;right:0;overflow-y:auto;overflow-x:hidden;font-size:1rem;color:#51247a}@media(min-width: 64rem){.slide-menu{display:none !important}}.slide-menu .slide-menu__slider{width:100%;transform:translateX(0);transition:transform .3s ease-in-out;will-change:transform}.slide-menu ul{position:relative;width:100%;margin:0;padding-left:0;list-style:none;background-color:#fff}.slide-menu ul ul{position:absolute;top:0;left:100%;display:none}.slide-menu ul ul a{padding:.75rem 1.5rem .75rem 3rem}.slide-menu ul a{display:block}.slide-menu li{margin-bottom:0}.slide-menu li:hover{background-color:#f1f1f1}.slide-menu .slide-menu__control{padding-top:1rem;padding-bottom:1rem}.slide-menu a{cursor:pointer;padding:.75rem 1.5rem;text-decoration:none;font-size:1rem;color:#51247a;position:relative}.slide-menu a:hover{color:#51247a;background-color:#f1f1f1}.slide-menu .slide-menu__backlink{font-weight:500;padding-left:3rem}.slide-menu .slide-menu__backlink::before{content:"";background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m14 7-5 5 5 5' stroke='%2351247A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e");background-repeat:no-repeat;width:1.5rem;height:1.5rem;transform:translateY(50%);position:absolute;left:1.25rem;top:.25rem}.slide-menu__decorator::before{content:"";background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m10 17 5-5-5-5' stroke='%2351247A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e");background-repeat:no-repeat;width:1.5rem;height:1.5rem;transform:translateY(50%);position:absolute;right:1.5rem;top:.25rem}.slide-menu .controls{display:flex;margin-bottom:1rem}.slide-menu .btn{padding:.75rem 1.5rem;flex:1 0 auto;font-size:90%;color:#51247a;background-color:#fff;text-transform:uppercase;border:none;cursor:pointer;font-family:inherit;line-height:1}.slide-menu .btn:first-of-type{text-align:left}.slide-menu .btn:first-of-type:before{content:"⮜ this";margin-right:.5rem}.slide-menu .btn:last-of-type{text-align:right}.slide-menu .btn:last-of-type:before{content:"✕";margin-right:.5rem}.slide-menu .uq-header__nav-secondary-item{background-color:#48206c}.slide-menu .uq-header__nav-secondary-item:hover{background-color:#48206c}.slide-menu .uq-header__nav-secondary-link{color:#fff}.slide-menu .uq-header__nav-secondary-link:hover{color:#fff;background-color:#48206c}.slide-menu .uq-header__newglobal-nav-parent{font-weight:500}.slide-menu .uq-header__newglobal-nav-item{background-color:#51247a}.slide-menu .uq-header__newglobal-nav-link{color:#fff;background-color:#51247a}.slide-menu .uq-header__newglobal-nav-link:hover{color:#fff;background-color:#51247a}.slide-menu .uq-header__newglobal-nav-link .slide-menu__decorator::before{content:"";background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m10 17 5-5-5-5' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e")}.global-mobile-nav .uq-site-header__title-container{margin:0;padding-left:0rem;padding-right:0rem}.global-mobile-nav .uq-site-header__title{padding:1rem 1.5rem;font-size:1rem;font-weight:500}.global-mobile-nav .uq-site-header__title:hover{background:none}.global-mobile-nav__audience-link{font-weight:500}.uq-site-header__navigation-toggle{display:none}
+.uq-header{background:#51247a;display:grid;align-items:center;grid-template-columns:auto;grid-template-areas:"mainheader" "secondarynav";position:relative}@media(min-width: 64rem){.uq-header{grid-template-areas:"secondarynav" "mainheader"}}.uq-header__container{display:grid;align-items:center;grid-template-columns:1fr 15fr 1fr;grid-area:mainheader;grid-template-areas:"menutoggle logo searchtoggle" "mainnav-mobile mainnav-mobile mainnav-mobile"}@media(min-width: 64rem){.uq-header__container{max-width:73.25rem;margin-left:auto;margin-right:auto;grid-template-areas:"logo mainnav searchtoggle";padding-left:1rem;padding-right:1rem}}.uq-header__menu-toggle{grid-area:menutoggle}@media(min-width: 64rem){.uq-header__menu-toggle{display:none}}.uq-header__search-toggle{grid-area:searchtoggle;height:100%;text-align:right;color:#fff}@media(min-width: 64rem){.uq-header__search-toggle{height:auto}}.uq-header__search-toggle .search-toggle__label{display:none}@media(min-width: 64rem){.uq-header__search-toggle .search-toggle__label{display:block;font-family:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:1rem;text-align:right;width:3.2rem}}.uq-header .nav-primary__toggle{background:none;border:none;padding:1.75rem 2rem;height:100%}@media(min-width: 64rem){.uq-header .nav-primary__toggle{padding:1rem 0 1rem 1.5rem;height:auto}}.uq-header .nav-primary__menu-toggle{cursor:pointer;color:#fff;position:relative;text-indent:-9999px;white-space:nowrap}.uq-header .nav-primary__menu-toggle::before{content:"";background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4 18h16M4 12h16M4 6h16' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e");background-repeat:no-repeat;width:1.5rem;height:1.5rem;transform:translate(50%, 50%);position:absolute;top:.625rem;right:2rem}.uq-header .nav-primary__menu-toggle--is-open::before{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m5 5 14 14M19 5 5 19' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e")}.uq-header .nav-primary__search-toggle{cursor:pointer;color:#fff;position:relative}.uq-header .nav-primary__search-toggle::before{content:"";background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M10.5 17a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13Z' stroke='%23fff' stroke-width='1.5'%3e%3c/path%3e%3cpath d='M15.5 15.5 20 20' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e");background-repeat:no-repeat;width:1.5rem;height:1.5rem;transform:translate(50%, 50%);position:absolute;top:.625rem;right:2rem}@media(min-width: 64rem){.uq-header .nav-primary__search-toggle::before{top:.1rem;left:-1rem}}@media(min-width: 64rem){.uq-header .nav-primary__search-toggle:hover{color:#d4c8de;text-decoration:underline}}.uq-header .nav-primary__search-toggle--is-open::before{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m5 5 14 14M19 5 5 19' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e")}.uq-header__logo{grid-area:logo}.uq-header__logo a{display:grid;padding:1rem 0}.uq-header__logo img{height:32px}@media(min-width: 64rem){.uq-header__logo img{height:40px}}.uq-header__nav-primary{grid-area:mainnav;display:none;width:100%;z-index:99}@media(min-width: 64rem){.uq-header__nav-primary{display:block}}@media(min-width: 64rem){.uq-header__nav-primary-container{padding:0 0 0 2.5rem}}.uq-header__nav-primary-list{list-style-type:none;margin:0;padding-left:0;display:flex;justify-content:flex-start;align-items:stretch;flex-direction:column}@media(min-width: 64rem){.uq-header__nav-primary-list{align-items:center;flex-direction:row}}.uq-header__nav-primary-item{margin:0;padding-left:2rem}.uq-header__nav-primary-item:first-child{padding-left:0}.uq-header__nav-primary-item--is-open>.uq-header__megamenu{height:auto;visibility:visible}.uq-header__nav-primary-item--is-open .uq-header__nav-primary-link{border-bottom:4px solid #fff}.uq-header__nav-primary-item .uq-header__nav-primary-link--active{border-bottom:4px solid #fff}.uq-header__nav-primary-link{display:block;color:#fff;text-decoration:none;padding:1rem 1.5rem;transition:background-color .25s,border-color .25s;font-weight:400;position:relative;border-bottom:4px solid rgba(0,0,0,0)}.uq-header__nav-primary-link:hover{color:#fff;text-decoration:none}@media(min-width: 64rem){.uq-header__nav-primary-link{padding:2rem .5rem}}.uq-header .nav-primary-link--has-dropdown{padding:2rem 1.5rem 2rem .5rem}.uq-header .nav-primary-link--has-dropdown::after{content:"";background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m7 10 5 5 5-5' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e");background-repeat:no-repeat;width:1rem;height:1rem;transform:translateY(50%);position:absolute;top:1.7rem;right:1.75rem}@media(min-width: 64rem){.uq-header .nav-primary-link--has-dropdown::after{right:.25rem}}.uq-header .mega-menu{display:none;background-color:#fff;list-style-type:none;margin:0;padding-left:0}.uq-header .mega-menu li a{padding-left:3rem;color:#51247a}.uq-header .mega-menu ul{list-style-type:none;margin:0;padding-left:0}.uq-header .mega-menu ul li a{padding-left:4.5rem}.uq-header__nav-secondary{background-color:#48206c;grid-area:secondarynav}@media(min-width: 64rem){.uq-header__nav-secondary-container{text-align:right;max-width:73.25rem;margin-left:auto;margin-right:auto}}.uq-header__nav-secondary-list{list-style-type:none;margin:0;padding-left:0;display:flex;justify-content:flex-start;align-items:stretch;flex-direction:column}@media(min-width: 64rem){.uq-header__nav-secondary-list{justify-content:flex-end;align-items:center;flex-direction:row}}.uq-header__nav-secondary-item{margin:0}.uq-header__nav-secondary-link{display:block;color:#fff;padding:1rem 1.5rem}@media(min-width: 64rem){.uq-header__nav-secondary-link{font-size:.875rem;padding:.625rem 1rem}}.uq-header__nav-secondary-link:hover{color:#d4c8de}.uq-header__search{background:#51247a;position:absolute;width:100%;top:3.95rem;z-index:20;box-shadow:0 .75rem 1.5rem rgba(24,24,24,.2);transition:max-height .2s ease-in-out,transform .2s ease-in-out;transform:translateY(-1rem);max-height:0;overflow:hidden;visibility:hidden}@media(min-width: 64rem){.uq-header__search{top:8.3rem}}.uq-header__search--is-open{transform:translateY(0);max-height:50vh;visibility:visible}.uq-header__search-container{padding:0 1.5rem}@media(min-width: 64rem){.uq-header__search-container{padding-left:1rem;padding-right:1rem;max-width:73.25rem;margin-left:auto;margin-right:auto;padding-top:0;padding-bottom:1rem}}.uq-header__search-query{position:relative;display:inline-block;max-width:100%;min-width:100%;border-radius:5px;background-position:1rem;padding-top:1rem;padding-bottom:1rem}.uq-header__search-query-label{color:#fff}.uq-header__search-query-input{margin:0 !important;padding:.75rem 1rem !important}.uq-header__search-query-button{background-clip:padding-box;background-color:#fff;border-radius:5px;border:2px solid rgba(0,0,0,0);color:#51247a;display:inline-block;font-size:1rem;height:2.75rem;line-height:1.5;margin-bottom:0;margin-right:0;overflow:hidden;position:absolute;right:.5rem;text-decoration:none;text-indent:0;top:calc(50% - 1.375rem);transition:color .2s,background-color .2s,border-color .2s;width:2.75rem}.uq-header__search-query-button::before{content:"";position:absolute;display:block;width:1.5rem;height:1.5rem;top:.5rem;left:.5rem;background-size:100%;background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M10.5 17a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13Z' stroke='%2351247a' stroke-width='1.5'%3e%3c/path%3e%3cpath d='M15.5 15.5 20 20' stroke='%2351247a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e")}.uq-header__search-query-submit{color:rgba(0,0,0,0);position:relative;display:block;width:100%;height:100%;margin:0;border:0;background-color:rgba(0,0,0,0);z-index:3;cursor:pointer;outline-offset:-2px;font-size:1rem}.uq-header__search-range{display:inline-block}.uq-header__search-range label{color:#fff}.uq-header .uq-header__search-radio:checked{border-color:#fff}.uq-header .uq-header__search-radio:checked:focus{border-color:#fff}.uq-header .uq-header__search-radio:checked::after{background-color:#fff}.uq-header__search-label{font-size:.8rem !important;line-height:1.7 !important}@media(min-width: 64rem){.uq-header__search-label{font-size:1rem !important;line-height:1.4 !important}}@media(max-width: 63.9375rem){.uq-header__nav-primary,.uq-header__nav-secondary{display:none}}.uq-header__megamenu{position:absolute;top:8.3rem;left:0;width:100%;z-index:30;height:0;visibility:hidden}.uq-header__megamenu-container{max-width:73.25rem;margin-left:auto;margin-right:auto;padding:1rem 3rem 2.5rem 3rem;background:#fff;box-shadow:0 .75rem 1.5rem rgba(24,24,24,.2);border-radius:0 0 .25rem .25rem}@media(min-width: 75rem){.uq-header__megamenu-container{max-width:77.25rem}}.uq-header .megamenu__row{display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr))}.uq-header .megamenu__overview-link{display:block;padding:1rem 0;color:#51247a}.uq-header .megamenu__heading{color:#51247a;font-weight:500;padding-top:.25rem;padding-bottom:.25rem}.uq-header .megamenu__heading:nth-of-type(2){padding-top:2.5rem}.uq-header .megamenu__menu ul{list-style-type:none;margin:0;padding-left:0}.uq-header .megamenu__menu ul li{margin:0}.uq-header .megamenu__menu ul li a{display:inline-block;padding-top:.5rem;color:#51247a}:root{--app-height: 100%}body.no-scroll{position:fixed;max-width:100%}@media(min-width: 64rem){body.no-scroll{position:relative}}.slide-menu{width:100%;max-width:100%;background-color:#fff;height:calc(var(--app-height) - 4.3rem);display:none;box-sizing:border-box;transition:transform .3s ease-in-out;transform:translateX(100%);will-change:transform;z-index:1000;grid-area:mainnav-mobile;position:fixed;top:4.3rem;right:0;overflow-y:auto;overflow-x:hidden;font-size:1rem;color:#51247a}@media(min-width: 64rem){.slide-menu{display:none !important}}.slide-menu .slide-menu__slider{width:100%;transform:translateX(0);transition:transform .3s ease-in-out;will-change:transform}.slide-menu ul{position:relative;width:100%;margin:0;padding-left:0;list-style:none;background-color:#fff}.slide-menu ul ul{position:absolute;top:0;left:100%;display:none}.slide-menu ul ul a{padding:.75rem 1.5rem .75rem 3rem}.slide-menu ul a{display:block}.slide-menu li{margin-bottom:0}.slide-menu li:hover{background-color:#f1f1f1}.slide-menu .slide-menu__control{padding-top:1rem;padding-bottom:1rem}.slide-menu a{cursor:pointer;padding:.75rem 1.5rem;text-decoration:none;font-size:1rem;color:#51247a;position:relative}.slide-menu a:hover{color:#51247a;background-color:#f1f1f1}.slide-menu .slide-menu__backlink{font-weight:500;padding-left:3rem}.slide-menu .slide-menu__backlink::before{content:"";background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m14 7-5 5 5 5' stroke='%2351247a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e");background-repeat:no-repeat;width:1.5rem;height:1.5rem;transform:translateY(50%);position:absolute;left:1.25rem;top:.25rem}.slide-menu__decorator::before{content:"";background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m10 17 5-5-5-5' stroke='%2351247a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e");background-repeat:no-repeat;width:1.5rem;height:1.5rem;transform:translateY(50%);position:absolute;right:1.5rem;top:.25rem}.slide-menu .controls{display:flex;margin-bottom:1rem}.slide-menu .btn{padding:.75rem 1.5rem;flex:1 0 auto;font-size:90%;color:#51247a;background-color:#fff;text-transform:uppercase;border:none;cursor:pointer;font-family:inherit;line-height:1}.slide-menu .btn:first-of-type{text-align:left}.slide-menu .btn:first-of-type:before{content:"⮜ this";margin-right:.5rem}.slide-menu .btn:last-of-type{text-align:right}.slide-menu .btn:last-of-type:before{content:"✕";margin-right:.5rem}.slide-menu .uq-header__nav-secondary-item{background-color:#48206c}.slide-menu .uq-header__nav-secondary-item:hover{background-color:#48206c}.slide-menu .uq-header__nav-secondary-link{color:#fff}.slide-menu .uq-header__nav-secondary-link:hover{color:#fff;background-color:#48206c}.slide-menu .uq-header__newglobal-nav-parent{font-weight:500}.slide-menu .uq-header__newglobal-nav-item{background-color:#51247a}.slide-menu .uq-header__newglobal-nav-link{color:#fff;background-color:#51247a}.slide-menu .uq-header__newglobal-nav-link:hover{color:#fff;background-color:#51247a}.slide-menu .uq-header__newglobal-nav-link .slide-menu__decorator::before{content:"";background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m10 17 5-5-5-5' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e")}.global-mobile-nav .uq-site-header__title-container{margin:0;padding:1rem 1.5rem}.global-mobile-nav .uq-site-header__title{padding:0;font-size:1rem;font-weight:500;display:block}.global-mobile-nav .uq-site-header__title:hover{background:none}.global-mobile-nav__audience-link{font-weight:500}.uq-site-header__navigation-toggle{display:none}.admin-menu .slide-menu{top:7.5rem}@media(min-width: 37.5rem){.admin-menu .slide-menu{top:6.15rem}}.uq-header{line-height:1.5;font-family:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif}.uq-header__logo img{max-width:unset}.uq-header__search-query-submit{background-color:unset !important}.uq-header__search-range .uq-header__search-label{max-width:unset}.uq-header__nav-primary-list li{margin:0}.uq-header__nav-primary-list li:hover .uq-header__nav-primary-link{border-bottom:4px solid #fff}.uq-header__nav-primary-link,.uq-header__nav-primary-link:focus{display:block;color:#fff;text-decoration:none;transition:background-color .25s,border-color .25s;font-weight:400;position:relative;border-bottom:4px solid rgba(0,0,0,0)}.uq-header a:focus{color:#d4c8de}.uq-header__search-container form,.uq-header__search-container fieldset{border:unset;padding:0;margin:0}.uq-header__search-query-input{height:45px !important}.uq-header .nav-primary__search-toggle{margin-bottom:0}.uq-header .nav-primary__menu-toggle{margin-bottom:0 !important;font:initial;font-size:.833rem;line-height:normal}.uq-header__search-range{display:inline-block}.uq-header__search-range input[type=radio]{height:20px;width:20px;vertical-align:top;display:inline-block;border-radius:50%;background-color:rgba(0,0,0,0);margin:3px 3px 0 5px;position:absolute;appearance:none;-webkit-appearance:none;border:1px solid #e7e3e0;cursor:pointer}.uq-header__search-range input[type=radio]+label{margin-bottom:1rem;margin-left:.5rem;margin-right:1rem;padding-top:.125rem;padding-left:1.5rem}.uq-header__search-range label{color:#fff;font-weight:400;display:inline-block;vertical-align:top}input[type=radio].uq-header__search-radio:checked{border-color:#fff;border-width:2px}input[type=radio].uq-header__search-radio:focus{border-color:#fff}input[type=radio].uq-header__search-radio:checked::after{content:"";background-color:#fff;border-radius:50%;content:"";display:block;position:absolute;top:3px;left:3px;height:10px;width:10px}

package/dist/js/uqds.js

@@ -1,11 +1,5 @@
 "use strict";
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-
 var uq = function (exports) {
   'use strict';
   /**
@@ -15,90 +9,75 @@ var uq = function (exports) {
    * TODO: make this class configurable
    */
 
-  var NewHeader = /*#__PURE__*/function () {
-    function NewHeader(el) {
-      _classCallCheck(this, NewHeader);
-
+  class NewHeader {
+    constructor(el) {
       this.init(el);
     }
 
-    _createClass(NewHeader, [{
-      key: "init",
-      value: function init(el) {
-        var _this = this;
-
-        this.menuToggle = el.querySelector('.nav-primary__menu-toggle');
-        this.searchToggle = el.querySelector('.nav-primary__search-toggle');
-        this.searchLabel = el.querySelector('.search-toggle__label');
-        this.searchBlock = el.querySelector('.uq-header__search');
-        this.searchInput = el.querySelector('.uq-header__search-query-input');
-        this.menuToggle.addEventListener('click', function () {
-          document.body.classList.toggle('no-scroll');
-
-          _this.menuToggle.classList.toggle('nav-primary__menu-toggle--is-open');
-
-          _this.searchToggle.classList.remove('nav-primary__search-toggle--is-open');
-
-          _this.searchBlock.classList.remove('uq-header__search--is-open');
-        });
-        this.searchToggle.addEventListener('click', function (e) {
-          document.body.classList.remove('no-scroll');
-
-          _this.searchToggle.classList.toggle('nav-primary__search-toggle--is-open');
-
-          _this.searchBlock.classList.toggle('uq-header__search--is-open');
-
-          _this.menuToggle.classList.remove('nav-primary__menu-toggle--is-open');
+    init(el) {
+      this.menuToggle = el.querySelector(".nav-primary__menu-toggle");
+      this.searchToggle = el.querySelector(".nav-primary__search-toggle");
+      this.searchLabel = el.querySelector(".search-toggle__label");
+      this.searchBlock = el.querySelector(".uq-header__search");
+      this.searchInput = el.querySelector(".uq-header__search-query-input");
+      this.menuToggle.addEventListener("click", () => {
+        document.body.classList.toggle("no-scroll");
+        this.menuToggle.classList.toggle("nav-primary__menu-toggle--is-open");
+        this.searchToggle.classList.remove("nav-primary__search-toggle--is-open");
+        this.searchBlock.classList.remove("uq-header__search--is-open");
+        this.searchLabel.innerHTML = "Search";
+      });
+      this.searchToggle.addEventListener("click", e => {
+        document.body.classList.remove("no-scroll");
+        this.searchToggle.classList.toggle("nav-primary__search-toggle--is-open");
+        this.searchBlock.classList.toggle("uq-header__search--is-open");
+        this.menuToggle.classList.remove("nav-primary__menu-toggle--is-open");
+
+        if (this.searchBlock.classList.contains("uq-header__search--is-open")) {
+          this.searchInput.focus();
+        } else {
+          this.searchInput.blur();
+          this.searchToggle.blur();
+        }
 
-          if (_this.searchBlock.classList.contains('uq-header__search--is-open')) {
-            _this.searchInput.focus();
-          } else {
-            _this.searchInput.blur();
+        if (this.searchLabel.innerHTML === "Search") {
+          this.searchLabel.innerHTML = "Close";
+        } else {
+          this.searchLabel.innerHTML = "Search";
+        }
 
-            _this.searchToggle.blur();
-          }
+        e.preventDefault();
+      }); // megamenu
 
-          if (_this.searchLabel.innerHTML === "Search") {
-            _this.searchLabel.innerHTML = "Close";
-          } else {
-            _this.searchLabel.innerHTML = "Search";
-          }
+      const megaMenuItem = document.querySelectorAll(".uq-header__nav-primary-item");
+      megaMenuItem.forEach(item => {
+        item.addEventListener("mouseenter", this.handleToggle);
+        item.addEventListener("mouseleave", this.handleToggle);
+      });
+    }
 
-          e.preventDefault();
-        }); // megamenu
+    handleToggle(event) {
+      let menuItem = event.target;
 
-        var megaMenuItem = document.querySelectorAll('.uq-header__nav-primary-item');
-        megaMenuItem.forEach(function (item) {
-          item.addEventListener('mouseenter', _this.handleToggle);
-          item.addEventListener('mouseleave', _this.handleToggle);
-        });
+      if (menuItem.tagName !== "LI") {
+        menuItem = menuItem.parentElement;
       }
-    }, {
-      key: "handleToggle",
-      value: function handleToggle(event) {
-        var menuItem = event.target;
 
-        if (menuItem.tagName !== 'LI') {
-          menuItem = menuItem.parentElement;
+      menuItem.eventType = event.type;
+      window.setTimeout(function () {
+        if ((event.type === "mouseenter" || event.type === "mouseleave") && window.matchMedia("(max-width: 1024px)").matches) {
+          return;
         }
 
-        menuItem.eventType = event.type;
-        window.setTimeout(function () {
-          if ((event.type === 'mouseenter' || event.type === 'mouseleave') && window.matchMedia('(max-width: 1024px)').matches) {
-            return;
-          }
-
-          if (menuItem.eventType === 'mouseenter') {
-            menuItem.classList.add('uq-header__nav-primary-item--is-open');
-          } else {
-            menuItem.classList.remove('uq-header__nav-primary-item--is-open');
-          }
-        }, 250);
-      }
-    }]);
+        if (menuItem.eventType === "mouseenter") {
+          menuItem.classList.add("uq-header__nav-primary-item--is-open");
+        } else {
+          menuItem.classList.remove("uq-header__nav-primary-item--is-open");
+        }
+      }, 250);
+    }
 
-    return NewHeader;
-  }();
+  }
 
   exports.header = NewHeader;
   Object.defineProperty(exports, '__esModule', {

package/dist/js/uqds.min.js

@@ -1 +1 @@
-"use strict";function _classCallCheck(e,r){if(!(e instanceof r))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,r){for(var a=0;a<r.length;a++){var t=r[a];t.enumerable=t.enumerable||!1,t.configurable=!0,"value"in t&&(t.writable=!0),Object.defineProperty(e,t.key,t)}}function _createClass(e,r,a){return r&&_defineProperties(e.prototype,r),a&&_defineProperties(e,a),Object.defineProperty(e,"prototype",{writable:!1}),e}var uq=function(e){var r=function(){function r(e){_classCallCheck(this,r),this.init(e)}return _createClass(r,[{key:"init",value:function(e){var r=this;this.menuToggle=e.querySelector(".nav-primary__menu-toggle"),this.searchToggle=e.querySelector(".nav-primary__search-toggle"),this.searchLabel=e.querySelector(".search-toggle__label"),this.searchBlock=e.querySelector(".uq-header__search"),this.searchInput=e.querySelector(".uq-header__search-query-input"),this.menuToggle.addEventListener("click",function(){document.body.classList.toggle("no-scroll"),r.menuToggle.classList.toggle("nav-primary__menu-toggle--is-open"),r.searchToggle.classList.remove("nav-primary__search-toggle--is-open"),r.searchBlock.classList.remove("uq-header__search--is-open")}),this.searchToggle.addEventListener("click",function(e){document.body.classList.remove("no-scroll"),r.searchToggle.classList.toggle("nav-primary__search-toggle--is-open"),r.searchBlock.classList.toggle("uq-header__search--is-open"),r.menuToggle.classList.remove("nav-primary__menu-toggle--is-open"),r.searchBlock.classList.contains("uq-header__search--is-open")?r.searchInput.focus():(r.searchInput.blur(),r.searchToggle.blur()),"Search"===r.searchLabel.innerHTML?r.searchLabel.innerHTML="Close":r.searchLabel.innerHTML="Search",e.preventDefault()}),document.querySelectorAll(".uq-header__nav-primary-item").forEach(function(e){e.addEventListener("mouseenter",r.handleToggle),e.addEventListener("mouseleave",r.handleToggle)})}},{key:"handleToggle",value:function(e){var r=e.target;(r="LI"!==r.tagName?r.parentElement:r).eventType=e.type,window.setTimeout(function(){("mouseenter"===e.type||"mouseleave"===e.type)&&window.matchMedia("(max-width: 1024px)").matches||("mouseenter"===r.eventType?r.classList.add("uq-header__nav-primary-item--is-open"):r.classList.remove("uq-header__nav-primary-item--is-open"))},250)}}]),r}();return e.header=r,Object.defineProperty(e,"__esModule",{value:!0}),e}({});
+"use strict";var uq=function(e){return e.header=class{constructor(e){this.init(e)}init(e){this.menuToggle=e.querySelector(".nav-primary__menu-toggle"),this.searchToggle=e.querySelector(".nav-primary__search-toggle"),this.searchLabel=e.querySelector(".search-toggle__label"),this.searchBlock=e.querySelector(".uq-header__search"),this.searchInput=e.querySelector(".uq-header__search-query-input"),this.menuToggle.addEventListener("click",()=>{document.body.classList.toggle("no-scroll"),this.menuToggle.classList.toggle("nav-primary__menu-toggle--is-open"),this.searchToggle.classList.remove("nav-primary__search-toggle--is-open"),this.searchBlock.classList.remove("uq-header__search--is-open"),this.searchLabel.innerHTML="Search"}),this.searchToggle.addEventListener("click",e=>{document.body.classList.remove("no-scroll"),this.searchToggle.classList.toggle("nav-primary__search-toggle--is-open"),this.searchBlock.classList.toggle("uq-header__search--is-open"),this.menuToggle.classList.remove("nav-primary__menu-toggle--is-open"),this.searchBlock.classList.contains("uq-header__search--is-open")?this.searchInput.focus():(this.searchInput.blur(),this.searchToggle.blur()),"Search"===this.searchLabel.innerHTML?this.searchLabel.innerHTML="Close":this.searchLabel.innerHTML="Search",e.preventDefault()});const s=document.querySelectorAll(".uq-header__nav-primary-item");s.forEach(e=>{e.addEventListener("mouseenter",this.handleToggle),e.addEventListener("mouseleave",this.handleToggle)})}handleToggle(e){let s=e.target;(s="LI"!==s.tagName?s.parentElement:s).eventType=e.type,window.setTimeout(function(){("mouseenter"===e.type||"mouseleave"===e.type)&&window.matchMedia("(max-width: 1024px)").matches||("mouseenter"===s.eventType?s.classList.add("uq-header__nav-primary-item--is-open"):s.classList.remove("uq-header__nav-primary-item--is-open"))},250)}},Object.defineProperty(e,"__esModule",{value:!0}),e}({});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uqds/header",
-  "version": "0.0.9-alpha.0",
+  "version": "0.0.12-alpha.0",
   "description": "The POC UQ Header component package",
   "keywords": [
     "uqds",
@@ -37,13 +37,13 @@
     "url": "https://github.com/uq-its-ss/design-system/issues"
   },
   "dependencies": {
-    "@uqds/core": "^0.0.8-alpha.0",
-    "@uqds/form": "^0.0.8-alpha.0",
-    "@uqds/grid": "^0.0.8-alpha.0",
-    "@uqds/icon": "^0.0.8-alpha.0"
+    "@uqds/core": "^0.0.12-alpha.0",
+    "@uqds/form": "^0.0.12-alpha.0",
+    "@uqds/grid": "^0.0.12-alpha.0",
+    "@uqds/icon": "^0.0.12-alpha.0"
   },
   "devDependencies": {
     "gulp": "^4.0.2"
   },
-  "gitHead": "0e14a23de6d15dc47a4a8b9fbaa238d51faceb6c"
+  "gitHead": "125e487dfd2f7e46f2b29cc0e8646b92e61d6f2c"
 }

package/src/js/header.js

@@ -1,4 +1,4 @@
-'use strict';
+"use strict";
 
 /**
  * NewHeader module
@@ -13,25 +13,26 @@ class NewHeader {
   }
 
   init(el) {
-    this.menuToggle = el.querySelector('.nav-primary__menu-toggle');
-    this.searchToggle = el.querySelector('.nav-primary__search-toggle');
-    this.searchLabel = el.querySelector('.search-toggle__label');
-    this.searchBlock = el.querySelector('.uq-header__search');
-    this.searchInput = el.querySelector('.uq-header__search-query-input');
+    this.menuToggle = el.querySelector(".nav-primary__menu-toggle");
+    this.searchToggle = el.querySelector(".nav-primary__search-toggle");
+    this.searchLabel = el.querySelector(".search-toggle__label");
+    this.searchBlock = el.querySelector(".uq-header__search");
+    this.searchInput = el.querySelector(".uq-header__search-query-input");
 
-    this.menuToggle.addEventListener('click', () => {
-      document.body.classList.toggle('no-scroll');
-      this.menuToggle.classList.toggle('nav-primary__menu-toggle--is-open');
-      this.searchToggle.classList.remove('nav-primary__search-toggle--is-open');
-      this.searchBlock.classList.remove('uq-header__search--is-open');
+    this.menuToggle.addEventListener("click", () => {
+      document.body.classList.toggle("no-scroll");
+      this.menuToggle.classList.toggle("nav-primary__menu-toggle--is-open");
+      this.searchToggle.classList.remove("nav-primary__search-toggle--is-open");
+      this.searchBlock.classList.remove("uq-header__search--is-open");
+      this.searchLabel.innerHTML = "Search";
     });
 
-    this.searchToggle.addEventListener('click', (e) => {
-      document.body.classList.remove('no-scroll');
-      this.searchToggle.classList.toggle('nav-primary__search-toggle--is-open');
-      this.searchBlock.classList.toggle('uq-header__search--is-open');
-      this.menuToggle.classList.remove('nav-primary__menu-toggle--is-open');
-      if (this.searchBlock.classList.contains('uq-header__search--is-open')) {
+    this.searchToggle.addEventListener("click", (e) => {
+      document.body.classList.remove("no-scroll");
+      this.searchToggle.classList.toggle("nav-primary__search-toggle--is-open");
+      this.searchBlock.classList.toggle("uq-header__search--is-open");
+      this.menuToggle.classList.remove("nav-primary__menu-toggle--is-open");
+      if (this.searchBlock.classList.contains("uq-header__search--is-open")) {
         this.searchInput.focus();
       } else {
         this.searchInput.blur();
@@ -46,33 +47,34 @@ class NewHeader {
     });
 
     // megamenu
-    const megaMenuItem = document.querySelectorAll('.uq-header__nav-primary-item');
+    const megaMenuItem = document.querySelectorAll(
+      ".uq-header__nav-primary-item"
+    );
     megaMenuItem.forEach((item) => {
-      item.addEventListener('mouseenter', this.handleToggle);
-      item.addEventListener('mouseleave', this.handleToggle);
+      item.addEventListener("mouseenter", this.handleToggle);
+      item.addEventListener("mouseleave", this.handleToggle);
     });
-
   }
 
   handleToggle(event) {
     let menuItem = event.target;
-    if (menuItem.tagName !== 'LI') {
+    if (menuItem.tagName !== "LI") {
       menuItem = menuItem.parentElement;
     }
     menuItem.eventType = event.type;
 
-    window.setTimeout(function() { 
+    window.setTimeout(function () {
       if (
-        (event.type === 'mouseenter' || event.type === 'mouseleave') &&
-        window.matchMedia('(max-width: 1024px)').matches
+        (event.type === "mouseenter" || event.type === "mouseleave") &&
+        window.matchMedia("(max-width: 1024px)").matches
       ) {
         return;
       }
 
-      if (menuItem.eventType === 'mouseenter') {
-        menuItem.classList.add('uq-header__nav-primary-item--is-open');
-      } else  {
-        menuItem.classList.remove('uq-header__nav-primary-item--is-open');
+      if (menuItem.eventType === "mouseenter") {
+        menuItem.classList.add("uq-header__nav-primary-item--is-open");
+      } else {
+        menuItem.classList.remove("uq-header__nav-primary-item--is-open");
       }
     }, 250);
   }

package/src/js/main.js

@@ -1,4 +1,2 @@
-import header from './header';
-export { 
-  header
-};
+import header from "./header";
+export { header };

package/src/scss/_component.scss

@@ -1,10 +1,9 @@
-@use '@uqds/core/src/scss/global' as core;
+@use "@uqds/core/src/scss/global" as core;
 @use "@uqds/icon/src/scss/global" as icon-constants;
-@use '@uqds/grid/src/scss/global' as grid;
-@use 'global' as *;
+@use "@uqds/grid/src/scss/global" as grid;
+@use "global" as *;
 
 .uq-header {
-
   background: core.$uq-purple; //linear-gradient(90deg, $uq-purple 0%, 87%, #962A8B 100%);
   display: grid;
   align-items: center;
@@ -16,32 +15,30 @@
 
   @media #{core.$screen-lg-up} {
     grid-template-areas:
-    "secondarynav"
-    "mainheader";
+      "secondarynav"
+      "mainheader";
   }
- 
-  &__container {
 
+  &__container {
     display: grid;
     align-items: center;
     grid-template-columns: 1fr 15fr 1fr;
     grid-area: mainheader;
     grid-template-areas:
-    "menutoggle logo searchtoggle"
-    "mainnav-mobile mainnav-mobile mainnav-mobile";
+      "menutoggle logo searchtoggle"
+      "mainnav-mobile mainnav-mobile mainnav-mobile";
 
     @media #{core.$screen-lg-up} {
       max-width: 73.25rem;
       margin-left: auto;
       margin-right: auto;
-      grid-template-areas:
-        "logo mainnav searchtoggle";
+      grid-template-areas: "logo mainnav searchtoggle";
       padding-left: core.$space;
       padding-right: core.$space;
     }
   }
 
-  &__menu-toggle  {
+  &__menu-toggle {
     grid-area: menutoggle;
 
     @media #{core.$screen-lg-up} {
@@ -88,24 +85,30 @@
     cursor: pointer;
     color: core.$uq-white;
     position: relative;
-    text-indent: -9999px;                 
-    white-space: nowrap;            
+    text-indent: -9999px;
+    white-space: nowrap;
 
     &::before {
       content: "";
-      background-image: url(icon-constants.get-icon("standard--navigation-menu", core.$uq-white));
+      background-image: url(icon-constants.get-icon(
+        "standard--navigation-menu",
+        core.$uq-white
+      ));
       background-repeat: no-repeat;
       width: 1.5rem;
       height: 1.5rem;
       transform: translate(50%, 50%);
       position: absolute;
-      top: .625rem;
+      top: 0.625rem;
       right: core.$space-l;
     }
 
     &--is-open {
       &::before {
-        background-image: url(icon-constants.get-icon("standard--x", core.$uq-white));
+        background-image: url(icon-constants.get-icon(
+          "standard--x",
+          core.$uq-white
+        ));
       }
     }
   }
@@ -117,15 +120,18 @@
 
     &::before {
       content: "";
-      background-image: url(icon-constants.get-icon("standard--search", core.$uq-white));
+      background-image: url(icon-constants.get-icon(
+        "standard--search",
+        core.$uq-white
+      ));
       background-repeat: no-repeat;
       width: 1.5rem;
       height: 1.5rem;
       transform: translate(50%, 50%);
       position: absolute;
-      top: .625rem;
+      top: 0.625rem;
       right: core.$space-l;
-      
+
       @media #{core.$screen-lg-up} {
         top: 0.1rem;
         left: -1rem;
@@ -140,18 +146,18 @@
     }
 
     &--is-open {
-
       &::before {
-        background-image: url(icon-constants.get-icon("standard--x", core.$uq-white));
+        background-image: url(icon-constants.get-icon(
+          "standard--x",
+          core.$uq-white
+        ));
       }
     }
-
   }
 
   &__logo {
     grid-area: logo;
 
-
     & a {
       display: grid;
       padding: 1rem 0;
@@ -180,7 +186,6 @@
   }
 
   &__nav-primary-container {
-    
     @media #{core.$screen-lg-up} {
       padding: 0 0 0 core.$space-xl;
     }
@@ -194,7 +199,7 @@
     justify-content: flex-start;
     align-items: stretch;
     flex-direction: column;
-    
+
     @media #{core.$screen-lg-up} {
       align-items: center;
       flex-direction: row;
@@ -230,7 +235,7 @@
     color: core.$uq-white; //core.$uq-purple;
     text-decoration: none;
     padding: core.$space core.$space-m;
-    transition: background-color .25s,border-color .25s;
+    transition: background-color 0.25s, border-color 0.25s;
     font-weight: 400;
     position: relative;
     border-bottom: 4px solid transparent;
@@ -240,7 +245,6 @@
       text-decoration: none;
     }
 
-
     @media #{core.$screen-lg-up} {
       padding: core.$space-l core.$space-s;
     }
@@ -251,7 +255,10 @@
 
     &::after {
       content: "";
-      background-image: url(icon-constants.get-icon("standard--chevron-down-sml", core.$uq-white));
+      background-image: url(icon-constants.get-icon(
+        "standard--chevron-down-sml",
+        core.$uq-white
+      ));
       background-repeat: no-repeat;
       width: core.$space;
       height: core.$space;
@@ -261,7 +268,7 @@
       right: 1.75rem;
 
       @media #{core.$screen-lg-up} {
-        right: .25rem;
+        right: 0.25rem;
       }
     }
   }
@@ -274,7 +281,6 @@
     padding-left: 0;
 
     & li {
-
       & a {
         padding-left: core.$space-xxl;
         color: core.$uq-purple;
@@ -288,7 +294,7 @@
 
       & li {
         & a {
-          padding-left: core.$space-ul;        
+          padding-left: core.$space-ul;
         }
       }
     }
@@ -316,7 +322,7 @@
     justify-content: flex-start;
     align-items: stretch;
     flex-direction: column;
-    
+
     @media #{core.$screen-lg-up} {
       justify-content: flex-end;
       align-items: center;
@@ -335,7 +341,7 @@
 
     @media #{core.$screen-lg-up} {
       font-size: core.$font-size-s;
-      padding: .625rem core.$space;
+      padding: 0.625rem core.$space;
     }
 
     &:hover {
@@ -344,14 +350,13 @@
   }
 
   &__search {
-
     background: core.$uq-purple;
     position: absolute;
     width: 100%;
     top: 3.95rem;
     z-index: 20;
-    box-shadow: 0 .75rem core.$space-m rgb(24 24 24 / 20%);
-    transition:  max-height .2s ease-in-out, transform .2s ease-in-out;//, visibility .2s ease;
+    box-shadow: 0 0.75rem core.$space-m rgb(24 24 24 / 20%);
+    transition: max-height 0.2s ease-in-out, transform 0.2s ease-in-out; //, visibility .2s ease;
     transform: translateY(-1rem);
     max-height: 0;
     overflow: hidden;
@@ -361,7 +366,7 @@
       top: 8.3rem;
     }
 
-    &--is-open {    
+    &--is-open {
       transform: translateY(0);
       max-height: 50vh;
       visibility: visible;
@@ -369,7 +374,6 @@
   }
 
   &__search-container {
-    
     padding: 0 core.$space-m;
 
     @media #{core.$screen-lg-up} {
@@ -400,7 +404,7 @@
 
   &__search-query-input {
     margin: 0 !important;
-    padding: .75rem core.$space !important;
+    padding: 0.75rem core.$space !important;
   }
 
   &__search-query-button {
@@ -421,7 +425,7 @@
     text-decoration: none;
     text-indent: 0;
     top: calc(50% - 1.375rem);
-    transition: color .2s,background-color .2s,border-color .2s;
+    transition: color 0.2s, background-color 0.2s, border-color 0.2s;
     width: 2.75rem;
 
     &::before {
@@ -433,7 +437,10 @@
       top: core.$space-s;
       left: core.$space-s;
       background-size: 100%;
-      background-image: url(icon-constants.get-icon("standard--search", core.$uq-purple));
+      background-image: url(icon-constants.get-icon(
+        "standard--search",
+        core.$uq-purple
+      ));
     }
   }
 
@@ -453,30 +460,29 @@
   }
 
   &__search-range {
-
     display: inline-block;
 
     & label {
       color: core.$uq-white;
     }
   }
-  
+
   .uq-header__search-radio {
     &:checked {
-        border-color: core.$uq-white;
+      border-color: core.$uq-white;
 
-        &:focus {
-            border-color: core.$uq-white;
-        }
+      &:focus {
+        border-color: core.$uq-white;
+      }
 
-        &::after {
-            background-color: core.$uq-white;
-        }
+      &::after {
+        background-color: core.$uq-white;
+      }
     }
   }
 
   &__search-label {
-    font-size: .8rem !important;
+    font-size: 0.8rem !important;
     line-height: 1.7 !important;
 
     @media #{core.$screen-lg-up} {
@@ -510,8 +516,8 @@
     padding: core.$space core.$space-xxl core.$space-xl core.$space-xxl;
     background: core.$uq-white;
     box-shadow: 0 0.75rem core.$space-m rgb(24 24 24 / 20%);
-    border-radius: 0 0 .25rem .25rem;
-    
+    border-radius: 0 0 0.25rem 0.25rem;
+
     @media #{core.$screen-xl-up} {
       max-width: 77.25rem;
     }
@@ -556,7 +562,7 @@
       }
     }
   }
-} 
+}
 
 :root {
   --app-height: 100%;
@@ -564,65 +570,66 @@
 
 body.no-scroll {
   position: fixed;
+  max-width: 100%;
   @media #{core.$screen-lg-up} {
     position: relative;
   }
 }
 
-// Slide mobile menu 
+// Slide mobile menu
 
 .slide-menu {
-  width:100%;
-  max-width:100%;
-  background-color:#FFFFFF;
+  width: 100%;
+  max-width: 100%;
+  background-color: #ffffff;
   height: calc(var(--app-height) - 4.3rem);
-  display:none;
-  box-sizing:border-box;
-  transition:transform .3s ease-in-out;
-  transform:translateX(100%);
-  will-change:transform;
-  z-index:1000;
+  display: none;
+  box-sizing: border-box;
+  transition: transform 0.3s ease-in-out;
+  transform: translateX(100%);
+  will-change: transform;
+  z-index: 1000;
   grid-area: mainnav-mobile;
-  position:fixed;
+  position: fixed;
   top: 4.3rem;
-  right:core.$space-none;
-  overflow-y:auto;
-  overflow-x:hidden;
+  right: core.$space-none;
+  overflow-y: auto;
+  overflow-x: hidden;
   font-size: core.$font-size;
-  color:core.$uq-purple;
+  color: core.$uq-purple;
 
   @media #{core.$screen-lg-up} {
     display: none !important;
   }
 
   .slide-menu__slider {
-    width:100%;
-    transform:translateX(0);
-    transition:transform .3s ease-in-out;
-    will-change:transform;
+    width: 100%;
+    transform: translateX(0);
+    transition: transform 0.3s ease-in-out;
+    will-change: transform;
   }
 
   ul {
-    position:relative;
-    width:100%;
-    margin:core.$space-none;
-    padding-left:core.$space-none;
-    list-style:none; 
+    position: relative;
+    width: 100%;
+    margin: core.$space-none;
+    padding-left: core.$space-none;
+    list-style: none;
     background-color: core.$uq-white;
 
     ul {
-      position:absolute;
-      top:core.$space-none;
-      left:100%;
-      display:none;
+      position: absolute;
+      top: core.$space-none;
+      left: 100%;
+      display: none;
 
       a {
-        padding: .75rem core.$space-m .75rem core.$space-xxl;
+        padding: 0.75rem core.$space-m 0.75rem core.$space-xxl;
       }
     }
 
     a {
-      display:block;
+      display: block;
     }
   }
 
@@ -630,9 +637,8 @@ body.no-scroll {
     margin-bottom: core.$space-none;
 
     &:hover {
-      background-color:#f1f1f1;
+      background-color: #f1f1f1;
     }
-
   }
 
   .slide-menu__control {
@@ -641,16 +647,16 @@ body.no-scroll {
   }
 
   a {
-    cursor:pointer;
-    padding: .75rem core.$space-m;
-    text-decoration:none;
+    cursor: pointer;
+    padding: 0.75rem core.$space-m;
+    text-decoration: none;
     font-size: core.$font-size;
-    color:core.$uq-purple;
+    color: core.$uq-purple;
     position: relative;
 
     &:hover {
-      color:core.$uq-purple;
-      background-color:#f1f1f1;
+      color: core.$uq-purple;
+      background-color: #f1f1f1;
     }
   }
 
@@ -660,7 +666,10 @@ body.no-scroll {
 
     &::before {
       content: "";
-      background-image: url(icon-constants.get-icon("standard--chevron-left-sml", core.$uq-purple));
+      background-image: url(icon-constants.get-icon(
+        "standard--chevron-left-sml",
+        core.$uq-purple
+      ));
       background-repeat: no-repeat;
       width: 1.5rem;
       height: 1.5rem;
@@ -672,10 +681,12 @@ body.no-scroll {
   }
 
   &__decorator {
-  
     &::before {
       content: "";
-      background-image: url(icon-constants.get-icon("standard--chevron-right-sml", core.$uq-purple));
+      background-image: url(icon-constants.get-icon(
+        "standard--chevron-right-sml",
+        core.$uq-purple
+      ));
       background-repeat: no-repeat;
       width: 1.5rem;
       height: 1.5rem;
@@ -688,55 +699,56 @@ body.no-scroll {
 
   /* Controls */
   .controls {
-    display:flex;
-    margin-bottom:core.$space;
+    display: flex;
+    margin-bottom: core.$space;
   }
 
   .btn {
-    padding:.75rem core.$space-m;
-    flex:1 0 auto;
-    font-size:90%;
-    color:core.$uq-purple;
-    background-color:core.$uq-white;
-    text-transform:uppercase;
-
-    border:none;
-    cursor:pointer;
-    font-family:inherit;
-    line-height:1;
+    padding: 0.75rem core.$space-m;
+    flex: 1 0 auto;
+    font-size: 90%;
+    color: core.$uq-purple;
+    background-color: core.$uq-white;
+    text-transform: uppercase;
+
+    border: none;
+    cursor: pointer;
+    font-family: inherit;
+    line-height: 1;
 
     &:first-of-type {
-      text-align:left;
+      text-align: left;
 
       &:before {
-        content:"⮜ this";
-        margin-right:.5rem;
+        content: "⮜ this";
+        margin-right: 0.5rem;
       }
     }
 
     &:last-of-type {
-      text-align:right;
+      text-align: right;
 
-      &:before {content:"✕";
-        margin-right:.5rem;
+      &:before {
+        content: "✕";
+        margin-right: 0.5rem;
       }
     }
   }
 
   .uq-header__nav-secondary-item {
-    background-color:#48206C;
+    background-color: #48206c;
 
     &:hover {
-      background-color:#48206C;
+      background-color: #48206c;
     }
   }
 
   .uq-header__nav-secondary-link {
-    color:core.$uq-white;
+    color: core.$uq-white;
 
     &:hover {
-      color:core.$uq-white;
-      background-color:#48206C;
+      color: core.$uq-white;
+      background-color: #48206c;
     }
   }
 
@@ -745,40 +757,42 @@ body.no-scroll {
   }
 
   .uq-header__newglobal-nav-item {
-    background-color:core.$uq-purple;
+    background-color: core.$uq-purple;
   }
 
   .uq-header__newglobal-nav-link {
-    color:core.$uq-white;
-    background-color:core.$uq-purple;
+    color: core.$uq-white;
+    background-color: core.$uq-purple;
 
     &:hover {
-      color:core.$uq-white;
-      background-color:core.$uq-purple;
+      color: core.$uq-white;
+      background-color: core.$uq-purple;
     }
   }
 
   .uq-header__newglobal-nav-link .slide-menu__decorator::before {
     content: "";
-    background-image: url(icon-constants.get-icon("standard--chevron-right-sml", core.$uq-white));
+    background-image: url(icon-constants.get-icon(
+      "standard--chevron-right-sml",
+      core.$uq-white
+    ));
   }
 }
 
 /* LOCAL SITE NAVIGATION MODIFIERS */
 
 .global-mobile-nav {
-
   .uq-site-header__title-container {
     margin: 0;
-    padding-left: 0rem;
-    padding-right: 0rem;
+    padding: 1rem 1.5rem;
   }
 
   .uq-site-header__title {
-    padding: 1rem 1.5rem;
+    padding: 0;
     font-size: 1rem;
     font-weight: 500;
-    
+    display: block;
+
     &:hover {
       background: none;
     }
@@ -787,9 +801,140 @@ body.no-scroll {
   &__audience-link {
     font-weight: 500;
   }
-
 }
 
 .uq-site-header__navigation-toggle {
   display: none;
-}
+}
+
+/* D7 overrides and hacks */
+
+.admin-menu {
+  .slide-menu {
+    top: 7.5rem;
+
+    @media #{core.$screen-md-up} {
+      top: 6.15rem;
+    }
+  }
+}
+.uq-header {
+  line-height: 1.5;
+  font-family: core.$roboto;
+}
+.uq-header__logo img {
+  max-width: unset;
+}
+
+.uq-header__search-query-submit {
+  background-color: unset !important;
+}
+
+.uq-header__search-range .uq-header__search-label {
+  max-width: unset;
+}
+
+.uq-header__nav-primary-list li {
+  margin: 0;
+}
+
+.uq-header__nav-primary-list li:hover .uq-header__nav-primary-link {
+  border-bottom: 4px solid #fff;
+}
+
+.uq-header__nav-primary-link,
+.uq-header__nav-primary-link:focus {
+  display: block;
+  color: #fff;
+  text-decoration: none;
+  transition: background-color 0.25s, border-color 0.25s;
+  font-weight: 400;
+  position: relative;
+  border-bottom: 4px solid transparent;
+}
+
+.uq-header a:focus {
+  color: #d4c8de;
+}
+
+.uq-header__search-container {
+  form,
+  fieldset {
+    border: unset;
+    padding: 0;
+    margin: 0;
+  }
+}
+
+.uq-header__search-query-input {
+  height: 45px !important;
+}
+
+.uq-header .nav-primary__search-toggle {
+  margin-bottom: 0;
+}
+
+.uq-header .nav-primary__menu-toggle {
+  margin-bottom: 0 !important;
+  font: initial;
+  font-size: 0.833rem;
+  line-height: normal;
+}
+
+/* D7 and D9 search fixes */
+.uq-header__search-range {
+  display: inline-block;
+}
+
+.uq-header__search-range input[type="radio"] {
+  height: 20px;
+  width: 20px;
+  vertical-align: top;
+  display: inline-block;
+  border-radius: 50%;
+  background-color: transparent;
+  margin: 3px 3px 0 5px;
+  position: absolute;
+
+  /* Missing form component styles */
+  appearance: none;
+  -webkit-appearance: none;
+  border: 1px solid #e7e3e0;
+  cursor: pointer;
+}
+.uq-header__search-range input[type="radio"] + label {
+  margin-bottom: 1rem;
+  margin-left: 0.5rem;
+  margin-right: 1rem;
+  padding-top: 0.125rem;
+  padding-left: 1.5rem;
+}
+
+.uq-header__search-range label {
+  color: core.$uq-white;
+  font-weight: 400;
+  display: inline-block;
+  vertical-align: top;
+}
+
+input[type="radio"].uq-header__search-radio:checked {
+  border-color: core.$uq-white;
+  border-width: 2px;
+}
+
+input[type="radio"].uq-header__search-radio:focus {
+  border-color: core.$uq-white;
+}
+
+input[type="radio"].uq-header__search-radio:checked::after {
+  content: "";
+  background-color: core.$uq-white;
+  border-radius: 50%;
+  content: "";
+  display: block;
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  height: 10px;
+  width: 10px;
+}

package/src/scss/_global.scss

@@ -1,6 +1,6 @@
-@use '@uqds/core/src/scss/global' as core;
+@use "@uqds/core/src/scss/global" as core;
 
 // Variables, functions, and mixins
 $site-footer-color: mix(core.$uq-white, core.$uq-purple, 75%);
 $site-footer-link-color: core.$uq-white;
-$site-footer-font-size: .875rem;
+$site-footer-font-size: 0.875rem;

package/src/scss/main.scss

@@ -1 +1 @@
-@use 'component';
+@use "component";