Lehigh Clutch Style Guide

Navbar 

<nav class="navbar navbar-expand-md navbar-light bg-light">
    <div class="searchbox">
        <form class="form-inline my-2 my-lg-0 main-search">
            <button role="button" class="btn search_icon"><i class="fas fa-search"></i><span class="sr-only">Open search bar</span></button>
            <div class="search-container input-group ">
                <input class="form-control border-right-0 border" type="search" placeholder="Search" aria-label="Search">
                <div class="search_buttons_wrapper">
                    <span class="input-group-append">
                        <button data-drupal-selector="edit-submit" id="edit-submit" class="btn btn-outline-info border-left-0 border-right-0 border js-form-submit form-submit" type="submit"><i class="fas fa-search"></i><span class="sr-only">Search</span></button>
                    </span>
                    <span class="input-group-append close_search">
                        <button class="btn btn-outline-danger border-left-0 border" type="button"><i class="fa fa-times"></i><span class="sr-only">Close the search box</span></button>
                    </span>
                </div><!-- end search_buttons_wrapper -->
            </div>
        </form>
    </div>

    <div class="collapse navbar-collapse navbar-wrapper nav-wrapper container-fluid" id="navbarSupportedContent">
        <div class="col-lg-9 main_nav">
            <ul class="navbar-nav mr-auto">

                <li class="nav-item dropdown">
                    <div class="button-wrapper">
                        <a class="nav-link dropdown-toggle" href="#">Page 1</a>
                        <button class="show-menu" id="Page 1_dropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-plus"></i><span class="sr-only">Show menu</span></button>
                        <div class="dropdown-menu" aria-labelledby="Page 1_dropdown">
                            <div class="dropdown_category">
                                <h2><a href="#">Group 1</a></h2>
                                <ul class="category_items">
                                    <li>
                                        <a href="#">Subpage 1</a>

                                    </li>
                                    <li>
                                        <a href="#">Subpage 2</a>

                                    </li>
                                    <li>
                                        <a href="#">Subpage 3</a>

                                    </li>
                                </ul>
                            </div>
                            <div class="dropdown_category">
                                <h2><a href="#">Group 2</a></h2>
                                <ul class="category_items">
                                    <li>
                                        <a href="#">Subpage 1</a>

                                    </li>
                                    <li>
                                        <a href="#">Subpage 2</a>

                                    </li>
                                    <li>
                                        <a href="#">Subpage 3</a>

                                    </li>
                                    <li>
                                        <a href="#">Subpage 4</a>

                                    </li>
                                    <li>
                                        <a href="#">Subpage 5</a>

                                    </li>
                                </ul>
                            </div>
                            <div class="dropdown_category">
                                <h2><a href="#">Group 3</a></h2>
                                <ul class="category_items">
                                    <li>
                                        <a href="#">Subpage 1</a>

                                    </li>
                                    <li>
                                        <a href="#">Subpage 2</a>

                                    </li>
                                    <li>
                                        <a href="#">Subpage 3</a>

                                    </li>
                                </ul>
                            </div>
                            <div class="dropdown_category">
                                <h2><a href="#">Group 4</a></h2>
                                <ul class="category_items">
                                    <li>
                                        <a href="#">Subpage 1</a>

                                    </li>
                                    <li>
                                        <a href="#">Subpage 2</a>

                                    </li>
                                    <li>
                                        <a href="#">Subpage 3</a>

                                    </li>
                                </ul>
                            </div>
                            <div class="dropdown_category buttons">
                                <a href="#" class="btn btn-primary " role="button">
                                    <span class="button_text">Button 1</span>
                                    <span class="arrow fal fa-chevron-right"></span>
                                </a>
                                <a href="#" class="btn btn-primary " role="button">
                                    <span class="button_text">Button 2</span>
                                    <span class="arrow fal fa-chevron-right"></span>
                                </a>
                                <a href="#" class="btn btn-primary " role="button">
                                    <span class="button_text">Button 3</span>
                                    <span class="arrow fal fa-chevron-right"></span>
                                </a>
                                <a href="#" class="btn btn-primary " role="button">
                                    <span class="button_text">Button 4</span>
                                    <span class="arrow fal fa-chevron-right"></span>
                                </a>
                            </div>
                        </div>
                    </div>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">Page 2</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">Page 3</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">Page 4</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">Page 5</a>
                </li>

                <div id="more">
                    <button type="button" id="more-label">More <i class="fas fa-plus"></i><span class="sr-only">Show more menu items</span></button>
                    <div id="overflow">
                    </div>
                </div>
            </ul>
        </div><!-- end main_nav -->

        <div class="col-lg-3 utility_nav">
            <nav class="navbar navbar-expand-utility navbar-expand navbar-light bg-light">
                <div class="ut_wrapper">
                    <button class="navbar-toggler quick-link-btn" type="button" data-toggle="collapse" data-target="#utility_nav_ut" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle Quick Link">
                        <span class="navbar-toggler-icon">Quick Links <i class="fas fa-chevron-down"></i></span>
                    </button>
                </div>
                <div class="ut_nav">
                    <ul class="navbar-nav navbar-collapse mr-auto utility_nav_ut collapse" id="utility_nav_ut">
                        <li class="nav-item">
                            <a class="nav-link" href="#">Link 1</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Link 2</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Link 3</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Link 4</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Link 5</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Log Out</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div><!-- end utility_nav -->
    </div><!-- end navigation-wrapper -->
