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

Fixed #1321 - TreeSelect and CascadeSelect material theming improvements

pull/1333/head
Cagatay Civici 2021-06-07 17:05:27 +03:00
parent 103bce749b
commit fa3df99981
14 changed files with 821 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2183,7 +2183,7 @@
.p-datatable .p-datatable-tbody > tr > td {
text-align: left;
border: 1px solid #3f4b5b;
border-width: 0 0 1px 0;
border-width: 1px 0 0 0;
padding: 1rem 1rem;
}
.p-datatable .p-datatable-tbody > tr > td .p-row-toggler,

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

@ -2183,7 +2183,7 @@
.p-datatable .p-datatable-tbody > tr > td {
text-align: left;
border: 1px solid #3f4b5b;
border-width: 0 0 1px 0;
border-width: 1px 0 0 0;
padding: 1rem 1rem;
}
.p-datatable .p-datatable-tbody > tr > td .p-row-toggler,

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

@ -2183,7 +2183,7 @@
.p-datatable .p-datatable-tbody > tr > td {
text-align: left;
border: 1px solid #dee2e6;
border-width: 0 0 1px 0;
border-width: 1px 0 0 0;
padding: 1rem 1rem;
}
.p-datatable .p-datatable-tbody > tr > td .p-row-toggler,

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

@ -2183,7 +2183,7 @@
.p-datatable .p-datatable-tbody > tr > td {
text-align: left;
border: 1px solid #dee2e6;
border-width: 0 0 1px 0;
border-width: 1px 0 0 0;
padding: 1rem 1rem;
}
.p-datatable .p-datatable-tbody > tr > td .p-row-toggler,

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

