feat(daffio): update api list item background color to animate via op…

…acity (#2734)
graycoreio · Jan 19, 2024 · faacca5 · faacca5
1 parent 57b30fc
commit faacca5
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 8 deletions.
diff --git a/apps/daffio/src/app/api/components/api-list/api-list-theme.scss b/apps/daffio/src/app/api/components/api-list/api-list-theme.scss
@@ -26,7 +26,7 @@
 				outline: none;
 			}
 
-			&:hover {
+			&:after {
 				background: daff-theme.daff-illuminate($base, $gray, 2);
 			}
 		}

diff --git a/apps/daffio/src/app/api/components/api-list/api-list.component.scss b/apps/daffio/src/app/api/components/api-list/api-list.component.scss
@@ -1,6 +1,8 @@
 @use '../../../../scss/type-descriptors/mixins' as type-mixin;
 @use 'utilities' as daff;
 
+$api-list-item-border-radius: 4px;
+
 :host {
 	display: flex;
 	flex-direction: column;
@@ -33,7 +35,7 @@
 		}
 
 		> * {
-			@include daff.single-line-ellipsis();
+			@include daff.text-truncate();
 
 			@include daff.breakpoint(mobile) {
 				display: inline-block;
@@ -49,7 +51,7 @@
 		@include daff.breakpoint(tablet) {
 			grid-template-columns: repeat(2, 1fr);
 		}
-		
+
 		@include daff.breakpoint(small-laptop) {
 			grid-template-columns: repeat(3, 1fr);
 		}
@@ -58,15 +60,34 @@
 	&__item {
 		display: flex;
 		align-items: center;
-		border-radius: 4px;
+		border-radius: $api-list-item-border-radius;
 		justify-content: space-between;
 		overflow: hidden;
 		padding: 8px;
-		transition: background-color 300ms;
-}
+		position: relative;
+
+		&:after {
+			content: '';
+			border-radius: $api-list-item-border-radius;
+			position: absolute;
+			left: 0;
+			top: 0;
+			height: 100%;
+			width: 100%;
+			opacity: 0;
+			transition: opacity 300ms;
+			z-index: 1;
+		}
+
+		&:hover {
+			&:after {
+				opacity: 1;
+			}
+		}
+	}
 
 	&__item-name {
-		@include daff.single-line-ellipsis();
+		@include daff.text-truncate();
 	}
 
 	&__item-label {
@@ -75,4 +96,9 @@
 		padding: 4px;
 		margin-left: 16px;
 	}
+
+	&__item-name,
+	&__item-label {
+		z-index: 2;
+	}
 }
diff --git a/apps/daffio/src/scss/type-descriptors/_mixins.scss b/apps/daffio/src/scss/type-descriptors/_mixins.scss
@@ -19,7 +19,6 @@ $base-contrast: daff-theme.daff-map-deep-get(daff-theme.$theme, 'core.base-contr
 	font-size: 0.625rem;
 	box-sizing: border-box;
 	text-transform: uppercase;
-	transition: background-color 300ms;
 
 	&.class {
 		@include type-theming(daff-theme.daff-color($primary));