@eeacms/volto-eea-design-system 0.2.1

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

@@ -0,0 +1,149 @@
+/*-------------------
+      HEADER
+--------------------*/
+
+/* Heights */
+@mobileTopSectionHeight      : 14px;
+@tabletTopSectionHeight      : 30px;
+@computerTopSectionHeight    : 33px;
+
+@mobileMainSectionHeight     : 56px;
+@tabletMainSectionHeight     : 117px;
+@computerMainSectionHeight   : 160px;
+
+@mobilePopUpHeight           : calc(100vh - (@mobileTopSectionHeight + @mobileMainSectionHeight));
+@tabletPopUpHeight           : calc(100vh - (@tabletTopSectionHeight + @tabletMainSectionHeight));
+@computerPopUpHeight         : calc(100vh - (@computerTopSectionHeight + @computerMainSectionHeight));
+
+/* Header font sizes */
+@headerMinyFontSize: 0.5rem;
+@headerTinyFontSize: 0.625rem;
+@headerSmallFontSize: 0.75rem;
+@headerMediumFontSize: 0.875rem;
+@headerLargeFontSize: 1.125rem;
+
+/* Top */
+@topSectionBackground                 : @silverGray;
+@topSectionItemColor                  : @japaneseIndigo;
+@topSectionItemFontWeight             : @bold;
+@mobileTopSectionItemFontSize         : @headerSmallFontSize;
+@tabletTopSectionItemFontSize         : @headerSmallFontSize;
+@topSectionZindex                     : 1;
+
+/* Dropdown */
+@mobileDropdownMenuMarginTop          : 0.188rem;
+@tabletDropdownMenuMarginTop          : 0.438rem;
+@dropdownFontSize                     : @headerSmallFontSize;
+@dropdownFontWeight                   : @bold;
+/* Dropdown Menu */
+@dropdownMenuLeft                     : auto;
+@dropdownMenuRight                    : 0;
+@dropdownMenuWrapperGap               : 0.313rem;
+@dropdownMenuWrapperMargin            : 0.313rem 0;
+@dropdownMenuContentWhiteSpace        : pre-wrap;
+@dropdownMenuContentFontWeight        : @normal;
+@mobileDropdownMenuContentFontSize    : @headerSmallFontSize;
+@desktopDropdownMenuContentFontSize   : @headerSmallFontSize;
+@dropdownMenuItemColorHover           : @white;
+@dropdownMenuItemBackgroundColorHover : @japaneseIndigo;
+// Official Union
+@officialUnionGap                     : 0.75rem;
+@officialUnionMenuFontSize            : @headerMediumFontSize;
+@officialUnionTextFontWeight          : @normal;
+@officialUnionLinkFontWeight          : @bold;
+@officialUnionLinkColor               : @japaneseIndigo;
+@mobileOfficialUnionPadding           : 0.313rem;
+@tabletOfficialUnionPadding           : 0.75rem;
+@mobileOfficialUnionMaxWidth          : 110px;
+@tabletOfficialUnionMaxWidth          : 373px;
+//@mobileOfficialUnionImageWidth        : 11px;
+@mobileOfficialUnionImageWidth        : 16px;
+@tabletOfficialUnionImageWidth        : 33px;
+
+// Theme Sites
+@themeSitesMenuWidth                  : 210px;
+@themeSitesMenuSiteLinkColor          : @japaneseIndigo;
+@themeSitesMenuSiteLinkFontWeight     : @normal;
+@themeSitesMenuItemPadding            : 0.125rem 0.313rem;
+// Language
+@mobileLanguageFontSize               : @headerTinyFontSize;
+@tabletLanguageFontSize               : @headerMediumFontSize;
+@mobileLanguageMenuTop                : 0.75rem;
+@tabletLanguageMenuTop                : 18px;
+@languageMenuPadding                  : 0.125rem 1.25rem;
+@languageMenuItemFontWeight           : @normal;
+@mobileLanguageCountryCodeMarginLeft  : 3px;
+@mobileLanguageCountryCodeFontWeight  : @bold;
+
+/* Main Section */
+@headerMainSectionBackground          : @white;
+
+/* Logo */
+@logoWidth                            : 100%;
+@mobileLogoMaxWidth                   : 122px;
+@tabletLogoMaxWidth                   : 252px;
+@computerLogoMaxWidth                 : 348px;
+@mobileLogoMarginTop                  : 0.563rem;
+@tabletLogoMarginTop                  : 0.938rem;
+@computerLogoMarginTop                : 1.25rem;
+
+/* Main menu */
+@mainMenuItemColor                    : @deepBlue;
+@mainMenuItemFontSize                 : ~"min(max(0.875rem, 1.5vw), 1.125rem)";
+@mainMenuItemFontWeight               : 500;
+@mainMenuItemPlaceSelf                : flex-end;
+@mainMenuItemActiveColor              : @secondaryColor;
+@mainMenuItemActiveBorder             : 3px solid @secondaryColor;
+
+/* Actions (Mega menu & Search) */
+@mobileActionsBoxWidth: 30px;
+@tabletActionsBoxWidth: 66px;
+@computerActionsBoxWidth: 72px;
+
+/* Mega menu and Search popup */
+@mobilePopupMarginTop   : 5vh;
+@tabletPopupMarginTop   : 10vh;
+@computerPopupMarginTop : 18vh;
+
+/* Mega menu */
+@megaMenuBackgroundGradient: linear-gradient(166.78deg, @darkCerulean 39.52%, @darkCyan 118.9%);
+
+/* Menu link and toggle */
+@mobileMegaMenuColor            : @white;
+@megaMenuLinkPadding            : 0 1.25rem;
+@megaMenuWordBreak              : break-word;
+@toggleMenuFirstPadding         : 0;
+@mobileToggleMenuFirstPadding   : 0.5rem 0;
+@mobileToggleMenuSecondPadding  : 0.5rem 1.25rem;
+@mobileToggleMenuThirdPadding   : 0.5rem 2.5rem;
+
+@megaMenuLiAlignItems           : center;
+
+@mobileMegaMenuMarginBottom     : 0.25em;
+@tabletMegaMenuMarginBottom     : 0.4em;
+@computerMegaMenuMarginBottom   : 0.6em;
+
+// Font sizes and line heights
+@megaMenuFontSize: ~"min(max(1.125rem, 3.5vw), 2.2rem)";
+
+/* Fallback font sizes for ie and opera mini */
+@mobileMegaMenuFontSize         : 1.125rem;
+@tabletMegaMenuFontSize         : @h1;
+
+////////@computerMegaMenuFirstFontSize  : 3rem;
+////////@computerMegaMenuSecondFontSize : 2.5rem;
+////////@computerMegaMenuThirdFontSize  : 2.25rem;
+
+@megaMenuLineHeight             : 1.2;
+
+// Icon
+@megaMenuIconFontFamily           : 'remixicon';
+@megaMenuAfterIcon                : "\EA6E";
+@megaMenuIconAfterColor           : @white;
+@tabletMegaMenuIconAfterFontSize  : 1rem;
+@computerMegaMenuIconAfterFontSize: 1.875rem;
+
+/* Search box */
+@searchBoxBackgroundGradient : linear-gradient(340.97deg, @darkCerulean 9.19%, #009591 77.47%);
+
+@searchBoxWrapperGap : 75px;

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

@@ -0,0 +1,57 @@
+@type: 'extra';
+@element: 'inpageNavigation';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+        Inpage Navigation
+*******************************/
+
+#inpage-navigation {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  width: @tabletNavWidth;
+  height: @tabletNavHeight;
+  bottom: @navBottom;
+  right: @navRight;
+  background-color: @navBackground;
+  border-radius: @circularRadius;
+  color: @navColor;
+  font-weight: @navFontWeight;
+
+  /* Icon align fix */
+  > div > i.icon,
+  i.icons {
+    line-height: @mobileInpageNavigationIconLineHeight;
+    margin-right: @inpageNavigationIconMarginRight;
+    font-size: @mobileInpageNavigationIconFontSize;
+  }
+
+  &.hidden {
+    display: none;
+  }
+}
+
+@media only screen and (min-width: @computerBreakpoint) {
+  #inpage-navigation {
+    width: @computerNavWidth;
+    height: @computerNavHeight;
+
+    > div > i.icon,
+    i.icons {
+      line-height: @computerInpageNavigationIconLineHeight;
+      font-size: @computerInpageNavigationIconFontSize;
+    }
+
+    .text {
+      margin-top: @inpageNavigationTextMarginTop;
+      font-size: @inpageNavigationTextFontSize;
+      font-weight: @inpageNavigationTextFontWeight;
+      text-align: @inpageNavigationTextAlign;
+      font-variant: @inpageNavigationTextFontVariant;
+    }
+  }
+}

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

