2021-04-16 19:56:52 +03:00
|
|
|
// Primary Nav (Site Nav)
|
|
|
|
|
2020-10-21 23:51:33 +03:00
|
|
|
.primary-nav-container {
|
2019-01-15 21:13:07 +03:00
|
|
|
$logo-height: 28px;
|
|
|
|
|
|
|
|
$menu-container-padding: (
|
2020-06-01 22:12:52 +03:00
|
|
|
md: 16px,
|
2019-01-15 21:13:07 +03:00
|
|
|
);
|
|
|
|
|
|
|
|
$primary-nav-link-padding: (
|
|
|
|
xs: 18px,
|
|
|
|
sm: 22px,
|
2020-06-01 22:12:52 +03:00
|
|
|
md: 9px,
|
2019-01-15 21:13:07 +03:00
|
|
|
);
|
|
|
|
|
|
|
|
&.zen-mode {
|
|
|
|
.menu-container {
|
|
|
|
@media (min-width: $bp-md) {
|
|
|
|
padding-left: 52px;
|
|
|
|
padding-right: 52px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.menu-container {
|
|
|
|
padding: 0 0 0 52px;
|
|
|
|
|
|
|
|
@media (min-width: $bp-md) {
|
|
|
|
padding: map-get($menu-container-padding, md) 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-11-05 21:00:26 +03:00
|
|
|
.primary-nav-special-link {
|
2022-06-01 10:49:24 +03:00
|
|
|
font-size: 17px;
|
|
|
|
line-height: calc(23 / 17);
|
2019-04-22 19:42:20 +03:00
|
|
|
color: $black;
|
|
|
|
font-weight: $btn-font-weight;
|
|
|
|
|
2022-09-02 01:28:30 +03:00
|
|
|
&.pni-nav-link {
|
|
|
|
text-decoration: none;
|
2022-09-20 10:08:24 +03:00
|
|
|
&.active,
|
2022-09-02 01:28:30 +03:00
|
|
|
&:hover {
|
|
|
|
text-decoration: wavy $pni-wavy-blue 2px underline;
|
|
|
|
text-underline-offset: 0.5rem;
|
2022-09-20 10:08:24 +03:00
|
|
|
color: $dark-blue;
|
2022-09-02 01:28:30 +03:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-11-05 21:00:26 +03:00
|
|
|
@media (min-width: $bp-md) {
|
|
|
|
&:not(:last-of-type) {
|
|
|
|
margin-right: 1rem;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-04-22 19:42:20 +03:00
|
|
|
&:hover {
|
|
|
|
color: $dark-blue;
|
|
|
|
}
|
2019-01-15 21:13:07 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
#primary-nav-links {
|
2021-04-15 09:14:38 +03:00
|
|
|
// Mixin for setting vertical padding on primary #primary-nav-links
|
2019-01-15 21:13:07 +03:00
|
|
|
@mixin link-padding($v-padding: xs) {
|
|
|
|
padding-top: $v-padding;
|
|
|
|
padding-bottom: $v-padding;
|
|
|
|
}
|
|
|
|
|
|
|
|
@include link-padding(map-get($primary-nav-link-padding, xs));
|
|
|
|
|
|
|
|
@media (min-width: $bp-sm) {
|
|
|
|
@include link-padding(map-get($primary-nav-link-padding, sm));
|
|
|
|
}
|
|
|
|
|
|
|
|
@media (min-width: $bp-md) {
|
|
|
|
@include link-padding(map-get($primary-nav-link-padding, md));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.nav-links {
|
|
|
|
a {
|
|
|
|
$border-thickness: 6px;
|
|
|
|
|
|
|
|
border-bottom: 6px solid transparent;
|
|
|
|
color: $black;
|
|
|
|
font-weight: 700;
|
|
|
|
margin-right: 18px;
|
|
|
|
transition: border-color 0.25s ease;
|
|
|
|
|
2021-04-15 09:14:38 +03:00
|
|
|
// Mixin for setting bottom padding on primary nav link
|
2019-01-15 21:13:07 +03:00
|
|
|
@mixin padding-bottom($bp: sm) {
|
2019-03-14 21:11:35 +03:00
|
|
|
padding-bottom: calc(
|
|
|
|
#{map-get($menu-container-padding, $bp)} + #{map-get(
|
|
|
|
$primary-nav-link-padding,
|
|
|
|
$bp
|
|
|
|
)} - #{$border-thickness} / 2
|
|
|
|
);
|
2019-01-15 21:13:07 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
@media (min-width: $bp-sm) {
|
|
|
|
@include padding-bottom(sm);
|
|
|
|
}
|
|
|
|
|
|
|
|
@media (min-width: $bp-md) {
|
|
|
|
@include padding-bottom(md);
|
|
|
|
}
|
|
|
|
|
2022-06-01 10:49:24 +03:00
|
|
|
font-size: 17px;
|
|
|
|
line-height: calc(23 / 17);
|
2019-01-15 21:13:07 +03:00
|
|
|
|
|
|
|
@include hover-focus-active {
|
|
|
|
text-decoration: none;
|
2019-02-15 01:41:37 +03:00
|
|
|
border-bottom-color: $gray-20;
|
2019-01-15 21:13:07 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
&.active {
|
2019-05-09 03:06:18 +03:00
|
|
|
border-color: $black;
|
2019-01-15 21:13:07 +03:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.wrapper-burger {
|
|
|
|
transition: background 200ms ease-in-out;
|
2019-05-09 03:06:18 +03:00
|
|
|
background: $white;
|
2019-02-15 01:41:37 +03:00
|
|
|
border-bottom: 1px solid $gray-20;
|
2019-01-15 21:13:07 +03:00
|
|
|
|
|
|
|
.wide-screen-menu {
|
|
|
|
line-height: $logo-height; //Tied to logo height so that the "active" page border shows up at the correct alignment consistently
|
|
|
|
&.hidden {
|
|
|
|
opacity: 0;
|
|
|
|
transform: translateY(8px);
|
|
|
|
visibility: hidden;
|
|
|
|
transition: opacity 0.15s, transform 0.15s, visibility 0s linear 0.15s;
|
|
|
|
}
|
|
|
|
|
|
|
|
transition: opacity 0.15s, transform 0.15s, visibility 0s;
|
|
|
|
}
|
|
|
|
|
|
|
|
.burger {
|
|
|
|
margin-right: 24px;
|
|
|
|
margin-left: -52px;
|
|
|
|
border: 0;
|
|
|
|
background: transparent;
|
|
|
|
width: 28px;
|
|
|
|
height: 28px;
|
|
|
|
padding: 0;
|
|
|
|
position: relative;
|
|
|
|
z-index: 1;
|
|
|
|
|
|
|
|
.burger-bar {
|
|
|
|
position: absolute;
|
2019-05-09 03:06:18 +03:00
|
|
|
background: $black;
|
2019-01-15 21:13:07 +03:00
|
|
|
height: 3px;
|
|
|
|
width: 28px;
|
|
|
|
|
|
|
|
&.burger-bar-top {
|
|
|
|
top: 3px;
|
|
|
|
width: 16px;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.burger-bar-middle {
|
|
|
|
top: 12.5px;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.burger-bar-bottom {
|
|
|
|
top: 22px;
|
|
|
|
width: 23px;
|
|
|
|
}
|
|
|
|
|
|
|
|
transition: top 0.1s linear 0.1s, width 0.1s linear 0.1s, transform 0.1s;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.menu-open {
|
|
|
|
.burger-bar {
|
|
|
|
&.burger-bar-top {
|
|
|
|
top: 12.5px;
|
|
|
|
width: 28px;
|
|
|
|
transform: rotate(135deg);
|
|
|
|
}
|
|
|
|
|
|
|
|
&.burger-bar-middle {
|
|
|
|
transform: rotate(135deg);
|
|
|
|
}
|
|
|
|
|
|
|
|
&.burger-bar-bottom {
|
|
|
|
top: 12.5px;
|
|
|
|
width: 28px;
|
|
|
|
transform: rotate(45deg);
|
|
|
|
}
|
|
|
|
|
|
|
|
transition: top 0.1s, width 0.1s, transform 0.1s linear 0.1s;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
outline: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.scrolled {
|
2019-05-09 03:06:18 +03:00
|
|
|
background: $white;
|
|
|
|
box-shadow: 0 1px 3px $border-shadow-color;
|
2019-01-15 21:13:07 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
.center-nav-title p {
|
|
|
|
text-transform: uppercase;
|
|
|
|
margin: 0;
|
|
|
|
padding: 0;
|
|
|
|
color: $black;
|
|
|
|
letter-spacing: 1px;
|
|
|
|
line-height: 24px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.logo {
|
|
|
|
width: 28px;
|
|
|
|
height: $logo-height;
|
|
|
|
background: url(../_images/mozilla-m.svg) no-repeat;
|
|
|
|
background-size: contain;
|
|
|
|
position: relative;
|
|
|
|
z-index: 1;
|
|
|
|
|
2020-09-22 20:50:51 +03:00
|
|
|
@media (min-width: $nav-full-logo-breakpoint) {
|
2019-01-15 21:13:07 +03:00
|
|
|
width: 97px;
|
|
|
|
background: url(../_images/mozilla-on-black.svg) no-repeat;
|
|
|
|
}
|
|
|
|
|
|
|
|
margin: 0 26px 0 0;
|
|
|
|
padding: 0;
|
|
|
|
line-height: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.narrow-screen-menu {
|
|
|
|
position: absolute;
|
|
|
|
padding-top: 64px;
|
|
|
|
|
2020-09-22 20:50:51 +03:00
|
|
|
@media (min-width: $nav-full-logo-breakpoint) {
|
2019-01-15 21:13:07 +03:00
|
|
|
padding-top: 72px;
|
|
|
|
}
|
|
|
|
|
|
|
|
height: 100vh;
|
|
|
|
top: 0;
|
|
|
|
left: 0;
|
2020-06-10 01:17:28 +03:00
|
|
|
width: 100%;
|
2019-01-15 21:13:07 +03:00
|
|
|
transition: opacity 0.2s, height 0s;
|
|
|
|
|
|
|
|
&.hidden {
|
|
|
|
opacity: 0;
|
|
|
|
height: 0;
|
|
|
|
overflow: hidden;
|
|
|
|
transition: opacity 0.2s, height 0s linear 0.2s;
|
|
|
|
|
|
|
|
.nav-links {
|
|
|
|
a {
|
|
|
|
transform: translateY(8px);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.narrow-screen-menu-container {
|
|
|
|
padding: 0 52px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.narrow-screen-menu-background {
|
2019-05-09 03:06:18 +03:00
|
|
|
background: $black;
|
2019-01-15 21:13:07 +03:00
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.nav-links {
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
a {
|
|
|
|
font-weight: 500;
|
|
|
|
transition: transform 0.15s;
|
|
|
|
display: inline-block;
|
|
|
|
margin: 10px 0;
|
2019-07-26 22:46:57 +03:00
|
|
|
padding-bottom: 0;
|
2021-08-17 01:39:48 +03:00
|
|
|
border-width: 0px 0px 3px 0px;
|
2019-05-09 03:06:18 +03:00
|
|
|
color: $white;
|
2019-07-26 22:46:57 +03:00
|
|
|
|
|
|
|
@include hover-focus-active {
|
|
|
|
border-bottom-color: $white;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.active {
|
|
|
|
border-bottom-color: $white;
|
|
|
|
}
|
2019-01-15 21:13:07 +03:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2019-07-25 20:03:22 +03:00
|
|
|
|
|
|
|
// Newsletter
|
|
|
|
|
|
|
|
#nav-newsletter-form-wrapper {
|
|
|
|
background-color: $black;
|
|
|
|
opacity: 0;
|
|
|
|
height: 0;
|
|
|
|
overflow-y: hidden;
|
|
|
|
transition: height 0.3s ease-in-out, opacity 0.2s ease-in-out;
|
|
|
|
|
|
|
|
@media (min-width: $bp-lg) {
|
|
|
|
opacity: 1;
|
|
|
|
position: absolute;
|
|
|
|
left: 0;
|
|
|
|
right: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.expanded {
|
|
|
|
opacity: 1;
|
2019-10-15 18:16:36 +03:00
|
|
|
height: 300px;
|
2020-10-23 00:52:48 +03:00
|
|
|
z-index: 100;
|
2019-07-25 20:03:22 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
&.faded-in {
|
|
|
|
opacity: 1;
|
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* TODO:FIXME: custom button style introduced */
|
|
|
|
.btn.form-dismiss {
|
|
|
|
color: $light-blue;
|
|
|
|
border: none;
|
|
|
|
background: transparent;
|
|
|
|
|
|
|
|
@include hover-focus-active {
|
|
|
|
text-decoration: underline;
|
|
|
|
}
|
|
|
|
}
|