@eeacms/volto-eea-design-system 0.8.1 → 0.9.0

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

@@ -24,7 +24,6 @@
 .top.bar {
   display: flex;
   align-items: center;
-  height: @mobileTopSectionHeight;
   background: @topSectionBackground;
 
   .ui.container {
@@ -52,23 +51,35 @@
   height: auto !important;
   border-radius: @defaultBorderRadius;
   color: @topSectionItemColor;
+  padding: @mobileDropdownPadding;
+  max-width: @dropdownMaxWidth;
+}
+
+.top.bar .ui.active.visible.dropdown {
+  background: @grey-0;
+  box-shadow: @shadow-topbar-dropdown;
+
+  i.icon {
+    transform: rotate(180deg);
+  }
 }
 
 .top.bar .divider.text {
   color: @dropdownColor;
-  font-size: @dropdownFontSize;
+  font-size: @mobileDropdownFontSize;
   font-weight: @dropdownFontWeight;
 }
 
 .top.bar .ui.dropdown .menu {
-  margin-top: @mobileDropdownMenuMarginTop;
   left: @dropdownMenuLeft;
   right: @dropdownMenuRight;
+  box-shadow: @shadow-4-no-top;
+  border: none;
 }
 
 .top.bar .ui.dropdown .menu,
 .top.bar .ui.dropdown .menu .item {
-  font-size: @mobileDropdownMenuFontSize;
+  font-size: @dropdownMenuFontSize;
   color: @dropdownColor;
 }
 
@@ -98,7 +109,9 @@
   position: absolute;
   font-size: @topSectionIconFontSize;
   margin-left: @topSectionIconMarginLeft;
-  top: 0;
+  top: @mobileTopSectionIconTop;
+  line-height: @topSectionIconLineHeight;
+  transition: .2s;
 }
 
 /* Official union dropdown */
@@ -108,9 +121,14 @@
 
   img {
     width: @mobileOfficialUnionImageWidth;
+    position: absolute;
+    z-index: @z-index-1;
+    padding-left: @rem-space-2;
   }
 
   .ui.dropdown {
+    padding: @mobileOfficialUnionPadding;
+
     .menu {
       padding: @officialUnionPadding;
       left: @mobileOfficialUnionMenuLeft;
@@ -124,7 +142,6 @@
         a {
           font-weight: @officialUnionLinkFontWeight;
           white-space: @dropdownMenuContentWhiteSpace;
-          color: @officialUnionLinkColor;
         }
       }
     }
@@ -154,9 +171,12 @@
 
 /* Language dropdown */
 #language-switcher {
