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

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

@@ -3,7 +3,7 @@
 --------------------*/
 
 /* Heights */
-@mobileTopSectionHeight      : 14px;
+@mobileTopSectionHeight      : 20px;
 @tabletTopSectionHeight      : 30px;
 @computerTopSectionHeight    : 33px;
 
@@ -18,87 +18,111 @@
 /* Header font sizes */
 @headerMinyFontSize: 0.5rem;
 @headerTinyFontSize: 0.625rem;
-@headerSmallFontSize: 0.75rem;
+@headerSmallFontSize: @font-size-00;
 @headerMediumFontSize: 0.875rem;
 @headerLargeFontSize: 1.125rem;
 
-/* Top */
-@topSectionBackground                 : @silverGray;
-@topSectionItemColor                  : @japaneseIndigo;
+
+/*-------------------
+   HEADER TOP BAR
+--------------------*/
+
+@topSectionBackground                 : @grey-2;
+@topSectionItemColor                  : @blue-grey-6;
 @topSectionItemFontWeight             : @bold;
-@mobileTopSectionItemFontSize         : @headerSmallFontSize;
-@tabletTopSectionItemFontSize         : @headerSmallFontSize;
-@topSectionZindex                     : 1;
+@topSectionItemFontSize               : @font-size-00;
+@mobileTopSectionItemFontSize         : @font-size-00;
+@tabletTopSectionItemFontSize         : @font-size-00;
+@topSectionZindex                     : @z-index-1;
 
 /* Dropdown */
-@mobileDropdownMenuMarginTop          : 0.188rem;
-@tabletDropdownMenuMarginTop          : 0.438rem;
-@dropdownFontSize                     : @headerSmallFontSize;
+@mobileDropdownMenuMarginTop          : 0;
+@tabletDropdownMenuMarginTop          : 0.4rem;
+@computerDropdownMenuMarginTop        : 0.438rem;
+@dropdownColor                        : @blue-grey-6;
+@dropdownFontSize                     : @font-size-00;
 @dropdownFontWeight                   : @bold;
+
 /* Dropdown Menu */
 @dropdownMenuLeft                     : auto;
 @dropdownMenuRight                    : 0;
-@dropdownMenuWrapperGap               : 0.313rem;
-@dropdownMenuWrapperMargin            : 0.313rem 0;
+@dropdownMenuWrapperGap               : @rem-space-1;
+@dropdownMenuWrapperMargin            : @rem-space-1 0;
+@dropdownMenuLanguageWrapperPaddingInlineStart : 0;
 @dropdownMenuContentWhiteSpace        : pre-wrap;
-@dropdownMenuContentFontWeight        : @normal;
-@mobileDropdownMenuContentFontSize    : @headerSmallFontSize;
-@desktopDropdownMenuContentFontSize   : @headerSmallFontSize;
+@mobileDropdownMenuContentFontSize    : @font-size-00;
+@desktopDropdownMenuContentFontSize   : @font-size-00;
 @dropdownMenuItemColorHover           : @white;
-@dropdownMenuItemBackgroundColorHover : @japaneseIndigo;
+@dropdownMenuItemBackgroundColorHover : @blue-grey-6;
+@dropdownMenuItemPadding              : @rem-space-050 @rem-space-5;
+@mobileDropdownMenuFontSize           : @font-size-00;
+@tabletDropdownMenuFontSize           : @font-size-0;
+
 // Official Union
-@officialUnionGap                     : 0.75rem;
-@officialUnionMenuFontSize            : @headerMediumFontSize;
-@officialUnionTextFontWeight          : @normal;
+@mobileOfficialUnionGap               : 0;
+@tabletOfficialUnionGap               : @rem-space-2;
 @officialUnionLinkFontWeight          : @bold;
