feat: WIKI-19593: implementation of new table design (#283)

* feat: WIKI-19593: implementation of new table design * fix: table styles * fix: changed border-radius styles back. * fix: left border fixed
diplodoc-platform · Aug 23, 2023 · c208540 · c208540
1 parent c2ff77d
commit c208540
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 7 deletions.
diff --git a/src/scss/_common.scss b/src/scss/_common.scss
@@ -146,7 +146,7 @@
     }
 
     table {
-        color: #333333;
+        color: #333;
 
         display: inline-block;
         max-width: 100%;
@@ -155,22 +155,50 @@
         position: relative;
         z-index: 1;
 
-        border: 1px solid $borderColor;
         box-sizing: border-box;
-        border-radius: 8px;
-        border-collapse: collapse;
+        border-collapse: separate;
         border-spacing: 0;
         background: $baseColor;
 
         thead, tr:nth-child(2n) {
             background-color: $tableRowBackgroundColor;
         }
 
+        tr:first-child td:first-child {
+            border-top-left-radius: $tableBorderRadius;
+        }
+
+        tr:first-child td:last-child {
+            border-top-right-radius: $tableBorderRadius;
+        }
+
+        tr:last-child td:first-child {
+            border-bottom-left-radius: $tableBorderRadius;
+        }
+
+        tr:last-child td:last-child {
+            border-bottom-right-radius: $tableBorderRadius;
+        }
+
+        tr:first-child td {
+            border-top-style: solid;
+        }
+
+        tr td:first-child {
+            border-left: 1px solid $borderColor;
+        }
+
         th, td {
-            padding: 10px 15px;
+            padding: 10px 20px;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
+            border: 1px solid $borderColor;
+
+            p {
+                padding: 0;
+                margin: 0;
+            }
         }
 
         th {
@@ -180,7 +208,8 @@
 
         td {
             white-space: normal;
-            vertical-align: baseline;
+            vertical-align: top;
+            border-style: none solid solid none;
         }
     }
 
@@ -266,7 +295,7 @@
         margin-bottom: 0;
     }
 
-    &:not(.yfm_no-list-reset){
+    &:not(.yfm_no-list-reset) {
         ol {
             list-style-type: none;
             counter-reset: list;

diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
@@ -14,3 +14,5 @@ $tableRowBackgroundColor: rgba(0, 0, 0, 0.02);
 
 $linkColor: $accentColor;
 $linkHoverColor: #004080;
+
+$tableBorderRadius: 8px;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -14,3 +14,5 @@ $tableRowBackgroundColor: rgba(0, 0, 0, 0.02);

		$linkColor: $accentColor;
		$linkHoverColor: #004080;

		$tableBorderRadius: 8px;