Fixed #686 - CascadeSelect
Cagatay Civici
parent
be523323af
commit
23be3cfbb6
|
|
@ -0,0 +1 @@
|
||||||
|
export * from './components/cascadeselect/CascadeSelect';
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
'use strict';
|
||||||
|
module.exports = require('./components/cascadeselect/CascadeSelect.vue');
|
||||||
|
|
@ -324,6 +324,92 @@
|
||||||
padding: 0;
|
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 {
|
.p-checkbox {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
|
|
|
||||||
|
|
@ -324,6 +324,92 @@
|
||||||
padding: 0;
|
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 {
|
.p-checkbox {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
|
|
|
||||||
|
|
@ -324,6 +324,92 @@
|
||||||
padding: 0;
|
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 {
|
.p-checkbox {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
|
|
|
||||||
|
|
@ -324,6 +324,92 @@
|
||||||
padding: 0;
|
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 {
|
.p-checkbox {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
|
|
|
||||||
|
|
@ -324,6 +324,92 @@
|
||||||
padding: 0;
|
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 {
|
.p-checkbox {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
|
|
|
||||||
|
|
@ -324,6 +324,92 @@
|
||||||
padding: 0;
|
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 {
|
.p-checkbox {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
|
|
|
||||||
|
|
@ -324,6 +324,92 @@
|
||||||
padding: 0;
|
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 {
|
.p-checkbox {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
|
|
|
||||||
|
|
@ -324,6 +324,92 @@
|
||||||
padding: 0;
|
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 {
|
.p-checkbox {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
|
|
|
||||||
|
|
@ -324,6 +324,92 @@
|
||||||
padding: 0;
|
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 {
|
.p-checkbox {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
|
|
|
||||||
|
|
@ -324,6 +324,92 @@
|
||||||
padding: 0;
|
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 {
|
.p-checkbox {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
|
|
|
||||||
|
|
@ -324,6 +324,92 @@
|
||||||
padding: 0;
|
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 {
|
.p-checkbox {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
|
|
|
||||||
|
|
@ -324,6 +324,92 @@
|
||||||
padding: 0;
|
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 {
|
.p-checkbox {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
|
|
|
||||||
|
|
@ -324,6 +324,92 @@
|
||||||
padding: 0;
|
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 {
|
.p-checkbox {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
|
|
|
||||||
|
|
@ -348,6 +348,92 @@
|
||||||
padding: 0;
|
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 {
|
.p-checkbox {
|
||||||
width: 18px;
|
width: 18px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
|
|
|
||||||
|
|
@ -348,6 +348,92 @@
|
||||||
padding: 0;
|
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 {
|
.p-checkbox {
|
||||||
width: 18px;
|
width: 18px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
|
|
|
||||||
|
|
@ -348,6 +348,92 @@
|
||||||
padding: 0;
|
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 {
|
.p-checkbox {
|
||||||
width: 18px;
|
width: 18px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
|
|
|
||||||
|
|
@ -348,6 +348,92 @@
|
||||||
padding: 0;
|
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 {
|
.p-checkbox {
|
||||||
width: 18px;
|
width: 18px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
|
|
|
||||||
|
|
@ -348,6 +348,92 @@
|
||||||
padding: 0;
|
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 {
|
.p-checkbox {
|
||||||
width: 18px;
|
width: 18px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
|
|
|
||||||
|
|
@ -348,6 +348,92 @@
|
||||||
padding: 0;
|
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 {
|
.p-checkbox {
|
||||||
width: 18px;
|
width: 18px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
|
|
|
||||||
|
|
@ -348,6 +348,92 @@
|
||||||
padding: 0;
|
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 {
|
.p-checkbox {
|
||||||
width: 18px;
|
width: 18px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
|
|
|
||||||
|
|
@ -348,6 +348,92 @@
|
||||||
padding: 0;
|
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 {
|
.p-checkbox {
|
||||||
width: 18px;
|
width: 18px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
|
|
|
||||||
|
|
@ -324,6 +324,92 @@
|
||||||
padding: 0.25rem;
|
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 {
|
.p-checkbox {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
|
|
|
||||||
|
|
@ -324,6 +324,92 @@
|
||||||
padding: 0.25rem;
|
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 {
|
.p-checkbox {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
|
|
|
||||||
|
|
@ -324,6 +324,92 @@
|
||||||
padding: 0.25rem;
|
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 {
|
.p-checkbox {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
|
|
|
||||||
|
|
@ -324,6 +324,92 @@
|
||||||
padding: 0.25rem;
|
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 {
|
.p-checkbox {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
|
|
|
||||||
|
|
@ -324,6 +324,92 @@
|
||||||
padding: 0.25rem;
|
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 {
|
.p-checkbox {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
|
|
|
||||||
|
|
@ -324,6 +324,92 @@
|
||||||
padding: 0;
|
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 {
|
.p-checkbox {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
|
|
|
||||||
|
|
@ -324,6 +324,92 @@
|
||||||
padding: 0;
|
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 {
|
.p-checkbox {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
|
|
|
||||||
|
|
@ -324,6 +324,92 @@
|
||||||
padding: 0;
|
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 {
|
.p-checkbox {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
|
|
|
||||||
|
|
@ -324,6 +324,92 @@
|
||||||
padding: 0;
|
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 {
|
.p-checkbox {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
|
|
|
||||||
|
|
@ -324,6 +324,92 @@
|
||||||
padding: 0;
|
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 {
|
.p-checkbox {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
|
|
|
||||||
|
|
@ -324,6 +324,92 @@
|
||||||
padding: 0;
|
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 {
|
.p-checkbox {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
|
|
|
||||||
|
|
@ -324,6 +324,92 @@
|
||||||
padding: 0;
|
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 {
|
.p-checkbox {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
|
|
|
||||||
|
|
@ -324,6 +324,92 @@
|
||||||
padding: 0;
|
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 {
|
.p-checkbox {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
|
|
|
||||||
|
|
@ -44,6 +44,7 @@
|
||||||
<div class="menu-items">
|
<div class="menu-items">
|
||||||
<router-link to="/autocomplete">AutoComplete</router-link>
|
<router-link to="/autocomplete">AutoComplete</router-link>
|
||||||
<router-link to="/calendar">Calendar</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="/checkbox">Checkbox</router-link>
|
||||||
<router-link to="/chips">Chips</router-link>
|
<router-link to="/chips">Chips</router-link>
|
||||||
<router-link to="/colorpicker">ColorPicker</router-link>
|
<router-link to="/colorpicker">ColorPicker</router-link>
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -14,6 +14,7 @@ import Button from './components/button/Button';
|
||||||
import Calendar from './components/calendar/Calendar';
|
import Calendar from './components/calendar/Calendar';
|
||||||
import Card from './components/card/Card';
|
import Card from './components/card/Card';
|
||||||
import Carousel from './components/carousel/Carousel';
|
import Carousel from './components/carousel/Carousel';
|
||||||
|
import CascadeSelect from './components/cascadeselect/CascadeSelect';
|
||||||
import Chart from './components/chart/Chart';
|
import Chart from './components/chart/Chart';
|
||||||
import Checkbox from './components/checkbox/Checkbox';
|
import Checkbox from './components/checkbox/Checkbox';
|
||||||
import Chip from './components/chip/Chip';
|
import Chip from './components/chip/Chip';
|
||||||
|
|
@ -132,6 +133,7 @@ app.component('Button', Button);
|
||||||
app.component('Calendar', Calendar);
|
app.component('Calendar', Calendar);
|
||||||
app.component('Card', Card);
|
app.component('Card', Card);
|
||||||
app.component('Carousel', Carousel);
|
app.component('Carousel', Carousel);
|
||||||
|
app.component('CascadeSelect', CascadeSelect);
|
||||||
app.component('Chart', Chart);
|
app.component('Chart', Chart);
|
||||||
app.component('Checkbox', Checkbox);
|
app.component('Checkbox', Checkbox);
|
||||||
app.component('Chip', Chip);
|
app.component('Chip', Chip);
|
||||||
|
|
|
||||||
|
|
@ -87,6 +87,11 @@ const routes = [
|
||||||
name: 'carousel',
|
name: 'carousel',
|
||||||
component: () => import('../views/carousel/CarouselDemo.vue')
|
component: () => import('../views/carousel/CarouselDemo.vue')
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/cascadeselect',
|
||||||
|
name: 'cascadeselect',
|
||||||
|
component: () => import('../views/cascadeselect/CascadeSelectDemo.vue')
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/chart',
|
path: '/chart',
|
||||||
name: 'chart',
|
name: 'chart',
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
|
||||||
|
:optionGroupChildren="['states', 'cities']" style="minWidth: 14rem" >
|
||||||
|
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<pre v-code.script>
|
||||||
|
<code>
|
||||||
|
data() {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
selectedCity: 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'}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</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>
|
||||||
|
<CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
|
||||||
|
:optionGroupChildren="['states', 'cities']" style="minWidth: 14rem">
|
||||||
|
<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>
|
||||||
|
</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>
|
||||||
|
<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>
|
||||||
|
</template>
|
||||||
|
</code></pre>
|
||||||
|
|
||||||
|
<pre v-code.script>
|
||||||
|
<code>
|
||||||
|
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'}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</code></pre>
|
||||||
|
</TabPanel>
|
||||||
|
</TabView>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
Loading…
Reference in New Issue