Edit
/* scss/7-menus-and-header/_topbar.scss */
//==============================================
// top bar - base/mobile settings
// ==============================================
// ----------------------------------------------
// STYLES
// buttons are in a separate div from .topbar
// to enable consistency in viewing
.wm-topbar__buttons {
position: absolute;
z-index: $z-index-topbar-buttons;
top: 0;
right: 0;
}
// site menu button
.wm-topbar__menu-button {
position: absolute;
top: 0;
right: 0;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 77px;
height: calc(#{$topbar-height-mobile} - #{$topbar-border-height-mobile});
height: 59px;
padding: 20px 0 23px;
transition: opacity 0.3s linear;
text-align: center;
text-decoration: none;
letter-spacing: 0;
text-transform: uppercase;
color: white;
//transition: all 0.18s ease-in;
background: var(--color-griffingreen-100);
// box shadow added to fix illusion that button is 1px too small
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
font-family: font(text-sans);
font-size: 16px;
font-weight: 400;
& svg .a {
fill: #fff;
}
&-text {
display: none;
flex-basis: auto;
flex-grow: 0;
flex-shrink: 0;
// padding changes when menu is open
// see .info-open .wm-topbar__menu-button-text farther down in code
padding-top: toRem(1);
padding-bottom: toRem(17);
letter-spacing: 0.1em;
font-size: 0.64rem;
line-height: 0;
}
&:hover {
text-decoration: none;
color: white;
background-color: black;
}
&:visited {
color: white;
}
&:focus {
text-decoration: none;
color: white;
background-color: black;
}
// css for X version of menu button is in -site-menu.scss
}
// info for button
.wm-topbar__info-for-button {
position: absolute;
top: $info-button-top-mobile;
right: 0px;
display: none;
overflow: hidden;
width: 134px;
height: $info-button-height;
padding-left: 1.5625rem;
transition:
all 0.3s,
right 0.3s;
text-decoration: none;
@include breakpoint($mobile-to-desktop-breakpoint) {
top: $info-button-top;
display: block;
}
&:before {
position: absolute;
z-index: -1;
top: 0;
right: -10px;
width: 100%;
height: 100%;
content: "";
transform: skew(-20deg);
background: rgba($color: #000000, $alpha: 0.8);
.menu-open & {
background: var(--color-wmgreen-90);
}
}
.menu-open &:hover:before {
background: var(--color-griffingreen-100);
}
.menu-open &:hover span {
background: var(--color-griffingreen-100);
}
& span {
z-index: 2;
display: block;
position: relative;
left: -3px;
top: 1px;
width: 102%;
letter-spacing: 0.32px;
text-transform: uppercase;
color: white;
font-size: 11.5px;
font-style: italic;
font-weight: 500;
line-height: $info-button-height;
background: rgba($color: #000000, $alpha: 0.8);
.menu-open & {
background: var(--color-wmgreen-90);
}
}
&:hover {
width: 145px;
text-decoration: none;
&:before {
background: rgba($color: #000000, $alpha: 0.8);
}
}
&:visited {
color: white;
}
&.is-hidden {
right: -2000px;
opacity: 0;
}
/*=================*/
// hide hover on mobile
@media (any-hover: none) {
.wm-topbar__info-for-button:hover,
.wm-topbar__info-for-button:focus {
width: 110px;
}
}
@media (any-hover: none) and (min-width: 930px) {
.wm-topbar__info-for-button:hover,
.wm-topbar__info-for-button:focus {
width: 120px;
}
}
/*===============*/
}
// removes sticky topbar from short screen heights
@media (max-height: 400px) {
.wm-topbar {
position: relative !important;
}
}
// secondary page topbar and base styles for closed menu
.wm-topbar {
position: sticky;
position: -webkit-sticky;
z-index: $menu-topbar;
top: 0;
right: 0;
left: 0;
display: flex;
align-items: flex-start;
justify-content: flex-end;
height: $topbar-height-mobile;
margin: 0;
padding-left: kspaces(sm);
border-top: $topbar-border-height-mobile solid var(--color-griffingreen-100);
background-color: white;
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
font-size: 1rem;
& .button-wrapper-for-older-browsers {
position: relative;
// this messes up the logo alignment with the page nav
// TO DO: check in older browsers to see what happens
// width: 300px;
}
// logo
&__logo {
// flex-basis: $max-content-width;
flex-basis: 1288px;
flex-grow: 0;
flex-shrink: 1;
height: $topbar-height-mobile;
margin: 0 auto;
@include breakpoint($mobile-to-wide-mobile-breakpoint) {
height: $topbar-height;
}
@include breakpoint($wide-desktop-to-ultrawide-desktop-breakpoint) {
flex-basis: $max-content-width-ultrawide;
flex-grow: 0;
flex-shrink: 1;
}
}
&__logo-link {
display: inline-block;
align-self: center;
padding: 8px 0 0 0;
}
&__logo-img {
width: 15.66rem;
width: 200px;
}
}
// .toggle-menus .wm-topbar {
// z-index: -1;
// }
// white menu backdrop to prevent flash of page when
// switching between menus
// mixins are in topbar.scss
.menubackdrop-white {
@include menu-closed-styles();
visibility: hidden;
background: white !important;
.wm_logo_banner {
@include wm_logo_banner;
}
}
body.menu-open .menubackdrop-white,
body.info-open .menubackdrop-white {
visibility: visible;
}
.info-open .menubackdrop-white .wm_logo_banner {
@include breakpoint($menu-mobile-to-desktop-breakpoint) {
display: none !important;
}
}
.info-open .wm-topbar__menu-button-text {
// change padding to accommodate
// visually shorter button
padding-top: toRem(6);
padding-bottom: toRem(14);
}
.toggle-menus .menubackdrop-white {
@include menu-open-styles();
z-index: $menu-white-backdrop;
@include breakpoint(lg) {
@include menu-closed-desktop-styles();
}
}
.toggle-menus .menubackdrop-white {
display: block;
opacity: 1;
}
// dark menu backdrop
/*--- MENU BACKDROP DARK---*/
.menubackdrop-dark {
position: fixed;
z-index: -1;
top: 0;
left: 0;
-webkit-overflow-scrolling: none;
width: 100%;
height: 100%;
cursor: auto;
transition: opacity 0.4s;
//transition: all 0.35s ease-in;
opacity: 0;
background: rgba(0, 0, 0, 0.9);
/* when modal active */
touch-action: none;
/* Other browsers */
overscroll-behavior: none;
}
.menu-open .menubackdrop-dark,
.info-open .menubackdrop-dark {
z-index: $menu-backdrop;
cursor: url("../images/close-x.svg"), auto;
opacity: 1;
}
// for atomic docs
.source .wm-topbar,
.source .wm-topbar__buttons {
position: relative;
}
@include breakpoint($mobile-to-desktop-breakpoint) {
.wm-topbar {
height: $topbar-height;
border-top: $topbar-border-height solid var(--color-griffingreen-100);
&__buttons {
top: 0;
overflow: hidden;
width: toRem(155);
height: toRem(120);
}
&__menu-button {
display: flex;
width: toRem(133);
height: toRem(72);
&-text {
display: block;
}
}
}
.wm-topbar__info-for-button:focus {
width: 158px;
text-decoration: none;
}
.menu-open .wm-site-menu .wm-topbar__menu-button.-close-x:focus {
background: #aa814d;
}
/* TOPBAR - REDUCE MOTION */
@media (prefers-reduced-motion) {
.wm-topbar__info-for-button {
transition: none;
}
}
.wm-topbar__logo-link {
padding-top: 0.83rem;
padding-left: 0;
}
.wm-topbar__logo-img {
width: 242px;
}
}
// ---- end top bar
