move table styles to article only

Expensify · Nov 2, 2023 · 3af0d9a · 3af0d9a
1 parent c8e7ee5
commit 3af0d9a
Showing 1 changed file with 37 additions and 30 deletions.
diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss
@@ -35,31 +35,8 @@ html {
 }
 
 table {
-    margin-bottom: 20px;
     border-spacing: 0;
     border-collapse: collapse;
-    border-radius: 8px;
-
-    // Box shadow is used here because border-radius and border-collapse don't work together. It leads to double borders.
-    // https://stackoverflow.com/questions/628301/the-border-radius-property-and-border-collapsecollapse-dont-mix-how-can-i-use
-    border-style: hidden;
-    box-shadow: 0 0 0 1px $color-green-borders;
-}
-
-th:first-child {
-    border-top-left-radius: 8px;
-}
-
-th:last-child {
-    border-top-right-radius: 8px;
-}
-
-tr:last-child > td:first-child {
-    border-bottom-left-radius: 8px;
-}
-
-tr:last-child > td:last-child {
-    border-bottom-right-radius: 8px;
 }
 
 caption,
@@ -68,13 +45,6 @@ td {
     text-align: left;
     font-weight: 400;
     vertical-align: middle;
-    padding: 6px 13px;
-    border: 1px solid $color-green-borders;
-}
-
-thead tr th {
-    font-weight: bold;
-    background-color: $color-green-highlightBG;
 }
 
 q,
@@ -395,6 +365,43 @@ button {
             }
         }
 
+        table {
+            margin-bottom: 20px;
+            border-radius: 8px;
+
+            // Box shadow is used here because border-radius and border-collapse don't work together. It leads to double borders.
+            // https://stackoverflow.com/questions/628301/the-border-radius-property-and-border-collapsecollapse-dont-mix-how-can-i-use
+            border-style: hidden;
+            box-shadow: 0 0 0 1px $color-green-borders;
+        }
+
+        th:first-child {
+            border-top-left-radius: 8px;
+        }
+
+        th:last-child {
+            border-top-right-radius: 8px;
+        }
+
+        tr:last-child > td:first-child {
+            border-bottom-left-radius: 8px;
+        }
+
+        tr:last-child > td:last-child {
+            border-bottom-right-radius: 8px;
+        }
+
+        th,
+        td {
+            padding: 6px 13px;
+            border: 1px solid $color-green-borders;
+        }
+
+        thead tr th {
+            font-weight: bold;
+            background-color: $color-green-highlightBG;
+        }
+
         .img-wrap {
             display: flex;
             justify-content: space-around;