@eeacms/volto-eea-design-system 0.8.0 → 0.9.0

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

@@ -123,34 +123,10 @@ footer .footer-wrapper .menu {
     display: flex;
     flex-direction: column;
   }
-  .copyright {
-    display: none !important;
-  }
-
-  .subfooter {
-    order: 1
-  }
-
-  .menu {
-    order: 2;
-    position: relative;
-    margin: @mobileMenuMargin;
-  }
-  .menu::after {
-    position: absolute;
-    bottom: 0;
-    border: @mobileMenuBorder;
-    content: " ";
-    display: block;
-    width: 100vw;
-    left: @mobileMenuLeft;
-  }
-  footer .footer-wrapper .menu a {
-    font-weight: @mobileMenuFontWeight;
-  }
 
-  .theme-sites {
-    order: 3;
+ footer .footer-wrapper .menu .copyright a {
+    font-size: @mobileMenuCopyrightFontSize;
+    font-weight: @mobileMenuCopyrightFontWeight;
   }
 }
 

package/theme/themes/eea/extras/footer.variables

@@ -64,10 +64,9 @@
 /* Footer Menu */
 
 @menuLinkColor                      : @white;
-@menuFontWeight                     : @font-weight-3;
+@menuFontWeight                     : @font-weight-4;
 @mobileMenuFontSize                 : @font-size-0;
-@mobileMenuMargin                   : @rem-space-4 0;
-@mobileMenuBorder                   : 1px solid rgba(249, 249, 249, 0.25);
-@mobileMenuLeft                     : -20px;
-@mobileMenuFontWeight               : 400;
+@mobileMenuCopyrightFontSize        : @font-size-00;
+@mobileMenuCopyrightFontWeight      : @font-weight-3;
+@mobileMenuFontWeight               : @font-weight-4;
 @computerMenuFontSize               : @font-size-1;

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

@@ -24,7 +24,6 @@
 .top.bar {
   display: flex;
   align-items: center;
-  height: @mobileTopSectionHeight;
   background: @topSectionBackground;
 
   .ui.container {
@@ -52,23 +51,35 @@
   height: auto !important;
   border-radius: @defaultBorderRadius;
   color: @topSectionItemColor;
+  padding: @mobileDropdownPadding;
+  max-width: @dropdownMaxWidth;
+}
+
+.top.bar .ui.active.visible.dropdown {
+  background: @grey-0;
+  box-shadow: @shadow-topbar-dropdown;
+
+  i.icon {
+    transform: rotate(180deg);
+  }
 }
 
 .top.bar .divider.text {
   color: @dropdownColor;
-  font-size: @dropdownFontSize;
+  font-size: @mobileDropdownFontSize;
   font-weight: @dropdownFontWeight;
 }
 
 .top.bar .ui.dropdown .menu {
-  margin-top: @mobileDropdownMenuMarginTop;
   left: @dropdownMenuLeft;
   right: @dropdownMenuRight;
+  box-shadow: @shadow-4-no-top;
+  border: none;
 }
 
 .top.bar .ui.dropdown .menu,
 .top.bar .ui.dropdown .menu .item {
-  font-size: @mobileDropdownMenuFontSize;
+  font-size: @dropdownMenuFontSize;
   color: @dropdownColor;
 }
 
@@ -98,7 +109,9 @@
   position: absolute;
   font-size: @topSectionIconFontSize;
   margin-left: @topSectionIconMarginLeft;
-  top: 0;
+  top: @mobileTopSectionIconTop;
+  line-height: @topSectionIconLineHeight;
+  transition: .2s;
 }
 
 /* Official union dropdown */
@@ -108,9 +121,14 @@
 
   img {
     width: @mobileOfficialUnionImageWidth;
+    position: absolute;
+    z-index: @z-index-1;
+    padding-left: @rem-space-2;
   }
 
   .ui.dropdown {
+    padding: @mobileOfficialUnionPadding;
+
     .menu {
       padding: @officialUnionPadding;
       left: @mobileOfficialUnionMenuLeft;
@@ -124,7 +142,6 @@
         a {
           font-weight: @officialUnionLinkFontWeight;
           white-space: @dropdownMenuContentWhiteSpace;
-          color: @officialUnionLinkColor;
         }
       }
     }
