@eeacms/volto-eea-design-system 0.2.1

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

@@ -0,0 +1,130 @@
+/*******************************
+             Step
+*******************************/
+
+/*-------------------
+       Group
+--------------------*/
+
+@stepMargin: 1em 0em;
+@stepsBorderRadius: @defaultBorderRadius;
+@stepsBackground: '';
+@stepsBoxShadow: none;
+@stepsBorder: 1px solid @borderColor;
+
+/*-------------------
+      Element
+--------------------*/
+
+@verticalMargin: 0em;
+@horizontalMargin: 0em;
+
+@arrowSize: @relativeLarge;
+@verticalPadding: @relativeLarge;
+@horizontalPadding: 2em;
+
+@transition:
+  background-color @defaultDuration @defaultEasing,
+  opacity @defaultDuration @defaultEasing,
+  color @defaultDuration @defaultEasing,
+  box-shadow @defaultDuration @defaultEasing
+;
+@lineHeight: @relativeLarge;
+@alignItems: center;
+@justifyContent: center;
+@backgroundColor: @white;
+@background: @backgroundColor;
+@borderRadius: 0em;
+@borderWidth: 1px;
+@boxShadow: none;
+@border: none;
+@divider: @borderWidth solid @borderColor;
+
+/* Icon */
+@iconDistance: 1rem;
+@iconSize: 2.5em;
+@iconAlign: middle;
+
+/* Title */
+@titleFontFamily: @headerFont;
+@titleFontWeight: @bold;
+@titleFontSize: @relativeLarge;
+@titleColor: @darkTextColor;
+
+/* Description */
+@descriptionDistance: 0.25em;
+@descriptionFontSize: @relativeSmall;
+@descriptionFontWeight: @normal;
+@descriptionColor: @textColor;
+
+
+/* Arrow */
+@arrowBackgroundColor: @backgroundColor;
+@arrowTopOffset: 50%;
+@arrowRightOffset: 0%;
+@arrowBorderWidth: 0px @borderWidth @borderWidth 0px;
+
+@arrowDisplay: block;
+@lastArrowDisplay: none;
+
+@activeArrowDisplay: block;
+@activeLastArrowDisplay: none;
+
+/* Mobile */
+@mobileIconDistance: @iconDistance;
+
+/*-------------------
+       Types
+--------------------*/
+
+/* Vertical */
+@verticalDivider: @divider;
+@verticalArrowTopOffset: 50%;
+@verticalArrowRightOffset: 0%;
+@verticalArrowBorderWidth: 0px @borderWidth @borderWidth 0px;
+
+@verticalArrowDisplay: none;
+@verticalLastArrowDisplay: @verticalArrowDisplay;
+
+@verticalActiveArrowDisplay: block;
+@verticalActiveLastArrowDisplay: block;
+
+/*-------------------
+      Variations
+--------------------*/
+
+@attachedHorizontalOffset: -@borderWidth;
+@attachedVerticalOffset: 0;
+@attachedWidth: calc(100% + (-@attachedHorizontalOffset * 2));
+
+@orderedFontFamily: inherit;
+@orderedFontWeight: @bold;
+
+/*-------------------
+       States
+--------------------*/
+
+/* Completed */
+@completedColor: @positiveColor;
+
+/* Hover */
+@hoverBackground: @offWhite;
+@hoverColor: @hoveredTextColor;
+
+/* Down */
+@downBackground: @darkWhite;
+@downColor: @pressedTextColor;
+
+/* Active */
+@activeBackground: @darkWhite;
+@activeColor: @linkColor;
+@activeIconColor: @darkTextColor;
+
+/* Active + Hover */
+@activeHoverBackground: @lightGrey;
+@activeHoverColor: @textColor;
+
+
+/* Disabled */
+@disabledBackground: @background;
+@disabledColor: @disabledTextColor;

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

