Material theming for CascadeSelect

public/themes/md-dark-deeppurple/theme.css

@@ -4957,6 +4957,55 @@
   color: #121212;
 }
 
+.p-cascadeselect .p-cascadeselect-label, .p-cascadeselect .p-dropdown-trigger {
+  background-image: none;
+  background: transparent;
+}
+.p-cascadeselect .p-cascadeselect-label {
+  border: 0 none;
+}
+.p-cascadeselect:not(.p-disabled).p-focus {
+  box-shadow: inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8;
+}
+
+.p-cascadeselect-item-content .p-ink {
+  background-color: rgba(206, 147, 216, 0.16);
+}
+
+.p-input-filled .p-cascadeselect {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border: 1px solid transparent;
+  background: rgba(255, 255, 255, 0.06) no-repeat;
+  background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3));
+  background-size: 0 2px, 100% 1px;
+  background-position: 50% 100%, 50% 100%;
+  background-origin: border-box;
+}
+.p-input-filled .p-cascadeselect .p-inputtext {
+  background-image: none;
+  background: transparent;
+}
+.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
+  background-color: rgba(255, 255, 255, 0.08);
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
+}
+.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect:not(.p-disabled).p-inputwrapper-focus {
+  box-shadow: none;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-color: transparent;
+  background-size: 100% 2px, 100% 1px;
+}
+.p-input-filled .p-cascadeselect .p-inputtext:enabled:hover, .p-input-filled .p-cascadeselect .p-inputtext:enabled:focus {
+  background-image: none;
+  background: transparent;
+}
+.p-input-filled .p-cascadeselect .p-cascadeselect-label:hover {
+  background-image: none;
+  background: transparent;
+}
+
 .p-checkbox {
   border-radius: 50%;
   transition: box-shadow 0.2s;

public/themes/md-dark-indigo/theme.css

@@ -4957,6 +4957,55 @@
   color: #121212;
 }
 
+.p-cascadeselect .p-cascadeselect-label, .p-cascadeselect .p-dropdown-trigger {
+  background-image: none;
+  background: transparent;
+}
+.p-cascadeselect .p-cascadeselect-label {
+  border: 0 none;
+}
+.p-cascadeselect:not(.p-disabled).p-focus {
+  box-shadow: inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA;
+}
+
+.p-cascadeselect-item-content .p-ink {
+  background-color: rgba(159, 168, 218, 0.16);
+}
+
+.p-input-filled .p-cascadeselect {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border: 1px solid transparent;
+  background: rgba(255, 255, 255, 0.06) no-repeat;
+  background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3));
+  background-size: 0 2px, 100% 1px;
+  background-position: 50% 100%, 50% 100%;
+  background-origin: border-box;
+}
+.p-input-filled .p-cascadeselect .p-inputtext {
+  background-image: none;
+  background: transparent;
+}
+.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
+  background-color: rgba(255, 255, 255, 0.08);
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
+}
+.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect:not(.p-disabled).p-inputwrapper-focus {
+  box-shadow: none;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-color: transparent;
+  background-size: 100% 2px, 100% 1px;
+}
+.p-input-filled .p-cascadeselect .p-inputtext:enabled:hover, .p-input-filled .p-cascadeselect .p-inputtext:enabled:focus {
+  background-image: none;
+  background: transparent;
+}
+.p-input-filled .p-cascadeselect .p-cascadeselect-label:hover {
+  background-image: none;
+  background: transparent;
+}
+
 .p-checkbox {
   border-radius: 50%;
   transition: box-shadow 0.2s;

public/themes/md-light-deeppurple/theme.css

@@ -4957,6 +4957,55 @@
   color: #ffffff;
 }
 
+.p-cascadeselect .p-cascadeselect-label, .p-cascadeselect .p-dropdown-trigger {
+  background-image: none;
+  background: transparent;
+}
+.p-cascadeselect .p-cascadeselect-label {
+  border: 0 none;
+}
+.p-cascadeselect:not(.p-disabled).p-focus {
+  box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7;
+}
+
+.p-cascadeselect-item-content .p-ink {
+  background-color: rgba(103, 58, 183, 0.16);
+}
+
+.p-input-filled .p-cascadeselect {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border: 1px solid transparent;
+  background: #f5f5f5 no-repeat;
+  background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38));
+  background-size: 0 2px, 100% 1px;
+  background-position: 50% 100%, 50% 100%;
+  background-origin: border-box;
+}
+.p-input-filled .p-cascadeselect .p-inputtext {
+  background-image: none;
+  background: transparent;
+}
+.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
+  background-color: #ececec;
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, #000001, #000001);
+}
+.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect:not(.p-disabled).p-inputwrapper-focus {
+  box-shadow: none;
+  background-color: #dcdcdc;
+  border-color: transparent;
+  background-size: 100% 2px, 100% 1px;
+}
+.p-input-filled .p-cascadeselect .p-inputtext:enabled:hover, .p-input-filled .p-cascadeselect .p-inputtext:enabled:focus {
+  background-image: none;
+  background: transparent;
+}
+.p-input-filled .p-cascadeselect .p-cascadeselect-label:hover {
+  background-image: none;
+  background: transparent;
+}
+
 .p-checkbox {
   border-radius: 50%;
   transition: box-shadow 0.2s;

public/themes/md-light-indigo/theme.css

@@ -4957,6 +4957,55 @@
   color: #ffffff;
 }
 
