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 2020/05/06 10:08:07 UTC
[royale-asjs] branch develop updated: jewel-textinput: improve
IconTextInput icon positioning and padding,
also pass to theme some styles that must be in the theme for TextInput and
TextArea
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 61d62df jewel-textinput: improve IconTextInput icon positioning and padding, also pass to theme some styles that must be in the theme for TextInput and TextArea
61d62df is described below
commit 61d62df525bc13e5dddae2d05573be0a78fbc716
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Wed May 6 12:07:59 2020 +0200
jewel-textinput: improve IconTextInput icon positioning and padding, also pass to theme some styles that must be in the theme for TextInput and TextArea
---
.../projects/Jewel/src/main/resources/defaults.css | 30 ++++++++--------
.../Jewel/src/main/sass/components/_textinput.sass | 33 +++++++++---------
.../JewelTheme/src/main/resources/defaults.css | 20 +++++++++++
.../main/sass/components-primary/_textinput.sass | 40 +++++++++++++++++++---
4 files changed, 88 insertions(+), 35 deletions(-)
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 113d46e..d08238e 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -3894,6 +3894,19 @@ j|TableRow {
.jewel.textinput {
position: relative;
display: inline-flex;
+ overflow: hidden;
+}
+.jewel.textinput::before {
+ top: calc(50% - 100%);
+ left: calc(50% - 100%);
+ width: 200%;
+ height: 200%;
+ z-index: 1;
+}
+.jewel.textinput::before, .jewel.textinput::after {
+ position: absolute;
+ pointer-events: none;
+ content: "";
}
.jewel.textinput input {
-webkit-appearance: none;
@@ -3901,8 +3914,6 @@ j|TableRow {
-o-appearance: none;
-ms-appearance: none;
appearance: none;
- margin: 0;
- padding: 0.679em 1.12em;
width: 100%;
height: 100%;
max-width: 100%;
@@ -3914,26 +3925,17 @@ j|TableRow {
.jewel.textinput input[disabled] {
cursor: unset;
}
-.jewel.textinput.icon input {
- padding-left: 2.12em;
-}
.jewel.textinput.icon i.fonticon {
cursor: default;
pointer-events: none;
top: 50%;
- left: 0.45em;
- right: auto;
+ right: initial;
position: absolute;
text-align: center;
margin-top: -0.5em;
}
-.jewel.textinput.icon.right input {
- padding-right: 2.12em;
- padding-left: 1.12em;
-}
.jewel.textinput.icon.right i.fonticon {
- left: auto;
- right: 0.45em;
+ left: initial;
}
.jewel.textinput.truncate input {
overflow: hidden;
@@ -3962,8 +3964,6 @@ j|TextInput {
-o-appearance: none;
-ms-appearance: none;
appearance: none;
- margin: 0;
- padding: 0.72em 1.12em;
resize: none;
max-width: 100%;
flex: 1 0 auto;
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_textinput.sass b/frameworks/projects/Jewel/src/main/sass/components/_textinput.sass
index 4dfa630..297e5ed 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_textinput.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_textinput.sass
@@ -20,19 +20,29 @@
// Jewel TextInput
// TextInput variables
-$textinput-margin: 0 !default
-$textinput-padding-vertical: .679em !default
-$textinput-padding-horizontal: 1.12em !default
.jewel
&.textinput
position: relative
display: inline-flex
+ overflow: hidden
+
+ &::before
+ top: calc(50% - 100%)
+ left: calc(50% - 100%)
+ width: 200%
+ height: 200%
+ z-index: 1
+
+ &::after
+
+ &::before, &::after
+ position: absolute
+ pointer-events: none
+ content: ""
input
+appear(none)
- margin: $textinput-margin
- padding: $textinput-padding-vertical $textinput-padding-horizontal
width: 100%
height: 100%
@@ -50,28 +60,23 @@ $textinput-padding-horizontal: 1.12em !default
&.icon
input
- padding-left: $textinput-padding-horizontal + 1
i
&.fonticon
cursor: default
pointer-events: none
top: 50%
- left: .45em
- right: auto
+ right: initial
position: absolute
text-align: center
margin-top: -.5em
&.right
input
- padding-right: $textinput-padding-horizontal + 1
- padding-left: $textinput-padding-horizontal
i
&.fonticon
- left: auto
- right: .45em
+ left: initial
&.truncate
input
@@ -92,8 +97,6 @@ j|TextInput
// Jewel TextArea
// TextArea variables
-$textarea-margin: 0 !default
-$textarea-padding: .72em 1.12em !default
.jewel
&.textarea
@@ -102,8 +105,6 @@ $textarea-padding: .72em 1.12em !default
textarea
+appear(none)
- margin: $textarea-margin
- padding: $textarea-padding
resize: none
max-width: 100%
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 81b286c..faed5ec 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -1350,6 +1350,24 @@ div {
.jewel.textinput input[disabled] + i {
color: silver;
}
+.jewel.textinput input {
+ margin: 0;
+ padding: 0.679em 16px;
+}
+.jewel.textinput.icon input {
+ padding-left: 36px;
+ padding-right: 16px;
+}
+.jewel.textinput.icon i.fonticon {
+ left: 8px;
+}
+.jewel.textinput.icon.right input {
+ padding-left: 16px;
+ padding-right: 36px;
+}
+.jewel.textinput.icon.right i.fonticon {
+ right: 8px;
+}
.jewel.textinput.errorBorder input {
border: 1px #EC1C24 solid;
}
@@ -1359,6 +1377,8 @@ div {
color: #808080;
}
.jewel.textarea textarea {
+ margin: 0;
+ padding: 0.72em 1.12em;
background: linear-gradient(white, #f3f3f3);
border: 1px solid #b3b3b3;
border-radius: 0.25rem;
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 104c15e..75fcee9 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_textinput.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_textinput.sass
@@ -21,6 +21,10 @@
// TextInput variables
$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-theme($textinput-text-color)
@@ -74,20 +78,45 @@ $textinput-border-radius: $border-radius
font:
weight: $font-weight-normal
- input
- // font:
- // family: $font-stack
@if $dark
+textinput-theme($font-dark-color)
@else
+textinput-theme($font-light-color)
+ input
+ margin: $textinput-margin
+ padding: $textinput-padding-vertical $textinput-padding-horizontal
+ // font:
+ // family: $font-stack
+ &.icon
+ input
+ padding-left: $textinput-padding-horizontal + $textinput-padding-icon-offset
+ padding-right: $textinput-padding-horizontal
+
+ i
+ &.fonticon
+ left: 8px
+
+ &.right
+ input
+ padding-left: $textinput-padding-horizontal
+ padding-right: $textinput-padding-horizontal + $textinput-padding-icon-offset
+
+ i
+ &.fonticon
+ right: 8px
+
+ &.truncate
+ input
+
&.errorBorder
input
border: 1px $error-color solid
// Jewel TextArea
+$textarea-margin: 0 !default
+$textarea-padding: .72em 1.12em !default
// TextArea variables
$textarea-border-radius: $border-radius
@@ -96,7 +125,10 @@ $textarea-border-radius: $border-radius
color: $textarea-text-color
- textarea
+ textarea
+ margin: $textarea-margin
+ padding: $textarea-padding
+
@if $flat
background: lighten($default-color, 15%)
border: 1px solid $default-color