@@ -0,0 +1,30 @@
+/*******************************
+        Inpage Navigation
+*******************************/
+
+@navBottom            : @largeGap;
+@navRight             : @largeGap;
+@navBackground        : @darkCerulean;
+@navColor             : @white;
+@navFontWeight        : @bold;
+
+/* Inpage navigation size */
+@tabletNavWidth       : 2.25rem;
+@tabletNavHeight      : 2.25rem;
+@computerNavWidth     : 3.125rem;
+@computerNavHeight    : 3.125rem;
+
+/* Desktop Icon */
+@inpageNavigationIconWidth : 100%;
+@inpageNavigationIconMarginRight : 0;
+@mobileInpageNavigationIconLineHeight : 2.75rem;
+@computerInpageNavigationIconLineHeight : 1.5rem;
+@mobileInpageNavigationIconFontSize : 2rem;
+@computerInpageNavigationIconFontSize : 1.9rem;
+
+/* Text */
+@inpageNavigationTextMarginTop : -22px;
+@inpageNavigationTextFontSize : 1.125rem;
+@inpageNavigationTextFontWeight : 900;
+@inpageNavigationTextAlign : center;
+@inpageNavigationTextFontVariant: small-caps;

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

@@ -0,0 +1,36 @@
+@type: 'extra';
+@element: 'keyContent';
+
+@import (multiple) '../../theme.config';
+
+.eea.key-content {
+  background-color: @keyContentBackgroundColor;
+
+  .title {
+    text-align: center;
+    font-weight: @keyContentTitleFontWeight;
+    font-size: @keyContentTitleFontSize;
+  }
+
+  .ui.bulleted.list {
+    margin-left: @keyContentListMarginLeft;
+  }
+
+  .item {
+    margin-left: 74.85px;
+    margin-bottom: 34.07px;
+  }
+
+  .item::before {
+    color: @keyContentListItemBeforeColor;
+    margin-left: @keyContentListItemBeforeMarginLeft;
+  }
+}
+
+.eea.key-content.colored {
+  .title {
+    text-align: left;
+    color: @keyContentColoredTitleColor;
+    margin-left: @keyContentColoredTitleMarginLeft;
+  }
+}

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

