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

Fixed #686 - CascadeSelect

pull/744/head
Cagatay Civici 2020-12-07 17:36:46 +03:00
parent be523323af
commit 23be3cfbb6
44 changed files with 4091 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
exports/cascadeselect.d.ts vendored Normal file
View File

@ -0,0 +1 @@
export * from './components/cascadeselect/CascadeSelect';

2
exports/cascadeselect.js Normal file
View File

@ -0,0 +1,2 @@
'use strict';
module.exports = require('./components/cascadeselect/CascadeSelect.vue');

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

@ -324,6 +324,92 @@
padding: 0;
}
}
.p-cascadeselect {
background: #121212;
border: 1px solid #383838;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #64B5F6;
}
.p-cascadeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 1px #93cbf9;
border-color: #64B5F6;
}
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
padding: 0.5rem 0.5rem;
}
.p-cascadeselect .p-cascadeselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-cascadeselect .p-cascadeselect-label:enabled:focus {
outline: 0 none;
box-shadow: none;
}
.p-cascadeselect .p-cascadeselect-trigger {
background: transparent;
color: rgba(255, 255, 255, 0.6);
width: 2.357rem;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.p-cascadeselect.p-error, .p-cascadeselect.p-invalid {
border-color: #ef9a9a;
}
.p-cascadeselect-panel {
background: #1e1e1e;
color: rgba(255, 255, 255, 0.87);
border: 1px solid #383838;
border-radius: 3px;
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
}
.p-cascadeselect-panel .p-cascadeselect-items {
padding: 0.5rem 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
margin: 0;
border: 0 none;
color: rgba(255, 255, 255, 0.87);
background: transparent;
transition: box-shadow 0.2s;
border-radius: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
padding: 0.5rem 1rem;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 1px #93cbf9;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: rgba(255, 255, 255, 0.87);
background: rgba(100, 181, 246, 0.16);
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 255, 255, 0.03);
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
.p-input-filled .p-cascadeselect {
background: #383838;
}
.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
background-color: #383838;
}
.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
background-color: #383838;
}
.p-checkbox {
width: 20px;
height: 20px;

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

@ -324,6 +324,92 @@
padding: 0;
}
}
.p-cascadeselect {
background: #121212;
border: 1px solid #383838;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #81C784;
}
.p-cascadeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 1px #a7d8a9;
border-color: #81C784;
}
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
padding: 0.5rem 0.5rem;
}
.p-cascadeselect .p-cascadeselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-cascadeselect .p-cascadeselect-label:enabled:focus {
outline: 0 none;
box-shadow: none;
}
.p-cascadeselect .p-cascadeselect-trigger {
background: transparent;
color: rgba(255, 255, 255, 0.6);
width: 2.357rem;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.p-cascadeselect.p-error, .p-cascadeselect.p-invalid {
border-color: #ef9a9a;
}
.p-cascadeselect-panel {
background: #1e1e1e;
color: rgba(255, 255, 255, 0.87);
border: 1px solid #383838;
border-radius: 3px;
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
}
.p-cascadeselect-panel .p-cascadeselect-items {
padding: 0.5rem 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
margin: 0;
border: 0 none;
color: rgba(255, 255, 255, 0.87);
background: transparent;
transition: box-shadow 0.2s;
border-radius: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
padding: 0.5rem 1rem;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 1px #a7d8a9;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: rgba(255, 255, 255, 0.87);
background: rgba(129, 199, 132, 0.16);
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 255, 255, 0.03);
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
.p-input-filled .p-cascadeselect {
background: #383838;
}
.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
background-color: #383838;
}
.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
background-color: #383838;
}
.p-checkbox {
width: 20px;
height: 20px;

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

@ -324,6 +324,92 @@
padding: 0;
}
}
.p-cascadeselect {
background: #121212;
border: 1px solid #383838;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #FFD54F;
}
.p-cascadeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 1px #ffe284;
border-color: #FFD54F;
}
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
padding: 0.5rem 0.5rem;
}
.p-cascadeselect .p-cascadeselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-cascadeselect .p-cascadeselect-label:enabled:focus {
outline: 0 none;
box-shadow: none;
}
.p-cascadeselect .p-cascadeselect-trigger {
background: transparent;
color: rgba(255, 255, 255, 0.6);
width: 2.357rem;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.p-cascadeselect.p-error, .p-cascadeselect.p-invalid {
border-color: #ef9a9a;
}
.p-cascadeselect-panel {
background: #1e1e1e;
color: rgba(255, 255, 255, 0.87);
border: 1px solid #383838;
border-radius: 3px;
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
}
.p-cascadeselect-panel .p-cascadeselect-items {
padding: 0.5rem 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
margin: 0;
border: 0 none;
color: rgba(255, 255, 255, 0.87);
background: transparent;
transition: box-shadow 0.2s;
border-radius: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
padding: 0.5rem 1rem;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 1px #ffe284;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 213, 79, 0.16);
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 255, 255, 0.03);
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
.p-input-filled .p-cascadeselect {
background: #383838;
}
.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
background-color: #383838;
}
.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
background-color: #383838;
}
.p-checkbox {
width: 20px;
height: 20px;

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

@ -324,6 +324,92 @@
padding: 0;
}
}
.p-cascadeselect {
background: #121212;
border: 1px solid #383838;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #BA68C8;
}
.p-cascadeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 1px #cf95d9;
border-color: #BA68C8;
}
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
padding: 0.5rem 0.5rem;
}
.p-cascadeselect .p-cascadeselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-cascadeselect .p-cascadeselect-label:enabled:focus {
outline: 0 none;
box-shadow: none;
}
.p-cascadeselect .p-cascadeselect-trigger {
background: transparent;
color: rgba(255, 255, 255, 0.6);
width: 2.357rem;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.p-cascadeselect.p-error, .p-cascadeselect.p-invalid {
border-color: #ef9a9a;
}
.p-cascadeselect-panel {
background: #1e1e1e;
color: rgba(255, 255, 255, 0.87);
border: 1px solid #383838;
border-radius: 3px;
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
}
.p-cascadeselect-panel .p-cascadeselect-items {
padding: 0.5rem 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
margin: 0;
border: 0 none;
color: rgba(255, 255, 255, 0.87);
background: transparent;
transition: box-shadow 0.2s;
border-radius: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
padding: 0.5rem 1rem;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 1px #cf95d9;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: rgba(255, 255, 255, 0.87);
background: rgba(186, 104, 200, 0.16);
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 255, 255, 0.03);
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
.p-input-filled .p-cascadeselect {
background: #383838;
}
.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
background-color: #383838;
}
.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
background-color: #383838;
}
.p-checkbox {
width: 20px;
height: 20px;

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

@ -324,6 +324,92 @@
padding: 0;
}
}
.p-cascadeselect {
background: #20262e;
border: 1px solid #3f4b5b;
transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
border-radius: 4px;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #3f4b5b;
}
.p-cascadeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 1px #e3f3fe;
border-color: #8dd0ff;
}
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
padding: 0.5rem 0.75rem;
}
.p-cascadeselect .p-cascadeselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-cascadeselect .p-cascadeselect-label:enabled:focus {
outline: 0 none;
box-shadow: none;
}
.p-cascadeselect .p-cascadeselect-trigger {
background: transparent;
color: rgba(255, 255, 255, 0.6);
width: 2.357rem;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.p-cascadeselect.p-error, .p-cascadeselect.p-invalid {
border-color: #f19ea6;
}
.p-cascadeselect-panel {
background: #2a323d;
color: rgba(255, 255, 255, 0.87);
border: 1px solid #3f4b5b;
border-radius: 4px;
box-shadow: none;
}
.p-cascadeselect-panel .p-cascadeselect-items {
padding: 0.5rem 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
margin: 0;
border: 0 none;
color: rgba(255, 255, 255, 0.87);
background: transparent;
transition: box-shadow 0.15s;
border-radius: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
padding: 0.5rem 1.5rem;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.15rem #e3f3fe;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #151515;
background: #8dd0ff;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 255, 255, 0.04);
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
.p-input-filled .p-cascadeselect {
background: #3f4b5b;
}
.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
background-color: #3f4b5b;
}
.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
background-color: #3f4b5b;
}
.p-checkbox {
width: 20px;
height: 20px;

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

@ -324,6 +324,92 @@
padding: 0;
}
}
.p-cascadeselect {
background: #20262e;
border: 1px solid #3f4b5b;
transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
border-radius: 4px;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #3f4b5b;
}
.p-cascadeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 1px #f0e6f5;
border-color: #c298d8;
}
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
padding: 0.5rem 0.75rem;
}
.p-cascadeselect .p-cascadeselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-cascadeselect .p-cascadeselect-label:enabled:focus {
outline: 0 none;
box-shadow: none;
}
.p-cascadeselect .p-cascadeselect-trigger {
background: transparent;
color: rgba(255, 255, 255, 0.6);
width: 2.357rem;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.p-cascadeselect.p-error, .p-cascadeselect.p-invalid {
border-color: #f19ea6;
}
.p-cascadeselect-panel {
background: #2a323d;
color: rgba(255, 255, 255, 0.87);
border: 1px solid #3f4b5b;
border-radius: 4px;
box-shadow: none;
}
.p-cascadeselect-panel .p-cascadeselect-items {
padding: 0.5rem 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
margin: 0;
border: 0 none;
color: rgba(255, 255, 255, 0.87);
background: transparent;
transition: box-shadow 0.15s;
border-radius: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
padding: 0.5rem 1.5rem;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.15rem #f0e6f5;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #151515;
background: #c298d8;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 255, 255, 0.04);
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
.p-input-filled .p-cascadeselect {
background: #3f4b5b;
}
.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
background-color: #3f4b5b;
}
.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
background-color: #3f4b5b;
}
.p-checkbox {
width: 20px;
height: 20px;

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

@ -324,6 +324,92 @@
padding: 0;
}
}
.p-cascadeselect {
background: #ffffff;
border: 1px solid #ced4da;
transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
border-radius: 4px;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #ced4da;
}
.p-cascadeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
border-color: #007bff;
}
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
padding: 0.5rem 0.75rem;
}
.p-cascadeselect .p-cascadeselect-label.p-placeholder {
color: #6c757d;
}
.p-cascadeselect .p-cascadeselect-label:enabled:focus {
outline: 0 none;
box-shadow: none;
}
.p-cascadeselect .p-cascadeselect-trigger {
background: transparent;
color: #495057;
width: 2.357rem;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.p-cascadeselect.p-error, .p-cascadeselect.p-invalid {
border-color: #dc3545;
}
.p-cascadeselect-panel {
background: #ffffff;
color: #212529;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
box-shadow: none;
}
.p-cascadeselect-panel .p-cascadeselect-items {
padding: 0.5rem 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
margin: 0;
border: 0 none;
color: #212529;
background: transparent;
transition: box-shadow 0.15s;
border-radius: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
padding: 0.5rem 1.5rem;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5);
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #ffffff;
background: #007bff;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
color: #212529;
background: #e9ecef;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
.p-input-filled .p-cascadeselect {
background: #efefef;
}
.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
background-color: #efefef;
}
.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
background-color: #efefef;
}
.p-checkbox {
width: 20px;
height: 20px;

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

@ -324,6 +324,92 @@
padding: 0;
}
}
.p-cascadeselect {
background: #ffffff;
border: 1px solid #ced4da;
transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
border-radius: 4px;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #ced4da;
}
.p-cascadeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
border-color: #883cae;
}
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
padding: 0.5rem 0.75rem;
}
.p-cascadeselect .p-cascadeselect-label.p-placeholder {
color: #6c757d;
}
.p-cascadeselect .p-cascadeselect-label:enabled:focus {
outline: 0 none;
box-shadow: none;
}
.p-cascadeselect .p-cascadeselect-trigger {
background: transparent;
color: #495057;
width: 2.357rem;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.p-cascadeselect.p-error, .p-cascadeselect.p-invalid {
border-color: #dc3545;
}
.p-cascadeselect-panel {
background: #ffffff;
color: #212529;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
box-shadow: none;
}
.p-cascadeselect-panel .p-cascadeselect-items {
padding: 0.5rem 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
margin: 0;
border: 0 none;
color: #212529;
background: transparent;
transition: box-shadow 0.15s;
border-radius: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
padding: 0.5rem 1.5rem;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.15rem rgba(136, 60, 174, 0.5);
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #ffffff;
background: #883cae;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
color: #212529;
background: #e9ecef;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
.p-input-filled .p-cascadeselect {
background: #efefef;
}
.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
background-color: #efefef;
}
.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
background-color: #efefef;
}
.p-checkbox {
width: 20px;
height: 20px;

86
public/themes/fluent-light/theme.css
View File

@ -324,6 +324,92 @@
padding: 0;
}
}
.p-cascadeselect {
background: #ffffff;
border: 1px solid #605e5c;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 2px;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #323130;
}
.p-cascadeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 1px #605e5c;
border-color: #0078d4;
}
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
padding: 0.5rem 0.5rem;
}
.p-cascadeselect .p-cascadeselect-label.p-placeholder {
color: #605e5c;
}
.p-cascadeselect .p-cascadeselect-label:enabled:focus {
outline: 0 none;
box-shadow: none;
}
.p-cascadeselect .p-cascadeselect-trigger {
background: transparent;
color: #605e5c;
width: 2.357rem;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
.p-cascadeselect.p-error, .p-cascadeselect.p-invalid {
border-color: #a4252c;
}
.p-cascadeselect-panel {
background: #ffffff;
color: #323130;
border: 0 none;
border-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.133) 0px 3.2px 7.2px 0px, rgba(0, 0, 0, 0.11) 0px 0.6px 1.8px 0px;
}
.p-cascadeselect-panel .p-cascadeselect-items {
padding: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
margin: 0;
border: 1px solid transparent;
color: #323130;
background: transparent;
transition: box-shadow 0.2s;
border-radius: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
padding: 0.75rem 0.5rem;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 1px #605e5c;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #323130;
background: #edebe9;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
color: #323130;
background: #f3f2f1;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
.p-input-filled .p-cascadeselect {
background: #faf9f8;
}
.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
background-color: #faf9f8;
}
.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
background-color: #faf9f8;
}
.p-checkbox {
width: 20px;
height: 20px;

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

@ -324,6 +324,92 @@
padding: 0;
}
}
.p-cascadeselect {
background: #191919;
border: 1px solid #4b4b4b;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #FFE082;
}
.p-cascadeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.1rem white;
border-color: #FFE082;
}
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
padding: 0.429rem 0.429rem;
}
.p-cascadeselect .p-cascadeselect-label.p-placeholder {
color: #9b9b9b;
}
.p-cascadeselect .p-cascadeselect-label:enabled:focus {
outline: 0 none;
box-shadow: none;
}
.p-cascadeselect .p-cascadeselect-trigger {
background: transparent;
color: #888888;
width: 2.357rem;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.p-cascadeselect.p-error, .p-cascadeselect.p-invalid {
border-color: #e57373;
}
.p-cascadeselect-panel {
background: #323232;
color: #dedede;
border: 1px solid #191919;
border-radius: 3px;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}
.p-cascadeselect-panel .p-cascadeselect-items {
padding: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
margin: 0;
border: 0 none;
color: #dedede;
background: transparent;
transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
padding: 0.429rem 0.857rem;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.2rem white;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #212529;
background: #FFE082;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
color: #dedede;
background: #4c4c4c;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
.p-input-filled .p-cascadeselect {
background: #4b4b4b;
}
.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
background-color: #4b4b4b;
}
.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
background-color: #4b4b4b;
}
.p-checkbox {
width: 20px;
height: 20px;

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

@ -324,6 +324,92 @@
padding: 0;
}
}
.p-cascadeselect {
background: #191919;
border: 1px solid #4b4b4b;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #81D4FA;
}
.p-cascadeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.1rem white;
border-color: #81D4FA;
}
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
padding: 0.429rem 0.429rem;
}
.p-cascadeselect .p-cascadeselect-label.p-placeholder {
color: #9b9b9b;
}
.p-cascadeselect .p-cascadeselect-label:enabled:focus {
outline: 0 none;
box-shadow: none;
}
.p-cascadeselect .p-cascadeselect-trigger {
background: transparent;
color: #888888;
width: 2.357rem;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.p-cascadeselect.p-error, .p-cascadeselect.p-invalid {
border-color: #e57373;
}
.p-cascadeselect-panel {
background: #323232;
color: #dedede;
border: 1px solid #191919;
border-radius: 3px;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}
.p-cascadeselect-panel .p-cascadeselect-items {
padding: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
margin: 0;
border: 0 none;
color: #dedede;
background: transparent;
transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
padding: 0.429rem 0.857rem;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.2rem white;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #212529;
background: #81D4FA;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
color: #dedede;
background: #4c4c4c;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
.p-input-filled .p-cascadeselect {
background: #4b4b4b;
}
.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
background-color: #4b4b4b;
}
.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
background-color: #4b4b4b;
}
.p-checkbox {
width: 20px;
height: 20px;

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

@ -324,6 +324,92 @@
padding: 0;
}
}
.p-cascadeselect {
background: #191919;
border: 1px solid #4b4b4b;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #C5E1A5;
}
.p-cascadeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.1rem white;
border-color: #C5E1A5;
}
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
padding: 0.429rem 0.429rem;
}
.p-cascadeselect .p-cascadeselect-label.p-placeholder {
color: #9b9b9b;
}
.p-cascadeselect .p-cascadeselect-label:enabled:focus {
outline: 0 none;
box-shadow: none;
}
.p-cascadeselect .p-cascadeselect-trigger {
background: transparent;
color: #888888;
width: 2.357rem;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.p-cascadeselect.p-error, .p-cascadeselect.p-invalid {
border-color: #e57373;
}
.p-cascadeselect-panel {
background: #323232;
color: #dedede;
border: 1px solid #191919;
border-radius: 3px;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}
.p-cascadeselect-panel .p-cascadeselect-items {
padding: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
margin: 0;
border: 0 none;
color: #dedede;
background: transparent;
transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
padding: 0.429rem 0.857rem;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.2rem white;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #212529;
background: #C5E1A5;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
color: #dedede;
background: #4c4c4c;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
.p-input-filled .p-cascadeselect {
background: #4b4b4b;
}
.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
background-color: #4b4b4b;
}
.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
background-color: #4b4b4b;
}
.p-checkbox {
width: 20px;
height: 20px;

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

@ -324,6 +324,92 @@
padding: 0;
}
}
.p-cascadeselect {
background: #191919;
border: 1px solid #4b4b4b;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #F48FB1;
}
.p-cascadeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.1rem white;
border-color: #F48FB1;
}
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
padding: 0.429rem 0.429rem;
}
.p-cascadeselect .p-cascadeselect-label.p-placeholder {
color: #9b9b9b;
}
.p-cascadeselect .p-cascadeselect-label:enabled:focus {
outline: 0 none;
box-shadow: none;
}
.p-cascadeselect .p-cascadeselect-trigger {
background: transparent;
color: #888888;
width: 2.357rem;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.p-cascadeselect.p-error, .p-cascadeselect.p-invalid {
border-color: #e57373;
}
.p-cascadeselect-panel {
background: #323232;
color: #dedede;
border: 1px solid #191919;
border-radius: 3px;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}
.p-cascadeselect-panel .p-cascadeselect-items {
padding: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
margin: 0;
border: 0 none;
color: #dedede;
background: transparent;
transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
padding: 0.429rem 0.857rem;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.2rem white;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #212529;
background: #F48FB1;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
color: #dedede;
background: #4c4c4c;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
.p-input-filled .p-cascadeselect {
background: #4b4b4b;
}
.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
background-color: #4b4b4b;
}
.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
background-color: #4b4b4b;
}
.p-checkbox {
width: 20px;
height: 20px;

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

@ -348,6 +348,92 @@
padding: 0;
}
}
.p-cascadeselect {
background: #1e1e1e;
border: 1px solid rgba(255, 255, 255, 0.3);
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
border-radius: 4px;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: rgba(255, 255, 255, 0.6);
}
.p-cascadeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: none;
border-color: #CE93D8;
}
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
padding: 1rem 1rem;
}
.p-cascadeselect .p-cascadeselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-cascadeselect .p-cascadeselect-label:enabled:focus {
outline: 0 none;
box-shadow: none;
}
.p-cascadeselect .p-cascadeselect-trigger {
background: transparent;
color: rgba(255, 255, 255, 0.6);
width: 2.357rem;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.p-cascadeselect.p-error, .p-cascadeselect.p-invalid {
border-color: #f44435;
}
.p-cascadeselect-panel {
background: #2b2b2b;
color: rgba(255, 255, 255, 0.87);
border: 0 none;
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.p-cascadeselect-panel .p-cascadeselect-items {
padding: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
margin: 0;
border: 0 none;
color: rgba(255, 255, 255, 0.87);
background: transparent;
transition: none;
border-radius: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
padding: 1rem 1rem;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: none;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #CE93D8;
background: rgba(206, 147, 216, 0.16);
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 255, 255, 0.04);
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
.p-input-filled .p-cascadeselect {
background: rgba(255, 255, 255, 0.06);
}
.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
background-color: rgba(255, 255, 255, 0.08);
}
.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
background-color: rgba(255, 255, 255, 0.1);
}
.p-checkbox {
width: 18px;
height: 18px;

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

@ -348,6 +348,92 @@
padding: 0;
}
}
.p-cascadeselect {
background: #1e1e1e;
border: 1px solid rgba(255, 255, 255, 0.3);
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
border-radius: 4px;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: rgba(255, 255, 255, 0.6);
}
.p-cascadeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: none;
border-color: #9FA8DA;
}
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
padding: 1rem 1rem;
}
.p-cascadeselect .p-cascadeselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-cascadeselect .p-cascadeselect-label:enabled:focus {
outline: 0 none;
box-shadow: none;
}
.p-cascadeselect .p-cascadeselect-trigger {
background: transparent;
color: rgba(255, 255, 255, 0.6);
width: 2.357rem;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.p-cascadeselect.p-error, .p-cascadeselect.p-invalid {
border-color: #f44435;
}
.p-cascadeselect-panel {
background: #2b2b2b;
color: rgba(255, 255, 255, 0.87);
border: 0 none;
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.p-cascadeselect-panel .p-cascadeselect-items {
padding: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
margin: 0;
border: 0 none;
color: rgba(255, 255, 255, 0.87);
background: transparent;
transition: none;
border-radius: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
padding: 1rem 1rem;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: none;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #9FA8DA;
background: rgba(159, 168, 218, 0.16);
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 255, 255, 0.04);
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
.p-input-filled .p-cascadeselect {
background: rgba(255, 255, 255, 0.06);
}
.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
background-color: rgba(255, 255, 255, 0.08);
}
.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
background-color: rgba(255, 255, 255, 0.1);
}
.p-checkbox {
width: 18px;
height: 18px;

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

@ -348,6 +348,92 @@
padding: 0;
}
}
.p-cascadeselect {
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.38);
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
border-radius: 4px;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #000001;
}
.p-cascadeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: none;
border-color: #673AB7;
}
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
padding: 1rem 1rem;
}
.p-cascadeselect .p-cascadeselect-label.p-placeholder {
color: rgba(0, 0, 0, 0.6);
}
.p-cascadeselect .p-cascadeselect-label:enabled:focus {
outline: 0 none;
box-shadow: none;
}
.p-cascadeselect .p-cascadeselect-trigger {
background: transparent;
color: rgba(0, 0, 0, 0.6);
width: 2.357rem;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.p-cascadeselect.p-error, .p-cascadeselect.p-invalid {
border-color: #B00020;
}
.p-cascadeselect-panel {
background: #ffffff;
color: #000001;
border: 0 none;
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.p-cascadeselect-panel .p-cascadeselect-items {
padding: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
margin: 0;
border: 0 none;
color: #000001;
background: transparent;
transition: none;
border-radius: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
padding: 1rem 1rem;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: none;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #673AB7;
background: rgba(103, 58, 183, 0.12);
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
color: #000001;
background: rgba(0, 0, 0, 0.04);
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
.p-input-filled .p-cascadeselect {
background: #f5f5f5;
}
.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
background-color: #ececec;
}
.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
background-color: #dcdcdc;
}
.p-checkbox {
width: 18px;
height: 18px;

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

@ -348,6 +348,92 @@
padding: 0;
}
}
.p-cascadeselect {
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.38);
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
border-radius: 4px;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #000001;
}
.p-cascadeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: none;
border-color: #3F51B5;
}
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
padding: 1rem 1rem;
}
.p-cascadeselect .p-cascadeselect-label.p-placeholder {
color: rgba(0, 0, 0, 0.6);
}
.p-cascadeselect .p-cascadeselect-label:enabled:focus {
outline: 0 none;
box-shadow: none;
}
.p-cascadeselect .p-cascadeselect-trigger {
background: transparent;
color: rgba(0, 0, 0, 0.6);
width: 2.357rem;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.p-cascadeselect.p-error, .p-cascadeselect.p-invalid {
border-color: #B00020;
}
.p-cascadeselect-panel {
background: #ffffff;
color: #000001;
border: 0 none;
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.p-cascadeselect-panel .p-cascadeselect-items {
padding: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
margin: 0;
border: 0 none;
color: #000001;
background: transparent;
transition: none;
border-radius: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
padding: 1rem 1rem;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: none;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #3F51B5;
background: rgba(63, 81, 181, 0.12);
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
color: #000001;
background: rgba(0, 0, 0, 0.04);
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
.p-input-filled .p-cascadeselect {
background: #f5f5f5;
}
.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
background-color: #ececec;
}
.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
background-color: #dcdcdc;
}
.p-checkbox {
width: 18px;
height: 18px;

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

@ -348,6 +348,92 @@
padding: 0;
}
}
.p-cascadeselect {
background: #1e1e1e;
border: 1px solid rgba(255, 255, 255, 0.3);
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
border-radius: 4px;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: rgba(255, 255, 255, 0.6);
}
.p-cascadeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: none;
border-color: #673AB7;
}
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
padding: 0.75rem 0.75rem;
}
.p-cascadeselect .p-cascadeselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-cascadeselect .p-cascadeselect-label:enabled:focus {
outline: 0 none;
box-shadow: none;
}
.p-cascadeselect .p-cascadeselect-trigger {
background: transparent;
color: rgba(255, 255, 255, 0.6);
width: 2.357rem;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.p-cascadeselect.p-error, .p-cascadeselect.p-invalid {
border-color: #f44435;
}
.p-cascadeselect-panel {
background: #2b2b2b;
color: rgba(255, 255, 255, 0.87);
border: 0 none;
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.p-cascadeselect-panel .p-cascadeselect-items {
padding: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
margin: 0;
border: 0 none;
color: rgba(255, 255, 255, 0.87);
background: transparent;
transition: none;
border-radius: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
padding: 0.75rem 0.75rem;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: none;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #673AB7;
background: rgba(103, 58, 183, 0.16);
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 255, 255, 0.04);
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
.p-input-filled .p-cascadeselect {
background: rgba(255, 255, 255, 0.06);
}
.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
background-color: rgba(255, 255, 255, 0.08);
}
.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
background-color: rgba(255, 255, 255, 0.1);
}
.p-checkbox {
width: 18px;
height: 18px;

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

@ -348,6 +348,92 @@
padding: 0;
}
}
.p-cascadeselect {
background: #1e1e1e;
border: 1px solid rgba(255, 255, 255, 0.3);
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
border-radius: 4px;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: rgba(255, 255, 255, 0.6);
}
.p-cascadeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: none;
border-color: #3F51B5;
}
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
padding: 0.75rem 0.75rem;
}
.p-cascadeselect .p-cascadeselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-cascadeselect .p-cascadeselect-label:enabled:focus {
outline: 0 none;
box-shadow: none;
}
.p-cascadeselect .p-cascadeselect-trigger {
background: transparent;
color: rgba(255, 255, 255, 0.6);
width: 2.357rem;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.p-cascadeselect.p-error, .p-cascadeselect.p-invalid {
border-color: #f44435;
}
.p-cascadeselect-panel {
background: #2b2b2b;
color: rgba(255, 255, 255, 0.87);
border: 0 none;
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.p-cascadeselect-panel .p-cascadeselect-items {
padding: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
margin: 0;
border: 0 none;
color: rgba(255, 255, 255, 0.87);
background: transparent;
transition: none;
border-radius: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
padding: 0.75rem 0.75rem;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: none;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #3F51B5;
background: rgba(63, 81, 181, 0.16);
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 255, 255, 0.04);
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
.p-input-filled .p-cascadeselect {
background: rgba(255, 255, 255, 0.06);
}
.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
background-color: rgba(255, 255, 255, 0.08);
}
.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
background-color: rgba(255, 255, 255, 0.1);
}
.p-checkbox {
width: 18px;
height: 18px;

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

@ -348,6 +348,92 @@
padding: 0;
}
}
.p-cascadeselect {
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.38);
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
border-radius: 4px;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #000001;
}
.p-cascadeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: none;
border-color: #673AB7;
}
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
padding: 0.75rem 0.75rem;
}
.p-cascadeselect .p-cascadeselect-label.p-placeholder {
color: rgba(0, 0, 0, 0.6);
}
.p-cascadeselect .p-cascadeselect-label:enabled:focus {
outline: 0 none;
box-shadow: none;
}
.p-cascadeselect .p-cascadeselect-trigger {
background: transparent;
color: rgba(0, 0, 0, 0.6);
width: 2.357rem;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.p-cascadeselect.p-error, .p-cascadeselect.p-invalid {
border-color: #B00020;
}
.p-cascadeselect-panel {
background: #ffffff;
color: #000001;
border: 0 none;
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.p-cascadeselect-panel .p-cascadeselect-items {
padding: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
margin: 0;
border: 0 none;
color: #000001;
background: transparent;
transition: none;
border-radius: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
padding: 0.75rem 0.75rem;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: none;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #673AB7;
background: rgba(103, 58, 183, 0.12);
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
color: #000001;
background: rgba(0, 0, 0, 0.04);
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
.p-input-filled .p-cascadeselect {
background: #f5f5f5;
}
.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
background-color: #ececec;
}
.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
background-color: #dcdcdc;
}
.p-checkbox {
width: 18px;
height: 18px;

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

@ -348,6 +348,92 @@
padding: 0;
}
}
.p-cascadeselect {
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.38);
transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
border-radius: 4px;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #000001;
}
.p-cascadeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: none;
border-color: #3F51B5;
}
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
padding: 0.75rem 0.75rem;
}
.p-cascadeselect .p-cascadeselect-label.p-placeholder {
color: rgba(0, 0, 0, 0.6);
}
.p-cascadeselect .p-cascadeselect-label:enabled:focus {
outline: 0 none;
box-shadow: none;
}
.p-cascadeselect .p-cascadeselect-trigger {
background: transparent;
color: rgba(0, 0, 0, 0.6);
width: 2.357rem;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.p-cascadeselect.p-error, .p-cascadeselect.p-invalid {
border-color: #B00020;
}
.p-cascadeselect-panel {
background: #ffffff;
color: #000001;
border: 0 none;
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.p-cascadeselect-panel .p-cascadeselect-items {
padding: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
margin: 0;
border: 0 none;
color: #000001;
background: transparent;
transition: none;
border-radius: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
padding: 0.75rem 0.75rem;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: none;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #3F51B5;
background: rgba(63, 81, 181, 0.12);
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
color: #000001;
background: rgba(0, 0, 0, 0.04);
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
.p-input-filled .p-cascadeselect {
background: #f5f5f5;
}
.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
background-color: #ececec;
}
.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
background-color: #dcdcdc;
}
.p-checkbox {
width: 18px;
height: 18px;

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

@ -324,6 +324,92 @@
padding: 0.25rem;
}
}
.p-cascadeselect {
background: #ffffff;
border: 1px solid #a6a6a6;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #212121;
}
.p-cascadeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem #8dcdff;
border-color: #007ad9;
}
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
padding: 0.429rem 0.429rem;
}
.p-cascadeselect .p-cascadeselect-label.p-placeholder {
color: #666666;
}
.p-cascadeselect .p-cascadeselect-label:enabled:focus {
outline: 0 none;
box-shadow: none;
}
.p-cascadeselect .p-cascadeselect-trigger {
background: transparent;
color: #848484;
width: 2.357rem;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.p-cascadeselect.p-error, .p-cascadeselect.p-invalid {
border-color: #a80000;
}
.p-cascadeselect-panel {
background: #ffffff;
color: #333333;
border: 1px solid #c8c8c8;
border-radius: 3px;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}
.p-cascadeselect-panel .p-cascadeselect-items {
padding: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
margin: 0;
border: 0 none;
color: #333333;
background: transparent;
transition: background-color 0.2s, box-shadow 0.2s;
border-radius: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
padding: 0.429rem 0.857rem;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.2rem #8dcdff;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #ffffff;
background: #e02365;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
color: #333333;
background: #eaeaea;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
.p-input-filled .p-cascadeselect {
background: #f4f4f4;
}
.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
background-color: #f4f4f4;
}
.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
background-color: #f4f4f4;
}
.p-checkbox {
width: 20px;
height: 20px;

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

@ -324,6 +324,92 @@
padding: 0.25rem;
}
}
.p-cascadeselect {
background: #ffffff;
border: 1px solid #a6a6a6;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #212121;
}
.p-cascadeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem #8dcdff;
border-color: #007ad9;
}
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
padding: 0.429rem 0.429rem;
}
.p-cascadeselect .p-cascadeselect-label.p-placeholder {
color: #666666;
}
.p-cascadeselect .p-cascadeselect-label:enabled:focus {
outline: 0 none;
box-shadow: none;
}
.p-cascadeselect .p-cascadeselect-trigger {
background: transparent;
color: #848484;
width: 2.357rem;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.p-cascadeselect.p-error, .p-cascadeselect.p-invalid {
border-color: #a80000;
}
.p-cascadeselect-panel {
background: #ffffff;
color: #333333;
border: 1px solid #c8c8c8;
border-radius: 3px;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}
.p-cascadeselect-panel .p-cascadeselect-items {
padding: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
margin: 0;
border: 0 none;
color: #333333;
background: transparent;
transition: background-color 0.2s, box-shadow 0.2s;
border-radius: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
padding: 0.429rem 0.857rem;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.2rem #8dcdff;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #ffffff;
background: #007ad9;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
color: #333333;
background: #eaeaea;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
.p-input-filled .p-cascadeselect {
background: #f4f4f4;
}
.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
background-color: #f4f4f4;
}
.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
background-color: #f4f4f4;
}
.p-checkbox {
width: 20px;
height: 20px;

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

@ -324,6 +324,92 @@
padding: 0.25rem;
}
}
.p-cascadeselect {
background: #ffffff;
border: 1px solid #a6a6a6;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #212121;
}
.p-cascadeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem #c2e9d8;
border-color: #41b883;
}
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
padding: 0.429rem 0.429rem;
}
.p-cascadeselect .p-cascadeselect-label.p-placeholder {
color: #666666;
}
.p-cascadeselect .p-cascadeselect-label:enabled:focus {
outline: 0 none;
box-shadow: none;
}
.p-cascadeselect .p-cascadeselect-trigger {
background: transparent;
color: #848484;
width: 2.357rem;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.p-cascadeselect.p-error, .p-cascadeselect.p-invalid {
border-color: #a80000;
}
.p-cascadeselect-panel {
background: #ffffff;
color: #333333;
border: 1px solid #c8c8c8;
border-radius: 3px;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}
.p-cascadeselect-panel .p-cascadeselect-items {
padding: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
margin: 0;
border: 0 none;
color: #333333;
background: transparent;
transition: background-color 0.2s, box-shadow 0.2s;
border-radius: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
padding: 0.429rem 0.857rem;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.2rem #c2e9d8;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #ffffff;
background: #41b883;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
color: #333333;
background: #eaeaea;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
.p-input-filled .p-cascadeselect {
background: #f4f4f4;
}
.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
background-color: #f4f4f4;
}
.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
background-color: #f4f4f4;
}
.p-checkbox {
width: 20px;
height: 20px;

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

@ -324,6 +324,92 @@
padding: 0.25rem;
}
}
.p-cascadeselect {
background: #ffffff;
border: 1px solid #a6a6a6;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #212121;
}
.p-cascadeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem #8dcdff;
border-color: #007ad9;
}
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
padding: 0.429rem 0.429rem;
}
.p-cascadeselect .p-cascadeselect-label.p-placeholder {
color: #666666;
}
.p-cascadeselect .p-cascadeselect-label:enabled:focus {
outline: 0 none;
box-shadow: none;
}
.p-cascadeselect .p-cascadeselect-trigger {
background: transparent;
color: #848484;
width: 2.357rem;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.p-cascadeselect.p-error, .p-cascadeselect.p-invalid {
border-color: #a80000;
}
.p-cascadeselect-panel {
background: #ffffff;
color: #333333;
border: 1px solid #c8c8c8;
border-radius: 3px;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}
.p-cascadeselect-panel .p-cascadeselect-items {
padding: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
margin: 0;
border: 0 none;
color: #333333;
background: transparent;
transition: background-color 0.2s, box-shadow 0.2s;
border-radius: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
padding: 0.429rem 0.857rem;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.2rem #8dcdff;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #ffffff;
background: #007ad9;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
color: #333333;
background: #eaeaea;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
.p-input-filled .p-cascadeselect {
background: #f4f4f4;
}
.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
background-color: #f4f4f4;
}
.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
background-color: #f4f4f4;
}
.p-checkbox {
width: 20px;
height: 20px;

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

@ -324,6 +324,92 @@
padding: 0.25rem;
}
}
.p-cascadeselect {
background: #ffffff;
border: 1px solid #dadada;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 2px;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #a6a6a6;
}
.p-cascadeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem #e4e9ec;
border-color: #7B95A3;
}
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
padding: 0.429rem 0.429rem;
}
.p-cascadeselect .p-cascadeselect-label.p-placeholder {
color: #a6a6a6;
}
.p-cascadeselect .p-cascadeselect-label:enabled:focus {
outline: 0 none;
box-shadow: none;
}
.p-cascadeselect .p-cascadeselect-trigger {
background: transparent;
color: #a6a6a6;
width: 2.357rem;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
.p-cascadeselect.p-error, .p-cascadeselect.p-invalid {
border-color: #e7a3a3;
}
.p-cascadeselect-panel {
background: #ffffff;
color: #666666;
border: 1px solid #eaeaea;
border-radius: 2px;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
}
.p-cascadeselect-panel .p-cascadeselect-items {
padding: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
margin: 0;
border: 0 none;
color: #666666;
background: transparent;
transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
padding: 0.429rem 0.857rem;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.2rem #e4e9ec;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #385048;
background: #AFD3C8;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
color: #666666;
background: #f4f4f4;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
.p-input-filled .p-cascadeselect {
background: #f4f4f4;
}
.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
background-color: #f4f4f4;
}
.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
background-color: #f4f4f4;
}
.p-checkbox {
width: 20px;
height: 20px;

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

@ -324,6 +324,92 @@
padding: 0;
}
}
.p-cascadeselect {
background: #ffffff;
border: 1px solid #ced4da;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #2196F3;
}
.p-cascadeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem #a6d5fa;
border-color: #2196F3;
}
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
padding: 0.5rem 0.5rem;
}
.p-cascadeselect .p-cascadeselect-label.p-placeholder {
color: #6c757d;
}
.p-cascadeselect .p-cascadeselect-label:enabled:focus {
outline: 0 none;
box-shadow: none;
}
.p-cascadeselect .p-cascadeselect-trigger {
background: transparent;
color: #6c757d;
width: 2.357rem;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.p-cascadeselect.p-error, .p-cascadeselect.p-invalid {
border-color: #f44336;
}
.p-cascadeselect-panel {
background: #ffffff;
color: #495057;
border: 0 none;
border-radius: 3px;
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
}
.p-cascadeselect-panel .p-cascadeselect-items {
padding: 0.5rem 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
margin: 0;
border: 0 none;
color: #495057;
background: transparent;
transition: box-shadow 0.2s;
border-radius: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
padding: 0.5rem 1rem;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.15rem #a6d5fa;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #495057;
background: #E3F2FD;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
color: #495057;
background: #e9ecef;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
.p-input-filled .p-cascadeselect {
background: #f8f9fa;
}
.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
background-color: #f8f9fa;
}
.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
background-color: #ffffff;
}
.p-checkbox {
width: 20px;
height: 20px;

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

@ -324,6 +324,92 @@
padding: 0;
}
}
.p-cascadeselect {
background: #ffffff;
border: 1px solid #ced4da;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #4CAF50;
}
.p-cascadeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem #b7e0b8;
border-color: #4CAF50;
}
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
padding: 0.5rem 0.5rem;
}
.p-cascadeselect .p-cascadeselect-label.p-placeholder {
color: #6c757d;
}
.p-cascadeselect .p-cascadeselect-label:enabled:focus {
outline: 0 none;
box-shadow: none;
}
.p-cascadeselect .p-cascadeselect-trigger {
background: transparent;
color: #6c757d;
width: 2.357rem;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.p-cascadeselect.p-error, .p-cascadeselect.p-invalid {
border-color: #f44336;
}
.p-cascadeselect-panel {
background: #ffffff;
color: #495057;
border: 0 none;
border-radius: 3px;
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
}
.p-cascadeselect-panel .p-cascadeselect-items {
padding: 0.5rem 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
margin: 0;
border: 0 none;
color: #495057;
background: transparent;
transition: box-shadow 0.2s;
border-radius: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
padding: 0.5rem 1rem;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.15rem #b7e0b8;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #495057;
background: #E8F5E9;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
color: #495057;
background: #e9ecef;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
.p-input-filled .p-cascadeselect {
background: #f8f9fa;
}
.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
background-color: #f8f9fa;
}
.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
background-color: #ffffff;
}
.p-checkbox {
width: 20px;
height: 20px;

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

@ -324,6 +324,92 @@
padding: 0;
}
}
.p-cascadeselect {
background: #ffffff;
border: 1px solid #ced4da;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #FFC107;
}
.p-cascadeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ffe69c;
border-color: #FFC107;
}
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
padding: 0.5rem 0.5rem;
}
.p-cascadeselect .p-cascadeselect-label.p-placeholder {
color: #6c757d;
}
.p-cascadeselect .p-cascadeselect-label:enabled:focus {
outline: 0 none;
box-shadow: none;
}
.p-cascadeselect .p-cascadeselect-trigger {
background: transparent;
color: #6c757d;
width: 2.357rem;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.p-cascadeselect.p-error, .p-cascadeselect.p-invalid {
border-color: #f44336;
}
.p-cascadeselect-panel {
background: #ffffff;
color: #495057;
border: 0 none;
border-radius: 3px;
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
}
.p-cascadeselect-panel .p-cascadeselect-items {
padding: 0.5rem 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
margin: 0;
border: 0 none;
color: #495057;
background: transparent;
transition: box-shadow 0.2s;
border-radius: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
padding: 0.5rem 1rem;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.15rem #ffe69c;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #495057;
background: #FFF3E0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
color: #495057;
background: #e9ecef;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
.p-input-filled .p-cascadeselect {
background: #f8f9fa;
}
.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
background-color: #f8f9fa;
}
.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
background-color: #ffffff;
}
.p-checkbox {
width: 20px;
height: 20px;

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

@ -324,6 +324,92 @@
padding: 0;
}
}
.p-cascadeselect {
background: #ffffff;
border: 1px solid #ced4da;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #9C27B0;
}
.p-cascadeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 0.2rem #df9eea;
border-color: #9C27B0;
}
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
padding: 0.5rem 0.5rem;
}
.p-cascadeselect .p-cascadeselect-label.p-placeholder {
color: #6c757d;
}
.p-cascadeselect .p-cascadeselect-label:enabled:focus {
outline: 0 none;
box-shadow: none;
}
.p-cascadeselect .p-cascadeselect-trigger {
background: transparent;
color: #6c757d;
width: 2.357rem;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.p-cascadeselect.p-error, .p-cascadeselect.p-invalid {
border-color: #f44336;
}
.p-cascadeselect-panel {
background: #ffffff;
color: #495057;
border: 0 none;
border-radius: 3px;
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
}
.p-cascadeselect-panel .p-cascadeselect-items {
padding: 0.5rem 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
margin: 0;
border: 0 none;
color: #495057;
background: transparent;
transition: box-shadow 0.2s;
border-radius: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
padding: 0.5rem 1rem;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 0.15rem #df9eea;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: #495057;
background: #F3E5F5;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
color: #495057;
background: #e9ecef;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
.p-input-filled .p-cascadeselect {
background: #f8f9fa;
}
.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
background-color: #f8f9fa;
}
.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
background-color: #ffffff;
}
.p-checkbox {
width: 20px;
height: 20px;

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

@ -324,6 +324,92 @@
padding: 0;
}
}
.p-cascadeselect {
background: #17212f;
border: 1px solid #304562;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #64B5F6;
}
.p-cascadeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 1px #93cbf9;
border-color: #64B5F6;
}
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
padding: 0.5rem 0.5rem;
}
.p-cascadeselect .p-cascadeselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-cascadeselect .p-cascadeselect-label:enabled:focus {
outline: 0 none;
box-shadow: none;
}
.p-cascadeselect .p-cascadeselect-trigger {
background: transparent;
color: rgba(255, 255, 255, 0.6);
width: 2.357rem;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.p-cascadeselect.p-error, .p-cascadeselect.p-invalid {
border-color: #ef9a9a;
}
.p-cascadeselect-panel {
background: #1f2d40;
color: rgba(255, 255, 255, 0.87);
border: 1px solid #304562;
border-radius: 3px;
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
}
.p-cascadeselect-panel .p-cascadeselect-items {
padding: 0.5rem 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
margin: 0;
border: 0 none;
color: rgba(255, 255, 255, 0.87);
background: transparent;
transition: box-shadow 0.2s;
border-radius: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
padding: 0.5rem 1rem;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 1px #93cbf9;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: rgba(255, 255, 255, 0.87);
background: rgba(100, 181, 246, 0.16);
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 255, 255, 0.03);
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
.p-input-filled .p-cascadeselect {
background: #304562;
}
.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
background-color: #304562;
}
.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
background-color: #304562;
}
.p-checkbox {
width: 20px;
height: 20px;

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

@ -324,6 +324,92 @@
padding: 0;
}
}
.p-cascadeselect {
background: #17212f;
border: 1px solid #304562;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #81C784;
}
.p-cascadeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 1px #a7d8a9;
border-color: #81C784;
}
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
padding: 0.5rem 0.5rem;
}
.p-cascadeselect .p-cascadeselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-cascadeselect .p-cascadeselect-label:enabled:focus {
outline: 0 none;
box-shadow: none;
}
.p-cascadeselect .p-cascadeselect-trigger {
background: transparent;
color: rgba(255, 255, 255, 0.6);
width: 2.357rem;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.p-cascadeselect.p-error, .p-cascadeselect.p-invalid {
border-color: #ef9a9a;
}
.p-cascadeselect-panel {
background: #1f2d40;
color: rgba(255, 255, 255, 0.87);
border: 1px solid #304562;
border-radius: 3px;
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
}
.p-cascadeselect-panel .p-cascadeselect-items {
padding: 0.5rem 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
margin: 0;
border: 0 none;
color: rgba(255, 255, 255, 0.87);
background: transparent;
transition: box-shadow 0.2s;
border-radius: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
padding: 0.5rem 1rem;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 1px #a7d8a9;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: rgba(255, 255, 255, 0.87);
background: rgba(129, 199, 132, 0.16);
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 255, 255, 0.03);
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
.p-input-filled .p-cascadeselect {
background: #304562;
}
.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
background-color: #304562;
}
.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
background-color: #304562;
}
.p-checkbox {
width: 20px;
height: 20px;

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

@ -324,6 +324,92 @@
padding: 0;
}
}
.p-cascadeselect {
background: #17212f;
border: 1px solid #304562;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #FFD54F;
}
.p-cascadeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 1px #ffe284;
border-color: #FFD54F;
}
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
padding: 0.5rem 0.5rem;
}
.p-cascadeselect .p-cascadeselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-cascadeselect .p-cascadeselect-label:enabled:focus {
outline: 0 none;
box-shadow: none;
}
.p-cascadeselect .p-cascadeselect-trigger {
background: transparent;
color: rgba(255, 255, 255, 0.6);
width: 2.357rem;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.p-cascadeselect.p-error, .p-cascadeselect.p-invalid {
border-color: #ef9a9a;
}
.p-cascadeselect-panel {
background: #1f2d40;
color: rgba(255, 255, 255, 0.87);
border: 1px solid #304562;
border-radius: 3px;
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
}
.p-cascadeselect-panel .p-cascadeselect-items {
padding: 0.5rem 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
margin: 0;
border: 0 none;
color: rgba(255, 255, 255, 0.87);
background: transparent;
transition: box-shadow 0.2s;
border-radius: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
padding: 0.5rem 1rem;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 1px #ffe284;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 213, 79, 0.16);
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 255, 255, 0.03);
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
.p-input-filled .p-cascadeselect {
background: #304562;
}
.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
background-color: #304562;
}
.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
background-color: #304562;
}
.p-checkbox {
width: 20px;
height: 20px;

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

@ -324,6 +324,92 @@
padding: 0;
}
}
.p-cascadeselect {
background: #17212f;
border: 1px solid #304562;
transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
border-radius: 3px;
}
.p-cascadeselect:not(.p-disabled):hover {
border-color: #BA68C8;
}
.p-cascadeselect:not(.p-disabled).p-focus {
outline: 0 none;
outline-offset: 0;
box-shadow: 0 0 0 1px #cf95d9;
border-color: #BA68C8;
}
.p-cascadeselect .p-cascadeselect-label {
background: transparent;
border: 0 none;
padding: 0.5rem 0.5rem;
}
.p-cascadeselect .p-cascadeselect-label.p-placeholder {
color: rgba(255, 255, 255, 0.6);
}
.p-cascadeselect .p-cascadeselect-label:enabled:focus {
outline: 0 none;
box-shadow: none;
}
.p-cascadeselect .p-cascadeselect-trigger {
background: transparent;
color: rgba(255, 255, 255, 0.6);
width: 2.357rem;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.p-cascadeselect.p-error, .p-cascadeselect.p-invalid {
border-color: #ef9a9a;
}
.p-cascadeselect-panel {
background: #1f2d40;
color: rgba(255, 255, 255, 0.87);
border: 1px solid #304562;
border-radius: 3px;
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
}
.p-cascadeselect-panel .p-cascadeselect-items {
padding: 0.5rem 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
margin: 0;
border: 0 none;
color: rgba(255, 255, 255, 0.87);
background: transparent;
transition: box-shadow 0.2s;
border-radius: 0;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
padding: 0.5rem 1rem;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
outline: 0 none;
outline-offset: 0;
box-shadow: inset 0 0 0 1px #cf95d9;
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
color: rgba(255, 255, 255, 0.87);
background: rgba(186, 104, 200, 0.16);
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
color: rgba(255, 255, 255, 0.87);
background: rgba(255, 255, 255, 0.03);
}
.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
font-size: 0.875rem;
}
.p-input-filled .p-cascadeselect {
background: #304562;
}
.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
background-color: #304562;
}
.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus {
background-color: #304562;
}
.p-checkbox {
width: 20px;
height: 20px;

1
src/AppMenu.vue
View File

@ -44,6 +44,7 @@
<div class="menu-items">
<router-link to="/autocomplete">AutoComplete</router-link>
<router-link to="/calendar">Calendar</router-link>
<router-link to="/cascadeselect">CascadeSelect <Tag value="New"></Tag></router-link>
<router-link to="/checkbox">Checkbox</router-link>
<router-link to="/chips">Chips</router-link>
<router-link to="/colorpicker">ColorPicker</router-link>

29
src/components/cascadeselect/CascadeSelect.d.ts vendored Normal file
View File

@ -0,0 +1,29 @@
import Vue, { VNode } from 'vue';
declare class CascadeSelect extends Vue {
modelValue?: any;
options?: any[];
optionLabel?: string;
optionValue?: any;
optionGroupLabel?: string;
optionGroupChildren?: string;
placeholder?: string;
disabled?: boolean;
dataKey?: string;
tabindex?: string;
inputId?: string;
ariaLabelledBy?: string;
appendTo?: string;
$emit(eventName: 'update:modelValue', value: string): this;
$emit(eventName: 'change', e: { originalEvent: Event, value: any }): this;
$emit(eventName: 'change-group', e: { originalEvent: Event, value: any }): this;
$emit(eventName: 'before-show'): this;
$emit(eventName: 'before-leave'): this;
$emit(eventName: 'show'): this;
$emit(eventName: 'hide'): this;
$slot: {
option: VNode[];
}
}
export default CascadeSelect;

401
src/components/cascadeselect/CascadeSelect.vue Normal file
View File

@ -0,0 +1,401 @@
<template>
<div ref="container" :class="containerClass" @click="onClick($event)">
<div class="p-hidden-accessible">
<input ref="focusInput" type="text" :id="inputId" readonly :disabled="disabled" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :tabindex="tabindex"
aria-haspopup="listbox" :aria-expanded="overlayVisible" :aria-labelledby="ariaLabelledBy" />
</div>
<span :class="labelClass">
<slot name="value" :value="modelValue" :placeholder="placeholder">
{{label}}
</slot>
</span>
<div class="p-cascadeselect-trigger" role="button" aria-haspopup="listbox" :aria-expanded="overlayVisible">
<span class="p-cascadeselect-trigger-icon pi pi-chevron-down"></span>
</div>
<transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
<div :ref="overlayRef" class="p-cascadeselect-panel p-component" v-if="overlayVisible">
<div class="p-cascadeselect-items-wrapper">
<CascadeSelectSub :options="options" :selectionPath="selectionPath" class="p-cascadeselect-items"
:optionLabel="optionLabel" :optionValue="optionValue" :level="0" :templates="$slots"
:optionGroupLabel="optionGroupLabel" :optionGroupChildren="optionGroupChildren"
@option-select="onOptionSelect" @optiongroup-select="onOptionGroupSelect" :dirty="dirty" />
</div>
</div>
</transition>
</div>
</template>
<script>
import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
import ObjectUtils from '../utils/ObjectUtils';
import DomHandler from '../utils/DomHandler';
import CascadeSelectSub from './CascadeSelectSub';
export default {
emits: ['update:modelValue','change','group-change', 'before-show','before-hide','hide','show'],
data() {
return {
selectionPath: null,
focused: false,
overlayVisible: false,
dirty: false
};
},
props: {
modelValue: null,
options: Array,
optionLabel: String,
optionValue: String,
optionGroupLabel: String,
optionGroupChildren: Array,
placeholder: String,
disabled: Boolean,
dataKey: null,
inputId: String,
tabindex: String,
ariaLabelledBy: null,
appendTo: {
type: String,
default: null
}
},
outsideClickListener: null,
scrollHandler: null,
resizeListener: null,
overlay: null,
beforeUnmount() {
this.restoreAppend();
this.unbindOutsideClickListener();
this.unbindResizeListener();
if (this.scrollHandler) {
this.scrollHandler.destroy();
this.scrollHandler = null;
}
this.overlay = null;
},
mounted() {
this.updateSelectionPath();
},
watch: {
modelValue() {
this.updateSelectionPath();
}
},
methods: {
onOptionSelect(event) {
this.$emit('update:modelValue', event.value);
this.$emit('change', event);
this.hide();
this.$refs.focusInput.focus();
},
onOptionGroupSelect(event) {
this.dirty = true;
this.$emit('group-change', event);
},
getOptionLabel(option) {
return this.optionLabel ? ObjectUtils.resolveFieldData(option, this.optionLabel) : option;
},
getOptionValue(option) {
return this.optionValue ? ObjectUtils.resolveFieldData(option, this.optionValue) : option;
},
getOptionGroupChildren(optionGroup, level) {
return ObjectUtils.resolveFieldData(optionGroup, this.optionGroupChildren[level]);
},
isOptionGroup(option, level) {
return Object.prototype.hasOwnProperty.call(option, this.optionGroupChildren[level]);
},
updateSelectionPath() {
let path;
if (this.modelValue != null && this.options) {
for (let option of this.options) {
path = this.findModelOptionInGroup(option, 0);
if (path) {
break;
}
}
}
this.selectionPath = path;
},
findModelOptionInGroup(option, level) {
if (this.isOptionGroup(option, level)) {
let selectedOption;
for (let childOption of this.getOptionGroupChildren(option, level)) {
selectedOption = this.findModelOptionInGroup(childOption, level + 1);
if (selectedOption) {
selectedOption.unshift(option);
return selectedOption;
}
}
}
else if ((ObjectUtils.equals(this.modelValue, this.getOptionValue(option), this.dataKey))) {
return [option];
}
return null;
},
show() {
this.$emit('before-show');
this.overlayVisible = true;
},
hide() {
this.$emit('before-hide');
this.overlayVisible = false;
},
onFocus() {
this.focused = true;
},
onBlur() {
this.focused = false;
},
onClick(event) {
if (this.disabled) {
return;
}
if (!this.overlay || !this.overlay.contains(event.target)) {
if (this.overlayVisible)
this.hide();
else
this.show();
this.$refs.focusInput.focus();
}
},
onOverlayEnter() {
this.overlay.style.zIndex = String(DomHandler.generateZIndex());
this.appendContainer();
this.alignOverlay();
this.bindOutsideClickListener();
this.bindScrollListener();
this.bindResizeListener();
this.$emit('show');
},
onOverlayLeave() {
this.unbindOutsideClickListener();
this.unbindScrollListener();
this.unbindResizeListener();
this.$emit('hide');
this.overlay = null;
this.dirty = false;
},
alignOverlay() {
if (this.appendTo) {
DomHandler.absolutePosition(this.overlay, this.$el);
this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px';
} else {
DomHandler.relativePosition(this.overlay, this.$el);
}
},
bindOutsideClickListener() {
if (!this.outsideClickListener) {
this.outsideClickListener = (event) => {
if (this.overlayVisible && this.overlay && !this.$el.contains(event.target) && !this.overlay.contains(event.target)) {
this.hide();
}
};
document.addEventListener('click', this.outsideClickListener);
}
},
unbindOutsideClickListener() {
if (this.outsideClickListener) {
document.removeEventListener('click', this.outsideClickListener);
this.outsideClickListener = null;
}
},
bindScrollListener() {
if (!this.scrollHandler) {
this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.container, () => {
if (this.overlayVisible) {
this.hide();
}
});
}
this.scrollHandler.bindScrollListener();
},
unbindScrollListener() {
if (this.scrollHandler) {
this.scrollHandler.unbindScrollListener();
}
},
bindResizeListener() {
if (!this.resizeListener) {
this.resizeListener = () => {
if (this.overlayVisible) {
this.hide();
}
};
window.addEventListener('resize', this.resizeListener);
}
},
unbindResizeListener() {
if (this.resizeListener) {
window.removeEventListener('resize', this.resizeListener);
this.resizeListener = null;
}
},
overlayRef(el) {
this.overlay = el;
},
appendContainer() {
if (this.appendTo) {
if (this.appendTo === 'body')
document.body.appendChild(this.overlay);
else
document.getElementById(this.appendTo).appendChild(this.overlay);
}
},
restoreAppend() {
if (this.overlay && this.appendTo) {
if (this.appendTo === 'body')
document.body.removeChild(this.overlay);
else
document.getElementById(this.appendTo).removeChild(this.overlay);
}
},
onKeyDown(event) {
switch(event.key) {
case 'Down':
case 'ArrowDown':
if (this.overlayVisible) {
DomHandler.findSingle(this.overlay, '.p-cascadeselect-item').children[0].focus();
}
else if (event.altKey && this.options && this.options.length) {
this.show();
}
event.preventDefault();
break;
case 'Escape':
if (this.overlayVisible) {
this.hide();
event.preventDefault();
}
break;
case 'Tab':
this.hide();
break;
}
}
},
computed: {
containerClass() {
return [
'p-cascadeselect p-component p-inputwrapper',
{
'p-disabled': this.disabled,
'p-focus': this.focused,
'p-inputwrapper-filled': this.modelValue,
'p-inputwrapper-focus': this.focused
}
];
},
labelClass() {
return [
'p-cascadeselect-label',
{
'p-placeholder': this.label === this.placeholder,
'p-cascadeselect-label-empty': !this.$slots['value'] && (this.label === 'p-emptylabel' || this.label.length === 0)
}
];
},
label() {
if (this.selectionPath)
return this.getOptionLabel(this.selectionPath[this.selectionPath.length - 1]);
else
return this.placeholder||'p-emptylabel';
}
},
components: {
'CascadeSelectSub': CascadeSelectSub
}
}
</script>
<style>
.p-cascadeselect {
display: inline-flex;
cursor: pointer;
position: relative;
user-select: none;
}
.p-cascadeselect-trigger {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.p-cascadeselect-label {
display: block;
white-space: nowrap;
overflow: hidden;
flex: 1 1 auto;
width: 1%;
text-overflow: ellipsis;
cursor: pointer;
}
.p-cascadeselect-label-empty {
overflow: hidden;
visibility: hidden;
}
.p-cascadeselect .p-cascadeselect-panel {
min-width: 100%;
}
.p-cascadeselect-panel {
position: absolute;
}
.p-cascadeselect-item {
cursor: pointer;
font-weight: normal;
white-space: nowrap;
}
.p-cascadeselect-item-content {
display: flex;
align-items: center;
}
.p-cascadeselect-group-icon {
margin-left: auto;
}
.p-cascadeselect-items {
margin: 0;
padding: 0;
list-style-type: none;
}
.p-fluid .p-cascadeselect {
display: flex;
}
.p-fluid .p-cascadeselect .p-cascadeselect-label {
width: 1%;
}
.p-cascadeselect-sublist {
position: absolute;
min-width: 100%;
z-index: 1;
display: none;
}
.p-cascadeselect-item-active {
overflow: visible !important;
}
.p-cascadeselect-item-active > .p-cascadeselect-sublist {
display: block;
left: 100%;
top: 0;
}
</style>

165
src/components/cascadeselect/CascadeSelectSub.vue Normal file
View File

@ -0,0 +1,165 @@
<template>
<ul class="p-cascadeselect-panel p-cascadeselect-items" role="listbox" aria-orientation="horizontal">
<template v-for="(option,i) of options" :key="getOptionLabelToRender(option)">
<li :class="getItemClass(option)" role="none">
<div class="p-cascadeselect-item-content" @click="onOptionClick($event, option)" tabindex="0" @keydown="onKeyDown($event, option, i)">
<component :is="templates['option']" :option="option" v-if="templates['option']"/>
<template v-else>
<span class="p-cascadeselect-item-text">{{getOptionLabelToRender(option)}}</span>
</template>
<span class="p-cascadeselect-group-icon pi pi-angle-right" v-if="isOptionGroup(option)"></span>
</div>
<cascade-select-sub v-if="isOptionGroup(option) && isOptionActive(option)" class="p-cascadeselect-sublist" :selectionPath="selectionPath" :options="getOptionGroupChildren(option)"
:optionLabel="optionLabel" :optionValue="optionValue" :level="level + 1" @option-select="onOptionSelect" @optiongroup-select="onOptionGroupSelect"
:optionGroupLabel="optionGroupLabel" :optionGroupChildren="optionGroupChildren" :parentActive="isOptionActive(option)" :dirty="dirty" :templates="templates"/>
</li>
</template>
</ul>
</template>
<script>
import ObjectUtils from '../utils/ObjectUtils';
import Ripple from '../ripple/Ripple';
export default {
emits: ['option-select','optiongroup-select'],
name: 'cascade-select-sub',
props: {
selectionPath: Array,
level: Number,
options: Array,
optionLabel: String,
optionValue: String,
optionGroupLabel: String,
optionGroupChildren: Array,
parentActive: Boolean,
dirty: Boolean,
templates: null
},
data() {
return {
activeOption: null
}
},
mounted() {
if (this.selectionPath && this.options && !this.dirty) {
for (let option of this.options) {
if (this.selectionPath.includes(option)) {
this.activeOption = option;
break;
}
}
}
},
watch: {
parentActive(newValue) {
if (!newValue) {
this.activeOption = null;
}
}
},
methods: {
onOptionClick(event, option) {
if (this.isOptionGroup(option)) {
this.activeOption = (this.activeOption === option) ? null : option;
this.$emit('optiongroup-select', {
originalEvent: event,
value: option
});
}
else {
this.$emit('option-select', {
originalEvent: event,
value: this.getOptionValue(option)
});
}
},
onOptionSelect(event) {
this.$emit('option-select', event);
},
onOptionGroupSelect(event) {
this.$emit('optiongroup-select', event);
},
getOptionLabel(option) {
return this.optionLabel ? ObjectUtils.resolveFieldData(option, this.optionLabel) : option;
},
getOptionValue(option) {
return this.optionValue ? ObjectUtils.resolveFieldData(option, this.optionValue) : option;
},
getOptionGroupLabel(optionGroup) {
return this.optionGroupLabel ? ObjectUtils.resolveFieldData(optionGroup, this.optionGroupLabel) : null;
},
getOptionGroupChildren(optionGroup) {
return ObjectUtils.resolveFieldData(optionGroup, this.optionGroupChildren[this.level]);
},
isOptionGroup(option) {
return Object.prototype.hasOwnProperty.call(option, this.optionGroupChildren[this.level]);
},
getOptionLabelToRender(option) {
return this.isOptionGroup(option) ? this.getOptionGroupLabel(option) : this.getOptionLabel(option);
},
getItemClass(option) {
return [
'p-cascadeselect-item', {
'p-cascadeselect-item-group': this.isOptionGroup(option),
'p-cascadeselect-item-active p-highlight': this.isOptionActive(option)
}
]
},
isOptionActive(option) {
return this.activeOption === option;
},
onKeyDown(event, option, index) {
switch (event.key) {
case 'Down':
case 'ArrowDown':
var nextItem = this.$el.children[index + 1];
if (nextItem) {
nextItem.children[0].focus();
}
break;
case 'Up':
case 'ArrowUp':
var prevItem = this.$el.children[index - 1];
if (prevItem) {
prevItem.children[0].focus();
}
break;
case 'Right':
case 'ArrowRight':
if (this.isOptionGroup(option)) {
if (this.isOptionActive(option)) {
event.currentTarget.nextElementSibling.children[0].children[0].focus();
}
else {
this.activeOption = option;
}
}
break;
case 'Left':
case 'ArrowLeft':
this.activeOption = null;
var parentList = event.currentTarget.parentElement.parentElement.previousElementSibling;
if (parentList) {
parentList.focus();
}
break;
case 'Enter':
this.onOptionClick(event, option);
break;
}
event.preventDefault();
}
},
directives: {
'ripple': Ripple
}
}
</script>

2
src/main.js
View File

@ -14,6 +14,7 @@ import Button from './components/button/Button';
import Calendar from './components/calendar/Calendar';
import Card from './components/card/Card';
import Carousel from './components/carousel/Carousel';
import CascadeSelect from './components/cascadeselect/CascadeSelect';
import Chart from './components/chart/Chart';
import Checkbox from './components/checkbox/Checkbox';
import Chip from './components/chip/Chip';
@ -132,6 +133,7 @@ app.component('Button', Button);
app.component('Calendar', Calendar);
app.component('Card', Card);
app.component('Carousel', Carousel);
app.component('CascadeSelect', CascadeSelect);
app.component('Chart', Chart);
app.component('Checkbox', Checkbox);
app.component('Chip', Chip);

5
src/router/index.js
View File

@ -87,6 +87,11 @@ const routes = [
name: 'carousel',
component: () => import('../views/carousel/CarouselDemo.vue')
},
{
path: '/cascadeselect',
name: 'cascadeselect',
component: () => import('../views/cascadeselect/CascadeSelectDemo.vue')
},
{
path: '/chart',
name: 'chart',

126
src/views/cascadeselect/CascadeSelectDemo.vue Normal file
View File

@ -0,0 +1,126 @@
<template>
<div>
<div class="content-section introduction">
<div class="feature-intro">
<h1>CascadeSelect</h1>
<p>CascadeSelect displays a nested structure of options.</p>
</div>
<AppInputStyleSwitch />
</div>
<div class="content-section implementation">
<div class="card">
<h5>Basic</h5>
<CascadeSelect v-model="selectedCity1" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="minWidth: 14rem" placeholder="Select a City" />
<h5>Templating</h5>
<CascadeSelect v-model="selectedCity2" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="minWidth: 14rem" placeholder="Select a City">
<template #option="slotProps">
<div class="country-item">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" v-if="slotProps.option.states" />
<i class="pi pi-compass p-mr-2" v-if="slotProps.option.cities"></i>
<i class="pi pi-map-marker p-mr-2" v-if="slotProps.option.cname"></i>
<span>{{slotProps.option.cname || slotProps.option.name}}</span>
</div>
</template>
</CascadeSelect>
</div>
</div>
<CascadeSelectDoc />
</div>
</template>
<script>
import CascadeSelectDoc from './CascadeSelectDoc';
export default {
data() {
return {
selectedCity1: null,
selectedCity2: null,
countries: [
{
name: 'Australia',
code: 'AU',
states: [
{
name: 'New South Wales',
cities: [
{cname: 'Sydney', code: 'A-SY'},
{cname: 'Newcastle', code: 'A-NE'},
{cname: 'Wollongong', code: 'A-WO'}
]
},
{
name: 'Queensland',
cities: [
{cname: 'Brisbane', code: 'A-BR'},
{cname: 'Townsville', code: 'A-TO'}
]
},
]
},
{
name: 'Canada',
code: 'CA',
states: [
{
name: 'Quebec',
cities: [
{cname: 'Montreal', code: 'C-MO'},
{cname: 'Quebec City', code: 'C-QU'}
]
},
{
name: 'Ontario',
cities: [
{cname: 'Ottawa', code: 'C-OT'},
{cname: 'Toronto', code: 'C-TO'}
]
},
]
},
{
name: 'United States',
code: 'US',
states: [
{
name: 'California',
cities: [
{cname: 'Los Angeles', code: 'US-LA'},
{cname: 'San Diego', code: 'US-SD'},
{cname: 'San Francisco', code: 'US-SF'}
]
},
{
name: 'Florida',
cities: [
{cname: 'Jacksonville', code: 'US-JA'},
{cname: 'Miami', code: 'US-MI'},
{cname: 'Tampa', code: 'US-TA'},
{cname: 'Orlando', code: 'US-OR'}
]
},
{
name: 'Texas',
cities: [
{cname: 'Austin', code: 'US-AU'},
{cname: 'Dallas', code: 'US-DA'},
{cname: 'Houston', code: 'US-HO'}
]
}
]
}
]
}
},
components: {
'CascadeSelectDoc': CascadeSelectDoc
}
}
</script>

435
src/views/cascadeselect/CascadeSelectDoc.vue Normal file
View File

@ -0,0 +1,435 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5>
<pre v-code.script>
<code>
import CascadeSelect from 'primevue/cascadeselect';
</code></pre>
<h5>Getting Started</h5>
<p>CascadeSelect requires a value to bind and a collection of arbitrary objects with a nested hierarchy. <i>optionGroupLabel</i>
is used for the text of a category and <i>optionGroupChildren</i> is to define the children of the category.</p>
<pre v-code>
<code>
&lt;CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="minWidth: 14rem" &gt;
</code></pre>
<pre v-code.script>
<code>
data() {
data() &#123;
return &#123;
selectedCity: null,
countries: [
&#123;
name: 'Australia',
code: 'AU',
states: [
&#123;
name: 'New South Wales',
cities: [
&#123;cname: 'Sydney', code: 'A-SY'&#125;,
&#123;cname: 'Newcastle', code: 'A-NE'&#125;,
&#123;cname: 'Wollongong', code: 'A-WO'&#125;
]
&#125;,
&#123;
name: 'Queensland',
cities: [
&#123;cname: 'Brisbane', code: 'A-BR'&#125;,
&#123;cname: 'Townsville', code: 'A-TO'&#125;
]
&#125;,
]
&#125;,
&#123;
name: 'Canada',
code: 'CA',
states: [
&#123;
name: 'Quebec',
cities: [
&#123;cname: 'Montreal', code: 'C-MO'&#125;,
&#123;cname: 'Quebec City', code: 'C-QU'&#125;
]
&#125;,
&#123;
name: 'Ontario',
cities: [
&#123;cname: 'Ottawa', code: 'C-OT'&#125;,
&#123;cname: 'Toronto', code: 'C-TO'&#125;
]
&#125;,
]
&#125;,
&#123;
name: 'United States',
code: 'US',
states: [
&#123;
name: 'California',
cities: [
&#123;cname: 'Los Angeles', code: 'US-LA'&#125;,
&#123;cname: 'San Diego', code: 'US-SD'&#125;,
&#123;cname: 'San Francisco', code: 'US-SF'&#125;
]
&#125;,
&#123;
name: 'Florida',
cities: [
&#123;cname: 'Jacksonville', code: 'US-JA'&#125;,
&#123;cname: 'Miami', code: 'US-MI'&#125;,
&#123;cname: 'Tampa', code: 'US-TA'&#125;,
&#123;cname: 'Orlando', code: 'US-OR'&#125;
]
&#125;,
&#123;
name: 'Texas',
cities: [
&#123;cname: 'Austin', code: 'US-AU'&#125;,
&#123;cname: 'Dallas', code: 'US-DA'&#125;,
&#123;cname: 'Houston', code: 'US-HO'&#125;
]
&#125;
]
&#125;
]
&#125;
&#125;
}
</code></pre>
<h5>Templating</h5>
<p>Content of an item can be customized with the <i>option</i> template.</p>
<pre v-code>
<code><template v-pre>
&lt;CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="minWidth: 14rem"&gt;
&lt;template #option="slotProps"&gt;
&lt;div class="country-item"&gt;
&lt;img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" v-if="slotProps.option.states" /&gt;
&lt;i class="pi pi-compass p-mr-2" v-if="slotProps.option.cities"&gt;&lt;/i&gt;
&lt;i class="pi pi-map-marker p-mr-2" v-if="slotProps.option.cname"&gt;&lt;/i&gt;
&lt;span&gt;{{slotProps.option.cname || slotProps.option.name}}&lt;/span&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/CascadeSelect&gt;
</template>
</code></pre>
<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>modelValue</td>
<td>any</td>
<td>null</td>
<td>Value of the component.</td>
</tr>
<tr>
<td>options</td>
<td>array</td>
<td>null</td>
<td>An array of selectitems to display as the available options.</td>
</tr>
<tr>
<td>optionLabel</td>
<td>string</td>
<td>null</td>
<td>Property name or getter function to use as the label of an option.</td>
</tr>
<tr>
<td>optionValue</td>
<td>string</td>
<td>null</td>
<td>Property name or getter function to use as the value of an option, defaults to the option itself when not defined.</td>
</tr>
<tr>
<td>optionGroupLabel</td>
<td>string</td>
<td>null</td>
<td>Property name or getter function to use as the label of an option group.</td>
</tr>
<tr>
<td>optionGroupChildren</td>
<td>string</td>
<td>null</td>
<td>Property name or getter function to retrieve the items of a group.</td>
</tr>
<tr>
<td>placeholder</td>
<td>string</td>
<td>null</td>
<td>Default text to display when no option is selected.</td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>false</td>
<td>When present, it specifies that the component should be disabled.</td>
</tr>
<tr>
<td>dataKey</td>
<td>string</td>
<td>null</td>
<td>A property to uniquely identify an option.</td>
</tr>
<tr>
<td>tabindex</td>
<td>number</td>
<td>null</td>
<td>Index of the element in tabbing order.</td>
</tr>
<tr>
<td>inputId</td>
<td>string</td>
<td>null</td>
<td>Identifier of the underlying input element.</td>
</tr>
<tr>
<td>ariaLabelledBy</td>
<td>string</td>
<td>null</td>
<td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
</tr>
<tr>
<td>appendTo</td>
<td>string</td>
<td>null</td>
<td>Id of the element or "body" for document where the overlay should be appended to.</td>
</tr>
</tbody>
</table>
</div>
<h5>Events</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>change</td>
<td>event.originalEvent: Original event <br />
event.value: Selected option value </td>
<td>Callback to invoke on value change.</td>
</tr>
<tr>
<td>group-change</td>
<td>event.originalEvent: Original event <br />
event.value: Selected option group </td>
<td>Callback to invoke when a group changes.</td>
</tr>
<tr>
<td>before-show</td>
<td>-</td>
<td>Callback to invoke before the overlay is shown.</td>
</tr>
<tr>
<td>before-hide</td>
<td>-</td>
<td>Callback to invoke before the overlay is hidden.</td>
</tr>
<tr>
<td>show</td>
<td>-</td>
<td>Callback to invoke when the overlay is shown.</td>
</tr>
<tr>
<td>hide</td>
<td>-</td>
<td>Callback to invoke when the overlay is hidden.</td>
</tr>
</tbody>
</table>
</div>
<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-cascadeselect</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-cascadeselect-label</td>
<td>Element to display label of selected option.</td>
</tr>
<tr>
<td>p-cascadeselect-trigger</td>
<td>Icon element.</td>
</tr>
<tr>
<td>p-cascadeselect-panel</td>
<td>Icon element.</td>
</tr>
<tr>
<td>p-cascadeselect-items-wrapper</td>
<td>Wrapper element of items list.</td>
</tr>
<tr>
<td>p-cascadeselect-items</td>
<td>List element of items.</td>
</tr>
<tr>
<td>p-cascadeselect-item</td>
<td>An item in the list.</td>
</tr>
</tbody>
</table>
</div>
<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/cascadeselect" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<pre v-code>
<code><template v-pre>
&lt;h5&gt;Basic&lt;/h5&gt;
&lt;CascadeSelect v-model="selectedCity1" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="minWidth: 14rem" placeholder="Select a City" /&gt;
&lt;h5&gt;Templating&lt;/h5&gt;
&lt;CascadeSelect v-model="selectedCity2" :options="countries" optionLabel="cname" optionGroupLabel="name"
:optionGroupChildren="['states', 'cities']" style="minWidth: 14rem" placeholder="Select a City"&gt;
&lt;template #option="slotProps"&gt;
&lt;div class="country-item"&gt;
&lt;img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" v-if="slotProps.option.states" /&gt;
&lt;i class="pi pi-compass p-mr-2" v-if="slotProps.option.cities"&gt;&lt;/i&gt;
&lt;i class="pi pi-map-marker p-mr-2" v-if="slotProps.option.cname"&gt;&lt;/i&gt;
&lt;span&gt;{{slotProps.option.cname || slotProps.option.name}}&lt;/span&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/CascadeSelect&gt;
</template>
</code></pre>
<pre v-code.script>
<code>
export default &#123;
data() &#123;
return &#123;
selectedCity1: null,
selectedCity2: null,
countries: [
&#123;
name: 'Australia',
code: 'AU',
states: [
&#123;
name: 'New South Wales',
cities: [
&#123;cname: 'Sydney', code: 'A-SY'&#125;,
&#123;cname: 'Newcastle', code: 'A-NE'&#125;,
&#123;cname: 'Wollongong', code: 'A-WO'&#125;
]
&#125;,
&#123;
name: 'Queensland',
cities: [
&#123;cname: 'Brisbane', code: 'A-BR'&#125;,
&#123;cname: 'Townsville', code: 'A-TO'&#125;
]
&#125;,
]
&#125;,
&#123;
name: 'Canada',
code: 'CA',
states: [
&#123;
name: 'Quebec',
cities: [
&#123;cname: 'Montreal', code: 'C-MO'&#125;,
&#123;cname: 'Quebec City', code: 'C-QU'&#125;
]
&#125;,
&#123;
name: 'Ontario',
cities: [
&#123;cname: 'Ottawa', code: 'C-OT'&#125;,
&#123;cname: 'Toronto', code: 'C-TO'&#125;
]
&#125;,
]
&#125;,
&#123;
name: 'United States',
code: 'US',
states: [
&#123;
name: 'California',
cities: [
&#123;cname: 'Los Angeles', code: 'US-LA'&#125;,
&#123;cname: 'San Diego', code: 'US-SD'&#125;,
&#123;cname: 'San Francisco', code: 'US-SF'&#125;
]
&#125;,
&#123;
name: 'Florida',
cities: [
&#123;cname: 'Jacksonville', code: 'US-JA'&#125;,
&#123;cname: 'Miami', code: 'US-MI'&#125;,
&#123;cname: 'Tampa', code: 'US-TA'&#125;,
&#123;cname: 'Orlando', code: 'US-OR'&#125;
]
&#125;,
&#123;
name: 'Texas',
cities: [
&#123;cname: 'Austin', code: 'US-AU'&#125;,
&#123;cname: 'Dallas', code: 'US-DA'&#125;,
&#123;cname: 'Houston', code: 'US-HO'&#125;
]
&#125;
]
&#125;
]
&#125;
&#125;
&#125;
</code></pre>
</TabPanel>
</TabView>
</div>
</template>