Issue #3332473 by Mithun S, Gauravvvv, rupeshghar, smustgrave, lauriii:...

Issue #3332473 by Mithun S, Gauravvvv, rupeshghar, smustgrave, lauriii: Refactor Claro's table--file-multiple-widget stylesheet

(cherry picked from commit 901d6d8a)

core/themes/claro/css/components/table--file-multiple-widget.css

@@ -28,33 +28,23 @@
   padding: 0;
 }
 
-.table-file-multiple-widget .tabledrag-handle {
-  float: left; /* LTR */
-}
-
-[dir="rtl"] .table-file-multiple-widget .tabledrag-handle {
-  float: right;
+.table-file-multiple-widget .tabledrag-handle,
+.table-file-multiple-widget .tabledrag-changed {
+  float: left;
 }
 
 .table-file-multiple-widget .tabledrag-changed {
-  float: left; /* LTR */
   line-height: calc(var(--tabledrag-handle-icon-size) + calc(var(--space-xs) * 2));
 }
 
-[dir="rtl"] .table-file-multiple-widget .tabledrag-changed {
-  float: left;
-}
-
 .table-file-multiple-widget td {
   height: calc(var(--space-m) * 3);
+  padding-block: var(--space-m);
 }
 
-.table-file-multiple-widget td > :first-child {
-  margin-top: 0;
-}
-
+.table-file-multiple-widget td > :first-child,
 .table-file-multiple-widget td > :last-child {
-  margin-bottom: 0;
+  margin-block: 0;
 }
 
 .table-file-multiple-widget .button.button:only-child {
@@ -68,20 +58,19 @@
   font-size: var(--font-size-s);
 }
 
-.table-file-multiple-widget td {
-  padding-top: var(--space-m);
-  padding-bottom: var(--space-m);
-}
-
 .table-file-multiple-widget .tabledrag-cell {
-  padding-top: var(--space-xs);
-  padding-bottom: var(--space-xs);
+  padding-block: var(--space-xs);
 }
 
 .table-file-multiple-widget .checkbox .form-type--boolean {
   line-height: calc(var(--space-m) * 3);
 }
 
+[dir="rtl"] .table-file-multiple-widget .tabledrag-handle,
+[dir="rtl"] .table-file-multiple-widget .tabledrag-changed {
+  float: right;
+}
+
 .no-touchevents .table-file-multiple-widget .checkbox .form-type--boolean {
   line-height: var(--line-height);
 }
@@ -101,7 +90,7 @@
  */
 
 .table-file-multiple-widget--no-upload > tbody:last-child > tr:last-child {
-  border-bottom: 0;
+  border-block-end: 0;
 }
 
 /**
@@ -110,12 +99,9 @@
 
 @media screen and (max-width: 37.5em) {
   .claro-details__wrapper .file-widget-multiple__table-wrapper {
-    margin-right: calc(var(--space-m) * -1);
-    margin-left: calc(var(--space-m) * -1);
+    margin-inline: calc(var(--space-m) * -1);
   }
-
   .claro-details__wrapper .file-widget-multiple__table-wrapper > :not(table) {
-    margin-right: var(--space-m);
-    margin-left: var(--space-m);
+    margin-inline: var(--space-m);
   }
 }

core/themes/claro/css/components/table--file-multiple-widget.pcss.css

@@ -3,73 +3,59 @@
  * Styles for multiple file widget table.
  */
 
-.table-file-multiple-widget tbody {
+.table-file-multiple-widget {
+  & tbody {
     vertical-align: top;
   }
-
-.table-file-multiple-widget .tabledrag-cell-content {
+  & .tabledrag-cell-content {
     position: relative;
     display: block;
     height: auto;
-}
 
-.table-file-multiple-widget .tabledrag-cell-content > * {
+    & > * {
       display: block;
     }
-
-.table-file-multiple-widget .tabledrag-cell-content__item {
-  padding: 0;
   }
-
-.table-file-multiple-widget .tabledrag-handle {
-  float: left; /* LTR */
+  & .tabledrag-cell-content__item {
+    padding: 0;
   }
-[dir="rtl"] .table-file-multiple-widget .tabledrag-handle {
-  float: right;
+  & .tabledrag-handle,
+  & .tabledrag-changed {
+    float: left;
   }
-
-.table-file-multiple-widget .tabledrag-changed {
-  float: left; /* LTR */
+  & .tabledrag-changed {
     line-height: calc(var(--tabledrag-handle-icon-size) + calc(var(--space-xs) * 2));
   }
-[dir="rtl"] .table-file-multiple-widget .tabledrag-changed {
-  float: left;
-}
-
-.table-file-multiple-widget td {
+  & td {
     height: calc(var(--space-m) * 3);
+    padding-block: var(--space-m);
+    & > :first-child,
+    & > :last-child {
+      margin-block: 0;
     }
-
-.table-file-multiple-widget td > :first-child {
-  margin-top: 0;
-}
-.table-file-multiple-widget td > :last-child {
-  margin-bottom: 0;
   }
-
-.table-file-multiple-widget .button.button:only-child {
+  & .button.button:only-child {
     margin: 0;
   }
-
-.table-file-multiple-widget th {
+  & th {
     height: calc(var(--space-m) * 2);
     color: var(--color-gray-800);
     background: var(--color-gray-050);
     font-size: var(--font-size-s);
   }
-
-.table-file-multiple-widget td {
-  padding-top: var(--space-m);
-  padding-bottom: var(--space-m);
+  & .tabledrag-cell {
+    padding-block: var(--space-xs);
+  }
+  & .checkbox .form-type--boolean {
+    line-height: calc(var(--space-m) * 3);
   }
-
-.table-file-multiple-widget .tabledrag-cell {
-  padding-top: var(--space-xs);
-  padding-bottom: var(--space-xs);
 }
 
-.table-file-multiple-widget .checkbox .form-type--boolean {
-  line-height: calc(var(--space-m) * 3);
+[dir="rtl"] .table-file-multiple-widget {
+  & .tabledrag-handle,
+  & .tabledrag-changed {
+    float: right;
+  }
 }
 
 .no-touchevents .table-file-multiple-widget .checkbox .form-type--boolean {
@@ -89,7 +75,7 @@
  * (A full file widget with limited cardinality.)
  */
 .table-file-multiple-widget--no-upload > tbody:last-child > tr:last-child {
-  border-bottom: 0;
+  border-block-end: 0;
 }
 
 /**
@@ -97,12 +83,9 @@
  */
 @media screen and (max-width: 37.5em) {
   .claro-details__wrapper .file-widget-multiple__table-wrapper {
-    margin-right: calc(var(--space-m) * -1);
-    margin-left: calc(var(--space-m) * -1);
+    margin-inline: calc(var(--space-m) * -1);
+    & > :not(table) {
+      margin-inline: var(--space-m);
     }
-
-  .claro-details__wrapper .file-widget-multiple__table-wrapper > :not(table) {
-    margin-right: var(--space-m);
-    margin-left: var(--space-m);
   }
 }