chore(table): lint

RedHat-UX · Sep 17, 2024 · d193922 · d193922
1 parent c247c4d
commit d193922
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 30 deletions.
diff --git a/elements/rh-table/rh-table-lightdom.css b/elements/rh-table/rh-table-lightdom.css
@@ -1,4 +1,6 @@
 rh-table {
+  container: host / inline-size;
+
   --_row-border:
     var(--rh-table-row-border,
       var(--rh-border-width-sm, 1px)
@@ -12,47 +14,52 @@ rh-table {
     var(--rh-table-column-background-hover-color,
       rgb(var(--rh-color-blue-50-rgb, 0 102 204)
       / var(--rh-opacity-10, 10%)));
-
-  container: host / inline-size;
 
-  & thead { 
+  & thead {
     & th {
       position: relative;
       padding-block: var(--rh-space-lg, 16px);
       text-align: start;
       font-weight: var(--rh-font-weight-heading-bold, 700);
     }
-  }  
+  }
+
   & table {
     min-width: 100%;
     margin: 0 auto;
     table-layout: fixed;
     border: 0;
     border-collapse: collapse;
   }
+
   & :is(tr, col) {
     transition: background 0.3s ease-out;
   }
+
   & :is(th, td) {
     padding-inline: var(--rh-space-lg, 16px);
   }
+
   & :is(col.active) {
     background: var(--_column-background-hover-color);
-  }  
+  }
+
   & tr {
     border-block-end: var(--_row-border);
 
     &:hover {
       background: var(--_row-background-hover-color);
     }
+
     & > * {
       border: none;
     }
   }
+
   & td {
-    padding-block-start: var(--rh-space-xl, 24px);
-    padding-block-end: var(--rh-space-xl, 24px);
+    padding-block: var(--rh-space-xl, 24px);
   }
+
   & a {
     color: var(--rh-color-interactive-primary-default-on-light, #0066cc);
     text-decoration: none;
@@ -62,6 +69,7 @@ rh-table {
       text-decoration: underline;
     }
   }
+
   & caption {
     font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif);
     font-size: var(--rh-font-size-body-text-lg, 1.125rem);
@@ -77,52 +85,59 @@ rh-table {
   table {
     display: grid;
 
+    & *:not(thead) + tbody {
+      & tr {
+        display: grid;
+        grid-auto-columns: auto;
+        grid-auto-flow: column;
+      }
+    }
+
     & thead {
       display: none;
       visibility: hidden;
-  
+
       & ~ tbody {
         display: block;
-  
+
         & tr {
           border: none;
           display: grid;
           grid-template-columns: 1fr;
           height: auto;
           grid-auto-columns: max-content;
           grid-auto-flow: unset;
-  
+
           &:first-child {
             border-block-start: var(--_row-border);
-  
+
             & td:first-child {
               padding-block-start: var(--rh-space-lg, 16px);
             }
-  
+
             & td:last-child {
               padding-block-end: var(--rh-space-lg, 16px);
             }
           }
-  
+
           &:nth-child(even) {
             background: var(--_row-background-hover-color);
           }
-  
+
           &:last-child {
             border-block-end: var(--_row-border);
           }
-          
+
           &:hover {
             background: var(---_column-background-hover-color);
           }
-  
+
           & > * {
             padding: var(--rh-space-lg, 16px);
           }
-  
+
           & :is(th, td) {
-            padding-block-start: calc(var(--rh-space-md, 8px) + var(--rh-space-xs, 4px));
-            padding-block-end: calc(var(--rh-space-md, 8px) + var(--rh-space-xs, 4px));
+            padding-block: calc(var(--rh-space-md, 8px) + var(--rh-space-xs, 4px));
             display: grid;
             grid-column-gap: var(--rh-space-lg, 16px);
             grid-template-columns: 1fr minmax(0, 1.5fr);
@@ -131,27 +146,19 @@ rh-table {
             word-wrap: break-word;
             text-align: start;
           }
-  
+
           & :is(td,th):before {
             font-weight: var(--rh-font-weight-heading-bold, 700);
             text-align: start;
             content: attr(data-label);
             display: inline-block;
           }
-  
+
           & th {
             text-align: center;
           }
         }
       }
     }
-
-    & *:not(thead) + tbody {
-      & tr {
-        display: grid;
-        grid-auto-columns: auto;
-        grid-auto-flow: column;
-      }
-    }
   }
 }
diff --git a/elements/rh-table/rh-table.css b/elements/rh-table/rh-table.css
@@ -10,7 +10,7 @@
   scrollbar-color: var(--_scrollbar-track-color) var(--_scrollbar-thumb-color);
   color: var(--rh-color-text-primary);
   background-color: var(--rh-color-surface);
-  
+
   --_scrollbar-size: calc(10 / 16 * 1rem);
   --_scrollbar-thumb-color: var(--rh-color-gray-50, #707070);
   --_scrollbar-track-color: var(--rh-color-border-subtle);