Fixed #379 - Support for left and right icons for Input
parent
6c3b707bdc
commit
fbc7d15f5b
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
<span class="p-input-icon-left">
|
||||
<i class="pi pi-search" />
|
||||
|
@ -32,8 +32,14 @@ import InputText from 'primevue/inputtext';
|
|||
</span>
|
||||
|
||||
<span class="p-input-icon-right">
|
||||
<i class="pi pi-spin pi-spinner" />
|
||||
<InputText type="text" v-model="value2" />
|
||||
<i class="pi pi-spin pi-spinner" />
|
||||
</span>
|
||||
|
||||
<span class="p-input-icon-left p-input-icon-right">
|
||||
<i class="pi pi-search" />
|
||||
<InputText type="text" v-model="value3" />
|
||||
<i class="pi pi-spin pi-spinner" />
|
||||
</span>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
Loading…
Reference in New Issue