-@officialUnionLinkColor               : @japaneseIndigo;
-@mobileOfficialUnionPadding           : 0.313rem;
-@tabletOfficialUnionPadding           : 0.75rem;
-@mobileOfficialUnionMaxWidth          : 110px;
-@tabletOfficialUnionMaxWidth          : 373px;
-//@mobileOfficialUnionImageWidth        : 11px;
-@mobileOfficialUnionImageWidth        : 16px;
-@tabletOfficialUnionImageWidth        : 33px;
+@officialUnionLinkColor               : @blue-grey-6;
+@officialUnionPadding                 : @rem-space-3;
+@mobileOfficialUnionMaxWidth          : 108px;
+@tabletOfficialUnionMaxWidth          : 388px;
+@mobileOfficialUnionImageWidth        : 17px;
+@tabletOfficialUnionImageWidth        : 36px;
+@mobileOfficialUnionMenuLeft          : -30px;
+@tabletOfficialUnionMenuLeft          : -54px;
 
 // Theme Sites
-@themeSitesMenuWidth                  : 210px;
-@themeSitesMenuSiteLinkColor          : @japaneseIndigo;
+@mobileThemeSitesMenuWidth            : 190px;
+@computerThemeSitesMenuWidth          : 200px;
+@themeSitesMenuSiteLinkColor          : @blue-grey-6;
 @themeSitesMenuSiteLinkFontWeight     : @normal;
-@themeSitesMenuItemPadding            : 0.125rem 0.313rem;
+@themeSitesMenuLeft                   : -20px;
+
 // Language
-@mobileLanguageFontSize               : @headerTinyFontSize;
-@tabletLanguageFontSize               : @headerMediumFontSize;
-@mobileLanguageMenuTop                : 0.75rem;
 @tabletLanguageMenuTop                : 18px;
-@languageMenuPadding                  : 0.125rem 1.25rem;
+@languageMenuPadding                  : @rem-space-050 @rem-space-5;
 @languageMenuItemFontWeight           : @normal;
 @mobileLanguageCountryCodeMarginLeft  : 3px;
 @mobileLanguageCountryCodeFontWeight  : @bold;
 
+/*-----------------------
+   HEADER MAIN SECTION
+-----------------------*/
+
 /* Main Section */
 @headerMainSectionBackground          : @white;
+@headerMainSectionTransparency        : rgba(255, 255, 255, 0.1);
 
 /* Logo */
 @logoWidth                            : 100%;
 @mobileLogoMaxWidth                   : 122px;
 @tabletLogoMaxWidth                   : 252px;
 @computerLogoMaxWidth                 : 348px;
-@mobileLogoMarginTop                  : 0.563rem;
-@tabletLogoMarginTop                  : 0.938rem;
-@computerLogoMarginTop                : 1.25rem;
+@mobileLogoMarginTop                  : @rem-space-2;
+@tabletLogoMarginTop                  : @rem-space-3-5;
+@computerLogoMarginTop                : @rem-space-5;
 
 /* Main menu */
-@mainMenuItemColor                    : @deepBlue;
+@mainMenuItemColor                    : @primaryColor;
+@mainMenuItemInvertedColor            : @white;
 @mainMenuItemFontSize                 : ~"min(max(0.875rem, 1.5vw), 1.125rem)";
-@mainMenuItemFontWeight               : 500;
-@mainMenuItemPlaceSelf                : flex-end;
+@mainMenuItemFontWeight               : @font-weight-5;
+@mainMenuItemPadding                  : @rem-space-050 @rem-space-2;
 @mainMenuItemActiveColor              : @secondaryColor;
-@mainMenuItemActiveBorder             : 3px solid @secondaryColor;
+@mainMenuItemBorder                   : 4px solid transparent;
+@mainMenuItemActiveBorder             : 4px solid @secondaryColor;
+@mainMenuInvertedItemActiveBorder     : 4px solid @white;
+@mainMenuItemAlignSelf                : flex-end;
+
+/*-----------------
+   HEADER ACTIONS
+------------------*/
 
 /* Actions (Mega menu & Search) */
 @mobileActionsBoxWidth: 30px;
 @tabletActionsBoxWidth: 66px;
 @computerActionsBoxWidth: 72px;
+@burgerActionBackgroundColor: @darkMidnightBlue;
 
 /* Mega menu and Search popup */
 @mobilePopupMarginTop   : 5vh;
