feat(design): update card's border-radius styles and set wrapper heig…

…ht (#2602)
graycoreio · Nov 15, 2023 · 6cec7e3 · 6cec7e3
1 parent 88205b7
commit 6cec7e3
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 15 deletions.
diff --git a/libs/design/card/examples/src/linkable-card/linkable-card.component.html b/libs/design/card/examples/src/linkable-card/linkable-card.component.html
@@ -30,7 +30,7 @@ <h4 daffCardTitle>Basel Exhibition Centre</h4>
 	</div>
 </a>
 
-<select [formControl]="strokedColorControl">
+<select [formControl]="raisedColorControl">
 	<option *ngFor="let option of options" [value]="option.value">{{ option.label }}</option>
 </select>
 

diff --git a/libs/design/src/molecules/card/card/card.component.scss b/libs/design/src/molecules/card/card/card.component.scss
@@ -2,7 +2,7 @@
 @use '../../../../scss/layout';
 
 $card-border-radius: 8px;
-$card-img-border-radius: calc(#{$card-border-radius} - 1px);
+$card-inner-border-radius: calc(#{$card-border-radius} - 1px);
 
 .daff-card {
 	$root: &;
@@ -19,12 +19,10 @@ $card-img-border-radius: calc(#{$card-border-radius} - 1px);
 		flex-direction: column;
 
 		#{$root}__image {
-			border-top-left-radius: $card-img-border-radius;
-			border-top-right-radius: $card-img-border-radius;
+			border-radius: $card-inner-border-radius $card-inner-border-radius 0 0;
 
 			img {
-				border-top-left-radius: $card-img-border-radius;
-				border-top-right-radius: $card-img-border-radius;
+				border-radius: $card-inner-border-radius $card-inner-border-radius 0 0;
 			}
 		}
 	}
@@ -38,12 +36,10 @@ $card-img-border-radius: calc(#{$card-border-radius} - 1px);
 		}
 
 		#{$root}__image {
-			border-top-left-radius: $card-img-border-radius;
-			border-bottom-left-radius: $card-img-border-radius;
+			border-radius: $card-inner-border-radius 0 0 $card-inner-border-radius;
 
 			img {
-				border-top-left-radius: $card-img-border-radius;
-				border-bottom-left-radius: $card-img-border-radius;
+				border-radius: $card-inner-border-radius 0 0 $card-inner-border-radius;
 				object-fit: cover;
 				object-position: center center;
 				height: 100% !important; /* stylelint-disable-line declaration-no-important */
@@ -95,6 +91,8 @@ $card-img-border-radius: calc(#{$card-border-radius} - 1px);
 
 	&__actions {
 		padding: 0 1.5rem 1.5rem;
+		position: relative;
+		z-index: 2;
 	}
 }
 
@@ -105,29 +103,43 @@ a {
 		$root: &;
 		text-decoration: none;
 
+		.daff-card__image + .daff-card__wrapper {
+			&::after {
+				border-radius: 0 0 $card-border-radius $card-border-radius;
+			}
+		}
+
 		.daff-card__wrapper {
 			position: relative;
+			height: 100%;
 
-			&:after {
+			&::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%;
+				border-radius: $card-border-radius;
 				opacity: 0;
+				width: 100%;
 				transition: opacity 300ms;
 				z-index: 1;
 			}
 		}
+
+		&.daff-card--horizontal {
+			.daff-card__image + .daff-card__wrapper {
+				&::after {
+					border-radius: 0 $card-border-radius $card-border-radius 0;
+				}
+			}
+		}
 
 		&:hover,
 		&:focus,
 		&:active {
 			.daff-card__wrapper {
-				&:after {
+				&::after {
 					opacity: 1;
 				}
 			}