Improved responsive styles of cascade menus
parent
33fa3a643d
commit
f429b34666
|
@ -192,24 +192,15 @@ const theme = ({ dt }) => `
|
|||
color: ${dt('cascadeselect.option.icon.color')};
|
||||
}
|
||||
|
||||
.p-cascadeselect-mobile-active .p-cascadeselect-option-content {
|
||||
border-radius: ${dt('cascadeselect.option.border.radius')};
|
||||
.p-cascadeselect-mobile-active .p-cascadeselect-option-list {
|
||||
position: static;
|
||||
box-shadow: none;
|
||||
border: 0 none;
|
||||
padding-left: ${dt('tieredmenu.submenu.mobile.indent')};
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.p-cascadeselect-mobile-active-active .p-cascadeselect-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.p-cascadeselect-mobile-active .p-cascadeselect-list > .p-cascadeselect-option > .p-cascadeselect-option-content .p-cascadeselect-group-icon {
|
||||
margin-left: auto;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.p-cascadeselect-mobile-active .p-cascadeselect-list .p-cascadeselect-group-icon {
|
||||
.p-cascadeselect-mobile-active .p-cascadeselect-group-icon {
|
||||
transition: transform 0.2s;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
@ -217,13 +208,6 @@ const theme = ({ dt }) => `
|
|||
.p-cascadeselect-mobile-active .p-cascadeselect-option-active > .p-cascadeselect-option-content .p-cascadeselect-group-icon {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.p-cascadeselect-mobile-active .p-cascadeselect-option-list {
|
||||
position: static;
|
||||
box-shadow: none;
|
||||
border: 0 none;
|
||||
padding-left: ${dt('cascadeselect.list.mobile.indent')};
|
||||
}
|
||||
`;
|
||||
|
||||
const inlineStyles = {
|
||||
|
|
|
@ -125,33 +125,15 @@ const theme = ({ dt }) => `
|
|||
transition: opacity 250ms;
|
||||
}
|
||||
|
||||
.p-contextmenu-mobile {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-contextmenu-mobile .p-contextmenu-button {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.p-contextmenu-mobile .p-contextmenu-root-list .p-contextmenu-item {
|
||||
.p-contextmenu-mobile .p-contextmenu-submenu {
|
||||
position: static;
|
||||
box-shadow: none;
|
||||
border: 0 none;
|
||||
padding-left: ${dt('tieredmenu.submenu.mobile.indent')};
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.p-contextmenu-mobile .p-contextmenu-root-list .p-contextmenu-separator {
|
||||
border-top: 1px solid ${dt('contextmenu.separator.border.color')};
|
||||
}
|
||||
|
||||
.p-contextmenu-mobile .p-contextmenu-root-list > .p-contextmenu-item > .p-contextmenu-item-content .p-contextmenu-submenu-icon {
|
||||
margin-left: auto;
|
||||
transition: transform 0.2s;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.p-contextmenu-mobile .p-contextmenu-root-list > .p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-submenu-icon {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.p-contextmenu-mobile .p-contextmenu-submenu .p-contextmenu-submenu-icon {
|
||||
.p-contextmenu-mobile .p-contextmenu-submenu-icon {
|
||||
transition: transform 0.2s;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
@ -159,13 +141,6 @@ const theme = ({ dt }) => `
|
|||
.p-contextmenu-mobile .p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-submenu-icon {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.p-contextmenu-mobile .p-contextmenu-submenu {
|
||||
position: static;
|
||||
box-shadow: none;
|
||||
border: 0 none;
|
||||
padding-left: ${dt('contextmenu.submenu.mobile.indent')};
|
||||
}
|
||||
`;
|
||||
|
||||
const classes = {
|
||||
|
|
|
@ -127,33 +127,15 @@ const theme = ({ dt }) => `
|
|||
transition: opacity 250ms;
|
||||
}
|
||||
|
||||
.p-tieredmenu-mobile {
|
||||
position: relative;
|
||||
.p-tieredmenu-mobile .p-tieredmenu-submenu {
|
||||
position: static;
|
||||
box-shadow: none;
|
||||
border: 0 none;
|
||||
padding-left: ${dt('tieredmenu.submenu.mobile.indent')};
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.p-tieredmenu-mobile .p-tieredmenu-button {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.p-tieredmenu-mobile .p-tieredmenu-root-list > .p-tieredmenu-item > .p-tieredmenu-item-content > .p-tieredmenu-item-link {
|
||||
padding: ${dt('tieredmenu.item.padding')};
|
||||
}
|
||||
|
||||
.p-tieredmenu-mobile .p-tieredmenu-root-list .p-tieredmenu-separator {
|
||||
border-top: 1px solid ${dt('tieredmenu.separator.border.color')};
|
||||
}
|
||||
|
||||
.p-tieredmenu-mobile .p-tieredmenu-root-list > .p-tieredmenu-item > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon {
|
||||
margin-left: auto;
|
||||
transition: transform 0.2s;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.p-tieredmenu-mobile .p-tieredmenu-root-list > .p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.p-tieredmenu-mobile .p-tieredmenu-submenu .p-tieredmenu-submenu-icon {
|
||||
.p-tieredmenu-mobile .p-tieredmenu-submenu-icon {
|
||||
transition: transform 0.2s;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
@ -161,13 +143,6 @@ const theme = ({ dt }) => `
|
|||
.p-tieredmenu-mobile .p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.p-tieredmenu-mobile .p-tieredmenu-submenu {
|
||||
position: static;
|
||||
box-shadow: none;
|
||||
border: 0 none;
|
||||
padding-left: ${dt('tieredmenu.submenu.mobile.indent')};
|
||||
}
|
||||
`;
|
||||
|
||||
const inlineStyles = {
|
||||
|
|
Loading…
Reference in New Issue