From f429b3466649581ee789ed054ad6703401bf5b0a Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Wed, 16 Oct 2024 11:18:13 +0300 Subject: [PATCH] Improved responsive styles of cascade menus --- .../cascadeselect/style/CascadeSelectStyle.js | 30 +++--------- .../src/contextmenu/style/ContextMenuStyle.js | 47 +++++-------------- .../src/tieredmenu/style/TieredMenuStyle.js | 45 ++++-------------- 3 files changed, 28 insertions(+), 94 deletions(-) diff --git a/packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js b/packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js index e31ee8c2b..575a815e9 100644 --- a/packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js +++ b/packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js @@ -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 = { diff --git a/packages/primevue/src/contextmenu/style/ContextMenuStyle.js b/packages/primevue/src/contextmenu/style/ContextMenuStyle.js index 51935dd4b..12aebc81f 100644 --- a/packages/primevue/src/contextmenu/style/ContextMenuStyle.js +++ b/packages/primevue/src/contextmenu/style/ContextMenuStyle.js @@ -125,46 +125,21 @@ 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 { - position: static; -} - -.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 { - transition: transform 0.2s; - transform: rotate(90deg); -} - -.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')}; + padding-left: ${dt('tieredmenu.submenu.mobile.indent')}; + padding-right: 0; +} + +.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 { + transform: rotate(-90deg); } `; diff --git a/packages/primevue/src/tieredmenu/style/TieredMenuStyle.js b/packages/primevue/src/tieredmenu/style/TieredMenuStyle.js index 0251ac489..059ca554e 100644 --- a/packages/primevue/src/tieredmenu/style/TieredMenuStyle.js +++ b/packages/primevue/src/tieredmenu/style/TieredMenuStyle.js @@ -127,46 +127,21 @@ 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 .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 { - 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-icon { + transition: transform 0.2s; + transform: rotate(90deg); +} + +.p-tieredmenu-mobile .p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon { + transform: rotate(-90deg); } `;