+.p-cascadeselect .p-cascadeselect-label, .p-cascadeselect .p-dropdown-trigger {
+  background-image: none;
+  background: transparent;
+}
+.p-cascadeselect .p-cascadeselect-label {
+  border: 0 none;
+}
+.p-cascadeselect:not(.p-disabled).p-focus {
+  box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5;
+}
+
+.p-cascadeselect-item-content .p-ink {
+  background-color: rgba(63, 81, 181, 0.16);
+}
+
+.p-input-filled .p-cascadeselect {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border: 1px solid transparent;
+  background: #f5f5f5 no-repeat;
+  background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38));
+  background-size: 0 2px, 100% 1px;
+  background-position: 50% 100%, 50% 100%;
+  background-origin: border-box;
+}
+.p-input-filled .p-cascadeselect .p-inputtext {
+  background-image: none;
+  background: transparent;
+}
+.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
+  background-color: #ececec;
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, #000001, #000001);
+}
+.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect:not(.p-disabled).p-inputwrapper-focus {
+  box-shadow: none;
+  background-color: #dcdcdc;
+  border-color: transparent;
+  background-size: 100% 2px, 100% 1px;
+}
+.p-input-filled .p-cascadeselect .p-inputtext:enabled:hover, .p-input-filled .p-cascadeselect .p-inputtext:enabled:focus {
+  background-image: none;
+  background: transparent;
+}
+.p-input-filled .p-cascadeselect .p-cascadeselect-label:hover {
+  background-image: none;
+  background: transparent;
+}
+
 .p-checkbox {
   border-radius: 50%;
   transition: box-shadow 0.2s;

public/themes/mdc-dark-deeppurple/theme.css

@@ -4957,6 +4957,55 @@
   color: #ffffff;
 }
 
+.p-cascadeselect .p-cascadeselect-label, .p-cascadeselect .p-dropdown-trigger {
+  background-image: none;
+  background: transparent;
+}
+.p-cascadeselect .p-cascadeselect-label {
+  border: 0 none;
+}
+.p-cascadeselect:not(.p-disabled).p-focus {
+  box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7;
+}
+
+.p-cascadeselect-item-content .p-ink {
+  background-color: rgba(103, 58, 183, 0.16);
+}
+
+.p-input-filled .p-cascadeselect {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border: 1px solid transparent;
+  background: rgba(255, 255, 255, 0.06) no-repeat;
+  background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3));
+  background-size: 0 2px, 100% 1px;
+  background-position: 50% 100%, 50% 100%;
+  background-origin: border-box;
+}
+.p-input-filled .p-cascadeselect .p-inputtext {
+  background-image: none;
+  background: transparent;
+}
+.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
+  background-color: rgba(255, 255, 255, 0.08);
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
+}
+.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect:not(.p-disabled).p-inputwrapper-focus {
+  box-shadow: none;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-color: transparent;
+  background-size: 100% 2px, 100% 1px;
+}
+.p-input-filled .p-cascadeselect .p-inputtext:enabled:hover, .p-input-filled .p-cascadeselect .p-inputtext:enabled:focus {
+  background-image: none;
+  background: transparent;
+}
+.p-input-filled .p-cascadeselect .p-cascadeselect-label:hover {
+  background-image: none;
+  background: transparent;
+}
+
 .p-checkbox {
   border-radius: 50%;
   transition: box-shadow 0.2s;

public/themes/mdc-dark-indigo/theme.css

@@ -4957,6 +4957,55 @@
   color: #ffffff;
 }
 
+.p-cascadeselect .p-cascadeselect-label, .p-cascadeselect .p-dropdown-trigger {
+  background-image: none;
+  background: transparent;
+}
+.p-cascadeselect .p-cascadeselect-label {
+  border: 0 none;
+}
+.p-cascadeselect:not(.p-disabled).p-focus {
+  box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5;
+}
+
+.p-cascadeselect-item-content .p-ink {
+  background-color: rgba(63, 81, 181, 0.16);
+}
+
+.p-input-filled .p-cascadeselect {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border: 1px solid transparent;
+  background: rgba(255, 255, 255, 0.06) no-repeat;
+  background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3));
+  background-size: 0 2px, 100% 1px;
+  background-position: 50% 100%, 50% 100%;
+  background-origin: border-box;
+}
+.p-input-filled .p-cascadeselect .p-inputtext {
+  background-image: none;
+  background: transparent;
+}
+.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
+  background-color: rgba(255, 255, 255, 0.08);
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
+}
+.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect:not(.p-disabled).p-inputwrapper-focus {
+  box-shadow: none;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-color: transparent;
+  background-size: 100% 2px, 100% 1px;
+}
+.p-input-filled .p-cascadeselect .p-inputtext:enabled:hover, .p-input-filled .p-cascadeselect .p-inputtext:enabled:focus {
+  background-image: none;
+  background: transparent;
+}
+.p-input-filled .p-cascadeselect .p-cascadeselect-label:hover {
+  background-image: none;
+  background: transparent;
+}
+
 .p-checkbox {
   border-radius: 50%;
   transition: box-shadow 0.2s;

public/themes/mdc-light-deeppurple/theme.css

@@ -4957,6 +4957,55 @@
   color: #ffffff;
 }
 
