refactor(card): add styles for card variations

eea · Apr 15, 2022 · 7407bd3 · 7407bd3
1 parent e16d05b
commit 7407bd3
Show file tree

Hide file tree

Showing 2 changed files with 213 additions and 35 deletions.
diff --git a/theme/themes/eea/views/card.overrides b/theme/themes/eea/views/card.overrides
@@ -2,31 +2,6 @@
          Theme Overrides
 *******************************/
 
-/* Inverted Card */
-.ui.card.inverted {
-  background: @invertedBackground;
-
-  > .content > .header {
-    color: @invertedHeaderColor;
-  }
-
-  > .content > .description {
-    color: @invertedDescriptionColor;
-  }
-
-  > .extra.content a:not(.ui) {
-    color: @invertedExtraLinkColor;
-
-    &:hover {
-      color: @invertedExtraLinkHoverColor;
-    }
-  }
-
-  > .content > .meta {
-    color: @invertedMetaColor;
-  }
-}
-
 /* Avoid long links from spilling outside of card body area */
 .ui.cards > .card > .extra,
 .ui.card > .extra {
@@ -145,3 +120,150 @@
     font-weight: @avatarSmallMetadataFontWeight;
   }
 }
+
+/*******************************
+            Primary
+*******************************/
+
+.ui.card.primary {
+  background: @primaryBackground;
+}
+
+.ui.card.primary > .content > .header {
+  color: @primaryHeaderColor;
+}
+
+.ui.card.primary > .content > .description {
+  color: @primaryDescriptionColor;
+}
+
+.ui.card.primary > .extra.content a:not(.ui) {
+  color: @primaryExtraLinkColor;
+
+  &:hover {
+    color: @primaryExtraLinkHoverColor;
+  }
+}
+
+.ui.card.primary > .content > .meta {
+  color: @primaryMetaColor;
+}
+
+/*******************************
+            Secondary
+*******************************/
+
+.ui.card.secondary {
+  background: @secondaryBackground;
+}
+
+.ui.card.secondary > .content > .header {
+  color: @secondaryHeaderColor;
+}
+
+.ui.card.secondary > .content > .description {
+  color: @secondaryDescriptionColor;
+}
+
+.ui.card.secondary > .extra.content a:not(.ui) {
+  color: @secondaryExtraLinkColor;
+
+  &:hover {
+    color: @secondaryExtraLinkHoverColor;
+  }
+}
+
+.ui.card.secondary > .content > .meta {
+  color: @secondaryMetaColor;
+}
+
+/*******************************
+            Tertiary
+*******************************/
+.ui.card.tertiary {
+  background: @tertiaryBackground;
+}
+
+.ui.card.tertiary > .content > .header {
+  color: @tertiaryHeaderColor;
+}
+
+.ui.card.tertiary > .content > .description {
+  color: @tertiaryDescriptionColor;
+}
+
+.ui.card.tertiary > .extra.content a:not(.ui) {
+  color: @tertiaryExtraLinkColor;
+
+  &:hover {
+    color: @tertiaryExtraLinkHoverColor;
+  }
+}
+
+.ui.card.tertiary > .content > .meta {
+  color: @tertiaryMetaColor;
+}
+
+.ui.card.publication {
+  width: @mobilePublicationCardWidth;
+  border: none;
+
+  .image {
+    height: @mobilePublicationcardImageHeight;
+    flex-grow: 1;
+  }
+
+  .content {
+    height: @mobileCardContentHeight;
+    max-height: @cardContentMaxHeight;
+    padding: @cardContentPadding;
+    background-color: @publicationCardDescriptionColor;
+
+    .meta {
+      color: @publicationCardtextColor;
+      font-size: @cardMetaFontSize;
+      font-weight: @cardMetaTagFontWeight;
+    }
+
+    .description {
+      display: -webkit-box;
+      overflow: hidden;
+      margin-top: 0;
+      -webkit-box-orient: vertical;
+      color: @publicationCardtextColor;
+      font-size: @cardDescriptionTextFontSize;
+      font-weight: @cardDescriptionTextFontWeight;
+      -webkit-line-clamp: @cardDescriptionTextLineClampMobile;
+      text-overflow: ellipsis;
+    }
+  }
+}
+
+@media only screen and (min-width: @tabletBreakpoint) {
+  .ui.card.publication {
+    width: @tabletPublicationCardWidth;
+
+    .image {
+      height: @tabletPublicationcardImageHeight;
+    }
+
+    .content {
+      height: @tabletCardContentHeight;
+      max-height: @tabletCardContentMaxHeight;
+
+      .description {
+        -webkit-line-clamp: @cardDescriptionTextLineClampTablet;
+      }
+    }
+  }
+}
+
+@media only screen and (min-width: @computerBreakpoint) {
+  .ui.card.publication {
+    width: @computerPublicationCardWidth;
+
+    .image {
+      height: @computerPublicationcardImageHeight;
+    }
+  }
+}
diff --git a/theme/themes/eea/views/card.variables b/theme/themes/eea/views/card.variables
@@ -9,14 +9,6 @@
 @cardBorder: 1px solid @midGray;
 @background: @white;
 
