College of Business Style Guide

Header 

<header class="header" role="banner">
    <nav class="lehigh-nav desktop flex" aria-label="secondary navigation">
        <a class="lehigh-nav--universityhome" href="https://www.lehigh.edu/" title="Lehigh University Home">Lehigh Home</a>
        <ul class="lehigh-nav--links">
            <li><a href="https://securelb.imodules.com/s/1127/interior-hybrid.aspx?sid=1127&gid=1&pgid=5310&cid=9528">Give</a></li>
            <li><a href="http://www1.lehigh.edu/admissions/undergrad/visit">Visit</a></li>
            <li><a href="https://applyweb.collegenet.com/account/new/create?origin=https%3A//www.applyweb.com/shibboleth/gatekeeper%3Fdest%3Dhttps%253A%252F%252Fwww.applyweb.com%252Flehighg%252F">Apply</a></li>
        </ul>
    </nav>
    <div class="business-nav" id="main-nav">

        <picture class="image lehigh-logo">
            <a href="https://www.lehigh.edu" class="logo__link">
                <img class="web" src="/images/lehigh-logo.svg" alt="Lehigh University logo" />
                <img class="print" src="" alt="Lehigh University logo" />
                <span class="sr-only">Go to homepage</span>
            </a>
        </picture>
        <div class="college-name">
            <a href="/">College of Business</a>
        </div>

        <input id="mobile-menu-toggle" class="menu-toggle u-a11y-text mobile-menu-toggle" type="checkbox" aria-controls="mobile-menu-menu-container">
        <label class="menu-toggle-button menu-toggle-button--mobile-menu hamburger mobile" for="mobile-menu-toggle" data-controls="mobile-menu-menu-container" aria-haspopup="true" aria-label="Toggle main menu visibility" role="menuitem">
            <span class="menu-toggle-button__icon menu-toggle-button__icon--burger">
                <span class="menu-toggle-button__icon--burger__inner"><span class="sr-only">Open the main menu</span></span>
            </span>
        </label>
        <nav class="menu flex menu--mobile-menu menu-toggle__toggleable menu-toggle__toggleable--full-height" aria-label="main navigation" id="mobile-menu-menu-container">
            <div class="menu-toggle__toggleable-content-wrapper">
                <div class="main-nav">
                    <ul class="main-menu">

                        <li class="main-menu__item one">

                            <input id="main-menu-item-toggle-one" class="menu-toggle u-a11y-text main-menu-item-toggle" type="checkbox" aria-controls="main-menu-item-menu-container-one">
                            <label class="main-menu__link main-menu__link--toggle main-menu__link--with-sub menu-toggle-button menu-toggle-button--the-menu" for="main-menu-item-toggle-one" data-controls="main-menu-item-menu-container-one" aria-haspopup="true" aria-label="Toggle main menu visibility" role="menuitem">Menu</label>
                            <div class="main-menu--sub-nav menu-toggle__toggleable menu-toggle__toggleable--with-close" aria-label="Menu" id="main-menu-item-menu-container-one">
                                <div class="menu-toggle__toggleable-content-wrapper">

                                    <ul class="main-menu--sub">

                                        <li class="main-menu__item--sub title">

                                            Lehigh Business

                                        <li class="main-menu__item--sub ">

                                            <a href="#" class="main-menu__link main-menu__link--sub">Undergraduate</a>

                                        </li>
                                        <li class="main-menu__item--sub ">

                                            <a href="#" class="main-menu__link main-menu__link--sub">Graduate</a>

                                        </li>
                                        <li class="main-menu__item--sub ">

                                            <a href="#" class="main-menu__link main-menu__link--sub">Executive Education</a>

                                        </li>
                                        <li class="main-menu__item--sub ">

                                            <a href="#" class="main-menu__link main-menu__link--sub">Alumni</a>

                                        </li>
                                        <li class="main-menu__item--sub ">

                                            <a href="#" class="main-menu__link main-menu__link--sub">About</a>

                                        </li>
                                        <li class="main-menu__item--sub ">

                                            <a href="#" class="main-menu__link main-menu__link--sub">Centers</a>

                                        </li>
                                        <li class="main-menu__item--sub ">

                                            <a href="#" class="main-menu__link main-menu__link--sub">Faculty & Research</a>

                                        </li>
                                        <li class="main-menu__item--sub ">

                                            <a href="#" class="main-menu__link main-menu__link--sub">Events Calendar</a>

                                        </li>
                                        <li class="main-menu__item--sub ">

                                            <a href="#" class="main-menu__link main-menu__link--sub">News & Insights</a>

                                        </li>
                                        <li class="main-menu__item--sub ">

                                            <a href="#" class="main-menu__link main-menu__link--sub">Directory</a>

                                        </li>

                        </li>

                    </ul>

                    <ul class="main-menu--sub">

                        <li class="main-menu__item--sub title">

                            Departments

                        <li class="main-menu__item--sub ">

                            <a href="#" class="main-menu__link main-menu__link--sub">Accounting</a>

                        </li>
                        <li class="main-menu__item--sub ">

                            <a href="#" class="main-menu__link main-menu__link--sub">Decision & Technology Analytics</a>

                        </li>
                        <li class="main-menu__item--sub ">

                            <a href="#" class="main-menu__link main-menu__link--sub">Economics</a>

                        </li>
                        <li class="main-menu__item--sub ">

                            <a href="#" class="main-menu__link main-menu__link--sub">Finance</a>

                        </li>
                        <li class="main-menu__item--sub ">

                            <a href="#" class="main-menu__link main-menu__link--sub">Managment</a>

                        </li>
                        <li class="main-menu__item--sub ">

                            <a href="#" class="main-menu__link main-menu__link--sub">Marketing</a>

                        </li>

                        </li>

                    </ul>
                    <div class="decoration"></div>
                </div>
            </div>
            </li>

            <li class="main-menu__item two">

                <input id="main-menu-item-toggle-two" class="menu-toggle u-a11y-text main-menu-item-toggle" type="checkbox" aria-controls="main-menu-item-menu-container-two">
                <label class="main-menu__link main-menu__link--toggle main-menu__link--with-sub menu-toggle-button menu-toggle-button--the-menu" for="main-menu-item-toggle-two" data-controls="main-menu-item-menu-container-two" aria-haspopup="true" aria-label="Toggle main menu visibility" role="menuitem">Academics</label>
                <div class="main-menu--sub-nav menu-toggle__toggleable menu-toggle__toggleable--with-close" aria-label="Academics" id="main-menu-item-menu-container-two">
                    <div class="menu-toggle__toggleable-content-wrapper">

                        <ul class="main-menu--sub">

                            <li class="main-menu__item--sub title">

                                Undergraduate

                            <li class="main-menu__item--sub sub-title">

                                Degree Programs

                            <li class="main-menu__item--sub ">

                                <a href="#" class="main-menu__link main-menu__link--sub">BS Business & Economics</a>

                            </li>
                            <li class="main-menu__item--sub ">

                                <a href="#" class="main-menu__link main-menu__link--sub">BS Integrated Business & Engineering (IBE)</a>

                            </li>
                            <li class="main-menu__item--sub ">

                                <a href="#" class="main-menu__link main-menu__link--sub">BS Computer Science & Business (CSB)</a>

                            </li>

            </li>
            <li class="main-menu__item--sub sub-title">

                Majors

            <li class="main-menu__item--sub ">

                <a href="#" class="main-menu__link main-menu__link--sub">Accounting</a>

            </li>
            <li class="main-menu__item--sub ">

                <a href="#" class="main-menu__link main-menu__link--sub">Business Information Systems</a>

            </li>
            <li class="main-menu__item--sub ">

                <a href="#" class="main-menu__link main-menu__link--sub">Economics</a>

            </li>
            <li class="main-menu__item--sub ">

                <a href="#" class="main-menu__link main-menu__link--sub">Finance</a>

            </li>
            <li class="main-menu__item--sub ">

                <a href="#" class="main-menu__link main-menu__link--sub">Management</a>

            </li>
            <li class="main-menu__item--sub ">

                <a href="#" class="main-menu__link main-menu__link--sub">Marketing</a>

            </li>
            <li class="main-menu__item--sub ">

                <a href="#" class="main-menu__link main-menu__link--sub">Supply Chain Managment</a>

            </li>

            </li>
            <li class="main-menu__item--sub sub-title">

                Minors

            <li class="main-menu__item--sub ">

                <a href="#" class="main-menu__link main-menu__link--sub">Business Information Systems</a>

            </li>
            <li class="main-menu__item--sub ">

                <a href="#" class="main-menu__link main-menu__link--sub">Entrepreneurship</a>

            </li>
            <li class="main-menu__item--sub ">

                <a href="#" class="main-menu__link main-menu__link--sub">Fintech</a>

            </li>
            <li class="main-menu__item--sub ">

                <a href="#" class="main-menu__link main-menu__link--sub">Management</a>

            </li>
            <li class="main-menu__item--sub ">

                <a href="#" class="main-menu__link main-menu__link--sub">Real Estate</a>

            </li>
            <li class="main-menu__item--sub ">

                <a href="#" class="main-menu__link main-menu__link--sub">Supply Chain Management</a>

            </li>

            </li>

            </li>

            </ul>

            <div class="main-menu--stacked">
                <ul class="main-menu--sub">

                    <li class="main-menu__item--sub title">

                        Graduate

                    <li class="main-menu__item--sub sub-title">

                        Master's Program

                    <li class="main-menu__item--sub ">

                        <a href="#" class="main-menu__link main-menu__link--sub">1-MBA</a>

                    </li>
                    <li class="main-menu__item--sub ">

                        <a href="#" class="main-menu__link main-menu__link--sub">Flex MBA</a>

                    </li>
                    <li class="main-menu__item--sub ">

                        <a href="#" class="main-menu__link main-menu__link--sub">MS Accounting & Information Analysis</a>

                    </li>
                    <li class="main-menu__item--sub ">

                        <a href="#" class="main-menu__link main-menu__link--sub">MS Applied Economics</a>

                    </li>
                    <li class="main-menu__item--sub ">

                        <a href="#" class="main-menu__link main-menu__link--sub">MS Financial Engineering</a>

                    </li>
                    <li class="main-menu__item--sub ">

                        <a href="#" class="main-menu__link main-menu__link--sub">MS Mangament</a>

                    </li>

                    </li>
                    <li class="main-menu__item--sub sub-title">

                        PH.D. Program

                    <li class="main-menu__item--sub ">

                        <a href="#" class="main-menu__link main-menu__link--sub">PH.D. Business & Economics</a>

                    </li>

                    </li>

                    </li>

                </ul>

                <ul class="main-menu--sub">

                    <li class="main-menu__item--sub title">

                        Executive Education

                    <li class="main-menu__item--sub sub-title">

                        <a href="#" class="main-menu__link main-menu__link--sub">Programs for Individuals</a>

                    </li>
                    <li class="main-menu__item--sub sub-title">

                        <a href="#" class="main-menu__link main-menu__link--sub">Programs for Organizations</a>

                    </li>
                    <li class="main-menu__item--sub sub-title">

                        <a href="#" class="main-menu__link main-menu__link--sub">Certificate Programs</a>

                    </li>

                    </li>

                </ul>
                <div class="decoration"></div>
            </div>
    </div>
    </li>
    </ul>
    </div>
    </div>
    </nav>
    <div class="main-search">

        <input id="site-search-toggle" class="menu-toggle u-a11y-text site-search-toggle" type="checkbox" aria-controls="site-search-menu-container">
        <label class="menu-toggle-button menu-toggle-button--site-search" for="site-search-toggle" data-controls="site-search-menu-container" aria-haspopup="true" aria-label="Toggle main menu visibility" role="menuitem">
            <span class="menu-toggle-button__icon menu-toggle-button__icon--magnifying-glass"><span class="sr-only">open search</span></span>
            <span class="menu-toggle-button__icon menu-toggle-button__icon--close"><span class="sr-only">close the search</span></span>
        </label>
        <div class="main-search__block-wrapper menu-toggle__toggleable" aria-label="site search" id="site-search-menu-container">
            <div class="menu-toggle__toggleable-content-wrapper">
                This is where the search block should go
            </div>
        </div>
    </div>
    </div><!-- end business-nav -->
    <div class="name-tag" id="name-tag">Lehigh Business</div>
