Issue #2994947 by dead_arm, mark_fullmer, alexpott, kostyashupenko,...

Issue #2994947 by dead_arm, mark_fullmer, alexpott, kostyashupenko, brad.bulger, tim.plunkett, PCate: Add RTL CSS to Layout Builder

(cherry picked from commit 8ea70237)

core/modules/layout_builder/css/layout-builder.css

@@ -14,10 +14,16 @@
 }
 
 .layout-builder__link--add {
-  padding-left: 24px;
+  padding-left: 24px; /* LTR */
   color: #686868;
   border-bottom: none;
-  background: url(../../../misc/icons/686868/plus.svg) transparent top left / 16px 16px no-repeat;
+  background: url(../../../misc/icons/787878/plus.svg) transparent top left / 16px 16px no-repeat; /* LTR */
+}
+
+[dir="rtl"] .layout-builder__link--add {
+  padding-right: 24px;
+  padding-left: 0;
+  background-position-x: right;
 }
 
 .layout-builder__link--add:hover,
@@ -60,8 +66,8 @@
   box-sizing: border-box;
   width: 26px;
   height: 26px;
-  margin-right: 6px;
-  margin-left: -10px;
+  margin-right: 6px; /* LTR */
+  margin-left: -10px; /* LTR */
   padding: 0;
   white-space: nowrap;
   text-indent: -9999px;
@@ -71,6 +77,11 @@
   font-size: 1rem;
 }
 
+[dir="rtl"] .layout-builder__link--remove {
+  margin-right: -10px;
+  margin-left: 6px;
+}
+
 .layout-builder__link--remove:hover {
   background-image: url(../../../misc/icons/787878/ex.svg);
 }

core/themes/stable/css/layout_builder/layout-builder.css

@@ -14,10 +14,16 @@
 }
 
 .layout-builder__link--add {
-  padding-left: 24px;
+  padding-left: 24px; /* LTR */
   color: #686868;
   border-bottom: none;
-  background: url(../../../../misc/icons/686868/plus.svg) transparent top left / 16px 16px no-repeat;
+  background: url(../../../../misc/icons/787878/plus.svg) transparent top left / 16px 16px no-repeat; /* LTR */
+}
+
+[dir="rtl"] .layout-builder__link--add {
+  padding-right: 24px;
+  padding-left: 0;
+  background-position-x: right;
 }
 
 .layout-builder__link--add:hover,
@@ -60,8 +66,8 @@
   box-sizing: border-box;
   width: 26px;
   height: 26px;
-  margin-right: 6px;
-  margin-left: -10px;
+  margin-right: 6px; /* LTR */
+  margin-left: -10px; /* LTR */
   padding: 0;
   white-space: nowrap;
   text-indent: -9999px;
@@ -71,6 +77,11 @@
   font-size: 1rem;
 }
 
+[dir="rtl"] .layout-builder__link--remove {
+  margin-right: -10px;
+  margin-left: 6px;
+}
+
 .layout-builder__link--remove:hover {
   background-image: url(../../../../misc/icons/787878/ex.svg);
 }