+.p-cascadeselect .p-cascadeselect-label, .p-cascadeselect .p-dropdown-trigger {
+  background-image: none;
+  background: transparent;
+}
+.p-cascadeselect .p-cascadeselect-label {
+  border: 0 none;
+}
+.p-cascadeselect:not(.p-disabled).p-focus {
+  box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7;
+}
+
+.p-cascadeselect-item-content .p-ink {
+  background-color: rgba(103, 58, 183, 0.16);
+}
+
+.p-input-filled .p-cascadeselect {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border: 1px solid transparent;
+  background: #f5f5f5 no-repeat;
+  background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38));
+  background-size: 0 2px, 100% 1px;
+  background-position: 50% 100%, 50% 100%;
+  background-origin: border-box;
+}
+.p-input-filled .p-cascadeselect .p-inputtext {
+  background-image: none;
+  background: transparent;
+}
+.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
+  background-color: #ececec;
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, #000001, #000001);
+}
+.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect:not(.p-disabled).p-inputwrapper-focus {
+  box-shadow: none;
+  background-color: #dcdcdc;
+  border-color: transparent;
+  background-size: 100% 2px, 100% 1px;
+}
+.p-input-filled .p-cascadeselect .p-inputtext:enabled:hover, .p-input-filled .p-cascadeselect .p-inputtext:enabled:focus {
+  background-image: none;
+  background: transparent;
+}
+.p-input-filled .p-cascadeselect .p-cascadeselect-label:hover {
+  background-image: none;
+  background: transparent;
+}
+
 .p-checkbox {
   border-radius: 50%;
   transition: box-shadow 0.2s;

public/themes/mdc-light-indigo/theme.css

@@ -4957,6 +4957,55 @@
   color: #ffffff;
 }
 
+.p-cascadeselect .p-cascadeselect-label, .p-cascadeselect .p-dropdown-trigger {
+  background-image: none;
+  background: transparent;
+}
+.p-cascadeselect .p-cascadeselect-label {
+  border: 0 none;
+}
+.p-cascadeselect:not(.p-disabled).p-focus {
+  box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5;
+}
+
+.p-cascadeselect-item-content .p-ink {
+  background-color: rgba(63, 81, 181, 0.16);
+}
+
+.p-input-filled .p-cascadeselect {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border: 1px solid transparent;
+  background: #f5f5f5 no-repeat;
+  background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38));
+  background-size: 0 2px, 100% 1px;
+  background-position: 50% 100%, 50% 100%;
+  background-origin: border-box;
+}
+.p-input-filled .p-cascadeselect .p-inputtext {
+  background-image: none;
+  background: transparent;
+}
+.p-input-filled .p-cascadeselect:not(.p-disabled):hover {
+  background-color: #ececec;
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #3F51B5, #3F51B5), linear-gradient(to bottom, #000001, #000001);
+}
+.p-input-filled .p-cascadeselect:not(.p-disabled).p-focus, .p-input-filled .p-cascadeselect:not(.p-disabled).p-inputwrapper-focus {
+  box-shadow: none;
+  background-color: #dcdcdc;
+  border-color: transparent;
+  background-size: 100% 2px, 100% 1px;
+}
+.p-input-filled .p-cascadeselect .p-inputtext:enabled:hover, .p-input-filled .p-cascadeselect .p-inputtext:enabled:focus {
+  background-image: none;
+  background: transparent;
+}
+.p-input-filled .p-cascadeselect .p-cascadeselect-label:hover {
+  background-image: none;
+  background: transparent;
+}
+
 .p-checkbox {
   border-radius: 50%;
   transition: box-shadow 0.2s;

src/components/cascadeselect/CascadeSelect.vue

@@ -362,6 +362,8 @@ export default {
 .p-cascadeselect-item-content {
     display: flex;
     align-items: center;
+    overflow: hidden;
+    position: relative;
 }
 
 .p-cascadeselect-group-icon {

src/components/cascadeselect/CascadeSelectSub.vue

@@ -2,7 +2,7 @@
     <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)">
+                <div class="p-cascadeselect-item-content" @click="onOptionClick($event, option)" tabindex="0" @keydown="onKeyDown($event, option, i)" v-ripple>
                     <component :is="templates['option']" :option="option" v-if="templates['option']"/>
                     <template v-else>
                         <span class="p-cascadeselect-item-text">{{getOptionLabelToRender(option)}}</span>