</header>
<div id="content"></div>
 
<header class="header" role="banner">
    <nav class="lehigh-nav desktop flex" aria-label="secondary navigation">
        <a class="lehigh-nav--universityhome" href="https://www.lehigh.edu/" title="Lehigh University Home">Lehigh Home</a>
        <ul class="lehigh-nav--links">
            {% block secondary_nav %}
                {% for topnav_link in topnav_links %}
                    <li><a href="{{ topnav_link.url }}">{{ topnav_link.title }}</a></li>
                {% endfor %}
            {% endblock secondary_nav %}
        </ul>
    </nav>
    <div class="business-nav" id="main-nav">
        {% block branding %}
            {% include '@branding' with branding only %}
        {% endblock branding %}

        {# Checkbox hack is for no-js support, will be updated to better markup if JS is available #}
        <input id="mobile-menu-toggle" class="menu-toggle u-a11y-text mobile-menu-toggle" type="checkbox" aria-controls="mobile-menu-menu-container">
        <label
            class="menu-toggle-button menu-toggle-button--mobile-menu hamburger mobile"
            for="mobile-menu-toggle"
            data-controls="mobile-menu-menu-container"
            aria-haspopup="true"
            aria-label="Toggle main menu visibility"
            role="menuitem"
        >
            <span class="menu-toggle-button__icon menu-toggle-button__icon--burger">
                <span class="menu-toggle-button__icon--burger__inner"><span class="sr-only">Open the main menu</span></span>
            </span>
        </label>
        <nav
            class="menu flex menu--mobile-menu menu-toggle__toggleable menu-toggle__toggleable--full-height"
            aria-label="main navigation"
            id="mobile-menu-menu-container"
        >
            <div class="menu-toggle__toggleable-content-wrapper">
                <div class="main-nav">
                    <ul class="main-menu">
                        {% block primary_nav %}
                            {% include '@main-menu' with main_menu only %}
                            {% include '@main-menu--academics' with academics_menu only %}
                        {% endblock primary_nav %}
                    </ul>
                </div>
            </div>
        </nav>
        <div class="main-search">
            {# Checkbox hack is for no-js support, will be updated to better markup if JS is available #}
            <input id="site-search-toggle" class="menu-toggle u-a11y-text site-search-toggle" type="checkbox" aria-controls="site-search-menu-container">
            <label
                class="menu-toggle-button menu-toggle-button--site-search"
                for="site-search-toggle"
                data-controls="site-search-menu-container"
                aria-haspopup="true"
                aria-label="Toggle main menu visibility"
                role="menuitem"
            >
                <span class="menu-toggle-button__icon menu-toggle-button__icon--magnifying-glass"><span class="sr-only">open search</span></span>
                <span class="menu-toggle-button__icon menu-toggle-button__icon--close"><span class="sr-only">close the search</span></span>
            </label>
            <div
                class="main-search__block-wrapper menu-toggle__toggleable"
                aria-label="site search"
                id="site-search-menu-container"
            >
                <div class="menu-toggle__toggleable-content-wrapper">
                    {% block search %}
                        This is where the search block should go
                    {% endblock search %}
                </div>
            </div>
        </div>
    </div><!-- end business-nav -->
    <div class="name-tag" id="name-tag">{{ site_slogan }}</div>
</header>
<div id="content"></div>
 
{
  "topnav_links": [
    {
      "title": "Give",
      "url": "https://securelb.imodules.com/s/1127/interior-hybrid.aspx?sid=1127&gid=1&pgid=5310&cid=9528"
    },
    {
      "title": "Visit",
      "url": "http://www1.lehigh.edu/admissions/undergrad/visit"
    },
    {
      "title": "Apply",
      "url": "https://applyweb.collegenet.com/account/new/create?origin=https%3A//www.applyweb.com/shibboleth/gatekeeper%3Fdest%3Dhttps%253A%252F%252Fwww.applyweb.com%252Flehighg%252F"
    }
  ],
  "site_slogan": "Lehigh Business",
  "branding": {
    "site_logo": "/images/lehigh-logo.svg",
    "site_name": "College of Business",
    "url": "/"
  },
  "main_menu": {
    "title": "Menu",
    "items": [
      {
        "title": "Lehigh Business",
        "below": [
          {
            "title": "Undergraduate",
            "url": "#"
          },
          {
            "title": "Graduate",
            "url": "#"
          },
          {
            "title": "Executive Education",
            "url": "#"
          },
          {
            "title": "Alumni",
            "url": "#"
          },
          {
            "title": "About",
            "url": "#"
          },
          {
            "title": "Centers",
            "url": "#"
          },
          {
            "title": "Faculty & Research",
            "url": "#"
          },
          {
            "title": "Events Calendar",
            "url": "#"
          },
          {
            "title": "News & Insights",
            "url": "#"
          },
          {
            "title": "Directory",
            "url": "#"
          }
        ]
      },
      {
        "title": "Departments",
        "below": [
          {
            "title": "Accounting",
            "url": "#"
          },
          {
            "title": "Decision & Technology Analytics",
            "url": "#"
          },
          {
            "title": "Economics",
            "url": "#"
          },
          {
            "title": "Finance",
            "url": "#"
          },
          {
            "title": "Managment",
            "url": "#"
          },
          {
            "title": "Marketing",
            "url": "#"
          }
        ]
      }
    ]
  },
  "academics_menu": {
    "title": "Academics",
    "items": [
      {
        "title": "Undergraduate",
        "below": [
          {
            "title": "Degree Programs",
            "below": [
              {
                "title": "BS Business & Economics",
                "url": "#"
              },
              {
                "title": "BS Integrated Business & Engineering (IBE)",
                "url": "#"
              },
              {
                "title": "BS Computer Science & Business (CSB)",
                "url": "#"
              }
            ]
          },
          {
            "title": "Majors",
            "below": [
              {
                "title": "Accounting",
                "url": "#"
              },
              {
                "title": "Business Information Systems",
                "url": "#"
              },
              {
                "title": "Economics",
                "url": "#"
              },
              {
                "title": "Finance",
                "url": "#"
              },
              {
                "title": "Management",
                "url": "#"
              },
              {
                "title": "Marketing",
                "url": "#"
              },
              {
                "title": "Supply Chain Managment",
                "url": "#"
              }
            ]
          },
          {
            "title": "Minors",
            "below": [
              {
                "title": "Business Information Systems",
                "url": "#"
              },
              {
                "title": "Entrepreneurship",
                "url": "#"
              },
              {
                "title": "Fintech",
                "url": "#"
              },
              {
                "title": "Management",
                "url": "#"
              },
              {
                "title": "Real Estate",
                "url": "#"
              },
              {
                "title": "Supply Chain Management",
                "url": "#"
              }
            ]
          }
        ]
      },
      {
        "title": "Graduate",
        "below": [
          {
            "title": "Master's Program",
            "below": [
              {
                "title": "1-MBA",
                "url": "#"
              },
              {
                "title": "Flex MBA",
                "url": "#"
              },
              {
                "title": "MS Accounting & Information Analysis",
                "url": "#"
              },
              {
                "title": "MS Applied Economics",
                "url": "#"
              },
              {
                "title": "MS Financial Engineering",
                "url": "#"
              },
              {
                "title": "MS Mangament",
                "url": "#"
              }
            ]
          },
          {
            "title": "PH.D. Program",
            "below": [
              {
                "title": "PH.D. Business & Economics",
                "url": "#"
              }
            ]
          }
        ]
      },
      {
        "title": "Executive Education",
        "below": [
          {
            "title": "Programs for Individuals",
            "url": "#"
          },
          {
            "title": "Programs for Organizations",
            "url": "#"
          },
          {
            "title": "Certificate Programs",
            "url": "#"
          }
        ]
      }
    ]
  }
}
  • Content: 
    .skip, .visually-hidden {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  left: -9999px;
  top: -9999px;

  &:hover,
  &:active,
  &:focus {
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
  }
}

.header {
  position: relative;
  z-index: 501;
}

.lehigh-nav {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  background-color: $gold;
  padding: $space-one-half $space-triple;

  &--universityhome {
    color: $lehigh-brown;
    flex-grow: 1;

    &:hover,
    &:focus {
      color: $lehigh-brown;
    }
  }

  &--links {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    flex-grow: 1;
    justify-content: flex-end;
    @include reset-list-nav;

    li {
      margin: 0 $space-double 0 0;

      &:last-of-type {
        margin: 0;
      }
    }

    a {
      color: $lehigh-brown;
    }
  }
}

.business-nav {
  background-color: $lehigh-brown;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  padding: $space;

  @media (min-width: $break-desktop) {
    padding: $space $space-triple;
  }

  &.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    max-width: 1920px;
  }

  .hamburger {
    .icons {
      background-color: transparent;
      max-width: inherit;
      min-width: inherit;
      margin: 0;
      padding: 0;
      cursor: pointer;

      i {
        font-size: 2.5rem;
      }
    }
  }

  @media (min-width: $break-desktop) {
    .hamburger {
      display: none;
    }
  }

  .menu {
    flex-grow: 3;
    color: $white;
    display: flex;
    @media (min-width: $break-desktop) {
      justify-content: flex-end;
    }
  }
}

.main-search {
  color: $white;

  .icon-list {
    align-content: flex-end;

    .icons {
      background-color: transparent;
      max-width: inherit;
      min-width: inherit;
      margin: 0;
      padding: 0;
      cursor: pointer;

      i {
        font-size: 1.5rem;
      }
    }
  }
}

.menu-toggle-button--site-search {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 72px;
  height: 41px;
  color: $white;
  @media (min-width: $break-desktop) {
    position: relative;
    bottom: auto;
    right: auto;
    height: 48px;
  }
  &:hover,
  &:focus {
    &:before,
    &:after {
      background: darken($lehigh-brown, 10);
    }
  }

  .menu-toggle-button__icon--magnifying-glass {
    @include css-art--magnifying-glass($white);
  }

  .menu-toggle-button__icon--magnifying-glass {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: scale(0.5) translate(-50%, -50%) translate(0, -5px);
    transition: opacity 0.25s;
  }

  .menu-toggle-button__icon--close {
    @include css-art--x($white);
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    opacity: 0;
    transition: opacity 0.25s;
  }

  &.js-menu-toggle-button--active {
    background: darken($lehigh-brown, 10);

    .menu-toggle-button__icon--magnifying-glass {
      opacity: 0;
    }

    .menu-toggle-button__icon--close {
      opacity: 1;
    }
  }

}

.main-search__block-wrapper {
  color: $white;
  background: $lehigh-brown;
  > .menu-toggle__toggleable-content-wrapper {
    padding: $space-one-half $space-double;
  }
}

.name-tag {
  background-color: $lehigh-brown;
  color: $white;
  font-family: $font-lehigh-business;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1;
  font-style: italic;
  border-top: 1px solid $white;
  padding: $space-one-half;
  text-align: center;

  &.sticky {
    position: fixed;
    top: 80px;
    width: 100%;
    max-width: 1920px;
  }
}

.menu-toggle-button,
.js-menu-toggle__toggleable__close,
.menu-toggle-button--shut {
  border: 0;
  appearance: none;
  background: transparent;
}

.menu--mobile-menu {
  background: $white;
  @media (min-width: $break-desktop) {
    height: auto!important; // Overriding inline style
    background: transparent;
  }

  > .menu-toggle__toggleable-content-wrapper {
    width: 100%;
    @media (min-width: $break-desktop) {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: auto;
    }
  }
}

.menu-toggle-button--mobile-menu {
  position: absolute;
  top: 0;
  right: 0;
  height: 67px;
  width: 72px;
}

.menu-toggle-button__icon--burger {
  position: absolute;
  top: 50%;
  left: 50%;
  @include css-art--burger(
    $white,
    '.menu-toggle-button__icon--burger__inner',
  );

  .js-menu-toggle-button--active & {
    @include css-art--burger--close(
      $white,
      '.menu-toggle-button__icon--burger__inner',
    );
  }
  transform: translate(-50%, -50%) scale(0.5);
}


// -----------------------------------------------------------------------------
// Mobile Menu Behavior Styles (Mobile burger)
// -----------------------------------------------------------------------------
/// Visibility has to have a different delay on default state vs open state
/// Adding mixin so transitions are managed in one place instead of 2
@mixin mobile-menu__transitions($is-open: true) {
  // sass-lint:disable indentation
  $visibility-delay: 0s;
  @if $is-open == false {
    $visibility-delay: 0.4s;
  }
  // sass-lint:disable indentation
  transition:
    visibility 0s $visibility-delay,
    transform 0.25s ease-out,
    height 0.25s ease-out;
  // sass-lint:enable indentation
  // Disabled at desktop
  @media (min-width: $break-desktop) {
    visibility: visible;
    transition: none;
  }
  // sass-lint:enable indentation
}

%mobile-menu--shut {
  @include mobile-menu__transitions(false);
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
  width: 200vw;
  height: 100vh; // Gets overridden by JS
  overflow: hidden;
  @media (min-width: $break-desktop) {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    overflow: visible;
  }

  &.js-menu-toggle__toggleable--active-child {
    transform: translate(-100vw);
    @media (min-width: $break-desktop) {
      transform: none;
    }
  }

  > .menu-toggle__toggleable-content-wrapper {
    width: 100vw;
    @media (min-width: $break-desktop) {
      width: auto;
    }
  }
}

%mobile-menu--open {
  @include mobile-menu__transitions();
  transform: none;
  @media (min-width: $break-desktop) {
    overflow: visible;
  }
}

.mobile-menu-toggle,
.menu-toggle-button--mobile-menu {
  @media (min-width: $break-desktop) {
    display: none;
  }
}

// No JS solution
.mobile-menu-toggle {
  ~ .menu--mobile-menu {
    @extend %mobile-menu--shut;
  }

  &:checked ~ .menu--mobile-menu {
    @extend %mobile-menu--open;
  }
}

// JS Solution (which is more accessible)
.menu--mobile-menu {
  @media (min-width: $break-desktop) {
    margin-left: auto;
    margin-right: auto;
  }

  &.js-menu-toggle__toggleable {
    @extend %mobile-menu--shut;

    // @todo shouldn't have to add this, have a bug in menu-toggle
    &:not(.js-menu-toggle__toggleable--open) {
      height: 0 !important;
    }
  }

  &.js-menu-toggle__toggleable--open {
    @extend %mobile-menu--open;
  }
}

// Open and Shut Styles
// -----------------------------------------------------------------------------
/// Visibility has to have a different delay on default state vs open state
/// Adding mixin so transitions are managed in one place instead of 2
@mixin main-search__transitions($is-open: true) {
  $visibility-delay: 0s;
  @if $is-open == false {
    $visibility-delay: 0.4s;
  }
  // sass-lint:disable indentation
  transition:
    visibility 0s $visibility-delay,
    height 0.25s ease-out,
    padding-top 0.25s ease-in-out,
    padding-bottom 0.25s ease-in-out,
    box-shadow 0.4s ease-out;
  // sass-lint:enable indentation
}

%main-search--shut {
  @include main-search__transitions(false);
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: -2;
  height: 0;
  overflow: hidden;
}

%main-search--open {
  @include main-search__transitions();
  height: 120px; // Default, it'll be overridden by JS

  // If there's a height style on the tag JS has height, so we don't need scroll
  &[style*='height'] {
    overflow: hidden;
  }

}

// No JS solution
// sass-lint:disable no-mergeable-selectors
.site-search-toggle {
  ~ .menu-toggle__toggleable {
    @extend %main-search--shut;
  }

  &:checked ~ .menu-toggle__toggleable {
    @extend %main-search--open;
  }
}

// JS Solution (which is more accessible)
.main-search__block-wrapper {
  &.js-menu-toggle__toggleable {
    @extend %main-search--shut;
  }

  &.js-menu-toggle__toggleable--open {
    @extend %main-search--open;
  }
}
// sass-lint:enable no-mergeable-selectors
  • URL: /components/raw/header/header.scss
  • Filesystem Path: components/03-sections/01-header/header.scss
  • Size: 8.9 KB

No notes defined.