</nav>
 
<nav class="navbar navbar-expand-{{ breakpoint }} navbar-light bg-light">
  {% include "@search_box" %}

  <div class="collapse navbar-collapse navbar-wrapper nav-wrapper container-fluid{% if not_available %} not_here{% endif %}" id="navbarSupportedContent">
    <div class="col-lg-9 main_nav">
      <ul class="navbar-nav mr-auto">
        {% for nav_item in nav_items %}
          {% set active_nav = nav_item.active ? ' is-active' : '' %}
          {% set active_nav_sr = nav_item.active ? ' <span class="sr-only">(current)</span>' : '' %}
          {% set dropdown = nav_item.submenu_items ? ' dropdown' : '' %}
          {% set dropdown_toggle = nav_item.submenu_items ? ' dropdown-toggle' : ''%}
          {% set dropdown_id = nav_item.link_text ~ '_dropdown' %}

          <li class="nav-item{{ dropdown }}{{ active_nav }}">
            {% if nav_item.submenu_items %}
              <div class="button-wrapper">
            {% endif %}
              <a class="nav-link{{ active_nav }}{{ dropdown_toggle }}{% if nav_item.active_item_sg %} active{% endif %}" href="{{ nav_item.url }}">{{ nav_item.link_text }}{{ active_nav_sr }}</a>
            {% if nav_item.submenu_items %}
              <button class="show-menu" id="{{ dropdown_id }}" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-plus"></i><span class="sr-only">Show menu</span></button>
              <div class="dropdown-menu" aria-labelledby="{{ dropdown_id }}">
                {% for submenu_item in nav_item.submenu_items %}
                  <div class="dropdown_category">
                    {% if submenu_item.heading %}<h2><a href="{{ submenu_item.heading_url }}">{{ submenu_item.heading }}</a></h2>{% endif %}
                    <ul class="category_items">
                      {% for category_item in submenu_item.category_items %}
                        <li{% if category_item.active_item_sg %} class="active-sublink"{% endif %}>
                          <a href="{{ category_item.url }}"{% if category_item.active_item_sg %} class="active"{% endif %}>{{ category_item.link_text }}</a>

                          {% if category_item.sub_category_items %}
                            {% set dropdown_subid = category_item.link_text ~ '_dropdown' %}
                            <div class="dropdown-menu third-level" aria-labelledby="{{ dropdown_id }}">
                              <ul class="category_items">
                                {% for sub_category_items in category_item.sub_category_items %}
                                <li{% if sub_category_items.active_item_sg %} class="active-sublink"{% endif %}>
                                  <a href="{{ sub_category_items.url }}"{% if sub_category_items.active_item_sg %} class="active"{% endif %}>{{ sub_category_items.link_text }}</a>
                                </li>
                                {% endfor %}
                              </ul>
                            </div><!-- end dropdown-menu -->
                          {% endif %}
                        </li>
                      {% endfor %}
                    </ul>
                  </div>
                {% endfor %}
                {% if nav_item.submenu_buttons %}
                  <div class="dropdown_category buttons">
                    {% for submenu_button in nav_item.submenu_buttons %}
                      {% include "@a_tag" with {
                        text: submenu_button.text,
                        url: submenu_button.url
                      } %}
                    {% endfor %}
                  </div>
                {% endif %}
              </div>
            </div>
            {% endif %}
          </li>
        {% endfor %}

        <div id="more">
          <button type="button" id="more-label">More <i class="fas fa-plus"></i><span class="sr-only">Show more menu items</span></button>
          <div id="overflow">
          </div>
        </div>
      </ul>
    </div><!-- end main_nav -->

    <div class="col-lg-3 utility_nav{% if not_available %} not_here{% endif %}">
      <nav class="navbar navbar-expand-utility navbar-expand navbar-light bg-light">
        <div class="ut_wrapper">
          <button class="navbar-toggler quick-link-btn" type="button" data-toggle="collapse" data-target="#utility_nav_ut" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle Quick Link">
            <span class="navbar-toggler-icon">Quick Links <i class="fas fa-chevron-down"></i></span>
          </button>
        </div>
        <div class="ut_nav">
          <ul class="navbar-nav navbar-collapse mr-auto utility_nav_ut collapse" id="utility_nav_ut">
            {% for utility_nav_item in utility_nav_items %}
              <li class="nav-item">
                <a class="nav-link" href="{{ utility_nav_item.url }}">{{ utility_nav_item.link_text }}</a>
              </li>
            {% endfor %}
          </ul>
        </div>
      </nav>
    </div><!-- end utility_nav -->
  </div><!-- end navigation-wrapper -->
