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 aa668cd jewel-textinput: support Material icons and Font Awesome
icons positioning both depending on its particularities
aa668cd is described below
commit aa668cd661fd28e635e2c4cc679f639fba2b1ac4
Author: Carlos Rovira <[email protected]>
AuthorDate: Fri Jun 12 14:00:52 2020 +0200
jewel-textinput: support Material icons and Font Awesome icons positioning
both depending on its particularities
---
.../projects/Jewel/src/main/resources/defaults.css | 3 +++
.../Jewel/src/main/sass/components/_textinput.sass | 5 ++++-
.../JewelTheme/src/main/resources/defaults.css | 20 +++++++++++++-------
.../src/main/sass/components-primary/_textinput.sass | 17 ++++++++++-------
4 files changed, 30 insertions(+), 15 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css
b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 9b88fb8..dc0c32e 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -3939,6 +3939,9 @@ j|TableRow {
right: initial;
position: absolute;
text-align: center;
+ margin-top: -6px;
+}
+.jewel.textinput.icon i.fonticon.material-icons {
margin-top: -0.5em;
}
.jewel.textinput.icon.right i.fonticon {
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_textinput.sass
b/frameworks/projects/Jewel/src/main/sass/components/_textinput.sass
index 297e5ed..9b7212d 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_textinput.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_textinput.sass
@@ -69,7 +69,10 @@
right: initial
position: absolute
text-align: center
- margin-top: -.5em
+ margin-top: -6px
+
+ &.material-icons
+ margin-top: -.5em
&.right
input
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 404d507..a650c2e 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -1380,21 +1380,27 @@ div {
}
.jewel.textinput input {
margin: 0;
- padding: 0.679em 16px;
+ padding: 0.679em 14px;
}
.jewel.textinput.icon input {
- padding-left: 36px;
- padding-right: 16px;
+ padding-left: 42px;
+ padding-right: 14px;
}
.jewel.textinput.icon i.fonticon {
- left: 8px;
+ left: 14px;
+}
+.jewel.textinput.icon i.fonticon.material-icons {
+ left: 10px;
}
.jewel.textinput.icon.right input {
- padding-left: 16px;
- padding-right: 36px;
+ padding-left: 14px;
+ padding-right: 42px;
}
.jewel.textinput.icon.right i.fonticon {
- right: 8px;
+ right: 14px;
+}
+.jewel.textinput.icon.right i.fonticon.material-icons {
+ right: 10px;
}
.jewel.textinput.errorBorder input {
border: 1px #EC1C24 solid;
diff --git
a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_textinput.sass
b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_textinput.sass
index 75fcee9..55368c2 100644
---
a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_textinput.sass
+++
b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_textinput.sass
@@ -23,8 +23,7 @@
$textinput-border-radius: $border-radius
$textinput-margin: 0 !default
$textinput-padding-vertical: .679em !default
-$textinput-padding-horizontal: 16px !default
-$textinput-padding-icon-offset: 20px !default
+$textinput-padding-horizontal: 14px !default
=textinput-theme($textinput-text-color)
@@ -91,21 +90,25 @@ $textinput-padding-icon-offset: 20px !default
// family: $font-stack
&.icon
input
- padding-left: $textinput-padding-horizontal +
$textinput-padding-icon-offset
+ padding-left: $textinput-padding-horizontal +
($textinput-padding-horizontal*2)
padding-right: $textinput-padding-horizontal
i
&.fonticon
- left: 8px
+ left: $textinput-padding-horizontal
+ &.material-icons
+ left:
$textinput-padding-horizontal - 4
&.right
input
padding-left:
$textinput-padding-horizontal
- padding-right:
$textinput-padding-horizontal + $textinput-padding-icon-offset
+ padding-right:
$textinput-padding-horizontal + ($textinput-padding-horizontal*2)
i
- &.fonticon
- right: 8px
+ &.fonticon
+ right:
$textinput-padding-horizontal
+ &.material-icons
+ right:
$textinput-padding-horizontal - 4
&.truncate
input
