@eeacms/volto-eea-design-system 0.4.3 → 0.5.0

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

@@ -20,179 +20,153 @@ footer {
     background-image: @wrapperBackgroundImage;
     background-position: @wrapperBackgroundPosition;
     background-size: @mobileWrapperBackgroundSize;
+  }
+}
 
-    .theme-sites {
-      padding: @mobileThemeSitesPadding;
+footer .theme-sites {
+  padding: @mobileThemeSitesPadding;
 
-      .header {
-        font-weight: @headerFontWeight;
-        font-size: @mobileHeaderFontSize;
-        margin-bottom: @mobileHeaderMarginBottom;
-        text-align: center;
-      }
+  .header {
+    font-weight: @footerTitleFontWeight;
+  }
 
-      .logos .logo {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
+  .logos .ui.grid {
+    align-items: center;
+  }
+
+  .logos .logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    img {
+      margin: auto;
     }
-    .subfooter {
-      .item {
-        margin-top: @mobileItemMarginTop;
-
-        .site.logo {
-          .description {
-            margin: @mobileDescriptionMargin;
-            font-size: @mobileDescriptionFontSize;
-            line-height: @mobileDescriptionLineHeight;
-          }
-        }
-
-        .eionet.logo {
-          display: flex;
-          align-items: center;
-          margin-top: @mobileEionetMarginTop;
-
-          img {
-            width: @mobileEionetLogoWidth;
-            margin-left: @mobileEionetLogoMarginLeft;
-            margin-right: @mobileEionetLogoMarginRight;
-          }
-
-          .description {
-            padding-top: @mobileEionetDescriptionPaddingTop;
-            font-size: @mobileEionetDescriptionFontSize;
-            line-height: @mobileEionetDescriptionLineHeight;
-            font-weight: @eionetDescriptionFontWeight;
-          }
-        }
-
-        .header {
-          margin-bottom: @mobileItemHeaderMarginBottom;
-          font-size: @mobileItemHeaderFontSize;
-          font-weight: @itemHeaderFontWeight;
-        }
-
-        .contact {
-          display: flex;
-          align-items: center;
-          margin: @mobileContactMargin;
-          font-size: @mobileContactFontSize;
-
-          a {
-            color: @menuLinkColor;
-          }
-        }
-        .address {
-          font-size: @mobileAdressFontSize;
-        }
-
-        .social a {
-          color: @socialIconColor;
-
-          &:active,
-          &:hover {
-            color: @socialIconColor;
-          }
-
-          i.icon {
-            font-size: @mobileSocialIconSize;
-          }
-        }
-      }
-      .menu {
-        display: flex;
-        align-items: center;
-        justify-content: space-around;
-        margin: @mobileMenuMargin;
-
-        a {
-          color: @menuLinkColor;
-          font-weight: @menuFontWeight;
-          font-size: @mobileMenuFontSize;
-          cursor: pointer;
-
-          &:hover,
-          &:active {
-            color: @menuLinkColor;
-          }
-        }
-      }
+  }
+}
+
+.subfooter .item .ui.grid {
+  align-items: center;
+}
+
+.subfooter .item {
+  margin-top: @mobileItemMarginTop;
+
+  .header {
+    margin-bottom: @mobileItemHeaderMarginBottom;
+    font-size: @mobileFooterTitleFontSize;
+    font-weight: @footerTitleFontWeight;
+    text-align: center;
+  }
+}
+
+.subfooter .contact-block {
+  margin-inline: @mobileContactBlockMarginInline;
+  margin-bottom: @tabletContactBlockMarginbottom;
+}
+
+.subfooter .contact {
+  display: flex;
+  align-items: center;
+  margin: @mobileContactMargin;
+  font-size: @mobileContactFontSize;
+
+  a {
+    color: @menuLinkColor;
+  }
+
+  i.big.icon {
+    margin-right: @mobileContactIconMarginRight;
+    font-size: @mobileContactIconFontSize;
+  }
+}
+
+.subfooter .address {
+  font-size: @addressFontSize;
+}
+
+.subfooter .social {
+  display: flex;
+  justify-content: @mobileSocialJustifyContent;
+  
+  a {
+    color: @socialIconColor;
+
+    &:active,
+    &:hover {
+      color: @socialIconColor;
+    }
+
+    i.icon {
+      font-size: @mobileSocialIconSize;
+    }
+  }
+}
+
+.subfooter .menu {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: @mobileMenuWidth;
+  margin: @mobileMenuMargin;
+
+  a {
+    color: @menuLinkColor;
+    font-weight: @menuFontWeight;
+    font-size: @mobileMenuFontSize;
+    cursor: pointer;
+
+    &:hover,
+    &:active {
+      color: @menuLinkColor;
     }
   }
 }
 
 @media only screen and (min-width: @tabletBreakpoint) {
-  footer {
-    .wrapper {
-      .theme-sites {
-        .header {
-          font-size: @tabletHeaderFontSize;
-          margin-bottom: @tabletHeaderMarginBottom;
-        }
-      }
-      .subfooter {
-        .item {
-          margin-top: @tabletItemMarginTop;
-
-          .site.logo {
-            img {
-              width: @tabletSiteLogoWidth;
-              display: @tabletSiteLogoDisplay;
-            }
-            .description {
-              font-size: @tabletDescriptionFontSize;
-              line-height: @tabletDescriptionLineHeight;
-            }
-          }
-
-          .eionet.logo {
-            img {
-              width: @tabletEionetLogoWidth;
-              margin-left: @tabletEionetLogoMarginLeft;
-            }
-
-            .description {
-              padding-top: @tabletEionetDescriptionPaddingTop;
-              font-size: @tabetEionetDescriptionFontSize;
-              line-height: @tabletEionetDescriptionLineHeight;
-            }
-          }
-
-          .header {
-            margin-bottom: @tabletItemHeaderMarginBottom;
-            font-size: @tabletItemHeaderFontSize;
-          }
-
-          .contact {
-            font-size: @tabletContactFontSize;
-            margin: @tabletContactMargin;
-
-            i.big.icon {
-              margin-right: @tabletContactIconMarginRight;
-              font-size: @tabletContactIconFontSize;
-            }
-          }
-
-          .address {
-            font-size: @tabletAddressFontSize;
-          }
-
-          .social a i.icon {
-            font-size: @tabletSocialIconSize;
-          }
-        }
-        .menu {
-          width: @tabletMenuWidth;
-          margin: @tabletMenuMargin;
-
-          a {
-            font-size: @tabletMenuFontSize;
-          }
-        }
+  footer .theme-sites {
+    .header {
+      font-size: @tabletFooterTitleFontSize;
+    }
+  }
+
+  .subfooter .item {
+    margin-top: @tabletItemMarginTop;
+
+    .site.logo {
+      img {
+        width: @tabletSiteLogoWidth;
+        display: @tabletSiteLogoDisplay;
       }
     }
+
+    .header {
+      font-size: @tabletFooterTitleFontSize;
+      text-align: left;
+    }
+
+    .social a i.icon {
+      font-size: @tabletSocialIconSize;
+    }
+  }
+
+  .eionet.logo img {
+    margin-left: @tabletEionetLogoMarginLeft;
+    width: @tabletEionetLogoWidth;    
+  }
+
+  .subfooter .contact-block {
+    margin-inline: @tabletContactBlockMarginInline;
+  }
+
+  .subfooter .social {
+    justify-content: @tabletSocialJustifyContent;
+    gap: @tabletSocialGap;
+  }
+
+  .subfooter .menu {
+    width: @tabletMenuWidth;
+    margin: @tabletMenuMargin;
   }
 }
 
@@ -201,71 +175,60 @@ footer {
     .wrapper {
       padding: @computerWrapperPadding;
       background-size: @computerWrapperBackgroundSize;
+    }
+  }
 
-      .theme-sites {
-        padding: @computerThemeSitesPadding;
+  footer .theme-sites {
+    padding: @computerThemeSitesPadding;
 
-        .header {
-          font-size: @computerHeaderFontSize;
-          margin-bottom: @computerHeaderMarginBottom;
-        }
-      }
-      .subfooter {
-        .item {
-          margin-top: @computerItemMarginTop;
-
-          .site.logo {
-            img {
-              width: @computerSiteLogoWidth;
-            }
-            .description {
-              margin: @computerDescriptionMargin;
-            }
-          }
-
-          .eionet.logo {
-            margin-top: @computerEionetMarginTop;
-
-            img {
-              width: @computerEionetLogoWidth;
-              margin-left: @computerEionetLogoMarginLeft;
-              margin-right: @computerEionetLogoMarginRight;
-            }
-
-            .description {
-              font-size: @computerEionetDescriptionFontSize;
-              line-height: @computerEionetDescriptionLineHeight;
-            }
-          }
-
-          .header {
-            margin-bottom: @computerItemHeaderMarginBottom;
-            font-size: @computerItemHeaderFontSize;
-          }
-
-          .contact {
-            font-size: @computerContactFontSize;
-            margin: @computerContactMargin;
-
-            i.big.icon {
-              font-size: @computerContactIconFontSize;
-            }
-          }
-
-          .social a i.icon {
-            font-size: @computerSocialIconSize;
-          }
-        }
-        .menu {
-          justify-content: flex-end;
-          width: 100%;
-
-          a {
-            padding-left: 3rem;
-            font-size: @computerMenuFontSize;
-          }
-        }
+    .header {
+      font-size: @computerFooterTitleFontSize;
+    }
+  }
+
+  .subfooter .logo-header {
+    // To match the figma align
+    margin-left: @computerLogoHeaderMarginLeft
+  }
+
+  .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;
+    margin: @computerContactMargin;
+
+    i.big.icon {
+      font-size: @computerContactIconFontSize;
+    }
+  }
+
+  .eionet.logo img {
+    width: @computerEionetLogoWidth;
+    margin-left: 0;
+  }
+
+  .subfooter .menu {
+    width: @computerMenuWidth;
+  
+    a {
+      font-size: @computerMenuFontSize;
+    }
+  } 
+}

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

@@ -2,7 +2,13 @@
             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%);
+
+/* Titles */
+@footerTitleFontWeight     : @font-weight-7;
+@mobileFooterTitleFontSize : @font-size-3;
+@tabletFooterTitleFontSize : @font-size-4;
+@computerFooterTitleFontSize: @font-size-6;
 
 /* Wrapper */
 @wrapperBackgroundImage              : url(../assets/images/Footer/Extras/footervisual.svg);
@@ -10,100 +16,66 @@
 @mobileWrapperBackgroundSize         : cover;
 @computerWrapperBackgroundSize       : 100% 100%;
 @wrapperWidth                        : 100%;
-@mobileWrapperPadding                : 3rem 0 1rem;
-@computerWrapperPadding              : 5rem 0 3rem;
+@mobileWrapperPadding                : @space-9 0 @space-6;
+@tabletWrapperPadding                : @space-13 0 @space-8;
+@computerWrapperPadding              : @space-20 0 @space-18;
 
 /* Theme Sites */
-@mobileThemeSitesPadding            : 0;
-@computerThemeSitesPadding          : 0rem 0 2rem;
-
-/* Theme Sites Header */
-@headerFontWeight                   : @bold;
-@mobileHeaderMarginBottom           : 1.25rem;
-@tabletHeaderMarginBottom           : 2.5rem;
-@computerHeaderMarginBottom         : 3.75rem;
-@mobileHeaderFontSize               : 0.688rem;
-@tabletHeaderFontSize               : 1.25rem;
-@computerHeaderFontSize             : 2.25rem;
+@mobileThemeSitesPadding            : @space-2 0 @space-8;
+@computerThemeSitesPadding          : @space-4 0 @space-8;
 
 /* Subfooter with logo and contact info */
-@mobileItemMarginTop                : 1rem;
-@tabletItemMarginTop                : 2rem;
-@computerItemMarginTop              : 4rem;
+@mobileItemMarginTop                : @space-4;
+@tabletItemMarginTop                : @space-8;
+@computerItemMarginTop              : @space-18;
 
 /* Subfooter Item Header */
-@itemHeaderFontWeight               : @bold;
-@mobileItemHeaderMarginBottom       : 0.625rem;
-@mobileItemHeaderFontSize           : 0.688rem;
-@tabletItemHeaderMarginBottom       : 0.938rem;
-@tabletItemHeaderFontSize           : 1.375rem;
-@computerItemHeaderMarginBottom     : 1.563rem;
-@computerItemHeaderFontSize         : 2.25rem;
+@mobileItemHeaderMarginBottom       : @space-5;
+@computerItemHeaderMarginBottom     : @space-12;
+@computerLogoHeaderMarginLeft       : -50px;
 
 /* Site Logo */
-@tabletSiteLogoWidth                : 192px;
-@computerSiteLogoWidth              : 283px;
+@tabletSiteLogoWidth                : 200px;
+@computerSiteLogoWidth              : 250px;
 @tabletSiteLogoDisplay              : inline-block;
 
-/* Site Logo Description */
-@mobileDescriptionMargin             : 5px 0 0 10px;
-@computerDescriptionMargin           : 5px 0 0 25px;
-@mobileDescriptionFontSize           : 0.5rem;
-@tabletDescriptionFontSize           : 1rem;
-@mobileDescriptionLineHeight         : 0.563rem;
-@tabletDescriptionLineHeight         : 1.188rem;
-
 /* EIONET Logo */
-@mobileEionetMarginTop: .5rem;
-@computerEionetMarginTop: 2rem;
-
-@mobileEionetLogoWidth               : 37px;
-@tabletEionetLogoWidth               : 65px;
-@computerEionetLogoWidth             : 80px;
-@mobileEionetLogoMarginLeft          : 0.75rem;
-@tabletEionetLogoMarginLeft          : 0.625rem;
-@computerEionetLogoMarginLeft        : 1.563rem;
-@mobileEionetLogoMarginRight         : 0.5rem;
-@computerEionetLogoMarginRight       : 1.25rem;
-
-/* eIONET Logo Description */
-@eionetDescriptionFontWeight         : @bold;
-@mobileEionetDescriptionPaddingTop   : 0.125rem;
-@tabletEionetDescriptionPaddingTop   : 0.313rem;
-@mobileEionetDescriptionFontSize     : 0.5rem;
-@tabetEionetDescriptionFontSize      : 1rem;
-@computerEionetDescriptionFontSize   : 1.063rem;
-@mobileEionetDescriptionLineHeight   : 0.625rem;
-@tabletEionetDescriptionLineHeight   : 1.5rem;
-@computerEionetDescriptionLineHeight : 1.8rem;
+@tabletEionetLogoWidth               : 225px;
+@computerEionetLogoWidth             : 260px;
+@tabletEionetLogoMarginLeft          : @space-3;
 
 /* Contact Info */
-@mobileContactMargin                : 0.3rem 0;
-@tabletContactMargin                : 0.6rem 0;
-@computerContactMargin              : 1rem 0;
-@mobileContactFontSize              : 0.563rem;
-@tabletContactFontSize              : 0.875rem;
-@computerContactFontSize            : 1rem;
-@tabletContactIconMarginRight       : 0.938rem;
-@tabletContactIconFontSize          : 1.375rem;
-@computerContactIconFontSize        : 1.563rem;
+@mobileContactBlockMarginInline     : 10%;
+@tabletContactBlockMarginInline     : 0;
+@tabletContactBlockMarginbottom     : @space-4;
+@mobileContactMargin                : @space-4 0;
+@computerContactMargin              : @space-5 0;
+@mobileContactFontSize              : @font-size-1;
+@computerContactFontSize            : @font-size-2;
+@mobileContactIconMarginRight       : @space-3;
+@mobileContactIconFontSize          : @font-size-4;
+@computerContactIconFontSize        : @font-size-5;
 
 /* Address */
-@mobileAdressFontSize               : 0.5rem;
-@tabletAddressFontSize              : 0.875rem;
+@addressFontSize                    : @font-size-0;
 
 /* Social Icons */
 @socialIconColor                    : @white;
-@mobileSocialIconSize               : 0.9rem;
-@tabletSocialIconSize               : 1.8rem;
-@computerSocialIconSize             : 2rem;
+@mobileSocialJustifyContent         : space-around;
+@tabletSocialJustifyContent         : start;
+@tabletSocialGap                    : @space-1;
+@mobileSocialIconSize               : @font-size-5;
+@tabletSocialIconSize               : @font-size-4;
+@computerSocialIconSize             : @font-size-5;
 
 /* Footer Menu */
-@mobileMenuMargin                   : 1rem auto 0;
-@tabletMenuMargin                   : 2rem auto 0;
-@tabletMenuWidth                    : 500px;
+@mobileMenuMargin                   : @space-8 auto 0;
+@tabletMenuMargin                   : @space-13 auto 0;
+@computerMenuMargin                 : @space-20 auto 0;
+@mobileMenuWidth                    : 100%;
+@tabletMenuWidth                    : 350px;
+@computerMenuWidth                  : 500px;
 @menuLinkColor                      : @white;
-@menuFontWeight                     : 100;
-@mobileMenuFontSize                 : 0.438rem;
-@tabletMenuFontSize                 : 0.688rem;
-@computerMenuFontSize               : 1rem;
+@menuFontWeight                     : @font-weight-3;
+@mobileMenuFontSize                 : @font-size-0;
+@computerMenuFontSize               : @font-size-1;