Issue #3410681 by charlliequadros, hritik parihar, ahsannazir, smustgrave,...

Issue #3410681 by charlliequadros, hritik parihar, ahsannazir, smustgrave, finnsky, akshayadhav, larowlan: Remove @nest from claro stylesheets

(cherry picked from commit 293fe02e)

core/themes/claro/css/components/breadcrumb.pcss.css

@@ -29,7 +29,7 @@
   padding: 0 0.75rem;
   content: url(../../images/icons/currentColor/arrow-breadcrumb.svg);
 
-  @nest [dir="rtl"] & {
+  [dir="rtl"] & {
     transform: scaleX(-1);
   }
 

core/themes/claro/css/components/card.pcss.css

@@ -143,7 +143,7 @@
   margin-block: 0;
   text-align: right; /* LTR */
 
-  @nest [dir="rtl"] & {
+  [dir="rtl"] & {
     text-align: left;
   }
 }

core/themes/claro/css/components/details.css

@@ -176,6 +176,7 @@ td .claro-details {
     border-inline-end: 0.125rem solid;
     background: none;
   }
+
   [dir="rtl"] .claro-details__summary::before {
     transform: rotate(-225deg);
   }

core/themes/claro/css/components/details.pcss.css

@@ -49,7 +49,7 @@
    * element constrains the width. This can happen when toggling the
    * "lazy-load" option within an image field.
    */
-  @nest td & {
+  td & {
     width: min-content;
     min-width: 100%;
   }
@@ -142,7 +142,7 @@
   background-image: url(../../images/icons/545560/chevron-right.svg);
   background-size: contain;
 
-  @nest [dir="rtl"] & {
+  [dir="rtl"] & {
     transform: rotate(-270deg);
   }
 }
@@ -165,7 +165,7 @@
     border-inline-end: 0.125rem solid;
     background: none;
 
-    @nest [dir="rtl"] & {
+    [dir="rtl"] & {
       transform: rotate(-225deg);
     }
   }
@@ -310,7 +310,7 @@
   border-width: 0 0 0 var(--details-summary-focus-border-size); /* LTR */
   box-shadow: none;
 
-  @nest [dir="rtl"] & {
+  [dir="rtl"] & {
     border-width: 0 var(--details-summary-focus-border-size) 0 0;
   }
 }

core/themes/claro/css/components/form--checkbox-radio.pcss.css

@@ -21,7 +21,7 @@
   margin-inline-start: calc(var(--input--label-spacing) * -1);
   transform: translateY(-50%);
 
-  @nest [dir="rtl"] & {
+  [dir="rtl"] & {
     float: right;
   }
 }

core/themes/claro/css/components/form--managed-file.pcss.css

@@ -79,7 +79,7 @@
     }
   }
 
-  @nest .draggable .form-managed-file.has-value & {
+  .draggable .form-managed-file.has-value & {
     /**
      * In tables, this should be inline-flex. This is needed to make this element be
      * pushed to a new line, to the bottom of the drag handle.
@@ -98,7 +98,7 @@
   max-width: 100%;
   margin-block-end: var(--space-m);
 
-  @nest .form-managed-file.has-meta & {
+  .form-managed-file.has-meta & {
     /* Add some 'end' margin if there are other meta inputs. */
     margin-inline-end: var(--space-m);
   }
@@ -107,7 +107,7 @@
    * If this is rendered inside a file multiple table and there are no alt or
    * title, we have to reduce the amount of the bottom margin.
    */
-  @nest td .form-managed-file.no-meta & {
+  td .form-managed-file.no-meta & {
     margin-block-end: var(--space-xs);
   }
 }
@@ -164,11 +164,11 @@
   }
 
   /* Add some bottom margin for single widgets if no meta is present. */