@@ -0,0 +1,18 @@
+/*******************************
+            Key Content
+*******************************/
+
+@keyContentBackgroundColor : #f9f9f9;
+
+/* Title */
+@keyContentTitleFontWeight: 700; 
+@keyContentTitleFontSize : 36px;
+
+/* List */
+@keyContentListMarginLeft: 0;
+@keyContentListItemBeforeColor :  @darkCyan;
+@keyContentListItemBeforeMarginLeft : -38.84px;
+
+/* Colored Title */
+@keyContentColoredTitleColor : @darkCyan;
+@keyContentColoredTitleMarginLeft : 74.85px;

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

@@ -0,0 +1,31 @@
+.addReducedTextElements() when (@reduceTextElementsSize = true) {
+  @{textElementsParentSelector} {
+    @{textElementsSelectors} {
+      max-width: @textElementsMaxWidth;
+      margin-right: @textElementsRightMargin;
+      margin-left: @textElementsLeftMargin;
+    }
+  }
+}
+
+.addReducedTextElements();
+
+// login page keep the small size of login container
+#page-login {
+  .container {
+    max-width: @loginContainerMaxWidth;
+  }
+  // reset left margin since help is a p tag
+  .help {
+    margin-left: 0 !important;
+  }
+}
+
+// Checkbox box-shadow override from pastanaga
+.ui.checkbox {
+  label {
+    &:before {
+      box-shadow: @checkboxBoxShadow;
+    }
+  }
+}

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