@@ -106,44 +130,48 @@
 @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;
+@mobileMegaMenuWidth: 94%;
+@megaMenuBackgroundColor: @darkMidnightBlue;
+@megaMenuTextColor: @white;
+@mobileMegaMenuPadding: @rem-space-4 0;
+@tabletMegaMenuPadding: @rem-space-9;
+@computerMegaMenuPadding: @rem-space-10 0 0 0;
+@megaMenuContentPaddingTop: @rem-space-8;
+
+/* Title */
+@megaMenuTitleFontSize: @font-size-4;
+@megaMenuTitleFontWeight: @font-weight-7;
+
+/* Sub Title */
+@megaMenuSubTitleFontSize: @font-size-2;
+@megaMenuSubTitleFontWeight: @font-weight-6;
+
+/* List Item */
+@megaMenuListItemFontSize: @font-size-1;
+@megaMenuListItemFontWeight: @font-weight-4;
+@megaMenuListItemPadding: @rem-space-2 0;
+
+/* At a glance */
+@megaMenuGlanceBackgroundColor: @secondaryColor;
+@megaMenuGlancePaddingLeft:  @rem-space-8 @rem-space-5;
+@megaMenuGlanceListItemFontSize: @font-size-2;
+@megaMenuGlanceListItemFontWeight: @font-weight-6;
+@megaMenuGlanceListItemMargin: @rem-space-6 0;
+
+/* Accordion */
+@megaMenuAccordionTitleFontSize: @font-size-3;
+@megaMenuAccordionTitlePadding: @rem-space-2 0;
+@megaMenuAccordionIconFontSize: @font-size-5;
+@megaMenuAccordionContentPadding: @rem-space-4 0;
+@megaMenuAccordionTitleBorderBottom: 1px solid rgba(255, 255, 255, 0.25);
+@megaMenuAccordionActiveTitleBorderBottom: 1px solid @white;
+
+/* Nested Accordion */
+@megaMenuNestedAccordionMargin: 0;
+@megaMenuNestedAccordionTitleFontSize: @font-size-2;
+@megaMenuNestedAccordionTitleFontWeight: @font-weight-7;
+@megaMenuNestedAccordionContentPadding: @rem-space-4 @rem-space-4;
 
 /* Search box */
 @searchBoxBackgroundGradient : linear-gradient(340.97deg, @darkCerulean 9.19%, #009591 77.47%);
-
-@searchBoxWrapperGap : 75px;
+@searchBoxWrapperGap : 75px;

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

@@ -0,0 +1,59 @@
+@type: 'extra';
+@element: 'hero';
+
+@import (multiple) '../../theme.config';
+
+/*-------------------
+      Hero
+--------------------*/
+
+.eea.hero-block {
+  position: @heroBlockPosition;
+}
+
+.hero-block-inner-wrapper {
+  height: 100%;
+  padding-block: @heroBlockWrapperPadding;
+}
+
+.hero-block-body {
+  display: flex;
+  flex-direction: column;
+  gap: @mobileHeroBlockBodyGap;
+}
+
+.hero-block-image {
+  background-repeat: @heroBlockImageBackgroundRepeat;
+  background-size: @heroBlockImageBackgroundSize;
+  background-position: @heroBlockImageBackgroundPosition;
+  width: 100%;
+  height: 100%;
+}
+
+.eea.hero-block.full-height,
+.eea.hero-block.full-height .hero-block-image,
+.eea.hero-block.full-height .hero-block-inner-wrapper {
+  min-height: @mobileHeroBlockMinHeight;
+}
+
+@media only screen and (min-width: @tabletBreakpoint) {
+  .eea.hero-block.full-height,
+  .eea.hero-block.full-height .hero-block-image,
+  .eea.hero-block.full-height .hero-block-inner-wrapper {
+    min-height: @tabletHeroBlockMinHeight;
+  }
+  .hero-block-body {
+    gap: @tabletHeroBlockBodyGap;
+  }
+}
+
+@media only screen and (min-width: @computerBreakpoint) {
+  .eea.hero-block.full-height,
+  .eea.hero-block.full-height .hero-block-image,
+  .eea.hero-block.full-height .hero-block-inner-wrapper {
+    min-height: @desktopHeroBlockMinHeight;
+  } 
+  .hero-block-body {
+    gap: @desktopHeroBlockBodyGap;
+  }
+}

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

@@ -0,0 +1,23 @@
+/*******************************
+            Hero
+*******************************/
+
+/* Hero block */
+@mobileHeroBlockMinHeight : 417px;
+@tabletHeroBlockMinHeight : 465px;
+@desktopHeroBlockMinHeight: 665px;
+
+@heroBlockPosition: relative;
+
+/* Background Image */
+@heroBlockImageBackgroundRepeat   : no-repeat;
+@heroBlockImageBackgroundSize     : cover;
+@heroBlockImageBackgroundPosition : center;
+
+/* Wrapper */
+@heroBlockWrapperPadding : @rem-space-20;
+
+/* Body */
+@mobileHeroBlockBodyGap  : @rem-space-6;
+@tabletHeroBlockBodyGap  : @rem-space-8;
+@desktopHeroBlockBodyGap : @rem-space-10;

package/theme/themes/eea/globals/site.overrides

@@ -5,22 +5,11 @@
 @import '@eeacms/volto-eea-design-system/../theme/themes/eea/globals/utilities';
 
 /* Heading size adjustment */
-@media only screen and (min-width: @tabletBreakpoint) {
-  h1 {
-    font-size: unit((48 / 16), rem);
-  }
-
-  h2 {
-    font-size: unit((40 / 16), rem);
-  }
-
-  h3 {
-    font-size: unit((36 / 16), rem);
-  }
-
-  h4 {
-    font-size: unit((24 / 16), rem);
-  }
+@media only screen and (max-width: @largestMobileScreen) {
+  h1 { font-size: @mobileH1; }
+  h2 { font-size: @mobileH2; }
+  h3 { font-size: @mobileH3; }
+  h4 { font-size: @mobileH4; }
 }
 
 [class^='ri-'],

package/theme/themes/eea/globals/site.variables

@@ -79,6 +79,11 @@
 @h5 : unit((20 / @fontSize), rem);
 @h6 : unit((18 / @fontSize), rem);
 
+@mobileH1: unit((30 / @fontSize), rem);
+@mobileH2: unit((24 / @fontSize), rem);
+@mobileH3: unit((20 / @fontSize), rem);
+@mobileH4: unit((18 / @fontSize), rem);
+
 /*--------------
    Form Input
 ---------------*/
@@ -145,17 +150,20 @@
   Gaps / Paddings / Margins
 ---------------------------*/
 
+@minyGap         : unit((8 / @emSize), rem);
 @tinyGap         : unit((12 / @emSize), rem);
 @mediumGap       : unit((16 / @emSize), rem);
 @largeGap        : unit((20 / @emSize), rem);
 @bigGap          : unit((24 / @emSize), rem);
 @hugeGap         : unit((28 / @emSize), rem);
 
+@squareMiny      : @minyGap @minyGap;
 @squareTiny      : @tinyGap @tinyGap;
 @squareMedium    : @mediumGap @mediumGap;
 @squareLarge     : @largeGap @largeGap;
 @squareBig       : @bigGap @bigGap;
 
+@rectangleMini   : @minyGap @tinyGap;
 @rectangleTiny   : @tinyGap @mediumGap;
 @rectangleMedium : @mediumGap @largeGap;
 @rectangleLarge  : @largeGap @bigGap;

package/theme/themes/eea/globals/utilities.less

@@ -2,12 +2,12 @@
 .color-fg-primary { color: @primaryColor !important; }
 .color-fg-secondary { color: @secondaryColor !important; }
 .color-fg-tertiary { color: @tertiaryColor !important; }
-.color-fg-white { color: @white !important; }
+.color-fg-white { color: @grey-0 !important; }
 
 .color-bg-primary { background-color: @primaryColor !important; }
 .color-bg-secondary { background-color: @secondaryColor !important; }
 .color-bg-tertiary { background-color: @tertiaryColor !important; }
-.color-bg-grey { background-color: #F9F9F9 !important; }
+.color-bg-grey { background-color: @grey-1 !important; }
 
 // Display utilities
 .d-flex { display: flex !important; }

package/theme/themes/eea/modules/accordion.overrides

@@ -81,3 +81,21 @@
 .ui.styled.accordion .active.title input {
   color: @styledActiveTitleColor;
 }
+
+/*------------------------------
+     Tabs as accordion (Volto)
+--------------------------------*/
+
+.ui.menu.RRT__accordion {
+  .ui.item {
+    background-color: transparent;
+  }
+
+  .ui.item i {
+    font-size: @iconFontSize;
+
+    &::before {
+      font-size: @iconFontSize;
+    }
+  }
+}

package/theme/themes/eea/modules/tab.overrides

@@ -3,11 +3,11 @@
 *******************************/
 
 .ui.pointing.secondary.menu {
-  a.item {
+  .item {
     font-size: @headerSize;
   }
 
-  a.item:hover {
+  .item:hover {
     color: @tabActiveItemHoverColor;
   }
 }

package/theme/themes/eea/tokens/fonts.less

@@ -29,9 +29,10 @@
 @font-size-3: 1.25rem;
 @font-size-4: 1.5rem;
 @font-size-5: 2rem;
-@font-size-6: 2.5rem;
-@font-size-7: 3rem;
-@font-size-8: 3.5rem;
+@font-size-6: 2.25rem;
+@font-size-7: 2.5rem;
+@font-size-8: 3rem;
+@font-size-9: 3.5rem;
 @font-size-fluid-0: clamp(.75rem, 2vw, 1rem);
 @font-size-fluid-1: clamp(1rem, 4vw, 1.5rem);
 @font-size-fluid-2: clamp(1.5rem, 6vw, 2.5rem);

package/theme/themes/eea/views/card.overrides

@@ -322,7 +322,7 @@
   .slick-list {
     margin: 0 -0.75em !important;
   }
-  
+
   .slick-track {
     display: flex;
   }
@@ -337,7 +337,6 @@
     > div {
       height: 100%;
     }
-
   }
 
   .slider-arrow {
@@ -363,6 +362,11 @@
     left: auto;
   }
 
+  .slick-dots {
+    position: relative;
+    bottom: unset;
+  }
+
   .slick-dots li button:before {
     background-color: @carouselDotsBackgroundColor;
     color: transparent;
@@ -376,10 +380,8 @@
   .slick-dots li.slick-active button:before {
     background-color: @carouselDotsActiveBackgroundColor;
     color: transparent;
-    
-  }
 
-  
+  }
 }
 
 

package/theme/themes/eea/views/item.overrides

@@ -7,7 +7,8 @@
   margin: @imageMargin;
 }
 
-.item .tile.image {
+.item .tile.image,
+.block .item .tile.image {
   width: @tileImageWidth;
   height: @tileImageHeight;
 }
@@ -26,7 +27,7 @@
   .ui.items.row > .item {
     flex-direction: row;
   }
-  
+
   .ui.items.row > .item > .image + .content {
     padding: 0em 0em 0em @mobileContentImageDistance;
   }
@@ -42,4 +43,18 @@
   .ui.items.row > .item {
     margin: @desktopRowItemMargin;
   }
-}
+}
+
+/*--------------
+     Icons
+---------------*/
+
+.ui.items > .item {
+  &.primary > .icon {
+    color: @primaryColor;
+  }
+
+  &.secondary > .icon {
+    color: @secondaryColor;
+  }
+}

package/src/ui/Divider/Divider.jsx

@@ -1,7 +0,0 @@
-import React from 'react';
-
-function Divider({ ...rest }) {
-  return <div className="eea divider" {...rest}></div>;
-}
-
-export default Divider;

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

@@ -1,14 +0,0 @@
-@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

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