@eeacms/volto-eea-design-system 0.7.2 → 0.7.6

package/theme/themes/eea/assets/images/Svg/arrow-double-right.svg

@@ -0,0 +1,4 @@
+<svg width="12" height="11" viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.81846 5.50017L-3.83247e-07 1.66422L1.09077 0.568456L6 5.50017L1.09077 10.4319L-4.78974e-08 9.33612L3.81846 5.50017Z" fill="white"/>
+<path d="M9.81846 5.50017L6 1.66422L7.09077 0.568456L12 5.50017L7.09077 10.4319L6 9.33612L9.81846 5.50017Z" fill="white"/>
+</svg>

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

@@ -11,10 +11,10 @@ footer {
   display: flex;
   flex-direction: column;
   align-items: center;
-  background: @footerBackgroundGrandient;
+  background: @mobileFooterBackgroundGrandient;
   color: @white;
 
-  .wrapper {
+  .footer-wrapper {
     width: @wrapperWidth;
     padding: @mobileWrapperPadding;
     background-image: @wrapperBackgroundImage;
@@ -26,22 +26,12 @@ footer {
 footer .theme-sites {
   padding: @mobileThemeSitesPadding;
 
-  .header {
-    font-weight: @footerTitleFontWeight;
-  }
-
   .logos .ui.grid {
     align-items: center;
   }
 
-  .logos .logo {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    img {
-      margin: auto;
-    }
+  .logos .logo img {
+    margin: @mobileThemeSitesLogoMargin;
   }
 }
 
@@ -50,8 +40,6 @@ footer .theme-sites {
 }
 
 .subfooter .item {
-  margin-top: @mobileItemMarginTop;
-
   .header {
     margin-bottom: @mobileItemHeaderMarginBottom;
     font-size: @mobileFooterTitleFontSize;
@@ -61,15 +49,20 @@ footer .theme-sites {
 }
 
 .subfooter .contact-block {
-  margin-inline: @mobileContactBlockMarginInline;
   margin-bottom: @tabletContactBlockMarginbottom;
 }
 
+.contact-block .subcontact a {
+  font-size: @computerSubcontactIconFontSize;
+  margin-right: @computerSubcontactIconMarginRight;
+  font-weight: @computerSubcontactIconFontWeight;
+}
+
 .subfooter .contact {
-  display: flex;
-  align-items: center;
+  display: block;
   margin: @mobileContactMargin;
-  font-size: @mobileContactFontSize;
+  font-size: @contactFontSize;
+  gap: @contactGap;
 
   a {
     color: @menuLinkColor;
@@ -81,13 +74,10 @@ footer .theme-sites {
   }
 }
 
-.subfooter .address {
-  font-size: @addressFontSize;
-}
-
 .subfooter .social {
   display: flex;
   justify-content: @mobileSocialJustifyContent;
+  margin: @mobileSocialIconsMargin;
   
   a {
     color: @socialIconColor;
@@ -103,18 +93,23 @@ footer .theme-sites {
   }
 }
 
-.subfooter .menu {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: @mobileMenuWidth;
-  margin: @mobileMenuMargin;
+footer .footer-wrapper .menu {
+  .actions {
+    display: flex;
+    justify-content: center;
+  }
+
+  .copyright {
+    display: flex;
+    justify-content: center;
+  }
 
   a {
     color: @menuLinkColor;
     font-weight: @menuFontWeight;
     font-size: @mobileMenuFontSize;
     cursor: pointer;
+    margin-inline: 12px;
 
     &:hover,
     &:active {
@@ -123,31 +118,70 @@ footer .theme-sites {
   }
 }
 
+@media only screen and (max-width: @largestMobileScreen) {
+  .footer-wrapper > .container {
+    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;
+  }
+}
+
 @media only screen and (min-width: @tabletBreakpoint) {
+  footer {
+    background: @computerFooterBackgroundGrandient;
+  }
   footer .theme-sites {
     .header {
       font-size: @tabletFooterTitleFontSize;
+      font-weight: @tabletFooterTitleFontWeight;
     }
   }
 
   .subfooter .item {
-    margin-top: @tabletItemMarginTop;
+    .logo img {
+      max-height: 100px;
+    }
 
-    .site.logo {
-      img {
-        width: @tabletSiteLogoWidth;
-        display: @tabletSiteLogoDisplay;
-      }
+    .site.logo img {
+      padding-right: @siteLogoPaddingRight;
+    }
+
+    .contact-block {
+      padding-left: @siteLogoPaddingRight;
     }
 
     .header {
       font-size: @tabletFooterTitleFontSize;
       text-align: left;
     }
-
-    .social a i.icon {
-      font-size: @tabletSocialIconSize;
-    }
   }
 
 
@@ -158,17 +192,26 @@ footer .theme-sites {
   .subfooter .social {
     justify-content: @tabletSocialJustifyContent;
     gap: @tabletSocialGap;
+    margin: @tabletSocialIconsMargin;
+
+    a {
+      i.icon {
+        font-size: @tabletSocialIconSize;
+      }
+    }
   }
 
-  .subfooter .menu {
-    width: @tabletMenuWidth;
-    margin: @tabletMenuMargin;
+  footer .footer-wrapper .menu {
+    .actions {
+      justify-content: flex-end;
+    }
   }
+
 }
 
 @media only screen and (min-width: @computerBreakpoint) {
   footer {
-    .wrapper {
+    .footer-wrapper {
       padding: @computerWrapperPadding;
       background-size: @computerWrapperBackgroundSize;
     }
@@ -180,6 +223,9 @@ footer .theme-sites {
     .header {
       font-size: @computerFooterTitleFontSize;
     }
+    .logos .logo img {
+      margin: @computerThemeSitesLogoMargin;
+    }
   }
 
   .subfooter .logo-header {
@@ -188,26 +234,15 @@ footer .theme-sites {
   }
 
   .subfooter .item {
-    margin-top: @computerItemMarginTop;
-
-    .site.logo {
-      img {
-        width: @computerSiteLogoWidth;
-      }
-    }
-
     .header {
       margin-bottom: @computerItemHeaderMarginBottom;
       font-size: @computerFooterTitleFontSize;
     }
-
-    .social a i.icon {
-      font-size: @computerSocialIconSize;
-    }
   }
 
   .subfooter .contact {
-    font-size: @computerContactFontSize;
+    display: flex;
+    align-items: center;
     margin: @computerContactMargin;
 
     i.big.icon {
@@ -215,8 +250,7 @@ footer .theme-sites {
     }
   }
 
-  .subfooter .menu {
-    width: @computerMenuWidth;
+  .footer .footer-wrapper .menu {
   
     a {
       font-size: @computerMenuFontSize;

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

@@ -2,13 +2,16 @@
             Footer
 *******************************/
 
-@footerBackgroundGrandient: linear-gradient(220.4deg, #009591 8.29%, #2E3E4C 56.3%, #212D38 89.06%);
+/* @footerBackgroundGrandient: linear-gradient(220.4deg, #009591 8.29%, #2E3E4C 56.3%, #212D38 89.06%); */
+@mobileFooterBackgroundGrandient: linear-gradient(220.4deg, @green-5 8.29%, @blue-grey-6 56.3%, #212D38 89.06%);
+@computerFooterBackgroundGrandient: linear-gradient(212.33deg, @green-5 6.78%, #212D38 69.54%, #212D38 98.23%);
 
 /* Titles */
-@footerTitleFontWeight     : @font-weight-7;
-@mobileFooterTitleFontSize : @font-size-3;
-@tabletFooterTitleFontSize : @font-size-4;
-@computerFooterTitleFontSize: @font-size-6;
+@footerTitleFontWeight      : @font-weight-7;
+@mobileFooterTitleFontSize  : @font-size-1;
+@tabletFooterTitleFontSize  : @font-size-4;
+@computerFooterTitleFontSize: @font-size-4;
+@tabletFooterTitleFontWeight: @font-weight-7;
 
 /* Wrapper */
 @wrapperBackgroundImage              : url(../assets/images/Footer/Extras/footervisual.svg);
@@ -21,13 +24,10 @@
 @computerWrapperPadding              : @space-20 0 @space-18;
 
 /* Theme Sites */
-@mobileThemeSitesPadding            : @space-2 0 @space-8;
-@computerThemeSitesPadding          : @space-4 0 @space-8;
-
-/* Subfooter with logo and contact info */
-@mobileItemMarginTop                : @space-4;
-@tabletItemMarginTop                : @space-8;
-@computerItemMarginTop              : @space-18;
+@mobileThemeSitesPadding            : @space-2 0;
+@computerThemeSitesPadding          : @space-4 0;
+@mobileThemeSitesLogoMargin         : 0 auto @rem-space-8;
+@computerThemeSitesLogoMargin       : 0 auto @rem-space-10;
 
 /* Subfooter Item Header */
 @mobileItemHeaderMarginBottom       : @space-5;
@@ -35,42 +35,39 @@
 @computerLogoHeaderMarginLeft       : -50px;
 
 /* Site Logo */
-@tabletSiteLogoWidth                : 230px;
-@computerSiteLogoWidth              : 250px;
-@tabletSiteLogoDisplay              : inline-block;
+@siteLogoPaddingRight : 20%;
 
 /* Contact Info */
-@mobileContactBlockMarginInline     : 10%;
 @tabletContactBlockMarginInline     : 0;
 @tabletContactBlockMarginbottom     : @space-4;
 @mobileContactMargin                : @space-4 0;
-@computerContactMargin              : @space-5 0;
-@mobileContactFontSize              : @font-size-1;
-@computerContactFontSize            : @font-size-2;
+@computerContactMargin              : @rem-space-050 0;
+@contactFontSize                    : @font-size-3;
+@contactGap                         : @rem-space-8;
 @mobileContactIconMarginRight       : @space-3;
 @mobileContactIconFontSize          : @font-size-4;
 @computerContactIconFontSize        : @font-size-5;
-
-/* Address */
-@addressFontSize                    : @font-size-0;
+@computerSubcontactIconFontSize     : @font-size-1;
+@computerSubcontactIconMarginRight  : @rem-space-4;
+@computerSubcontactIconFontWeight   : @font-weight-4;
 
 /* Social Icons */
+@mobileSocialIconsMargin            : @rem-space-2 0 @rem-space-8;
+@tabletSocialIconsMargin            : @rem-space-17 0;
 @socialIconColor                    : @white;
 @mobileSocialJustifyContent         : space-around;
-@tabletSocialJustifyContent         : start;
-@tabletSocialGap                    : @space-1;
+@tabletSocialJustifyContent         : center;
+@tabletSocialGap                    : @space-3;
 @mobileSocialIconSize               : @font-size-5;
-@tabletSocialIconSize               : @font-size-4;
-@computerSocialIconSize             : @font-size-5;
+@tabletSocialIconSize               : @font-size-6;
 
 /* Footer Menu */
-@mobileMenuMargin                   : @space-8 auto 0;
-@tabletMenuMargin                   : @space-13 auto 0;
-@computerMenuMargin                 : @space-20 auto 0;
-@mobileMenuWidth                    : 100%;
-@tabletMenuWidth                    : 350px;
-@computerMenuWidth                  : 500px;
+
 @menuLinkColor                      : @white;
 @menuFontWeight                     : @font-weight-3;
 @mobileMenuFontSize                 : @font-size-0;
+@mobileMenuMargin                   : @rem-space-4 0;
+@mobileMenuBorder                   : 1px solid rgba(249, 249, 249, 0.25);
+@mobileMenuLeft                     : -20px;
+@mobileMenuFontWeight               : 400;
 @computerMenuFontSize               : @font-size-1;

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

@@ -543,6 +543,9 @@
   .title {
     font-size: @megaMenuTitleFontSize;
     font-weight: @megaMenuTitleFontWeight;
+    .title-img {
+      margin-left: @megaMenuTitleImgMarginLeft;
+    }
   }
 
   .sub-title {
@@ -562,7 +565,11 @@
     }
   }
 }
-#mega-menu .ui.list .item {
+
+#mega-menu .ui.list {
+  margin: 0;
+}
+#mega-menu .item {
   display: flex;
   font-size: @megaMenuListItemFontSize;
   font-weight: @megaMenuListItemFontWeight;
@@ -571,6 +578,10 @@
 
 #mega-menu  a.item {
   color: @megaMenuTextColor;
+  display: @megaMenuTextDisplay;
+  &:hover {
+    text-decoration: @megaMenuTextHoverDecoration;
+  }
 
   i.icon {
     color: @megaMenuTextColor;
@@ -583,7 +594,7 @@
   // To override the grid column paddings
   padding: @megaMenuGlancePaddingLeft !important;
 
-  .ui.list .item {
+  .item {
     font-size: @megaMenuGlanceListItemFontSize;
     font-weight: @megaMenuGlanceListItemFontWeight;
     margin: @megaMenuGlanceListItemMargin;
@@ -604,8 +615,9 @@
   padding-top: @megaMenuContentPaddingTop;
 }
 
-#mega-menu .active > span {
-  border-bottom: 2px solid #FFF;
+#mega-menu .active:not(.title-link) > span {
+  border-left: @megaMenuListItemActiveBorder;
+  padding-left: @megaMenuListItemActivePadding;
 }
 
 /*Mega Menu Accordion - Tablet & Mobile */

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

@@ -133,7 +133,9 @@
 /* Mega menu */
 @mobileMegaMenuWidth: 94%;
 @megaMenuBackgroundColor: @darkMidnightBlue;
+@megaMenuTextDisplay: flex;
 @megaMenuTextColor: @white;
+@megaMenuTextHoverDecoration: underline;
 @mobileMegaMenuPadding: @rem-space-4 0;
 @tabletMegaMenuPadding: @rem-space-9;
 @computerMegaMenuPadding: @rem-space-10 0 0 0;
@@ -142,6 +144,7 @@
 /* Title */
 @megaMenuTitleFontSize: @font-size-4;
 @megaMenuTitleFontWeight: @font-weight-7;
+@megaMenuTitleImgMarginLeft: 4px;
 
 /* Sub Title */
 @megaMenuSubTitleFontSize: @font-size-2;
@@ -151,14 +154,15 @@
 @megaMenuListItemFontSize: @font-size-1;
 @megaMenuListItemFontWeight: @font-weight-4;
 @megaMenuListItemPadding: @rem-space-2 0;
-@megaMenuListItemActiveBorder: 2px solid #FFF;
+@megaMenuListItemActiveBorder: 4px solid #FFF;
+@megaMenuListItemActivePadding: 8px;
 
 /* At a glance */
 @megaMenuGlanceBackgroundColor: @secondaryColor;
 @megaMenuGlancePaddingLeft:  @rem-space-8 @rem-space-5;
 @megaMenuGlanceListItemFontSize: @font-size-2;
-@megaMenuGlanceListItemFontWeight: @font-weight-6;
-@megaMenuGlanceListItemMargin: @rem-space-6 0;
+@megaMenuGlanceListItemFontWeight: @font-weight-4;
+@megaMenuGlanceListItemMargin: @rem-space-4 0;
 
 /* Accordion */
 @megaMenuAccordionTitleFontSize: @font-size-3;

package/theme/themes/eea/globals/utilities.less

@@ -33,10 +33,11 @@ h1, h2, h3, h4, h5, h6, p, span, .header {
 .flex-items-end { align-items: flex-end !important; }
 .flex-items-center { align-items: center !important; }
 
-// Align text
+// Text
 .text-left { text-align: left !important; }
 .text-center { text-align: center !important;}
 .text-right { text-align: right !important; }
+.bold { font-weight: bold !important; }
 
 // Quotes
 .quoted-wrapper h2::before,