@ -5430,6 +5430,11 @@
background-image: none;
background: transparent;
}
.p-input-filled .p-float-label .p-cascadeselect .p-cascadeselect-label {
padding-top: 1.5rem;
padding-bottom: 0.5rem;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-cascadeselect .p-cascadeselect-label {
padding-top: 1.5rem;
padding-bottom: 0.5rem;
@ -6124,6 +6129,94 @@
display: none;
}
.p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger {
background-image: none;
background: transparent;
}
.p-treeselect .p-treeselect-label {
border: 0 none;
}
.p-treeselect:not(.p-disabled).p-focus {
box-shadow: inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8;
}
.p-treeselect-item .p-ink {
background-color: rgba(206, 147, 216, 0.16);
}
.p-input-filled .p-treeselect {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border: 1px solid transparent;
background: rgba(255, 255, 255, 0.06) no-repeat;
background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3));
background-size: 0 2px, 100% 1px;
background-position: 50% 100%, 50% 100%;
background-origin: border-box;
}
.p-input-filled .p-treeselect .p-inputtext {
background-image: none;
background: transparent;
}
.p-input-filled .p-treeselect:not(.p-disabled):hover {
background-color: rgba(255, 255, 255, 0.08);
border-color: transparent;
background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
}
.p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus {
box-shadow: none;
background-color: rgba(255, 255, 255, 0.1);
border-color: transparent;
background-size: 100% 2px, 100% 1px;
}
.p-input-filled .p-treeselect .p-inputtext:enabled:hover, .p-input-filled .p-treeselect .p-inputtext:enabled:focus {
background-image: none;
background: transparent;
}
.p-input-filled .p-treeselect .p-treeselect-label:hover {
background-image: none;
background: transparent;
}
.p-float-label .p-treeselect-label .p-treeselect-token {
padding: 0.25rem 1rem;
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.p-input-filled .p-float-label .p-treeselect .p-treeselect-label {
padding-top: 1.5rem;
padding-bottom: 0.5rem;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect .p-treeselect-label {
padding-top: 1.5rem;
padding-bottom: 0.5rem;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-token {
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-token .p-treeselect-token-icon {
font-size: 75%;
}
.p-input-filled .p-treeselect.p-invalid {
border-color: transparent;
background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
}
.p-input-filled .p-treeselect.p-invalid:not(.p-disabled):hover {
background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
}
.p-input-filled .p-treeselect.p-invalid:not(.p-disabled).p-focus, .p-input-filled .p-treeselect.p-invalid:not(.p-disabled).p-inputwrapper-focus {
box-shadow: none;
background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
}
.p-treeselect.p-invalid:not(.p-disabled).p-focus {
box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
}
.p-treetable .p-sortable-column {
outline: 0 none;
}

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

@ -5430,6 +5430,11 @@
background-image: none;
background: transparent;
}
.p-input-filled .p-float-label .p-cascadeselect .p-cascadeselect-label {
padding-top: 1.5rem;
padding-bottom: 0.5rem;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-cascadeselect .p-cascadeselect-label {
padding-top: 1.5rem;
padding-bottom: 0.5rem;
@ -6124,6 +6129,94 @@
display: none;
}
.p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger {
background-image: none;
background: transparent;
}
.p-treeselect .p-treeselect-label {
border: 0 none;
}
.p-treeselect:not(.p-disabled).p-focus {
box-shadow: inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA;
}
.p-treeselect-item .p-ink {
background-color: rgba(159, 168, 218, 0.16);
}
.p-input-filled .p-treeselect {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border: 1px solid transparent;
background: rgba(255, 255, 255, 0.06) no-repeat;
background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3));
background-size: 0 2px, 100% 1px;
background-position: 50% 100%, 50% 100%;
background-origin: border-box;
}
.p-input-filled .p-treeselect .p-inputtext {
background-image: none;
background: transparent;
}
.p-input-filled .p-treeselect:not(.p-disabled):hover {
background-color: rgba(255, 255, 255, 0.08);
border-color: transparent;
background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
}
.p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus {
box-shadow: none;
background-color: rgba(255, 255, 255, 0.1);
border-color: transparent;
background-size: 100% 2px, 100% 1px;
}
.p-input-filled .p-treeselect .p-inputtext:enabled:hover, .p-input-filled .p-treeselect .p-inputtext:enabled:focus {
background-image: none;
background: transparent;
}
.p-input-filled .p-treeselect .p-treeselect-label:hover {
background-image: none;
background: transparent;
}
.p-float-label .p-treeselect-label .p-treeselect-token {
padding: 0.25rem 1rem;
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.p-input-filled .p-float-label .p-treeselect .p-treeselect-label {
padding-top: 1.5rem;
padding-bottom: 0.5rem;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect .p-treeselect-label {
padding-top: 1.5rem;
padding-bottom: 0.5rem;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-token {
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-token .p-treeselect-token-icon {
font-size: 75%;
}
.p-input-filled .p-treeselect.p-invalid {
border-color: transparent;
background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
}
.p-input-filled .p-treeselect.p-invalid:not(.p-disabled):hover {
background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
}
.p-input-filled .p-treeselect.p-invalid:not(.p-disabled).p-focus, .p-input-filled .p-treeselect.p-invalid:not(.p-disabled).p-inputwrapper-focus {
box-shadow: none;
background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
}
.p-treeselect.p-invalid:not(.p-disabled).p-focus {
box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
}
.p-treetable .p-sortable-column {
outline: 0 none;
}

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

@ -5430,6 +5430,11 @@
background-image: none;
background: transparent;
}
.p-input-filled .p-float-label .p-cascadeselect .p-cascadeselect-label {
padding-top: 1.5rem;
padding-bottom: 0.5rem;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-cascadeselect .p-cascadeselect-label {
padding-top: 1.5rem;
padding-bottom: 0.5rem;
@ -6124,6 +6129,94 @@
display: none;
}
.p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger {
background-image: none;
background: transparent;
}
.p-treeselect .p-treeselect-label {
border: 0 none;
}
.p-treeselect:not(.p-disabled).p-focus {
box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7;
}
.p-treeselect-item .p-ink {
background-color: rgba(103, 58, 183, 0.16);
}
.p-input-filled .p-treeselect {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border: 1px solid transparent;
background: #f5f5f5 no-repeat;
background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38));
background-size: 0 2px, 100% 1px;
background-position: 50% 100%, 50% 100%;
background-origin: border-box;
}
.p-input-filled .p-treeselect .p-inputtext {
background-image: none;
background: transparent;
}
.p-input-filled .p-treeselect:not(.p-disabled):hover {
background-color: #ececec;
border-color: transparent;
background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87));
}
.p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus {
box-shadow: none;
background-color: #dcdcdc;
border-color: transparent;
background-size: 100% 2px, 100% 1px;
}
.p-input-filled .p-treeselect .p-inputtext:enabled:hover, .p-input-filled .p-treeselect .p-inputtext:enabled:focus {
background-image: none;
background: transparent;
}
.p-input-filled .p-treeselect .p-treeselect-label:hover {
background-image: none;
background: transparent;
}
.p-float-label .p-treeselect-label .p-treeselect-token {
padding: 0.25rem 1rem;
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.p-input-filled .p-float-label .p-treeselect .p-treeselect-label {
padding-top: 1.5rem;
padding-bottom: 0.5rem;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect .p-treeselect-label {
padding-top: 1.5rem;
padding-bottom: 0.5rem;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-token {
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-token .p-treeselect-token-icon {
font-size: 75%;
}
.p-input-filled .p-treeselect.p-invalid {
border-color: transparent;
background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
}
.p-input-filled .p-treeselect.p-invalid:not(.p-disabled):hover {
background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
}
.p-input-filled .p-treeselect.p-invalid:not(.p-disabled).p-focus, .p-input-filled .p-treeselect.p-invalid:not(.p-disabled).p-inputwrapper-focus {
box-shadow: none;
background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
}
.p-treeselect.p-invalid:not(.p-disabled).p-focus {
box-shadow: inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020;
}
.p-treetable .p-sortable-column {
outline: 0 none;
}

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

@ -5430,6 +5430,11 @@
background-image: none;
background: transparent;
}
.p-input-filled .p-float-label .p-cascadeselect .p-cascadeselect-label {
padding-top: 1.5rem;
padding-bottom: 0.5rem;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-cascadeselect .p-cascadeselect-label {
padding-top: 1.5rem;
padding-bottom: 0.5rem;
@ -6124,6 +6129,94 @@
display: none;
}
.p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger {
background-image: none;
background: transparent;
}
.p-treeselect .p-treeselect-label {
border: 0 none;
}
.p-treeselect:not(.p-disabled).p-focus {
box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5;
}
.p-treeselect-item .p-ink {
background-color: rgba(63, 81, 181, 0.16);
}
.p-input-filled .p-treeselect {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border: 1px solid transparent;
background: #f5f5f5 no-repeat;
background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38));
background-size: 0 2px, 100% 1px;
background-position: 50% 100%, 50% 100%;
background-origin: border-box;
}
.p-input-filled .p-treeselect .p-inputtext {
background-image: none;
background: transparent;
}
.p-input-filled .p-treeselect:not(.p-disabled):hover {
background-color: #ececec;
border-color: transparent;
background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87));
}
.p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus {
box-shadow: none;
background-color: #dcdcdc;
border-color: transparent;
background-size: 100% 2px, 100% 1px;
}
.p-input-filled .p-treeselect .p-inputtext:enabled:hover, .p-input-filled .p-treeselect .p-inputtext:enabled:focus {
background-image: none;
background: transparent;
}
.p-input-filled .p-treeselect .p-treeselect-label:hover {
background-image: none;
background: transparent;
}
.p-float-label .p-treeselect-label .p-treeselect-token {
padding: 0.25rem 1rem;
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.p-input-filled .p-float-label .p-treeselect .p-treeselect-label {
padding-top: 1.5rem;
padding-bottom: 0.5rem;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect .p-treeselect-label {
padding-top: 1.5rem;
padding-bottom: 0.5rem;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-token {
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-token .p-treeselect-token-icon {
font-size: 75%;
}
.p-input-filled .p-treeselect.p-invalid {
border-color: transparent;
background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
}
.p-input-filled .p-treeselect.p-invalid:not(.p-disabled):hover {
background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
}
.p-input-filled .p-treeselect.p-invalid:not(.p-disabled).p-focus, .p-input-filled .p-treeselect.p-invalid:not(.p-disabled).p-inputwrapper-focus {
box-shadow: none;
background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
}
.p-treeselect.p-invalid:not(.p-disabled).p-focus {
box-shadow: inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020;
}
.p-treetable .p-sortable-column {
outline: 0 none;
}

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

@ -5430,6 +5430,11 @@
background-image: none;
background: transparent;
}
.p-input-filled .p-float-label .p-cascadeselect .p-cascadeselect-label {
padding-top: 1.25rem;
padding-bottom: 0.25rem;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-cascadeselect .p-cascadeselect-label {
padding-top: 1.25rem;
padding-bottom: 0.25rem;
@ -6124,6 +6129,94 @@
display: none;
}
.p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger {
background-image: none;
background: transparent;
}
.p-treeselect .p-treeselect-label {
border: 0 none;
}
.p-treeselect:not(.p-disabled).p-focus {
box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7;
}
.p-treeselect-item .p-ink {
background-color: rgba(103, 58, 183, 0.16);
}
.p-input-filled .p-treeselect {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border: 1px solid transparent;
background: rgba(255, 255, 255, 0.06) no-repeat;
background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3));
background-size: 0 2px, 100% 1px;
background-position: 50% 100%, 50% 100%;
background-origin: border-box;
}
.p-input-filled .p-treeselect .p-inputtext {
background-image: none;
background: transparent;
}
.p-input-filled .p-treeselect:not(.p-disabled):hover {
background-color: rgba(255, 255, 255, 0.08);
border-color: transparent;
background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
}
.p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus {
box-shadow: none;
background-color: rgba(255, 255, 255, 0.1);
border-color: transparent;
background-size: 100% 2px, 100% 1px;
}
.p-input-filled .p-treeselect .p-inputtext:enabled:hover, .p-input-filled .p-treeselect .p-inputtext:enabled:focus {
background-image: none;
background: transparent;
}
.p-input-filled .p-treeselect .p-treeselect-label:hover {
background-image: none;
background: transparent;
}
.p-float-label .p-treeselect-label .p-treeselect-token {
padding: 0.25rem 1rem;
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.p-input-filled .p-float-label .p-treeselect .p-treeselect-label {
padding-top: 1.25rem;
padding-bottom: 0.25rem;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect .p-treeselect-label {
padding-top: 1.25rem;
padding-bottom: 0.25rem;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-token {
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-token .p-treeselect-token-icon {
font-size: 75%;
}
.p-input-filled .p-treeselect.p-invalid {
border-color: transparent;
background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
}
.p-input-filled .p-treeselect.p-invalid:not(.p-disabled):hover {
background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
}
.p-input-filled .p-treeselect.p-invalid:not(.p-disabled).p-focus, .p-input-filled .p-treeselect.p-invalid:not(.p-disabled).p-inputwrapper-focus {
box-shadow: none;
background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
}
.p-treeselect.p-invalid:not(.p-disabled).p-focus {
box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
}
.p-treetable .p-sortable-column {
outline: 0 none;
}

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

@ -5430,6 +5430,11 @@
background-image: none;
background: transparent;
}
.p-input-filled .p-float-label .p-cascadeselect .p-cascadeselect-label {
padding-top: 1.25rem;
padding-bottom: 0.25rem;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-cascadeselect .p-cascadeselect-label {
padding-top: 1.25rem;
padding-bottom: 0.25rem;
@ -6124,6 +6129,94 @@
display: none;
}
.p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger {
background-image: none;
background: transparent;
}
.p-treeselect .p-treeselect-label {
border: 0 none;
}
.p-treeselect:not(.p-disabled).p-focus {
box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5;
}
.p-treeselect-item .p-ink {
background-color: rgba(63, 81, 181, 0.16);
}
.p-input-filled .p-treeselect {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border: 1px solid transparent;
background: rgba(255, 255, 255, 0.06) no-repeat;
background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3));
background-size: 0 2px, 100% 1px;
background-position: 50% 100%, 50% 100%;
background-origin: border-box;
}
.p-input-filled .p-treeselect .p-inputtext {
background-image: none;
background: transparent;
}
.p-input-filled .p-treeselect:not(.p-disabled):hover {
background-color: rgba(255, 255, 255, 0.08);
border-color: transparent;
background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
}
.p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus {
box-shadow: none;
background-color: rgba(255, 255, 255, 0.1);
border-color: transparent;
background-size: 100% 2px, 100% 1px;
}
.p-input-filled .p-treeselect .p-inputtext:enabled:hover, .p-input-filled .p-treeselect .p-inputtext:enabled:focus {
background-image: none;
background: transparent;
}
.p-input-filled .p-treeselect .p-treeselect-label:hover {
background-image: none;
background: transparent;
}
.p-float-label .p-treeselect-label .p-treeselect-token {
padding: 0.25rem 1rem;
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.p-input-filled .p-float-label .p-treeselect .p-treeselect-label {
padding-top: 1.25rem;
padding-bottom: 0.25rem;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect .p-treeselect-label {
padding-top: 1.25rem;
padding-bottom: 0.25rem;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-token {
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-token .p-treeselect-token-icon {
font-size: 75%;
}
.p-input-filled .p-treeselect.p-invalid {
border-color: transparent;
background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
}
.p-input-filled .p-treeselect.p-invalid:not(.p-disabled):hover {
background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
}
.p-input-filled .p-treeselect.p-invalid:not(.p-disabled).p-focus, .p-input-filled .p-treeselect.p-invalid:not(.p-disabled).p-inputwrapper-focus {
box-shadow: none;
background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
}
.p-treeselect.p-invalid:not(.p-disabled).p-focus {
box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
}
.p-treetable .p-sortable-column {
outline: 0 none;
}

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

@ -5430,6 +5430,11 @@
background-image: none;
background: transparent;
}
.p-input-filled .p-float-label .p-cascadeselect .p-cascadeselect-label {
padding-top: 1.25rem;
padding-bottom: 0.25rem;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-cascadeselect .p-cascadeselect-label {
padding-top: 1.25rem;
padding-bottom: 0.25rem;
@ -6124,6 +6129,94 @@
display: none;
}
.p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger {
background-image: none;
background: transparent;
}
.p-treeselect .p-treeselect-label {
border: 0 none;
}
.p-treeselect:not(.p-disabled).p-focus {
box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7;
}
.p-treeselect-item .p-ink {
background-color: rgba(103, 58, 183, 0.16);
}
.p-input-filled .p-treeselect {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border: 1px solid transparent;
background: #f5f5f5 no-repeat;
background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38));
background-size: 0 2px, 100% 1px;
background-position: 50% 100%, 50% 100%;
background-origin: border-box;
}
.p-input-filled .p-treeselect .p-inputtext {
background-image: none;
background: transparent;
}
.p-input-filled .p-treeselect:not(.p-disabled):hover {
background-color: #ececec;
border-color: transparent;
background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87));
}
.p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus {
box-shadow: none;
background-color: #dcdcdc;
border-color: transparent;
background-size: 100% 2px, 100% 1px;
}
.p-input-filled .p-treeselect .p-inputtext:enabled:hover, .p-input-filled .p-treeselect .p-inputtext:enabled:focus {
background-image: none;
background: transparent;
}
.p-input-filled .p-treeselect .p-treeselect-label:hover {
background-image: none;
background: transparent;
}
.p-float-label .p-treeselect-label .p-treeselect-token {
padding: 0.25rem 1rem;
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.p-input-filled .p-float-label .p-treeselect .p-treeselect-label {
padding-top: 1.25rem;
padding-bottom: 0.25rem;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect .p-treeselect-label {
padding-top: 1.25rem;
padding-bottom: 0.25rem;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-token {
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-token .p-treeselect-token-icon {
font-size: 75%;
}
.p-input-filled .p-treeselect.p-invalid {
border-color: transparent;
background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
}
.p-input-filled .p-treeselect.p-invalid:not(.p-disabled):hover {
background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
}
.p-input-filled .p-treeselect.p-invalid:not(.p-disabled).p-focus, .p-input-filled .p-treeselect.p-invalid:not(.p-disabled).p-inputwrapper-focus {
box-shadow: none;
background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
}
.p-treeselect.p-invalid:not(.p-disabled).p-focus {
box-shadow: inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020;
}
.p-treetable .p-sortable-column {
outline: 0 none;
}

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

@ -5430,6 +5430,11 @@
background-image: none;
background: transparent;
}
.p-input-filled .p-float-label .p-cascadeselect .p-cascadeselect-label {
padding-top: 1.25rem;
padding-bottom: 0.25rem;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-cascadeselect .p-cascadeselect-label {
padding-top: 1.25rem;
padding-bottom: 0.25rem;
@ -6124,6 +6129,94 @@
display: none;
}
.p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger {
background-image: none;
background: transparent;
}
.p-treeselect .p-treeselect-label {
border: 0 none;
}
.p-treeselect:not(.p-disabled).p-focus {
box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5;
}
.p-treeselect-item .p-ink {
background-color: rgba(63, 81, 181, 0.16);
}
.p-input-filled .p-treeselect {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border: 1px solid transparent;
background: #f5f5f5 no-repeat;
background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38));
background-size: 0 2px, 100% 1px;
background-position: 50% 100%, 50% 100%;
background-origin: border-box;
}
.p-input-filled .p-treeselect .p-inputtext {
background-image: none;
background: transparent;
}
.p-input-filled .p-treeselect:not(.p-disabled):hover {
background-color: #ececec;
border-color: transparent;
background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87));
}
.p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus {
box-shadow: none;
background-color: #dcdcdc;
border-color: transparent;
background-size: 100% 2px, 100% 1px;
}
.p-input-filled .p-treeselect .p-inputtext:enabled:hover, .p-input-filled .p-treeselect .p-inputtext:enabled:focus {
background-image: none;
background: transparent;
}
.p-input-filled .p-treeselect .p-treeselect-label:hover {
background-image: none;
background: transparent;
}
.p-float-label .p-treeselect-label .p-treeselect-token {
padding: 0.25rem 1rem;
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.p-input-filled .p-float-label .p-treeselect .p-treeselect-label {
padding-top: 1.25rem;
padding-bottom: 0.25rem;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect .p-treeselect-label {
padding-top: 1.25rem;
padding-bottom: 0.25rem;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-token {
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
}
.p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-token .p-treeselect-token-icon {
font-size: 75%;
}
.p-input-filled .p-treeselect.p-invalid {
border-color: transparent;
background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
}
.p-input-filled .p-treeselect.p-invalid:not(.p-disabled):hover {
background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
}
.p-input-filled .p-treeselect.p-invalid:not(.p-disabled).p-focus, .p-input-filled .p-treeselect.p-invalid:not(.p-disabled).p-inputwrapper-focus {
box-shadow: none;
background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
}
.p-treeselect.p-invalid:not(.p-disabled).p-focus {
box-shadow: inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020, inset 0 0 0 1px #B00020;
}
.p-treetable .p-sortable-column {
outline: 0 none;
}

50
src/views/floatlabel/FloatLabelDemo.vue
View File

@ -93,8 +93,8 @@
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<Textarea id="textarea" v-model="value10" rows="3" />
<label for="textarea">Textarea</label>
<TreeSelect v-model="selectedNode" :options="nodes"></TreeSelect>
<label for="treeselect">TreeSelect</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
@ -103,6 +103,12 @@
<label for="password">Password</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<Textarea id="textarea" v-model="value10" rows="3" />
<label for="textarea">Textarea</label>
</span>
</div>
</div>
</div>
</div>
@ -113,6 +119,7 @@
<script>
import CountryService from '../../service/CountryService';
import NodeService from '../../service/NodeService';
export default {
data() {
@ -140,6 +147,8 @@ export default {
valueIconLeft: null,
valueIconRight: null,
selectedCity: null,
nodes: null,
selectedNode: null,
cascadeCountries: [
{
name: 'Australia',
@ -306,8 +315,8 @@ export default {
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<Textarea id="textarea" v-model="value10" rows="3" />
<label for="textarea">Textarea</label>
<TreeSelect v-model="selectedNode" :options="nodes"></TreeSelect>
<label for="treeselect">TreeSelect</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
@ -316,6 +325,12 @@ export default {
<label for="password">Password</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<Textarea id="textarea" v-model="value10" rows="3" />
<label for="textarea">Textarea</label>
</span>
</div>
</div>
</div>
</div>
@ -323,6 +338,8 @@ export default {
<script>
import CountryService from './service/CountryService';
import NodeService from './service/NodeService';
export default {
data() {
return {
@ -349,6 +366,8 @@ export default {
valueIconLeft: null,
valueIconRight: null,
selectedCity: null,
nodes: null,
selectedNode: null,
cascadeCountries: [
{
name: 'Australia',
@ -428,11 +447,14 @@ export default {
}
},
countryService: null,
nodeService: null,
created() {
this.countryService = new CountryService();
this.nodeService = new NodeService();
},
mounted() {
this.countryService.getCountries().then(data => this.countries = data);
this.nodeService.getTreeNodes().then(data => this.nodes = data);
},
methods: {
searchCountry(event) {
@ -541,8 +563,8 @@ export default {
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<Textarea id="textarea" v-model="value10" rows="3" />
<label for="textarea">Textarea</label>
<TreeSelect v-model="selectedNode" :options="nodes"></TreeSelect>
<label for="treeselect">TreeSelect</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
@ -551,6 +573,12 @@ export default {
<label for="password">Password</label>
</span>
</div>
<div class="p-field p-col-12 p-md-4">
<span class="p-float-label">
<Textarea id="textarea" v-model="value10" rows="3" />
<label for="textarea">Textarea</label>
</span>
</div>
</div>
</div>
</div>
@ -559,11 +587,13 @@ export default {
<script>
import { ref, onMounted } from 'vue';
import CountryService from './service/CountryService';
import NodeService from './service/NodeService';
export default {
setup() {
onMounted(() => {
countryService.value.getCountries().then(data => countries.value = data);
nodeService.value.getTreeNodes().then(data => nodes.value = data);
})
const countryService = ref(new CountryService());
const countries = ref();
@ -589,6 +619,8 @@ export default {
const valueIconLeft = ref();
const valueIconRight = ref();
const selectedCity = ref();
const selectedNode = ref();
const nodes = ref();
const cascadeCountries = ref([
{
name: 'Australia',
@ -680,7 +712,8 @@ export default {
};
return { countryService, countries, filteredCountries, cities, value1, value2, value3, value4, value5, value6,
value7, value8, value9, value10, value11, valueIconLeft, valueIconRight, selectedCity, cascadeCountries, searchCountry }
value7, value8, value9, value10, value11, valueIconLeft, valueIconRight, selectedCity, cascadeCountries, searchCountry,
nodes, selectedNode }
}
}
<\\/script>
@ -690,11 +723,14 @@ export default {
}
},
countryService: null,
nodeService: null,
created() {
this.countryService = new CountryService();
this.nodeService = new NodeService();
},
mounted() {
this.countryService.getCountries().then(data => this.countries = data);
this.nodeService.getTreeNodes().then(data => this.nodes = data);
},
methods: {
searchCountry(event) {

34
src/views/invalid/InvalidDemo.vue
View File

@ -40,11 +40,14 @@
<MultiSelect id="multiselect" v-model="value8" :options="cities" optionLabel="name" placeholder="MultiSelect" class="p-invalid" />
</div>
<div class="p-field p-col-12 p-md-4">
<Textarea id="textarea" v-model="value9" rows="3" placeholder="Textarea" class="p-invalid" />
<TreeSelect id="treeselect" v-model="selectedNode" :options="nodes" placeholder="TreeSelect" class="p-invalid"></TreeSelect>
</div>
<div class="p-field p-col-12 p-md-4">
<Password id="password" v-model="value10" placeholder="Password" class="p-invalid" />
</div>
<div class="p-field p-col-12 p-md-4">
<Textarea id="textarea" v-model="value9" rows="3" placeholder="Textarea" class="p-invalid" />
</div>
</div>
</div>
</div>
@ -55,6 +58,7 @@
<script>
import CountryService from '../../service/CountryService';
import NodeService from '../../service/NodeService';
export default {
data() {
@ -79,6 +83,8 @@ export default {
value9: null,
value10: null,
selectedCity: null,
nodes: null,
selectedNode: null,
cascadeCountries: [
{
name: 'Australia',
@ -191,17 +197,21 @@ export default {
<MultiSelect id="multiselect" v-model="value8" :options="cities" optionLabel="name" placeholder="MultiSelect" class="p-invalid" />
</div>
<div class="p-field p-col-12 p-md-4">
<Textarea id="textarea" v-model="value9" rows="3" placeholder="Textarea" class="p-invalid" />
<TreeSelect id="treeselect" v-model="selectedNode" :options="nodes" placeholder="TreeSelect" class="p-invalid"></TreeSelect>
</div>
<div class="p-field p-col-12 p-md-4">
<Password id="password" v-model="value10" placeholder="Password" class="p-invalid" />
</div>
<div class="p-field p-col-12 p-md-4">
<Textarea id="textarea" v-model="value9" rows="3" placeholder="Textarea" class="p-invalid" />
</div>
</div>
</div>
</template>
<script>
import CountryService from './service/CountryService';
import NodeService from './service/NodeService';
export default {
data() {
@ -226,6 +236,8 @@ export default {
value9: null,
value10: null,
selectedCity: null,
nodes: null,
selectedNode: null,
cascadeCountries: [
{
name: 'Australia',
@ -305,11 +317,14 @@ export default {
}
},
countryService: null,
nodeService: null,
created() {
this.countryService = new CountryService();
this.nodeService = new NodeService();
},
mounted() {
this.countryService.getCountries().then(data => this.countries = data);
this.nodeService.getTreeNodes().then(data => this.nodes = data);
},
methods: {
searchCountry(event) {
@ -364,22 +379,27 @@ export default {
<MultiSelect id="multiselect" v-model="value8" :options="cities" optionLabel="name" placeholder="MultiSelect" class="p-invalid" />
</div>
<div class="p-field p-col-12 p-md-4">
<Textarea id="textarea" v-model="value9" rows="3" placeholder="Textarea" class="p-invalid" />
<TreeSelect id="treeselect" v-model="selectedNode" :options="nodes" placeholder="TreeSelect" class="p-invalid"></TreeSelect>
</div>
<div class="p-field p-col-12 p-md-4">
<Password id="password" v-model="value10" placeholder="Password" class="p-invalid" />
</div>
<div class="p-field p-col-12 p-md-4">
<Textarea id="textarea" v-model="value9" rows="3" placeholder="Textarea" class="p-invalid" />
</div>
</div>
</div>
</template>
<script>
import { ref, onMounted } from 'vue';
import CountryService from './service/CountryService';
import NodeService from './service/NodeService';
export default {
setup() {
onMounted(() => {
countryService.value.getCountries().then(data => countries.value = data);
nodeService.value.getTreeNodes().then(data => nodes.value = data);
})
const countryService = ref(new CountryService());
const countries = ref();
@ -402,6 +422,8 @@ export default {
const value9 = ref();
const value10 = ref();
const selectedCity = ref();
const selectedNode = ref();
const nodes = ref();
const cascadeCountries = ref([
{
name: 'Australia',
@ -493,7 +515,8 @@ export default {
}
return { countryService, countries, filteredCountries, cities, value1, value2, value3, value4,
value5, value6, value7, value8, value9, value10, selectedCity, cascadeCountries, searchCountry }
value5, value6, value7, value8, value9, value10, selectedCity, cascadeCountries, searchCountry,
nodes, selectedNode }
}
}
@ -504,11 +527,14 @@ export default {
}
},
countryService: null,
nodeService: null,
created() {
this.countryService = new CountryService();
this.nodeService = new NodeService();
},
mounted() {
this.countryService.getCountries().then(data => this.countries = data);
this.nodeService.getTreeNodes().then(data => this.nodes = data);
},
methods: {
searchCountry(event) {