</nav>
 
{
  "breakpoint": "md",
  "sideNav": false,
  "nav_items": {
    "1": {
      "url": "#",
      "link_text": "Page 1",
      "submenu_items": {
        "1": {
          "heading": "Group 1",
          "heading_url": "#",
          "category_items": {
            "1": {
              "link_text": "Subpage 1",
              "url": "#"
            },
            "2": {
              "link_text": "Subpage 2",
              "url": "#"
            },
            "3": {
              "link_text": "Subpage 3",
              "url": "#"
            }
          }
        },
        "2": {
          "heading": "Group 2",
          "heading_url": "#",
          "category_items": {
            "1": {
              "link_text": "Subpage 1",
              "url": "#"
            },
            "2": {
              "link_text": "Subpage 2",
              "url": "#"
            },
            "3": {
              "link_text": "Subpage 3",
              "url": "#"
            },
            "4": {
              "link_text": "Subpage 4",
              "url": "#"
            },
            "5": {
              "link_text": "Subpage 5",
              "url": "#"
            }
          }
        },
        "3": {
          "heading": "Group 3",
          "heading_url": "#",
          "category_items": {
            "1": {
              "link_text": "Subpage 1",
              "url": "#"
            },
            "2": {
              "link_text": "Subpage 2",
              "url": "#"
            },
            "3": {
              "link_text": "Subpage 3",
              "url": "#"
            }
          }
        },
        "4": {
          "heading": "Group 4",
          "heading_url": "#",
          "category_items": {
            "1": {
              "link_text": "Subpage 1",
              "url": "#"
            },
            "2": {
              "link_text": "Subpage 2",
              "url": "#"
            },
            "3": {
              "link_text": "Subpage 3",
              "url": "#"
            }
          }
        }
      },
      "submenu_buttons": {
        "1": {
          "text": "Button 1",
          "url": "#"
        },
        "2": {
          "text": "Button 2",
          "url": "#"
        },
        "3": {
          "text": "Button 3",
          "url": "#"
        },
        "4": {
          "text": "Button 4",
          "url": "#"
        }
      }
    },
    "2": {
      "url": "#",
      "link_text": "Page 2"
    },
    "3": {
      "url": "#",
      "link_text": "Page 3"
    },
    "4": {
      "url": "#",
      "link_text": "Page 4"
    },
    "5": {
      "url": "#",
      "link_text": "Page 5"
    }
  },
  "utility_nav_items": {
    "1": {
      "url": "#",
      "link_text": "Link 1"
    },
    "2": {
      "url": "#",
      "link_text": "Link 2"
    },
    "3": {
      "url": "#",
      "link_text": "Link 3"
    },
    "4": {
      "url": "#",
      "link_text": "Link 4"
    },
    "5": {
      "url": "#",
      "link_text": "Link 5"
    },
    "6": {
      "url": "#",
      "link_text": "Log Out"
    }
  }
}
  • Content: 
    var Drupal = Drupal || {};
