vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #379 - Support for left and right icons for Input

pull/388/head
cagataycivici 2020-07-10 15:10:53 +03:00
parent 6c3b707bdc
commit fbc7d15f5b
34 changed files with 108 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/themes/arya-blue/theme.css
View File

@ -769,13 +769,13 @@
padding: 0.625rem 0.625rem;
}
.p-float-label label {
.p-float-label > label {
left: 0.5rem;
color: rgba(255, 255, 255, 0.6);
transition-duration: 0.2s;
}
.p-input-icon-left > i {
.p-input-icon-left > i:first-of-type {
left: 0.5rem;
color: rgba(255, 255, 255, 0.6);
}
@ -784,7 +784,7 @@
padding-left: 2rem;
}
.p-input-icon-right > i {
.p-input-icon-right > i:last-of-type {
right: 0.5rem;
color: rgba(255, 255, 255, 0.6);
}

6
public/themes/arya-green/theme.css
View File

@ -769,13 +769,13 @@
padding: 0.625rem 0.625rem;
}
.p-float-label label {
.p-float-label > label {
left: 0.5rem;
color: rgba(255, 255, 255, 0.6);
transition-duration: 0.2s;
}
.p-input-icon-left > i {
.p-input-icon-left > i:first-of-type {
left: 0.5rem;
color: rgba(255, 255, 255, 0.6);
}
@ -784,7 +784,7 @@
padding-left: 2rem;
}
.p-input-icon-right > i {
.p-input-icon-right > i:last-of-type {
right: 0.5rem;
color: rgba(255, 255, 255, 0.6);
}

6
public/themes/arya-orange/theme.css
View File

@ -769,13 +769,13 @@
padding: 0.625rem 0.625rem;
}
.p-float-label label {
.p-float-label > label {
left: 0.5rem;
color: rgba(255, 255, 255, 0.6);
transition-duration: 0.2s;
}
.p-input-icon-left > i {
.p-input-icon-left > i:first-of-type {
left: 0.5rem;
color: rgba(255, 255, 255, 0.6);
}
@ -784,7 +784,7 @@
padding-left: 2rem;
}
.p-input-icon-right > i {
.p-input-icon-right > i:last-of-type {
right: 0.5rem;
color: rgba(255, 255, 255, 0.6);
}

6
public/themes/arya-purple/theme.css
View File

@ -769,13 +769,13 @@
padding: 0.625rem 0.625rem;
}
.p-float-label label {
.p-float-label > label {
left: 0.5rem;
color: rgba(255, 255, 255, 0.6);
transition-duration: 0.2s;
}
.p-input-icon-left > i {
.p-input-icon-left > i:first-of-type {
left: 0.5rem;
color: rgba(255, 255, 255, 0.6);
}
@ -784,7 +784,7 @@
padding-left: 2rem;
}
.p-input-icon-right > i {
.p-input-icon-right > i:last-of-type {
right: 0.5rem;
color: rgba(255, 255, 255, 0.6);
}

6
public/themes/bootstrap4-dark-blue/theme.css
View File

@ -769,13 +769,13 @@
padding: 0.625rem 0.9375rem;
}
.p-float-label label {
.p-float-label > label {
left: 0.75rem;
color: rgba(255, 255, 255, 0.6);
transition-duration: 0.15s;
}
.p-input-icon-left > i {
.p-input-icon-left > i:first-of-type {
left: 0.75rem;
color: rgba(255, 255, 255, 0.6);
}
@ -784,7 +784,7 @@
padding-left: 2.5rem;
}
.p-input-icon-right > i {
.p-input-icon-right > i:last-of-type {
right: 0.75rem;
color: rgba(255, 255, 255, 0.6);
}

6
public/themes/bootstrap4-dark-purple/theme.css
View File

@ -769,13 +769,13 @@
padding: 0.625rem 0.9375rem;
}
.p-float-label label {
.p-float-label > label {
left: 0.75rem;
color: rgba(255, 255, 255, 0.6);
transition-duration: 0.15s;
}
.p-input-icon-left > i {
.p-input-icon-left > i:first-of-type {
left: 0.75rem;
color: rgba(255, 255, 255, 0.6);
}
@ -784,7 +784,7 @@
padding-left: 2.5rem;
}
.p-input-icon-right > i {
.p-input-icon-right > i:last-of-type {
right: 0.75rem;
color: rgba(255, 255, 255, 0.6);
}

6
public/themes/bootstrap4-light-blue/theme.css
View File

@ -769,13 +769,13 @@
padding: 0.625rem 0.9375rem;
}
.p-float-label label {
.p-float-label > label {
left: 0.75rem;
color: #6c757d;
transition-duration: 0.15s;
}
.p-input-icon-left > i {
.p-input-icon-left > i:first-of-type {
left: 0.75rem;
color: #495057;
}
@ -784,7 +784,7 @@
padding-left: 2.5rem;
}
.p-input-icon-right > i {
.p-input-icon-right > i:last-of-type {
right: 0.75rem;
color: #495057;
}

6
public/themes/bootstrap4-light-purple/theme.css
View File

@ -769,13 +769,13 @@
padding: 0.625rem 0.9375rem;
}
.p-float-label label {
.p-float-label > label {
left: 0.75rem;
color: #6c757d;
transition-duration: 0.15s;
}
.p-input-icon-left > i {
.p-input-icon-left > i:first-of-type {
left: 0.75rem;
color: #495057;
}
@ -784,7 +784,7 @@
padding-left: 2.5rem;
}
.p-input-icon-right > i {
.p-input-icon-right > i:last-of-type {
right: 0.75rem;
color: #495057;
}

6
public/themes/luna-amber/theme.css
View File

@ -769,13 +769,13 @@
padding: 0.53625rem 0.53625rem;
}
.p-float-label label {
.p-float-label > label {
left: 0.429rem;
color: #9b9b9b;
transition-duration: 0.2s;
}
.p-input-icon-left > i {
.p-input-icon-left > i:first-of-type {
left: 0.429rem;
color: #888888;
}
@ -784,7 +784,7 @@
padding-left: 1.858rem;
}
.p-input-icon-right > i {
.p-input-icon-right > i:last-of-type {
right: 0.429rem;
color: #888888;
}

6
public/themes/luna-blue/theme.css
View File

@ -769,13 +769,13 @@
padding: 0.53625rem 0.53625rem;
}
.p-float-label label {
.p-float-label > label {
left: 0.429rem;
color: #9b9b9b;
transition-duration: 0.2s;
}
.p-input-icon-left > i {
.p-input-icon-left > i:first-of-type {
left: 0.429rem;
color: #888888;
}
@ -784,7 +784,7 @@
padding-left: 1.858rem;
}
.p-input-icon-right > i {
.p-input-icon-right > i:last-of-type {
right: 0.429rem;
color: #888888;
}

6
public/themes/luna-green/theme.css
View File

@ -769,13 +769,13 @@
padding: 0.53625rem 0.53625rem;
}
.p-float-label label {
.p-float-label > label {
left: 0.429rem;
color: #9b9b9b;
transition-duration: 0.2s;
}
.p-input-icon-left > i {
.p-input-icon-left > i:first-of-type {
left: 0.429rem;
color: #888888;
}
@ -784,7 +784,7 @@
padding-left: 1.858rem;
}
.p-input-icon-right > i {
.p-input-icon-right > i:last-of-type {
right: 0.429rem;
color: #888888;
}

6
public/themes/luna-pink/theme.css
View File

@ -769,13 +769,13 @@
padding: 0.53625rem 0.53625rem;
}
.p-float-label label {
.p-float-label > label {
left: 0.429rem;
color: #9b9b9b;
transition-duration: 0.2s;
}
.p-input-icon-left > i {
.p-input-icon-left > i:first-of-type {
left: 0.429rem;
color: #888888;
}
@ -784,7 +784,7 @@
padding-left: 1.858rem;
}
.p-input-icon-right > i {
.p-input-icon-right > i:last-of-type {
right: 0.429rem;
color: #888888;
}

6
public/themes/md-dark-deeppurple/theme.css
View File

@ -789,13 +789,13 @@
padding: 1.25rem 1.25rem;
}
.p-float-label label {
.p-float-label > label {
left: 1rem;
color: rgba(255, 255, 255, 0.6);
transition-duration: 0.2s;
}
.p-input-icon-left > i {
.p-input-icon-left > i:first-of-type {
left: 1rem;
color: rgba(255, 255, 255, 0.6);
}
@ -804,7 +804,7 @@
padding-left: 3rem;
}
.p-input-icon-right > i {
.p-input-icon-right > i:last-of-type {
right: 1rem;
color: rgba(255, 255, 255, 0.6);
}

6
public/themes/md-dark-indigo/theme.css
View File

@ -789,13 +789,13 @@
padding: 1.25rem 1.25rem;
}
.p-float-label label {
.p-float-label > label {
left: 1rem;
color: rgba(255, 255, 255, 0.6);
transition-duration: 0.2s;
}
.p-input-icon-left > i {
.p-input-icon-left > i:first-of-type {
left: 1rem;
color: rgba(255, 255, 255, 0.6);
}
@ -804,7 +804,7 @@
padding-left: 3rem;
}
.p-input-icon-right > i {
.p-input-icon-right > i:last-of-type {
right: 1rem;
color: rgba(255, 255, 255, 0.6);
}

6
public/themes/md-light-deeppurple/theme.css
View File

@ -789,13 +789,13 @@
padding: 1.25rem 1.25rem;
}
.p-float-label label {
.p-float-label > label {
left: 1rem;
color: rgba(0, 0, 0, 0.6);
transition-duration: 0.2s;
}
.p-input-icon-left > i {
.p-input-icon-left > i:first-of-type {
left: 1rem;
color: rgba(0, 0, 0, 0.6);
}
@ -804,7 +804,7 @@
padding-left: 3rem;
}
.p-input-icon-right > i {
.p-input-icon-right > i:last-of-type {
right: 1rem;
color: rgba(0, 0, 0, 0.6);
}

6
public/themes/md-light-indigo/theme.css
View File

@ -789,13 +789,13 @@
padding: 1.25rem 1.25rem;
}
.p-float-label label {
.p-float-label > label {
left: 1rem;
color: rgba(0, 0, 0, 0.6);
transition-duration: 0.2s;
}
.p-input-icon-left > i {
.p-input-icon-left > i:first-of-type {
left: 1rem;
color: rgba(0, 0, 0, 0.6);
}
@ -804,7 +804,7 @@
padding-left: 3rem;
}
.p-input-icon-right > i {
.p-input-icon-right > i:last-of-type {
right: 1rem;
color: rgba(0, 0, 0, 0.6);
}

6
public/themes/mdc-dark-deeppurple/theme.css
View File

@ -789,13 +789,13 @@
padding: 0.9375rem 0.9375rem;
}
.p-float-label label {
.p-float-label > label {
left: 0.75rem;
color: rgba(255, 255, 255, 0.6);
transition-duration: 0.2s;
}
.p-input-icon-left > i {
.p-input-icon-left > i:first-of-type {
left: 0.75rem;
color: rgba(255, 255, 255, 0.6);
}
@ -804,7 +804,7 @@
padding-left: 2.5rem;
}
.p-input-icon-right > i {
.p-input-icon-right > i:last-of-type {
right: 0.75rem;
color: rgba(255, 255, 255, 0.6);
}

6
public/themes/mdc-dark-indigo/theme.css
View File

@ -789,13 +789,13 @@
padding: 0.9375rem 0.9375rem;
}
.p-float-label label {
.p-float-label > label {
left: 0.75rem;
color: rgba(255, 255, 255, 0.6);
transition-duration: 0.2s;
}
.p-input-icon-left > i {
.p-input-icon-left > i:first-of-type {
left: 0.75rem;
color: rgba(255, 255, 255, 0.6);
}
@ -804,7 +804,7 @@
padding-left: 2.5rem;
}
.p-input-icon-right > i {
.p-input-icon-right > i:last-of-type {
right: 0.75rem;
color: rgba(255, 255, 255, 0.6);
}

6
public/themes/mdc-light-deeppurple/theme.css
View File

@ -789,13 +789,13 @@
padding: 0.9375rem 0.9375rem;
}
.p-float-label label {
.p-float-label > label {
left: 0.75rem;
color: rgba(0, 0, 0, 0.6);
transition-duration: 0.2s;
}
.p-input-icon-left > i {
.p-input-icon-left > i:first-of-type {
left: 0.75rem;
color: rgba(0, 0, 0, 0.6);
}
@ -804,7 +804,7 @@
padding-left: 2.5rem;
}
.p-input-icon-right > i {
.p-input-icon-right > i:last-of-type {
right: 0.75rem;
color: rgba(0, 0, 0, 0.6);
}

6
public/themes/mdc-light-indigo/theme.css
View File

@ -789,13 +789,13 @@
padding: 0.9375rem 0.9375rem;
}
.p-float-label label {
.p-float-label > label {
left: 0.75rem;
color: rgba(0, 0, 0, 0.6);
transition-duration: 0.2s;
}
.p-input-icon-left > i {
.p-input-icon-left > i:first-of-type {
left: 0.75rem;
color: rgba(0, 0, 0, 0.6);
}
@ -804,7 +804,7 @@
padding-left: 2.5rem;
}
.p-input-icon-right > i {
.p-input-icon-right > i:last-of-type {
right: 0.75rem;
color: rgba(0, 0, 0, 0.6);
}

6
public/themes/nova-accent/theme.css
View File

@ -765,13 +765,13 @@
padding: 0.53625rem 0.53625rem;
}
.p-float-label label {
.p-float-label > label {
left: 0.429rem;
color: #666666;
transition-duration: 0.2s;
}
.p-input-icon-left > i {
.p-input-icon-left > i:first-of-type {
left: 0.429rem;
color: #848484;
}
@ -780,7 +780,7 @@
padding-left: 1.858rem;
}
.p-input-icon-right > i {
.p-input-icon-right > i:last-of-type {
right: 0.429rem;
color: #848484;
}

6
public/themes/nova-alt/theme.css
View File

@ -769,13 +769,13 @@
padding: 0.53625rem 0.53625rem;
}
.p-float-label label {
.p-float-label > label {
left: 0.429rem;
color: #666666;
transition-duration: 0.2s;
}
.p-input-icon-left > i {
.p-input-icon-left > i:first-of-type {
left: 0.429rem;
color: #848484;
}
@ -784,7 +784,7 @@
padding-left: 1.858rem;
}
.p-input-icon-right > i {
.p-input-icon-right > i:last-of-type {
right: 0.429rem;
color: #848484;
}

6
public/themes/nova-vue/theme.css
View File

@ -769,13 +769,13 @@
padding: 0.53625rem 0.53625rem;
}
.p-float-label label {
.p-float-label > label {
left: 0.429rem;
color: #666666;
transition-duration: 0.2s;
}
.p-input-icon-left > i {
.p-input-icon-left > i:first-of-type {
left: 0.429rem;
color: #848484;
}
@ -784,7 +784,7 @@
padding-left: 1.858rem;
}
.p-input-icon-right > i {
.p-input-icon-right > i:last-of-type {
right: 0.429rem;
color: #848484;
}

6
public/themes/nova/theme.css
View File

@ -769,13 +769,13 @@
padding: 0.53625rem 0.53625rem;
}
.p-float-label label {
.p-float-label > label {
left: 0.429rem;
color: #666666;
transition-duration: 0.2s;
}
.p-input-icon-left > i {
.p-input-icon-left > i:first-of-type {
left: 0.429rem;
color: #848484;
}
@ -784,7 +784,7 @@
padding-left: 1.858rem;
}
.p-input-icon-right > i {
.p-input-icon-right > i:last-of-type {
right: 0.429rem;
color: #848484;
}

6
public/themes/rhea/theme.css
View File

@ -765,13 +765,13 @@
padding: 0.53625rem 0.53625rem;
}
.p-float-label label {
.p-float-label > label {
left: 0.429rem;
color: #a6a6a6;
transition-duration: 0.2s;
}
.p-input-icon-left > i {
.p-input-icon-left > i:first-of-type {
left: 0.429rem;
color: #a6a6a6;
}
@ -780,7 +780,7 @@
padding-left: 1.858rem;
}
.p-input-icon-right > i {
.p-input-icon-right > i:last-of-type {
right: 0.429rem;
color: #a6a6a6;
}

6
public/themes/saga-blue/theme.css
View File

@ -769,13 +769,13 @@
padding: 0.625rem 0.625rem;
}
.p-float-label label {
.p-float-label > label {
left: 0.5rem;
color: #6c757d;
transition-duration: 0.2s;
}
.p-input-icon-left > i {
.p-input-icon-left > i:first-of-type {
left: 0.5rem;
color: #6c757d;
}
@ -784,7 +784,7 @@
padding-left: 2rem;
}
.p-input-icon-right > i {
.p-input-icon-right > i:last-of-type {
right: 0.5rem;
color: #6c757d;
}

6
public/themes/saga-green/theme.css
View File

@ -769,13 +769,13 @@
padding: 0.625rem 0.625rem;
}
.p-float-label label {
.p-float-label > label {
left: 0.5rem;
color: #6c757d;
transition-duration: 0.2s;
}
.p-input-icon-left > i {
.p-input-icon-left > i:first-of-type {
left: 0.5rem;
color: #6c757d;
}
@ -784,7 +784,7 @@
padding-left: 2rem;
}
.p-input-icon-right > i {
.p-input-icon-right > i:last-of-type {
right: 0.5rem;
color: #6c757d;
}

6
public/themes/saga-orange/theme.css
View File

@ -769,13 +769,13 @@
padding: 0.625rem 0.625rem;
}
.p-float-label label {
.p-float-label > label {
left: 0.5rem;
color: #6c757d;
transition-duration: 0.2s;
}
.p-input-icon-left > i {
.p-input-icon-left > i:first-of-type {
left: 0.5rem;
color: #6c757d;
}
@ -784,7 +784,7 @@
padding-left: 2rem;
}
.p-input-icon-right > i {
.p-input-icon-right > i:last-of-type {
right: 0.5rem;
color: #6c757d;
}

6
public/themes/saga-purple/theme.css
View File

@ -769,13 +769,13 @@
padding: 0.625rem 0.625rem;
}
.p-float-label label {
.p-float-label > label {
left: 0.5rem;
color: #6c757d;
transition-duration: 0.2s;
}
.p-input-icon-left > i {
.p-input-icon-left > i:first-of-type {
left: 0.5rem;
color: #6c757d;
}
@ -784,7 +784,7 @@
padding-left: 2rem;
}
.p-input-icon-right > i {
.p-input-icon-right > i:last-of-type {
right: 0.5rem;
color: #6c757d;
}

6
public/themes/vela-blue/theme.css
View File

@ -769,13 +769,13 @@
padding: 0.625rem 0.625rem;
}
.p-float-label label {
.p-float-label > label {
left: 0.5rem;
color: rgba(255, 255, 255, 0.6);
transition-duration: 0.2s;
}
.p-input-icon-left > i {
.p-input-icon-left > i:first-of-type {
left: 0.5rem;
color: rgba(255, 255, 255, 0.6);
}
@ -784,7 +784,7 @@
padding-left: 2rem;
}
.p-input-icon-right > i {
.p-input-icon-right > i:last-of-type {
right: 0.5rem;
color: rgba(255, 255, 255, 0.6);
}

6
public/themes/vela-green/theme.css
View File

@ -769,13 +769,13 @@
padding: 0.625rem 0.625rem;
}
.p-float-label label {
.p-float-label > label {
left: 0.5rem;
color: rgba(255, 255, 255, 0.6);
transition-duration: 0.2s;
}
.p-input-icon-left > i {
.p-input-icon-left > i:first-of-type {
left: 0.5rem;
color: rgba(255, 255, 255, 0.6);
}
@ -784,7 +784,7 @@
padding-left: 2rem;
}
.p-input-icon-right > i {
.p-input-icon-right > i:last-of-type {
right: 0.5rem;
color: rgba(255, 255, 255, 0.6);
}

6
public/themes/vela-orange/theme.css
View File

@ -769,13 +769,13 @@
padding: 0.625rem 0.625rem;
}
.p-float-label label {
.p-float-label > label {
left: 0.5rem;
color: rgba(255, 255, 255, 0.6);
transition-duration: 0.2s;
}
.p-input-icon-left > i {
.p-input-icon-left > i:first-of-type {
left: 0.5rem;
color: rgba(255, 255, 255, 0.6);
}
@ -784,7 +784,7 @@
padding-left: 2rem;
}
.p-input-icon-right > i {
.p-input-icon-right > i:last-of-type {
right: 0.5rem;
color: rgba(255, 255, 255, 0.6);
}

6
public/themes/vela-purple/theme.css
View File

@ -769,13 +769,13 @@
padding: 0.625rem 0.625rem;
}
.p-float-label label {
.p-float-label > label {
left: 0.5rem;
color: rgba(255, 255, 255, 0.6);
transition-duration: 0.2s;
}
.p-input-icon-left > i {
.p-input-icon-left > i:first-of-type {
left: 0.5rem;
color: rgba(255, 255, 255, 0.6);
}
@ -784,7 +784,7 @@
padding-left: 2rem;
}
.p-input-icon-right > i {
.p-input-icon-right > i:last-of-type {
right: 0.5rem;
color: rgba(255, 255, 255, 0.6);
}

12
src/views/inputtext/InputTextDoc.vue
View File

@ -23,8 +23,8 @@ import InputText from 'primevue/inputtext';
</CodeHighlight>
<h5>Icons</h5>
<p>An icon can be integrated within an input field by wrapping the input and the icon with an element having either <i>p-input-icon-right</i>
or <i>p-input-icon-left</i> class depending on the icon location.</p>
<p>An icon can be integrated within an input field by wrapping the input and the icon with an element having <i>p-input-icon-right</i>
and <i>p-input-icon-left</i> classes depending on the icon location.</p>
<CodeHighlight>
&lt;span class="p-input-icon-left"&gt;
&lt;i class="pi pi-search" /&gt;
@ -32,8 +32,14 @@ import InputText from 'primevue/inputtext';
&lt;/span&gt;
&lt;span class="p-input-icon-right"&gt;
&lt;i class="pi pi-spin pi-spinner" /&gt;
&lt;InputText type="text" v-model="value2" /&gt;
&lt;i class="pi pi-spin pi-spinner" /&gt;
&lt;/span&gt;
&lt;span class="p-input-icon-left p-input-icon-right"&gt;
&lt;i class="pi pi-search" /&gt;
&lt;InputText type="text" v-model="value3" /&gt;
&lt;i class="pi pi-spin pi-spinner" /&gt;
&lt;/span&gt;
</CodeHighlight>