From d643ce26460ddc11d27d25ef87e2f84d09c18400 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Wed, 28 Sep 2022 01:51:50 +0200
Subject: [PATCH] refactor: move table styles to main.scss

---
 src/components/ColorTable.vue | 44 +----------------------------
 src/scss/main.scss            | 52 +++++++++++++++++++++++++++++++++++
 2 files changed, 53 insertions(+), 43 deletions(-)

diff --git a/src/components/ColorTable.vue b/src/components/ColorTable.vue
index 983c5c6..b0db3ab 100644
--- a/src/components/ColorTable.vue
+++ b/src/components/ColorTable.vue
@@ -35,40 +35,13 @@ defineProps<Props>();
 
 <style lang="scss">
 .color-table {
-  border-collapse: separate;
-  border-spacing: 0;
-  width: 100%;
-  max-width: var(--container-width-tables);
-  margin: 2rem auto;
-  padding: var(--color-table-spacing);
-
-  &__heading,
-  &__cell {
-    padding: 0.5rem 1rem;
-  }
-
   &__heading {
-    font-weight: bold;
-    background-color: var(--color-table-heading-background);
-    color: var(--color-table-heading-text-color);
-
-    &:first-child {
-      border-radius: var(--color-table-border-radius) 0 0 0;
-    }
-
-    &:last-child {
-      border-radius: 0 var(--color-table-border-radius) 0 0;
-    }
-
     &.name {
       text-align: right;
     }
   }
 
   &__cell {
-    background-color: var(--color-table-cell-background);
-    color: var(--color-table-cell-text-color);
-
     &.name {
       text-align: right;
     }
@@ -79,22 +52,7 @@ defineProps<Props>();
     }
 
     &.color {
-      min-width: var(--color-table-color-cell-width);
-    }
-  }
-
-  &__row:hover &__cell {
-    background-color: var(--color-table-row-hover);
-    color: var(--color-table-cell-text-color-hover);
-  }
-
-  &__row:last-child &__cell {
-    &:first-child {
-      border-radius: 0 0 0 var(--color-table-border-radius);
-    }
-
-    &:last-child {
-      border-radius: 0 0 var(--color-table-border-radius) 0;
+      min-width: 10vw;
     }
   }
 }
diff --git a/src/scss/main.scss b/src/scss/main.scss
index 169f348..c808a15 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -59,3 +59,55 @@ a {
     box-shadow: inset 0 calc(var(--text-line-height) * -1) 0 0 var(--color-link-text-underline);
   }
 }
+
+table {
+  border-collapse: separate;
+  border-spacing: 0;
+  width: 100%;
+  max-width: var(--table-max-width);
+  margin: 2rem auto;
+  padding: var(--table-outer-spacing);
+
+  th,
+  td {
+    padding: 0.5rem 1rem;
+  }
+
+  th {
+    font-weight: bold;
+    background-color: var(--table-heading-background);
+    color: var(--table-heading-text-color);
+
+    &:first-child {
+      border-radius: var(--table-border-radius) 0 0 0;
+    }
+
+    &:last-child {
+      border-radius: 0 var(--table-border-radius) 0 0;
+    }
+
+    &.name {
+      text-align: right;
+    }
+  }
+
+  td {
+    background-color: var(--table-cell-background);
+    color: var(--table-cell-text-color);
+  }
+
+  tr:hover td {
+    background-color: var(--table-row-background-hover);
+    color: var(--table-cell-text-color-hover);
+  }
+
+  tr:last-child td {
+    &:first-child {
+      border-radius: 0 0 0 var(--table-border-radius);
+    }
+
+    &:last-child {
+      border-radius: 0 0 var(--table-border-radius) 0;
+    }
+  }
+}