Migrated cascadeselect
Cagatay Civici
parent
50fd75d6c8
commit
f548785832
|
|
@ -80,7 +80,7 @@ export default {
|
|||
|
||||
.p-cascadeselect-label-empty {
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.p-fluid .p-cascadeselect {
|
||||
|
|
@ -90,5 +90,104 @@ export default {
|
|||
.p-fluid .p-cascadeselect .p-cascadeselect-label {
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
.p-cascadeselect-panel {
|
||||
background: ${dt('cascadeselect.overlay.background')};
|
||||
color: ${dt('cascadeselect.overlay.color')};
|
||||
border: 1px solid ${dt('cascadeselect.overlay.border.color')};
|
||||
border-radius: ${dt('rounded.base')};
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.p-cascadeselect .p-cascadeselect-panel {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.p-cascadeselect-sublist {
|
||||
position: absolute;
|
||||
min-width: 100%;
|
||||
z-index: 1;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.p-cascadeselect-items {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
min-width: 100%;
|
||||
padding: 0.25rem 0.25rem;
|
||||
}
|
||||
|
||||
.p-cascadeselect-item {
|
||||
cursor: pointer;
|
||||
font-weight: normal;
|
||||
white-space: nowrap;
|
||||
margin: 2px 0;
|
||||
border: 0 none;
|
||||
color: ${dt('cascadeselect.item.color')};
|
||||
background: transparent;
|
||||
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
|
||||
border-radius: ${dt('rounded.sm')};
|
||||
}
|
||||
|
||||
.p-cascadeselect-item:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.p-cascadeselect-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
|
||||
background: ${dt('cascadeselect.item.focus.background')};
|
||||
color: ${dt('cascadeselect.item.focus.color')};
|
||||
}
|
||||
|
||||
.p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus .p-cascadeselect-group-icon {
|
||||
color: ${dt('cascadeselect.item.icon.focus.color')};
|
||||
}
|
||||
|
||||
.p-cascadeselect-item.p-highlight {
|
||||
background: ${dt('cascadeselect.item.selected.background')};
|
||||
color: ${dt('cascadeselect.item.selected.color')};
|
||||
}
|
||||
|
||||
.p-cascadeselect-item.p-highlight.p-focus {
|
||||
background: ${dt('cascadeselect.item.selected.focus.background')};
|
||||
color: ${dt('cascadeselect.item.selected.focus.color')};
|
||||
}
|
||||
|
||||
.p-cascadeselect-item-active {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.p-cascadeselect-item-active > .p-cascadeselect-sublist {
|
||||
display: block;
|
||||
left: 100%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.p-cascadeselect-item-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding: 0.5rem 0.75rem;
|
||||
}
|
||||
|
||||
.p-cascadeselect-group-icon {
|
||||
margin-left: auto;
|
||||
font-size: 0.875rem;
|
||||
color: ${dt('cascadeselect.item.icon.color')};
|
||||
}
|
||||
|
||||
.p-cascadeselect-enter-from,
|
||||
.p-cascadeselect-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.p-cascadeselect-enter-active {
|
||||
transition: opacity 150ms;
|
||||
}
|
||||
`
|
||||
};
|
||||
|
|
|
|||
|
|
@ -17,11 +17,47 @@ export default {
|
|||
light: {
|
||||
toggle: {
|
||||
color: '{surface.400}'
|
||||
},
|
||||
overlay: {
|
||||
background: '{surface.0}',
|
||||
borderColor: '{surface.200}',
|
||||
color: '{surface.700}'
|
||||
},
|
||||
item: {
|
||||
focusBackground: '{surface.100}',
|
||||
selectedBackground: '{highlight.background}',
|
||||
selectedFocusBackground: '{highlight.focus.background}',
|
||||
color: '{surface.700}',
|
||||
focusColor: '{surface.800}',
|
||||
selectedColor: '{highlight.color}',
|
||||
selectedFocusColor: '{highlight.focus.color}',
|
||||
icon: {
|
||||
color: '{surface.400}',
|
||||
focusColor: '{surface.500}'
|
||||
}
|
||||
}
|
||||
},
|
||||
dark: {
|
||||
toggle: {
|
||||
color: '{surface.400}'
|
||||
},
|
||||
overlay: {
|
||||
background: '{surface.900}',
|
||||
borderColor: '{surface.700}',
|
||||
color: '{surface.0}'
|
||||
},
|
||||
item: {
|
||||
focusBackground: '{surface.800}',
|
||||
selectedBackground: '{highlight.background}',
|
||||
selectedFocusBackground: '{highlight.focus.background}',
|
||||
color: '{surface.0}',
|
||||
focusColor: '{surface.0}',
|
||||
selectedColor: '{highlight.color}',
|
||||
selectedFocusColor: '{highlight.focus.color}',
|
||||
icon: {
|
||||
color: '{surface.500}',
|
||||
focusColor: '{surface.400}'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ export default {
|
|||
item: {
|
||||
focusBackground: '{surface.100}',
|
||||
selectedBackground: '{highlight.background}',
|
||||
selectedBackgroundFocus: '{highlight.focus.background}',
|
||||
selectedFocusBackground: '{highlight.focus.background}',
|
||||
color: '{surface.700}',
|
||||
focusColor: '{surface.800}',
|
||||
selectedColor: '{highlight.color}',
|
||||
|
|
@ -62,7 +62,7 @@ export default {
|
|||
item: {
|
||||
focusBackground: '{surface.800}',
|
||||
selectedBackground: '{highlight.background}',
|
||||
selectedBackgroundFocus: '{highlight.focus.background}',
|
||||
selectedFocusBackground: '{highlight.focus.background}',
|
||||
color: '{surface.0}',
|
||||
focusColor: '{surface.0}',
|
||||
selectedColor: '{highlight.color}',
|
||||
|
|
|
|||
Loading…
Reference in New Issue