From ced85d104ad34336a251ea8eb9fc322aae940746 Mon Sep 17 00:00:00 2001
From: Alex Pott <alex.a.pott@googlemail.com>
Date: Thu, 31 Jul 2014 13:42:43 +0100
Subject: [PATCH] Issue #2287781 by alayham, herom: Fixed DropButton component
 does not look well in RTL page.

---
 core/misc/dropbutton/dropbutton.css           | 10 ++++-
 .../css/components/dropbutton.component.css   | 40 +++++++++++++++----
 2 files changed, 41 insertions(+), 9 deletions(-)

diff --git a/core/misc/dropbutton/dropbutton.css b/core/misc/dropbutton/dropbutton.css
index d754503d0b2..85c7e7190bf 100644
--- a/core/misc/dropbutton/dropbutton.css
+++ b/core/misc/dropbutton/dropbutton.css
@@ -39,10 +39,16 @@
   display: block;
   min-height: 2em;
   position: relative;
-  padding-right: 10em;
-  margin-right: 2em;
+  padding-right: 10em; /* LTR */
+  margin-right: 2em; /* LTR */
   max-width: 100%;
 }
+[dir="rtl"].js td .dropbutton-multiple {
+  padding-right: 0;
+  margin-right: 0;
+  padding-left: 10em;
+  margin-left: 2em;
+}
 .js td .dropbutton-multiple .dropbutton-action a,
 .js td .dropbutton-multiple .dropbutton-action input,
 .js td .dropbutton-multiple .dropbutton-action button {
diff --git a/core/themes/seven/css/components/dropbutton.component.css b/core/themes/seven/css/components/dropbutton.component.css
index 23d61681c03..6f9164e5035 100644
--- a/core/themes/seven/css/components/dropbutton.component.css
+++ b/core/themes/seven/css/components/dropbutton.component.css
@@ -32,7 +32,10 @@
   box-shadow: none;
 }
 .dropbutton-multiple .dropbutton {
-  border-right: 0;
+  border-right: 0; /* LTR */
+}
+[dir="rtl"] .dropbutton-multiple .dropbutton {
+  border-left: 0;
 }
 
 /**
@@ -54,11 +57,16 @@
 .js .dropbutton-widget .dropbutton-action a,
 .js .dropbutton-widget .dropbutton-action input,
 .js .dropbutton-widget .dropbutton-action button {
-  border-radius: 20em 0 0 20em;
+  border-radius: 20em 0 0 20em; /* LTR */
   padding: 4px 1.5em;
   display: block;
   width: 100%;
 }
+[dir="rtl"].js .dropbutton-widget .dropbutton-action a,
+[dir="rtl"].js .dropbutton-widget .dropbutton-action input,
+[dir="rtl"].js .dropbutton-widget .dropbutton-action button {
+  border-radius: 0 20em 20em 0;
+}
 .js .dropbutton-widget .dropbutton-action a:focus,
 .js .dropbutton-widget .dropbutton-action input:focus,
 .js .dropbutton-widget .dropbutton-action button:focus {
@@ -70,11 +78,19 @@
 }
 .js .dropbutton-multiple.open .dropbutton-action:first-child a,
 .js .dropbutton-multiple.open .dropbutton-action:first-child .button {
-  border-radius: 0.9em 0 0 0;
+  border-radius: 0.9em 0 0 0; /* LTR */
+}
+[dir="rtl"].js .dropbutton-multiple.open .dropbutton-action:first-child a,
+[dir="rtl"].js .dropbutton-multiple.open .dropbutton-action:first-child .button {
+  border-radius: 0 0.9em 0 0;
 }
 .js .dropbutton-multiple.open .dropbutton-action:last-child a,
 .js .dropbutton-multiple.open .dropbutton-action:last-child .button {
-  border-radius: 0 0 0 0.9em;
+  border-radius: 0 0 0 0.9em; /* LTR */
+}
+[dir="rtl"].js .dropbutton-multiple.open .dropbutton-action:last-child a,
+[dir="rtl"].js .dropbutton-multiple.open .dropbutton-action:last-child .button {
+  border-radius: 0 0 0.9em 0;
 }
 .js .dropbutton-wrapper .dropbutton-widget .dropbutton-action a:hover,
 .js .dropbutton-wrapper .dropbutton-widget .dropbutton-action button:hover,
@@ -164,14 +180,24 @@
  * The dropdown trigger.
  */
 .js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {
-  border-left: 1px solid #a6a6a6;
+  border-left: 1px solid #a6a6a6; /* LTR */
   outline: none;
 }
+[dir="rtl"].js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {
+  border-right: 1px solid #a6a6a6;
+  border-left: 0;
+}
 .js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {
-  border-radius: 0 20em 20em 0;
+  border-radius: 0 20em 20em 0; /* LTR */
+}
+[dir="rtl"].js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {
+  border-radius: 20em 0 0 20em;
 }
 .dropbutton-multiple.open .dropbutton-widget .dropbutton-toggle button {
-  border-radius: 0 1em 1em 0;
+  border-radius: 0 1em 1em 0; /* LTR */
+}
+[dir="rtl"] .dropbutton-multiple.open .dropbutton-widget .dropbutton-toggle button {
+  border-radius: 1em 0 0 1em;
 }
 .js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:hover,
 .js .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button:focus {