feat(card): basic variant

lubber-de · web-flow · commit e1fccffd12fd · 2022-04-11T09:50:23.000+02:00
New basic variant which does not have a border and also allows support for full color background
diff --git a/src/definitions/views/card.less b/src/definitions/views/card.less
@@ -358,6 +358,28 @@
   }
 }
 
+& when (@variationCardBasic) {
+  /*--------------
+     Basic
+  ---------------*/
+  .ui.cards:not(.raised) > .basic.card:not(.raised),
+  .ui.ui.ui.basic.cards:not(.raised) > .card:not(.raised),
+  .ui.ui.ui.basic.card:not(.raised) {
+    box-shadow: none;
+    & > .buttons,
+      > .button {
+      margin: 0;
+      width: 100%;
+    }
+  }
+  & when (@variationCardLink) {
+    .ui.ui.ui.ui.ui.basic.card:not(.raised):hover,
+    .ui.ui.ui.ui.ui.basic.cards:not(.raised) .card:not(.raised):hover {
+      box-shadow: none;
+    }
+  }
+}
+
 /*--------------
       Dimmer
 ---------------*/
@@ -561,6 +583,7 @@
          Raised
   --------------------*/
 
+  .ui.cards > .raised.card,
   .ui.raised.cards > .card,
   .ui.raised.card {
     box-shadow: @raisedShadow;
@@ -573,6 +596,24 @@
       box-shadow: @raisedShadowHover;
     }
   }
+  & when (@variationCardBasic) {
+    .ui.basic.cards > .raised.card,
+    .ui.basic.raised.cards > .card,
+    .ui.raised.cards > .basic.card,
+    .ui.basic.raised.card {
+      box-shadow: @basicRaisedShadow;
+    }
+    & when (@variationCardLink) {
+      .ui.basic.raised.cards a.card:hover,
+      .ui.link.cards .basic.raised.card:hover,
+      .ui.link.basic.cards .raised.card:hover,
+      .ui.link.basic.raised.cards .card:hover,
+      a.ui.basic.raised.card:hover,
+      .ui.link.basic.raised.card:hover {
+        box-shadow: @basicRaisedShadowHover;
+      }
+    }
+  }
 }
 
 & when (@variationCardCentered) {
@@ -636,6 +677,7 @@
     @h: @colors[@@color][hover];
     @l: @colors[@@color][light];
     @lh: @colors[@@color][lightHover];
+    @isVeryDark: @colors[@@color][isVeryDark];
 
     .ui.@{color}.cards > .card,
     .ui.cards > .@{color}.card,
@@ -645,14 +687,49 @@
             0 @coloredShadowDistance 0 0 @c,
             @shadowBoxShadow
       ;
-      &:hover {
-      box-shadow:
-            @borderShadow,
-            0 @coloredShadowDistance 0 0 @h,
-            @shadowHoverBoxShadow
+    }
+    & when (@variationCardLink) {
+      .ui.cards a.@{color}.card:hover,
+      .ui.@{color}.cards a.card:hover,
+      .ui.link.@{color}.cards .card:not(.icon):hover,
+      .ui.link.cards .@{color}.card:not(.icon):hover,
+      a.ui.@{color}.card:hover,
+      .ui.link.@{color}.card:hover {
+        box-shadow:
+              @borderShadow,
+              0 @coloredShadowDistance 0 0 @h,
+              @shadowHoverBoxShadow
       ;
       }
     }
+    & when (@variationCardBasic) {
+      .ui.cards > .basic.@{color}.card,
+      .ui.basic.@{color}.cards > .card,
+      .ui.basic.cards > .@{color}.card,
+      .ui.basic.@{color}.card {
+        background: @l;
+        &  when (@isVeryDark) {
+          & .header,
+            .content,
+            .meta,
+            .description {
+            color: @white;
+          }
+        }
+      }
+      & when (@variationCardLink) {
+        .ui.basic.cards a.@{color}.card:hover,
+        .ui.cards a.basic.@{color}.card:hover,
+        .ui.basic.@{color}.cards a.card:hover,
+        .ui.link.cards .basic.@{color}.card:not(.icon):hover,
+        .ui.link.basic.@{color}.cards .card:not(.icon):hover,
+        .ui.link.basic.cards .@{color}.card:not(.icon):hover,
+        a.ui.basic.@{color}.card:hover,
+        .ui.link.basic.@{color}.card:hover {
+          background: @lh;
+        }
+      }
+    }
     & when (@variationCardInverted) {
       .ui.inverted.@{color}.cards > .card,
       .ui.inverted.cards > .@{color}.card,
@@ -662,14 +739,41 @@
               0 @coloredShadowDistance 0 0 @l,
               0 0 0 @borderWidth @solidWhiteBorderColor
         ;
-        &:hover {
-        box-shadow:
-              0 @shadowDistance 3px 0 @solidWhiteBorderColor,
-              0 @coloredShadowDistance 0 0 @lh,
-              0 0 0 @borderWidth @solidWhiteBorderColor
+      }
+      & when (@variationCardLink) {
+        .ui.inverted.cards a.@{color}.card:hover,
+        .ui.inverted.@{color}.cards a.card:hover,
+        .ui.link.inverted.@{color}.cards .card:not(.icon):hover,
+        .ui.link.inverted.cards .@{color}.card:not(.icon):hover,
+        a.ui.inverted.@{color}.card:hover,
+        .ui.link.inverted.@{color}.card:hover {
+          box-shadow:
+                  0 @shadowDistance 3px 0 @solidWhiteBorderColor,
+                  0 @coloredShadowDistance 0 0 @lh,
+                  0 0 0 @borderWidth @solidWhiteBorderColor
         ;
         }
       }
+      & when (@variationCardBasic) {
+        .ui.inverted.cards > .basic.@{color}.card,
+        .ui.basic.inverted.@{color}.cards > .card,
+        .ui.basic.inverted.cards > .@{color}.card,
+        .ui.basic.inverted.@{color}.card {
+          background: @c;
+        }
+        & when (@variationCardLink) {
+          .ui.inverted.cards a.basic.@{color}.card:hover,
+          .ui.basic.inverted.cards a.@{color}.card:hover,
+          .ui.basic.inverted.@{color}.cards a.card:hover,
+          .ui.link.inverted.cards .basic.@{color}.card:not(.icon):hover,
+          .ui.link.basic.inverted.@{color}.cards .card:not(.icon):hover,
+          .ui.link.basic.inverted.cards .@{color}.card:not(.icon):hover,
+          a.ui.basic.inverted.@{color}.card:hover,
+          .ui.link.basic.inverted.@{color}.card:hover {
+            background: @h;
+          }
+        }
+      }
     }
   })
 }
diff --git a/src/themes/default/globals/variation.variables b/src/themes/default/globals/variation.variables
@@ -403,6 +403,7 @@
 
 /* Card */
 @variationCardInverted: true;
+@variationCardBasic: true;
 @variationCardDisabled: true;
 @variationCardLoading: true;
 @variationCardHorizontal: true;
diff --git a/src/themes/default/views/card.variables b/src/themes/default/views/card.variables
@@ -188,6 +188,14 @@
   @floatingShadowHover
 ;
 
+/* Basic Raised */
+@basicRaisedShadow:
+  @floatingShadow
+;
+@basicRaisedShadowHover:
+  @floatingShadowHover
+;
+
 /* Card Count */
 @wideCardSpacing: 1em;
 @cardSpacing: 0.75em;
