@eeacms/volto-eea-design-system 0.7.3 → 0.8.0

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

@@ -27,6 +27,24 @@
   }
 }
 
+.ui.cards > .card > i.icon,
+.ui.cards > .card > a > i.icon,
+.ui.card > i.icon,
+.ui.card > a > i.icon {
+  color: @iconColor;
+}
+
+.ui.cards > .card > .content > *:not(:last-child),
+.ui.card > .content > *:not(:last-child) {
+  margin-bottom: @cardContentMarginBottom;
+}
+
+.ui.card .meta {
+  display: flex;
+  justify-content: space-between;
+}
+
+
 .ui.card .meta > .category {
   font-size: @metaFontSize;
 }
@@ -61,7 +79,8 @@
             Primary
 *******************************/
 
-.ui.card.primary {
+.ui.card.primary:not(.inverted),
+.ui.card.primary:not(.inverted) .image {
   background: @primaryBackground;
 }
 
@@ -69,6 +88,10 @@
   color: @primaryHeaderColor;
 }
 
+.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 > .content > .description {
   color: @primaryDescriptionColor;
 }
@@ -81,18 +104,40 @@
   }
 }
 
-.ui.card.primary > .content > .meta {
+.ui.card.primary > .content > .meta,
+.ui.card.primary > .content > .meta a {
   color: @primaryMetaColor;
 }
 
+/* Inverted */
+.ui.card.primary.inverted > i.icon,
+.ui.card.primary.inverted > .content * {
+  color: @invertedPrimaryContentColor;
+}
+
+.ui.card.primary.inverted > a > i.icon,
+.ui.card.primary.inverted > .content a,
+.ui.card.primary.inverted > .extra.content a:not(.ui) {
+  color: @invertedPrimaryContentColor;
+
+  &:hover {
+    color: @invertedPrimaryColorHover;
+  }
+}
+
 /*******************************
             Secondary
 *******************************/
 
-.ui.card.secondary {
+.ui.card.secondary:not(.inverted),
+.ui.card.secondary:not(.inverted) .image {
   background: @secondaryBackground;
 }
 
+.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 > .content > .header {
   color: @secondaryHeaderColor;
 }
@@ -109,18 +154,40 @@
   }
 }
 
-.ui.card.secondary > .content > .meta {
+.ui.card.secondary > .content > .meta,
+.ui.card.secondary > .content > .meta a {
   color: @secondaryMetaColor;
 }
 
+/* Inverted */
+.ui.card.secondary.inverted > i.icon,
+.ui.card.secondary.inverted > .content * {
+  color: @invertedSecondaryContentColor;
+}
+
+.ui.card.secondary.inverted > a > i.icon,
+.ui.card.secondary.inverted > .content a,
+.ui.card.secondary.inverted > .extra.content a:not(.ui) {
+  color: @invertedSecondaryContentColor;
+
+  &:hover {
+    color: @invertedSecondaryColorHover;
+  }
+}
+
 /*******************************
             Tertiary
 *******************************/
 
-.ui.card.tertiary {
+.ui.card.tertiary:not(.inverted),
+.ui.card.tertiary:not(.inverted) .image {
   background: @tertiaryBackground;
 }
 
+.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 > .content > .header {
   color: @tertiaryHeaderColor;
 }
@@ -137,10 +204,27 @@
   }
 }
 
