change(cards): added ability to change the text alignment using css v…

…ariables
eea · Sep 23, 2022 · ed532ac · ed532ac
1 parent 4a5be6e
commit ed532ac
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 3 deletions.
diff --git a/theme/themes/eea/globals/utilities.less b/theme/themes/eea/globals/utilities.less
@@ -39,6 +39,15 @@ h1, h2, h3, h4, h5, h6, p, span, .header {
 .text-right { text-align: right !important; }
 .bold { font-weight: bold !important; }
 
+.align_left {
+  --text-align: left;
+}
+
+.align_center {
+  --text-align: center;
+  --justify-content: space-evenly;
+}
+
 // Text utilities
 .bold { font-weight: @bold !important; }
 .underline { text-decoration: underline !important; }

diff --git a/theme/themes/eea/views/card.overrides b/theme/themes/eea/views/card.overrides
@@ -7,11 +7,15 @@
 .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:not(.rounded) > .image,
@@ -41,7 +45,7 @@
 
 .ui.card .meta {
   display: flex;
-  justify-content: space-between;
+  justify-content: var(--justify-content, @metaJustifyContent);
   width: 100%;
 }
 
@@ -259,11 +263,11 @@
       margin-bottom: @roundedContentTitleMarginBottom;
       font-size: @roundedContentTitleFontSize;
       font-weight: @roundedContentTitleFontWeight;
-      text-align: @roundedContentTitleTextAlign;
+      //text-align: @roundedContentTitleTextAlign;
     }
 
     .description {
-      text-align: @roundedContentTitleTextAlign;
+      //text-align: @roundedContentTitleTextAlign;
       font-size: @roundedMetadataFontSize;
       font-weight: @roundedMetadataFontWeight;
     }

diff --git a/theme/themes/eea/views/card.variables b/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;