summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorGábor Hojtsy2018-11-10 09:40:09 (GMT)
committerGábor Hojtsy2018-11-10 09:40:53 (GMT)
commit50c8796164ff344dadb0562c2cfba9b716718eb5 (patch)
treeb4a6514584d2e6dda1a5c8b2a0cbeef3ec5aa217
parent5d17da1f3105aee67ba70bc4f2bccba1ea4c60cc (diff)
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)
-rw-r--r--core/profiles/demo_umami/themes/umami/css/components/blocks/footer-promo/footer-promo.css3
-rw-r--r--core/profiles/demo_umami/themes/umami/css/components/blocks/search/search-results.css8
-rw-r--r--core/profiles/demo_umami/themes/umami/css/components/blocks/search/search.css44
-rw-r--r--core/profiles/demo_umami/themes/umami/css/components/content-types/recipe/recipe.css12
-rw-r--r--core/profiles/demo_umami/themes/umami/css/components/fields/recipe-instruction.css11
-rw-r--r--core/profiles/demo_umami/themes/umami/css/components/forms/contact.css6
-rw-r--r--core/profiles/demo_umami/themes/umami/css/components/messages/messages.css11
-rw-r--r--core/profiles/demo_umami/themes/umami/css/components/navigation/breadcrumbs/breadcrumbs.css3
-rw-r--r--core/profiles/demo_umami/themes/umami/css/components/navigation/menu-account/menu-account.css11
-rw-r--r--core/profiles/demo_umami/themes/umami/css/components/navigation/menu-main/menu-main.css6
-rw-r--r--core/profiles/demo_umami/themes/umami/css/components/navigation/tabs/tabs.css5
-rw-r--r--core/profiles/demo_umami/themes/umami/css/components/views/promoted-items.css12
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 */