@eeacms/volto-eea-design-system 1.18.3 → 1.20.0

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

@@ -5,19 +5,19 @@
 /* Avoid long links from spilling outside of card body area */
 .ui.cards > .card > .extra,
 .ui.card > .extra {
-  font-size: @extraLinkFontSize;
-  word-break: @extraLinkWordBreak;
   display: flex;
   flex-wrap: wrap;
   justify-content: var(--text-align, @extraJustifyContent);
+  font-size: @extraLinkFontSize;
+  word-break: @extraLinkWordBreak;
 }
 
 /* Cards must have same height */
 .ui.card {
   height: 100%;
-  text-align: var(--text-align, @cardTextAlign);
   background-color: var(--card-background-color, @background);
   color: var(--card-text-color, @cardColor);
+  text-align: var(--text-align, @cardTextAlign);
 }
 
 .card .meta .date {
@@ -35,32 +35,38 @@
   }
 }
 
-.ui.card img, img.ui.image {
+.ui.card img,
+img.ui.image {
   object-fit: var(--image-object-fit, @imageObjectFit);
   object-position: var(--image-object-position, @imageObjectPosition);
 }
 
-
 .ui.cards > .card > .content > *:not(:last-child),
 .ui.card > .content > *:not(:last-child) {
   margin-bottom: @cardContentMarginBottom;
 }
 
+.ui.card .event-date {
+  display: @eventDateDisplay;
+  flex-direction: @eventDateFlexDirection;
+  align-items: @eventDateAlign;
+}
+
 .ui.card .meta {
   display: flex;
-  justify-content: var(--justify-content, @metaJustifyContent);
   width: 100%;
+  justify-content: var(--justify-content, @metaJustifyContent);
 }
 
-
 .ui.card .meta > .category {
   font-size: @metaFontSize;
 }
 
 // add bottom margin also when meta isn't inside .content
 //
-.ui.cards > .card .meta, .ui.card .meta {
-    margin-bottom: @rem-space-4;
+.ui.cards > .card .meta,
+.ui.card .meta {
+  margin-bottom: @rem-space-4;
 }
 
 .ui.card .extra.content a:not(.ui) {
@@ -103,7 +109,7 @@
 *******************************/
 .card.has--theme--secondary,
 .card.secondary {
-  --card-background-color:  @secondaryCardBackground;
+  --card-background-color: @secondaryCardBackground;
   --card-text-color: @secondaryCardColor;
 }
 /* Inverted */
@@ -118,14 +124,14 @@
 *******************************/
 .card.has--theme--tertiary,
 .card.tertiary {
-  --card-background-color:  @tertiaryCardBackground;
+  --card-background-color: @tertiaryCardBackground;
   --card-text-color: @tertiaryCardColor;
 }
 /* Inverted */
 .card.has--theme--tertiary.has--inverted--true,
 .card.tertiary.inverted {
-  --card-background-color:  @invertedTertiaryCardBackgroundColor;
-  --card-text-color:  @invertedTertiaryCardColor;
+  --card-background-color: @invertedTertiaryCardBackgroundColor;
+  --card-text-color: @invertedTertiaryCardColor;
 }
 
 /*******************************
@@ -139,6 +145,7 @@
   --card-image-width: @roundedImageWidth;
   --card-image-height: @roundedImageHeight;
 }
+
 .ui.card.rounded {
   padding: @roundedCardPadding;
   border: none;
@@ -146,7 +153,6 @@
   .image {
     display: flex;
     justify-content: @roundedImageJustifyContent;
-
   }
 
   img {
@@ -267,21 +273,20 @@
   background: transparent;
 }
 
-
 .card .gradient {
-  display: flex;
-  align-items: flex-end;
   position: absolute;
   bottom: 0;
+  display: flex;
   width: 100%;
   height: 100%;
+  align-items: flex-end;
   padding: @imageTitlePadding;
   .image-overlay-gradient();
 }
 
 .gradient .header {
-  font-size: var(--image-header-font-size, @imageTitleMobileFontSize);
   color: @imageTitleColor;
+  font-size: var(--image-header-font-size, @imageTitleMobileFontSize);
   font-weight: @imageTitleFontWeight;
   line-height: @imageTitleLineHeight;
 }
@@ -290,6 +295,7 @@
   .card .gradient {
     padding-block: @imageTitlePaddingBlock;
   }
+
   .gradient .header {
     --image-header-font-size: @imageTitleFontSize;
   }
@@ -329,7 +335,9 @@
   padding: @carouselButtonPadding;
   margin: @carouselButtonMargin;
 
-  .active, &:focus, &:hover {
+  .active,
+  &:focus,
+  &:hover {
     background: transparent;
   }
 
@@ -338,16 +346,17 @@
   }
 
   .icon {
+    width: auto;
+    padding-top: @carouselButtonPaddingTop;
     color: @carouselButtonIconColor;
     font-size: @carouselButtonIconFontSize;
     opacity: @carouselButtonIconOpacity;
-    padding-top: @carouselButtonPaddingTop;
-    width: auto;
   }
 }
 
 .cards-carousel .slider-arrow {
   position: absolute;
+  z-index: 1; // make arrows clickable even on events page with right column
   top: 50%;
   bottom: auto;
   padding: 0;
@@ -356,7 +365,6 @@
   cursor: pointer;
   outline: none;
   transform: translate(0, -50%);
-  z-index: 1; // make arrows clickable even on events page with right column
 }
 
 .cards-carousel .slider-arrow.slick-disabled {
@@ -383,21 +391,22 @@
 .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;
-  border-radius: @carouselDotsBorderRadius;
-  opacity: @carouselDotsOpacity;
-  width: @mobileCarouselDotsWidth;
-  height: @mobileCarouselDotsHeight;
   position: absolute;
   top: 0;
   left: 0;
+  width: @mobileCarouselDotsWidth;
+  height: @mobileCarouselDotsHeight;
+  border: @carouselDotsBorder;
+  background-color: @carouselDotsBackgroundColor;
+  border-radius: @carouselDotsBorderRadius;
+  color: transparent;
   content: '•';
-  text-align: center;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  opacity: @carouselDotsOpacity;
+  text-align: center;
 }
 
 .cards-carousel .slick-dots li.slick-active .slick-dot-icon:before {
@@ -416,7 +425,6 @@
     width: @mobileCarouselDotsButtonWidth;
     height: @mobileCarouselDotsButtonHeight;
   }
-
 }
 
 /*******************************
@@ -425,13 +433,16 @@
 
 .ui.card.icon {
   padding-top: @iconCardPaddingTop;
+
   .content {
     border-top: none;
+
     .header {
-      word-break: break-word;
       font-size: @iconCardHeaderFontSize;
+      word-break: break-word;
     }
   }
+
   .icon {
     margin: auto;
   }
@@ -451,8 +462,8 @@
 @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
   .ui.grid > .column.grid-block-teaser,
   .ui.grid > .row > .column.grid-block-teaser {
-    padding-left: @tabletTeaserCardPaddingInline;
     padding-right: @tabletTeaserCardPaddingInline;
+    padding-left: @tabletTeaserCardPaddingInline;
   }
 
   .grid-block-teaser .ui.card {
@@ -477,7 +488,7 @@
 
 // Meta align fix
 .ui.card.u-card .meta:after {
-    content: none;
+  content: none;
 }
 
 /*******************************
@@ -486,5 +497,8 @@
 .imageCard-items {
   display: grid;
   gap: @imageCardItemsGap;
-  grid-template-columns: repeat(auto-fit,minmax(@imageCardItemsGridMin, @imageCardItemsGridMax));
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(@imageCardItemsGridMin, @imageCardItemsGridMax)
+  );
 }

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

@@ -128,6 +128,11 @@
 @descriptionDistance: 0;
 @descriptionColor: inherit;
 
+/* Dates */
+@eventDateDisplay: flex;
+@eventDateFlexDirection: row;
+@eventDateAlign: center;
+
 /* Content Image */
 @contentImageWidth: '';
 @contentImageVerticalAlign: middle;

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

@@ -57,14 +57,14 @@
       }
 
       .description {
-        color: @defaultItemColor;
-        font-size: @mobileDefaultItemDescriptionFontSize;
-        font-weight: @defaultItemDescriptionFontWeight;
         display: -webkit-box;
         overflow: hidden;
         -webkit-box-orient: vertical;
-        text-overflow: ellipsis;
+        color: @defaultItemColor;
+        font-size: @mobileDefaultItemDescriptionFontSize;
+        font-weight: @defaultItemDescriptionFontWeight;
         -webkit-line-clamp: @defaultItemDescriptionLineClamp;
+        text-overflow: ellipsis;
       }
     }
   }
