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