Fixed #305 - Icons inside InputText

primefaces · May 7, 2020 · 339fa2f · 339fa2f
1 parent d9d9016
commit 339fa2f
Show file tree

Hide file tree

Showing 19 changed files with 327 additions and 8 deletions.
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
@@ -668,6 +668,22 @@
   transition-duration: 0.2s;
 }
 
+.p-input-icon-left > i {
+  left: 0.429em;
+}
+
+.p-input-icon-left > .p-inputtext {
+  padding-left: 1.858em;
+}
+
+.p-input-icon-right > i {
+  right: 0.429em;
+}
+
+.p-input-icon-right > .p-inputtext {
+  padding-right: 1.858em;
+}
+
 .p-listbox {
   background: #323232;
   color: #dedede;

diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
@@ -668,6 +668,22 @@
   transition-duration: 0.2s;
 }
 
+.p-input-icon-left > i {
+  left: 0.429em;
+}
+
+.p-input-icon-left > .p-inputtext {
+  padding-left: 1.858em;
+}
+
+.p-input-icon-right > i {
+  right: 0.429em;
+}
+
+.p-input-icon-right > .p-inputtext {
+  padding-right: 1.858em;
+}
+
 .p-listbox {
   background: #323232;
   color: #dedede;

diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
@@ -668,6 +668,22 @@
   transition-duration: 0.2s;
 }
 
+.p-input-icon-left > i {
+  left: 0.429em;
+}
+
+.p-input-icon-left > .p-inputtext {
+  padding-left: 1.858em;
+}
+
+.p-input-icon-right > i {
+  right: 0.429em;
+}
+
+.p-input-icon-right > .p-inputtext {
+  padding-right: 1.858em;
+}
+
 .p-listbox {
   background: #323232;
   color: #dedede;

diff --git a/public/themes/nova-colored/theme.css b/public/themes/nova-colored/theme.css
@@ -668,6 +668,22 @@
   transition-duration: 0.2s;
 }
 
+.p-input-icon-left > i {
+  left: 0.429em;
+}
+
+.p-input-icon-left > .p-inputtext {
+  padding-left: 1.858em;
+}
+
+.p-input-icon-right > i {
+  right: 0.429em;
+}
+
+.p-input-icon-right > .p-inputtext {
+  padding-right: 1.858em;
+}
+
 .p-listbox {
   background: #ffffff;
   color: #333333;

diff --git a/public/themes/nova-dark/theme.css b/public/themes/nova-dark/theme.css
@@ -668,6 +668,22 @@
   transition-duration: 0.2s;
 }
 
+.p-input-icon-left > i {
+  left: 0.429em;
+}
+
+.p-input-icon-left > .p-inputtext {
+  padding-left: 1.858em;
+}
+
+.p-input-icon-right > i {
+  right: 0.429em;
+}
+
+.p-input-icon-right > .p-inputtext {
+  padding-right: 1.858em;
+}
+
 .p-listbox {
   background: #ffffff;
   color: #333333;

diff --git a/public/themes/nova-light/theme.css b/public/themes/nova-light/theme.css
@@ -668,6 +668,22 @@
   transition-duration: 0.2s;
 }
 
+.p-input-icon-left > i {
+  left: 0.429em;
+}
+
+.p-input-icon-left > .p-inputtext {
+  padding-left: 1.858em;
+}
+
+.p-input-icon-right > i {
+  right: 0.429em;
+}
+
+.p-input-icon-right > .p-inputtext {
+  padding-right: 1.858em;
+}
+
 .p-listbox {
   background: #ffffff;
   color: #333333;

diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
@@ -668,6 +668,22 @@
   transition-duration: 0.2s;
 }
 
+.p-input-icon-left > i {
+  left: 0.429em;
+}
+
+.p-input-icon-left > .p-inputtext {
+  padding-left: 1.858em;
+}
+
+.p-input-icon-right > i {
+  right: 0.429em;
+}
+
+.p-input-icon-right > .p-inputtext {
+  padding-right: 1.858em;
+}
+
 .p-listbox {
   background: #ffffff;
   color: #333333;

diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
@@ -668,6 +668,22 @@
   transition-duration: 0.2s;
 }
 
+.p-input-icon-left > i {
+  left: 0.429em;
+}
+
+.p-input-icon-left > .p-inputtext {
+  padding-left: 1.858em;
+}
+
+.p-input-icon-right > i {
+  right: 0.429em;
+}
+
+.p-input-icon-right > .p-inputtext {
+  padding-right: 1.858em;
+}
+
 .p-listbox {
   background: #ffffff;
   color: #666666;

diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
@@ -668,6 +668,24 @@
   transition-duration: 0.2s;
 }
 