-.ui.card.tertiary > .content > .meta {
+.ui.card.tertiary > .content > .meta,
+.ui.card.tertiary > .content > .meta a {
   color: @tertiaryMetaColor;
 }
 
+/* Inverted */
+.ui.card.tertiary.inverted > i.icon,
+.ui.card.tertiary.inverted > .content * {
+  color: @invertedTertiaryContentColor;
+}
+
+.ui.card.tertiary.inverted > a > i.icon,
+.ui.card.tertiary.inverted > .content a,
+.ui.card.tertiary.inverted > .extra.content a:not(.ui) {
+  color: @invertedTertiaryContentColor;
+
+  &:hover {
+    color: @invertedTertiaryColorHover;
+  }
+}
+
 /*******************************
           Rounded Card
 *******************************/
@@ -151,18 +235,23 @@
 }
 
 .ui.card.rounded {
-  width: @roundedWidth;
+  padding-top: @iconCardPaddingTop;
   border: none;
 
-  .content {
+  .image {
+    display: flex;
     justify-content: center;
-    border-top: none;
 
-    .image {
-      display: flex;
-      justify-content: center;
-      background-color: @white;
+    img {
+      width: @roundedImageWidth;
+      height: @roundedImageHeight;
+      border-radius: @roundedImageBorderRadius;
     }
+  }
+
+  .content {
+    justify-content: center;
+    border-top: none;
 
     .header {
       margin-bottom: @roundedContentTitleMarginBottom;
@@ -173,53 +262,12 @@
 
     .description {
       text-align: center;
+      font-size: @roundedMetadataFontSize;
+      font-weight: @roundedMetadataFontWeight;
     }
   }
 }
 
-.ui.card.rounded.big {
-  .image {
-    display: flex;
-    justify-content: center;
-    background-color: @white;
-
-    img {
-      width: @roundedBigImageWidth;
-      height: @roundedBigImageHeight;
-      border-radius: 50%;
-    }
-  }
-
-  .description {
-    font-size: @roundedBigMetadataFontSize;
-    font-weight: @roundedBigMetadataFontWeight;
-  }
-}
-
-.ui.rounded.small {
-  .image {
-    display: flex;
-    justify-content: center;
-    background-color: @white;
-
-    img {
-      display: flex;
-      width: @roundedSmallImageWidth;
-      height: @roundedSmallImageHeight;
-      border-radius: @roundedImageBorderRadius;
-    }
-  }
-
-  .header {
-    color: @roundedSmallTitleColor;
-  }
-
-  .description {
-    font-size: @roundedSmallMetadataFontSize;
-    font-weight: @roundedSmallMetadataFontWeight;
-  }
-}
-
 /*******************************
         Publication Card
 *******************************/
@@ -239,7 +287,8 @@
     padding: @cardContentPadding;
     background-color: @publicationCardDescriptionColor;
 
-    .meta {
+    .meta,
+    .meta a {
       color: @publicationCardtextColor;
       font-size: @cardMetaFontSize;
       font-weight: @cardMetaTagFontWeight;
@@ -306,35 +355,14 @@
 .cards-carousel {
   position: relative;
 
-  .ui.button.icon.slider-arrow {
-    padding: @carouselButtonPadding;
-    display: none;
-
-    .active, &:focus, &:hover {
-      background: transparent;
-    }
-
-    .icon {
-      color: @carouselButtonIconColor;
-      font-size: @carouselButtonIconFontSize;
-    }
-  }
-
-  .slick-arrow {
-    display: block !important;
-  }
-
-  .slick-prev,
-  .slick-next {
-    display: none !important;
-  }
-
   .slick-list {
-    margin: 0 -0.75em !important;
+    margin: @slickListMargin;
   }
 
   .slick-track {
     display: flex;
+    gap: @slickTrackGap;
+    margin: @slickTrackMargin;
   }
 
   .slick-slide {
@@ -342,69 +370,97 @@
     height: auto;
     flex: 1;
     flex-direction: column;
-    padding: 15px 0.75em !important;
 
     > div {
       height: 100%;
     }
   }
+}
 
-  .slider-arrow {
-    position: absolute;
-    top: 50%;
-    bottom: auto;
-    display: block;
-    padding: 0;
-    border: none;
+/* Carousel arrows */
+.cards-carousel .ui.button.icon.slider-arrow {
+  padding: @carouselButtonPadding;
+
+  .active, &:focus, &:hover {
     background: transparent;
-    cursor: pointer;
-    outline: none;
-    transform: translate(0, -50%);
   }
 
-  .prev-arrow {
-    right: auto;
-    left: @carouselButtonDistance;
+  &:focus-visible {
+    outline: auto;
   }
 
-  .next-arrow {
-    right: @carouselButtonDistance;
-    left: auto;
+  .icon {
+    color: @carouselButtonIconColor;
+    font-size: @carouselButtonIconFontSize;
+    opacity: @carouselButtonIconOpacity;
+    padding-top: @carouselButtonPaddingTop;
+    width: auto;
   }
+}
 
-  .slick-dots {
-    position: relative;
-    bottom: unset;
-  }
+.cards-carousel .slider-arrow {
+  position: absolute;
+  top: 50%;
+  bottom: auto;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  outline: none;
+  transform: translate(0, -50%);
+}
 
-  .slick-dots li button:before {
-    background-color: @carouselDotsBackgroundColor;
-    color: transparent;
-    border: @carouselDotsBorder;
-    border-radius: @carouselDotsBorderRadius;
-    opacity: @carouselDotsOpacity;
-    width: @mobileCarouselDotsWidth;
-    height: @mobileCarouselDotsHeight;
-  }
+.cards-carousel .prev-arrow {
+  right: auto;
+  left: @carouselButtonDistance;
+}
 
-  .slick-dots li.slick-active button:before {
-    background-color: @carouselDotsActiveBackgroundColor;
-    color: transparent;
+.cards-carousel .next-arrow {
+  right: @carouselButtonDistance;
+  left: auto;
+} 
 
-  }
+/* Custom carousel pagination bullets */
+.cards-carousel .slick-dots li button:before {
+  background-color: @carouselDotsBackgroundColor;
+  color: transparent;
+  border: @carouselDotsBorder;
+  border-radius: @carouselDotsBorderRadius;
+  opacity: @carouselDotsOpacity;
+  width: @mobileCarouselDotsWidth;
+  height: @mobileCarouselDotsHeight;
+}
+
+.cards-carousel .slick-dots li.slick-active button:before {
+  background-color: @carouselDotsActiveBackgroundColor;
+  color: transparent;  
 }
 
+.slick-dots li button:focus-visible {
+  outline: black;
+  outline-style: auto;
+}
 
 @media only screen and (min-width: @computerBreakpoint) {
-  .cards-carousel {
+  .cards-carousel .slick-dots li button:before {
+    width: inherit;
+    height: inherit;
+  }
+}
 
-    .ui.button.icon.slider-arrow {
-      display: block;
-    }
+/*******************************
+          Icon Card
+*******************************/
 
-    .slick-dots li button:before {
-      width: inherit;
-      height: inherit;
+.ui.card.icon {
+  padding-top: @iconCardPaddingTop;
+  .content {
+    border-top: none;
+    .header {
+      word-break: break-word;
     }
   }
-}
+  .icon {
+    margin: auto;
+  }
+}

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

@@ -53,7 +53,7 @@
 /* Image */
 @cardImageHeight: 200px;
 @cardImageOverflow: hidden;
-@imageBackground: @transparentBlack;
+@imageBackground: transparent;
 @imagePadding: 0em;
 @imageBorder: none;
 @imageBoxShadow: none;
@@ -62,6 +62,7 @@
 @imageWidth: 100%;
 @imageObjectFit: cover;
 @imageObjectPosition: center;
+@iconColor: @tertiaryColor;
 
 /* Content */
 @contentDivider: @borderWidth solid @internalBorderColor;
@@ -72,6 +73,7 @@
 @contentBorderRadius: 0em;
 @contentBoxShadow: none;
 @contentBorder: none;
+@cardContentMarginBottom: @rem-space-4;
 
 
 /* Header */
@@ -79,7 +81,7 @@
 @headerFontWeight: @bold;
 @headerFontSize: 1.125rem;
 @headerLineHeightOffset: -(@lineHeight - 1em) / 2;
-@headerColor: inherit;
+@headerColor: @tertiaryColor;
 
 /* Metadata */
 @metaFontSize: @relativeMedium;
@@ -87,6 +89,7 @@
 @metaColor: @tertiaryColor;
 
 /* Icons */
+@iconCardPaddingTop: @rem-space-4;
 @actionOpacity: 0.75;
 @actionHoverOpacity: 1;
 @actionTransition: color @defaultDuration @defaultEasing;
@@ -107,12 +110,12 @@
 @headerLinkColor: @headerColor;
 @headerLinkHoverColor: @linkHoverColor;
 
-@metaLinkColor: @lightTextColor;
-@metaLinkHoverColor: @textColor;
+@metaLinkColor: @deepBlue;
+@metaLinkHoverColor: @deepBlue;
 
 /* Description */
-@descriptionDistance: 0.5em;
-@descriptionColor: inherit;
+@descriptionDistance: 0;
+@descriptionColor: @tertiaryColor;
 
 /* Content Image */
 @contentImageWidth: '';
@@ -238,6 +241,8 @@
 @primaryExtraLinkColor: @white;
 @primaryExtraLinkHoverColor: @white;
 @primaryMetaColor: @white;
+@invertedPrimaryContentColor: @primaryColor;
+@invertedPrimaryColorHover: @primaryColorHover;
 
 /*******************************
             Secondary
@@ -248,44 +253,33 @@
 @secondaryExtraLinkColor: @white;
 @secondaryExtraLinkHoverColor: @white;
 @secondaryMetaColor: @white;
+@invertedSecondaryContentColor: @secondaryColor;
+@invertedSecondaryColorHover: @secondaryColorHover;
 
 /*******************************
             Tertiary
 *******************************/
-@tertiaryBackground: #3D5265;
+@tertiaryBackground: @tertiaryColor;
 @tertiaryHeaderColor: @white;
 @tertiaryDescriptionColor: @white;
 @tertiaryExtraLinkColor: @white;
 @tertiaryExtraLinkHoverColor: @white;
 @tertiaryMetaColor: @white;
+@invertedTertiaryContentColor: @tertiaryColor;
+@invertedTertiaryColorHover: @tertiaryColorHover;
 
 /*******************************
           Rounded Card
 *******************************/
 /* Global */
-@roundedWidth                    : 100%;
-@roundedWrapperWidth             : 100%;
-@roundedWrapperGap               : @largeGap;
-@roundedContentWrapperWidth      : 100%;
 @roundedImageBorderRadius        : @circularRadius;
-@roundedContentTitleMarginBottom : 0;
-@roundedImageWrapperWidth        : 100%;
-@roundedImageBackgroundSize      : cover;
+@roundedContentTitleMarginBottom : @rem-space-2;
 @roundedContentTitleFontWeight   : @bold;
-@roundedContentTitleFontSize     : 1.25rem;
-
-/* Big */
-@roundedBigImageHeight           : 173px;
-@roundedBigImageWidth            : 173px;
-@roundedBigMetadataFontSize      : 1.25rem;
-@roundedBigMetadataFontWeight    : @normal;
-
-/* Small */
-@roundedSmallImageHeight         : 150px;
-@roundedSmallImageWidth          : 150px;
-@roundedSmallTitleColor          : @secondaryColor;
-@roundedSmallMetadataFontSize    : 1rem;
-@roundedSmallMetadataFontWeight  : 300;
+@roundedContentTitleFontSize     : @font-size-3;
+@roundedImageHeight           : 173px;
+@roundedImageWidth            : 173px;
+@roundedMetadataFontSize      : @font-size-1;
+@roundedMetadataFontWeight    : @normal;
 
 /*******************************
         Publication Card
@@ -307,8 +301,8 @@
 @cardContentPadding: 20px;
 @cardContentMaxHeight: 135px;
 @mobileCardContentHeight: 135px;
-@tabletCardContentMaxHeight: 110px;
-@tabletCardContentHeight: 110px;
+@tabletCardContentMaxHeight: 120px;
+@tabletCardContentHeight: 120px;
 
 /* Description */
 @cardDescriptionTextLineClampMobile: 3;
@@ -327,14 +321,15 @@
 /*  Title */
 @carouselTitleFontWeight: 700;
 @carouselTitleMargin: 0;
-@carouselTitleColor: @deepBlue;
+@carouselTitleColor: @tertiaryColor;
 
 /* Button */
 @carouselButtonPadding: 0;
-@carouselButtonIconColor: @black;
+@carouselButtonIconColor: @tertiaryColor;
 @carouselButtonIconFontSize: 3.125rem;
+@carouselButtonIconOpacity: 1;
 @carouselButtonDistance: -3.5rem;
-
+@carouselButtonPaddingTop: @rem-space-4;
 
 /* Dots */
 @carouselDotsFontSize: 0.75rem;
@@ -346,4 +341,10 @@
 @mobileCarouselDotsWidth: 0.875rem;
 @mobileCarouselDotsHeight: 0.875rem;
 
+/* Slick wrapper */
+@slickListMargin: 0 -0.75em;
+@slickTrackGap: 1.25rem;
+@slickTrackMargin: 1rem 0;
+
+
 

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

@@ -97,12 +97,26 @@
   margin-bottom: 0;
 }
 
+// Stackable items that have image above content
+.ui.items.row .item.stackable {
+  display: grid;
+
+  .image {
+    margin: auto;
+  }
+
+  .content {
+    padding-left: @stackableContentPaddingLeft;
+    padding-top: @stackableContentPaddingTop;
+  }
+}
+
 @media only screen and (max-width: @largestMobileScreen) {
   .ui.items.row > .item {
     flex-direction: row;
   }
 
-  .ui.items.row > .item > .image + .content {
+  .ui.items.row > .item:not(.stackable) > .image + .content {
     padding: 0em 0em 0em @mobileContentImageDistance;
   }
 }

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

@@ -155,10 +155,13 @@
 @dividedFirstLastMargin: 0em;
 @dividedFirstLastPadding: 0em;
 
-
-/* Unstackable */
+/* Unstackable items */
 @unstackableMobileImageWidth: 125px;
 
+/* Stackable item */
+@stackableContentPaddingTop: @rem-space-4;
+@stackableContentPaddingLeft: 0;
+
 /* Row */
 @mobileRowItemMargin  : 1rem 0;
 @tabletRowItemMargin  : 1.5rem 0;