@eeacms/volto-eea-design-system 0.2.1 → 0.2.4

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

@@ -8,266 +8,264 @@
 --------------------*/
 
 footer {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    background: @footerBackgroundGrandient;
-    color: @white;
+  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;
+          }
+        }
 
-    .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;
-            }
+        .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;
+          }
+        }
 
-            .logos .logo {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-            }
+        .header {
+          margin-bottom: @mobileItemHeaderMarginBottom;
+          font-size: @mobileItemHeaderFontSize;
+          font-weight: @itemHeaderFontWeight;
         }
-        .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;
-                  }
-                }
-            }
+
+        .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;
-                }
+  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;
             }
-            .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;
-                    }
-                }
+          }
+
+          .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 {
+  footer {
+    .wrapper {
+      padding: @computerWrapperPadding;
+      background-size: @computerWrapperBackgroundSize;
 
-        .wrapper {
-            padding: @computerWrapperPadding;
-            background-size: @computerWrapperBackgroundSize;
+      .theme-sites {
+        padding: @computerThemeSitesPadding;
 
-            .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;
+            }
 
-                .header {
-                    font-size: @computerHeaderFontSize;
-                    margin-bottom: @computerHeaderMarginBottom;
-                }
+            .description {
+              font-size: @computerEionetDescriptionFontSize;
+              line-height: @computerEionetDescriptionLineHeight;
             }
-            .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 {
+            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/header.less

@@ -22,7 +22,6 @@
       align-items: center;
       justify-content: space-between;
       z-index: @topSectionZindex;
-      width: 100% !important; // Semantic has auto
     }
     .item {
       display: flex;
@@ -392,6 +391,7 @@ Header Actions - Burger and Search Icons
         }
 
         .ui.text.menu {
+          flex-wrap: wrap;
           display: flex;
           width: 88%;
           max-height: 20px;

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

@@ -4,33 +4,35 @@
 @import (multiple) '../../theme.config';
 
 .eea.key-content {
-  background-color: @keyContentBackgroundColor;
-
   .title {
-    text-align: center;
-    font-weight: @keyContentTitleFontWeight;
-    font-size: @keyContentTitleFontSize;
+    text-align: left;
+    color: @keyContentColoredTitleColor;
+    margin-left: @keyContentTitleMarginLeft;
   }
 
   .ui.bulleted.list {
-    margin-left: @keyContentListMarginLeft;
+    display: flex;
+    flex-direction: column;
+    gap: @keyContentListGap;
   }
 
   .item {
-    margin-left: 74.85px;
-    margin-bottom: 34.07px;
+    color: @keyContentItemColor;
+    font-size: @mobileKeyContentItemFontSize;
+    margin-left: @keyContentItemMarginLeft;
   }
 
-  .item::before {
-    color: @keyContentListItemBeforeColor;
-    margin-left: @keyContentListItemBeforeMarginLeft;
+  .ui.bulleted.list > .item::before {
+    color: @keyContentListBulletColor;
+    font-size: @keyContentListBulletFontSize;
+    margin-left: @keyContentItemMarginLeftNegative;
   }
 }
 
-.eea.key-content.colored {
-  .title {
-    text-align: left;
-    color: @keyContentColoredTitleColor;
-    margin-left: @keyContentColoredTitleMarginLeft;
+@media only screen and (min-width: @computerBreakpoint) {
+  .eea.key-content {
+    .item {
+      font-size: @computerKeyContentItemFontSize;
+    }
   }
 }

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

@@ -2,17 +2,23 @@
             Key Content
 *******************************/
 
-@keyContentBackgroundColor : #f9f9f9;
 
 /* Title */
-@keyContentTitleFontWeight: 700; 
-@keyContentTitleFontSize : 36px;
 
 /* List */
-@keyContentListMarginLeft: 0;
-@keyContentListItemBeforeColor :  @darkCyan;
-@keyContentListItemBeforeMarginLeft : -38.84px;
+@keyContentListGap:  @largeGap;
+
+/* Item */
+@keyContentItemColor : @japaneseIndigo;
+@mobileKeyContentItemFontSize : 1rem;
+@computerKeyContentItemFontSize: 1.25rem;
+@keyContentItemMarginLeft : @hugeGap;
+@keyContentItemMarginLeftNegative: -2rem;
+
+/* Bullet */
+@keyContentListBulletColor :  @secondaryColor;
+@keyContentListBulletFontSize : 3rem;
 
 /* Colored Title */
 @keyContentColoredTitleColor : @darkCyan;
-@keyContentColoredTitleMarginLeft : 74.85px;
+@keyContentTitleMarginLeft : 2.8rem;

package/theme/themes/eea/extras/main.overrides

@@ -29,3 +29,12 @@
     }
   }
 }
+
+// Ensure Add block is visible with no blocks added on page load
+#page-add {
+  min-height: @pageAddMinHeight;
+}
+// added override for css found in volto-block-style/stretchStyleDefaultView.css
+#main main {
+  overflow: inherit;
+}

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

@@ -27,6 +27,9 @@
 @checkboxColor: @white;
 @checkboxBoxShadow: none;
 
+/* Page Add */
+@pageAddMinHeight: 750px;
+
 /*-------------------
       login.less
 --------------------*/

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

@@ -28,12 +28,12 @@
     }
 
     i.icomn:first-child {
-      align-self:flex-start
+      align-self: flex-start;
     }
 
     i.icon:last-child {
       align-self: flex-end;
-    } 
+    }
   }
 
   .author {
@@ -55,7 +55,7 @@
   .eea.pullquote {
     .quotes.wrapper {
       .quote {
-        padding :@tabletQuotePadding;
+        padding: @tabletQuotePadding;
       }
 
       i.icon {

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

@@ -0,0 +1,27 @@
+@type: 'extra';
+@element: 'relatedContent';
+
+@import (multiple) '../../theme.config';
+
+/*-------------------
+  Related Content
+--------------------*/
+
+.related-content-wrapper {
+    .button-wrapper {
+        display: flex;
+        justify-content: center;
+    }
+    .ui.grid > .column:not(.row) {
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+}
+
+@media only screen and (min-width: @tabletBreakpoint) {
+    .related-content-wrapper {
+        .button-wrapper {
+            justify-content: right;
+        }
+    }
+}

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

@@ -0,0 +1,3 @@
+/*-------------------
+  Related Content
+--------------------*/

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

@@ -38,7 +38,6 @@
 }
 
 @media only screen and (min-width: @tabletBreakpoint) {
-
   .tags {
     flex-direction: row;
     align-items: center;