+.p-input-icon-left > i {
+  left: 0.5em;
+  color: #6c757d;
+}
+
+.p-input-icon-left > .p-inputtext {
+  padding-left: 2em;
+}
+
+.p-input-icon-right > i {
+  right: 0.5em;
+  color: #6c757d;
+}
+
+.p-input-icon-right > .p-inputtext {
+  padding-right: 2em;
+}
+
 .p-listbox {
   background: #ffffff;
   color: #495057;

diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
@@ -668,6 +668,24 @@
   transition-duration: 0.2s;
 }
 
+.p-input-icon-left > i {
+  left: 0.5em;
+  color: #6c757d;
+}
+
+.p-input-icon-left > .p-inputtext {
+  padding-left: 2em;
+}
+
+.p-input-icon-right > i {
+  right: 0.5em;
+  color: #6c757d;
+}
+
+.p-input-icon-right > .p-inputtext {
+  padding-right: 2em;
+}
+
 .p-listbox {
   background: #ffffff;
   color: #495057;

diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
@@ -668,6 +668,24 @@
   transition-duration: 0.2s;
 }
 
+.p-input-icon-left > i {
+  left: 0.5em;
+  color: #6c757d;
+}
+
+.p-input-icon-left > .p-inputtext {
+  padding-left: 2em;
+}
+
+.p-input-icon-right > i {
+  right: 0.5em;
+  color: #6c757d;
+}
+
+.p-input-icon-right > .p-inputtext {
+  padding-right: 2em;
+}
+
 .p-listbox {
   background: #ffffff;
   color: #495057;

diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
@@ -668,6 +668,24 @@
   transition-duration: 0.2s;
 }
 
+.p-input-icon-left > i {
+  left: 0.5em;
+  color: #6c757d;
+}
+
+.p-input-icon-left > .p-inputtext {
+  padding-left: 2em;
+}
+
+.p-input-icon-right > i {
+  right: 0.5em;
+  color: #6c757d;
+}
+
+.p-input-icon-right > .p-inputtext {
+  padding-right: 2em;
+}
+
 .p-listbox {
   background: #ffffff;
   color: #495057;

diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
@@ -668,6 +668,22 @@
   transition-duration: 0.2s;
 }
 
+.p-input-icon-left > i {
+  left: 0.5em;
+}
+
+.p-input-icon-left > .p-inputtext {
+  padding-left: 2em;
+}
+
+.p-input-icon-right > i {
+  right: 0.5em;
+}
+
+.p-input-icon-right > .p-inputtext {
+  padding-right: 2em;
+}
+
 .p-listbox {
   background: #34495E;
   color: #ebedef;

diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
@@ -668,6 +668,22 @@
   transition-duration: 0.2s;
 }
 
+.p-input-icon-left > i {
+  left: 0.5em;
+}
+
+.p-input-icon-left > .p-inputtext {
+  padding-left: 2em;
+}
+
+.p-input-icon-right > i {
+  right: 0.5em;
+}
+
+.p-input-icon-right > .p-inputtext {
+  padding-right: 2em;
+}
+
 .p-listbox {
   background: #34495E;
   color: #ebedef;

diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
@@ -668,6 +668,22 @@
   transition-duration: 0.2s;
 }
 
+.p-input-icon-left > i {
+  left: 0.5em;
+}
+
+.p-input-icon-left > .p-inputtext {
+  padding-left: 2em;
+}
+
+.p-input-icon-right > i {
+  right: 0.5em;
+}
+
+.p-input-icon-right > .p-inputtext {
+  padding-right: 2em;
+}
+
 .p-listbox {
   background: #34495E;
   color: #ebedef;

diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
@@ -668,6 +668,22 @@
   transition-duration: 0.2s;
 }
 
+.p-input-icon-left > i {
+  left: 0.5em;
+}
+
+.p-input-icon-left > .p-inputtext {
+  padding-left: 2em;
+}
+
+.p-input-icon-right > i {
+  right: 0.5em;
+}
+
+.p-input-icon-right > .p-inputtext {
+  padding-right: 2em;
+}
+
 .p-listbox {
   background: #34495E;
   color: #ebedef;

diff --git a/src/components/inputtext/InputText.css b/src/components/inputtext/InputText.css
@@ -52,4 +52,16 @@
 .p-float-label .input:-webkit-autofill ~ label {
     top: -20px;
     font-size: 12px;
+}
+
+.p-input-icon-left,
+.p-input-icon-right {
+    position: relative;
+}
+
+.p-input-icon-left > i,
+.p-input-icon-right > i {
+    position: absolute;
+    top: 50%;
+    margin-top: -.5em;
 }