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

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

@@ -7,15 +7,19 @@
 .ui.card > .extra {
   font-size: @extraLinkFontSize;
   word-break: @extraLinkWordBreak;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: var(--text-align, @extraJustifyContent);
 }
 
 /* Cards must have same height */
 .ui.card {
   height: 100%;
+  text-align: var(--text-align, @cardTextAlign);
 }
 
-.ui.cards > .card > .image,
-.ui.card > .image {
+.ui.cards > .card:not(.rounded) > .image,
+.ui.card:not(.rounded) > .image {
   overflow: @cardImageOverflow;
   height: @cardImageHeight;
 
@@ -28,9 +32,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;
 }
 
@@ -41,7 +45,8 @@
 
 .ui.card .meta {
   display: flex;
-  justify-content: space-between;
+  justify-content: var(--justify-content, @metaJustifyContent);
+  width: 100%;
 }
 
 
@@ -55,7 +60,7 @@
     margin-bottom: @rem-space-4;
 }
 
-.ui.card .extra.content a {
+.ui.card .extra.content a:not(.ui) {
   font-weight: @contentLinkFontWeight;
 
   &:hover {
@@ -89,9 +94,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 +110,7 @@
 }
 
 .ui.card.primary > .content > .meta,
-.ui.card.primary > .content > .meta a {
+.ui.card.primary > .content > .meta a:not(.ui) {
   color: @primaryMetaColor;
 }
 
@@ -115,8 +120,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 +140,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 +160,7 @@
 }
 
 .ui.card.secondary > .content > .meta,
-.ui.card.secondary > .content > .meta a {
+.ui.card.secondary > .content > .meta a:not(.ui) {
   color: @secondaryMetaColor;
 }
 
@@ -165,8 +170,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 +190,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 +210,7 @@
 }
 
 .ui.card.tertiary > .content > .meta,
-.ui.card.tertiary > .content > .meta a {
+.ui.card.tertiary > .content > .meta a:not(.ui) {
   color: @tertiaryMetaColor;
 }
 
@@ -215,8 +220,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 +239,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 +294,7 @@
     background-color: @publicationCardDescriptionColor;
 
     .meta,
-    .meta a {
+    .meta a:not(.ui) {
       color: @publicationCardtextColor;
       font-size: @cardMetaFontSize;
       font-weight: @cardMetaTagFontWeight;
@@ -408,6 +414,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 +428,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

@@ -49,6 +49,8 @@
        Content
 --------------------*/
 
+@cardTextAlign: left;
+
 
 /* Image */
 @cardImageHeight: 200px;
@@ -84,6 +86,7 @@
 @headerColor: @tertiaryColor;
 
 /* Metadata */
+@metaJustifyContent: space-between;
 @metaFontSize: @relativeMedium;
 @metaSpacing: 0.3em;
 @metaColor: @tertiaryColor;
@@ -135,6 +138,7 @@
 /* Additional Content */
 @extraDivider: none;
 @extraBackground: none;
+@extraJustifyContent: right;
 @extraPosition: static;
 @extraWidth: auto;
 @extraTop: 0em;
@@ -274,10 +278,12 @@
 /* Global */
 @roundedImageBorderRadius        : @circularRadius;
 @roundedContentTitleMarginBottom : @rem-space-2;
+@roundedContentTitleTextAlign    : left;
 @roundedContentTitleFontWeight   : @bold;
 @roundedContentTitleFontSize     : @font-size-3;
-@roundedImageHeight           : 173px;
-@roundedImageWidth            : 173px;
+@roundedImageJustifyContent      : center;
+@roundedImageHeight           : 176px;
+@roundedImageWidth            : 176px;
 @roundedMetadataFontSize      : @font-size-1;
 @roundedMetadataFontWeight    : @normal;
 

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

@@ -4,16 +4,54 @@
 
 .ui.inverted.statistics,
 .ui.inverted.statistic {
-  background: @statisticInvertedBackground;
+  background: @invertedBackground;
 }
 
 /* Full width statistics for mobile */
 .ui.statistic {
   width: @mobileStatisticWidth;
+  align-items: center;
 }
 
-@media only screen and (min-width: @mobileBreakpoint) {
+/* Custom statistic variations & text wrap */
+.ui.statistics .ui.statistic {
+  max-width: min-content;
+  .value,
+  .label,
+  .slate {
+    max-width: fit-content;
+  }
+}
+
+.ui.statistics:not(.inverted) .ui.statistic {
+  .value,
+  .label,
+  .slate {
+    min-width: @statisticContentMinWidth;
+    &.primary { color: @primaryColor; }
+    &.secondary { color: @secondaryColor; }
+    &.tertiary { color: @tertiaryColor; }
+  }
+}
+
+.ui.statistics.inverted > a {
+  color: @white;
+}
+
+.ui.horizontal.statistics .statistic > .slate,
+.ui.horizontal.statistic > .slate {
+  margin: 0em 0em 0em @horizontalLabelDistance;
+}
+
+@media only screen and (min-width: @tabletBreakpoint) {
   .ui.statistic {
     width: @tabletStatisticWidth;
   }
 }
+
+/* No horizontal statistic on mobile screens */
+@media only screen and (max-width: @largestMobileScreen) {
+  .ui.statistics.horizontal .ui.statistic {
+    flex-direction: column;
+  }
+}

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

@@ -23,13 +23,15 @@
 @groupMargin: @verticalMargin -@horizontalSpacing -@rowSpacing;
 
 /* Group Element */
-@elementMargin: 0em @horizontalSpacing @rowSpacing;
+@elementMargin: @rowSpacing @horizontalSpacing @rowSpacing;
 @elementMaxWidth: @maxWidth;
 
 /*-------------------
        Content
 --------------------*/
 
+@statisticContentMinWidth : @size-11;
+
 /* Value */
 @valueFont: @pageFont;
 @valueFontWeight: @normal;
@@ -45,7 +47,7 @@
 @labelFontWeight: @bold;
 @labelColor: @primaryColor;
 @labelLineHeight: @relativeLarge;
-@labelTextTransform: uppercase;
+@labelTextTransform: none;
 
 /* Text */
 @textValueLineHeight: 1em;
@@ -74,6 +76,7 @@
 /* Inverted */
 @invertedValueColor: @white;
 @invertedLabelColor: @invertedTextColor;
+@invertedBackground: transparent;
 
 /* Item Width */
 @itemGroupMargin: 0em 0em -@rowSpacing;