feat: Update MegaMenu styles and grid layout for improved responsiveness
This commit is contained in:
@@ -187,7 +187,7 @@ $menuLayer: var(--megaMenuZIndex, 6000);
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
border: 1px solid $neutralLight;
|
border: 1px solid #edebe9;
|
||||||
border-top: 0;
|
border-top: 0;
|
||||||
background: $white;
|
background: $white;
|
||||||
box-shadow: $menuShadow;
|
box-shadow: $menuShadow;
|
||||||
@@ -203,11 +203,11 @@ $menuLayer: var(--megaMenuZIndex, 6000);
|
|||||||
|
|
||||||
.mega-menu-grid {
|
.mega-menu-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(var(--megaMenuColumnCount, 4), minmax(0, 1fr));
|
grid-template-columns: repeat(var(--megaMenuColumnCount, 6), minmax(0, 1fr));
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: var(--megaMenuContentWidth, 1200px);
|
max-width: var(--megaMenuContentWidth, 1200px);
|
||||||
margin: 0 auto;
|
margin: 0;
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
gap: 24px 32px;
|
gap: 24px 32px;
|
||||||
background: $white;
|
background: $white;
|
||||||
|
|||||||
@@ -726,7 +726,7 @@ export class MegaMenuRenderer {
|
|||||||
|
|
||||||
private getColumnCount(items?: IMenuItem[]): string {
|
private getColumnCount(items?: IMenuItem[]): string {
|
||||||
const itemCount = items ? items.length : 0;
|
const itemCount = items ? items.length : 0;
|
||||||
const columnCount = Math.min(Math.max(itemCount, 1), 4);
|
const columnCount = Math.min(Math.max(itemCount, 1), 6);
|
||||||
return columnCount.toString();
|
return columnCount.toString();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user