@@ -149,6 +149,7 @@
 // Stackable items that have image above content
 .ui.items.row .item.stackable {
   display: grid;
+  justify-content: center; // center text with icon
 
   .image,
   i.icon {
@@ -156,8 +157,8 @@
   }
 
   .content {
-    padding-left: @stackableContentPaddingLeft;
     padding-top: @stackableContentPaddingTop;
+    padding-left: @stackableContentPaddingLeft;
   }
 }
 
@@ -172,28 +173,27 @@
   }
 }
 
-.flex-items-wrapper.items-2-columns .flex-item {
+.flex-items-wrapper .flex-item {
   width: var(--flex-item-width, 100%);
 }
 @media only screen and (min-width: @tabletBreakpoint) {
-  .flex-items-wrapper.items-2-columns  .flex-item {
+  .flex-items-wrapper.items-2-columns .flex-item {
     --flex-item-width: calc(@width / 2 - 1%);
   }
 
   .flex-items-wrapper.items-3-columns .flex-item {
-    --flex-item-width: calc(@width / 3);
+    --flex-item-width: calc(@width / 3 - 1%);
   }
 
   .flex-items-wrapper.items-4-columns .flex-item {
-    --flex-item-width: calc(@width / 4);
+    --flex-item-width: calc(@width / 4 - 1%);
   }
 
   .flex-items-wrapper.items-5-columns .flex-item {
-    --flex-item-width: calc(@width / 5);
+    --flex-item-width: calc(@width / 5 - 1%);
   }
 }
 
-
 @media only screen and (max-width: @largestMobileScreen) {
   .ui.items.row > .item {
     flex-direction: row;
@@ -224,6 +224,7 @@
       }
     }
   }
+
   .ui.items.row > .item {
     margin: @tabletRowItemMargin;
   }
@@ -253,6 +254,7 @@
       }
     }
   }
+
   .ui.items.row > .item {
     margin: @desktopRowItemMargin;
   }
@@ -269,8 +271,7 @@
 
 .ui.items > .item {
   &.primary,
-  > .icon.primary
-  {
+  > .icon.primary {
     color: @primaryColor;
   }
 
@@ -278,6 +279,7 @@
   > .icon.secondary {
     color: @secondaryColor;
   }
+
   &.tertiary,
   > .icon.tertiary {
     color: @tertiaryColor;

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

@@ -16,6 +16,7 @@
 /* Custom statistic variations & text wrap */
 .ui.statistics .ui.statistic {
   max-width: min-content;
+
   .value,
   .label,
   .slate {
@@ -28,9 +29,18 @@
   .label,
   .slate {
     min-width: @statisticContentMinWidth;
-    &.primary { color: @primaryColor; }
-    &.secondary { color: @secondaryColor; }
-    &.tertiary { color: @tertiaryColor; }
+
+    &.primary {
+      color: @primaryColor;
+    }
+
+    &.secondary {
+      color: @secondaryColor;
+    }
+
+    &.tertiary {
+      color: @tertiaryColor;
+    }
   }
 }