From ad6d28302d65fc828daf73a8881e14546f5ad684 Mon Sep 17 00:00:00 2001 From: James Date: Mon, 29 Jun 2020 10:57:17 +0100 Subject: [PATCH] e --- dev.less | 309 ++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 308 insertions(+), 1 deletion(-) diff --git a/dev.less b/dev.less index 08c0ee1..0e53bc8 100644 --- a/dev.less +++ b/dev.less @@ -37,4 +37,311 @@ display: block !important; } */ -/* desktop */ +/* when nav is open, make sure header is behind the grey and hide the side contact */ +.nav-open .logo{ + z-index:0; +} +.nav-open .side_contact{ + display:none; +} + +/* style the minicart qty count */ +.minicart-wrapper .action.showcart .counter.qty{ + background-color: #990000; + display:inline; + white-space: nowrap; + .counter-number{ + padding: 0 3px 0 3px !important; + } +} + +/* style and hide the top bar, +.panel.wrapper and .panel.header is the dropdown nav extention */ +.panel.wrapper{ + display:none; + background-color: #fff !important; +} +.panel.header{ + text-align: center; +} + +/* .page-header is the full width top bar*/ +.page-header{ + border-bottom: none !important; +} + +/* this is the burger menu but only for mobile */ +.nav-toggle{ + margin-left:10px; +} +.nav-toggle::before{ + content:''; +} +#switcher-language{ + display: inline; + float: none; +} +/* place the speach arrow in the correct place */ +.page-header .switcher .options ul.dropdown, .page-footer .switcher .options ul.dropdown{ + left:-88px; +} +/* remove up down arrow from lang switcher */ +.page-header .switcher .options ul.dropdown::before, .page-footer .switcher .options ul.dropdown::before, +.page-header .switcher .options ul.dropdown::after, .page-footer .switcher .options ul.dropdown::after{ + display: none !important; +} + +/*hide the mobile nav settings tabs*/ +.nav-sections .section-item-title{ + display:none; +} +.nav-sections-item-content{ + margin-top:0; + padding-top:0; +} + +#translate-icon{ + width:1.5em; +} + +/* fit the minicart inlnie too */ +.minicart-wrapper{ + float:none; +} +/* hide its icon too */ +.minicart-wrapper .action.showcart::before{ + content: '' !important; +} + +.navigation{ + font-weight: bold !important; + a, a:hover{ + color: #333 !important; + } + @media (max-width: 1024px) { + font-size:1.4vw; + } + @media (min-width: 1025px) { + font-size:18px; + } + .level0{ + & > a{ + text-transform: uppercase; + } + .submenu, + & > .level1 { + font-weight: normal !important; + a, a:hover{ + @media (max-width: 767px) { /*mobile*/ + color: #000 !important; + } + } + } + } +} + +#nav-right{ + text-align: right; + padding-right:0; + margin-top:28px; + @media (max-width: 767px) { /*mobile*/ + margin-top: 2vw !important; + width:45%; + } + float:right; + &>*{ + margin:0 !important; + padding:0 !important; + text-align:left; + } + .switcher-language{ + display: inline-block !important; + } + img:not(.photo){ + height:20px; + width:20px; + margin-left:2vw !important; + @media (max-width: 767px) { /*mobile*/ + margin-left:10px!important; + } + @media (min-width: 1800px) { + margin-left:25px !important; + } + } +} + +.nav-toggle{ + postition: unset !important; + vertical-align: middle; +} + +.nav-toggle::before, .nav-toggle::after{ + content: none; +} +.page-header .switcher .options::before, .page-footer .switcher .options::before, .page-header .switcher .options::after, .page-footer .switcher .options::after { + content: none; + display: none; +} + +#switcher-language-trigger{ + cursor: pointer; +} + +.header .logo img{ + width: 290px !important; +} + +/* mobile nav */ +@media (max-width: 767px) { + /* remove active page highlight from nav */ + .navigation .level0.active > .level-top, .navigation .level0.has-active > .level-top, + .navigation .level0 .submenu .active > a, + .navigation .level0.active > a:not(.ui-state-active), .navigation .level0.has-active > a:not(.ui-state-active), + .navigation .level0.active .all-category .ui-state-focus{ + border-color:transparent; + } + + div.panel.wrapper{ + display:none !important; + } + #desktop_burger{ + display: none; + } + .nav-toggle{ + position: initial !important; + display: inline-block !important; + } + .header .logo{ + padding-left: 0 !important; + margin-left: 0 !important; + padding-right:10px; + max-width: 50% !important; + } +} + +/* desktop nav */ +@media (min-width: 768px) { + /* remove active page highlight from nav */ + .navigation .level0.active > .level-top, .navigation .level0.has-active > .level-top, + .navigation .level0 .submenu .active > a, + .navigation .level0.active > a:not(.ui-state-active), .navigation .level0.has-active > a:not(.ui-state-active), + .navigation .level0.active .all-category .ui-state-focus{ + border:none; + } + + /* center the nav */ + .nav-sections{ + position: absolute !important; + width: 100% !important; + display: block !important; + text-align: center; + background: none; + pointer-events: none; + left:0; + padding: 15px 20% 0 33%; + } + + /* hide any nav items other than the first 3 */ + nav.navigation:not(.popupNav)>ul>li:nth-child(n+4){ + display:none; + } + + /* default nav is grey, change to white */ + .navigation{ + background:#fff !important; + } + + /* make the nav inline (not width 100%) */ + .nav-sections-items, + .nav-sections-item-content, + nav.navigation, + nav.navigation>ul + { + display: inline !important; + width: auto !important; + pointer-events: all; + text-align: left; + } + .panel.header{ + height:70px; + } + .header .logo{ + padding: 20px 20px 20px 0; + margin-left: 0 !important; + max-width:100% !important; + width:33% !important; + } + + /* transparent background*/ + .navigation ul{ + background-color: rgba(255,255,255,0) !important; + z-index: 100; + } + .navigation ul.level0{ + background-color: rgba(255,255,255,0.95) !important; + width: 95% !important; + } + + /* remove borders and shadow */ + .navigation ul ul ul{ + box-shadow: none !important; + border: none !important; + } + + /* bold 1st level (headers) */ + .navigation li.level1>a{ + font-weight: bold; + /* remove icon*/ + .ui-menu-icon{ + display: none !important; + } + } + + /* make all parents static so absolute positions work */ + .navigation, + .navigation>ul, + .navigation>ul>.level0{ + position: static !important; + } + /* put the sub menus into the layout columns */ + .submenu.level1{ + position: static !important; + display: block !important; + } + + /* add the |> icon to the sub item items */ + .submenu.level1>li>a::before{ + content: "\25B6\00a0"; + } + + /* make the level 0 a flex layout so sub menus become columns */ + /* and center it */ + .submenu.level0[aria-expanded="true"]{ + display: flex !important; + justify-content: center; + left: 50% !important; + transform: translateX(-50%); + padding-top: 55px !important; + } + /* + .submenu.level0>li{ + flex-grow: 1; + flex-shrink: 1; + max-width: auto !important; + min-width: auto !important; + width: auto !important; + } + */ + .submenu.level0>li{ + max-width: auto !important; + min-width: auto !important; + width: 15% !important; + } +} + +/* make sure the menu doesn't dissapear behind any content elements + * https://philipwalton.com/articles/what-no-one-told-you-about-z-index/ + */ +#maincontent{ + opacity: .99; +}