@@ -154,9 +171,12 @@
 
 /* Language dropdown */
 #language-switcher {
+  padding: @mobileLanguageMenuPadding;
+  flex-direction: row-reverse;
+
   img {
-    width: @mobileOfficialUnionImageWidth;
-    margin-left: @topSectionIconMarginLeft;
+    width: @mobileLanguageImageWidth;
+    margin-right: @topSectionIconMarginRight;
   }
   .menu {
     .wrapper {
@@ -164,6 +184,10 @@
         justify-content: flex-end;
         font-weight: @languageMenuItemFontWeight;
 
+        span {
+          font-size: @mobileLanguageFontSize;
+        }
+
         span.country-code {
           margin-left: @mobileLanguageCountryCodeMarginLeft;
           font-weight: @mobileLanguageCountryCodeFontWeight;
@@ -199,16 +223,21 @@
     height: @mobileMainSectionHeight;
 
     .ui.grid {
-      /* All margins and paddings removed for main header */
+      // All margins and paddings removed for main header
       width: 100%;
       margin: 0;
 
+      // Override grid specific paddings for header
       div:first-child {
         padding-left: 0;
+        padding-top: 0;
+        padding-bottom: 0;
       }
 
       div:last-child {
         padding-right: 0;
+        padding-top: 0;
+        padding-bottom: 0;
       }
     }
   }
@@ -342,7 +371,7 @@
 .search-action,
 .burger-action.mobile {
   img {
-    width: 60%;
+    width: 75%;
   }
   // icon to be used
   i.icon {
@@ -380,21 +409,12 @@
     HEADER TOP BAR TABLET
   ----------------------------------------------------------------------------*/
 
-  .top.bar {
-    height: @tabletTopSectionHeight;
-  }
-
   .homepage .block-editor-hero {
     margin-top: @tabletTopSectionHeight;
   }
 
-  .top.bar .ui.dropdown .menu {
-    margin-top: @tabletDropdownMenuMarginTop;
-  }
-
-  .top.bar .ui.dropdown .menu,
-  .top.bar .ui.dropdown .menu .item {
-    font-size: @tabletDropdownMenuFontSize;
+  .top.bar .divider.text {
+    font-size: @tabletDropdownFontSize;
   }
 
   /* Official union dropdown */
@@ -404,7 +424,10 @@
     img {
       width: @tabletOfficialUnionImageWidth;
     }
-    .ui.dropdown {
+
+    .ui.dropdown {  
+      padding: @tabletOfficialUnionPadding;
+
       .menu {
         left: @tabletOfficialUnionMenuLeft;
 
@@ -415,14 +438,22 @@
     }
   }
 
+  /* Theme sites dropdown */
+  #theme-sites.ui.dropdown .menu {
+    .wrapper {
+      width: @tabletThemeSitesMenuWidth;
+    }
+  }
+
   /* Language dropdown */
   #language-switcher {
-    img {
-      width: 19px;
+    .divider.text {
+      font-size: @font-size-1;
+      line-height: @font-lineheight-00;
     }
 
-    .menu {
-      top: @tabletLanguageMenuTop;
+    img {
+      width: @tabletLanguageImageWidth;
     }
   }
 
@@ -432,7 +463,7 @@
 
   .main.bar {
     .ui.container {
-      height: 117px;
+      height: @tabletMainSectionHeight;
     }
   }
 
@@ -465,15 +496,43 @@
       HEADER TOP BAR DESKTOP
   ----------------------------------------------------------------------------*/
 
-  .top.bar {
-    height: @computerTopSectionHeight;
-  }
   .homepage .block-editor-hero {
     margin-top: @computerTopSectionHeight;
   }
 
-  .top.bar .ui.dropdown .menu {
-    margin-top: @computerDropdownMenuMarginTop;
+  .top.bar .ui.dropdown {
+    padding: @computerDropdownPadding;
+  }
+
+  .top.bar .ui.dropdown i.chevron.down.icon {
+    top: @computerTopSectionIconTop;
+  }
+
+  .top.bar .official-union {    
+    .ui.dropdown {
+      padding: @computerOfficialUnionPadding;
+
+      .menu {
+        .content {
+            max-width: @computerOfficialUnionMaxWidth;
+        }
+      }
+    }
+  }
+
+  /* Theme sites dropdown */
+  #theme-sites.ui.dropdown .menu {
+    .wrapper {
+      width: @computerThemeSitesMenuWidth;
+    }
+  }  
+
+  #language-switcher {
+    padding: @computerLanguageMenuPadding;
+
+    .menu .wrapper .item span {
+      font-size: @computerLanguageFontSize;
+    }
   }
 
   /*----------------------------------------------------------------------------
@@ -482,7 +541,7 @@
 
   .main.bar {
     .ui.container {
-      height: 160px;
+      height: @computerMainSectionHeight;
 
       .ui.text.menu {
         flex-wrap: wrap;
@@ -675,10 +734,24 @@
   display: none;
 }
 
-@media all and (max-width: @tabletBreakpoint - 1) {
+@media all and (max-width: @largestMobileScreen) {
+  .top.bar .official-union .ui.dropdown .menu {
+    left: -20px;
+    min-width: calc(100vw - 20px);
+
+    .content {
+      max-width: 100%;
+    }
+  }
+
   #theme-sites.ui.dropdown .menu {
     left: @mobileThemeSitesMenuLeft;
   }
+
+  // Languages on mobile only go full right
+  #language-switcher .menu {
+    right: -20px;
+  }
 }
 
 @media all and (min-width: @tabletBreakpoint) {

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

@@ -3,11 +3,11 @@
 --------------------*/
 
 /* Heights */
-@mobileTopSectionHeight      : 22px;
-@tabletTopSectionHeight      : 30px;
-@computerTopSectionHeight    : 33px;
+@mobileTopSectionHeight      : 42px; //delete
+@tabletTopSectionHeight      : 42px;
+@computerTopSectionHeight    : 34px;
 
-@mobileMainSectionHeight     : 56px;
+@mobileMainSectionHeight     : 69px;
 @tabletMainSectionHeight     : 117px;
 @computerMainSectionHeight   : 160px;
 
@@ -34,18 +34,23 @@
 @mobileTopSectionItemFontSize         : @font-size-00;
 @tabletTopSectionItemFontSize         : @font-size-00;
 @topSectionZindex                     : @z-index-1;
-@topSectionIconMarginLeft             : 1px;
-@topSectionIconFontSize               : 0.8rem;
-
-/* Dropdown */
-@mobileDropdownMenuMarginTop          : 0;
-@tabletDropdownMenuMarginTop          : 0.4rem;
-@computerDropdownMenuMarginTop        : 0.438rem;
 @dropdownColor                        : @blue-grey-6;
-@dropdownFontSize                     : @font-size-00;
+@mobileDropdownFontSize               : @font-size-00;
+@tabletDropdownFontSize               : @font-size-00;
 @dropdownFontWeight                   : @bold;
 
+/* Icon */
+@topSectionIconMarginLeft             : @rem-space-1;
+@topSectionIconMarginRight            : @rem-space-1;
+@topSectionIconFontSize               : @font-size-0;
+@topSectionIconLineHeight             : @font-lineheight-00;
+@mobileTopSectionIconTop              : 14px;
+@computerTopSectionIconTop            : 10px;
+
 /* Dropdown Menu */
+@mobileDropdownPadding                : @rem-space-3 @rem-space-6 @rem-space-3 @rem-space-2;
+@computerDropdownPadding              : @rem-space-2 @rem-space-6 @rem-space-2 @rem-space-2;
+@dropdownMaxWidth                     : 410px;
 @dropdownMenuLeft                     : auto;
 @dropdownMenuRight                    : 0;
 @dropdownMenuWrapperGap               : @rem-space-1;
@@ -57,34 +62,42 @@
 @dropdownMenuItemColorHover           : @white;
 @dropdownMenuItemBackgroundColorHover : @blue-grey-6;
 @dropdownMenuItemPadding              : @rem-space-050 @rem-space-5;
-@mobileDropdownMenuFontSize           : @font-size-00;
-@tabletDropdownMenuFontSize           : @font-size-0;
+@dropdownMenuFontSize                 : @font-size-00;
 
 // Official Union
 @mobileOfficialUnionGap               : 0;
-@tabletOfficialUnionGap               : @rem-space-2;
+@tabletOfficialUnionGap               : 0;
 @officialUnionLinkFontWeight          : @bold;
-@officialUnionLinkColor               : @blue-grey-6;
 @officialUnionPadding                 : @rem-space-3;
 @mobileOfficialUnionMaxWidth          : 108px;
-@tabletOfficialUnionMaxWidth          : 388px;
-@mobileOfficialUnionImageWidth        : 17px;
-@tabletOfficialUnionImageWidth        : 36px;
-@mobileOfficialUnionMenuLeft          : -30px;
-@tabletOfficialUnionMenuLeft          : -54px;
+@tabletOfficialUnionMaxWidth          : 272px;
+@computerOfficialUnionMaxWidth        : 380px;
+@mobileOfficialUnionImageWidth        : 25px;
+@tabletOfficialUnionImageWidth        : 44px;
+@mobileOfficialUnionMenuLeft          : 0;
+@tabletOfficialUnionMenuLeft          : 0;
+@mobileOfficialUnionPadding           : @rem-space-3 @rem-space-6;
+@tabletOfficialUnionPadding           : @rem-space-3 @rem-space-6 @rem-space-3 @rem-space-12;
+@computerOfficialUnionPadding         : @rem-space-2 @rem-space-6 @rem-space-2 @rem-space-12;
 
 // Theme Sites
-@mobileThemeSitesMenuWidth            : 200px;
+@mobileThemeSitesMenuWidth            : 168px;
+@tabletThemeSitesMenuWidth            : 168px;
+@computerThemeSitesMenuWidth          : 225px;
 @themeSitesMenuSiteLinkColor          : @blue-grey-6;
 @themeSitesMenuSiteLinkFontWeight     : @normal;
 @mobileThemeSitesMenuLeft             : 0px;
 
 // Language
-@tabletLanguageMenuTop                : 18px;
-@languageMenuPadding                  : @rem-space-050 @rem-space-5;
+@mobileLanguageMenuPadding            : @rem-space-3 @rem-space-2;
+@computerLanguageMenuPadding          : @rem-space-2;
 @languageMenuItemFontWeight           : @normal;
 @mobileLanguageCountryCodeMarginLeft  : 3px;
 @mobileLanguageCountryCodeFontWeight  : @bold;
+@mobileLanguageFontSize               : @font-size-0;
+@computerLanguageFontSize             : @font-size-1;
+@mobileLanguageImageWidth             : 17px;
+@tabletLanguageImageWidth             : 18px;
 
 /*-----------------------
    HEADER MAIN SECTION
@@ -96,7 +109,7 @@
 
 /* Logo */
 @logoWidth                            : 100%;
-@mobileLogoMaxWidth                   : 122px;
+@mobileLogoMaxWidth                   : 142px;
 @tabletLogoMaxWidth                   : 252px;
 @computerLogoMaxWidth                 : 347px; //348 rendered fuzzy :(
 @mobileLogoMarginTop                  : @rem-space-2;
@@ -120,7 +133,7 @@
 ------------------*/
 
 /* Actions (Mega menu & Search) */
-@mobileActionsBoxWidth: 30px;
+@mobileActionsBoxWidth: 44px;
 @tabletActionsBoxWidth: 66px;
 @computerActionsBoxWidth: 72px;
 @burgerActionBackgroundColor: @darkMidnightBlue;
@@ -180,4 +193,14 @@
 
 /* Search box */
 @searchBoxBackgroundGradient : linear-gradient(340.97deg, @darkCerulean 9.19%, #009591 77.47%);
-@searchBoxWrapperGap : 75px;
+@searchBoxWrapperGap : 75px;
+
+/* Custom shadows for dropdowns */
+@shadow-topbar-dropdown: 2px 0 2px -5px hsla(@shadow-color, calc(@shadow-strength + 6%));
+@shadow-4-no-top: 
+  0 0 0 0 hsla(@shadow-color, calc(@shadow-strength + 2%)),
+  0 1px 1px -2px hsla(@shadow-color, calc(@shadow-strength + 3%)),
+  0 2px 2px -2px hsla(@shadow-color, calc(@shadow-strength + 3%)),
+  0 5px 5px -2px hsla(@shadow-color, calc(@shadow-strength + 4%)),
+  0 9px 9px -2px hsla(@shadow-color, calc(@shadow-strength + 5%)),
+  0 16px 16px -2px hsla(@shadow-color, calc(@shadow-strength + 6%));

package/theme/themes/eea/globals/site.overrides

@@ -32,6 +32,15 @@ h2, h3, h4, h5, h6 {
   h4 { font-size: @mobileH4; }
 }
 
+a {
+  &:visited {
+    color:  @linkVisitedColor;
+  }
+  &:active {
+    color: @linkActiveColor;
+  }
+}
+
 [class^='ri-'],
 [class*=' ri-'] {
   fill: currentColor;
@@ -40,3 +49,9 @@ h2, h3, h4, h5, h6 {
 .homepage {
   color: @tertiaryColor;
 }
+
+/* Add background and color for scroll-to-text fragments */
+::target-text {
+  background: @lightLavender;
+  color: @black;
+}

package/theme/themes/eea/globals/site.variables

@@ -194,9 +194,11 @@
        Links
 --------------------*/
 
-@linkColor           : @primaryColor;
+@linkColor           : @blue-4;
+@linkHoverColor      : @blue-5;
+@linkVisitedColor    : @purple-5;
+@linkActiveColor     : @blue-6;
 @linkUnderline       : none;
-@linkHoverColor      : darken(saturate(@linkColor, 20), 15, relative);
 @linkHoverUnderline  : @linkUnderline;
 
 /*-------------------
@@ -222,7 +224,6 @@
 @thumbHoverBackground: rgba(128, 135, 139, 0.8);
 
 /* Inverted */
-@statisticInvertedBackground: @bottleGreen;
 @trackInvertedBackground: rgba(255, 255, 255, 0.1);
 @thumbInvertedBackground: rgba(255, 255, 255, 0.25);
 @thumbInvertedInactiveBackground: rgba(255, 255, 255, 0.15);
@@ -349,7 +350,7 @@
 
 
 /*---  Colors  ---*/
-@orange           : #EBA33D;
+@orange           : #FF9933;
 @yellow           : #F2EB49;
 @olive            : #78AB66;
 @green            : @pineGreen;
@@ -373,6 +374,7 @@
 @lightBlue        : #75C9DB;
 @lightViolet      : #BFC0FF;
 @lightPurple      : #DE99FF;
+@lightLavender    : #E8D2FD;
 @lightPink        : #FFBFF1;
 @lightBrown       : #D9C2AD;
 @lightGrey        : #E6E7E8;
@@ -496,32 +498,34 @@
 --------------------*/
 
 /* Positive */
-@positiveColor           : @pineGreen;
-@positiveBackgroundColor : #EDF9F0;
-@positiveBorderColor     : #EDF9F0;
-@positiveHeaderColor     : @pineGreen;
-@positiveTextColor       : @pineGreen;
+@positiveColor           : @green-6;
+@positiveBackgroundColor : #FCFFF5;
+@positiveBorderColor     : @green-4;
+@positiveHeaderColor     : @green-6;
+@positiveTextColor       : @green-6;
 
 /* Negative */
-@negativeColor           : @red;
+@negativeColor           : @red-5;
 @negativeBackgroundColor : @white;
-@negativeBorderColor     : @red; //#FEEFEF;
-@negativeHeaderColor     : @red;
-@negativeTextColor       : @red;
+@negativeBorderColor     : @red-4;
+@negativeHeaderColor     : @red-5;
+@negativeTextColor       : @red-5;
 
 /* Info */
-@infoColor              : @mediumPersianBlue;
-@infoBackgroundColor    : #EEF2FA;
-@infoBorderColor        : #EEF2FA;
-@infoHeaderColor        : @mediumPersianBlue;
-@infoTextColor          : @mediumPersianBlue;
+@infoColor              : @blue-6;
+@infoBackgroundColor    : #F8FFFF;
+@infoBorderColor        : @blue-4;
+@infoHeaderColor        : @blue-6;
+@infoTextColor          : @blue-6;
+
 
 /* Warning */
-@warningColor           : #EBA33D;
-@warningBorderColor     : #FFF4EC;
-@warningBackgroundColor : #FFF4EC;
-@warningHeaderColor     : #EBA33D;
-@warningTextColor       : #EBA33D;
+@warningColor           : @brown-6;
+@warningBackgroundColor : #FFFAF3;
+@warningBorderColor     : @brown-4;
+@warningHeaderColor     : @brown-6;
+@warningTextColor       : @brown-6;
+
 
 /*-------------------
         Paths