@eeacms/volto-eea-design-system 0.2.1

package/theme/themes/eea/extras/header.less

@@ -0,0 +1,691 @@
+@type: 'extra';
+@element: 'header';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+            Header
+*******************************/
+
+.eea.header {
+  background: @white;
+
+  /* Top header section */
+  .top.bar {
+    display: flex;
+    align-items: center;
+    height: @mobileTopSectionHeight;
+    background: @topSectionBackground;
+
+    .ui.container {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      z-index: @topSectionZindex;
+      width: 100% !important; // Semantic has auto
+    }
+    .item {
+      display: flex;
+      align-items: center;
+      color: @topSectionItemColor;
+      font-weight: @topSectionItemFontWeight;
+      font-size: @mobileTopSectionItemFontSize;
+    }
+    .ui.dropdown {
+      border: none !important;
+      height: auto !important;
+      border-radius: @defaultBorderRadius;
+      color: @topSectionItemColor;
+
+      font-size: @dropdownFontSize;
+      font-weight: @dropdownFontWeight;
+
+      .menu {
+        margin-top: @mobileDropdownMenuMarginTop;
+        left: @dropdownMenuLeft;
+        right: @dropdownMenuRight;
+
+        .wrapper {
+          display: flex;
+          flex-direction: column;
+          gap: @dropdownMenuWrapperGap;
+          white-space: @dropdownMenuContentWhiteSpace;
+          margin: @dropdownMenuWrapperMargin;
+
+          .item {
+            &:hover {
+              background: @dropdownMenuItemBackgroundColorHover;
+              color: @dropdownMenuItemColorHover;
+              cursor: pointer;
+            }
+          }
+        }
+      }
+    }
+
+    /* Official union dropdowns */
+    .official-union {
+      display: flex;
+      gap: @officialUnionGap;
+
+      img {
+        width: @mobileOfficialUnionImageWidth;
+      }
+
+      .ui.dropdown {
+        font-size: @mobileTopSectionItemFontSize;
+
+        .menu {
+          padding: @mobileOfficialUnionPadding;
+
+          .content {
+            max-width: @mobileOfficialUnionMaxWidth;
+
+            p {
+              font-size: @mobileDropdownMenuContentFontSize;
+              font-weight: @officialUnionTextFontWeight;
+              white-space: @dropdownMenuContentWhiteSpace;
+            }
+            a {
+              font-size: @mobileDropdownMenuContentFontSize;
+              font-weight: @officialUnionLinkFontWeight;
+              white-space: @dropdownMenuContentWhiteSpace;
+              color: @officialUnionLinkColor;
+            }
+
+            i.icon,
+            i.icons {
+              font-size: @mobileTopSectionItemFontSize;
+            }
+          }
+        }
+      }
+    }
+
+    /* Theme sites dropdown */
+    #theme-sites.ui.dropdown .menu {
+      .wrapper {
+        width: @themeSitesMenuWidth;
+
+        .item {
+          padding: @themeSitesMenuItemPadding;
+
+          &:hover {
+            a.site {
+              color: @white;
+            }
+          }
+
+          a.site {
+            color: @themeSitesMenuSiteLinkColor;
+            font-weight: @themeSitesMenuSiteLinkFontWeight;
+          }
+        }
+      }
+    }
+
+    /* Language dropdown */
+    #language-switcher {
+      font-size: @mobileLanguageFontSize;
+
+      img {
+        width: @mobileOfficialUnionImageWidth;
+      }
+      .menu {
+        top: @mobileLanguageMenuTop;
+        color: @japaneseIndigo;
+
+        .wrapper {
+          .item {
+            justify-content: flex-end;
+            padding: @languageMenuPadding;
+            font-weight: @languageMenuItemFontWeight;
+            font-size: @mobileLanguageFontSize;
+
+            span.country-code {
+              margin-left: @mobileLanguageCountryCodeMarginLeft;
+              font-weight: @mobileLanguageCountryCodeFontWeight;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  /* Main header section */
+  .main.bar {
+    scrollbar-gutter: stable;
+
+    .ui.container {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: @mobileMainSectionHeight;
+
+      .ui.grid {
+        /* All margins and paddings removed for main header */
+        width: 100%;
+        margin-top: 0;
+        margin-bottom: 0;
+        margin-left: 0;
+        margin-right: 0;
+
+        div:first-child {
+          padding-left: 0;
+        }
+
+        div:last-child {
+          padding-right: 0;
+        }
+      }
+
+      .eea-logo {
+        width: @logoWidth;
+        max-width: @mobileLogoMaxWidth;
+        margin-top: @mobileLogoMarginTop;
+      }
+
+      .main-menu {
+        display: flex;
+        align-items: flex-end;
+        justify-content: flex-end;
+        width: 100%;
+
+        .item {
+          place-self: @mainMenuItemPlaceSelf;
+          a {
+            color: @mainMenuItemColor;
+            font-size: @headerLargeFontSize; // fallback font size
+            font-size: @mainMenuItemFontSize;
+            font-weight: @mainMenuItemFontWeight;
+          }
+        }
+
+        .item.active {
+          color: @mainMenuItemActiveColor;
+          border-bottom: @mainMenuItemActiveBorder;
+        }
+      }
+    }
+
+    /* Search Box */
+    #search-box {
+      position: relative;
+      z-index: 99999;
+      overflow: auto;
+      width: 100%;
+      height: @mobilePopUpHeight;
+      background: @searchBoxBackgroundGradient;
+
+      .ui.container {
+        height: 100%;
+        align-items: baseline;
+      }
+      .wrapper {
+        position: relative;
+        width: 100%;
+        margin: @mobilePopupMarginTop 0;
+        display: flex;
+        flex-direction: column;
+        gap: @searchBoxWrapperGap;
+
+        .action {
+          display: flex;
+          justify-content: center;
+        }
+      }
+    }
+  }
+}
+
+/***************************************
+Header Actions - Burger and Search Icons
+***************************************/
+.burger-action {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  width: @mobileActionsBoxWidth;
+  height: @mobileMainSectionHeight;
+  background-color: @darkCerulean;
+}
+
+.burger-action.desktop {
+  display: none;
+}
+
+.burger-action.mobile {
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+}
+
+.search-action {
+  cursor: pointer;
+  display: flex;
+  width: @mobileActionsBoxWidth;
+  height: @mobileMainSectionHeight;
+  align-items: center;
+  justify-content: center;
+  background-color: @darkCyan;
+}
+
+.burger-action,
+.search-action,
+.burger-action.mobile {
+  img {
+    width: 60%;
+  }
+  // icon to be used
+  i.icon {
+    margin: 0;
+    color: @white;
+    font-size: 1em;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+@media only screen and (min-width: @tabletBreakpoint) {
+  .eea.header {
+    .top.bar {
+      height: @tabletTopSectionHeight;
+
+      .item {
+        font-size: @tabletTopSectionItemFontSize;
+      }
+
+      .ui.dropdown .menu {
+        margin-top: @tabletDropdownMenuMarginTop;
+      }
+
+      .official-union {
+        img {
+          width: @tabletOfficialUnionImageWidth;
+        }
+        .ui.dropdown {
+          font-size: @tabletTopSectionItemFontSize;
+          .menu {
+            padding: @tabletOfficialUnionPadding;
+
+            .content {
+              max-width: @tabletOfficialUnionMaxWidth;
+
+              p {
+                font-size: @officialUnionMenuFontSize;
+              }
+              a {
+                font-size: @officialUnionMenuFontSize;
+              }
+            }
+          }
+        }
+      }
+
+      /* Language dropdown */
+      #language-switcher {
+        font-size: @tabletLanguageFontSize;
+
+        img {
+          width: 19px;
+        }
+
+        .menu {
+          top: @tabletLanguageMenuTop;
+          .wrapper .item {
+            font-size: @tabletLanguageFontSize;
+          }
+        }
+      }
+    }
+    .main.bar {
+      .ui.container {
+        height: 117px;
+
+        .eea-logo {
+          max-width: @tabletLogoMaxWidth;
+          margin-top: @tabletLogoMarginTop;
+        }
+      }
+
+      /* Search box */
+      #search-box {
+        height: @tabletPopUpHeight;
+        .wrapper {
+          margin: @tabletPopupMarginTop 0;
+        }
+      }
+    }
+  }
+
+  .text.menu {
+    display: none;
+  }
+
+  .burger-action.mobile {
+    display: flex;
+  }
+
+  /* Action Boxes */
+  .burger-action.mobile,
+  .search-action {
+    width: @tabletActionsBoxWidth;
+    height: @tabletMainSectionHeight;
+  }
+}
+
+@media only screen and (min-width: @computerBreakpoint) {
+  .eea.header {
+    .top.bar {
+      height: @computerTopSectionHeight;
+    }
+
+    .main.bar {
+      .ui.container {
+        height: 160px;
+
+        .eea-logo {
+          max-width: @computerLogoMaxWidth;
+          margin-top: @computerLogoMarginTop;
+        }
+
+        .ui.text.menu {
+          display: flex;
+          width: 88%;
+          max-height: 20px;
+          justify-content: space-between;
+          margin: 0;
+        }
+      }
+
+      /* Search box */
+      #search-box {
+        height: @computerPopUpHeight;
+
+        .wrapper {
+          margin: @computerPopupMarginTop 0;
+
+          .action {
+            justify-content: flex-end;
+          }
+        }
+      }
+    }
+  }
+
+  .burger-action.mobile {
+    display: none;
+  }
+
+  .burger-action.desktop {
+    display: flex;
+    width: @computerActionsBoxWidth;
+    height: @computerMainSectionHeight;
+  }
+
+  .search-action {
+    width: @computerActionsBoxWidth;
+    height: @computerMainSectionHeight;
+  }
+}
+
+@media only screen and (max-width: 960px) {
+  #theme-sites {
+    display: none;
+  }
+}
+
+/************************
+      MEGA MENU
+************************/
+
+#mega-menu {
+  position: relative;
+  z-index: 9999;
+  overflow: auto;
+  width: 100%;
+  background: @megaMenuBackgroundGradient;
+
+  .ui.container {
+    height: 100%;
+    align-items: baseline;
+  }
+
+  .toggle,
+  [id^='drop'] {
+    display: none;
+  }
+  nav {
+    margin: @tabletPopupMarginTop 0;
+    padding: 0;
+    width: 100%;
+  }
+
+  nav:after {
+    content: '';
+    display: table;
+    clear: both;
+  }
+
+  nav ul {
+    float: left;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    position: relative;
+
+    > li a {
+      padding: 0;
+    }
+  }
+
+  nav ul li {
+    display: inline-block;
+    font-size: @megaMenuFontSize;
+  }
+
+  nav a {
+    display: flex;
+    color: @mobileMegaMenuColor;
+    padding: @megaMenuLinkPadding;
+    line-height: @megaMenuLineHeight;
+    word-break: @megaMenuWordBreak;
+  }
+
+  nav ul ul {
+    display: none;
+    position: absolute;
+    top: 0;
+  }
+
+  nav ul li:hover > ul,
+  nav ul li:active > ul {
+    display: inherit;
+    display: flex;
+    flex-direction: column;
+  }
+
+  nav ul ul li {
+    float: none;
+    display: list-item;
+  }
+
+  nav ul ul ul li {
+    left: 0;
+  }
+
+  li > a:only-child:after {
+    content: '';
+  }
+
+  @media all and (max-width: @largestMobileScreen) {
+    height: @mobilePopUpHeight;
+    nav {
+      margin: @mobilePopupMarginTop 0;
+    }
+    .menu,
+    li {
+      width: 100%;
+    }
+
+    .toggle + a,
+    .menu {
+      display: none;
+    }
+
+    .toggle {
+      display: block;
+      padding: @toggleMenuFirstPadding;
+      color: @mobileMegaMenuColor;
+      line-height: @megaMenuLineHeight;
+    }
+
+    [id^='drop']:checked + ul {
+      display: block;
+    }
+
+    nav ul li {
+      display: block;
+      width: 100%;
+    }
+
+    nav .menu > li > .toggle,
+    nav .menu > li > a {
+      padding: @mobileToggleMenuFirstPadding;
+    }
+    nav ul ul .toggle,
+    nav ul ul a {
+      padding: @mobileToggleMenuSecondPadding;
+    }
+
+    nav ul ul ul a {
+      padding: @mobileToggleMenuThirdPadding;
+    }
+
+    nav ul ul {
+      float: none;
+      position: static;
+      color: @mobileMegaMenuColor;
+    }
+
+    nav ul ul li:hover > ul,
+    nav ul li:hover > ul {
+      display: none;
+    }
+
+    nav ul ul li {
+      display: block;
+      width: 100%;
+    }
+
+    nav ul ul ul li {
+      position: static;
+    }
+  }
+
+  .menu {
+    display: flex;
+    flex-direction: column;
+  }
+  .sub {
+    left: 100%;
+  }
+
+  @media all and (min-width: @tabletBreakpoint) {
+    height: @tabletPopUpHeight;
+    nav {
+      .menu {
+        width: 33.33%;
+        font-size: @megaMenuFontSize;
+        > li {
+          width: 100%;
+          display: flex;
+          justify-content: space-between;
+          align-items: @megaMenuLiAlignItems;
+          margin-bottom: @tabletMegaMenuMarginBottom;
+
+          &.hasSubMenu:after {
+            content: @megaMenuAfterIcon;
+            font-family: @megaMenuIconFontFamily;
+            color: @white;
+          }
+          a {
+            display: flex;
+            justify-content: space-between;
+            align-items: @megaMenuLiAlignItems;
+            max-width: 100%;
+            padding-left: 1rem;
+          }
+        }
+      }
+
+      .sub.second {
+        width: 100%;
+        left: 100%;
+        > li {
+          width: 100%;
+          display: flex;
+          justify-content: space-between;
+          align-items: @megaMenuLiAlignItems;
+          margin-bottom: @tabletMegaMenuMarginBottom;
+
+          &.hasSubMenu:after {
+            content: @megaMenuAfterIcon;
+            font-family: @megaMenuIconFontFamily;
+            color: @megaMenuIconAfterColor;
+          }
+          a {
+            max-width: 100%;
+            padding-left: 1rem;
+          }
+        }
+      }
+      .sub.third {
+        left: 100%;
+        width: 100%;
+        min-height: 50vh;
+        li {
+          margin-bottom: @tabletMegaMenuMarginBottom;
+          > a {
+            max-width: 100%;
+          }
+        }
+      }
+    }
+    ul li:hover > a span {
+      text-decoration: underline;
+    }
+  }
+
+  @media only screen and (min-width: @computerBreakpoint) {
+    height: @computerPopUpHeight;
+    nav {
+      margin: @computerPopupMarginTop 0;
+      .menu {
+        > li {
+          margin-bottom: @computerMegaMenuMarginBottom;
+          &.hasSubMenu:after {
+            font-size: @megaMenuFontSize;
+          }
+          a {
+            padding-left: 2rem;
+          }
+        }
+      }
+      .sub.second li {
+        margin-bottom: @computerMegaMenuMarginBottom;
+        &.hasSubMenu:after {
+          font-size: @megaMenuFontSize;
+        }
+        a {
+          padding-left: 2rem;
+        }
+      }
+      .sub.third li {
+        margin-bottom: @computerMegaMenuMarginBottom;
+      }
+    }
+  }
+}