Add card color variations merges in #1764

RELEASE-NOTES.md

@@ -43,6 +43,7 @@
 
 **Bugs**
 - **All Modules** - Fixed bug where element `destroy` could remove third party events when re-initialized
+- **Card** - Star / Like button colors have been fixed to match `ui rating` inside `card`
 - **Dropdown** - Upward dropdown now has upward arrow icon
 - **Icon** - `external link` and `external link square` has been renamed to `external icon` to no longer receive `link` styles by default
 - **Steps** - Fixed bug where evenly divided steps were no longer fluid

src/definitions/views/card.less

@@ -196,6 +196,24 @@
   float: right;
 }
 
+/*--------------
+     Aligned
+---------------*/
+
+.ui.cards > .card  [class*="left aligned"],
+.ui.card [class*="left aligned"] {
+  text-align: left;
+}
+.ui.cards > .card [class*="center aligned"],
+.ui.card [class*="center aligned"] {
+  text-align: center;
+}
+.ui.cards > .card [class*="right aligned"],
+.ui.card [class*="right aligned"] {
+  text-align: right;
+}
+
+
 /*--------------
   Content Image
 ---------------*/
@@ -386,6 +404,7 @@
 /*******************************
            Variations
 *******************************/
+
 /*-------------------
         Fluid
 --------------------*/
@@ -410,6 +429,157 @@ a.ui.card:hover,
   box-shadow: @linkHoverBoxShadow;
 }
 
+/*-------------------
+       Colors
+--------------------*/
+
+.ui.black.cards > .card,
+.ui.cards > .black.card,
+.ui.black.card {
+  box-shadow:
+    0px @shadowDistance 0px 0px @black,
+    @borderShadow
+  ;
+}
+.ui.blue.cards > .card,
+.ui.cards > .blue.card,
+.ui.blue.card {
+   box-shadow:
+    0px @shadowDistance 0px 0px @blue,
+    @borderShadow
+  ;
+}
+.ui.green.cards > .card,
+.ui.cards > .green.card,
+.ui.green.card {
+    box-shadow:
+      0px @shadowDistance 0px 0px @green,
+      @borderShadow
+    ;
+}
+.ui.orange.cards > .card,
+.ui.cards > .orange.card,
+.ui.orange.card {
+  box-shadow:
+    0px @shadowDistance 0px 0px @orange,
+    @borderShadow
+  ;
+}
+.ui.pink.cards > .card,
+.ui.cards > .pink.card,
+.ui.pink.card {
+  box-shadow:
+    0px @shadowDistance 0px 0px @pink,
+    @borderShadow
+  ;
+}
+.ui.purple.cards > .card,
+.ui.cards > .purple.card,
+.ui.purple.card {
+  box-shadow:
+    0px @shadowDistance 0px 0px @purple,
+    @borderShadow
+  ;
+}
+.ui.red.cards > .card,
+.ui.cards > .red.card,
+.ui.red.card {
+  box-shadow:
+    0px @shadowDistance 0px 0px @red,
+    @borderShadow
+  ;
+}
+.ui.teal.cards > .card,
+.ui.cards > .teal.card,
+.ui.teal.card {
+  box-shadow:
+    0px @shadowDistance 0px 0px @teal,
+    @borderShadow
+  ;
+}
+.ui.yellow.cards > .card,
+.ui.cards > .yellow.card,
+.ui.yellow.card {
+  box-shadow:
+    0px @shadowDistance 0px 0px @yellow,
+    @borderShadow
+  ;
+}
+
+/* Hover */
+.ui.black.cards > .card:hover,
+.ui.cards > .black.card:hover,
+.ui.black.card:hover {
+  box-shadow:
+    0px @shadowDistance 0px 0px @blackHover,
+    @borderShadow
+  ;
+}
+.ui.blue.cards > .card:hover,
+.ui.cards > .blue.card:hover,
+.ui.blue.card:hover {
+   box-shadow:
+    0px @shadowDistance 0px 0px @blueHover,
+    @borderShadow
+  ;
+}
+.ui.green.cards > .card:hover,
+.ui.cards > .green.card:hover,
+.ui.green.card:hover {
+    box-shadow:
+      0px @shadowDistance 0px 0px @greenHover,
+      @borderShadow
+    ;
+}
+.ui.orange.cards > .card:hover,
+.ui.cards > .orange.card:hover,
+.ui.orange.card:hover {
+  box-shadow:
+    0px @shadowDistance 0px 0px @orangeHover,
+    @borderShadow
+  ;
+}
+.ui.pink.cards > .card:hover,
+.ui.cards > .pink.card:hover,
+.ui.pink.card:hover {
+  box-shadow:
+    0px @shadowDistance 0px 0px @pinkHover,
+    @borderShadow
+  ;
+}
+.ui.purple.cards > .card:hover,
+.ui.cards > .purple.card:hover,
+.ui.purple.card:hover {
+  box-shadow:
+    0px @shadowDistance 0px 0px @purpleHover,
+    @borderShadow
+  ;
+}
+.ui.red.cards > .card:hover,
+.ui.cards > .red.card:hover,
+.ui.red.card:hover {
+  box-shadow:
+    0px @shadowDistance 0px 0px @redHover,
+    @borderShadow
+  ;
+}
+.ui.teal.cards > .card:hover,
+.ui.cards > .teal.card:hover,
+.ui.teal.card:hover {
+  box-shadow:
+    0px @shadowDistance 0px 0px @tealHover,
+    @borderShadow
+  ;
+}
+.ui.yellow.cards > .card:hover,
+.ui.cards > .yellow.card:hover,
+.ui.yellow.card:hover {
+  box-shadow:
+    0px @shadowDistance 0px 0px @yellowHover,
+    @borderShadow
+  ;
+}
+
 /*--------------
    Card Count
 ---------------*/

src/themes/basic/views/card.variables

@@ -30,5 +30,4 @@
 @imageBorderRadius: @borderRadius;
 @imageBorder: 1px solid @borderColor;
 
-
-
+@linkHoverBoxShadow: none;

src/themes/default/views/card.variables

@@ -7,7 +7,7 @@
 --------------------*/
 
 /* Shadow */
-@shadowDistance: 0.2em;
+@shadowDistance: 3px;
 @shadowBoxShadow: 0px @shadowDistance 0px 0px @solidBorderColor;
 
 /* Item */
@@ -75,10 +75,12 @@
 @actionOpacity: 0.75;
 @actionHoverOpacity: 1;
 @actionTransition: color @transitionDuration @transitionEasing;
-@starColor: #AC9400;
-@starActiveColor: #E9B539;
-@likeColor: #FFADAE;
-@likeActiveColor: #EF404A;
+
+@starColor: #FFB70A;
+@starActiveColor: #FFE623;
+
+@likeColor: #FF2733;
+@likeActiveColor: #FF2733;
 
 /* Links */
 @contentLinkColor: '';