Improved responsive styles of cascade menus

primefaces · Oct 16, 2024 · f429b34 · f429b34
1 parent 33fa3a6
commit f429b34
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 88 deletions.
diff --git a/packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js b/packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js
@@ -192,38 +192,22 @@ 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-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-option-list {
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+    padding-left: ${dt('tieredmenu.submenu.mobile.indent')};
+    padding-right: 0;
 }
 
-.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);
 }
 
 .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 = {

diff --git a/packages/primevue/src/contextmenu/style/ContextMenuStyle.js b/packages/primevue/src/contextmenu/style/ContextMenuStyle.js
@@ -125,47 +125,22 @@ 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);
 }
 
-.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);
 }
-
-.p-contextmenu-mobile .p-contextmenu-submenu {
-    position: static;
-    box-shadow: none;
-    border: 0 none;
-    padding-left: ${dt('contextmenu.submenu.mobile.indent')};
-}
 `;
 
 const classes = {

diff --git a/packages/primevue/src/tieredmenu/style/TieredMenuStyle.js b/packages/primevue/src/tieredmenu/style/TieredMenuStyle.js
@@ -127,47 +127,22 @@ const theme = ({ dt }) => `
     transition: opacity 250ms;
 }
 
-.p-tieredmenu-mobile {
-    position: relative;
-}
-
-.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 {
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+    padding-left: ${dt('tieredmenu.submenu.mobile.indent')};
+    padding-right: 0;
 }
 
-.p-tieredmenu-mobile .p-tieredmenu-submenu .p-tieredmenu-submenu-icon {
+.p-tieredmenu-mobile .p-tieredmenu-submenu-icon {
     transition: transform 0.2s;
     transform: rotate(90deg);
 }
 
-.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);
 }
-
-.p-tieredmenu-mobile .p-tieredmenu-submenu {
-    position: static;
-    box-shadow: none;
-    border: 0 none;
-    padding-left: ${dt('tieredmenu.submenu.mobile.indent')};
-}
 `;
 
 const inlineStyles = {