From e6cf42a5a5b850ade0084c7851035dbb97c394ab Mon Sep 17 00:00:00 2001
From: Pierrick Prudhomme <pierrick.prudhomme@environnement-recycling.com>
Date: Thu, 23 Aug 2018 11:38:27 +0200
Subject: [PATCH] [Card] Add `inverted` variation

---
 src/definitions/views/card.less         | 67 ++++++++++++++++++++++++-
 src/themes/default/views/card.variables | 17 +++++++
 2 files changed, 83 insertions(+), 1 deletion(-)

diff --git a/src/definitions/views/card.less b/src/definitions/views/card.less
index e1983c2c59..1ff95e0834 100755
--- a/src/definitions/views/card.less
+++ b/src/definitions/views/card.less
@@ -1087,7 +1087,6 @@ a.ui.card:hover,
   }
 }
 
-
 /*--------------
       Size
 ---------------*/
@@ -1096,4 +1095,70 @@ a.ui.card:hover,
   font-size: @medium;
 }
 
+/*-----------------
+      Inverted
+------------------*/
+
+.ui.inverted.cards > .card,
+.ui.inverted.card {
+  background: @invertedBackground;
+  box-shadow: @invertedBoxShadow;
+}
+
+/* Content */
+.ui.inverted.cards > .card > .content,
+.ui.inverted.card > .content {
+  border-top: @invertedContentDivider;
+}
+
+/* Header */
+.ui.inverted.cards > .card > .content > .header,
+.ui.inverted.card > .content > .header {
+  color: @invertedHeaderColor;
+}
+
+/* Description */
+.ui.inverted.cards > .card > .content > .description,
+.ui.inverted.card > .content > .description {
+  color: @invertedDescriptionColor;
+}
+
+/* Meta */
+.ui.inverted.cards > .card .meta,
+.ui.inverted.card .meta {
+  color: @invertedMetaColor;
+}
+.ui.inverted.cards > .card .meta > a:not(.ui),
+.ui.inverted.card .meta > a:not(.ui) {
+  color: @invertedMetaLinkColor;
+}
+.ui.inverted.cards > .card .meta > a:not(.ui):hover,
+.ui.inverted.card .meta > a:not(.ui):hover {
+  color: @invertedMetaLinkHoverColor;
+}
+
+/* Extra */
+.ui.inverted.cards > .card > .extra,
+.ui.inverted.card > .extra {
+  border-top: @invertedExtraDivider !important;
+  color: @invertedExtraColor;
+}
+.ui.inverted.cards > .card > .extra a:not(.ui),
+.ui.inverted.card > .extra a:not(.ui) {
+  color: @invertedExtraLinkColor;
+}
+.ui.inverted.cards > .card > .extra a:not(.ui):hover,
+.ui.inverted.card > .extra a:not(.ui):hover {
+  color: @extraLinkHoverColor;
+}
+
+/* Link card(s) */
+.ui.inverted.cards a.card:hover,
+.ui.inverted.link.cards .card:not(.icon):hover,
+a.inverted.ui.card:hover,
+.ui.inverted.link.card:hover {
+  background: @invertedLinkHoverBackground;
+}
+
+
 .loadUIOverrides();
diff --git a/src/themes/default/views/card.variables b/src/themes/default/views/card.variables
index c3303ceac4..32d14106cc 100644
--- a/src/themes/default/views/card.variables
+++ b/src/themes/default/views/card.variables
@@ -218,3 +218,20 @@
 
 /* Colored */
 @coloredShadowDistance: 2px;
+
+/* Inverted */
+@invertedBackground: @black;
+@invertedContentDivider: @borderWidth solid rgba(255, 255, 255, 0.15);
+@invertedHeaderColor: @invertedTextColor;
+@invertedDescriptionColor: @invertedMutedTextColor;
+@invertedMetaColor: @invertedLightTextColor;
+@invertedMetaLinkColor: @invertedLightTextColor;
+@invertedMetaLinkHoverColor: @invertedHoveredTextColor;
+@invertedExtraColor: @invertedLightTextColor;
+@invertedExtraLinkColor: @invertedUnselectedTextColor;
+@invertedExtraDivider: 1px solid rgba(255, 255, 255, 0.15);
+@invertedLinkHoverBackground: @black;
+@invertedBoxShadow:
+  0px @shadowDistance 3px 0px @solidWhiteBorderColor,
+  0px 0px 0px @borderWidth @solidWhiteBorderColor
+;