@@ -0,0 +1,33 @@
+// #2749 Pastanaga  text block readability enhancements
+@reduceTextElementsSize: false;
+@textElementsMaxWidth: 800px;
+@textElementsParentSelector: .content-area;
+@textElementsSelectors: e("h1, h2, h3:not(.relatedItems-header), h4, h5, h6,
+ p:not(.right):not(.left):not(.data-figure):not(.help),
+ ol, ul, blockquote, .slate-table");
+@textElementsLeftMargin: auto !important;
+@textElementsRightMargin: auto !important;
+
+/* Mobile Menu Nav */
+@mobileMenuNavAlignItems: center;
+@mobileMenuNavJustifyContent: center;
+@mobileMenuNavTextAlign: center;
+
+/* Mobile Menu Nav Menu */
+@mobileMenuNavMenuAlignItems: center;
+@mobileMenuNavMenuFontSize: @24px;
+
+/* Mobile Menu Nav Item */
+@mobileMenuNavItemJustifyContent: center;
+@mobileMenuNavItemLineHeight: 1.25;
+
+/* Checkbox */
+@checkboxBorderUnchecked: 1px solid @oldSilver;
+@checkboxBorderChecked: 1px solid @darkCerulean;
+@checkboxColor: @white;
+@checkboxBoxShadow: none;
+
+/*-------------------
+      login.less
+--------------------*/
+@loginContainerMaxWidth: 680px !important;

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

@@ -0,0 +1,62 @@
+@type: 'extra';
+@element: 'publicationCard';
+
+@import (multiple) '../../theme.config';
+
+/*-------------------
+  Publication Card
+--------------------*/
+
+.eea.publication.card {
+  color: @publicationCardtextColor;
+  //position: relative;
+  height: @publicationCardHeight;
+  background-color: @publicationCardBackgroundColor;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  a {
+    display: contents;
+    text-decoration: none;
+    color: @publicationCardtextColor;
+    cursor: pointer;
+  }
+
+  .header {
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+    height: calc(100% - @cardDescriptionMaxHeight);
+  }
+
+  .description {
+    background-color: @publicationCardDescriptionColor;
+    height: @cardDescriptionHeight;
+    padding: @cardDescriptionPadding;
+    //position: absolute;
+    //bottom: 0;
+    width: @cardDescriptionWidth;
+    max-height: @cardDescriptionMaxHeight;
+
+    .tag {
+      font-size: @cardDescriptionTagFontSize;
+      font-weight: @cardDescriptionTagFontWeight;
+    }
+
+    .text {
+      font-size: @cardDescriptionTextFontSize;
+      font-weight: @cardDescriptionTextFontWeight;
+    }
+  }
+}
+
+@media only screen and (min-width: @computerBreakpoint) {
+  .eea.publication.card {
+    margin: @publicationCardMargin;
+
+    .description {
+      height: @computerCardDescriptionHeight;
+    }
+  }
+}

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

@@ -0,0 +1,24 @@
+/*-------------------
+  Publication Card
+--------------------*/
+
+@publicationCardtextColor: @white;
+@publicationCardMargin: 10px 0;
+@publicationCardHeight: 268px;
+
+/* Colors */
+@publicationCardBackgroundColor: #BCBEC0;
+@publicationCardDescriptionColor: #3D5265;
+
+/* Description */
+@cardDescriptionHeight: auto;
+@cardDescriptionMaxHeight: 135px;
+@computerCardDescriptionHeight: auto;
+@cardDescriptionPadding: 20px;
+@cardDescriptionWidth: 100%;
+
+@cardDescriptionTagFontSize: 12px;
+@cardDescriptionTagFontWeight: 400;
+@cardDescriptionTextFontSize: 16px;
+@cardDescriptionTextFontWeight: 700;
+

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

@@ -0,0 +1,76 @@
+@type: 'extra';
+@element: 'pullquote';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+            Pullquote
+*******************************/
+
+.eea.pullquote {
+  padding: @pullquotePadding;
+  margin: @pullquoteMargin;
+  word-break: @contentWordBreak;
+  hyphens: @contentWordBreakHyphens;
+
+  .quotes.wrapper {
+    display: flex;
+
+    .quote {
+      padding: @mobileQuotePadding;
+    }
+
+    i.icon {
+      display: flex;
+      align-items: flex-end;
+      font-size: @mobileQuoteIconSize;
+      color: @quoteIconColor;
+    }
+
+    i.icomn:first-child {
+      align-self:flex-start
+    }
+
+    i.icon:last-child {
+      align-self: flex-end;
+    } 
+  }
+
+  .author {
+    color: @authorTextColor;
+    text-align: @authorTextAlign;
+    font-weight: @authorFontWeight;
+    font-size: @authorFontSize;
+    margin: @authorMargin;
+  }
+
+  .meta {
+    text-align: @metaTextAlign;
+    font-weight: @metaFontWeight;
+    font-size: @metaFontSize;
+  }
+}
+
+@media only screen and (min-width: @tabletBreakpoint) {
+  .eea.pullquote {
+    .quotes.wrapper {
+      .quote {
+        padding :@tabletQuotePadding;
+      }
+
+      i.icon {
+        font-size: @tabletQuoteIconSize;
+      }
+    }
+  }
+  .eea.pullquote.left {
+    width: @maxWidthOnFloat;
+    padding: @pullquoteFloatLeftPadding;
+    float: left;
+  }
+  .eea.pullquote.right {
+    width: @maxWidthOnFloat;
+    padding: @pullquoteFloatRightPadding;
+    float: right;
+  }
+}

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

@@ -0,0 +1,34 @@
+/*******************************
+            Pullquote
+*******************************/
+
+/* Body */
+@pullquotePadding           : @largeGap 0;
+@pullquoteFloatLeftPadding  : @largeGap @largeGap @largeGap 0;
+@pullquoteFloatRightPadding : @largeGap 0 @largeGap @largeGap;
+@pullquoteMargin            : 0;
+@maxWidthOnFloat            : 50%;
+@contentWordBreak           : break-word;
+@contentWordBreakHyphens    : manual;
+
+/* Quote paragraph */
+@mobileQuotePadding  : 0;
+@tabletQuotePadding  : 0.5rem 0 1rem;
+
+/* Author */
+@authorTextColor     : @darkCyan;
+@authorTextAlign     : right;
+@authorFontWeight    : @bold;
+@authorFontSize      : 1.25rem;
+@authorMargin        : 0;
+
+/* Metadata */
+@metaTextAlign       : right;
+@metaFontWeight      : @normal;
+@metaFontSize        : 1rem;
+
+/* Icon */
+@mobileQuoteIconSize : 2rem;
+@tabletQuoteIconSize : 3rem;
+@quoteIconColor      : @secondaryColor;
+@quoteDownIconFloat  : right;

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

@@ -0,0 +1,37 @@
+@type: 'extra';
+@element: 'tag';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+            Tag
+*******************************/
+
+.tag {
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  height: @tagHeight;
+  margin: @tagMargin;
+  padding: @tagPadding;
+  background: @tagDefaultColor;
+  font-size: @tagNameFontSize;
+  font-weight: @tagNameFontWeight;
+  line-height: @tagNameLineHeight;
+
+  .icon {
+    width: unset;
+    height: unset;
+    margin: @tagHashtagMargin;
+    font-size: @tagHashtagFontSize;
+    font-weight: @tagNameFontWeight;
+    display: inline-flex;
+    color: @tagNameFontColor;
+  }
+
+  .name {
+    color: @tagNameFontColor;
+  }
+}

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

@@ -0,0 +1,22 @@
+/*******************************
+            Tags
+*******************************/
+
+/* Tags */
+@tagPadding            : @mediumGap 0;
+@tagHeight             : 1.25rem;
+@tagMargin             : 0 @mediumGap 0 0;
+
+/* Tag Icon */
+@tagHashtagFontSize    : 0.75rem;
+@tagHashtagMargin      : 0 0.2rem 0 0;
+
+/* Tag text */
+@tagNameFontSize       : 1rem;
+@tagNameFontColor      : @japaneseIndigo;
+@tagNameFontColorWithBackground : @white;
+@tagNameFontWeight     : 500;
+@tagNameLineHeight     : 1.25rem;
+
+/* Tags Colors */
+@tagDefaultColor       : transparent;

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

@@ -0,0 +1,50 @@
+@type: 'extra';
+@element: 'tagList';
+
+@import (multiple) '../../theme.config';
+
+/*******************************
+            Tag
+*******************************/
+
+.tags {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: right;
+  width: @tagsBodyWidth;
+  line-height: @tagsLineHeight;
+
+  .tags-title {
+    text-align: right;
+    height: @tagsLineHeight;
+    color: @tagsTitleFontColor;
+    margin-right: @tagsTitleMargin;
+    font-weight: @tagsFontWeight;
+    font-size: @tagsFontSize;
+  }
+
+  .tags-content {
+    line-height: @tagsLineHeight;
+    display: inline-flex;
+    align-items: center;
+    flex-wrap: wrap;
+    flex-direction: column;
+  }
+}
+
+.tags.left {
+  justify-content: left;
+}
+
+@media only screen and (min-width: @tabletBreakpoint) {
+
+  .tags {
+    flex-direction: row;
+    align-items: center;
+
+    .tags-content {
+      flex-direction: inherit;
+    }
+  }
+}

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

@@ -0,0 +1,13 @@
+/*******************************
+            Tags
+*******************************/
+
+/* Body */
+@tagsBodyWidth             : 100%;
+
+/* Tags Title */
+@tagsTitleFontColor        : @japaneseIndigo;
+@tagsTitleMargin           : 1rem;
+@tagsFontWeight            : 400;
+@tagsFontSize              : 1.125rem;
+@tagsLineHeight            : 1.312rem;