feat: add zebra striped table style for attributes in product details…

… tab (#1326)
intershop · Nov 21, 2022 · 7999f02 · 7999f02
1 parent 23a9257
commit 7999f02
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 1 deletion.
diff --git a/src/app/shared/components/product/product-attributes/product-attributes.component.html b/src/app/shared/components/product/product-attributes/product-attributes.component.html
@@ -2,6 +2,5 @@
   <ng-container *ngFor="let attribute of product.attributes | slice: 0:1000">
     <dt class="attribute-type">{{ attribute.name }}:</dt>
     <dd class="attribute-value" [innerHTML]="attribute | ishAttribute: multipleValuesSeparator"></dd>
-    <dd style="clear: both"></dd>
   </ng-container>
 </dl>
diff --git a/src/styles/pages/productdetail/productdetail.scss b/src/styles/pages/productdetail/productdetail.scss
@@ -107,3 +107,36 @@
     margin-top: divide($space-default, 3);
   }
 }
+
+.product-attributes {
+  display: grid;
+  grid-template-columns: minmax(min-content, max-content) auto;
+  width: 100%;
+
+  dt,
+  dd {
+    padding: divide($space-default, 3) $space-default;
+    margin: 0;
+  }
+
+  dt:nth-child(4n + 1),
+  dt:nth-child(4n + 1) + dd {
+    background-color: $color-tertiary;
+  }
+}
+
+.table-compare {
+  .product-attributes {
+    grid-template-columns: none;
+
+    dt,
+    dd {
+      padding: 0;
+      background-color: transparent !important;
+    }
+
+    dd {
+      margin-bottom: $space-default * 0.5;
+    }
+  }
+}