From d045f4a95840b73540c4a70706f66ddc037315dc Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Mon, 25 Jul 2016 14:39:26 -0400
Subject: [PATCH] (css) Improve Sieve filter editor layout

---
 UI/Templates/PreferencesUI/UIxFilterEditor.wox             | 4 ++--
 .../scss/components/pseudo-input/pseudo-input.scss         | 7 +++++++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/UI/Templates/PreferencesUI/UIxFilterEditor.wox b/UI/Templates/PreferencesUI/UIxFilterEditor.wox
index 58d6c5081..70b519345 100644
--- a/UI/Templates/PreferencesUI/UIxFilterEditor.wox
+++ b/UI/Templates/PreferencesUI/UIxFilterEditor.wox
@@ -94,7 +94,7 @@
           </div>
 
           <div layout="row" layout-align="end center">
-            <label class="button-label"><var:string label:value="Add a condition"/></label>
+            <label class="button-label button-label--right"><var:string label:value="Add a condition"/></label>
             <md-button class="md-icon-button" type="button"
                        ng-click="filterEditor.addMailFilterRule($event)">
               <md-icon>add_circle</md-icon>
@@ -172,7 +172,7 @@
           </div>
 
           <div layout="row" layout-align="end center">
-            <label class="button-label"><var:string label:value="Add an action"/></label>
+            <label class="button-label button-label--right"><var:string label:value="Add an action"/></label>
             <md-button class="md-icon-button" type="button"
                        ng-click="filterEditor.addMailFilterAction($event)">
               <md-icon>add_circle</md-icon>
diff --git a/UI/WebServerResources/scss/components/pseudo-input/pseudo-input.scss b/UI/WebServerResources/scss/components/pseudo-input/pseudo-input.scss
index 2263d3f2c..fd1b12b1b 100644
--- a/UI/WebServerResources/scss/components/pseudo-input/pseudo-input.scss
+++ b/UI/WebServerResources/scss/components/pseudo-input/pseudo-input.scss
@@ -40,6 +40,9 @@
   font-weight: $sg-font-regular;
   line-height: $sg-line-height-1;
   transform: scale($input-label-float-scale);
+}
+
+.pseudo-input-label {
   @include rtl(transform-origin, left top, right top);
 }
 
@@ -47,6 +50,10 @@
   @include rtl(transform-origin, left center, right center);
 }
 
+.button-label--right {
+  @include rtl(transform-origin, right center, left center);
+}
+
 .pseudo-input-label--no-margin,
 .button-label {
   margin-top: 0;