-  @nest .form-managed-file.is-single.has-value &:last-child {
+  .form-managed-file.is-single.has-value &:last-child {
     margin-block-end: var(--space-m);
   }
 
-  @nest .draggable .form-managed-file.has-value & {
+  .draggable .form-managed-file.has-value & {
     /**
      * Inside (draggable) tables, this should be flex-displayed. This keeps even
      * long file names in the same visual line where the drag handle is.

core/themes/claro/css/components/form--password-confirm.pcss.css

@@ -21,7 +21,7 @@
 .password-confirm__confirm {
   margin-block-end: 0;
 
-  @nest .js & {
+  .js & {
     max-height: 10rem;
     transition:
       max-height var(--speed-transition) ease-in-out,
@@ -125,7 +125,7 @@
   font-size: var(--progress-bar-description-font-size);
   line-height: var(--space-m);
 
-  @nest .is-initial.is-password-empty & {
+  .is-initial.is-password-empty & {
     margin: 0;
     line-height: 0;
   }
@@ -163,7 +163,7 @@
   color: var(--progress-bar-description-color);
   font-size: var(--progress-bar-description-font-size);
 
-  @nest .is-confirm-empty & {
+  .is-confirm-empty & {
     visibility: hidden;
   }
 }

core/themes/claro/css/components/form--select.pcss.css

@@ -20,12 +20,13 @@
     background-image: url(../../images/icons/8e929c/chevron-down.svg);
   }
 
-  @nest [dir="rtl"] & {
+  [dir="rtl"] & {
     background-position: 0 50%;
   }
 
-  @nest .no-touchevents & {
-    &.form-element--extrasmall, &[name$="][_weight]"] {
+  .no-touchevents & {
+    &.form-element--extrasmall,
+    &[name$="][_weight]"] {
       padding-inline-end: calc(1.5rem - var(--input-border-size));
       background-size: 1.75rem 0.4375rem; /* w: 14px + (2 * 7px), h: 7px */
     }

core/themes/claro/css/components/messages.pcss.css

@@ -56,7 +56,7 @@
     margin: 0;
   }
 
-  @nest [dir="rtl"] & {
+  [dir="rtl"] & {
     border-right-width: var(--messages-border-width);
     border-left-width: 0;
   }
@@ -97,7 +97,7 @@
   align-items: center;
   margin-block-end: var(--space-m);
 
-  @nest [dir="rtl"] & {
+  [dir="rtl"] & {
     background-position: center right;
   }
 }

core/themes/claro/css/components/page-title.pcss.css

@@ -17,7 +17,7 @@
   font-size: var(--font-size-h1);
   -webkit-font-smoothing: antialiased;
 
-  @nest .region-header > & {
+  .region-header > & {
     /**
      * In this case page title is not rendered as a block ¯\_(ツ)_/¯.
      *

core/themes/claro/css/components/shortcut.pcss.css

@@ -48,19 +48,21 @@
   vertical-align: -0.0625rem;
   background: transparent url(../../images/shortcut/favstar.svg) left top / calc(var(--shortcut-icon-size) * 4) var(--shortcut-icon-size) no-repeat;
 
-  @nest .shortcut-action--add:hover &, .shortcut-action--add:focus & {
+  .shortcut-action--add:hover &,
+  .shortcut-action--add:focus & {
     background-position: calc(-1 * var(--shortcut-icon-size)) top;
   }
 
-  @nest .shortcut-action--remove & {
+  .shortcut-action--remove & {
     background-position: calc(-2 * var(--shortcut-icon-size)) top;
   }
 
-  @nest .shortcut-action--remove:focus &, .shortcut-action--remove:hover & {
+  .shortcut-action--remove:focus &,
+  .shortcut-action--remove:hover & {
     background-position: calc(-3 * var(--shortcut-icon-size)) top;
   }
 
-  @nest [dir="rtl"] & {
+  [dir="rtl"] & {
     background-image: url(../../images/shortcut/favstar-rtl.svg);
   }
 }

core/themes/claro/css/components/system-admin--admin-list.pcss.css

@@ -51,7 +51,7 @@
   background: transparent no-repeat 50% 50%;
   background-image: url(../../images/icons/003ecc/arrow-right.svg);
 
-  @nest [dir="rtl"] & {
+  [dir="rtl"] & {
     transform: scaleX(-1);
   }
 

core/themes/claro/css/components/system-status-counter.css

@@ -35,6 +35,10 @@
   background-position: right center;
   background-size: 2.5rem;
 }
+[dir="rtl"] .system-status-counter__status-icon::before {
+  border-inline-end: 1px solid #e6e4df;
+  border-inline-start: 0;
+}
 @media (forced-colors: active) {
   .system-status-counter__status-icon::before {
     background-color: canvastext;
@@ -44,9 +48,6 @@
     mask-size: 2.5rem;
   }
 }
-[dir="rtl"] .system-status-counter__status-icon::before {
-  background-position: left center;
-}
 .system-status-counter__status-icon--error::before {
   background-image: var(--system-status-counter-status-icon-error);
 }

core/themes/claro/css/components/system-status-counter.pcss.css

@@ -30,6 +30,11 @@
     background-position: right center;
     background-size: 40px;
 
+    [dir="rtl"] & {
+      border-inline-end: 1px solid #e6e4df;
+      border-inline-start: 0;
+    }
+
     @media (forced-colors: active) {
       background-color: canvastext;
       background-image: none;
@@ -37,10 +42,6 @@
       mask-position: right center;
       mask-size: 40px;
     }
-
-    @nest [dir="rtl"] & {
-      background-position: left center;
-    }
   }
 }
 

core/themes/claro/css/components/tabledrag.pcss.css

@@ -53,16 +53,16 @@ body.drag-y {
 
 .tabledrag-changed {
   /* Don't display the abbreviation of 'add-new' table rows. */
-  @nest .add-new & {
+  .add-new & {
     display: none;
   }
 
-  @nest .draggable & {
+  .draggable & {
     position: relative;
     inset-inline-start: calc(var(--space-xs) * -1);
   }
 
-  @nest .tabledrag-cell--only-drag & {
+  .tabledrag-cell--only-drag & {
     width: var(--space-l);
     min-width: var(--space-l);
   }
@@ -189,7 +189,7 @@ body.drag-y {
   text-align: end;
 
   /* Hide nested weight toggles as they are redundant. */
-  @nest .draggable-table & {
+  .draggable-table & {
     display: none;
   }
 }
@@ -251,7 +251,7 @@ body.drag-y {
   background: none !important;
   line-height: 0;
 
-  @nest .tabledrag-cell-content & {
+  .tabledrag-cell-content & {
     /* Fixes Safari bug (16.1 at least) where table rows are overly large when
       using indentation (e.g. re-ordering menu items. */
     display: inline-flex;
@@ -261,7 +261,7 @@ body.drag-y {
     height: 100%;
   }
 
-  @nest [dir="rtl"] & {
+  [dir="rtl"] & {
     float: right;
   }
 }

core/themes/claro/css/components/vertical-tabs.pcss.css

@@ -27,7 +27,7 @@
   list-style: none;
   color: var(--color-text);
 
-  @nest [dir="rtl"] & {
+  [dir="rtl"] & {
     float: right;
   }
 }
@@ -224,7 +224,7 @@
   margin-inline-start: var(--vertical-tabs-menu-width);
   border-top-left-radius: 0;
 
-  @nest [dir="rtl"] & {
+  [dir="rtl"] & {
     border-top-left-radius: var(--vertical-tabs-border-radius);
   }
 }

core/themes/claro/css/components/views_ui.admin.pcss.css

@@ -50,7 +50,7 @@
       margin-inline-start: 0;
     }
 
-    @nest [dir="rtl"] & {
+    [dir="rtl"] & {
       & > * {
         float: right;
       }