+  padding: @mobileLanguageMenuPadding;
+  flex-direction: row-reverse;
+
   img {
-    width: @mobileOfficialUnionImageWidth;
-    margin-left: @topSectionIconMarginLeft;
+    width: @mobileLanguageImageWidth;
+    margin-right: @topSectionIconMarginRight;
   }
   .menu {
     .wrapper {
@@ -164,6 +184,10 @@
         justify-content: flex-end;
         font-weight: @languageMenuItemFontWeight;
 
+        span {
+          font-size: @mobileLanguageFontSize;
+        }
+
         span.country-code {
           margin-left: @mobileLanguageCountryCodeMarginLeft;
           font-weight: @mobileLanguageCountryCodeFontWeight;
@@ -199,16 +223,21 @@
     height: @mobileMainSectionHeight;
 
     .ui.grid {
-      /* All margins and paddings removed for main header */
+      // All margins and paddings removed for main header
       width: 100%;
       margin: 0;
 
+      // Override grid specific paddings for header
       div:first-child {
         padding-left: 0;
+        padding-top: 0;
+        padding-bottom: 0;
       }
 
       div:last-child {
         padding-right: 0;
+        padding-top: 0;
+        padding-bottom: 0;
       }
     }
   }
@@ -342,7 +371,7 @@
 .search-action,
 .burger-action.mobile {
   img {
-    width: 60%;
+    width: 75%;
   }
   // icon to be used
   i.icon {
@@ -380,21 +409,12 @@
     HEADER TOP BAR TABLET
   ----------------------------------------------------------------------------*/
 
-  .top.bar {
-    height: @tabletTopSectionHeight;
-  }
-
   .homepage .block-editor-hero {
     margin-top: @tabletTopSectionHeight;
   }
 
-  .top.bar .ui.dropdown .menu {
-    margin-top: @tabletDropdownMenuMarginTop;
-  }
-
-  .top.bar .ui.dropdown .menu,
-  .top.bar .ui.dropdown .menu .item {
-    font-size: @tabletDropdownMenuFontSize;
+  .top.bar .divider.text {
+    font-size: @tabletDropdownFontSize;
   }
 
   /* Official union dropdown */
@@ -404,7 +424,10 @@
     img {
       width: @tabletOfficialUnionImageWidth;
     }
-    .ui.dropdown {
+
+    .ui.dropdown {  
+      padding: @tabletOfficialUnionPadding;
+
       .menu {
         left: @tabletOfficialUnionMenuLeft;
 
@@ -415,14 +438,22 @@
     }
   }
 
+  /* Theme sites dropdown */
+  #theme-sites.ui.dropdown .menu {
+    .wrapper {
+      width: @tabletThemeSitesMenuWidth;
+    }
+  }
+
   /* Language dropdown */
   #language-switcher {
-    img {
-      width: 19px;
+    .divider.text {
+      font-size: @font-size-1;
+      line-height: @font-lineheight-00;
     }
 
-    .menu {
-      top: @tabletLanguageMenuTop;
+    img {
+      width: @tabletLanguageImageWidth;
     }
   }
 
@@ -432,7 +463,7 @@
 
   .main.bar {
     .ui.container {
-      height: 117px;
+      height: @tabletMainSectionHeight;
     }
   }
 
@@ -465,15 +496,43 @@
       HEADER TOP BAR DESKTOP
   ----------------------------------------------------------------------------*/
 
-  .top.bar {
-    height: @computerTopSectionHeight;
-  }
   .homepage .block-editor-hero {
     margin-top: @computerTopSectionHeight;
   }
 
-  .top.bar .ui.dropdown .menu {
-    margin-top: @computerDropdownMenuMarginTop;
+  .top.bar .ui.dropdown {
+    padding: @computerDropdownPadding;
+  }
+
+  .top.bar .ui.dropdown i.chevron.down.icon {
+    top: @computerTopSectionIconTop;
+  }
+
+  .top.bar .official-union {    
+    .ui.dropdown {
+      padding: @computerOfficialUnionPadding;
+
+      .menu {
+        .content {
+            max-width: @computerOfficialUnionMaxWidth;
+        }
+      }
+    }
+  }
+
+  /* Theme sites dropdown */
+  #theme-sites.ui.dropdown .menu {
+    .wrapper {
+      width: @computerThemeSitesMenuWidth;
+    }
+  }  
+
+  #language-switcher {
+    padding: @computerLanguageMenuPadding;
+
+    .menu .wrapper .item span {
+      font-size: @computerLanguageFontSize;
+    }
   }
 
   /*----------------------------------------------------------------------------
@@ -482,7 +541,7 @@
 
   .main.bar {
     .ui.container {
-      height: 160px;
+      height: @computerMainSectionHeight;
 
       .ui.text.menu {
         flex-wrap: wrap;
@@ -675,10 +734,24 @@
   display: none;
 }
 
-@media all and (max-width: @tabletBreakpoint - 1) {
+@media all and (max-width: @largestMobileScreen) {
+  .top.bar .official-union .ui.dropdown .menu {
+    left: -20px;
+    min-width: calc(100vw - 20px);
+
+    .content {
+      max-width: 100%;
+    }
+  }
+
   #theme-sites.ui.dropdown .menu {
     left: @mobileThemeSitesMenuLeft;
   }
+
+  // Languages on mobile only go full right
+  #language-switcher .menu {
+    right: -20px;
+  }
 }
 
 @media all and (min-width: @tabletBreakpoint) {

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

@@ -3,11 +3,11 @@
 --------------------*/
 
 /* Heights */
-@mobileTopSectionHeight      : 22px;
-@tabletTopSectionHeight      : 30px;
-@computerTopSectionHeight    : 33px;
+@mobileTopSectionHeight      : 42px; //delete
+@tabletTopSectionHeight      : 42px;
+@computerTopSectionHeight    : 34px;
 
-@mobileMainSectionHeight     : 56px;
+@mobileMainSectionHeight     : 69px;
 @tabletMainSectionHeight     : 117px;
 @computerMainSectionHeight   : 160px;
 
@@ -34,18 +34,23 @@
 @mobileTopSectionItemFontSize         : @font-size-00;
 @tabletTopSectionItemFontSize         : @font-size-00;
 @topSectionZindex                     : @z-index-1;
-@topSectionIconMarginLeft             : 1px;
-@topSectionIconFontSize               : 0.8rem;
-
-/* Dropdown */
-@mobileDropdownMenuMarginTop          : 0;
-@tabletDropdownMenuMarginTop          : 0.4rem;
-@computerDropdownMenuMarginTop        : 0.438rem;
 @dropdownColor                        : @blue-grey-6;
-@dropdownFontSize                     : @font-size-00;
+@mobileDropdownFontSize               : @font-size-00;
+@tabletDropdownFontSize               : @font-size-00;
 @dropdownFontWeight                   : @bold;
 
+/* Icon */
+@topSectionIconMarginLeft             : @rem-space-1;
+@topSectionIconMarginRight            : @rem-space-1;
+@topSectionIconFontSize               : @font-size-0;
+@topSectionIconLineHeight             : @font-lineheight-00;
+@mobileTopSectionIconTop              : 14px;
+@computerTopSectionIconTop            : 10px;
+
 /* Dropdown Menu */
+@mobileDropdownPadding                : @rem-space-3 @rem-space-6 @rem-space-3 @rem-space-2;
+@computerDropdownPadding              : @rem-space-2 @rem-space-6 @rem-space-2 @rem-space-2;
+@dropdownMaxWidth                     : 410px;
 @dropdownMenuLeft                     : auto;
 @dropdownMenuRight                    : 0;
 @dropdownMenuWrapperGap               : @rem-space-1;
@@ -57,34 +62,42 @@
 @dropdownMenuItemColorHover           : @white;
 @dropdownMenuItemBackgroundColorHover : @blue-grey-6;
 @dropdownMenuItemPadding              : @rem-space-050 @rem-space-5;
-@mobileDropdownMenuFontSize           : @font-size-00;
-@tabletDropdownMenuFontSize           : @font-size-0;
+@dropdownMenuFontSize                 : @font-size-00;
 
 // Official Union
 @mobileOfficialUnionGap               : 0;
-@tabletOfficialUnionGap               : @rem-space-2;
+@tabletOfficialUnionGap               : 0;
 @officialUnionLinkFontWeight          : @bold;
-@officialUnionLinkColor               : @blue-grey-6;
 @officialUnionPadding                 : @rem-space-3;
 @mobileOfficialUnionMaxWidth          : 108px;
-@tabletOfficialUnionMaxWidth          : 388px;
-@mobileOfficialUnionImageWidth        : 17px;
-@tabletOfficialUnionImageWidth        : 36px;
-@mobileOfficialUnionMenuLeft          : -30px;
-@tabletOfficialUnionMenuLeft          : -54px;
+@tabletOfficialUnionMaxWidth          : 272px;
+@computerOfficialUnionMaxWidth        : 380px;
+@mobileOfficialUnionImageWidth        : 25px;
+@tabletOfficialUnionImageWidth        : 44px;
+@mobileOfficialUnionMenuLeft          : 0;
+@tabletOfficialUnionMenuLeft          : 0;
+@mobileOfficialUnionPadding           : @rem-space-3 @rem-space-6;
+@tabletOfficialUnionPadding           : @rem-space-3 @rem-space-6 @rem-space-3 @rem-space-12;
+@computerOfficialUnionPadding         : @rem-space-2 @rem-space-6 @rem-space-2 @rem-space-12;
 
 // Theme Sites
-@mobileThemeSitesMenuWidth            : 200px;
+@mobileThemeSitesMenuWidth            : 168px;
+@tabletThemeSitesMenuWidth            : 168px;
+@computerThemeSitesMenuWidth          : 225px;
 @themeSitesMenuSiteLinkColor          : @blue-grey-6;
 @themeSitesMenuSiteLinkFontWeight     : @normal;
 @mobileThemeSitesMenuLeft             : 0px;
 
 // Language
-@tabletLanguageMenuTop                : 18px;
-@languageMenuPadding                  : @rem-space-050 @rem-space-5;
+@mobileLanguageMenuPadding            : @rem-space-3 @rem-space-2;
+@computerLanguageMenuPadding          : @rem-space-2;
 @languageMenuItemFontWeight           : @normal;
 @mobileLanguageCountryCodeMarginLeft  : 3px;
 @mobileLanguageCountryCodeFontWeight  : @bold;
+@mobileLanguageFontSize               : @font-size-0;
+@computerLanguageFontSize             : @font-size-1;
+@mobileLanguageImageWidth             : 17px;
+@tabletLanguageImageWidth             : 18px;
 
 /*-----------------------
    HEADER MAIN SECTION
@@ -96,7 +109,7 @@
 
 /* Logo */
 @logoWidth                            : 100%;
-@mobileLogoMaxWidth                   : 122px;
+@mobileLogoMaxWidth                   : 142px;
 @tabletLogoMaxWidth                   : 252px;
 @computerLogoMaxWidth                 : 347px; //348 rendered fuzzy :(
 @mobileLogoMarginTop                  : @rem-space-2;
@@ -120,7 +133,7 @@
 ------------------*/
 
 /* Actions (Mega menu & Search) */
-@mobileActionsBoxWidth: 30px;
+@mobileActionsBoxWidth: 44px;
 @tabletActionsBoxWidth: 66px;
 @computerActionsBoxWidth: 72px;
 @burgerActionBackgroundColor: @darkMidnightBlue;
@@ -180,4 +193,14 @@
 
 /* Search box */
 @searchBoxBackgroundGradient : linear-gradient(340.97deg, @darkCerulean 9.19%, #009591 77.47%);
-@searchBoxWrapperGap : 75px;
+@searchBoxWrapperGap : 75px;
+
+/* Custom shadows for dropdowns */
+@shadow-topbar-dropdown: 2px 0 2px -5px hsla(@shadow-color, calc(@shadow-strength + 6%));
+@shadow-4-no-top: 
+  0 0 0 0 hsla(@shadow-color, calc(@shadow-strength + 2%)),
+  0 1px 1px -2px hsla(@shadow-color, calc(@shadow-strength + 3%)),
+  0 2px 2px -2px hsla(@shadow-color, calc(@shadow-strength + 3%)),
+  0 5px 5px -2px hsla(@shadow-color, calc(@shadow-strength + 4%)),
+  0 9px 9px -2px hsla(@shadow-color, calc(@shadow-strength + 5%)),
+  0 16px 16px -2px hsla(@shadow-color, calc(@shadow-strength + 6%));

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

@@ -32,6 +32,15 @@ h2, h3, h4, h5, h6 {
   h4 { font-size: @mobileH4; }
 }
 
+a {
+  &:visited {
+    color:  @linkVisitedColor;
+  }
+  &:active {
+    color: @linkActiveColor;
+  }
+}
+
 [class^='ri-'],
 [class*=' ri-'] {
   fill: currentColor;
@@ -40,3 +49,9 @@ h2, h3, h4, h5, h6 {
 .homepage {
   color: @tertiaryColor;
 }
+
+/* Add background and color for scroll-to-text fragments */
+::target-text {
+  background: @lightLavender;
+  color: @black;
+}

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

@@ -194,9 +194,11 @@
        Links
 --------------------*/
 
-@linkColor           : @primaryColor;
+@linkColor           : @blue-4;
+@linkHoverColor      : @blue-5;
+@linkVisitedColor    : @purple-5;
+@linkActiveColor     : @blue-6;
 @linkUnderline       : none;
-@linkHoverColor      : darken(saturate(@linkColor, 20), 15, relative);
 @linkHoverUnderline  : @linkUnderline;
 
 /*-------------------
@@ -222,7 +224,6 @@
 @thumbHoverBackground: rgba(128, 135, 139, 0.8);
 
 /* Inverted */
-@statisticInvertedBackground: @bottleGreen;
 @trackInvertedBackground: rgba(255, 255, 255, 0.1);
 @thumbInvertedBackground: rgba(255, 255, 255, 0.25);
 @thumbInvertedInactiveBackground: rgba(255, 255, 255, 0.15);
@@ -373,6 +374,7 @@
 @lightBlue        : #75C9DB;
 @lightViolet      : #BFC0FF;
 @lightPurple      : #DE99FF;
+@lightLavender    : #E8D2FD;
 @lightPink        : #FFBFF1;
 @lightBrown       : #D9C2AD;
 @lightGrey        : #E6E7E8;

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

@@ -14,8 +14,8 @@
   height: 100%;
 }
 
-.ui.cards > .card > .image,
-.ui.card > .image {
+.ui.cards > .card:not(.rounded) > .image,
+.ui.card:not(.rounded) > .image {
   overflow: @cardImageOverflow;
   height: @cardImageHeight;
 
@@ -28,9 +28,9 @@
 }
 
 .ui.cards > .card > i.icon,
-.ui.cards > .card > a > i.icon,
+.ui.cards > .card > a:not(.ui) > i.icon,
 .ui.card > i.icon,
-.ui.card > a > i.icon {
+.ui.card > a:not(.ui) > i.icon {
   color: @iconColor;
 }
 
@@ -42,6 +42,7 @@
 .ui.card .meta {
   display: flex;
   justify-content: space-between;
+  width: 100%;
 }
 
 
@@ -55,7 +56,7 @@
     margin-bottom: @rem-space-4;
 }
 
-.ui.card .extra.content a {
+.ui.card .extra.content a:not(.ui) {
   font-weight: @contentLinkFontWeight;
 
   &:hover {
@@ -89,9 +90,9 @@
 }
 
 .ui.card.primary > i.icon,
-.ui.card.primary > a > i.icon,
-.ui.card.primary > .content a,
-.ui.card.primary > .content a:hover,
+.ui.card.primary > a:not(.ui) > i.icon,
+.ui.card.primary > .content a:not(.ui),
+.ui.card.primary > .content a:not(.ui):hover,
 .ui.card.primary > .content > .description {
   color: @primaryDescriptionColor;
 }
@@ -105,7 +106,7 @@
 }
 
 .ui.card.primary > .content > .meta,
-.ui.card.primary > .content > .meta a {
+.ui.card.primary > .content > .meta a:not(.ui) {
   color: @primaryMetaColor;
 }
 
@@ -115,8 +116,8 @@
   color: @invertedPrimaryContentColor;
 }
 
-.ui.card.primary.inverted > a > i.icon,
-.ui.card.primary.inverted > .content a,
+.ui.card.primary.inverted > a:not(.ui) > i.icon,
+.ui.card.primary.inverted > .content a:not(.ui),
 .ui.card.primary.inverted > .extra.content a:not(.ui) {
   color: @invertedPrimaryContentColor;
 
@@ -135,9 +136,9 @@
 }
 
 .ui.card.secondary > i.icon,
-.ui.card.secondary > a > i.icon,
-.ui.card.secondary > .content a,
-.ui.card.secondary > .content a:hover,
+.ui.card.secondary > a:not(.ui) > i.icon,
+.ui.card.secondary > .content a:not(.ui),
+.ui.card.secondary > .content a:not(.ui):hover,
 .ui.card.secondary > .content > .header {
   color: @secondaryHeaderColor;
 }
@@ -155,7 +156,7 @@
 }
 
 .ui.card.secondary > .content > .meta,
-.ui.card.secondary > .content > .meta a {
+.ui.card.secondary > .content > .meta a:not(.ui) {
   color: @secondaryMetaColor;
 }
 
@@ -165,8 +166,8 @@
   color: @invertedSecondaryContentColor;
 }
 
-.ui.card.secondary.inverted > a > i.icon,
-.ui.card.secondary.inverted > .content a,
+.ui.card.secondary.inverted > a:not(.ui) > i.icon,
+.ui.card.secondary.inverted > .content a:not(.ui),
 .ui.card.secondary.inverted > .extra.content a:not(.ui) {
   color: @invertedSecondaryContentColor;
 
@@ -185,9 +186,9 @@
 }
 
 .ui.card.tertiary > i.icon,
-.ui.card.tertiary > a > i.icon,
-.ui.card.tertiary > .content a,
-.ui.card.tertiary > .content a:hover,
+.ui.card.tertiary > a:not(.ui) > i.icon,
+.ui.card.tertiary > .content a:not(.ui),
+.ui.card.tertiary > .content a:not(.ui):hover,
 .ui.card.tertiary > .content > .header {
   color: @tertiaryHeaderColor;
 }
@@ -205,7 +206,7 @@
 }
 
 .ui.card.tertiary > .content > .meta,
-.ui.card.tertiary > .content > .meta a {
+.ui.card.tertiary > .content > .meta a:not(.ui) {
   color: @tertiaryMetaColor;
 }
 
@@ -215,8 +216,8 @@
   color: @invertedTertiaryContentColor;
 }
 
-.ui.card.tertiary.inverted > a > i.icon,
-.ui.card.tertiary.inverted > .content a,
+.ui.card.tertiary.inverted > a:not(.ui) > i.icon,
+.ui.card.tertiary.inverted > .content a:not(.ui),
 .ui.card.tertiary.inverted > .extra.content a:not(.ui) {
   color: @invertedTertiaryContentColor;
 
@@ -234,34 +235,35 @@
   height: auto;
 }
 
+.ui.cards .ui.card.rounded,
 .ui.card.rounded {
   padding-top: @iconCardPaddingTop;
   border: none;
 
   .image {
     display: flex;
-    justify-content: center;
+    justify-content: @roundedImageJustifyContent;
 
-    img {
-      width: @roundedImageWidth;
-      height: @roundedImageHeight;
-      border-radius: @roundedImageBorderRadius;
-    }
+  }
+
+  img {
+    width: @roundedImageWidth;
+    height: @roundedImageHeight;
+    border-radius: @roundedImageBorderRadius;
   }
 
   .content {
-    justify-content: center;
     border-top: none;
 
     .header {
       margin-bottom: @roundedContentTitleMarginBottom;
       font-size: @roundedContentTitleFontSize;
       font-weight: @roundedContentTitleFontWeight;
-      text-align: center;
+      text-align: @roundedContentTitleTextAlign;
     }
 
     .description {
-      text-align: center;
+      text-align: @roundedContentTitleTextAlign;
       font-size: @roundedMetadataFontSize;
       font-weight: @roundedMetadataFontWeight;
     }
@@ -288,7 +290,7 @@
     background-color: @publicationCardDescriptionColor;
 
     .meta,
-    .meta a {
+    .meta a:not(.ui) {
       color: @publicationCardtextColor;
       font-size: @cardMetaFontSize;
       font-weight: @cardMetaTagFontWeight;
@@ -408,6 +410,7 @@
   cursor: pointer;
   outline: none;
   transform: translate(0, -50%);
+  z-index: 1; // make arrows clickable even on events page with right column
 }
 
 .cards-carousel .prev-arrow {
@@ -421,6 +424,10 @@
 } 
 
 /* Custom carousel pagination bullets */
+// avoid dots going over content that follows sliders
+.slick-dots {
+  bottom: 0;
+}
 .cards-carousel .slick-dots li button:before {
   background-color: @carouselDotsBackgroundColor;
   color: transparent;

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

@@ -274,8 +274,10 @@
 /* Global */
 @roundedImageBorderRadius        : @circularRadius;
 @roundedContentTitleMarginBottom : @rem-space-2;
+@roundedContentTitleTextAlign    : left;
 @roundedContentTitleFontWeight   : @bold;
 @roundedContentTitleFontSize     : @font-size-3;
+@roundedImageJustifyContent      : center;
 @roundedImageHeight           : 173px;
 @roundedImageWidth            : 173px;
 @roundedMetadataFontSize      : @font-size-1;