You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
748 lines
16 KiB
748 lines
16 KiB
/** |
|
* @file |
|
* Styles for menus in Magazine+. |
|
*/ |
|
|
|
/*Menus*/ |
|
ul.menu { |
|
margin: 0; |
|
padding: 0; |
|
list-style: none; |
|
} |
|
ul.menu li { |
|
margin: 0; |
|
position: relative; |
|
list-style: none; |
|
padding: 0; |
|
} |
|
ul.menu li a { |
|
padding: 10px 0 10px 20px; |
|
line-height: 150%; |
|
display: block; |
|
text-decoration: none; |
|
font-size: 12px; |
|
text-transform: uppercase; |
|
} |
|
.region--dark-typography ul.menu li a { |
|
color: #2d2d2d; |
|
} |
|
.sidebar__section ul.menu li a:hover { |
|
-ms-transform: translateX(5px); |
|
-webkit-transform: translateX(5px); |
|
transform: translateX(5px); |
|
} |
|
.region--light-typography ul.menu li a { |
|
color: #ffffff; |
|
} |
|
.region--light-typography ul.menu li a:hover, |
|
.region--light-typography ul.menu li a.is-active, |
|
.region--light-typography ul.menu li.active-trail > a { |
|
color: #ffffff; |
|
text-decoration: none; |
|
opacity: 0.75; |
|
} |
|
ul.menu li.menu-item--expanded ul { |
|
padding-left: 25px; |
|
} |
|
|
|
/*menu arrows*/ |
|
ul.menu li > a:before { |
|
font-family: "FontAwesome"; |
|
content: "\f105"; |
|
position: absolute; |
|
left: 0; |
|
top: 9px; |
|
font-size: 12px; |
|
} |
|
|
|
/*Main navigation*/ |
|
.header-container ul.menu { |
|
margin: 0; |
|
list-style: none; |
|
text-align: right; |
|
} |
|
.header-container .col-md-12 ul.menu, |
|
.header-container .col-xs-12 ul.menu { |
|
text-align: center; |
|
} |
|
.header__section ul.menu { |
|
padding: 15px 0; |
|
} |
|
.header-container ul.menu li { |
|
background: none; |
|
padding: 0; |
|
margin: 0; |
|
display: inline-block; |
|
float: none; |
|
z-index: 497; |
|
} |
|
.header-container ul.menu li a { |
|
font-size: 15px; |
|
padding: 5px 23px; |
|
} |
|
.headings-wide-spacing-enabled .header-container ul.menu li a { |
|
letter-spacing: 0.25em; |
|
text-transform: uppercase; |
|
} |
|
.header-container ul.menu li a:before { |
|
content: ""; |
|
width: 2px; |
|
height: 2px; |
|
right: -1px; |
|
left: auto; |
|
top: 50%; |
|
margin-top: -1px; |
|
} |
|
.header-container .region--dark-typography ul.menu li a:before { |
|
background-color: #9c9c9c; |
|
} |
|
.header-container .region--light-typography ul.menu li a:before { |
|
background-color: #ffffff; |
|
} |
|
.header-container ul.menu ul.menu { |
|
display: none; |
|
} |
|
.header-container ul.menu li:last-child a:before, |
|
.header-container ul.menu ul li a:before { |
|
width: 0; |
|
height: 0; |
|
background-color: transparent; |
|
} |
|
@media (max-width:1199px) { |
|
.header-container ul.menu li a { |
|
margin: 0; |
|
} |
|
.header-container ul.menu { |
|
text-align: left; |
|
} |
|
} |
|
|
|
/*header top highlighted*/ |
|
.header-top-highlighted__section ul.menu { |
|
text-align: center; |
|
padding: 7px 0; |
|
} |
|
.header-top-highlighted__section ul.menu li a { |
|
font-size: 11px; |
|
} |
|
.header-top-highlighted__section ul.menu li:first-child a { |
|
padding-left: 0; |
|
} |
|
.header-top-highlighted__section ul.menu li:last-child a { |
|
padding-right: 0; |
|
} |
|
@media (min-width: 768px) { |
|
.header-top-highlighted-first ul.menu { |
|
text-align: left; |
|
} |
|
.header-top-highlighted-second ul.menu { |
|
text-align: right; |
|
} |
|
} |
|
|
|
/*header top*/ |
|
.header-top__section ul.menu { |
|
text-align: center; |
|
} |
|
.header-top__section ul.menu li a { |
|
font-size: 11px; |
|
} |
|
.header-top__section ul.menu li:first-child a { |
|
padding-left: 0; |
|
} |
|
.header-top__section ul.menu li:last-child a { |
|
padding-right: 0; |
|
} |
|
@media (min-width: 768px) { |
|
.header-top-first ul.menu { |
|
text-align: left; |
|
} |
|
.header-top-second ul.menu { |
|
text-align: right; |
|
} |
|
} |
|
|
|
/*footer menu*/ |
|
.footer__section ul.menu li a { |
|
padding: 8px 0 8px 30px; |
|
text-decoration: none; |
|
} |
|
.footer__section ul.menu li a:hover { |
|
-ms-transform: translateX(5px); |
|
-webkit-transform: translateX(5px); |
|
transform: translateX(5px); |
|
} |
|
.footer__section ul.menu li a:before { |
|
top: 8px; |
|
} |
|
@media (max-width:767px) { |
|
.footer__section ul.menu { |
|
text-align: center; |
|
} |
|
.footer__section ul.menu li a { |
|
padding: 7px 20px 8px 20px; |
|
} |
|
.footer__section ul.menu li > a:before { |
|
content: ""; |
|
width: 0px; |
|
height: 0px; |
|
} |
|
} |
|
|
|
/*Footer Bottom menu*/ |
|
.footer-bottom__section ul.menu { |
|
margin: 0; |
|
padding: 30px 0; |
|
list-style-type: none; |
|
text-align: center; |
|
} |
|
.footer-bottom__section ul.menu li { |
|
display: inline-block; |
|
} |
|
.footer-bottom__section ul.menu ul.menu { |
|
display: none; |
|
} |
|
.footer-bottom__section ul.menu li a { |
|
font-size: 12px; |
|
text-decoration: none; |
|
padding: 5px 20px 5px 18px; |
|
line-height: 1; |
|
} |
|
.headings-wide-spacing-enabled .footer-bottom__section ul.menu li a { |
|
letter-spacing: 0.25em; |
|
text-transform: uppercase; |
|
} |
|
.footer-bottom__section ul.menu li a:before { |
|
content: ""; |
|
width: 2px; |
|
height: 2px; |
|
right: -1px; |
|
left: auto; |
|
top: 50%; |
|
margin-top: -1px; |
|
} |
|
.footer-bottom__section ul.menu li:last-child a:before { |
|
width: 0; |
|
height: 0; |
|
background-color: transparent; |
|
} |
|
.region--dark-typography .footer-bottom__section ul.menu li a:before { |
|
background-color: #9c9c9c; |
|
} |
|
.region--light-typography .footer-bottom__section ul.menu li a:before { |
|
background-color: #ffffff; |
|
} |
|
.footer-bottom__section ul.menu li a:hover { |
|
text-decoration: none; |
|
} |
|
.footer-bottom__section ul.menu li:first-child a { |
|
padding-left: 0; |
|
} |
|
.footer-bottom__section ul.menu li:last-child a { |
|
padding-right: 0; |
|
} |
|
@media (min-width: 992px) { |
|
.footer-bottom__section.footer-bottom-first ul.menu { |
|
text-align: right; |
|
} |
|
} |
|
@media (max-width:991px) { |
|
.footer-bottom__section ul.menu { |
|
padding: 10px 0; |
|
} |
|
} |
|
@media (max-width:767px) { |
|
.footer-bottom__section ul.menu li { |
|
display: block; |
|
margin: 10px 0px; |
|
} |
|
.footer-bottom__section ul.menu li a:before { |
|
content: ""; |
|
width: 0; |
|
height: 0; |
|
} |
|
.footer-bottom__section ul.menu li:last-child a, |
|
.footer-bottom__section ul.menu li:first-child a, |
|
.footer-bottom__section ul.menu li a { |
|
margin: 0; |
|
display: inline-block; |
|
padding: 5px; |
|
} |
|
} |
|
|
|
/*Subfooter menu*/ |
|
.subfooter__section .block-menu > h2.visually-hidden { |
|
display: none; |
|
} |
|
.subfooter__section ul.menu { |
|
margin: 0; |
|
padding: 0; |
|
list-style-type: none; |
|
text-align: right; |
|
} |
|
.subfooter__section.subfooter-first ul.menu { |
|
text-align: left; |
|
} |
|
.subfooter__section ul.menu li { |
|
display: inline-block; |
|
} |
|
.subfooter__section ul.menu ul.menu { |
|
display: none; |
|
} |
|
.subfooter__section ul.menu li a { |
|
font-size: 12px; |
|
text-decoration: none; |
|
padding: 2px 20px 2px 18px; |
|
line-height: 1; |
|
} |
|
.headings-wide-spacing-enabled .subfooter__section ul.menu li a { |
|
letter-spacing: 0.25em; |
|
text-transform: uppercase; |
|
} |
|
.subfooter__section ul.menu li a:before { |
|
content: ""; |
|
width: 2px; |
|
height: 2px; |
|
right: -1px; |
|
left: auto; |
|
top: 50%; |
|
margin-top: -1px; |
|
} |
|
.subfooter__section ul.menu li:last-child a:before { |
|
width: 0; |
|
height: 0; |
|
background-color: transparent; |
|
} |
|
.region--dark-typography .subfooter__section ul.menu li a:before { |
|
background-color: #9c9c9c; |
|
} |
|
.region--light-typography .subfooter__section ul.menu li a:before { |
|
background-color: #ffffff; |
|
} |
|
.subfooter__section ul.menu li a:hover { |
|
text-decoration: none; |
|
} |
|
.subfooter__section ul.menu li:first-child a { |
|
padding-left: 0; |
|
} |
|
.subfooter__section ul.menu li:last-child a { |
|
padding-right: 0; |
|
} |
|
@media (max-width: 1199px) { |
|
.subfooter__section ul.menu li a { |
|
padding: 2px 15px 2px 13px; |
|
} |
|
} |
|
@media (max-width: 991px) { |
|
.subfooter__section ul.menu, |
|
.subfooter__section.subfooter-first ul.menu { |
|
text-align: center; |
|
padding: 10px 0; |
|
} |
|
} |
|
@media (max-width: 767px) { |
|
.subfooter__section ul.menu li { |
|
display: block; |
|
margin: 10px 0px; |
|
} |
|
.subfooter__section ul.menu li a:before { |
|
content: ""; |
|
width: 0; |
|
height: 0; |
|
} |
|
.subfooter__section ul.menu li:last-child a, |
|
.subfooter__section ul.menu li:first-child a, |
|
.subfooter__section ul.menu li a { |
|
margin: 0; |
|
display: inline-block; |
|
padding: 5px; |
|
} |
|
} |
|
|
|
/*superfish support*/ |
|
.sf-menu ul { |
|
display: none; |
|
} |
|
.header-container .sf-menu li.sfHover { |
|
z-index: 498; |
|
} |
|
.region--light-typography .sf-menu li a.is-active, |
|
.region--light-typography .sf-menu li.active-trail > a, |
|
.region--light-typography .sf-menu li.sfHover > a, |
|
.region--light-typography .sf-menu li > a:hover { |
|
opacity: 0.75; |
|
color: #ffffff; |
|
} |
|
.header-container .sf-menu > li > ul { |
|
right: 0 !important; |
|
} |
|
.header-container .sf-menu.menu ul { |
|
display: none; |
|
margin-top: 16px; |
|
padding: 15px 30px; |
|
text-align: left; |
|
left: 0; |
|
top: 100%; |
|
} |
|
.header-top-highlighted__section .sf-menu.menu ul { |
|
margin-top: 6px; |
|
} |
|
.region--white-background .sf-menu.menu ul { |
|
background-color: #f4f4f4; |
|
} |
|
.region--gray-background .sf-menu.menu ul { |
|
background-color: #f4f4f4; |
|
} |
|
.header.region--gray-background .sf-menu.menu ul { |
|
background-color: #f1f1f1; |
|
} |
|
.region--black-background .sf-menu.menu ul { |
|
background-color: #1d1d1d; |
|
} |
|
.header-container .sf-menu ul li a { |
|
font-size: 14px; |
|
padding: 9px 0px 10px; |
|
display: block; |
|
text-transform: none; |
|
font-weight: 400; |
|
} |
|
.headings-wide-spacing-enabled .header-container .sf-menu ul li a { |
|
letter-spacing: 0; |
|
text-transform: none; |
|
} |
|
.header-container .sf-menu ul li:last-child a { |
|
border-bottom: none; |
|
} |
|
.header-container .sf-menu.menu ul ul { |
|
top: -15px; |
|
margin-left: 30px; |
|
margin-right: 30px; |
|
margin-top: 0; |
|
} |
|
@media (max-width: 992px) { |
|
.header-container .sf-menu.menu ul { |
|
margin-top: 20px; |
|
} |
|
} |
|
|
|
/*superfish menu arrows*/ |
|
.header-container ul.sf-menu > li > a.menuparent:after { |
|
content: "\f107"; |
|
font-family: 'FontAwesome'; |
|
position: absolute; |
|
top: 6px; |
|
right: 12px; |
|
font-weight: 400; |
|
line-height: 20px; |
|
font-size: 10px; |
|
} |
|
.header-top-highlighted__section ul.sf-menu > li > a.menuparent:after, |
|
.header-top__section ul.sf-menu > li > a.menuparent:after { |
|
top: 3px; |
|
} |
|
.header-container ul.sf-menu ul li a.menuparent:after { |
|
font-family: 'FontAwesome'; |
|
content: "\f105"; |
|
right: 0px; |
|
top: 10px; |
|
position: absolute; |
|
font-weight: 400; |
|
} |
|
|
|
/* Superfish mega-menu support */ |
|
.header-container ul.sf-menu li.sf-multicolumn-column { |
|
display: inline; |
|
float: left; |
|
} |
|
.header-container ul.sf-menu ul li.sf-multicolumn-column a.menuparent { |
|
font-weight: bold; |
|
} |
|
.header-container ul.sf-menu ul li.sf-multicolumn-column a.menuparent:after { |
|
content: ""; |
|
} |
|
|
|
/*Menu with call-to-action button*/ |
|
.header__section .menu.cta-active { |
|
padding: 5px 0; |
|
} |
|
.menu.cta-active > li:last-child > a { |
|
font-weight: 400; |
|
padding: 15px 30px; |
|
color: #ffffff; |
|
display: inline-block; |
|
line-height: 1; |
|
-webkit-transition: all 0.2s ease-in-out; |
|
-moz-transition: all 0.2s ease-in-out; |
|
-ms-transition: all 0.2s ease-in-out; |
|
-o-transition: all 0.2s ease-in-out; |
|
transition: all 0.2s ease-in-out; |
|
text-align: center; |
|
border-radius: 5px; |
|
border-width: 1px; |
|
border-style: solid; |
|
border-color: transparent; |
|
text-decoration: none; |
|
margin: 0 0 0 40px; |
|
} |
|
.headings-wide-spacing-enabled .menu.cta-active > li:last-child > a { |
|
letter-spacing: 0.25em; |
|
text-transform: uppercase; |
|
} |
|
.region--dark-background .menu.cta-active > li:last-child > a { |
|
border-color: #ffffff; |
|
border-bottom-width: 1px; |
|
} |
|
.menu.cta-active > li:last-child > a.is-active { |
|
color: #ffffff; |
|
} |
|
.menu.cta-active > li:last-child > a:hover { |
|
color: #ffffff; |
|
} |
|
.menu.cta-active--email > li:last-child > a:before { |
|
content: "\f0e0"; |
|
font-family: "FontAwesome"; |
|
padding-right: 10px; |
|
position: static; |
|
color: inherit; |
|
vertical-align: top; |
|
} |
|
@media (max-width: 1199px) { |
|
.menu.cta-active > li:last-child > a { |
|
margin-left: 10px; |
|
padding: 15px; |
|
} |
|
} |
|
@media (max-width: 991px) { |
|
.menu.cta-active > li:last-child > a { |
|
margin-left: 20px; |
|
padding: 15px 20px; |
|
} |
|
} |
|
.sf-accordion.sf-style-none.cta-active > li:last-child { |
|
text-align: center; |
|
} |
|
.sf-accordion.sf-style-none.cta-active > li:last-child > a { |
|
display: block; |
|
padding: 15px 25px; |
|
} |
|
.region--colored-background .menu.cta-active > li:last-child > a { |
|
background-color: #ffffff; |
|
} |
|
.region--colored-background .menu.cta-active > li:last-child > a:hover { |
|
text-decoration: none; |
|
color: #ffffff; |
|
} |
|
|
|
/*Mobile Menu*/ |
|
.header-container .block-superfish { |
|
position: relative; |
|
} |
|
.header-container .sf-accordion-toggle.sf-style-none { |
|
text-align: right; |
|
} |
|
.header-container .sf-accordion-toggle.sf-style-none a { |
|
padding: 15px 10px; |
|
margin-right: -15px; |
|
display: inline-block; |
|
text-decoration: none; |
|
} |
|
.header-top-highlighted .sf-accordion-toggle.sf-style-none { |
|
position: absolute; |
|
right: 0; |
|
left: auto; |
|
top: 0; |
|
z-index: 10; |
|
} |
|
.page-container-border-enabled .header-container .sf-accordion-toggle.sf-style-none a { |
|
margin-right: 0; |
|
} |
|
.header-top-highlighted .sf-accordion-toggle.sf-style-none a { |
|
padding: 8px 10px; |
|
} |
|
.region--dark-typography .sf-accordion-toggle.sf-style-none a { |
|
color: #2d2d2d; |
|
} |
|
.region--light-typography .sf-accordion-toggle.sf-style-none a { |
|
color: #ffffff; |
|
} |
|
.header-container .sf-accordion-toggle.sf-style-none a:after { |
|
content: "\f0c9"; |
|
font-family: "FontAwesome"; |
|
font-size: 24px; |
|
line-height: 1; |
|
} |
|
.header-container .sf-accordion-toggle.sf-style-none a.sf-expanded { |
|
position: relative; |
|
right: auto; |
|
z-index: auto; |
|
} |
|
.header-container .sf-accordion-toggle.sf-style-none a.sf-expanded:after { |
|
content: "\f00d"; |
|
} |
|
.header-container .sf-accordion-toggle.sf-style-none span { |
|
display: none; |
|
} |
|
.header-container ul.menu.sf-accordion { |
|
padding: 0; |
|
text-align: left; |
|
background: #ffffff; |
|
border: 1px solid #eaeaea; |
|
margin-bottom: 20px; |
|
} |
|
.header-top-highlighted ul.menu.sf-accordion { |
|
margin-top: 45px; |
|
} |
|
.header-container ul.menu.sf-accordion ul { |
|
padding: 0; |
|
margin: 0; |
|
border: none; |
|
box-shadow: none; |
|
} |
|
.header-container ul.menu.sf-accordion li a { |
|
border-bottom: 1px solid #eaeaea; |
|
text-transform: none; |
|
margin: 0; |
|
padding: 15px 30px; |
|
font-size: 13px; |
|
} |
|
.header-container ul.menu.sf-accordion li a:before { |
|
content: ""; |
|
background-color: transparent; |
|
width: 0; |
|
height: 0; |
|
} |
|
.header-container ul.menu.sf-accordion li:last-child > a { |
|
border-bottom-color: transparent; |
|
} |
|
.header-container ul.menu.sf-accordion ul li a { |
|
padding-left: 45px; |
|
border-top: 1px solid rgba(255, 255, 255, 0.25); |
|
} |
|
.header-container ul.menu.sf-accordion ul ul li a { |
|
padding-left: 60px; |
|
} |
|
.header-container ul.menu.sf-accordion ul ul ul li a { |
|
padding-left: 75px; |
|
} |
|
.header-container ul.menu.sf-accordion ul ul ul ul li a { |
|
padding-left: 90px; |
|
} |
|
|
|
/*mobile menu arrows*/ |
|
.header-container ul.sf-accordion li a.menuparent:after { |
|
content: "\f067"; |
|
font-family: 'FontAwesome'; |
|
position: absolute; |
|
border-left: 1px solid #eaeaea; |
|
top: 0; |
|
right: 0; |
|
text-align: center; |
|
font-size: 12px; |
|
font-weight: 400; |
|
line-height: 52px; |
|
width: 50px; |
|
height: 50px; |
|
} |
|
.header-container ul.sf-accordion li.sf-expanded>a.menuparent:after { |
|
content: "\f068"; |
|
} |
|
.header-container ul.sf-accordion ul li a.menuparent:after { |
|
content: "\f067"; |
|
top: 0; |
|
right: 0; |
|
left: auto; |
|
} |
|
|
|
/*Mobile Menu at slideout region*/ |
|
.slideout .block-superfish { |
|
position: relative; |
|
} |
|
.slideout .sf-accordion-toggle.sf-style-none { |
|
display: none; |
|
} |
|
.slideout ul.menu.sf-accordion { |
|
padding: 0; |
|
text-align: left; |
|
background: #ffffff; |
|
border: 1px solid #eaeaea; |
|
border-radius: 5px; |
|
border-width: 0; |
|
display: block; |
|
} |
|
.slideout ul.menu.sf-accordion ul { |
|
padding: 0; |
|
margin: 0; |
|
border: none; |
|
box-shadow: none; |
|
background-color: #ffffff; |
|
} |
|
.slideout ul.menu.sf-accordion li a { |
|
border-bottom-width: 0; |
|
text-transform: none; |
|
margin: 0; |
|
padding: 15px 0; |
|
font-size: 13px; |
|
} |
|
.slideout ul.menu.sf-accordion ul li a { |
|
padding-left: 20px; |
|
border-top-width: 0; |
|
} |
|
.slideout ul.menu.sf-accordion ul ul li a { |
|
padding-left: 30px; |
|
} |
|
.slideout ul.menu.sf-accordion ul ul ul li a { |
|
padding-left: 45px; |
|
} |
|
.slideout ul.menu.sf-accordion ul ul ul ul li a { |
|
padding-left: 60px; |
|
} |
|
.slideout .sf-accordion.sf-style-none.cta-active > li:last-child > a { |
|
margin-top: 10px; |
|
} |
|
|
|
/*mobile menu arrows*/ |
|
.slideout ul.sf-accordion li > a:before { |
|
content: ""; |
|
} |
|
.slideout ul.sf-accordion li a.menuparent:after { |
|
content: "\f067"; |
|
font-family: 'FontAwesome'; |
|
position: absolute; |
|
border-left-width: 0; |
|
top: 0; |
|
right: 10px; |
|
text-align: right; |
|
font-size: 12px; |
|
font-weight: 400; |
|
line-height: 52px; |
|
width: 50px; |
|
height: 50px; |
|
} |
|
.slideout ul.sf-accordion li.sf-expanded>a.menuparent:after { |
|
content: "\f068"; |
|
} |
|
.slideout ul.sf-accordion ul li a.menuparent:after { |
|
content: "\f067"; |
|
top: 0; |
|
right: 0; |
|
left: auto; |
|
} |
|
|
|
/*Mobile menu @colored regions*/ |
|
.region--light-typography ul.menu.sf-accordion { |
|
background: transparent; |
|
border-color: rgba(255, 255, 255, 0.1); |
|
} |
|
.region--light-typography ul.menu.sf-accordion ul { |
|
background-color: transparent; |
|
} |
|
.region--light-typography ul.menu.sf-accordion li a { |
|
border-bottom-color: rgba(255, 255, 255, 0.1); |
|
color: #ffffff; |
|
} |
|
.region--light-typography ul.menu.sf-accordion ul li a { |
|
border-top-color: rgba(255, 255, 255, 0.1); |
|
} |
|
.region--light-typography ul.sf-accordion li a.menuparent:after { |
|
border-color: rgba(255, 255, 255, 0.1); |
|
}
|
|
|