Issue #2942011 by tsega, imalabya, robindh, David_Rothstein, Eli-T, Gábor Hojtsy, markconroy, aburrows, ckrina, Gvert, alexpott, cchoudhary: Umami demo has display problems in right-to-left languages

(cherry picked from commit 749f569c6aa0f8ac20fda61a8903106ce788034c)

12 files changed, 109 insertions, 23 deletions

diff --git a/core/profiles/demo_umami/themes/umami/css/components/blocks/footer-promo/footer-promo.css b/core/profiles/demo_umami/themes/umami/css/components/blocks/footer-promo/footer-promo.css
index 8476f1a..7486d48 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/blocks/footer-promo/footer-promo.css
+++ b/core/profiles/demo_umami/themes/umami/css/components/blocks/footer-promo/footer-promo.css
@@ -36,6 +36,9 @@
   background: url('../../../../images/svg/pointer--white.svg') no-repeat center center;
   vertical-align: middle;
 }
+[dir=rtl] .block-type-footer-promo-block .footer-promo-content a:after {
+  transform: rotate(180deg);
+}
 
 @media screen and (min-width: 60rem) {
   .block-type-footer-promo-block {
diff --git a/core/profiles/demo_umami/themes/umami/css/components/blocks/search/search-results.css b/core/profiles/demo_umami/themes/umami/css/components/blocks/search/search-results.css
index 06c1963..b140da4 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/blocks/search/search-results.css
+++ b/core/profiles/demo_umami/themes/umami/css/components/blocks/search/search-results.css
@@ -19,6 +19,7 @@
 .search-form #edit-basic {
   display: flex;
   align-items: flex-end;
+  flex: 1 1;
 }
 .search-form .form-type-search {
   margin: 0;
@@ -43,6 +44,7 @@
 .search-form .search-help-link {
   padding: 1.28rem;
   margin: 0 1rem 1rem 0;
+  flex: 1 1;
 }
 
 .search-form #edit-advanced {
@@ -96,7 +98,11 @@
   background: #fff;
   border: 1px solid #fcece7;
   padding: 1.28rem;
-  margin: 0 0 1rem 0;
+  margin: 0 0 1rem 0; /* LTR */
+}
+/* Apply right margin to keep aligned with title and exposed filter. */
+[dir=rtl] .search-results li {
+  margin: 0 1rem 1rem 0;
 }
 
 .search-results .search-result__snippet {
diff --git a/core/profiles/demo_umami/themes/umami/css/components/blocks/search/search.css b/core/profiles/demo_umami/themes/umami/css/components/blocks/search/search.css
index fe36842..176a09c 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/blocks/search/search.css
+++ b/core/profiles/demo_umami/themes/umami/css/components/blocks/search/search.css
@@ -4,7 +4,7 @@
  */
 
 .search-form + h2 {
-  margin: 0 14px 1rem;
+  margin: 0 1rem 1rem;
 }
 
 .search-block-form {
@@ -67,22 +67,32 @@
   width: 20em;
   max-width: calc(100vw - 6.25em);
   height: auto;
-  margin: 0 -2px 0 0;
+  margin: 0 -2px 0 0; /* LTR */
   padding: 7px 8px 7px 32px;
   color: #464646;
-  border: 1px solid #dbdbdb;
-  border-right: none;
+  border: 1px solid #dbdbdb; /* LTR */
+  border-right: none; /* LTR */
   border-radius: 3px;
   background: url(../../../../images/svg/search.svg) no-repeat 0.5em center #fff;
   font-size: 0.875rem;
   line-height: normal;
 }
+[dir=rtl] .form-search {
+  margin: 0 0 0 -2px;
+  border-left: none;
+  border-right: 1px solid #dbdbdb;
+}
 
 .form-search:focus {
-  margin: 0 0 -2px -2px;
+  margin: 0 0 -2px -2px; /* LTR */
   padding: 5px 8px 5px 32px;
   outline: none;
 }
+[dir=rtl] .form-search:focus {
+  margin: 0 -2px -2px 0;
+  background-position: 0.35em;
+  border: 3px solid #00836d;
+}
 
 .form-search::placeholder {
   opacity: 1;
@@ -101,8 +111,16 @@
 .search-block-form .form-submit,
 .search-form .form-submit {
   /* Take off the border radius on the left side as it bumps into the search field */
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
+  border-top-left-radius: 0; /* LTR */
+  border-bottom-left-radius: 0; /* LTR */
+}
+[dir=rtl] .search-block-form .form-submit,
+[dir=rtl] .search-form .form-submit {
+  /* Take off the border radius on the left side as it bumps into the search field */
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }
 
 .search-block-form .form-submit:focus,
@@ -110,6 +128,14 @@
 .search-form .form-submit:focus,
 .search-form .form-submit:hover {
   margin: 0;
-  border-top-left-radius: 4px;
-  border-bottom-left-radius: 4px;
+  border-top-left-radius: 4px; /* LTR */
+  border-bottom-left-radius: 4px; /* LTR */
+}
+/* Apply border radius to all corners to override LTR and RTL (normal state) changes. */
+[dir=rtl] .search-block-form .form-submit:focus,
+[dir=rtl] .search-block-form .form-submit:hover,
+[dir=rtl] .search-form .form-submit:focus,
+[dir=rtl] .search-form .form-submit:hover {
+  margin: 0;
+  border-radius: 4px;
 }
diff --git a/core/profiles/demo_umami/themes/umami/css/components/content-types/recipe/recipe.css b/core/profiles/demo_umami/themes/umami/css/components/content-types/recipe/recipe.css
index 453d8b2..ac1aff7 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/content-types/recipe/recipe.css
+++ b/core/profiles/demo_umami/themes/umami/css/components/content-types/recipe/recipe.css
@@ -36,11 +36,19 @@
   align-items: center;
   min-height: 40px;
   margin-bottom: 0.96em;
-  padding-left: 48px;
+  padding-left: 48px; /* LTR */
   background-repeat: no-repeat;
-  background-position: left center;
+  background-position: left center; /* LTR */
   background-size: 40px 40px;
 }
+[dir=rtl] .node--type-recipe.node--view-mode-full .field--name-field-preparation-time,
+[dir=rtl] .node--type-recipe.node--view-mode-full .field--name-field-cooking-time,
+[dir=rtl] .node--type-recipe.node--view-mode-full .field--name-field-number-of-servings,
+[dir=rtl] .node--type-recipe.node--view-mode-full .field--name-field-difficulty {
+  background-position: right center;
+  padding-left: 0;
+  padding-right: 48px;
+}
 .node--type-recipe.node--view-mode-full .field--name-field-preparation-time {
   background-image: url(../../../../images/svg/knife.svg);
 }
diff --git a/core/profiles/demo_umami/themes/umami/css/components/fields/recipe-instruction.css b/core/profiles/demo_umami/themes/umami/css/components/fields/recipe-instruction.css
index af9ee7e..6b3797e 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/fields/recipe-instruction.css
+++ b/core/profiles/demo_umami/themes/umami/css/components/fields/recipe-instruction.css
@@ -28,15 +28,22 @@
 .field--name-field-recipe-instruction ol > li {
   position: relative;
   min-height: 1.5em;
-  padding: 0 0 0.6em 2.5em;
+  padding: 0 0 0.6em 2.5em; /* LTR */
   list-style: none;
   counter-increment: step-counter;
 }
+[dir=rtl] .field--name-field-recipe-instruction ol > li {
+  padding: 0 2.5em 0.6em 0;
+}
 .field--name-field-recipe-instruction ol > li::before {
   position: absolute;
   top: 0;
-  left: 0;
+  left: 0; /* LTR */
   content: counter(step-counter);
   color: #cc2a00;
   font-size: 1.5rem;
 }
+[dir=rtl] .field--name-field-recipe-instruction ol > li::before {
+  right: 0;
+  left: auto;
+}
diff --git a/core/profiles/demo_umami/themes/umami/css/components/forms/contact.css b/core/profiles/demo_umami/themes/umami/css/components/forms/contact.css
index 5ba7810..b1d265f 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/forms/contact.css
+++ b/core/profiles/demo_umami/themes/umami/css/components/forms/contact.css
@@ -41,6 +41,10 @@
 
 @media screen and (min-width: 30rem) { /* 480px */
   .contact-form .form-actions .button {
-    margin-left: 1em;
+    margin-left: 1em; /* LTR */
+  }
+  [dir=rtl] .contact-form .form-actions .button + .button {
+    margin-right: 1em;
+    margin-left: 0;
   }
 }
diff --git a/core/profiles/demo_umami/themes/umami/css/components/messages/messages.css b/core/profiles/demo_umami/themes/umami/css/components/messages/messages.css
index d7a4f04..b49bc8e 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/messages/messages.css
+++ b/core/profiles/demo_umami/themes/umami/css/components/messages/messages.css
@@ -17,7 +17,10 @@
   margin-top: 1.538em;
 }
 .messages__content {
-  background: no-repeat 0 center;
+  background: no-repeat 0 center; /* LTR */
+}
+[dir=rtl] .messages__content {
+  background-position: right;
 }
 .messages--status {
   background-color: #e6eee0;
@@ -49,7 +52,11 @@
   margin: 0;
 }
 .messages__item {
-  margin-left: 24px;
+  margin-left: 24px; /* LTR */
+}
+[dir=rtl] .messages__item {
+  margin-left: 0;
+  margin-right: 24px;
 }
 .messages__item + .messages__item {
   margin-top: 0.769em;
diff --git a/core/profiles/demo_umami/themes/umami/css/components/navigation/breadcrumbs/breadcrumbs.css b/core/profiles/demo_umami/themes/umami/css/components/navigation/breadcrumbs/breadcrumbs.css
index f04578f..6cfde97 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/navigation/breadcrumbs/breadcrumbs.css
+++ b/core/profiles/demo_umami/themes/umami/css/components/navigation/breadcrumbs/breadcrumbs.css
@@ -5,6 +5,9 @@
 .breadcrumb {
   padding: 0.79rem 1.266rem;
 }
+.breadcrumb li {
+  display: inline-block;
+}
 /* Large */
 @media screen and (min-width: 60rem) { /* 960px */
   .breadcrumb {
diff --git a/core/profiles/demo_umami/themes/umami/css/components/navigation/menu-account/menu-account.css b/core/profiles/demo_umami/themes/umami/css/components/navigation/menu-account/menu-account.css
index ac4f391..563a902 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/navigation/menu-account/menu-account.css
+++ b/core/profiles/demo_umami/themes/umami/css/components/navigation/menu-account/menu-account.css
@@ -7,7 +7,10 @@
   .menu--account {
     display: block;
     flex: 0 1 50%;
-    text-align: right;
+    text-align: right; /* LTR */
+  }
+  [dir="rtl"] .menu--account {
+    text-align: left;
   }
 }
 
@@ -19,7 +22,11 @@
   line-height: 1.5;
 }
 .menu-account__item + .menu-account__item {
-  margin-left: 1em;
+  margin-left: 1em; /* LTR */
+}
+[dir="rtl"] .menu-account__item + .menu-account__item {
+  margin-left: 0;
+  margin-right: 1em;
 }
 .menu-account__link,
 .menu-account__link:hover {
diff --git a/core/profiles/demo_umami/themes/umami/css/components/navigation/menu-main/menu-main.css b/core/profiles/demo_umami/themes/umami/css/components/navigation/menu-main/menu-main.css
index 44b715b..54c54d9 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/navigation/menu-main/menu-main.css
+++ b/core/profiles/demo_umami/themes/umami/css/components/navigation/menu-main/menu-main.css
@@ -86,7 +86,11 @@
     margin-bottom: 0;
   }
   .menu-main__item + .menu-main__item {
-    margin-left: 2.5em;
+    margin-left: 2.5em; /* LTR */
+  }
+  [dir="rtl"] .menu-main__item + .menu-main__item {
+    margin-left: 0;
+    margin-right: 2.5em;
   }
 }
 
diff --git a/core/profiles/demo_umami/themes/umami/css/components/navigation/tabs/tabs.css b/core/profiles/demo_umami/themes/umami/css/components/navigation/tabs/tabs.css
index 79cc119..84e0b09 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/navigation/tabs/tabs.css
+++ b/core/profiles/demo_umami/themes/umami/css/components/navigation/tabs/tabs.css
@@ -13,9 +13,12 @@
   padding: 0;
 }
 .tabs .tab {
-  margin: 0;
+  margin: 0; /* LTR */
   background-color: #e6eee0;
 }
