people

css/sass/_component_import.scss

@@ -38,3 +38,4 @@
 @import "components/landingpage";
 @import "components/landingpage_events";
 @import "components/diy";
+@import "components/megamenu";

css/sass/components/_megamenu.scss

@@ -0,0 +1,164 @@
+nav#tbm-menu-center-navigation {
+  margin-right: 5.5em;
+}
+.tbm {
+  background-color: $black;
+}
+
+.tbm-item.level-1 {
+  border-right: 1px solid rgba(0, 0, 0, 0.2);
+}
+.tbm-submenu {
+  margin-top: 8px;
+}
+.tbm-link.level-1 {
+  color: #222;
+  //padding: 1rem 1.25rem;
+  padding: 0.5rem;
+
+  display: flex;
+  justify-content: center;
+  flex-flow: column;
+  color: #fefefe;
+  font-family: 'Roboto Condensed', sans-serif;
+  font-size: 0.8em;
+  padding: 0.5rem;
+  text-decoration: none;
+  span {
+    margin-bottom: 5px;
+    font-size: 1.7rem;
+  }
+}
+
+.tbm-link.level-1:hover,
+.tbm-link.level-1:focus {
+  background-color: #e8e8e8;
+  background-color: $black;
+}
+
+.tbm-submenu-toggle {
+  background-color: #f5f5f5;
+  color: #222;
+}
+
+.tbm-submenu-toggle:hover,
+.tbm-submenu-toggle:focus {
+  background-color: #e8e8e8;
+}
+
+.tbm-caption {
+  color: #444;
+  font-size: 0.75rem;
+  margin-top: 0.25rem;
+}
+
+.tbm-submenu {
+  background-color: #fff;
+  border-radius: 0;
+  border-top-width: 0;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  padding: 1rem;
+}
+
+.tbm-submenu .tbm-submenu {
+  border-top-width: 1px;
+}
+
+.tbm-item--has-flyout .tbm-submenu-toggle:hover,
+.tbm-item--has-flyout .tbm-submenu-toggle:focus {
+  background-color: transparent;
+}
+
+.tbm-item--has-flyout .tbm-submenu-toggle:hover:before,
+.tbm-item--has-flyout .tbm-submenu-toggle:focus:before {
+  border-left-color: #1197f0;
+}
+
+.tbm-subnav > .tbm-item:first-child > .tbm-link-container > .tbm-link {
+  border-top: 0;
+}
+
+.tbm-subnav > .tbm-item > .tbm-link-container > .tbm-link {
+  color: #222;
+  display: block;
+  padding: 0.5rem 0;
+}
+
+.tbm-subnav > .tbm-item > .tbm-link-container > .tbm-link:hover,
+.tbm-subnav > .tbm-item > .tbm-link-container > .tbm-link:focus {
+  color: #1197f0;
+}
+
+.tbm-button {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-color: #f5f5f5;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+.tbm-group-container {
+  border-top: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+.tbm-group-title {
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+.tbm.tbm--mobile {
+  background-color: transparent;
+}
+
+.tbm.tbm--mobile .tbm-item {
+  border-top: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+.tbm.tbm--mobile .tbm-item.level-1.open > .tbm-toggle {
+  background-color: #000;
+  color: #fff;
+}
+
+.tbm.tbm--mobile .tbm-collapse {
+  background: #fff;
+  padding-top: 1rem;
+}
+
+.tbm.tbm--mobile .tbm-nav {
+  background: #f5f5f5;
+}
+
+.tbm.tbm--mobile .tbm-submenu {
+  box-shadow: none;
+  border-top: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+.tbm.tbm--mobile .tbm-submenu .tbm-link {
+  padding: 1rem 1.25rem;
+}
+
+.tbm.tbm--mobile .tbm-submenu .tbm-submenu-toggle {
+  background-color: #fff;
+  color: currentColor;
+}
+
+.tbm.tbm--mobile .tbm-submenu-toggle {
+  border-left: 1px solid rgba(0, 0, 0, 0.2);
+  border-right: 0;
+}
+
+.tbm.tbm--mobile .tbm-subnav .tbm-item:first-child {
+  border-top: 0;
+}
+
+.tbm.tbm--mobile .tbm-subnav .tbm-subnav {
+  margin-left: 1rem;
+}
+
+.tbm.tbm--mobile .tbm-block {
+  margin-bottom: 0;
+  padding: 0 1.25rem;
+}
+
+/*# sourceMappingURL=styles.css.map*/