-/* Inverted */
-@invertedBackground: @darkCerulean;
-@invertedHeaderColor: @white;
-@invertedDescriptionColor: @white;
-@invertedExtraLinkColor: @white;
-@invertedExtraLinkHoverColor: @white;
-@invertedMetaColor: @white;
-
 /* Shadow */
 @shadowDistance: 1px;
 @shadowBoxShadow: 0px @shadowDistance 3px 0px @solidBorderColor;
@@ -240,7 +232,6 @@
 /*******************************
             Avatar
 *******************************/
-
 /* Global */
 @avatarWidth                    : 100%;
 @avatarWrapperWidth             : 100%;
@@ -264,4 +255,69 @@
 @avatarSmallImageWidth          : 150px;
 @avatarSmallTitleColor          : @secondaryColor;
 @avatarSmallMetadataFontSize    : 1rem;
-@avatarSmallMetadataFontWeight  : 300;
+@avatarSmallMetadataFontWeight  : 300;
+
+
+/*******************************
+            Primary
+*******************************/
+@primaryBackground: @primaryColor;
+@primaryHeaderColor: @white;
+@primaryDescriptionColor: @white;
+@primaryExtraLinkColor: @white;
+@primaryExtraLinkHoverColor: @white;
+@primaryMetaColor: @white;
+
+/*******************************
+            Secondary
+*******************************/
+@secondaryBackground: @secondaryColor;
+@secondaryHeaderColor: @white;
+@secondaryDescriptionColor: @white;
+@secondaryExtraLinkColor: @white;
+@secondaryExtraLinkHoverColor: @white;
+@secondaryMetaColor: @white;
+
+/*******************************
+            Tertiary
+*******************************/
+@tertiaryBackground: #3D5265;
+@tertiaryHeaderColor: @white;
+@tertiaryDescriptionColor: @white;
+@tertiaryExtraLinkColor: @white;
+@tertiaryExtraLinkHoverColor: @white;
+@tertiaryMetaColor: @white;
+
+
+/*******************************
+            Publication
+*******************************/
+@mobilePublicationCardWidth: 300px;
+@tabletPublicationCardWidth: 660px;
+@computerPublicationCardWidth: 530px;
+
+/* Image */
+@mobilePublicationcardImageHeight: 150px;
+@tabletPublicationcardImageHeight: 250px;
+@computerPublicationcardImageHeight: 160px;
+
+/* Colors */
+@publicationCardDescriptionColor: #3D5265;
+@publicationCardtextColor: @white;
+
+/*  Content */
+@cardContentPadding: 20px;
+@cardContentMaxHeight: 135px;
+@mobileCardContentHeight: 135px;
+@tabletCardContentMaxHeight: 110px;
+@tabletCardContentHeight: 110px;
+
+/* Description */
+@cardDescriptionTextLineClampMobile: 3;
+@cardDescriptionTextLineClampTablet: 2;
+@cardDescriptionTextFontSize: 16px;
+@cardDescriptionTextFontWeight: 700;
+
+/* Meta */
+@cardMetaFontSize: 12px;
+@cardMetaTagFontWeight: 400;