+[dir=rtl] .tabs .tab {
+  margin: 0;
+}
 .tabs .tab.is-active {
   background-color: #fff;
 }
diff --git a/core/profiles/demo_umami/themes/umami/css/components/views/promoted-items.css b/core/profiles/demo_umami/themes/umami/css/components/views/promoted-items.css
index b81adae..0ad4107 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/views/promoted-items.css
+++ b/core/profiles/demo_umami/themes/umami/css/components/views/promoted-items.css
@@ -47,9 +47,13 @@
 @media screen and (min-width: 60rem) { /* 960px */
   .view-promoted-items--single > .view-content {
     flex: 0 0 50%;
-    margin-right: 14px;
+    margin-right: 14px; /* LTR */
     display: flex;
   }
+  [dir=rtl] .view-promoted-items--single > .view-content {
+    margin-right: 0;
+    margin-left: 14px;
+  }
 }
 
 .view-promoted-items--single > .view-content .views-row {
@@ -72,9 +76,13 @@
 /* Large */
 @media screen and (min-width: 60rem) { /* 960px */
   .view-promoted-items--single > .attachment-after {
-    margin-left: 14px;
+    margin-left: 14px; /* LTR */
     display: flex;
   }
+  [dir=rtl] .view-promoted-items--single > .attachment-after {
+    margin-left: 0;
+    margin-right: 14px;
+  }
 }
 
 /* Large */