SPFx-Projekte/Megamenu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: Update MegaMenu styles to use theme variables and enhance static asset validation

Browse Source
This commit is contained in:
Torsten Brendgen
2026-07-21 22:03:29 +02:00
parent 50b85468f1
commit f58c6f6135
3 changed files with 503 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

436
lib/extensions/megaMenu/MegaMenu.module.css
View File

File diff suppressed because one or more lines are too long

104
src/extensions/megaMenu/MegaMenu.module.scss
View File

@@ -1,16 +1,16 @@
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
$white: var(--white, #{$ms-color-white});
$neutral-lighter: var(--neutralLighter, #{$ms-color-neutralLighter});
$neutral-light: var(--neutralLight, #{$ms-color-neutralLight});
$neutral-tertiary: var(--neutralTertiary, #{$ms-color-neutralTertiary});
$neutral-secondary: var(--neutralSecondary, #{$ms-color-neutralSecondary});
$neutral-primary: var(--neutralPrimary, #{$ms-color-neutralPrimary});
$theme-primary: var(--themePrimary, #{$ms-color-themePrimary});
$theme-dark: var(--themeDark, #{$ms-color-themeDark});
$theme-lighter-alt: var(--themeLighterAlt, #{$ms-color-themeLighterAlt});
$menu-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
$menu-layer: var(--megaMenuZIndex, 6000);
$white: "[theme: white, default: #ffffff]";
$neutralLighter: "[theme: neutralLighter, default: #f4f4f4]";
$neutralLight: "[theme: neutralLight, default: #eaeaea]";
$neutralTertiary: "[theme: neutralTertiary, default: #a6a6a6]";
$neutralSecondary: "[theme: neutralSecondary, default: #666666]";
$neutralPrimary: "[theme: neutralPrimary, default: #333333]";
$themePrimary: "[theme: themePrimary, default: #0078d7]";
$themeDark: "[theme: themeDark, default: #005a9e]";
$themeLighterAlt: "[theme: themeLighterAlt, default: #eff6fc]";
$menuShadow: 0 8px 24px rgba(0, 0, 0, 0.16);
$menuLayer: var(--megaMenuZIndex, 6000);
:global {
:root {
@@ -24,16 +24,16 @@ $menu-layer: var(--megaMenuZIndex, 6000);
position: relative;
width: 100%;
overflow: visible;
z-index: $menu-layer;
z-index: $menuLayer;
font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
}
.mega-menu-status {
box-sizing: border-box;
padding: 10px 24px;
border-bottom: 1px solid $neutral-light;
background: $theme-lighter-alt;
color: $neutral-primary;
border-bottom: 1px solid $neutralLight;
background: $themeLighterAlt;
color: $neutralPrimary;
font-size: 13px;
}
@@ -43,11 +43,11 @@ $menu-layer: var(--megaMenuZIndex, 6000);
width: 100%;
min-height: var(--megaMenuBarHeight, 44px);
overflow: visible;
border-top: 1px solid $neutral-light;
border-bottom: 1px solid $neutral-light;
border-top: 1px solid $neutralLight;
border-bottom: 1px solid $neutralLight;
background: $white;
color: $neutral-primary;
z-index: $menu-layer;
color: $neutralPrimary;
z-index: $menuLayer;
}
.mega-menu-top-level {
@@ -88,7 +88,7 @@ $menu-layer: var(--megaMenuZIndex, 6000);
padding: 0 16px;
border: 0;
background: transparent;
color: $neutral-primary;
color: $neutralPrimary;
cursor: pointer;
font-size: 14px;
font-weight: 400;
@@ -110,7 +110,7 @@ $menu-layer: var(--megaMenuZIndex, 6000);
padding: 0;
border: 0;
background: transparent;
color: $neutral-primary;
color: $neutralPrimary;
cursor: pointer;
}
@@ -132,8 +132,8 @@ $menu-layer: var(--megaMenuZIndex, 6000);
.menu-item-text:hover,
.menu-item-toggle:hover,
.menu-item-toggle[aria-expanded='true'] {
background: $neutral-lighter;
color: $neutral-primary;
background: $neutralLighter;
color: $neutralPrimary;
text-decoration: none;
}
@@ -147,12 +147,12 @@ $menu-layer: var(--megaMenuZIndex, 6000);
bottom: 0;
left: 12px;
height: 2px;
background: $theme-primary;
background: $themePrimary;
}
.mega-menu-top-item.is-current > .menu-item-link,
.mega-menu-top-item.is-current > .menu-item-text {
color: $theme-dark;
color: $themeDark;
font-weight: 600;
}
@@ -162,7 +162,7 @@ $menu-layer: var(--megaMenuZIndex, 6000);
.mega-menu-mobile-toggle:focus,
.mega-menu-category a:focus,
.flyout-link:focus {
outline: 2px solid $theme-primary;
outline: 2px solid $themePrimary;
outline-offset: -2px;
}
@@ -175,12 +175,12 @@ $menu-layer: var(--megaMenuZIndex, 6000);
box-sizing: border-box;
visibility: hidden;
opacity: 0;
border: 1px solid $neutral-light;
border: 1px solid $neutralLight;
border-top: 0;
background: $white;
box-shadow: $menu-shadow;
color: $neutral-primary;
z-index: calc(#{$menu-layer} + 1);
box-shadow: $menuShadow;
color: $neutralPrimary;
z-index: calc(#{$menuLayer} + 1);
}
.mega-menu.js-open {
@@ -208,7 +208,7 @@ $menu-layer: var(--megaMenuZIndex, 6000);
.mega-menu-description {
margin: -4px 0 12px;
color: $neutral-secondary;
color: $neutralSecondary;
font-size: 12px;
line-height: 18px;
}
@@ -216,13 +216,13 @@ $menu-layer: var(--megaMenuZIndex, 6000);
.mega-menu-category-title {
margin: 0 0 10px;
padding: 0 0 8px;
border-bottom: 1px solid $neutral-light;
border-bottom: 1px solid $neutralLight;
}
.mega-menu-category-title > a,
.mega-menu-category-title > span {
display: block;
color: $neutral-primary;
color: $neutralPrimary;
font-size: 14px;
font-weight: 600;
line-height: 20px;
@@ -230,7 +230,7 @@ $menu-layer: var(--megaMenuZIndex, 6000);
}
.mega-menu-category-title > a:hover {
color: $theme-primary;
color: $themePrimary;
text-decoration: underline;
}
@@ -250,21 +250,21 @@ $menu-layer: var(--megaMenuZIndex, 6000);
margin: 0 -8px;
padding: 6px 8px;
border-radius: 2px;
color: $neutral-secondary;
color: $neutralSecondary;
font-size: 14px;
line-height: 20px;
text-decoration: none;
}
.mega-menu-links a:hover {
background: $neutral-lighter;
color: $neutral-primary;
background: $neutralLighter;
color: $neutralPrimary;
text-decoration: none;
}
.mega-menu-links a.is-current,
.mega-menu-links li.is-current > a {
color: $theme-dark;
color: $themeDark;
font-weight: 600;
}
@@ -272,7 +272,7 @@ $menu-layer: var(--megaMenuZIndex, 6000);
right: auto;
width: var(--megaMenuFlyoutWidth, 288px);
min-width: 240px;
border-top: 1px solid $neutral-light;
border-top: 1px solid $neutralLight;
}
.flyout-list {
@@ -301,7 +301,7 @@ $menu-layer: var(--megaMenuZIndex, 6000);
padding: 8px 36px 8px 16px;
border: 0;
background: $white;
color: $neutral-primary;
color: $neutralPrimary;
cursor: pointer;
font-size: 14px;
line-height: 20px;
@@ -312,13 +312,13 @@ $menu-layer: var(--megaMenuZIndex, 6000);
.flyout-link:hover,
.flyout-item:focus-within > .flyout-link,
.flyout-item.is-active > .flyout-link {
background: $neutral-lighter;
color: $neutral-primary;
background: $neutralLighter;
color: $neutralPrimary;
text-decoration: none;
}
.flyout-item.is-current > .flyout-link {
color: $theme-dark;
color: $themeDark;
font-weight: 600;
}
@@ -334,7 +334,7 @@ $menu-layer: var(--megaMenuZIndex, 6000);
padding: 0;
border: 0;
background: transparent;
color: $neutral-primary;
color: $neutralPrimary;
cursor: pointer;
}
@@ -349,7 +349,7 @@ $menu-layer: var(--megaMenuZIndex, 6000);
}
.flyout-toggle:focus {
outline: 2px solid $theme-primary;
outline: 2px solid $themePrimary;
outline-offset: -2px;
}
@@ -359,9 +359,9 @@ $menu-layer: var(--megaMenuZIndex, 6000);
left: 100%;
display: none;
width: var(--megaMenuFlyoutWidth, 288px);
border: 1px solid $neutral-light;
box-shadow: $menu-shadow;
z-index: calc(#{$menu-layer} + 2);
border: 1px solid $neutralLight;
box-shadow: $menuShadow;
z-index: calc(#{$menuLayer} + 2);
}
.flyout-item:hover > .flyout-level-3,
@@ -402,7 +402,7 @@ $menu-layer: var(--megaMenuZIndex, 6000);
padding: 0 16px;
border: 0;
background: $white;
color: $neutral-primary;
color: $neutralPrimary;
cursor: pointer;
font: inherit;
font-weight: 600;
@@ -436,7 +436,7 @@ $menu-layer: var(--megaMenuZIndex, 6000);
display: none;
flex-direction: column;
padding: 0;
border-top: 1px solid $neutral-light;
border-top: 1px solid $neutralLight;
}
.mega-menu-main.is-mobile-open .mega-menu-top-level {
@@ -448,7 +448,7 @@ $menu-layer: var(--megaMenuZIndex, 6000);
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 44px;
border-bottom: 1px solid $neutral-light;
border-bottom: 1px solid $neutralLight;
}
.menu-item-link,
@@ -461,7 +461,7 @@ $menu-layer: var(--megaMenuZIndex, 6000);
.menu-item-toggle {
width: 44px;
margin: 0;
border-left: 1px solid $neutral-light;
border-left: 1px solid $neutralLight;
}
.mega-menu {

17
tests/validate-static-assets.js
View File

@@ -40,5 +40,20 @@ validatePreview('preview/flyout-menu-preview.html');
validateStyle('classic/megamenu-classic.css');
validateStyle('src/extensions/megaMenu/MegaMenu.module.scss');
console.log('Static MegaMenu asset tests passed.');
var modernStyles = read('src/extensions/megaMenu/MegaMenu.module.scss');
[
'white',
'neutralLighter',
'neutralLight',
'neutralTertiary',
'neutralSecondary',
'neutralPrimary',
'themePrimary',
'themeDark',
'themeLighterAlt'
].forEach(function (themeSlot) {
assert('modern styles use SharePoint theme slot ' + themeSlot,
modernStyles.indexOf('[theme: ' + themeSlot + ', default:') >= 0);
});
console.log('Static MegaMenu asset tests passed.');