change(cards): integration when cards also contain call to action but…

…tons

- add variables for rounded content justification
- add important rules to inverted buttons otherwise when used inside cards
  that have inverted class the color from the cards would take over the buttons
- color links from cards that do not contain .ui, in that case we would have a
  semantic ui component that might bring its own styling

theme/themes/eea/elements/button.overrides

@@ -197,7 +197,7 @@ p.ui.button {
 .ui.inverted.primary.button.active,
 .ui.inverted.primary.buttons .button:active,
 .ui.inverted.primary.button:active {
-  color: @invertedHoveredTextColor;
+  color: @invertedHoveredTextColor !important;
 }
 
 .ui.inverted.primary.buttons .button:hover,
@@ -235,7 +235,7 @@ p.ui.button {
 .ui.inverted.secondary.button.active,
 .ui.inverted.secondary.buttons .button:active,
 .ui.inverted.secondary.button:active {
-  color: @invertedHoveredTextColor;
+  color: @invertedHoveredTextColor !important;
 }
 
 .ui.inverted.secondary.buttons .button:hover,
@@ -280,7 +280,7 @@ p.ui.button {
 .ui.inverted.tertiary.buttons .button:active,
 .ui.inverted.tertiary.button:active {
   box-shadow: none !important; // button.less - L:3142
-  color: @invertedHoveredTextColor;
+  color: @invertedHoveredTextColor !important;
 }
 
 .ui.tertiary.buttons .button:hover,

theme/themes/eea/views/card.overrides

@@ -28,9 +28,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;
 }
 
@@ -55,7 +55,7 @@
     margin-bottom: @rem-space-4;
 }
 
-.ui.card .extra.content a {
+.ui.card .extra.content a:not(.ui) {
   font-weight: @contentLinkFontWeight;
 
   &:hover {
@@ -89,9 +89,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 +105,7 @@
 }
 
 .ui.card.primary > .content > .meta,
-.ui.card.primary > .content > .meta a {
+.ui.card.primary > .content > .meta a:not(.ui) {
   color: @primaryMetaColor;
 }
 
@@ -115,8 +115,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 +135,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 +155,7 @@
 }
 
 .ui.card.secondary > .content > .meta,
-.ui.card.secondary > .content > .meta a {
+.ui.card.secondary > .content > .meta a:not(.ui) {
   color: @secondaryMetaColor;
 }
 
@@ -165,8 +165,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 +185,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 +205,7 @@
 }
 
 .ui.card.tertiary > .content > .meta,
-.ui.card.tertiary > .content > .meta a {
+.ui.card.tertiary > .content > .meta a:not(.ui) {
   color: @tertiaryMetaColor;
 }
 
@@ -215,8 +215,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;
 
@@ -240,7 +240,7 @@
 
   .image {
     display: flex;
-    justify-content: center;
+    justify-content: @roundedImageJustifyContent;
 
   }
 
@@ -251,18 +251,20 @@
   }
 
   .content {
-    justify-content: center;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: @roundedContentJustifyContent;
     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;
     }
@@ -289,7 +291,7 @@
     background-color: @publicationCardDescriptionColor;
 
     .meta,
-    .meta a {
+    .meta a:not(.ui) {
       color: @publicationCardtextColor;
       font-size: @cardMetaFontSize;
       font-weight: @cardMetaTagFontWeight;

theme/themes/eea/views/card.variables

@@ -273,9 +273,12 @@
 *******************************/
 /* Global */
 @roundedImageBorderRadius        : @circularRadius;
+@roundedContentJustifyContent     : center;
 @roundedContentTitleMarginBottom : @rem-space-2;
+@roundedContentTitleTextAlign    : center;
 @roundedContentTitleFontWeight   : @bold;
 @roundedContentTitleFontSize     : @font-size-3;
+@roundedImageJustifyContent      : center;
 @roundedImageHeight           : 173px;
 @roundedImageWidth            : 173px;
 @roundedMetadataFontSize      : @font-size-1;