You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2019/03/04 16:22:12 UTC
[royale-asjs] branch develop updated: jewel-button: icon position
styles improved
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 <ca...@apache.org>
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)