This is an automated email from the ASF dual-hosted git repository.

carlosrovira pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git


The following commit(s) were added to refs/heads/develop by this push:
     new cffe2f5  jewel-button: icon position styles improved
cffe2f5 is described below

commit cffe2f5b9f081fb11613337dff8a4080f4aa87a3
Author: Carlos Rovira <[email protected]>
AuthorDate: Mon Mar 4 17:22:03 2019 +0100

    jewel-button: icon position styles improved
---
 .../src/main/royale/ButtonPlayGround.mxml          | 25 ++++++++++++++++------
 .../royale/org/apache/royale/jewel/IconButton.as   | 18 ++++++++--------
 .../royale/org/apache/royale/jewel/ToggleButton.as | 10 ++++-----
 .../src/main/resources/defaults.css                | 12 +++++++++--
 .../src/main/resources/defaults.css                | 12 +++++++++--
 .../src/main/resources/defaults.css                | 12 +++++++++--
 .../src/main/resources/defaults.css                | 12 +++++++++--
 .../src/main/resources/defaults.css                | 12 +++++++++--
 .../src/main/resources/defaults.css                | 12 +++++++++--
 .../src/main/resources/defaults.css                | 12 +++++++++--
 .../src/main/resources/defaults.css                | 12 +++++++++--
 .../src/main/resources/defaults.css                | 12 +++++++++--
 .../src/main/resources/defaults.css                | 12 +++++++++--
 .../src/main/resources/defaults.css                | 12 +++++++++--
 .../src/main/resources/defaults.css                | 12 +++++++++--
 .../src/main/resources/defaults.css                | 12 +++++++++--
 .../src/main/resources/defaults.css                | 12 +++++++++--
 .../src/main/resources/defaults.css                | 12 +++++++++--
 .../src/main/resources/defaults.css                | 12 +++++++++--
 .../src/main/resources/defaults.css                | 12 +++++++++--
 .../src/main/resources/defaults.css                | 12 +++++++++--
 .../src/main/resources/defaults.css                | 12 +++++++++--
 .../src/main/resources/defaults.css                | 12 +++++++++--
 .../src/main/resources/defaults.css                | 12 +++++++++--
 .../src/main/resources/defaults.css                | 12 +++++++++--
 .../src/main/resources/defaults.css                | 12 +++++++++--
 .../src/main/resources/defaults.css                | 12 +++++++++--
 .../JewelTheme/src/main/resources/defaults.css     | 12 +++++++++--
 .../src/main/sass/components-primary/_button.sass  |  6 +++++-
 .../sass/components-primary/_togglebutton.sass     |  6 +++++-
 30 files changed, 293 insertions(+), 72 deletions(-)

diff --git a/examples/royale/TourDeJewel/src/main/royale/ButtonPlayGround.mxml 
b/examples/royale/TourDeJewel/src/main/royale/ButtonPlayGround.mxml
index ff41b6d..dd0a862 100644
--- a/examples/royale/TourDeJewel/src/main/royale/ButtonPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/ButtonPlayGround.mxml
@@ -62,11 +62,6 @@ limitations under the License.
                                                <j:Disabled/>
                                        </j:beads>
                                </j:Button>
-                               <j:Button text="A Button with multiline text" 
emphasis="{Button.PRIMARY}" width="200">
-                                       <j:beads>
-                                               <j:MultilineLabel 
multiline="true"/>
-                                       </j:beads>
-                               </j:Button>
                        </j:Card>
                </j:GridCell>
                <j:GridCell desktopNumerator="1" desktopDenominator="2" 
tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" 
phoneDenominator="1">
@@ -111,6 +106,15 @@ limitations under the License.
                                                <js:FontIcon 
text="{MaterialIconType.FACE}" material="true"/>
                                        </j:icon>
                                </j:IconButton>
+                               
+                               <j:HGroup gap="3" 
itemsHorizontalAlign="itemsCentered">
+                                       <j:IconButton localId="ib_lor" text="Do 
not disturb">
+                                               <j:icon>
+                                                       <js:FontIcon 
text="{MaterialIconType.DO_NOT_DISTURB}" material="true"/>
+                                               </j:icon>
+                                       </j:IconButton>
+                                       <j:CheckBox selected="true" 
text="rightPosition" change="ib_lor.rightPosition = !ib_lor.rightPosition"/>
+                               </j:HGroup>
                        </j:Card>
                </j:GridCell>
                <j:GridCell desktopNumerator="1" desktopDenominator="2" 
tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" 
phoneDenominator="1">
@@ -156,7 +160,7 @@ limitations under the License.
                         <j:ToolTip toolTip="show/hide FooterBar"/>
                     </j:beads>
                 </j:ToggleButton>
