@eeacms/volto-eea-design-system 1.13.2 → 1.15.0

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

@@ -8,6 +8,7 @@
 @contentBoxBackgroundColor: @grey-1;
 @contentBoxNoBackground: transparent;
 @contentBoxColorInverted : inherit;
+@contentBoxBeforeZIndex: -1;
 
 /* Themes */
 @contentBoxBackgroundColorPrimary: @primaryColor;

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

@@ -345,7 +345,7 @@
   display: flex;
   overflow: auto;
   width: 100%;
-  height: @mobilePopUpHeight;
+  min-height: @mobilePopUpHeight;
   align-items: @searchBoxAlignItems;
   background: @searchBoxBackgroundGradient;
 
@@ -582,7 +582,7 @@
 
   /* Search box */
   #search-box {
-    height: @tabletPopUpHeight;
+    min-height: @tabletPopUpHeight;
 
     .wrapper {
       margin: @searchBoxTabletPopupMarginTop 0;
@@ -693,7 +693,7 @@
 
   /* Search box */
   #search-box {
-    height: @computerPopUpHeight;
+    min-height: @computerPopUpHeight;
 
     .wrapper {
       margin: @searchBoxComputerPopupMarginTop 0;

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

@@ -241,9 +241,9 @@
 @searchBoxSuggestionsTextColor: @white;
 @searchBoxSuggestionsColumnGap: 2em;
 @searchBoxSuggestionsRowGap: 1em;
-@searchBoxMobilePopupMarginTop: 0.5em;
-@searchBoxTabletPopupMarginTop: 1em;
-@searchBoxComputerPopupMarginTop: 1.5em;
+@searchBoxMobilePopupMarginTop: @em-space-8;
+@searchBoxTabletPopupMarginTop: @em-space-8;
+@searchBoxComputerPopupMarginTop: @em-space-8;
 
 /* Custom shadows for dropdowns */
 @shadow-topbar-dropdown: 2px 0 2px -5px hsla(@shadow-color, calc(@shadow-strength + 6%));

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

@@ -38,3 +38,9 @@
 #main main {
   overflow: inherit;
 }
+
+// with z-index: -1 you don't get the hover and focused border for block child section
+// TODO: to be removed if https://github.com/plone/volto/pull/5029 merged
+.block .block:not(.inner)::before {
+  z-index: auto;
+}

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

@@ -4,6 +4,10 @@
 
 @import '@eeacms/volto-eea-design-system/../theme/themes/eea/globals/utilities';
 
+html, body {
+  font-size: @baseFontSize;
+}
+
 // Accessibility outline on focus-visible for every component
 *:focus-visible {
   outline: @focusVisibleOutline;
@@ -11,6 +15,7 @@
 
 button:focus-visible,
 a.button:focus-visible,
+.ui.dropdown:focus-visible,
 .ui.checkbox input[type="checkbox"]:focus-visible,
 .ui.checkbox input[type="radio"]:focus-visible {
   outline: @focusVisibleOutline !important;
@@ -132,25 +137,19 @@ a {
   color: @black;
 }
 
-/* Add colors for paragraphs styles options in StyeMenu */
+/* Add colors for paragraphs styles options in StyleMenu */
 #style-menu.ui.dropdown .menu {
-  span:nth-of-type(1) {
+  .block-style-primary {
     color: @primaryColor;
-      span.text {
-        color: @primaryColor;
-      }
   }
-  span:nth-of-type(2) {
+  .block-style-secondary {
     color: @secondaryColor;
-      span.text {
-        color: @secondaryColor;
-      }
   }
-  span:nth-of-type(3) {
+  .block-style-tertiary {
     color: @tertiaryColor;
-      span.text {
-        color: @tertiaryColor;
-      }
+  }
+  .active {
+    background-color: @grey-2;
   }
 }
 
@@ -175,16 +174,16 @@ a {
     visibility: hidden;
   }
   .image {
-   page-break-inside: avoid;  
+   page-break-inside: avoid;
   }
   img {
-   page-break-inside: avoid;  
+   page-break-inside: avoid;
   }
-  .card { 
-  page-break-inside: avoid;  
+  .card {
+  page-break-inside: avoid;
 
   }
   .grid-block-teaser .card{
-    page-break-inside: auto;  
+    page-break-inside: auto;
   }
 }

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

@@ -38,6 +38,9 @@
 /* The size of page text  */
 @fontSize : 16px;
 
+/* Overrides html & body default font-size to enable scaling from browser settings */
+@baseFontSize: 1rem;
+
 
 /*-------------------
     Border Radius

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

@@ -140,7 +140,7 @@
   --card-image-height: @roundedImageHeight;
 }
 .ui.card.rounded {
-  padding-top: @iconCardPaddingTop;
+  padding: @roundedCardPadding;
   border: none;
 
   .image {
@@ -377,6 +377,9 @@
 }
 
 .cards-carousel .slick-dots li button:before {
+  content: none;
+}
+.cards-carousel .slick-dots li .slick-dot-icon:before {
   background-color: @carouselDotsBackgroundColor;
   color: transparent;
   border: @carouselDotsBorder;
@@ -384,9 +387,16 @@
   opacity: @carouselDotsOpacity;
   width: @mobileCarouselDotsWidth;
   height: @mobileCarouselDotsHeight;
+  position: absolute;
+  top: 0;
+  left: 0;
+  content: '•';
+  text-align: center;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-.cards-carousel .slick-dots li.slick-active button:before {
+.cards-carousel .slick-dots li.slick-active .slick-dot-icon:before {
   background-color: @carouselDotsActiveBackgroundColor;
   color: transparent;
 }
@@ -415,6 +425,7 @@
     border-top: none;
     .header {
       word-break: break-word;
+      font-size: @iconCardHeaderFontSize;
     }
   }
   .icon {
@@ -450,6 +461,12 @@
   padding: @headerPadding;
 }
 
+// when title is on image the extra padding that displays the
+// link outline reveals part of title from 3rd row
+.ui.card .gradient .header {
+  padding: @headerOnImagePadding;
+}
+
 .ui.card .header > a {
   .useTitleMaxLines();
 }
@@ -457,4 +474,13 @@
 // Meta align fix
 .ui.card.u-card .meta:after {
     content: none;
-}
+}
+
+/*******************************
+    Image Card items grid
+*******************************/
+.imageCard-items {
+  display: grid;
+  gap: @imageCardItemsGap;
+  grid-template-columns: repeat(auto-fit,minmax(@imageCardItemsGridMin, @imageCardItemsGridMax));
+}

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

@@ -18,7 +18,7 @@
 @fontFamily: @pageFont;
 @display: flex;
 @borderRadius: @defaultBorderRadius;
-@margin: 1em 0em;
+@margin: 0em;
 @minHeight: 0px;
 @padding: 0em;
 @width: 290px;
@@ -69,7 +69,7 @@
 @iconColor: @tertiaryColor;
 
 /* Content */
-@contentDivider: @borderWidth solid @internalBorderColor;
+@contentDivider: 0;
 @contentMargin: 0em;
 @contentBackground: none;
 @contentPadding: 1em 1em;
@@ -84,11 +84,13 @@
 @headerMargin: -@em-space-2 -@em-space-1 -@em-space-1 -@em-space-1;
 @headerFontWeight: @bold;
 @headerFontSize: 1.125rem;
+@iconCardHeaderFontSize: clamp(@font-size-1, @font-size-2, 18px);
 
 @headerColor: inherit;
 @headerLinkDisplay: block;
 
 @headerPadding: @em-space-1;
+@headerOnImagePadding: 0;
 @headerLineHeightOffset: -(@headerPadding * 2);
 
 /* Metadata */
@@ -270,8 +272,8 @@
         Image with title
 *******************************/
 @imageTitleColor: @white;
-@imageTitleFontSize: @h2;
-@imageTitleMobileFontSize: @mobileH1;
+@imageTitleFontSize: clamp(@font-size-3, @h2, 32px);
+@imageTitleMobileFontSize: clamp(@font-size-2, @mobileH1, 30px);
 @imageTitleFontWeight: @font-weight-7;
 @imageTitleLineHeight: @font-lineheight-0;
 @imageTitlePadding: @rem-space-6;
@@ -281,6 +283,7 @@
           Rounded Card
 *******************************/
 /* Global */
+@roundedCardPadding              : @rem-space-4 0;
 @roundedImageBorderRadius        : @circularRadius;
 @roundedContentTitleMarginBottom : @rem-space-2;
 @roundedContentTitleTextAlign    : left;
@@ -341,7 +344,7 @@
 @carouselButtonIconFontSize: 3.125rem;
 @carouselButtonIconOpacity: 1;
 @carouselButtonDistance: -3.5rem;
-@carouselButtonPaddingTop: @rem-space-4;
+@carouselButtonPaddingTop: 0;
 
 /* Dots */
 @carouselDotsFontSize: 0.75rem;
@@ -366,3 +369,10 @@
 @tabletTeaserCardPaddingInline: @rem-space-2;
 @tabletTeaserCardMinWidth: 100%;
 
+
+/*******************************
+    Image Card items grid
+*******************************/
+@imageCardItemsGap: 1.5rem;
+@imageCardItemsGridMin: 275px;
+@imageCardItemsGridMax: auto;