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

package/theme/themes/eea/elements/divider.overrides

@@ -7,6 +7,33 @@
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC');
 }
 
+.ui.horizontal.divider.primary,.ui.horizontal.divider.secondary,.ui.horizontal.divider.tertiary  {
+  & > * {
+    padding: 0 @space-4;
+  }
+}
+
+.ui.horizontal.divider.primary:before,
+.ui.horizontal.divider.primary:after {
+  background-image: none;
+  border-top:1px solid @dividerPrimary;
+  transform:translateY(50%);
+}
+
+.ui.horizontal.divider.secondary:before,
+.ui.horizontal.divider.secondary:after {
+  background-image: none;
+  border-top:1px solid @dividerSecondary;
+  transform:translateY(50%);
+}
+
+.ui.horizontal.divider.tertiary:before,
+.ui.horizontal.divider.tertiary:after {
+  background-image: none;
+  border-top:1px solid @dividerTertiary;
+  transform:translateY(50%);
+}
+
 @media only screen and (max-width: (@tabletBreakpoint - 1px)) {
   .ui.stackable.grid .ui.vertical.divider:before,
   .ui.grid .stackable.row .ui.vertical.divider:before,
@@ -15,3 +42,39 @@
     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC');
   }
 }
+
+
+.ui.divider.short {
+  width: @shortWidth;
+  margin-inline: @shortMarginInline;
+}
+
+.ui.divider.primary,
+.ui.divider.primary:not(.vertical):not(.horizontal) {
+  border-top-color: @dividerPrimary;
+  color: @dividerPrimary;
+}
+.ui.vertical.divider.primary:before,
+.ui.vertical.divider.primary:after {
+  border-left-color: @dividerPrimary;
+}
+
+.ui.divider.secondary,
+.ui.divider.secondary:not(.vertical):not(.horizontal) {
+  border-top-color: @dividerSecondary;
+  color: @dividerSecondary;
+}
+.ui.vertical.divider.secondary:before,
+.ui.vertical.divider.secondary:after {
+  border-left-color: @dividerSecondary;
+}
+
+.ui.divider.tertiary,
+.ui.divider.tertiary:not(.vertical):not(.horizontal) {
+  border-top-color: @dividerTertiary;
+  color: @dividerTertiary;
+}
+.ui.vertical.divider.tertiary:before,
+.ui.vertical.divider.tertiary:after {
+  border-left-color: @dividerTertiary;
+}

package/theme/themes/eea/elements/divider.variables

@@ -18,7 +18,7 @@
 @letterSpacing: 0.05em;
 @fontWeight: @bold;
 @color: @darkTextColor;
-@textTransform: uppercase;
+@textTransform: none;
 
 /*-------------------
        Coupling
@@ -51,3 +51,12 @@
 
 /* Sizes */
 @medium: 1rem;
+
+/* ShortDivider */
+@shortWidth       : 50%;
+@shortMarginInline: auto;
+
+/* Color */
+@dividerPrimary   : @primaryColor;
+@dividerSecondary : @secondaryColor;
+@dividerTertiary  : @tertiaryColor;

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;
+    }
+  } 
+}