[#2347] Refactor

maykinmedia · Jun 17, 2024 · 8b48792 · 8b48792
1 parent fbe5c79
commit 8b48792
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 56 deletions.
diff --git a/src/open_inwoner/scss/components/Product/product-detail.scss b/src/open_inwoner/scss/components/Product/product-detail.scss
@@ -1,15 +1,3 @@
-.product-detail {
-  .table {
-    tbody > tr:first-child .table__item,
-    tbody > tr:first-child .table__header {
-      font-family: var(--font-family-heading);
-      font-weight: bold;
-      border-top: 1px solid var(--color-gray-dark-900);
-      border-bottom: 1px solid var(--color-gray-dark-900);
-    }
-  }
-}
-
 .product-info > .aside,
 .product-info {
   & > div {

diff --git a/src/open_inwoner/scss/components/Table/Table.scss b/src/open_inwoner/scss/components/Table/Table.scss
@@ -40,6 +40,48 @@
     }
   }
 
+  &__item {
+    padding: var(--spacing-medium);
+    border-bottom: 1px solid;
+    border-bottom-color: var(--color-gray-light);
+
+    &--status:first-of-type {
+      border-top: 1px solid;
+      border-top-color: var(--color-gray-light);
+    }
+
+    &--borderless {
+      border: 0;
+      padding: var(--spacing-medium);
+    }
+
+    &--right {
+      text-align: right;
+      white-space: nowrap;
+    }
+
+    &--color-gray-dark {
+      color: var(--color-gray-dark);
+    }
+
+    &--no-lb {
+      white-space: nowrap;
+    }
+
+    &--top {
+      vertical-align: top;
+    }
+
+    &--notification-danger {
+      background-color: var(--color-danger-lightest);
+      color: var(--color-danger-darker);
+      font-size: var(--font-size-body);
+      text-align: center;
+      border-radius: var(--border-radius-large);
+      padding: var(--spacing-small) 0;
+    }
+  }
+
   /// Product pages
 
   &--content {
@@ -64,6 +106,13 @@
       padding-right: var(--spacing-giant);
     }
 
+    .tr:first-child .table__header {
+      font-family: var(--font-family-heading);
+      font-weight: bold;
+      border-top: 1px solid var(--color-gray-dark-900);
+      border-bottom: 1px solid var(--color-gray-dark-900);
+    }
+
     .table__header:first-of-type {
       border-left: 1px solid var(--color-gray-dark-900);
       border-top-left-radius: var(--border-radius);
@@ -88,48 +137,6 @@
     }
   }
 
-  &__item {
-    padding: var(--spacing-medium);
-    border-bottom: 1px solid;
-    border-bottom-color: var(--color-gray-light);
-
-    &--status:first-of-type {
-      border-top: 1px solid;
-      border-top-color: var(--color-gray-light);
-    }
-
-    &--borderless {
-      border: 0;
-      padding: var(--spacing-medium);
-    }
-
-    &--right {
-      text-align: right;
-      white-space: nowrap;
-    }
-
-    &--color-gray-dark {
-      color: var(--color-gray-dark);
-    }
-
-    &--no-lb {
-      white-space: nowrap;
-    }
-
-    &--top {
-      vertical-align: top;
-    }
-
-    &--notification-danger {
-      background-color: var(--color-danger-lightest);
-      color: var(--color-danger-darker);
-      font-size: var(--font-size-body);
-      text-align: center;
-      border-radius: var(--border-radius-large);
-      padding: var(--spacing-small) 0;
-    }
-  }
-
   /// Plans & Actions
 
   &__heading {
@@ -203,12 +210,19 @@
   ///
 
   &--content {
-    tbody > tr:first-of-type .table__item:first-of-type {
+    .tr:first-child .table__item {
+      font-family: var(--font-family-heading);
+      font-weight: bold;
+      border-top: 1px solid var(--color-gray-dark-900);
+      border-bottom: 1px solid var(--color-gray-dark-900);
+    }
+
+    .tr:first-of-type .table__item:first-of-type {
       border-left: 1px solid var(--color-gray-dark-900);
       border-top-left-radius: var(--border-radius);
     }
 
-    tbody > tr:first-of-type .table__item:last-of-type {
+    .tr:first-of-type .table__item:last-of-type {
       border-right: 1px solid var(--color-gray-dark-900);
       border-top-right-radius: var(--border-radius);
     }