-                               <j:ToggleButton text="Icon and Text" 
emphasis="{Button.SECONDARY}">
+                               <j:ToggleButton text="Icon and Text" 
selectedText="Icon and Text" emphasis="{Button.SECONDARY}">
                     <j:icon>
                         <js:ToggleFontIcon 
text="{MaterialIconType.VISIBILITY}" 
selectedText="{MaterialIconType.VISIBILITY_OFF}" material="true"/>
                     </j:icon>
@@ -164,6 +168,14 @@ limitations under the License.
                         <j:ToolTip toolTip="show/hide FooterBar"/>
                     </j:beads>
                 </j:ToggleButton>
+                               <j:HGroup gap="3" 
itemsHorizontalAlign="itemsCentered">
+                                       <j:ToggleButton localId="tb_lor" 
text="No Print" selectedText="Print">
+                                               <j:icon>
+                                                       <js:ToggleFontIcon 
text="{MaterialIconType.PRINT_DISABLED}" 
selectedText="{MaterialIconType.PRINT}" material="true"/>
+                                               </j:icon>
+                                       </j:ToggleButton>
+                                       <j:CheckBox selected="true" 
text="rightPosition" change="tb_lor.rightPosition = !tb_lor.rightPosition"/>
+                               </j:HGroup>
                        </j:Card>
                </j:GridCell>
                <j:GridCell desktopNumerator="1" desktopDenominator="2" 
tabletNumerator="1" tabletDenominator="2" phoneNumerator="1" 
phoneDenominator="1">
@@ -214,4 +226,5 @@ limitations under the License.
                        </j:Card>
                </j:GridCell>
        </j:Grid>
+       
 </c:ExampleAndSourceCodeTabbedSectionContent>
diff --git 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/IconButton.as
 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/IconButton.as