var drupalSettings = drupalSettings || {};
(function (Drupal, drupalSettings) {
  var docReady = function (fn) {
    // Check if the DOM is already loaded
    if (document.readyState === "complete" || document.readyState === "interactive") {
      setTimeout(fn, 1);
    } else {
      document.addEventListener("DOMContentLoaded", fn);
    }
  };

  // debulked onresize handler
  function on_resize(c, t) {
    onresize = function () {
      clearTimeout(t);
      t = setTimeout(c, 100);
    };
    return c;
  }

  // Navigation Menu Classes / Dropdown Support
  function setupDropdownMenus() {
    // Get all elements with class 'show-menu'
    var showMenuElems = document.querySelectorAll('.show-menu');

    // Add click event listener to all 'show-menu' elements
    showMenuElems.forEach(function (elem) {
      elem.addEventListener('click', function () {
        // Remove 'open' class from all 'show-menu' elements except for the current one
        showMenuElems.forEach(function (e) {
          if (e !== elem) {
            e.parentNode.parentNode.classList.remove('open');
          }
        });

        // Toggle the 'open' class on the parent of the clicked 'show-menu' element
        elem.parentNode.parentNode.classList.toggle('open');
      });
    });

    // Get all elements with class 'dropdown-menu'
    var dropdownMenuElems = document.querySelectorAll('.dropdown-menu');

    // Add click event listener to all 'dropdown-menu' elements to stop event propagation
    dropdownMenuElems.forEach(function (elem) {
      elem.addEventListener('click', function (e) {
        e.stopPropagation();
      });
    });

    // Add click event listener to all 'show-menu' elements with class 'open' to remove 'open' class
    var showMenuOpenElems = document.querySelectorAll('.show-menu.open');
    showMenuOpenElems.forEach(function (elem) {
      elem.addEventListener('click', function () {
        showMenuElems.forEach(function (e) {
          e.classList.remove('open');
        });
      });
    });
  }

  // Utility class for small screens
  function setWindowClasses() {
    var body = document.getElementsByTagName('body')[0];
    if (window.innerWidth < 992) {
      body.classList.add('small-screen');
    } else {
      body.classList.remove('small-screen');
    }
  }

  // Overflow menu stuff
  // Goal: As the viewport width decreases, take any links that don't fit in the horizontal menu bar and move them into a vertical dropdown menu.

  // Hide links which may overflow and show links that should be visible
  function do_calculate(runTwice = false) {
    setWindowClasses();

    // horizontal room we have to work with (the container)
    // This gets recalculated below if we show the More button
    var moreBtn = document.querySelector('.main_nav #more').offsetWidth;
    var mainNavTotalSpace = document.querySelector('.main_nav').offsetWidth;
    var navSpace = mainNavTotalSpace - moreBtn;

    // calc the combined width of all links currently in the horizontal menu
    var linksWidth = 0;
    var navItems = document.querySelectorAll('.main_nav .navbar-nav > .nav-item');
    for (var i = 0; i < navItems.length; i++) {
      linksWidth += navItems[i].offsetWidth;
    }

    // now let's compare them to see if all the links fit in the container...
    if (linksWidth > navSpace) {
      // uh oh, the width of the links is greater than the width of their container...

      // Make sure the more button is shown and recalculate the space variables
      document.querySelector('#more').style.visibility = 'visible';
      document.querySelector('#more-label').style.display = 'block';
      moreBtn = document.querySelector('.main_nav #more').offsetWidth;
      navSpace = document.querySelector('.main_nav').offsetWidth - moreBtn;

      // keep moving links from the menu to the overflow until the combined width is less than the container...
      while (linksWidth > navSpace) {
        var lastLink = document.querySelector('.main_nav .navbar-nav > .nav-item:last-of-type');
        var lastLinkWidth = lastLink.offsetWidth;
        lastLink.dataset.foo = lastLinkWidth;
        document.querySelector('#overflow').insertBefore(lastLink, document.querySelector('#overflow').firstChild);
        var overflowDiv = document.querySelector('#overflow');
        var overflowFirstChild = document.querySelector('#overflow').firstChild;
        overflowDiv.insertBefore(lastLink, overflowFirstChild);
        linksWidth -= lastLinkWidth;
      }

    } else {
      // shazam, the width of the links is less than the width of their container...
      // let's move links from the overflow back into the menu until we run out of room again...

      // Get the first overflow link, if it exists
      var firstOverflowLink = document.querySelector('#overflow > .nav-item:first-of-type');
      // Start adding back
      while (linksWidth <= navSpace && firstOverflowLink) {
        var firstOverflowLinkWidth = firstOverflowLink.dataset.foo;

        if (navSpace - linksWidth > firstOverflowLinkWidth) {
          document.querySelector('#more').parentNode.insertBefore(firstOverflowLink, document.querySelector('#more'));
        }

        linksWidth += parseInt(firstOverflowLinkWidth);
        firstOverflowLink = document.querySelector('#overflow > .nav-item:first-of-type');
      }

      // should we hide the overflow menu?
      var overflowItems = document.querySelectorAll('#overflow > .nav-item');
      if (overflowItems.length === 0) {
        // Hide or modify elements only if the selector found no elements
        var moreElement = document.querySelector('#more');
        if (moreElement !== null) {
          moreElement.style.visibility = 'hidden';

          var moreLabelElement = document.querySelector('#more-label');
          if (moreLabelElement !== null) {
            moreLabelElement.style.display = 'none';
          }

          var dropdownElement = document.querySelector('#more #overflow .dropdown');
          if (dropdownElement !== null) {
            dropdownElement.classList.remove('open');

            var buttonWrapperElement = document.querySelector('#more #overflow .dropdown .button-wrapper');
            if (buttonWrapperElement !== null) {
              buttonWrapperElement.classList.remove('show');
            }

            var dropdownMenuElement = document.querySelector('#more #overflow .dropdown .dropdown-menu');
            if (dropdownMenuElement !== null) {
              dropdownMenuElement.classList.remove('show');
            }

            var showMenuElement = document.querySelector('#more #overflow .dropdown .show-menu');
            if (showMenuElement !== null) {
              showMenuElement.setAttribute('aria-expanded', 'false');
            }
          }
        }
      }
    }

    // We have issues where fonts will load, causing the styles to need to be regenerated
    // This gets passed as true when we DOMContentLoaded
    if (runTwice) {
      setTimeout(do_calculate, 100);
    }
  }

  // Adds listeners to support overflow menu and keyboard navigation / advanced closing with clicks
  function setupOverflow() {
    // Adds a toggle for the menu when the menu label is clicked
    const moreLabel = document.querySelector('#more-label');
    if (moreLabel != null) {
      moreLabel.addEventListener('click', function (e) {
        document.querySelector('#more').classList.toggle('active');
        var moreElement = document.getElementById('more');
        if (moreElement !== null && moreElement.classList.contains('active')) {
          document.querySelector('#more-label').focus();
        }
      });
    }

    function hideMenu(makeOverflowInactive) {
        // If we try to toggle active on #more in focusout, but it is the target we are going to,
        // we will open this back up due to the click class
        // This gets called typically on our click classes when we click outside of #overflow
        if (makeOverflowInactive) {
          document.querySelector('#more').classList.remove('active');
        }
        // Hides the submenu items on focusout
        document.querySelector('#more #overflow .dropdown').classList.remove('open');
        document.querySelector('#more #overflow .dropdown .button-wrapper').classList.remove('show');
        document.querySelector('#more #overflow .dropdown .dropdown-menu').classList.remove('show');
        document.querySelector('#more #overflow .dropdown .show-menu').setAttribute('aria-expanded', 'false');

    }

    document.querySelector('#more').addEventListener('focusout', function(e) {
      console.log('more - focusout');
      console.log(document.activeElement);
      // IF WE MATCH SOME CONDITIONS
      // need to take a look at the event, e to make a determination
      //hideMenu(true);
    });

    document.querySelector('#overflow').addEventListener('focusout', function (e) {
      if (e.target == null || !e.relatedTarget || !e.relatedTarget.closest('#overflow')) {
        // Don't bubble this event
        e.stopPropagation();


        makeOverflowInactive = e.relatedTarget != document.querySelector('#more') && e.relatedTarget != document.querySelector('#more-label');
        hideMenu(makeOverflowInactive);

        return true;
      }
    });
  }

  // Do we meet our requirements to initialize?
  var moreArea = document.querySelector('#more');
  let disableOverflow = drupalSettings.lehighClutch && drupalSettings.lehighClutch.disableMenuOverflow;

  var doInitialize = (moreArea != null);
  if (doInitialize) {
    // Start Page Initialization
    docReady(setupDropdownMenus);
    if (!disableOverflow) docReady(setupOverflow); // overflow state only
    docReady(setWindowClasses);
    if (!disableOverflow) docReady(do_calculate); // overflow state only
    if (!disableOverflow) on_resize(do_calculate); // overflow state only
  }

})(Drupal, drupalSettings);
  • URL: /components/raw/navbar_header/navbar_header.js
  • Filesystem Path: bits/04-components/_navbar_header/navbar_header.js
  • Size: 9.9 KB
  • Content: 
    .navbar {
  &-expand-md {
    .navbar-nav {
      align-items: flex-end;
    }
  }

  &.bg-light {
    background-color: $grey_20 !important;

    .color-scheme-dark & {
      background-color: $dark_mode_grey !important;
    }
  }

  .nav-item {
    padding: 0.5rem;
    width: max-content;
    position: unset;

    .nav-link {
      color: $lehigh_brown !important;
      position: relative;
      margin: 0 auto;
      transition: all 0.2s ease-in-out;
      border: 0;
      font-weight: normal;

      .color-scheme-dark & {
        color: $white !important;
      }
    }

    &.active {
      .nav-link {
        border-bottom: solid 3px $accent_color;
        border-bottom: solid 3px var(--accent_color, $accent_color);
      }
    }
  }

  .dropdown-toggle {
    &::after {
      display: unset;
      margin-left: 0;
      vertical-align: 0;
      content: "";
      border-top: 0;
      border-right: 0;
      border-bottom: 0;
      border-left: 0;
    }
  }

  .main_nav {
    .nav-link {
      font-size: 1.25rem;

      @include media-breakpoint-up(lg) {
        font-size: 1rem;
      }
    }

    .dropdown {
      .button-wrapper {
        display: block;

        @include media-breakpoint-up(lg) {
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
        }

        @include media-breakpoint-down(md) {
          text-align: unset;

          .nav-link,
          .show-menu {
            display: inline-block;
            font-size: 1.25rem;
          }
        }

        i {
          -webkit-transform: rotate(0deg);
          -moz-transform: rotate(0deg);
          -o-transform: rotate(0deg);
          -ms-transform: rotate(0deg);
          transform: rotate(0deg);
          -webkit-transition: all 0.2s ease;
          transition: all 0.2s ease;

          .color-scheme-dark & {
            color: $white;
          }

          .no-js & {
            &::after {
              content: "+";
              font-size: 1.5rem;
              font-style: normal;
              font-weight: 600;
            }
          }
        }

        &.show {
          i {
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
            -webkit-transition: 0.3s;
            -moz-transition: 0.3s;
            -o-transition: 0.3s;
            transition: 0.3s;
          }
        }

        .no-js & {
          .show-menu {
            -webkit-transition: 0.3s;
            -moz-transition: 0.3s;
            -o-transition: 0.3s;
            transition: 0.3s;
          }
          &:hover,
          &:focus-within {
            .show-menu {
              -webkit-transform: rotate(45deg);
              -moz-transform: rotate(45deg);
              -o-transform: rotate(45deg);
              -ms-transform: rotate(45deg);
              transform: rotate(45deg);
              -webkit-transition: 0.3s;
              -moz-transition: 0.3s;
              -o-transition: 0.3s;
              transition: 0.3s;
            }

            .dropdown-menu {
              display: grid;
              grid-template-columns: auto auto auto auto auto;
              grid-gap: 1rem;
              grid-template-rows: auto;
            }
          }
        }
      }

      .dropdown-menu {
        width: unset;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: unset;

        @include media-breakpoint-up(lg) {
          width: 100vw;
          max-width: $max_screen_width;
          padding: $space_two $spacer $space_two $space_three;
          box-shadow: 0 0.8rem 1rem rgba(0, 0, 0, 0.175);
        }

        &.show {
          display: flex;
          flex-direction: column;
          grid-gap: unset;
          margin: 0;
          background-color: $off_white;
          background-color: var(--off_white, $off_white);
          z-index: 110;

          @include media-breakpoint-up(lg) {
            display: grid;
            grid-template-columns: auto auto auto auto auto;
            grid-gap: $space_and_half;
            grid-template-rows: auto;
            background-color: $white;
            background-color: var(--white, $white);
          }

          @include media-breakpoint-up(lg) {
            padding: $space_three;
          }

          .color-scheme-dark & {
            background-color: $dark_mode_grey;
            background-color: var(--dark_mode_grey, $dark_mode_grey);
          }

          .dropdown_category {
            margin: 0;
            padding: 0;
            border-bottom: unset;

            @include media-breakpoint-up(lg) {
              &:has(.category_items) {
                @include media-breakpoint-up(lg) {
                  border-bottom: 0;
                }

                .color-scheme-dark & {
                  border-bottom: 0;
                }
              }
            }

            &.buttons {
              padding: 0;
              border-bottom: 0;
            }
          }
        }

        .dropdown_category {
          &.buttons {
            border-top: 3px solid $grey_darkest;
            border-top: 3px solid var(--grey_darkest, $grey_darkest);

            @include media-breakpoint-up(lg) {
              display: flex;
              flex-direction: column;
              align-items: flex-end;
              grid-column: 5 / 6;
              grid-row: 1 / 3;
              border-top: 0;
            }

            .btn {
              background-color: $grey_light;
              color: $grey_darkest;
              font-weight: bold;
              border: 0;
              border-radius: 0;
              width: 100%;
              margin: $spacer 0;
              padding: $spacer;
              text-align: left;
              position: relative;

              @include media-breakpoint-up(lg) {
                width: 200px;
                margin: 0 0 $spacer 0;
                padding: $space_one_half;
              }
            }
          }

          h2 {
            font-size: 1.25rem;
            color: $grey_darkest;
            color: var(--grey_darkest, $grey_darkest);
            margin: 0;
            padding: $spacer;
            border-top: 1px solid $grey_darkest;
            border-top: 1px solid var(--grey_darkest, $grey_darkest);

            @include media-breakpoint-up(lg) {
              font-size: 1.125rem;
              margin: 0;
              border-top: 0;
              padding: 0;
            }

            .color-scheme-dark & {
              color: $white;
            }

            a {
              color: $grey_darkest;
              color: var(--grey_darkest, $grey_darkest);
              font-weight: 500;
              text-decoration: none;
              border-bottom: 0;

              .color-scheme-dark & {
                color: $white;
                color: var(--white, $white);
                border-bottom: 0;
              }

              &:hover,
              &:focus {
                border-bottom: 0;
                text-decoration: underline;
              }
            }
          }

          ul {
            @include reset-list-nav;

            @include media-breakpoint-up(lg) {
              margin: $spacer 0 0 0;
            }

            >li {
              border-top: 1px solid $grey_darkest;
              border-top: 1px solid var(--grey_darkest, $grey_darkest);
              height: auto;
              padding: $spacer;

              @include media-breakpoint-up(lg) {
                border-top: 0;
                border-left: 2px solid $accent_color;
                border-left: 2px solid var(--accent_color, $accent_color);
                padding: 0 0 0 $space_one_half;
                margin: 0 0 $space_one_half 0;

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

              a {
                font-size: 1rem;
                color: $grey_darkest;
                color: var(--grey_darkest, $grey_darkest);
                text-decoration: none;
                font-weight: normal;
                border-left: 2px solid $accent_color;
                border-left: 2px solid var(--accent_color, $accent_color);
                padding: 0 0 0 $space_one_half;

                .color-scheme-dark & {
                  color: $white;
                  color: var(--white, $white);
                }

                @include media-breakpoint-up(lg) {
                  border-left: unset;
                  padding: 0;
                }

                &:hover,
                &:focus {
                  text-decoration: underline;
                  @include transition;
                }
              }
            }
          }
        }

        &.third-level {
          position: relative !important;
          width: 100%;
          box-shadow: unset;
          padding: $spacer;
        }
      }
    }
  }

  .navbar-toggler {
    background-color: $grey_20 !important;

    .navbar-toggler-icon {
      background-color: $grey_20 !important;
    }
  }

  .navbar-collapse {
    @include media-breakpoint-down(sm) {
      margin: 0 0 $space_three 0;
    }
  }

  .search_icon {
    transition: all 0.2s ease-in-out;

    &:hover {
      box-shadow: unset;

      i {
        color: $gold;
        transition: all 0.2s ease-in-out;
      }
    }
  }
}

.dropdown-item {
  padding: $spacer $space_and_half;
  position: relative;
  margin: 0 auto;
  transition: all 0.2s ease-in-out;
}

// overflow menu styles

#more {
  display: block;
  visibility: hidden;

  #more-label {
    display: none;
  }

  @include media-breakpoint-up(lg) {
    background-color: $grey_darkest;
    background-color: var(--grey_darkest, $grey_darkest);
    position: absolute;
    width: 100px;
    height: 50px;
    padding: 10px;
    line-height: 30px;
    top: 0;
    right: 0;
    text-align: center;

    #overflow {
      // display: none;
      visibility: hidden;
      background-color: $grey_darkest;
      background-color: var(--grey_darkest, $grey_darkest);
      position: absolute;
      top: 50px;
      right: 0;

      border: 0;
      clip: rect(0, 0, 0, 0);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      width: 1px;

      &:not(:focus) {
        visibility: hidden;
      }

      .nav-item {
        a {
          color: $white !important;
          color: var(--white, $white) !important;
          display: block;
          text-align: left;
          padding: 10px;
          line-height: 30px;
        }

        .show-menu {
          i {
            color: $white !important;
            color: var(--white, $white) !important;
          }
        }

        &:hover,
        &:focus,
        &:focus-within {
          a {
            color: $grey_darkest !important;
            color: var(--grey_darkest, $grey_darkest) !important;

            .color-scheme-dark & {
              color: $white !important;
              color: var(--white, $white) !important;
            }
          }

          .show-menu {
            i {
              color: $grey_darkest !important;
              color: var(--grey_darkest, $grey_darkest) !important;

              .color-scheme-dark & {
                color: $white !important;
                color: var(--white, $white) !important;
              }
            }
          }
        }

        .button-wrapper {
          flex-wrap: wrap;

          .nav-link {
            margin: 0;
          }

          .show-menu {
            color: $white;
            color: var(--white, $white);
          }
        }

        &:hover,
        &:focus {
          .button-wrapper {
            .show-menu {
              color: $grey_darkest;
              color: var(--grey_darkest, $grey_darkest);
            }
          }
        }

        .dropdown-menu {
          &.show {
            display: flex;
            position: unset;
            flex-direction: column;
            width: 100%;
            padding: $space_one_half;
          }

          .category_items {
            margin: 0;
          }

          a {
            color: $grey_darkest !important;
            color: var(--grey_darkest, $grey_darkest) !important;

            .color-scheme-dark & {
              color: $white !important;
              color: var(--white, $white) !important;

              &.btn {
                span {
                  color: $grey_darkest !important;
                  color: var(--grey_darkest, $grey_darkest) !important;
                }
              }
            }
          }

          h2 {
            font-size: 1rem;

            a {
              font-weight: normal;
            }
          }
        }

        &.open {
          .nav-link,
          .show-menu {
            color: $grey_darkest !important;
            color: var(--grey_darkest, $grey_darkest) !important;

            .color-scheme-dark & {
              color: $white !important;
              color: var(--white, $white) !important;
            }
          }
        }
      }
    }

    #more-label {
      display: block;
      color: $white;
      color: var(--white, $white);

      i {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
        @include transition;
      }
    }

    &.active{
      #more-label {
        i {
          -webkit-transform: rotate(45deg);
          -moz-transform: rotate(45deg);
          -o-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
          transform: rotate(45deg);
          @include transition;
        }
      }

      #overflow {
        // display: block;
        visibility: visible;
        border: unset;
        clip: unset;
        height: unset;
        margin: unset;
        overflow: unset;
        padding: unset;
        width: 500px;
        z-index: 1000;
      }
    }
  }

  .small-screen & {
    position: unset;
    height: unset;
    width: 100%;

    #overflow {
      display: block;
      position: unset;
    }
  }

}

.form-control {
  color: $grey_darkest;
}

// create option in styleguide to show navbar without quicklinks
.utility_nav.not_here {
  display: none !important;
}

.nav-wrapper.not_here {
  justify-content: flex-start !important;
}
  • URL: /components/raw/navbar_header/navbar_header.scss
  • Filesystem Path: bits/04-components/_navbar_header/navbar_header.scss
  • Size: 14.5 KB

No notes defined.