diff --git a/lib/extensions/megaMenu/MegaMenu.module.css b/lib/extensions/megaMenu/MegaMenu.module.css index e9dee02..e73b558 100644 --- a/lib/extensions/megaMenu/MegaMenu.module.css +++ b/lib/extensions/megaMenu/MegaMenu.module.css @@ -1 +1,435 @@ -:root{--megaMenuNavBackground:#5f6f74;--megaMenuNavHoverBackground:#6f8085;--megaMenuNavOpenBackground:#728388;--megaMenuNavTextColor:#ffffff;--megaMenuNavDividerColor:rgba(255, 255, 255, 0.22);--megaMenuTopNavHeight:34px;--megaMenuPanelWidth:1280px;--megaMenuPanelShadow:0 14px 28px rgba(0, 0, 0, 0.18);--megaMenuZIndex:6000;--megaMenuNavInlinePadding:8px;--megaMenuItemInlinePadding:12px;--megaMenuColumnPaddingX:18px;--megaMenuColumnPaddingY:16px;--megaMenuLinkRadius:2px;--megaMenuColumnCount:4}.skip-link{position:absolute;top:-40px;left:6px;background:var(--themePrimary,[theme:themePrimary,default: #0078d7]);color:var(--white,[theme:white,default: #fff]);padding:8px 12px;text-decoration:none;font-weight:600;border-radius:4px;z-index:10000;transition:top .2s ease}.skip-link:focus{top:6px}#CustomNavigation{position:relative;overflow:visible;z-index:var(--megaMenuZIndex,6000)}.mega-menu-status{padding:8px 14px;border-bottom:1px solid var(--neutralLight,[theme:neutralLight,default: #eaeaea]);background:var(--themeLighterAlt,[theme:themeLighterAlt,default: #eff6fc]);color:var(--neutralPrimary,[theme:neutralPrimary,default: #333]);font-size:13px}.mega-menu-main{position:relative;width:100%;background-color:#5f6f74;background-color:var(--megaMenuNavBackground,#5f6f74);border-bottom:1px solid rgba(0,0,0,.18);box-shadow:none;overflow:visible;z-index:var(--megaMenuZIndex,6000)}.mega-menu-main>ul,.mega-menu-top-level{margin:0 auto;max-width:var(--megaMenuPanelWidth,1280px);background-color:inherit;width:100%;box-sizing:border-box;list-style:none;padding:0 var(--megaMenuNavInlinePadding,8px);padding-inline-start:var(--megaMenuNavInlinePadding,8px);display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:start;justify-content:flex-start;gap:0}.mega-menu-main>ul>li,.mega-menu-top-item{position:static;display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;-ms-flex:0 0 auto;flex:0 0 auto;border-right:1px solid var(--megaMenuNavDividerColor,rgba(255,255,255,.22))}.mega-menu-main>ul>li:last-child,.mega-menu-top-item:last-child{border-right:0}.mega-menu-main>ul>li>.menu-item-text,.mega-menu-main>ul>li>a,.menu-item-link,.menu-item-text{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:var(--megaMenuTopNavHeight,34px);padding:0 var(--megaMenuItemInlinePadding,12px);color:var(--megaMenuNavTextColor,#fff);font-size:12px;font-weight:400;line-height:1;text-decoration:none;background:0 0;border:0;transition:background-color .14s ease,color .14s ease;outline:0;white-space:nowrap}.menu-item-text{cursor:pointer}.menu-item-has-children::after{content:'';width:5px;height:5px;margin-left:8px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-1px) rotate(45deg);transition:transform .14s ease}.menu-item-has-children[aria-expanded=true]::after{transform:translateY(1px) rotate(-135deg)}.mega-menu-top-item.is-active>a,.mega-menu-top-item.is-active>span,.menu-item-link.is-active,.menu-item-text.is-active{background:var(--megaMenuNavOpenBackground,#728388)}.mega-menu-top-item.is-current>a,.mega-menu-top-item.is-current>span,.menu-item-link.is-current,.menu-item-text.is-current{font-weight:600}.mega-menu-main>ul>li:hover>.menu-item-text,.mega-menu-main>ul>li:hover>a,.mega-menu-main>ul>li>a[aria-expanded=true],.mega-menu-main>ul>li>span[aria-expanded=true],.menu-item-link:hover,.menu-item-text:hover{color:var(--megaMenuNavTextColor,#fff);background:var(--megaMenuNavHoverBackground,#6f8085)}.mega-menu-main>ul>li>a[aria-expanded=true],.mega-menu-main>ul>li>span[aria-expanded=true]{background:var(--megaMenuNavOpenBackground,#728388)}.mega-menu-main>ul>li>.menu-item-text:focus,.mega-menu-main>ul>li>a:focus,.menu-item-link:focus,.menu-item-text:focus{color:var(--megaMenuNavTextColor,#fff);background:var(--megaMenuNavOpenBackground,#728388);box-shadow:inset 0 0 0 2px rgba(255,255,255,.65)}.mega-menu{position:absolute;left:0;right:0;top:100%;display:none;visibility:hidden;opacity:0;background-color:#fff;background-color:var(--white,[theme:white,default: #fff]);background-image:none;mix-blend-mode:normal;border:1px solid var(--neutralLight,[theme:neutralLight,default: #eaeaea]);border-top:0;box-shadow:var(--megaMenuPanelShadow,0 14px 28px rgba(0,0,0,.18));max-height:calc(100vh - var(--megaMenuTopNavHeight,34px));isolation:isolate;overflow-y:auto;overflow-x:hidden;z-index:calc(var(--megaMenuZIndex,6000) + 1);transition:opacity .16s ease,visibility .16s ease}.mega-menu-main>ul>li:hover .mega-menu,.mega-menu.js-open{visibility:visible;opacity:1;display:block;background-color:#fff;background-color:var(--white,[theme:white,default: #fff]);background-image:none}.mega-menu-grid{max-width:var(--megaMenuPanelWidth,1280px);background-color:inherit;margin:0 auto;display:-ms-grid;display:grid;-ms-grid-columns:(minmax(0,1fr)) [var];grid-template-columns:repeat(var(--megaMenuColumnCount,4),minmax(0,1fr));gap:0;-ms-grid-row-align:start;align-items:start}.mega-menu-category{min-width:0;padding:var(--megaMenuColumnPaddingY,16px) var(--megaMenuColumnPaddingX,18px) 14px;border-right:1px solid var(--neutralQuaternaryAlt,[theme:neutralQuaternaryAlt,default: #dadada])}.mega-menu-grid>.mega-menu-category:last-child{border-right:0}.mega-menu-category-title,.mega-menu-category>h3{margin:0 0 10px;padding:0;border:0}.mega-menu-category>h3>a,.mega-menu-category>h3>span{display:block;color:var(--neutralPrimary,[theme:neutralPrimary,default: #333]);font-size:13px;font-weight:600;line-height:18px;text-decoration:none}.mega-menu-category.is-active>h3>a,.mega-menu-category.is-active>h3>span,.mega-menu-category>h3>a.is-active,.mega-menu-category>h3>span.is-active{color:var(--neutralPrimary,[theme:neutralPrimary,default: #333])}.mega-menu-category.is-current>h3>a,.mega-menu-category>h3>a.is-current{text-decoration:underline}.mega-menu-category>h3>a:hover{color:var(--neutralPrimary,[theme:neutralPrimary,default: #333]);text-decoration:underline}.mega-menu-category>h3>a:focus{background:var(--themeLighterAlt,[theme:themeLighterAlt,default: #eff6fc]);color:var(--neutralPrimary,[theme:neutralPrimary,default: #333]);border-radius:2px;box-shadow:0 0 0 2px var(--themePrimary,[theme:themePrimary,default: #0078d7]);padding:1px 4px;margin:-1px -4px}.mega-menu-category ul,.mega-menu-links{list-style:none;margin:0;padding-inline-start:0}.mega-menu-category ul li,.mega-menu-links li{margin:0 0 6px}.mega-menu-category ul li:last-child,.mega-menu-links li:last-child{margin-bottom:0}.mega-menu-category ul li a,.mega-menu-links li a{display:block;margin:0;padding:1px 2px;border-radius:var(--megaMenuLinkRadius,2px);color:var(--neutralSecondary,[theme:neutralSecondary,default: #666]);font-size:12px;font-weight:400;line-height:18px;text-decoration:none;transition:background-color .14s ease,color .14s ease,box-shadow .14s ease}.mega-menu-category ul li a.is-active,.mega-menu-category ul li.is-active>a,.mega-menu-links li a.is-active,.mega-menu-links li.is-active>a{color:var(--neutralPrimary,[theme:neutralPrimary,default: #333])}.mega-menu-category ul li a.is-current,.mega-menu-category ul li.is-current>a,.mega-menu-links li a.is-current,.mega-menu-links li.is-current>a{color:var(--neutralPrimary,[theme:neutralPrimary,default: #333]);font-weight:600;text-decoration:underline}.mega-menu-category ul li a:hover,.mega-menu-links li a:hover{background:0 0;color:var(--neutralPrimary,[theme:neutralPrimary,default: #333]);text-decoration:underline}.mega-menu-category ul li a:focus,.mega-menu-links li a:focus{background:var(--themeLighterAlt,[theme:themeLighterAlt,default: #eff6fc]);color:var(--neutralPrimary,[theme:neutralPrimary,default: #333]);box-shadow:0 0 0 2px var(--themePrimary,[theme:themePrimary,default: #0078d7]);outline:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (max-width:1024px){.mega-menu-grid{-ms-grid-columns:(minmax(200px,1fr)) [auto-fit];grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.mega-menu-category{padding:14px 16px 12px}}@media (max-width:767px){.mega-menu-main>ul,.mega-menu-top-level{padding:0 6px;padding-inline-start:6px;-ms-flex-wrap:wrap;flex-wrap:wrap}.mega-menu-main>ul>li,.mega-menu-top-item{border-right:0}.mega-menu-main>ul>li>.menu-item-text,.mega-menu-main>ul>li>a,.menu-item-link,.menu-item-text{min-height:36px;padding:0 10px;font-size:12px}.mega-menu{border-left:0;border-right:0}.mega-menu-grid{-ms-grid-columns:1fr;grid-template-columns:1fr}.mega-menu-category{padding:14px 12px;border-right:0;border-bottom:1px solid var(--neutralQuaternaryAlt,[theme:neutralQuaternaryAlt,default: #dadada])}.mega-menu-grid>.mega-menu-category:last-child{border-bottom:0}}@media (prefers-reduced-motion:reduce){.mega-menu,.mega-menu-category ul li a,.mega-menu-links li a,.mega-menu-main>ul>li>.menu-item-text,.mega-menu-main>ul>li>a,.menu-item-has-children::after,.menu-item-link,.menu-item-text,.skip-link{transition:none}}@media (prefers-contrast:high){.mega-menu-category ul li a:focus,.mega-menu-category>h3>a:focus,.mega-menu-links li a:focus,.mega-menu-main>ul>li>.menu-item-text:focus,.mega-menu-main>ul>li>a:focus,.menu-item-link:focus,.menu-item-text:focus{outline:2px solid;outline-offset:2px;box-shadow:none}} \ No newline at end of file +:root { + --megaMenuNavBackground: #5f6f74; + --megaMenuNavHoverBackground: #6f8085; + --megaMenuNavOpenBackground: #728388; + --megaMenuNavTextColor: #ffffff; + --megaMenuNavDividerColor: rgba(255, 255, 255, 0.22); + --megaMenuTopNavHeight: 34px; + --megaMenuPanelWidth: 1280px; + --megaMenuPanelShadow: 0 14px 28px rgba(0, 0, 0, 0.18); + --megaMenuZIndex: 6000; + --megaMenuNavInlinePadding: 8px; + --megaMenuItemInlinePadding: 12px; + --megaMenuColumnPaddingX: 18px; + --megaMenuColumnPaddingY: 16px; + --megaMenuLinkRadius: 2px; + --megaMenuColumnCount: 4 +} + +.skip-link { + position: absolute; + top: -40px; + left: 6px; + background: var(--themePrimary, [theme:themePrimary, default: #0078d7]); + color: var(--white, [theme:white, default: #fff]); + padding: 8px 12px; + text-decoration: none; + font-weight: 600; + border-radius: 4px; + z-index: 10000; + transition: top .2s ease +} + +.skip-link:focus { + top: 6px +} + +#CustomNavigation { + position: relative; + overflow: visible; + z-index: var(--megaMenuZIndex, 6000) +} + +.mega-menu-status { + padding: 8px 14px; + border-bottom: 1px solid var(--neutralLight, [theme:neutralLight, default: #eaeaea]); + background: var(--themeLighterAlt, [theme:themeLighterAlt, default: #eff6fc]); + color: var(--neutralPrimary, [theme:neutralPrimary, default: #333]); + font-size: 13px +} + +.mega-menu-main { + position: relative; + width: 100%; + background-color: #5f6f74; + background-color: var(--megaMenuNavBackground, #5f6f74); + border-bottom: 1px solid rgba(0, 0, 0, .18); + box-shadow: none; + overflow: visible; + z-index: var(--megaMenuZIndex, 6000) +} + +.mega-menu-main>ul, +.mega-menu-top-level { + margin: 0 auto; + max-width: var(--megaMenuPanelWidth, 1280px); + background-color: inherit; + width: 100%; + box-sizing: border-box; + list-style: none; + padding: 0 var(--megaMenuNavInlinePadding, 8px); + padding-inline-start: var(--megaMenuNavInlinePadding, 8px); + display: -ms-flexbox; + display: flex; + -ms-flex-align: stretch; + align-items: stretch; + -ms-flex-pack: start; + justify-content: flex-start; + gap: 0 +} + +.mega-menu-main>ul>li, +.mega-menu-top-item { + position: static; + display: -ms-flexbox; + display: flex; + -ms-flex-align: stretch; + align-items: stretch; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + border-right: 1px solid var(--megaMenuNavDividerColor, rgba(255, 255, 255, .22)) +} + +.mega-menu-main>ul>li:last-child, +.mega-menu-top-item:last-child { + border-right: 0 +} + +.mega-menu-main>ul>li>.menu-item-text, +.mega-menu-main>ul>li>a, +.menu-item-link, +.menu-item-text { + position: relative; + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + min-height: var(--megaMenuTopNavHeight, 34px); + padding: 0 var(--megaMenuItemInlinePadding, 12px); + color: var(--megaMenuNavTextColor, #fff); + font-size: 12px; + font-weight: 400; + line-height: 1; + text-decoration: none; + background: 0 0; + border: 0; + transition: background-color .14s ease, color .14s ease; + outline: 0; + white-space: nowrap +} + +.menu-item-text { + cursor: pointer +} + +.menu-item-has-children::after { + content: ''; + width: 5px; + height: 5px; + margin-left: 8px; + border-right: 1px solid currentColor; + border-bottom: 1px solid currentColor; + transform: translateY(-1px) rotate(45deg); + transition: transform .14s ease +} + +.menu-item-has-children[aria-expanded=true]::after { + transform: translateY(1px) rotate(-135deg) +} + +.mega-menu-top-item.is-active>a, +.mega-menu-top-item.is-active>span, +.menu-item-link.is-active, +.menu-item-text.is-active { + background: var(--megaMenuNavOpenBackground, #728388) +} + +.mega-menu-top-item.is-current>a, +.mega-menu-top-item.is-current>span, +.menu-item-link.is-current, +.menu-item-text.is-current { + font-weight: 600 +} + +.mega-menu-main>ul>li:hover>.menu-item-text, +.mega-menu-main>ul>li:hover>a, +.mega-menu-main>ul>li>a[aria-expanded=true], +.mega-menu-main>ul>li>span[aria-expanded=true], +.menu-item-link:hover, +.menu-item-text:hover { + color: var(--megaMenuNavTextColor, #fff); + background: var(--megaMenuNavHoverBackground, #6f8085) +} + +.mega-menu-main>ul>li>a[aria-expanded=true], +.mega-menu-main>ul>li>span[aria-expanded=true] { + background: var(--megaMenuNavOpenBackground, #728388) +} + +.mega-menu-main>ul>li>.menu-item-text:focus, +.mega-menu-main>ul>li>a:focus, +.menu-item-link:focus, +.menu-item-text:focus { + color: var(--megaMenuNavTextColor, #fff); + background: var(--megaMenuNavOpenBackground, #728388); + box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .65) +} + +.mega-menu { + position: absolute; + left: 0; + right: 0; + top: 100%; + display: none; + visibility: hidden; + opacity: 0; + background-color: #fff; + background-color: var(--white, [theme:white, default: #fff]); + background-image: none; + mix-blend-mode: normal; + border: 1px solid var(--neutralLight, [theme:neutralLight, default: #eaeaea]); + border-top: 0; + box-shadow: var(--megaMenuPanelShadow, 0 14px 28px rgba(0, 0, 0, .18)); + max-height: calc(100vh - var(--megaMenuTopNavHeight, 34px)); + isolation: isolate; + overflow-y: auto; + overflow-x: hidden; + z-index: calc(var(--megaMenuZIndex, 6000) + 1); + transition: opacity .16s ease, visibility .16s ease +} + +.mega-menu-main>ul>li:hover .mega-menu, +.mega-menu.js-open { + visibility: visible; + opacity: 1; + display: block; + background-color: #fff; + background-color: var(--white, [theme:white, default: #fff]); + background-image: none +} + +.mega-menu-grid { + max-width: var(--megaMenuPanelWidth, 1280px); + background-color: inherit; + margin: 0 auto; + display: -ms-grid; + display: grid; + -ms-grid-columns: (minmax(0, 1fr)) [var]; + grid-template-columns: repeat(var(--megaMenuColumnCount, 4), minmax(0, 1fr)); + gap: 0; + -ms-grid-row-align: start; + align-items: start +} + +.mega-menu-category { + min-width: 0; + padding: var(--megaMenuColumnPaddingY, 16px) var(--megaMenuColumnPaddingX, 18px) 14px; + border-right: 1px solid var(--neutralQuaternaryAlt, [theme:neutralQuaternaryAlt, default: #dadada]) +} + +.mega-menu-grid>.mega-menu-category:last-child { + border-right: 0 +} + +.mega-menu-category-title, +.mega-menu-category>h3 { + margin: 0 0 10px; + padding: 0; + border: 0 +} + +.mega-menu-category>h3>a, +.mega-menu-category>h3>span { + display: block; + color: var(--neutralPrimary, [theme:neutralPrimary, default: #333]); + font-size: 13px; + font-weight: 600; + line-height: 18px; + text-decoration: none +} + +.mega-menu-category.is-active>h3>a, +.mega-menu-category.is-active>h3>span, +.mega-menu-category>h3>a.is-active, +.mega-menu-category>h3>span.is-active { + color: var(--neutralPrimary, [theme:neutralPrimary, default: #333]) +} + +.mega-menu-category.is-current>h3>a, +.mega-menu-category>h3>a.is-current { + text-decoration: underline +} + +.mega-menu-category>h3>a:hover { + color: var(--neutralPrimary, [theme:neutralPrimary, default: #333]); + text-decoration: underline +} + +.mega-menu-category>h3>a:focus { + background: var(--themeLighterAlt, [theme:themeLighterAlt, default: #eff6fc]); + color: var(--neutralPrimary, [theme:neutralPrimary, default: #333]); + border-radius: 2px; + box-shadow: 0 0 0 2px var(--themePrimary, [theme:themePrimary, default: #0078d7]); + padding: 1px 4px; + margin: -1px -4px +} + +.mega-menu-category ul, +.mega-menu-links { + list-style: none; + margin: 0; + padding-inline-start: 0 +} + +.mega-menu-category ul li, +.mega-menu-links li { + margin: 0 0 6px +} + +.mega-menu-category ul li:last-child, +.mega-menu-links li:last-child { + margin-bottom: 0 +} + +.mega-menu-category ul li a, +.mega-menu-links li a { + display: block; + margin: 0; + padding: 1px 2px; + border-radius: var(--megaMenuLinkRadius, 2px); + color: var(--neutralSecondary, [theme:neutralSecondary, default: #666]); + font-size: 12px; + font-weight: 400; + line-height: 18px; + text-decoration: none; + transition: background-color .14s ease, color .14s ease, box-shadow .14s ease +} + +.mega-menu-category ul li a.is-active, +.mega-menu-category ul li.is-active>a, +.mega-menu-links li a.is-active, +.mega-menu-links li.is-active>a { + color: var(--neutralPrimary, [theme:neutralPrimary, default: #333]) +} + +.mega-menu-category ul li a.is-current, +.mega-menu-category ul li.is-current>a, +.mega-menu-links li a.is-current, +.mega-menu-links li.is-current>a { + color: var(--neutralPrimary, [theme:neutralPrimary, default: #333]); + font-weight: 600; + text-decoration: underline +} + +.mega-menu-category ul li a:hover, +.mega-menu-links li a:hover { + background: 0 0; + color: var(--neutralPrimary, [theme:neutralPrimary, default: #333]); + text-decoration: underline +} + +.mega-menu-category ul li a:focus, +.mega-menu-links li a:focus { + background: var(--themeLighterAlt, [theme:themeLighterAlt, default: #eff6fc]); + color: var(--neutralPrimary, [theme:neutralPrimary, default: #333]); + box-shadow: 0 0 0 2px var(--themePrimary, [theme:themePrimary, default: #0078d7]); + outline: 0 +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0 +} + +@media (max-width:1024px) { + .mega-menu-grid { + -ms-grid-columns: (minmax(200px, 1fr)) [auto-fit]; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) + } + + .mega-menu-category { + padding: 14px 16px 12px + } +} + +@media (max-width:767px) { + + .mega-menu-main>ul, + .mega-menu-top-level { + padding: 0 6px; + padding-inline-start: 6px; + -ms-flex-wrap: wrap; + flex-wrap: wrap + } + + .mega-menu-main>ul>li, + .mega-menu-top-item { + border-right: 0 + } + + .mega-menu-main>ul>li>.menu-item-text, + .mega-menu-main>ul>li>a, + .menu-item-link, + .menu-item-text { + min-height: 36px; + padding: 0 10px; + font-size: 12px + } + + .mega-menu { + border-left: 0; + border-right: 0 + } + + .mega-menu-grid { + -ms-grid-columns: 1fr; + grid-template-columns: 1fr + } + + .mega-menu-category { + padding: 14px 12px; + border-right: 0; + border-bottom: 1px solid var(--neutralQuaternaryAlt, [theme:neutralQuaternaryAlt, default: #dadada]) + } + + .mega-menu-grid>.mega-menu-category:last-child { + border-bottom: 0 + } +} + +@media (prefers-reduced-motion:reduce) { + + .mega-menu, + .mega-menu-category ul li a, + .mega-menu-links li a, + .mega-menu-main>ul>li>.menu-item-text, + .mega-menu-main>ul>li>a, + .menu-item-has-children::after, + .menu-item-link, + .menu-item-text, + .skip-link { + transition: none + } +} + +@media (prefers-contrast:high) { + + .mega-menu-category ul li a:focus, + .mega-menu-category>h3>a:focus, + .mega-menu-links li a:focus, + .mega-menu-main>ul>li>.menu-item-text:focus, + .mega-menu-main>ul>li>a:focus, + .menu-item-link:focus, + .menu-item-text:focus { + outline: 2px solid; + outline-offset: 2px; + box-shadow: none + } +} \ No newline at end of file diff --git a/src/extensions/megaMenu/MegaMenu.module.scss b/src/extensions/megaMenu/MegaMenu.module.scss index d2079a7..0360061 100644 --- a/src/extensions/megaMenu/MegaMenu.module.scss +++ b/src/extensions/megaMenu/MegaMenu.module.scss @@ -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 { diff --git a/tests/validate-static-assets.js b/tests/validate-static-assets.js index 2edd377..809a251 100644 --- a/tests/validate-static-assets.js +++ b/tests/validate-static-assets.js @@ -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.');