fix: table styles in edit mode (#826)

RedTurtle · Dec 19, 2024 · 81090ca · 81090ca
1 parent 2504f8d
commit 81090ca
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 13 deletions.
diff --git a/src/theme/_cms-ui.scss b/src/theme/_cms-ui.scss
@@ -74,6 +74,48 @@ body.cms-ui {
     .block.text {
       line-height: 1.555;
     }
+
+    &.table {
+      @import 'bootstrap/scss/reboot';
+      @import 'bootstrap/scss/tables';
+      @import 'bootstrap-italia/src/scss/custom/tables';
+      @import 'extras/tables';
+
+      .ui.table {
+        &.inverted {
+          th,
+          td {
+            border-color: inherit !important;
+          }
+        }
+        thead th {
+          font-weight: bold;
+          text-transform: unset;
+          color: var(--bs-table-color);
+        }
+
+        &.very.basic {
+          &:not(.sortable):not(.striped) {
+            th:first-child,
+            td:first-child {
+              padding-left: 0.5rem;
+            }
+            thead tr:first-child th {
+              padding-top: 0.5rem;
+            }
+            td:last-child {
+              padding-right: 0.5rem;
+            }
+          }
+        }
+
+        &.striped {
+          tbody tr:nth-child(2n) {
+            background-color: rgba(0, 0, 50, 0.02) !important;
+          }
+        }
+      }
+    }
   }
 
   &.contenttype-document,

diff --git a/src/theme/extras/_tables.scss b/src/theme/extras/_tables.scss
@@ -20,31 +20,30 @@
   &.very.basic {
     border: none;
 
-    tbody > tr {
+    th,
+    td {
       &:first-of-type {
-        th,
-        td {
-          border-top: none;
-        }
+        border-left: none;
       }
 
       &:last-of-type {
+        border-right: none;
+      }
+    }
+
+    tbody > tr {
+      &:first-of-type {
         th,
         td {
-          border-bottom: none;
+          border-top: none;
         }
       }
 
       th,
       td {
-        &:first-of-type {
-          border-left: none;
-        }
-
-        &:last-of-type {
-          border-right: none;
-        }
+        border-bottom: none;
       }
+      border-width: 0;
     }
   }