feat(design): update linked card background color to animate via opac…

…ity (#2584)
graycoreio · Oct 16, 2023 · dca9b9b · dca9b9b
1 parent bfccd2c
commit dca9b9b
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 43 deletions.
diff --git a/libs/design/src/molecules/card/card/card-theme-variants/linkable-card.scss b/libs/design/src/molecules/card/card/card-theme-variants/linkable-card.scss
@@ -2,22 +2,15 @@
 
 @mixin daff-linkable-card-theme-variant(
 	$hover-color,
-	$active-color,
-	$shadow-color
 ) {
-	&:hover,
-	&:focus {
-		background: $hover-color;
-		color: theming.daff-text-contrast($hover-color);
+	.daff-card__wrapper {
+		&:after {
+			background: $hover-color;
+		}
 	}
 
+	&:hover,
 	&:focus {
-		outline: none;
-		box-shadow: 0 0 0 4px rgba($shadow-color, 0.3);
-	}
-
-	&:active {
-		background: $active-color;
-		color: theming.daff-text-contrast($active-color);
+		color: theming.daff-text-contrast($hover-color);
 	}
 }
diff --git a/libs/design/src/molecules/card/card/card-theme.scss b/libs/design/src/molecules/card/card/card-theme.scss
@@ -112,74 +112,58 @@
 	a {
 		&.daff-card {
 			@include linkable.daff-linkable-card-theme-variant(
-				theming.daff-illuminate($base, $gray, 2),
-				theming.daff-illuminate($base, $gray, 3),
-				theming.daff-color($gray)
+				theming.daff-illuminate($base, $gray, 2)
 			);
 
 			&.daff-primary {
 				@include linkable.daff-linkable-card-theme-variant(
-					theming.daff-color($primary, 70),
-					theming.daff-color($primary, 80),
-					theming.daff-color($primary)
+					theming.daff-color($primary, 70)
 				);
 			}
 
 			&.daff-secondary {
 				@include linkable.daff-linkable-card-theme-variant(
-					theming.daff-color($secondary, 70),
-					theming.daff-color($secondary, 80),
-					theming.daff-color($secondary)
+					theming.daff-color($secondary, 70)
 				);
 			}
 
 			&.daff-tertiary {
 				@include linkable.daff-linkable-card-theme-variant(
-					theming.daff-color($tertiary, 70),
-					theming.daff-color($tertiary, 80),
-					theming.daff-color($tertiary)
+					theming.daff-color($tertiary, 70)
 				);
 			}
 
 			&.daff-theme {
 				@include linkable.daff-linkable-card-theme-variant(
-					theming.daff-illuminate($base, $gray, 1),
-					theming.daff-illuminate($base, $gray, 2),
-					theming.daff-color($gray)
+					theming.daff-illuminate($base, $gray, 1)
 				);
 			}
 
 			&.daff-theme-contrast {
 				@include linkable.daff-linkable-card-theme-variant(
-					theming.daff-illuminate($base-contrast, $gray, 1),
-					theming.daff-illuminate($base-contrast, $gray, 2),
-					theming.daff-color($gray)
+					theming.daff-illuminate($base-contrast, $gray, 1)
 				);
 			}
 
 			&.daff-black {
 				@include linkable.daff-linkable-card-theme-variant(
-					theming.daff-color($gray, 100),
-					theming.daff-color($gray, 90),
-					theming.daff-color($gray)
+					theming.daff-color($gray, 100)
 				);
 			}
 
 			&.daff-white {
 				@include linkable.daff-linkable-card-theme-variant(
-					theming.daff-color($gray, 10),
-					theming.daff-color($gray, 20),
-					theming.daff-color($gray)
+					theming.daff-color($gray, 10)
 				);
 			}
 		}
 
 		&.daff-raised-card {
-			&:hover,
-			&:focus,
-			&:active {
-				box-shadow: 0 16px 32px -4px rgba($black, 0.12),
-					0 8px 12px -2px rgba($black, 0.06);
+			.daff-card__wrapper {
+				&:after {
+					box-shadow: 0 16px 32px -4px rgba($black, 0.12),
+						0 8px 12px -2px rgba($black, 0.06);
+				}
 			}
 		}
 	}

diff --git a/libs/design/src/molecules/card/card/card.component.scss b/libs/design/src/molecules/card/card/card.component.scss
@@ -8,6 +8,7 @@ $card-img-border-radius: calc(#{$card-border-radius} - 1px);
 	$root: &;
 	display: flex;
 	border-radius: $card-border-radius;
+	position: relative;
 
 	&__image {
 		display: inline-block;
@@ -76,6 +77,8 @@ $card-img-border-radius: calc(#{$card-border-radius} - 1px);
 
 	&__body {
 		padding: 1.5rem;
+		position: relative;
+		z-index: 2;
 	}
 
 	&__content {
@@ -99,7 +102,35 @@ a {
 	&.daff-card,
 	&.daff-raised-card,
 	&.daff-stroked-card {
+		$root: &;
 		text-decoration: none;
-		transition: background-color 300ms, box-shadow 300ms;
+
+		.daff-card__wrapper {
+			position: relative;
+
+			&:after {
+				content: '';
+				position: absolute;
+				border-bottom-left-radius: $card-img-border-radius;
+				border-bottom-right-radius: $card-img-border-radius;
+				left: 0;
+				top: 0;
+				height: 100%;
+				width: 100%;
+				opacity: 0;
+				transition: opacity 300ms;
+				z-index: 1;
+			}
+		}
+
+		&:hover,
+		&:focus,
+		&:active {
+			.daff-card__wrapper {
+				&:after {
+					opacity: 1;
+				}
+			}
+		}
 	}
 }