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

Material theming for CascadeSelect

pull/744/head
Cagatay Civici 2020-12-07 17:56:45 +03:00
parent 23be3cfbb6
commit 3f6d393354
10 changed files with 395 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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;

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

@ -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;

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

@ -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;

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

@ -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;

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

@ -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;

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

@ -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;

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

@ -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;

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

@ -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;

2
src/components/cascadeselect/CascadeSelect.vue
View File

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

2
src/components/cascadeselect/CascadeSelectSub.vue
View File

@ -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>