@eeacms/volto-eea-design-system 0.2.1

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

@@ -0,0 +1,35 @@
+/*******************************
+            Blockquote
+*******************************/
+/* Body */
+@mobileBlockquoteBorderLeft : @5px solid @secondaryColor;
+@tabletBlockquoteBorderLeft : @10px solid @secondaryColor;
+@childrenBorderLeft         : none;
+
+/* Quote */
+@quoteColor            : @secondaryColor;
+@mobileQuoteMargin     : 0.75rem 0.625rem;
+@tabletQuoteMargin     : 0.75rem 1rem;
+@computerQuoteMargin   : 0.75rem 1.25rem;
+@quoteGap              : 0.75rem;
+@slateQuoteGap         : 0.75rem / 2;
+@quoteColor            : @japaneseIndigo;
+@mobileQuoteFontSize   : 0.688rem;
+@tabletQuoteFontSize   : @h6;
+@computerQuoteFontSize : @h5;
+@quoteFontWeight       : 700;
+@slateQuoteFontWeight  : 400;
+
+/* Meta */
+@metaMargin           : 0;
+@metaWeight           : 400;
+@mobileMetaFontSize   : 0.688rem;
+@tabletMetaFontSize   : @h6;
+@computerMetaFontSize : @h5;
+@metaAlignSelf        : start;
+
+/* Callout */
+@calloutBorder        : none;
+@calloutBoxShadow     : none;
+@calloutBorderRadius  : 0;
+@calloutPadding       : 0;

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

@@ -0,0 +1,14 @@
+@type: 'extra';
+@element: 'divider';
+
+@import (multiple) '../../theme.config';
+
+/*-------------------
+      DIVIDER
+--------------------*/
+
+.eea.divider {
+  width: @dividerWidth;
+  height: 0px;
+  border-top: @dividerBorderTop;
+}

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

@@ -0,0 +1,9 @@
+/*******************************
+            Divider
+*******************************/
+
+
+@dividerWidth           : 100%;
+@dividerBorderColor     : @darkCyan;  
+@dividerBorderSize      : @1px;
+@dividerBorderTop       : @dividerBorderSize solid @dividerBorderColor;

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

@@ -0,0 +1,273 @@
+@type: 'extra';
+@element: 'footer';
+
+@import (multiple) '../../theme.config';
+
+/*-------------------
+      FOOTER
+--------------------*/
+
+footer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: @footerBackgroundGrandient;
+    color: @white;
+
+    .wrapper {
+        width: @wrapperWidth;
+        padding: @mobileWrapperPadding;
+        background-image: @wrapperBackgroundImage;
+        background-position: @wrapperBackgroundPosition;
+        background-size: @mobileWrapperBackgroundSize;
+
+        .theme-sites {
+            padding: @mobileThemeSitesPadding;
+
+            .header {
+                font-weight: @headerFontWeight;
+                font-size: @mobileHeaderFontSize;
+                margin-bottom: @mobileHeaderMarginBottom;
+                text-align: center;
+            }
+
+            .logos .logo {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+        }
+        .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;
+                  }
+                }
+            }
+        }
+    }
+}
+
+@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;
+                    }
+                }
+            }
+        }
+    }
+}
+  
+@media only screen and (min-width: @computerBreakpoint) {
+    footer {
+
+        .wrapper {
+            padding: @computerWrapperPadding;
+            background-size: @computerWrapperBackgroundSize;
+
+            .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;
+                    }
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,109 @@
+/*******************************
+            Footer
+*******************************/
+
+@footerBackgroundGrandient           : linear-gradient(220.4deg, #009591 8.29%, #2E3E4C 56.3%, #212D38 89.06%);
+
+/* Wrapper */
+@wrapperBackgroundImage              : url(../assets/images/Footer/Extras/footervisual.svg);
+@wrapperBackgroundPosition           : left;
+@mobileWrapperBackgroundSize         : cover;
+@computerWrapperBackgroundSize       : 100% 100%;
+@wrapperWidth                        : 100%;
+@mobileWrapperPadding                : 3rem 0 1rem;
+@computerWrapperPadding              : 5rem 0 3rem;
+
+/* 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;
+
+/* Subfooter with logo and contact info */
+@mobileItemMarginTop                : 1rem;
+@tabletItemMarginTop                : 2rem;
+@computerItemMarginTop              : 4rem;
+
+/* Subfooter Item Header */
+@itemHeaderFontWeight               : @bold;
+@mobileItemHeaderMarginBottom       : 0.625rem;
+@mobileItemHeaderFontSize           : 0.688rem;
+@tabletItemHeaderMarginBottom       : 0.938rem;
+@tabletItemHeaderFontSize           : 1.375rem;
+@computerItemHeaderMarginBottom     : 1.563rem;
+@computerItemHeaderFontSize         : 2.25rem;
+
+/* Site Logo */
+@tabletSiteLogoWidth                : 192px;
+@computerSiteLogoWidth              : 283px;
+@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;
+
+/* 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;
+
+/* Address */
+@mobileAdressFontSize               : 0.5rem;
+@tabletAddressFontSize              : 0.875rem;
+
+/* Social Icons */
+@socialIconColor                    : @white;
+@mobileSocialIconSize               : 0.9rem;
+@tabletSocialIconSize               : 1.8rem;
+@computerSocialIconSize             : 2rem;
+
+/* Footer Menu */
+@mobileMenuMargin                   : 1rem auto 0;
+@tabletMenuMargin                   : 2rem auto 0;
+@tabletMenuWidth                    : 500px;
+@menuLinkColor                      : @white;
+@menuFontWeight                     : 100;
+@mobileMenuFontSize                 : 0.438rem;
+@tabletMenuFontSize                 : 0.688rem;
+@computerMenuFontSize               : 1rem;