index a6ce7b2..a95a2f6 100644
--- 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/IconButton.as
+++ 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/IconButton.as
@@ -94,15 +94,6 @@ package org.apache.royale.jewel
         public function set icon(value:IIcon):void
         {
             _icon = value;
-
-            var iconClass:String = "icon";
-            if(text != "")
-            {
-                iconClass += "WithSpace";
-            }
-
-            toggleClass(iconClass, (_icon != null));
-            
             setIconPosition();
 
             COMPILE::SWF
@@ -138,6 +129,15 @@ package org.apache.royale.jewel
         {
             COMPILE::JS
             {
+            removeClass("iconRSpace");
+            removeClass("iconLSpace");
+            var iconClass:String = "icon";
+            if(text != "")
+            {
+                iconClass += (rightPosition? "R" : "L" ) + "Space";
+            }
+            addClass(iconClass);
+            
             addElementAt(_icon, rightPosition? numElements : 0);
             }
         }
diff --git 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ToggleButton.as
 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ToggleButton.as
index 53fa703..eb2f6d5 100644
--- 
a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ToggleButton.as
+++ 
b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/ToggleButton.as
@@ -18,11 +18,6 @@
 
////////////////////////////////////////////////////////////////////////////////
 package org.apache.royale.jewel
 {
-       import org.apache.royale.core.ISelectable;
-       import org.apache.royale.core.IToggleButtonModel;
-    import org.apache.royale.events.Event;
-    import org.apache.royale.core.IIcon;
-
     COMPILE::SWF
     {
         import flash.events.MouseEvent;
@@ -32,6 +27,11 @@ package org.apache.royale.jewel
         import org.apache.royale.core.WrappedHTMLElement;
         import org.apache.royale.events.MouseEvent;
     }
+       import org.apache.royale.core.IIcon;
+       import org.apache.royale.core.ISelectable;
+       import org.apache.royale.core.IToggleButtonModel;
+       import org.apache.royale.events.Event;
+
 
     //--------------------------------------
     //  Events
diff --git 
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
 
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
index d8e4e3f..82472a7 100644
--- 
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
+++ 
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
@@ -189,10 +189,14 @@ hr {
   margin-left: 0px;
   margin-right: 0px;
 }
-.jewel.button.iconWithSpace i {
+.jewel.button.iconLSpace i {
   margin-left: 0px;
   margin-right: 8px;
 }
+.jewel.button.iconRSpace i {
+  margin-left: 8px;
+  margin-right: 0px;
+}
 
 .jewel.button.primary {
   background: linear-gradient(#d43bd1, #b427b1);
@@ -1038,10 +1042,14 @@ a:active {
   margin-left: 0px;
   margin-right: 0px;
 }
-.jewel.togglebutton.iconWithSpace i {
+.jewel.togglebutton.iconLSpace i {
   margin-left: 0px;
   margin-right: 8px;
 }
+.jewel.togglebutton.iconRSpace i {
+  margin-left: 8px;
+  margin-right: 0px;
+}
 
 .jewel.togglebutton.primary {
   background: linear-gradient(#d43bd1, #b427b1);
diff --git 
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
 
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
index cf43d1b..63bee84 100644
--- 
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
+++ 
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
@@ -189,10 +189,14 @@ hr {
   margin-left: 0px;
   margin-right: 0px;
 }
-.jewel.button.iconWithSpace i {
+.jewel.button.iconLSpace i {
   margin-left: 0px;
   margin-right: 8px;
 }
+.jewel.button.iconRSpace i {
+  margin-left: 8px;
+  margin-right: 0px;
+}
 
 .jewel.button.primary {
   background: linear-gradient(#54b7f3, #24a3ef);
@@ -1038,10 +1042,14 @@ a:active {
   margin-left: 0px;
   margin-right: 0px;
 }
-.jewel.togglebutton.iconWithSpace i {
+.jewel.togglebutton.iconLSpace i {
   margin-left: 0px;
   margin-right: 8px;
 }
+.jewel.togglebutton.iconRSpace i {
+  margin-left: 8px;
+  margin-right: 0px;
+}
 
 .jewel.togglebutton.primary {
   background: linear-gradient(#54b7f3, #24a3ef);
diff --git 
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
 
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
index 5491636..94a0092 100644
--- 
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
+++ 
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
@@ -189,10 +189,14 @@ hr {
   margin-left: 0px;
   margin-right: 0px;
 }
-.jewel.button.iconWithSpace i {
+.jewel.button.iconLSpace i {
   margin-left: 0px;
   margin-right: 8px;
 }
+.jewel.button.iconRSpace i {
+  margin-left: 8px;
+  margin-right: 0px;
+}
 
 .jewel.button.primary {
   background: linear-gradient(#98cc50, #7eb435);
@@ -1038,10 +1042,14 @@ a:active {
   margin-left: 0px;
   margin-right: 0px;
 }
-.jewel.togglebutton.iconWithSpace i {
+.jewel.togglebutton.iconLSpace i {
   margin-left: 0px;
   margin-right: 8px;
 }
+.jewel.togglebutton.iconRSpace i {
+  margin-left: 8px;
+  margin-right: 0px;
+}
 
 .jewel.togglebutton.primary {
   background: linear-gradient(#98cc50, #7eb435);
diff --git 
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
 
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
index 257ab03..b10e6fd 100644
--- 
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
+++ 
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
@@ -189,10 +189,14 @@ hr {
   margin-left: 0px;
   margin-right: 0px;
 }
-.jewel.button.iconWithSpace i {
+.jewel.button.iconLSpace i {
   margin-left: 0px;
   margin-right: 8px;
 }
+.jewel.button.iconRSpace i {
+  margin-left: 8px;
+  margin-right: 0px;
+}
 
 .jewel.button.primary {
   background: linear-gradient(#45c354, #34a241);
@@ -1038,10 +1042,14 @@ a:active {
   margin-left: 0px;
   margin-right: 0px;
 }
-.jewel.togglebutton.iconWithSpace i {
+.jewel.togglebutton.iconLSpace i {
   margin-left: 0px;
   margin-right: 8px;
 }
+.jewel.togglebutton.iconRSpace i {
+  margin-left: 8px;
+  margin-right: 0px;
+}
 
 .jewel.togglebutton.primary {
   background: linear-gradient(#45c354, #34a241);
diff --git 
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
 
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
index bf4aefa..998ed10 100644
--- 
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
+++ 
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
@@ -189,10 +189,14 @@ hr {
   margin-left: 0px;
   margin-right: 0px;
 }
-.jewel.button.iconWithSpace i {
+.jewel.button.iconLSpace i {
   margin-left: 0px;
   margin-right: 8px;
 }
+.jewel.button.iconRSpace i {
+  margin-left: 8px;
+  margin-right: 0px;
+}
 
 .jewel.button.primary {
   background: linear-gradient(#f8a036, #f28809);
@@ -1038,10 +1042,14 @@ a:active {
   margin-left: 0px;
   margin-right: 0px;
 }
-.jewel.togglebutton.iconWithSpace i {
+.jewel.togglebutton.iconLSpace i {
   margin-left: 0px;
   margin-right: 8px;
 }
+.jewel.togglebutton.iconRSpace i {
+  margin-left: 8px;
+  margin-right: 0px;
+}
 
 .jewel.togglebutton.primary {
   background: linear-gradient(#f8a036, #f28809);
diff --git 
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
 
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
index 39b2535..d6523b9 100644
--- 
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
+++ 
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
@@ -189,10 +189,14 @@ hr {
   margin-left: 0px;
   margin-right: 0px;
 }
-.jewel.button.iconWithSpace i {
+.jewel.button.iconLSpace i {
   margin-left: 0px;
   margin-right: 8px;
 }
+.jewel.button.iconRSpace i {
+  margin-left: 8px;
+  margin-right: 0px;
+}
 
 .jewel.button.primary {
   background: linear-gradient(#ee343b, #dc121a);
@@ -1038,10 +1042,14 @@ a:active {
   margin-left: 0px;
   margin-right: 0px;
 }
-.jewel.togglebutton.iconWithSpace i {
+.jewel.togglebutton.iconLSpace i {
   margin-left: 0px;
   margin-right: 8px;
 }
+.jewel.togglebutton.iconRSpace i {
+  margin-left: 8px;
+  margin-right: 0px;
+}
 
 .jewel.togglebutton.primary {
   background: linear-gradient(#ee343b, #dc121a);
diff --git 
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
 
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
index 39e562f..d9eaa21 100644
--- 
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
+++ 
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
@@ -189,10 +189,14 @@ hr {
   margin-left: 0px;
   margin-right: 0px;
 }
-.jewel.button.iconWithSpace i {
+.jewel.button.iconLSpace i {
   margin-left: 0px;
   margin-right: 8px;
 }
+.jewel.button.iconRSpace i {
+  margin-left: 8px;
+  margin-right: 0px;
+}
 
 .jewel.button.primary {
   background: linear-gradient(#3481d0, #2767a9);
@@ -1038,10 +1042,14 @@ a:active {
   margin-left: 0px;
   margin-right: 0px;
 }
-.jewel.togglebutton.iconWithSpace i {
+.jewel.togglebutton.iconLSpace i {
   margin-left: 0px;
   margin-right: 8px;
 }
+.jewel.togglebutton.iconRSpace i {
+  margin-left: 8px;
+  margin-right: 0px;
+}
 
 .jewel.togglebutton.primary {
   background: linear-gradient(#3481d0, #2767a9);
diff --git 
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
 
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
index 8d4ce4e..fb9834a 100644
--- 
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
+++ 
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
@@ -189,10 +189,14 @@ hr {
   margin-left: 0px;
   margin-right: 0px;
 }
-.jewel.button.iconWithSpace i {
+.jewel.button.iconLSpace i {
   margin-left: 0px;
   margin-right: 8px;
 }
+.jewel.button.iconRSpace i {
+  margin-left: 8px;
+  margin-right: 0px;
+}
 
 .jewel.button.primary {
   background: linear-gradient(#f9bb58, #f7a726);
@@ -1038,10 +1042,14 @@ a:active {
   margin-left: 0px;
   margin-right: 0px;
 }
-.jewel.togglebutton.iconWithSpace i {
+.jewel.togglebutton.iconLSpace i {
   margin-left: 0px;
   margin-right: 8px;
 }
+.jewel.togglebutton.iconRSpace i {
+  margin-left: 8px;
+  margin-right: 0px;
+}
 
 .jewel.togglebutton.primary {
   background: linear-gradient(#f9bb58, #f7a726);
diff --git 
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
 
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
index c9a93a5..0d52fd1 100644
--- 
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
+++ 
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
@@ -189,10 +189,14 @@ hr {
   margin-left: 0px;
   margin-right: 0px;
 }
-.jewel.button.iconWithSpace i {
+.jewel.button.iconLSpace i {
   margin-left: 0px;
   margin-right: 8px;
 }
+.jewel.button.iconRSpace i {
+  margin-left: 8px;
+  margin-right: 0px;
+}
 
 .jewel.button.primary {
   background: linear-gradient(#f16c42, #ed4812);
@@ -1038,10 +1042,14 @@ a:active {
   margin-left: 0px;
   margin-right: 0px;
 }
-.jewel.togglebutton.iconWithSpace i {
+.jewel.togglebutton.iconLSpace i {
   margin-left: 0px;
   margin-right: 8px;
 }
+.jewel.togglebutton.iconRSpace i {
+  margin-left: 8px;
+  margin-right: 0px;
+}
 
 .jewel.togglebutton.primary {
   background: linear-gradient(#f16c42, #ed4812);
diff --git 
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
 
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
index 4719b10..3b6de9c 100644
--- 
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
+++ 
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
@@ -189,10 +189,14 @@ hr {
   margin-left: 0px;
   margin-right: 0px;
 }
-.jewel.button.iconWithSpace i {
+.jewel.button.iconLSpace i {
   margin-left: 0px;
   margin-right: 8px;
 }
+.jewel.button.iconRSpace i {
+  margin-left: 8px;
+  margin-right: 0px;
+}
 
 .jewel.button.primary {
   background: linear-gradient(#2ebcb2, #24948c);
@@ -1038,10 +1042,14 @@ a:active {
   margin-left: 0px;
   margin-right: 0px;
 }
-.jewel.togglebutton.iconWithSpace i {
+.jewel.togglebutton.iconLSpace i {
   margin-left: 0px;
   margin-right: 8px;
 }
+.jewel.togglebutton.iconRSpace i {
+  margin-left: 8px;
+  margin-right: 0px;
+}
 
 .jewel.togglebutton.primary {
   background: linear-gradient(#2ebcb2, #24948c);
diff --git 
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
 
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
index 3b943d5..379283c 100644
--- 
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
+++ 
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
@@ -189,10 +189,14 @@ hr {
   margin-left: 0px;
   margin-right: 0px;
 }
-.jewel.button.iconWithSpace i {
+.jewel.button.iconLSpace i {
   margin-left: 0px;
   margin-right: 8px;
 }
+.jewel.button.iconRSpace i {
+  margin-left: 8px;
+  margin-right: 0px;
+}
 
 .jewel.button.primary {
   background: linear-gradient(#7432a4, #58267c);
@@ -1038,10 +1042,14 @@ a:active {
   margin-left: 0px;
   margin-right: 0px;
 }
-.jewel.togglebutton.iconWithSpace i {
+.jewel.togglebutton.iconLSpace i {
   margin-left: 0px;
   margin-right: 8px;
 }
+.jewel.togglebutton.iconRSpace i {
+  margin-left: 8px;
+  margin-right: 0px;
+}
 
 .jewel.togglebutton.primary {
   background: linear-gradient(#7432a4, #58267c);
diff --git 
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
 
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
index d045b5c..151bfa8 100644
--- 
a/frameworks/themes/Jewel-Dark-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
+++ 
b/frameworks/themes/Jewel-Dark-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
@@ -189,10 +189,14 @@ hr {
   margin-left: 0px;
   margin-right: 0px;
 }
-.jewel.button.iconWithSpace i {
+.jewel.button.iconLSpace i {
   margin-left: 0px;
   margin-right: 8px;
 }
+.jewel.button.iconRSpace i {
+  margin-left: 8px;
+  margin-right: 0px;
+}
 
 .jewel.button.primary {
   background: linear-gradient(#f4e813, #cac00a);
@@ -1038,10 +1042,14 @@ a:active {
   margin-left: 0px;
   margin-right: 0px;
 }
-.jewel.togglebutton.iconWithSpace i {
+.jewel.togglebutton.iconLSpace i {
   margin-left: 0px;
   margin-right: 8px;
 }
+.jewel.togglebutton.iconRSpace i {
+  margin-left: 8px;
+  margin-right: 0px;
+}
 
 .jewel.togglebutton.primary {
   background: linear-gradient(#f4e813, #cac00a);
diff --git 
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
 
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
index 97a1f33..ad71c12 100644
--- 
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
+++ 
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Amethyst-Theme/src/main/resources/defaults.css
@@ -188,10 +188,14 @@ hr {
   margin-left: 0px;
   margin-right: 0px;
 }
-.jewel.button.iconWithSpace i {
+.jewel.button.iconLSpace i {
   margin-left: 0px;
   margin-right: 8px;
 }
+.jewel.button.iconRSpace i {
+  margin-left: 8px;
+  margin-right: 0px;
+}
 
 .jewel.button.primary {
   background: linear-gradient(#d43bd1, #b427b1);
@@ -1036,10 +1040,14 @@ a:active {
   margin-left: 0px;
   margin-right: 0px;
 }
-.jewel.togglebutton.iconWithSpace i {
+.jewel.togglebutton.iconLSpace i {
   margin-left: 0px;
   margin-right: 8px;
 }
+.jewel.togglebutton.iconRSpace i {
+  margin-left: 8px;
+  margin-right: 0px;
+}
 
 .jewel.togglebutton.primary {
   background: linear-gradient(#d43bd1, #b427b1);
diff --git 
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
 
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
index 555f062..50c047d 100644
--- 
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
+++ 
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Blue-Theme/src/main/resources/defaults.css
@@ -188,10 +188,14 @@ hr {
   margin-left: 0px;
   margin-right: 0px;
 }
-.jewel.button.iconWithSpace i {
+.jewel.button.iconLSpace i {
   margin-left: 0px;
   margin-right: 8px;
 }
+.jewel.button.iconRSpace i {
+  margin-left: 8px;
+  margin-right: 0px;
+}
 
 .jewel.button.primary {
   background: linear-gradient(#54b7f3, #24a3ef);
@@ -1036,10 +1040,14 @@ a:active {
   margin-left: 0px;
   margin-right: 0px;
 }
-.jewel.togglebutton.iconWithSpace i {
+.jewel.togglebutton.iconLSpace i {
   margin-left: 0px;
   margin-right: 8px;
 }
+.jewel.togglebutton.iconRSpace i {
+  margin-left: 8px;
+  margin-right: 0px;
+}
 
 .jewel.togglebutton.primary {
   background: linear-gradient(#54b7f3, #24a3ef);
diff --git 
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
 
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
index d58a1a2..eb14648 100644
--- 
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
+++ 
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Emerald-Theme/src/main/resources/defaults.css
@@ -188,10 +188,14 @@ hr {
   margin-left: 0px;
   margin-right: 0px;
 }
-.jewel.button.iconWithSpace i {
+.jewel.button.iconLSpace i {
   margin-left: 0px;
   margin-right: 8px;
 }
+.jewel.button.iconRSpace i {
+  margin-left: 8px;
+  margin-right: 0px;
+}
 
 .jewel.button.primary {
   background: linear-gradient(#98cc50, #7eb435);
@@ -1036,10 +1040,14 @@ a:active {
   margin-left: 0px;
   margin-right: 0px;
 }
-.jewel.togglebutton.iconWithSpace i {
+.jewel.togglebutton.iconLSpace i {
   margin-left: 0px;
   margin-right: 8px;
 }
+.jewel.togglebutton.iconRSpace i {
+  margin-left: 8px;
+  margin-right: 0px;
+}
 
 .jewel.togglebutton.primary {
   background: linear-gradient(#98cc50, #7eb435);
diff --git 
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
 
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
index 14e3c45..a980716 100644
--- 
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
+++ 
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Green-Theme/src/main/resources/defaults.css
@@ -188,10 +188,14 @@ hr {
   margin-left: 0px;
   margin-right: 0px;
 }
-.jewel.button.iconWithSpace i {
+.jewel.button.iconLSpace i {
   margin-left: 0px;
   margin-right: 8px;
 }
+.jewel.button.iconRSpace i {
+  margin-left: 8px;
+  margin-right: 0px;
+}
 
 .jewel.button.primary {
   background: linear-gradient(#45c354, #34a241);
@@ -1036,10 +1040,14 @@ a:active {
   margin-left: 0px;
   margin-right: 0px;
 }
-.jewel.togglebutton.iconWithSpace i {
+.jewel.togglebutton.iconLSpace i {
   margin-left: 0px;
   margin-right: 8px;
 }
+.jewel.togglebutton.iconRSpace i {
+  margin-left: 8px;
+  margin-right: 0px;
+}
 
 .jewel.togglebutton.primary {
   background: linear-gradient(#45c354, #34a241);
diff --git 
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
 
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
index 4827322..fb07b4c 100644
--- 
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
+++ 
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Orange-Theme/src/main/resources/defaults.css
@@ -188,10 +188,14 @@ hr {
   margin-left: 0px;
   margin-right: 0px;
 }
-.jewel.button.iconWithSpace i {
+.jewel.button.iconLSpace i {
   margin-left: 0px;
   margin-right: 8px;
 }
+.jewel.button.iconRSpace i {
+  margin-left: 8px;
+  margin-right: 0px;
+}
 
 .jewel.button.primary {
   background: linear-gradient(#f8a036, #f28809);
@@ -1036,10 +1040,14 @@ a:active {
   margin-left: 0px;
   margin-right: 0px;
 }
-.jewel.togglebutton.iconWithSpace i {
+.jewel.togglebutton.iconLSpace i {
   margin-left: 0px;
   margin-right: 8px;
 }
+.jewel.togglebutton.iconRSpace i {
+  margin-left: 8px;
+  margin-right: 0px;
+}
 
 .jewel.togglebutton.primary {
   background: linear-gradient(#f8a036, #f28809);
diff --git 
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
 
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
index 9ddeee9..6bc4d3e 100644
--- 
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
+++ 
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Red-Theme/src/main/resources/defaults.css
@@ -188,10 +188,14 @@ hr {
   margin-left: 0px;
   margin-right: 0px;
 }
-.jewel.button.iconWithSpace i {
+.jewel.button.iconLSpace i {
   margin-left: 0px;
   margin-right: 8px;
 }
+.jewel.button.iconRSpace i {
+  margin-left: 8px;
+  margin-right: 0px;
+}
 
 .jewel.button.primary {
   background: linear-gradient(#ee343b, #dc121a);
@@ -1036,10 +1040,14 @@ a:active {
   margin-left: 0px;
   margin-right: 0px;
 }
-.jewel.togglebutton.iconWithSpace i {
+.jewel.togglebutton.iconLSpace i {
   margin-left: 0px;
   margin-right: 8px;
 }
+.jewel.togglebutton.iconRSpace i {
+  margin-left: 8px;
+  margin-right: 0px;
+}
 
 .jewel.togglebutton.primary {
   background: linear-gradient(#ee343b, #dc121a);
diff --git 
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
 
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
index 9449edb..a49443f 100644
--- 
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
+++ 
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Sapphire-Theme/src/main/resources/defaults.css
@@ -188,10 +188,14 @@ hr {
   margin-left: 0px;
   margin-right: 0px;
 }
-.jewel.button.iconWithSpace i {
+.jewel.button.iconLSpace i {
   margin-left: 0px;
   margin-right: 8px;
 }
+.jewel.button.iconRSpace i {
+  margin-left: 8px;
+  margin-right: 0px;
+}
 
 .jewel.button.primary {
   background: linear-gradient(#3481d0, #2767a9);
@@ -1036,10 +1040,14 @@ a:active {
   margin-left: 0px;
   margin-right: 0px;
 }
-.jewel.togglebutton.iconWithSpace i {
+.jewel.togglebutton.iconLSpace i {
   margin-left: 0px;
   margin-right: 8px;
 }
+.jewel.togglebutton.iconRSpace i {
+  margin-left: 8px;
+  margin-right: 0px;
+}
 
 .jewel.togglebutton.primary {
   background: linear-gradient(#3481d0, #2767a9);
diff --git 
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
 
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
index 5d3fe13..8762c4d 100644
--- 
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
+++ 
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Sunflower-Theme/src/main/resources/defaults.css
@@ -188,10 +188,14 @@ hr {
   margin-left: 0px;
   margin-right: 0px;
 }
-.jewel.button.iconWithSpace i {
+.jewel.button.iconLSpace i {
   margin-left: 0px;
   margin-right: 8px;
 }
+.jewel.button.iconRSpace i {
+  margin-left: 8px;
+  margin-right: 0px;
+}
 
 .jewel.button.primary {
   background: linear-gradient(#f9bb58, #f7a726);
@@ -1036,10 +1040,14 @@ a:active {
   margin-left: 0px;
   margin-right: 0px;
 }
-.jewel.togglebutton.iconWithSpace i {
+.jewel.togglebutton.iconLSpace i {
   margin-left: 0px;
   margin-right: 8px;
 }
+.jewel.togglebutton.iconRSpace i {
+  margin-left: 8px;
+  margin-right: 0px;
+}
 
 .jewel.togglebutton.primary {
   background: linear-gradient(#f9bb58, #f7a726);
diff --git 
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
 
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
index 95902fb..c68d24c 100644
--- 
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
+++ 
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Topaz-Theme/src/main/resources/defaults.css
@@ -188,10 +188,14 @@ hr {
   margin-left: 0px;
   margin-right: 0px;
 }
-.jewel.button.iconWithSpace i {
+.jewel.button.iconLSpace i {
   margin-left: 0px;
   margin-right: 8px;
 }
+.jewel.button.iconRSpace i {
+  margin-left: 8px;
+  margin-right: 0px;
+}
 
 .jewel.button.primary {
   background: linear-gradient(#f16c42, #ed4812);
@@ -1036,10 +1040,14 @@ a:active {
   margin-left: 0px;
   margin-right: 0px;
 }
-.jewel.togglebutton.iconWithSpace i {
+.jewel.togglebutton.iconLSpace i {
   margin-left: 0px;
   margin-right: 8px;
 }
+.jewel.togglebutton.iconRSpace i {
+  margin-left: 8px;
+  margin-right: 0px;
+}
 
 .jewel.togglebutton.primary {
   background: linear-gradient(#f16c42, #ed4812);
diff --git 
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
 
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
index e0c034a..08d3249 100644
--- 
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
+++ 
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Turquoise-Theme/src/main/resources/defaults.css
@@ -188,10 +188,14 @@ hr {
   margin-left: 0px;
   margin-right: 0px;
 }
-.jewel.button.iconWithSpace i {
+.jewel.button.iconLSpace i {
   margin-left: 0px;
   margin-right: 8px;
 }
+.jewel.button.iconRSpace i {
+  margin-left: 8px;
+  margin-right: 0px;
+}
 
 .jewel.button.primary {
   background: linear-gradient(#2ebcb2, #24948c);
@@ -1036,10 +1040,14 @@ a:active {
   margin-left: 0px;
   margin-right: 0px;
 }
-.jewel.togglebutton.iconWithSpace i {
+.jewel.togglebutton.iconLSpace i {
   margin-left: 0px;
   margin-right: 8px;
 }
+.jewel.togglebutton.iconRSpace i {
+  margin-left: 8px;
+  margin-right: 0px;
+}
 
 .jewel.togglebutton.primary {
   background: linear-gradient(#2ebcb2, #24948c);
diff --git 
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
 
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
index c74636d..20d9e6a 100644
--- 
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
+++ 
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Violet-Theme/src/main/resources/defaults.css
@@ -188,10 +188,14 @@ hr {
   margin-left: 0px;
   margin-right: 0px;
 }
-.jewel.button.iconWithSpace i {
+.jewel.button.iconLSpace i {
   margin-left: 0px;
   margin-right: 8px;
 }
+.jewel.button.iconRSpace i {
+  margin-left: 8px;
+  margin-right: 0px;
+}
 
 .jewel.button.primary {
   background: linear-gradient(#7432a4, #58267c);
@@ -1036,10 +1040,14 @@ a:active {
   margin-left: 0px;
   margin-right: 0px;
 }
-.jewel.togglebutton.iconWithSpace i {
+.jewel.togglebutton.iconLSpace i {
   margin-left: 0px;
   margin-right: 8px;
 }
+.jewel.togglebutton.iconRSpace i {
+  margin-left: 8px;
+  margin-right: 0px;
+}
 
 .jewel.togglebutton.primary {
   background: linear-gradient(#7432a4, #58267c);
diff --git 
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
 
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
index f6a0869..ca7b9b2 100644
--- 
a/frameworks/themes/Jewel-Light-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
+++ 
b/frameworks/themes/Jewel-Light-NoFlat-Primary-Yellow-Theme/src/main/resources/defaults.css
@@ -188,10 +188,14 @@ hr {
   margin-left: 0px;
   margin-right: 0px;
 }
-.jewel.button.iconWithSpace i {
+.jewel.button.iconLSpace i {
   margin-left: 0px;
   margin-right: 8px;
 }
+.jewel.button.iconRSpace i {
+  margin-left: 8px;
+  margin-right: 0px;
+}
 
 .jewel.button.primary {
   background: linear-gradient(#f4e813, #cac00a);
@@ -1036,10 +1040,14 @@ a:active {
   margin-left: 0px;
   margin-right: 0px;
 }
-.jewel.togglebutton.iconWithSpace i {
+.jewel.togglebutton.iconLSpace i {
   margin-left: 0px;
   margin-right: 8px;
 }
+.jewel.togglebutton.iconRSpace i {
+  margin-left: 8px;
+  margin-right: 0px;
+}
 
 .jewel.togglebutton.primary {
   background: linear-gradient(#f4e813, #cac00a);
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css 
b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index f121991..e5aab52 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -188,10 +188,14 @@ hr {
   margin-left: 0px;
   margin-right: 0px;
 }
-.jewel.button.iconWithSpace i {
+.jewel.button.iconLSpace i {
   margin-left: 0px;
   margin-right: 8px;
 }
+.jewel.button.iconRSpace i {
+  margin-left: 8px;
+  margin-right: 0px;
+}
 
 .jewel.button.primary {
   background: linear-gradient(#54b7f3, #24a3ef);
@@ -1036,10 +1040,14 @@ a:active {
   margin-left: 0px;
   margin-right: 0px;
 }
-.jewel.togglebutton.iconWithSpace i {
+.jewel.togglebutton.iconLSpace i {
   margin-left: 0px;
   margin-right: 8px;
 }
+.jewel.togglebutton.iconRSpace i {
+  margin-left: 8px;
+  margin-right: 0px;
+}
 
 .jewel.togglebutton.primary {
   background: linear-gradient(#54b7f3, #24a3ef);
diff --git 
a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_button.sass 
b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_button.sass
index 1dde8f0..6ea05eb 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_button.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_button.sass
@@ -71,10 +71,14 @@ $button-border-radius: $border-radius
                        margin-left: 0px
                        margin-right: 0px
 
-       &.iconWithSpace
+       &.iconLSpace
                i
                        margin-left: 0px
                        margin-right: 8px
+       &.iconRSpace
+               i
+                       margin-left: 8px
+                       margin-right: 0px
 
 .jewel.button.primary
        +button-theme($primary-color, $font-theme-color)
diff --git 
a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_togglebutton.sass
 
b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_togglebutton.sass
index 00f93ad..85bc4a7 100644
--- 
a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_togglebutton.sass
+++ 
b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_togglebutton.sass
@@ -75,10 +75,14 @@ $togglebutton-border-radius: $border-radius
                        margin-left: 0px
                        margin-right: 0px
 
-       &.iconWithSpace
+       &.iconLSpace
                i
                        margin-left: 0px
                        margin-right: 8px
+       &.iconRSpace
+               i
+                       margin-left: 8px
+                       margin-right: 0px
 
 .jewel.togglebutton.primary
        +togglebutton-theme($primary-color, $font-theme-color)

Reply via email to