diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css index fb120681b..bd3ca34ea 100644 --- a/public/themes/arya-blue/theme.css +++ b/public/themes/arya-blue/theme.css @@ -916,6 +916,16 @@ .p-multiselect .p-multiselect-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } +.p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.25rem 0.5rem; + margin-right: 0.5rem; + background: rgba(100, 181, 246, 0.16); + color: rgba(255, 255, 255, 0.87); + border-radius: 3px; +} +.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.5rem; +} .p-multiselect .p-multiselect-trigger { background: transparent; color: rgba(255, 255, 255, 0.6); @@ -927,6 +937,10 @@ border-color: #ef9a9a; } +.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.25rem 0.5rem; +} + .p-multiselect-panel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css index 29ab61abb..0d77fcd0d 100644 --- a/public/themes/arya-green/theme.css +++ b/public/themes/arya-green/theme.css @@ -916,6 +916,16 @@ .p-multiselect .p-multiselect-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } +.p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.25rem 0.5rem; + margin-right: 0.5rem; + background: rgba(129, 199, 132, 0.16); + color: rgba(255, 255, 255, 0.87); + border-radius: 3px; +} +.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.5rem; +} .p-multiselect .p-multiselect-trigger { background: transparent; color: rgba(255, 255, 255, 0.6); @@ -927,6 +937,10 @@ border-color: #ef9a9a; } +.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.25rem 0.5rem; +} + .p-multiselect-panel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css index 17717903e..fb10c07ed 100644 --- a/public/themes/arya-orange/theme.css +++ b/public/themes/arya-orange/theme.css @@ -916,6 +916,16 @@ .p-multiselect .p-multiselect-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } +.p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.25rem 0.5rem; + margin-right: 0.5rem; + background: rgba(255, 213, 79, 0.16); + color: rgba(255, 255, 255, 0.87); + border-radius: 3px; +} +.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.5rem; +} .p-multiselect .p-multiselect-trigger { background: transparent; color: rgba(255, 255, 255, 0.6); @@ -927,6 +937,10 @@ border-color: #ef9a9a; } +.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.25rem 0.5rem; +} + .p-multiselect-panel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css index cfd659492..5a3fee80c 100644 --- a/public/themes/arya-purple/theme.css +++ b/public/themes/arya-purple/theme.css @@ -916,6 +916,16 @@ .p-multiselect .p-multiselect-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } +.p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.25rem 0.5rem; + margin-right: 0.5rem; + background: rgba(186, 104, 200, 0.16); + color: rgba(255, 255, 255, 0.87); + border-radius: 3px; +} +.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.5rem; +} .p-multiselect .p-multiselect-trigger { background: transparent; color: rgba(255, 255, 255, 0.6); @@ -927,6 +937,10 @@ border-color: #ef9a9a; } +.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.25rem 0.5rem; +} + .p-multiselect-panel { background: #1e1e1e; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css index ec71ab428..1bf7f843c 100644 --- a/public/themes/bootstrap4-dark-blue/theme.css +++ b/public/themes/bootstrap4-dark-blue/theme.css @@ -920,6 +920,16 @@ .p-multiselect .p-multiselect-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } +.p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: #8dd0ff; + color: #151515; + border-radius: 4px; +} +.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.5rem; +} .p-multiselect .p-multiselect-trigger { background: transparent; color: rgba(255, 255, 255, 0.6); @@ -931,6 +941,10 @@ border-color: #f19ea6; } +.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.25rem 0.75rem; +} + .p-multiselect-panel { background: #2a323d; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css index bbd49b491..8431e0af8 100644 --- a/public/themes/bootstrap4-dark-purple/theme.css +++ b/public/themes/bootstrap4-dark-purple/theme.css @@ -920,6 +920,16 @@ .p-multiselect .p-multiselect-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } +.p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: #c298d8; + color: #151515; + border-radius: 4px; +} +.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.5rem; +} .p-multiselect .p-multiselect-trigger { background: transparent; color: rgba(255, 255, 255, 0.6); @@ -931,6 +941,10 @@ border-color: #f19ea6; } +.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.25rem 0.75rem; +} + .p-multiselect-panel { background: #2a323d; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css index b528f7466..04f059ee6 100644 --- a/public/themes/bootstrap4-light-blue/theme.css +++ b/public/themes/bootstrap4-light-blue/theme.css @@ -920,6 +920,16 @@ .p-multiselect .p-multiselect-label.p-placeholder { color: #6c757d; } +.p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: #007bff; + color: #ffffff; + border-radius: 4px; +} +.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.5rem; +} .p-multiselect .p-multiselect-trigger { background: transparent; color: #495057; @@ -931,6 +941,10 @@ border-color: #dc3545; } +.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.25rem 0.75rem; +} + .p-multiselect-panel { background: #ffffff; color: #212529; diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css index bb542dc0b..07e57835f 100644 --- a/public/themes/bootstrap4-light-purple/theme.css +++ b/public/themes/bootstrap4-light-purple/theme.css @@ -920,6 +920,16 @@ .p-multiselect .p-multiselect-label.p-placeholder { color: #6c757d; } +.p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.25rem 0.75rem; + margin-right: 0.5rem; + background: #883cae; + color: #ffffff; + border-radius: 4px; +} +.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.5rem; +} .p-multiselect .p-multiselect-trigger { background: transparent; color: #495057; @@ -931,6 +941,10 @@ border-color: #dc3545; } +.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.25rem 0.75rem; +} + .p-multiselect-panel { background: #ffffff; color: #212529; diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css index 7f2057ff3..3ef111786 100644 --- a/public/themes/fluent-light/theme.css +++ b/public/themes/fluent-light/theme.css @@ -916,6 +916,16 @@ .p-multiselect .p-multiselect-label.p-placeholder { color: #605e5c; } +.p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.25rem 0.5rem; + margin-right: 0.5rem; + background: #edebe9; + color: #323130; + border-radius: 2px; +} +.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.5rem; +} .p-multiselect .p-multiselect-trigger { background: transparent; color: #605e5c; @@ -927,6 +937,10 @@ border-color: #a4252c; } +.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.25rem 0.5rem; +} + .p-multiselect-panel { background: #ffffff; color: #323130; diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css index e2801b2d6..49820734b 100644 --- a/public/themes/luna-amber/theme.css +++ b/public/themes/luna-amber/theme.css @@ -920,6 +920,16 @@ .p-multiselect .p-multiselect-label.p-placeholder { color: #9b9b9b; } +.p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.2145rem 0.429rem; + margin-right: 0.5rem; + background: #FFE082; + color: #212529; + border-radius: 3px; +} +.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.5rem; +} .p-multiselect .p-multiselect-trigger { background: transparent; color: #888888; @@ -931,6 +941,10 @@ border-color: #e57373; } +.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.2145rem 0.429rem; +} + .p-multiselect-panel { background: #323232; color: #dedede; diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css index 06ebdddf8..0ad81710e 100644 --- a/public/themes/luna-blue/theme.css +++ b/public/themes/luna-blue/theme.css @@ -920,6 +920,16 @@ .p-multiselect .p-multiselect-label.p-placeholder { color: #9b9b9b; } +.p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.2145rem 0.429rem; + margin-right: 0.5rem; + background: #81D4FA; + color: #212529; + border-radius: 3px; +} +.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.5rem; +} .p-multiselect .p-multiselect-trigger { background: transparent; color: #888888; @@ -931,6 +941,10 @@ border-color: #e57373; } +.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.2145rem 0.429rem; +} + .p-multiselect-panel { background: #323232; color: #dedede; diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css index 3c6716f4b..24f49203d 100644 --- a/public/themes/luna-green/theme.css +++ b/public/themes/luna-green/theme.css @@ -920,6 +920,16 @@ .p-multiselect .p-multiselect-label.p-placeholder { color: #9b9b9b; } +.p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.2145rem 0.429rem; + margin-right: 0.5rem; + background: #C5E1A5; + color: #212529; + border-radius: 3px; +} +.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.5rem; +} .p-multiselect .p-multiselect-trigger { background: transparent; color: #888888; @@ -931,6 +941,10 @@ border-color: #e57373; } +.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.2145rem 0.429rem; +} + .p-multiselect-panel { background: #323232; color: #dedede; diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css index 7794eaf6d..b070c5121 100644 --- a/public/themes/luna-pink/theme.css +++ b/public/themes/luna-pink/theme.css @@ -920,6 +920,16 @@ .p-multiselect .p-multiselect-label.p-placeholder { color: #9b9b9b; } +.p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.2145rem 0.429rem; + margin-right: 0.5rem; + background: #F48FB1; + color: #212529; + border-radius: 3px; +} +.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.5rem; +} .p-multiselect .p-multiselect-trigger { background: transparent; color: #888888; @@ -931,6 +941,10 @@ border-color: #e57373; } +.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.2145rem 0.429rem; +} + .p-multiselect-panel { background: #323232; color: #dedede; diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css index f99388c95..40c53025d 100644 --- a/public/themes/md-dark-deeppurple/theme.css +++ b/public/themes/md-dark-deeppurple/theme.css @@ -940,6 +940,16 @@ .p-multiselect .p-multiselect-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } +.p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.5rem 1rem; + margin-right: 0.5rem; + background: rgba(206, 147, 216, 0.16); + color: #CE93D8; + border-radius: 4px; +} +.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.5rem; +} .p-multiselect .p-multiselect-trigger { background: transparent; color: rgba(255, 255, 255, 0.6); @@ -951,6 +961,10 @@ border-color: #f44435; } +.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.5rem 1rem; +} + .p-multiselect-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -5032,6 +5046,30 @@ background: transparent; } +.p-float-label .p-multiselect-label .p-multiselect-token { + padding: 0.25rem 1rem; + margin-top: 0.25rem; + margin-bottom: 0.25rem; +} + +.p-input-filled .p-float-label .p-multiselect .p-multiselect-label { + padding-top: 1.5rem; + padding-bottom: 0.5rem; +} +.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect .p-multiselect-label { + padding-top: 1.5rem; + padding-bottom: 0.5rem; +} +.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token { + padding-top: 0; + padding-bottom: 0; + margin-top: 0; + margin-bottom: 0; +} +.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + font-size: 75%; +} + .p-overlaypanel .p-overlaypanel-content { padding: 1.5rem; } diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css index 3c465cc22..788a72f64 100644 --- a/public/themes/md-dark-indigo/theme.css +++ b/public/themes/md-dark-indigo/theme.css @@ -940,6 +940,16 @@ .p-multiselect .p-multiselect-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } +.p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.5rem 1rem; + margin-right: 0.5rem; + background: rgba(159, 168, 218, 0.16); + color: #9FA8DA; + border-radius: 4px; +} +.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.5rem; +} .p-multiselect .p-multiselect-trigger { background: transparent; color: rgba(255, 255, 255, 0.6); @@ -951,6 +961,10 @@ border-color: #f44435; } +.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.5rem 1rem; +} + .p-multiselect-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -5032,6 +5046,30 @@ background: transparent; } +.p-float-label .p-multiselect-label .p-multiselect-token { + padding: 0.25rem 1rem; + margin-top: 0.25rem; + margin-bottom: 0.25rem; +} + +.p-input-filled .p-float-label .p-multiselect .p-multiselect-label { + padding-top: 1.5rem; + padding-bottom: 0.5rem; +} +.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect .p-multiselect-label { + padding-top: 1.5rem; + padding-bottom: 0.5rem; +} +.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token { + padding-top: 0; + padding-bottom: 0; + margin-top: 0; + margin-bottom: 0; +} +.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + font-size: 75%; +} + .p-overlaypanel .p-overlaypanel-content { padding: 1.5rem; } diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css index db75d5630..aace49812 100644 --- a/public/themes/md-light-deeppurple/theme.css +++ b/public/themes/md-light-deeppurple/theme.css @@ -940,6 +940,16 @@ .p-multiselect .p-multiselect-label.p-placeholder { color: rgba(0, 0, 0, 0.6); } +.p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.5rem 1rem; + margin-right: 0.5rem; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; + border-radius: 4px; +} +.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.5rem; +} .p-multiselect .p-multiselect-trigger { background: transparent; color: rgba(0, 0, 0, 0.6); @@ -951,6 +961,10 @@ border-color: #B00020; } +.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.5rem 1rem; +} + .p-multiselect-panel { background: #ffffff; color: #000001; @@ -5032,6 +5046,30 @@ background: transparent; } +.p-float-label .p-multiselect-label .p-multiselect-token { + padding: 0.25rem 1rem; + margin-top: 0.25rem; + margin-bottom: 0.25rem; +} + +.p-input-filled .p-float-label .p-multiselect .p-multiselect-label { + padding-top: 1.5rem; + padding-bottom: 0.5rem; +} +.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect .p-multiselect-label { + padding-top: 1.5rem; + padding-bottom: 0.5rem; +} +.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token { + padding-top: 0; + padding-bottom: 0; + margin-top: 0; + margin-bottom: 0; +} +.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + font-size: 75%; +} + .p-overlaypanel .p-overlaypanel-content { padding: 1.5rem; } diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css index 729483369..1baadb8f7 100644 --- a/public/themes/md-light-indigo/theme.css +++ b/public/themes/md-light-indigo/theme.css @@ -940,6 +940,16 @@ .p-multiselect .p-multiselect-label.p-placeholder { color: rgba(0, 0, 0, 0.6); } +.p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.5rem 1rem; + margin-right: 0.5rem; + background: rgba(63, 81, 181, 0.12); + color: #3F51B5; + border-radius: 4px; +} +.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.5rem; +} .p-multiselect .p-multiselect-trigger { background: transparent; color: rgba(0, 0, 0, 0.6); @@ -951,6 +961,10 @@ border-color: #B00020; } +.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.5rem 1rem; +} + .p-multiselect-panel { background: #ffffff; color: #000001; @@ -5032,6 +5046,30 @@ background: transparent; } +.p-float-label .p-multiselect-label .p-multiselect-token { + padding: 0.25rem 1rem; + margin-top: 0.25rem; + margin-bottom: 0.25rem; +} + +.p-input-filled .p-float-label .p-multiselect .p-multiselect-label { + padding-top: 1.5rem; + padding-bottom: 0.5rem; +} +.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect .p-multiselect-label { + padding-top: 1.5rem; + padding-bottom: 0.5rem; +} +.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token { + padding-top: 0; + padding-bottom: 0; + margin-top: 0; + margin-bottom: 0; +} +.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + font-size: 75%; +} + .p-overlaypanel .p-overlaypanel-content { padding: 1.5rem; } diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css index 004ce8d64..b5524e051 100644 --- a/public/themes/mdc-dark-deeppurple/theme.css +++ b/public/themes/mdc-dark-deeppurple/theme.css @@ -940,6 +940,16 @@ .p-multiselect .p-multiselect-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } +.p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.375rem 0.75rem; + margin-right: 0.5rem; + background: rgba(103, 58, 183, 0.16); + color: #673AB7; + border-radius: 4px; +} +.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.5rem; +} .p-multiselect .p-multiselect-trigger { background: transparent; color: rgba(255, 255, 255, 0.6); @@ -951,6 +961,10 @@ border-color: #f44435; } +.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.375rem 0.75rem; +} + .p-multiselect-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -5032,6 +5046,30 @@ background: transparent; } +.p-float-label .p-multiselect-label .p-multiselect-token { + padding: 0.25rem 1rem; + margin-top: 0.25rem; + margin-bottom: 0.25rem; +} + +.p-input-filled .p-float-label .p-multiselect .p-multiselect-label { + padding-top: 1.25rem; + padding-bottom: 0.25rem; +} +.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect .p-multiselect-label { + padding-top: 1.25rem; + padding-bottom: 0.25rem; +} +.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token { + padding-top: 0; + padding-bottom: 0; + margin-top: 0; + margin-bottom: 0; +} +.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + font-size: 75%; +} + .p-overlaypanel .p-overlaypanel-content { padding: 1.5rem; } diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css index 43510c2aa..dba7f1f13 100644 --- a/public/themes/mdc-dark-indigo/theme.css +++ b/public/themes/mdc-dark-indigo/theme.css @@ -940,6 +940,16 @@ .p-multiselect .p-multiselect-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } +.p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.375rem 0.75rem; + margin-right: 0.5rem; + background: rgba(63, 81, 181, 0.16); + color: #3F51B5; + border-radius: 4px; +} +.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.5rem; +} .p-multiselect .p-multiselect-trigger { background: transparent; color: rgba(255, 255, 255, 0.6); @@ -951,6 +961,10 @@ border-color: #f44435; } +.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.375rem 0.75rem; +} + .p-multiselect-panel { background: #2b2b2b; color: rgba(255, 255, 255, 0.87); @@ -5032,6 +5046,30 @@ background: transparent; } +.p-float-label .p-multiselect-label .p-multiselect-token { + padding: 0.25rem 1rem; + margin-top: 0.25rem; + margin-bottom: 0.25rem; +} + +.p-input-filled .p-float-label .p-multiselect .p-multiselect-label { + padding-top: 1.25rem; + padding-bottom: 0.25rem; +} +.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect .p-multiselect-label { + padding-top: 1.25rem; + padding-bottom: 0.25rem; +} +.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token { + padding-top: 0; + padding-bottom: 0; + margin-top: 0; + margin-bottom: 0; +} +.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + font-size: 75%; +} + .p-overlaypanel .p-overlaypanel-content { padding: 1.5rem; } diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css index 0ae10dcf2..903fcbd0f 100644 --- a/public/themes/mdc-light-deeppurple/theme.css +++ b/public/themes/mdc-light-deeppurple/theme.css @@ -940,6 +940,16 @@ .p-multiselect .p-multiselect-label.p-placeholder { color: rgba(0, 0, 0, 0.6); } +.p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.375rem 0.75rem; + margin-right: 0.5rem; + background: rgba(103, 58, 183, 0.12); + color: #673AB7; + border-radius: 4px; +} +.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.5rem; +} .p-multiselect .p-multiselect-trigger { background: transparent; color: rgba(0, 0, 0, 0.6); @@ -951,6 +961,10 @@ border-color: #B00020; } +.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.375rem 0.75rem; +} + .p-multiselect-panel { background: #ffffff; color: #000001; @@ -5032,6 +5046,30 @@ background: transparent; } +.p-float-label .p-multiselect-label .p-multiselect-token { + padding: 0.25rem 1rem; + margin-top: 0.25rem; + margin-bottom: 0.25rem; +} + +.p-input-filled .p-float-label .p-multiselect .p-multiselect-label { + padding-top: 1.25rem; + padding-bottom: 0.25rem; +} +.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect .p-multiselect-label { + padding-top: 1.25rem; + padding-bottom: 0.25rem; +} +.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token { + padding-top: 0; + padding-bottom: 0; + margin-top: 0; + margin-bottom: 0; +} +.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + font-size: 75%; +} + .p-overlaypanel .p-overlaypanel-content { padding: 1.5rem; } diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css index f4f43e326..82bfbc793 100644 --- a/public/themes/mdc-light-indigo/theme.css +++ b/public/themes/mdc-light-indigo/theme.css @@ -940,6 +940,16 @@ .p-multiselect .p-multiselect-label.p-placeholder { color: rgba(0, 0, 0, 0.6); } +.p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.375rem 0.75rem; + margin-right: 0.5rem; + background: rgba(63, 81, 181, 0.12); + color: #3F51B5; + border-radius: 4px; +} +.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.5rem; +} .p-multiselect .p-multiselect-trigger { background: transparent; color: rgba(0, 0, 0, 0.6); @@ -951,6 +961,10 @@ border-color: #B00020; } +.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.375rem 0.75rem; +} + .p-multiselect-panel { background: #ffffff; color: #000001; @@ -5032,6 +5046,30 @@ background: transparent; } +.p-float-label .p-multiselect-label .p-multiselect-token { + padding: 0.25rem 1rem; + margin-top: 0.25rem; + margin-bottom: 0.25rem; +} + +.p-input-filled .p-float-label .p-multiselect .p-multiselect-label { + padding-top: 1.25rem; + padding-bottom: 0.25rem; +} +.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect .p-multiselect-label { + padding-top: 1.25rem; + padding-bottom: 0.25rem; +} +.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token { + padding-top: 0; + padding-bottom: 0; + margin-top: 0; + margin-bottom: 0; +} +.p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + font-size: 75%; +} + .p-overlaypanel .p-overlaypanel-content { padding: 1.5rem; } diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css index 49902671e..fe4473f22 100644 --- a/public/themes/nova-accent/theme.css +++ b/public/themes/nova-accent/theme.css @@ -916,6 +916,16 @@ .p-multiselect .p-multiselect-label.p-placeholder { color: #666666; } +.p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.2145rem 0.429rem; + margin-right: 0.5rem; + background: #e02365; + color: #ffffff; + border-radius: 3px; +} +.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.5rem; +} .p-multiselect .p-multiselect-trigger { background: transparent; color: #848484; @@ -927,6 +937,10 @@ border-color: #a80000; } +.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.2145rem 0.429rem; +} + .p-multiselect-panel { background: #ffffff; color: #333333; diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css index fd3c481a0..dfd726081 100644 --- a/public/themes/nova-alt/theme.css +++ b/public/themes/nova-alt/theme.css @@ -920,6 +920,16 @@ .p-multiselect .p-multiselect-label.p-placeholder { color: #666666; } +.p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.2145rem 0.429rem; + margin-right: 0.5rem; + background: #007ad9; + color: #ffffff; + border-radius: 3px; +} +.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.5rem; +} .p-multiselect .p-multiselect-trigger { background: transparent; color: #848484; @@ -931,6 +941,10 @@ border-color: #a80000; } +.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.2145rem 0.429rem; +} + .p-multiselect-panel { background: #ffffff; color: #333333; diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css index 5bad15699..59629f977 100644 --- a/public/themes/nova-vue/theme.css +++ b/public/themes/nova-vue/theme.css @@ -920,6 +920,16 @@ .p-multiselect .p-multiselect-label.p-placeholder { color: #666666; } +.p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.2145rem 0.429rem; + margin-right: 0.5rem; + background: #41b883; + color: #ffffff; + border-radius: 3px; +} +.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.5rem; +} .p-multiselect .p-multiselect-trigger { background: transparent; color: #848484; @@ -931,6 +941,10 @@ border-color: #a80000; } +.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.2145rem 0.429rem; +} + .p-multiselect-panel { background: #ffffff; color: #333333; diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css index f76b4f13f..ce82f8a39 100644 --- a/public/themes/nova/theme.css +++ b/public/themes/nova/theme.css @@ -920,6 +920,16 @@ .p-multiselect .p-multiselect-label.p-placeholder { color: #666666; } +.p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.2145rem 0.429rem; + margin-right: 0.5rem; + background: #007ad9; + color: #ffffff; + border-radius: 3px; +} +.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.5rem; +} .p-multiselect .p-multiselect-trigger { background: transparent; color: #848484; @@ -931,6 +941,10 @@ border-color: #a80000; } +.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.2145rem 0.429rem; +} + .p-multiselect-panel { background: #ffffff; color: #333333; diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css index aadfb786c..1ab2749b1 100644 --- a/public/themes/rhea/theme.css +++ b/public/themes/rhea/theme.css @@ -916,6 +916,16 @@ .p-multiselect .p-multiselect-label.p-placeholder { color: #a6a6a6; } +.p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.2145rem 0.429rem; + margin-right: 0.5rem; + background: #AFD3C8; + color: #385048; + border-radius: 2px; +} +.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.5rem; +} .p-multiselect .p-multiselect-trigger { background: transparent; color: #a6a6a6; @@ -927,6 +937,10 @@ border-color: #e7a3a3; } +.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.2145rem 0.429rem; +} + .p-multiselect-panel { background: #ffffff; color: #666666; diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css index 5e6da29f6..9252f12e4 100644 --- a/public/themes/saga-blue/theme.css +++ b/public/themes/saga-blue/theme.css @@ -916,6 +916,16 @@ .p-multiselect .p-multiselect-label.p-placeholder { color: #6c757d; } +.p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.25rem 0.5rem; + margin-right: 0.5rem; + background: #E3F2FD; + color: #495057; + border-radius: 3px; +} +.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.5rem; +} .p-multiselect .p-multiselect-trigger { background: transparent; color: #6c757d; @@ -927,6 +937,10 @@ border-color: #f44336; } +.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.25rem 0.5rem; +} + .p-multiselect-panel { background: #ffffff; color: #495057; diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css index 8147df6a7..8ea803bba 100644 --- a/public/themes/saga-green/theme.css +++ b/public/themes/saga-green/theme.css @@ -916,6 +916,16 @@ .p-multiselect .p-multiselect-label.p-placeholder { color: #6c757d; } +.p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.25rem 0.5rem; + margin-right: 0.5rem; + background: #E8F5E9; + color: #495057; + border-radius: 3px; +} +.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.5rem; +} .p-multiselect .p-multiselect-trigger { background: transparent; color: #6c757d; @@ -927,6 +937,10 @@ border-color: #f44336; } +.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.25rem 0.5rem; +} + .p-multiselect-panel { background: #ffffff; color: #495057; diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css index 7bc7cc140..a3d01d201 100644 --- a/public/themes/saga-orange/theme.css +++ b/public/themes/saga-orange/theme.css @@ -916,6 +916,16 @@ .p-multiselect .p-multiselect-label.p-placeholder { color: #6c757d; } +.p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.25rem 0.5rem; + margin-right: 0.5rem; + background: #FFF3E0; + color: #495057; + border-radius: 3px; +} +.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.5rem; +} .p-multiselect .p-multiselect-trigger { background: transparent; color: #6c757d; @@ -927,6 +937,10 @@ border-color: #f44336; } +.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.25rem 0.5rem; +} + .p-multiselect-panel { background: #ffffff; color: #495057; diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css index 073013ad1..2db01076d 100644 --- a/public/themes/saga-purple/theme.css +++ b/public/themes/saga-purple/theme.css @@ -916,6 +916,16 @@ .p-multiselect .p-multiselect-label.p-placeholder { color: #6c757d; } +.p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.25rem 0.5rem; + margin-right: 0.5rem; + background: #F3E5F5; + color: #495057; + border-radius: 3px; +} +.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.5rem; +} .p-multiselect .p-multiselect-trigger { background: transparent; color: #6c757d; @@ -927,6 +937,10 @@ border-color: #f44336; } +.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.25rem 0.5rem; +} + .p-multiselect-panel { background: #ffffff; color: #495057; diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css index 5c0b0791a..4ed92eaa4 100644 --- a/public/themes/vela-blue/theme.css +++ b/public/themes/vela-blue/theme.css @@ -916,6 +916,16 @@ .p-multiselect .p-multiselect-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } +.p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.25rem 0.5rem; + margin-right: 0.5rem; + background: rgba(100, 181, 246, 0.16); + color: rgba(255, 255, 255, 0.87); + border-radius: 3px; +} +.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.5rem; +} .p-multiselect .p-multiselect-trigger { background: transparent; color: rgba(255, 255, 255, 0.6); @@ -927,6 +937,10 @@ border-color: #ef9a9a; } +.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.25rem 0.5rem; +} + .p-multiselect-panel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css index 093c5b654..73090886f 100644 --- a/public/themes/vela-green/theme.css +++ b/public/themes/vela-green/theme.css @@ -916,6 +916,16 @@ .p-multiselect .p-multiselect-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } +.p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.25rem 0.5rem; + margin-right: 0.5rem; + background: rgba(129, 199, 132, 0.16); + color: rgba(255, 255, 255, 0.87); + border-radius: 3px; +} +.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.5rem; +} .p-multiselect .p-multiselect-trigger { background: transparent; color: rgba(255, 255, 255, 0.6); @@ -927,6 +937,10 @@ border-color: #ef9a9a; } +.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.25rem 0.5rem; +} + .p-multiselect-panel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css index d3510edaa..cfe0fadba 100644 --- a/public/themes/vela-orange/theme.css +++ b/public/themes/vela-orange/theme.css @@ -916,6 +916,16 @@ .p-multiselect .p-multiselect-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } +.p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.25rem 0.5rem; + margin-right: 0.5rem; + background: rgba(255, 213, 79, 0.16); + color: rgba(255, 255, 255, 0.87); + border-radius: 3px; +} +.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.5rem; +} .p-multiselect .p-multiselect-trigger { background: transparent; color: rgba(255, 255, 255, 0.6); @@ -927,6 +937,10 @@ border-color: #ef9a9a; } +.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.25rem 0.5rem; +} + .p-multiselect-panel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css index 61428364d..1f3d3957a 100644 --- a/public/themes/vela-purple/theme.css +++ b/public/themes/vela-purple/theme.css @@ -916,6 +916,16 @@ .p-multiselect .p-multiselect-label.p-placeholder { color: rgba(255, 255, 255, 0.6); } +.p-multiselect.p-multiselect-chip .p-multiselect-token { + padding: 0.25rem 0.5rem; + margin-right: 0.5rem; + background: rgba(186, 104, 200, 0.16); + color: rgba(255, 255, 255, 0.87); + border-radius: 3px; +} +.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon { + margin-left: 0.5rem; +} .p-multiselect .p-multiselect-trigger { background: transparent; color: rgba(255, 255, 255, 0.6); @@ -927,6 +937,10 @@ border-color: #ef9a9a; } +.p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { + padding: 0.25rem 0.5rem; +} + .p-multiselect-panel { background: #1f2d40; color: rgba(255, 255, 255, 0.87); diff --git a/src/components/multiselect/MultiSelect.vue b/src/components/multiselect/MultiSelect.vue index da7e5c902..5862d6e3e 100755 --- a/src/components/multiselect/MultiSelect.vue +++ b/src/components/multiselect/MultiSelect.vue @@ -7,7 +7,16 @@
A comma separated list is used by default to display selected items whereas alternative chip mode is provided using the display property to visualize the items as tokens.
+
+
+<MultiSelect v-model="selectedCars" :options="cars" optionLabel="brand" placeholder="Select Brands" display="chip"/>
+
<h5>Basic</h5>
-<MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select a City" />
+<MultiSelect v-model="selectedCities1" :options="cities" optionLabel="name" placeholder="Select a City" />
+
+<h5>Chips</h5>
+<MultiSelect v-model="selectedCities2" :options="cities" optionLabel="name" placeholder="Select a City" display="chip"/>
<h5>Advanced with Templating and Filtering</h5>
<MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" placeholder="Select Countries" :filter="true" class="multiselect-custom">
@@ -348,7 +359,8 @@ data() {
export default {
data() {
return {
- selectedCities: null,
+ selectedCities1: null,
+ selectedCities2: null,
selectedCountries: null,
cities: [
{name: 'New York', code: 'NY'},