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

Improved responsive styles of cascade menus

pull/6596/head
Cagatay Civici 2024-10-16 11:18:13 +03:00
parent 33fa3a643d
commit f429b34666
3 changed files with 28 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js
View File

@ -192,24 +192,15 @@ const theme = ({ dt }) => `
color: ${dt('cascadeselect.option.icon.color')}; color: ${dt('cascadeselect.option.icon.color')};
} }
.p-cascadeselect-mobile-active .p-cascadeselect-option-content { .p-cascadeselect-mobile-active .p-cascadeselect-option-list {
border-radius: ${dt('cascadeselect.option.border.radius')}; 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 { .p-cascadeselect-mobile-active .p-cascadeselect-group-icon {
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 {
transition: transform 0.2s; transition: transform 0.2s;
transform: rotate(90deg); 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 { .p-cascadeselect-mobile-active .p-cascadeselect-option-active > .p-cascadeselect-option-content .p-cascadeselect-group-icon {
transform: rotate(-90deg); 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 = { const inlineStyles = {

37
packages/primevue/src/contextmenu/style/ContextMenuStyle.js
View File

@ -125,33 +125,15 @@ const theme = ({ dt }) => `
transition: opacity 250ms; transition: opacity 250ms;
} }
.p-contextmenu-mobile { .p-contextmenu-mobile .p-contextmenu-submenu {
position: relative;
}
.p-contextmenu-mobile .p-contextmenu-button {
display: flex;
}
.p-contextmenu-mobile .p-contextmenu-root-list .p-contextmenu-item {
position: static; 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 { .p-contextmenu-mobile .p-contextmenu-submenu-icon {
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 {
transition: transform 0.2s; transition: transform 0.2s;
transform: rotate(90deg); 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 { .p-contextmenu-mobile .p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-submenu-icon {
transform: rotate(-90deg); 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 = { const classes = {

39
packages/primevue/src/tieredmenu/style/TieredMenuStyle.js
View File

@ -127,33 +127,15 @@ const theme = ({ dt }) => `
transition: opacity 250ms; transition: opacity 250ms;
} }
.p-tieredmenu-mobile { .p-tieredmenu-mobile .p-tieredmenu-submenu {
position: relative; position: static;
box-shadow: none;
border: 0 none;
padding-left: ${dt('tieredmenu.submenu.mobile.indent')};
padding-right: 0;
} }
.p-tieredmenu-mobile .p-tieredmenu-button { .p-tieredmenu-mobile .p-tieredmenu-submenu-icon {
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 {
transition: transform 0.2s; transition: transform 0.2s;
transform: rotate(90deg); 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 { .p-tieredmenu-mobile .p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon {
transform: rotate(-90deg); 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 = { const inlineStyles = {