@@ -0,0 +1,97 @@
+@type: 'extra';
+@element: 'avatar';
+
+@import (multiple) '../../theme.config';
+
+/*-------------------
+      AVATAR
+--------------------*/
+
+.eea.avatar.big {
+  width: @avatarWidthBig;
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: @avatarWrapperWidth;
+
+    .image-wrapper {
+      width: @avatarImageWrapperWidth;
+      display: flex;
+      justify-content: center;
+
+      .image {
+        height: @avatarImageHeightBig;
+        width: @avatarImageWidthBig;
+        border-radius: @avatarImageBorderRadius;
+        background-position: center;
+        background-size: contain;
+      }
+    }
+    .content-wrapper {
+      width: @avatarContentWrapperWidth;
+      .content {
+        margin-top: @avatarContentMarginTop;
+        .title {
+          font-weight: @avatarContentTitleFontWeight;
+          text-align: center;
+          font-size: @avatarContentTitleFontSize;
+          line-height: @avatarContentTitleLineHeight;
+          letter-spacing: @avatarContentTitleLetterSpacing;
+          margin-bottom: @avatarContentTitleMarginBottom;
+        }
+        .metadata {
+          text-align: center;
+          font-size: @avatarMetadataFontSize;
+          font-weight: @avatarMetadataFontWeight;
+          margin-top: @avatarMetadataMarginTop;
+        }
+      }
+    }
+  }
+}
+
+.eea.avatar.small {
+  width: @avatarWidthSmall;
+  .wrapper {
+    width: @avatarWrapperWidth;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    .image-wrapper {
+      width: @avatarImageWrapperWidth;
+      display: flex;
+      justify-content: center;
+
+      .image {
+        height: @avatarImageHeightSmall;
+        width: @avatarImageWidthSmall;
+        border-radius: @avatarImageBorderRadius;
+        background-position: center;
+        background-size: contain;
+      }
+    }
+
+    .content-wrapper {
+      width: @avatarContentWrapperWidth;
+      .content {
+        margin-top: @avatarContentMarginTopSmall;
+        .title {
+          font-weight: @avatarContentTitleFontWeightSmall;
+          color: @darkCyan;
+          text-align: center;
+          font-size: @avatarContentTitleFontSizeSmall;
+          line-height: @avatarContentTitleLineHeightSmall;
+          letter-spacing: @avatarContentTitleLetterSpacing;
+          margin-bottom: @avatarContentTitleMarginBottom;
+        }
+        .metadata {
+          text-align: center;
+          font-size: @avatarMetadataFontSizeSmall;
+          font-weight: @avatarMetadataFontWeightSmall;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,34 @@
+/*******************************
+            Avatar
+*******************************/
+
+/* Big */
+@avatarWidthBig                 : 100%;
+@avatarWrapperWidth             : 100%;
+@avatarImageWrapperWidth        : 100%;
+@avatarImageHeightBig           : 150px;
+@avatarImageWidthBig            : 150px;
+@avatarImageBorderRadius        : 50%;
+@avatarContentWrapperWidth      : 100%;
+@avatarContentMarginTop         : 17.84px;
+@avatarContentTitleFontWeight   : 700;
+@avatarContentTitleFontSize     : 36px;
+@avatarContentTitleLineHeight   : 54px;
+@avatarContentTitleLetterSpacing: -0.015em;
+@avatarContentTitleMarginBottom : 0px;
+@avatarMetadataFontSize         : 24px;
+@avatarMetadataFontWeight       : 400;
+@avatarMetadataMarginTop        : 8.84px;
+
+
+/* Small */
+@avatarWidthSmall                       : 100%;
+@avatarImageHeightSmall                 : 130px;
+@avatarImageWidthSmall                  : 130px;
+@avatarContentMarginTopSmall            : 20px;
+@avatarContentTitleFontWeightSmall      : 500;
+@avatarContentTitleFontSizeSmall        : 20px;
+@avatarContentTitleLineHeightSmall      : 30px;
+@avatarMetadataFontSizeSmall            : 16px;
+@avatarMetadataFontWeightSmall          : 300;
+@avatarMetadataMarginTop                : 8.84px;

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

@@ -0,0 +1,43 @@
+@type: 'extra';
+@element: 'avatarGrid';
+
+@import (multiple) '../../theme.config';
+
+/*-------------------
+      AVATAR GRID
+--------------------*/
+
+.eea.avatar-grid {
+  width: @avatarGridWidth;
+  .wrapper {
+    width: @avatarGridWrapperWidth;
+    .content {
+      width: @avatarGridContentWidth;
+      display: flex;
+      flex-direction: column;
+
+      .grid-title {
+        width: @avatarGridContentTitleWidth;
+        font-weight: @avatarGridContentTitleFontWeight;
+        font-size: @avatarGridContentTitleFontSize;
+        text-align: center;
+      }
+
+      .grid-title.hidden {
+        display: none;
+      }
+
+      .avatar.group {
+        display: flex;
+        justify-content: center;
+        width: @avatarGroupWidth;
+        margin-top: @avatarGroupMarginTop;
+
+        .avatar-wrapper {
+          padding-left: @avatarGroupWrapperPaddingRight;
+          padding-right: @avatarGroupWrapperPaddingRight;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,20 @@
+/*******************************
+            Avatar Grid
+*******************************/
+
+@avatarGridWidth: 100%;
+@avatarGridWrapperWidth             : 100%;
+@avatarGridContentWidth             : 100%;
+
+/* Grid Title */
+@avatarGridContentTitleWidth        : 100%;
+@avatarGridContentTitleFontWeight   : 700;
+@avatarGridContentTitleFontSize     : 36px;
+@avatarGridContentTitleLineHeight   : 20px;
+
+
+/* Avatar Group */
+@avatarGroupWidth                   : 100%;
+@avatarGroupMarginTop               : 67.54px;
+@avatarGroupWrapperPaddingLeft      : 32px; 
+@avatarGroupWrapperPaddingRight     : 32px; 

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

@@ -0,0 +1,213 @@
+@type: 'extra';
+@element: 'banner';
+
+@import (multiple) '../../theme.config';
+
+/*-------------------
+      BANNER
+--------------------*/
+
+@font-face {
+  font-display: swap;
+  font-family: 'Archivo';
+  src: url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap')
+    format('truetype');
+}
+
+.eea.banner {
+  width: 100%;
+  color: @white;
+  background: @bannerBackgroundColor;
+  position: relative;
+  font-family: 'Archivo', sans-serif;
+
+  .gradient {
+    background: @backgroundGradient;
+    opacity: @backgroundGradientOpacity;
+
+    .content {
+      padding: @mobileContentPadding;
+
+      .ui.grid {
+        align-items: end;
+      }
+
+      .title {
+        max-width: @titleMaxWidth;
+        margin: @mobileTitleMargin;
+        font-size: @mobileTitleFontSize;
+        font-weight: @titleFontWeight;
+        line-height: @mobileTitleLineHeight;
+      }
+
+      .metadata {
+        font-size: @mobileMetadataFontSize;
+        line-height: @mobileMetadataLineHeight;
+
+        .field.type {
+          font-weight: @metadataTypeFontWeight;
+        }
+
+        span.field:not(:last-child)::after {
+          content: @metadataFieldDividerContent;
+        }
+      }
+
+      .actions {
+        display: flex;
+        justify-content: flex-end;
+        align-items: @mobileActionsAlignItems;
+
+        .action {
+          .ui.basic.inverted.button {
+            /* used basic inverted button for minimun overrides on box-shadow and active state background */
+            box-shadow: @bannerActionButtonBoxShadow !important;
+
+            &:active {
+              background-color: @bannerActionButtonActiveBackgroundColor !important;
+            }
+
+            span {
+              font-size: @tabletBannerActionButtonFontSize;
+            }
+
+            i.icon {
+              opacity: @bannerActionButtonIconOpacity;
+              margin: @mobileBannerActionButtonMargin;
+              font-size: @mobileBannerActionButtonIconFontSize;
+            }
+          }
+        }
+      }
+    }
+  }
+  .image {
+    background-repeat: @imageBackgroundRepeat;
+    background-size: @imageBackgroundSize;
+    background-position: @imageBackgroundPosition;
+    width: 100%;
+    height: 100%;
+
+    .gradient {
+      background-image: @backgroundGradientWithImage;
+      
+      .content {
+        padding: @mobileContentPaddingWithImage;
+      }
+    }
+  }
+
+
+}
+
+/*Share Popup*/
+
+.ui.popup.share-popup {
+  padding: @sharePopupPadding;
+  filter: @sharePopupFilter;
+
+  p {
+      font-size: @sharePopupFontSize;
+      font-weight: @sharePopupFontWeight;
+      line-height: @sharePopupLineHeight;
+  }
+
+  .actions {
+      flex-flow: column;
+      i.icon {
+          color: @sharePopupActionsIconColor;
+      }
+
+      .action {
+          display:flex;
+          justify-content:center
+      }
+
+      .ui.button:not(.icon) > .icon:not(.button):not(.dropdown) {
+        margin: @sharePopupActionsIconMargin;
+      }
+  }
+
+}
+
+@media only screen and (min-width: @tabletBreakpoint) {
+  .eea.banner {
+    .gradient {
+      .content {
+        padding: @tabletContentPadding;
+  
+        .title {
+          font-size: @tabletTitleFontSize;
+          font-weight: @titleFontWeight;
+          margin: @tabletTitleMargin;
+          line-height: @tabletTitleLineHeight;
+        }
+  
+        .metadata {
+          font-size: @tabletMetadataFontSize;
+          line-height: @tabletMetadataLineHeight;
+        }
+  
+        .actions {
+          align-items: @tabletActionsAlignItems;
+          flex-direction: @tabletActionsFlexDirection;
+  
+          .action {
+            min-width:@tabletActionsActionMinWidth;
+  
+            .ui.basic.inverted.button i.icon {
+                margin: @tabletBannerActionButtonMargin;
+                font-size: @tabletBannerActionButtonIconFontSize;
+                vertical-align: @bannerActionButtonIconVerticalAlign;
+            }
+          }
+        }
+      }
+    }
+
+    .image .gradient .content {
+      padding: @tabletContentPaddingWithImage;
+    }
+  }
+
+  /*Share Popup*/
+  .ui.popup.share-popup {
+    min-width: @tabletSharePopupMinWidth;
+
+    .actions{
+        flex-flow: row;
+        display: flex;
+        justify-content: space-between;
+
+        .action {
+            display:inherit;
+        }
+    }
+
+  }
+}
+
+@media only screen and (min-width: @computerBreakpoint) {
+
+  .eea.banner {
+
+    .image {
+
+      .gradient .content {
+        padding: @computerContentPaddingWithImage;
+      }
+    }
+
+    .gradient .content {
+      padding: @computerContentPadding ;
+
+      .title {
+        font-size: @computerTitleFontSize;
+        margin: @computerTitleMargin;
+        line-height: @computerTitleLineHeight;
+      }
+    }
+
+  }
+
+}

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

@@ -0,0 +1,77 @@
+/*******************************
+            Page Banner
+*******************************/
+
+@bannerBackgroundColor   : @darkCyan;
+
+/* Background Image */
+@imageBackgroundRepeat   : no-repeat;
+@imageBackgroundSize     : cover;
+@imageBackgroundPosition : center;
+
+/* Gradient */
+@backgroundGradient           : linear-gradient(8deg, #0c1b28b3 32%, rgba(0, 36, 78, 0) 80%);
+@backgroundGradientWithImage  : linear-gradient(0deg, rgb(20, 33, 44, 90%) 24%, rgba(0, 36, 78, 0) 80%);
+@backgroundGradientOpacity    : 0.9;
+
+/* Content */
+@mobileContentPadding      : 1rem 0 1.25rem;
+@tabletContentPadding      : 3rem 0 1.25rem;
+@computerContentPadding    : 5rem 0 1.25rem;
+
+@mobileContentPaddingWithImage      : 6.25rem 0 1.25rem;
+@tabletContentPaddingWithImage      : 12.5rem 0 1.25rem;
+@computerContentPaddingWithImage    : 15.625rem 0 1.25rem;
+
+/* Title */
+@titleFontWeight           : @bold;
+@titleMaxWidth             : 100%;
+@mobileTitleFontSize       : 1.25rem;
+@tabletTitleFontSize       : 2.25rem;
+@computerTitleFontSize     : 3rem;
+@mobileTitleLineHeight     : 1.375rem;
+@tabletTitleLineHeight     : 2.75rem;
+@computerTitleLineHeight   : 3.5rem;
+@mobileTitleMargin         : 0 0 0.5rem 0;
+@tabletTitleMargin         : 0 0 0.813rem 0;
+@computerTitleMargin       : 0 0 1.125rem 0;
+
+/* Metadata */
+@metadataTypeFontWeight    : @bold;
+@mobileMetadataFontSize    : 0.438rem;
+@tabletMetadataFontSize    : 0.875rem;
+@mobileMetadataLineHeight  : 0.5rem;
+@tabletMetadataLineHeight  : 1rem;
+// Metadata field
+@metadataFieldDividerContent: ' | ';
+
+/* Actions */
+@mobileActionsAlignItems                 : center;
+@tabletActionsAlignItems                 : flex-end;
+@tabletActionsFlexDirection              : column;
+// Action
+@tabletActionsActionMinWidth             : 95px;
+// Button
+@mobileBannerActionButtonFontSize        : 0.75rem;
+@tabletBannerActionButtonFontSize        : 0.875rem;
+@bannerActionButtonBoxShadow             : none;
+@bannerActionButtonActiveBackgroundColor : transparent;
+@mobileBannerActionButtonMargin          : 0;
+@tabletBannerActionButtonMargin          : 0 0.313rem 0 0;
+// Button Icon
+@bannerActionButtonIconVerticalAlign     : text-bottom;
+@bannerActionButtonIconOpacity           : 1;
+@mobileBannerActionButtonIconFontSize    : 1rem;
+@tabletBannerActionButtonIconFontSize    : 1.1rem;
+
+/* Share Popup */
+@sharePopupPadding: @tinyGap;
+@sharePopupFilter:  drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.25));
+@tabletSharePopupMinWidth: 120px;
+// Text
+@sharePopupFontSize: 0.875rem;
+@sharePopupFontWeight: 500;
+@sharePopupLineHeight: 1rem;
+// Actions
+@sharePopupActionsIconColor: @pineGreen;
+@sharePopupActionsIconMargin: 0;

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

@@ -0,0 +1,89 @@
+@type: 'extra';
+@element: 'blockquote';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+            Blockquote
+*******************************/
+
+blockquote.callout, p.callout {
+  border: @calloutBorder;
+  box-shadow: @calloutBoxShadow;
+  border-radius: @calloutBorderRadius;
+  padding-top: @calloutPadding;
+  padding-bottom: @calloutPadding;
+  border-left: @mobileBlockquoteBorderLeft;
+  color: @quoteColor;
+  font-size: @mobileQuoteFontSize;
+}
+
+.eea.blockquote {
+  border-left: @mobileBlockquoteBorderLeft;
+
+  .quote {
+    display: flex;
+    flex-direction: column;
+    margin: @mobileQuoteMargin;
+    gap: @quoteGap;
+    color: @quoteColor;
+    font-size: @mobileQuoteFontSize;
+    font-weight: @quoteFontWeight;
+
+    .meta {
+      margin: @metaMargin;
+      font-size: @mobileMetaFontSize;
+      font-weight: @metaWeight;
+      align-self: @metaAlignSelf;
+    }
+  }
+}
+
+.eea.slate.blockquote {
+  .quote {
+    display: block;
+    flex-direction: unset;
+    gap: unset;
+    font-weight: @slateQuoteFontWeight;
+
+    br {
+      content: '';
+      display: flex;
+      margin: @slateQuoteGap 0;
+    }
+  }
+}
+
+@media only screen and (min-width: @tabletBreakpoint) {
+  blockquote.callout, p.callout {
+    border-left: @tabletBlockquoteBorderLeft;
+    font-size: @tabletQuoteFontSize;
+  }
+
+  .eea.blockquote {
+    border-left: @tabletBlockquoteBorderLeft;
+    .quote {
+      margin: @tabletQuoteMargin;
+      font-size: @tabletQuoteFontSize;
+      .meta {
+        font-size: @tabletMetaFontSize;
+      }
+    }
+  }
+}
+
+@media only screen and (min-width: @computerBreakpoint) {
+  blockquote.callout, p.callout {
+    font-size: @computerQuoteFontSize;
+  }
+
+  .eea.blockquote .quote {
+    margin: @computerQuoteMargin;
+    font-size: @computerQuoteFontSize;
+    .meta {
+      font-size: @computerMetaFontSize;
+    }
+  }
+}
+
+.loadUIOverrides();