Please add the following classes to the frame to adapt the frame to various contexts
When the collapsed menu is opened, the "sds-snetFrame" gets the "-hasMenuOpen" class, which shows the fader element.
Add the class "bfm-theme" to the body element.
Add the class "cpb-theme" to the body element.
Deactivate tooltip hints when sidebar navigation is not in collapsed state.
Tooltips should not show when on a touch device. Hint on how to achieve this: here
<div class="sds-snetFrame">
<a href="#frameMain" class="sds-skipNavLink">
Skip to content
</a>
<header class="sds-navTopbar sds-snetFrame__header">
<div class="sds-navTopbar__container">
<nav class="sds-navTopbar__inner navbar navbar-expand">
<div class="sds-navTopbar__alignToMainContent">
<a class="sds-navTopbar__logo navbar-brand" href="#">
<img src="../../media/logos/logo-bcee.svg" class="img-fluid" alt="">
</a>
</div>
<div class="sds-navTopbar__meta sds-textHelper">
<span>S-Net Professionnel</span>
<span class="sds-navTopbar__metaTime">Mercredi, 23. Octobre・10:54</span>
</div>
<div class="sds-navTopbar__collapse navbar-collapse" id="sds-navTopbar__collapse">
<ul class="sds-navTopbar__content navbar-nav">
<li class="sds-navTopbar__item dropdown">
<button type="button" class="sds-btn -iconBtn -secondary100 sds-navTopbar__icon dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="sds-icon sds-icon-bell"></span>
</button>
</li>
<li class="sds-navTopbar__item dropdown">
<button type="button" class="sds-navTopbar__dropdownToggle -avatar dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<div class="sds-avatar centeredBgi -badgeVisible -badgeVisible sds-navTopbar__userDropdownAvatar">
<img class="img-fluid" src="../../media/snet/avatars/nopic/avatarNoPicWoman.svg" alt="">
<span class="sds-avatar__circle">
<span class="sds-icon sds-icon-business"></span>
</span>
</div>
<span class="sds-navTopbar__userDropdownLabel sds-textHelper">Label With Name</span>
<span class="sds-iconCircle" aria-hidden="true">
<span class="sds-icon sds-icon-chevrondown"></span>
</span>
</button>
<div class="sds-userMenu sds-navTopbar__userMenu dropdown-menu dropdown-menu-right">
<div class="sds-userMenu__header d-flex align-items-center">
<div class="sds-avatar centeredBgi -avatarLg -badgeVisible sds-userMenu__avatar">
<img class="img-fluid" src="../../media/snet/avatars/nopic/avatarNoPicWoman.svg" alt="">
<span class="sds-avatar__circle">
<span class="sds-icon sds-icon-business"></span>
</span>
</div>
<div class="sds-userMenu__headerText">
<div class="h3">Jil Schmit Longname</div>
<div class="sds-userMenu__headerMeta sds-textHelper">Espace professionnel</div>
</div>
</div>
<ul class="sds-userMenu__content list-unstyled">
<li class="sds-userMenu__item">
<a href="" class="sds-userMenu__link d-flex align-items-center justify-content-between">
<span class="font-weight-semibold">Mes commandes</span>
<div class="sds-userMenu__itemMeta d-flex align-items-center">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-shoppingbag"></span>
</span>
</div>
</a>
</li>
<li class="sds-userMenu__item">
<a href="" class="sds-userMenu__link d-flex align-items-center justify-content-between">
<span class="font-weight-semibold">Gestion des sociétés</span>
<div class="sds-userMenu__itemMeta d-flex align-items-center">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-business"></span>
</span>
</div>
</a>
</li>
<li class="sds-userMenu__item">
<a href="" class="sds-userMenu__link d-flex align-items-center justify-content-between">
<span class="font-weight-semibold">Paramètres</span>
<div class="sds-userMenu__itemMeta d-flex align-items-center">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-gear"></span>
</span>
</div>
</a>
</li>
<li class="sds-userMenu__item -borderTop">
<a href="" class="sds-userMenu__link d-flex align-items-center justify-content-between">
<span class="font-weight-semibold">Changer compte</span>
<div class="sds-userMenu__itemMeta d-flex align-items-center">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-switch"></span>
</span>
</div>
</a>
</li>
</ul>
<div class="sds-userMenu__footer">
<div class="h4">Votre conseiller</div>
<div class="sds-userMenu__footerRow">
<div class="sds-avatar centeredBgi -avatarXl">
<img class="img-fluid" src="../../media/snet/avatars/avatarBankerMain.png" alt="">
</div>
<div class="sds-userMenu__footerContent">
<div class="font-weight-semibold">Admir SKRIJELJ</div>
<div class="sds-userMenu__footerHelperText sds-textHelperSmall">
Personal Banker • Centre Financier Place de Metz
</div>
<div class="sds-userMenu__footerContactInfo">
<a class="d-block" href="tel:+35240158302">+352 4015-8302</a>
<a class="d-block" href="mailto:a.skrijelj@spuerkeess.lu">adresse.longue.skrijelj@spuerkeess.lu</a>
</div>
</div>
<div class="sds-userMenu__footerRowButtons">
<a href="tel:+35240158302" class="sds-btn -iconBtn -secondary10">
<span class="sds-icon sds-icon-phone"></span>
</a>
<a href="mailto:a.skrijelj@spuerkeess.lu" class="sds-btn -iconBtn -secondary10">
<span class="sds-icon sds-icon-paperplane"></span>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="sds-navTopbar__item">
<button type="button" class="sds-btn -iconBtn -secondary100 sds-navTopbar__icon">
<span class="sds-icon sds-icon-logout"></span>
</button>
</li>
</ul>
</div>
</nav>
</div>
</header>
<div class="sds-snetFrame__inner">
<div class="sds-snetFrame__fader" aria-hidden="true"></div>
<div class="sds-snetFrame__menuContainer">
<nav class="sds-snetFrame__menu">
<div class="sds-snetFrame__menuClientZone">
<div class="sds-snetFrame__menuClientZoneItem -isDropdownDeactivated">
<div class="sds-snetFrame__menuItem -isStatic">
<span class="sds-snetFrame__menuLink">
<span class="sds-iconCircle -info100" aria-hidden="true">
<span class="sds-icon sds-icon-business"></span>
</span>
<span class="sds-snetFrame__menuItemText">Cactus</span>
</span>
</div>
</div>
</div>
<div class="sds-snetFrame__menuList">
<ul class="sds-snetFrame__menuListInner list-unstyled">
<li class="sds-snetFrame__menuItem">
<a href="" class="sds-snetFrame__menuLink">
<span data-toggle="tooltip" data-title="Situation financière" data-placement="right" data-boundary="window">
<span class="sds-iconCircle -secondary60 sds-snetFrame__menuLinkBubble" aria-hidden="true">
<span class="sds-icon sds-icon-graph"></span>
</span>
</span>
<span class="sds-snetFrame__menuItemText">Situation financière</span>
</a>
</li>
<li class="sds-snetFrame__menuItem -hasNotifs">
<a href="" class="sds-snetFrame__menuLink">
<span data-toggle="tooltip" data-title="Paiements" data-placement="right" data-boundary="window">
<span class="sds-snetFrame__menuLinkNotif"></span>
<span class="sds-iconCircle -secondary60 sds-snetFrame__menuLinkBubble" aria-hidden="true">
<span class="sds-icon sds-icon-transaction"></span>
</span>
</span>
<span class="sds-snetFrame__menuItemText">Paiements</span>
</a>
</li>
<li class="sds-snetFrame__menuItem -hasNotifs">
<a href="" class="sds-snetFrame__menuLink">
<span data-toggle="tooltip" data-title="Mailbox" data-placement="right" data-boundary="window">
<span class="sds-snetFrame__menuLinkNotif"> 99+</span>
<span class="sds-iconCircle -secondary60 sds-snetFrame__menuLinkBubble" aria-hidden="true">
<span class="sds-icon sds-icon-message"></span>
</span>
</span>
<span class="sds-snetFrame__menuItemText">Mailbox</span>
</a>
</li>
</ul>
<ul class="sds-snetFrame__settings list-unstyled">
<li class="sds-snetFrame__settingsItem sds-snetFrame__settingsOpenMenu">
<button type="button" class="sds-snetFrame__settingsButton">
<span class="sds-snetFrame__settingsButtonIcon sds-icon sds-icon-chevronrightdouble" data-toggle="tooltip" data-title="Toggle Menu" data-placement="right" data-boundary="window"></span>
<span class="sr-only">Déployer le menu</span>
</button>
</li>
</ul>
</div>
</nav>
</div>
<main class="sds-snetFrame__main" id="frameMain">
<!-- panel header content start -->
<!-- panel header content end -->
<div class="sds-snetFrame__mainContent">
<!-- main content start -->
<!-- main content end -->
</div>
</main>
</div>
</div>
<!-- content such as modals, tooltips, popovers etc should be included here -->
<div class="{{ namespace }}snetFrame{% for mod in frameModifiers %} {{ mod }}{% endfor %}">
{% render "@skip-nav-link" %}
{% if bfm %}
{% render "@snet-nav--bfm",{classes: [namespace+"snetFrame__header"]},true %}
{% elseif navLanding %}
{% render "@snet-nav--landing",{
noDropdown: true,
nameUser: "Jil Schmit",
text: titlePage,
classes: [namespace+"snetFrame__header"]
},true %}
{% elseif msp %}
{% render "@snet-nav",{classes: [namespace+"snetFrame__header"], msp: true},true %}
{% elseif cpb %}
{% render "@cpb-nav"+navState,navOptions,true %}
{% elseif spk %}
{% render "@spk-header",frameSpkHeaderOptions,true %}
{% elseif noActions %}
{% render "@snet-nav",{noActions: true, onboarding: onboarding},true %}
{% else %}
{% render "@snet-nav",{classes: [namespace+"snetFrame__header"], navOptions: navOptions},true %}
{% endif %}
<div class="{{ namespace }}snetFrame__inner">
<div class="{{ namespace }}snetFrame__fader" aria-hidden="true"></div>
{% if noMenu %}
{% else %}
<div class="{{ namespace }}snetFrame__menuContainer{% if menuOpen %} -isOpen{% endif %}">
<nav class="{{ namespace }}snetFrame__menu">
{% if bfm %}
<div class="{{ namespace }}snetFrame__menuClientZone{% if isFloatingMobile %} -isFloating{% endif %}">
<div
class="{{ namespace }}snetFrame__menuClientZoneItem {% if userDropdown %}{% else %} -isDropdownDeactivated{% endif %}">
{% if userDropdown %}
<div class="{{ namespace }}snetFrame__menuClientZoneDropdown dropdown">
{% render "@snet-list-item--button-rounded", {
classes: [namespace+"snetFrame__menuClientZoneDropdownTrigger"],
attrs:{
"id":"clientZoneDropdownMenu",
"data-toggle":"dropdown"
}
},true %}
<div
class="{{ namespace }}snetFrame__menuClientZoneDropdownMenu dropdown-menu dropdown-menu-left"
aria-labelledby="clientZoneDropdownMenu">
{% render "@snet-list-item--no-icon-rounded",{text: "Deloitte Consulting"},true %}
{% render "@snet-list-item--no-icon-rounded",{text: "Société commerciale"},true %}
{% render "@snet-list-item--no-icon-rounded",{text: "AC Company S.A."},true %}
</div>
</div>
{% else %}
<div class="{{ namespace }}snetFrame__menuItem -isStatic">
<span class="{{ namespace }}snetFrame__menuLink">
{% render "@icon-circle-regular--info-100",{icon: "icon-business"},true %}
<span class="{{ namespace }}snetFrame__menuItemText">Cactus</span>
</span>
</div>
{% endif %}
</div>
</div>
{% endif %}
<div class="{{ namespace }}snetFrame__menuList">
{% if menuListHeader %}
<div class="{{ namespace }}snetFrame__menuListHeader">
<div class="{{ namespace }}snetFrame__menuListHeaderShownOpen {{ namespace }}stackMd">
<div class="{{ namespace }}snetFrame__menuListHeaderContent">
<div class="h5">RTL Radio • RTL Group</div>
<div class="{{ namespace }}snetFrame__menuListHeaderSubtitle {{ namespace }}textHelperSmall">Référence : 0539C</div>
</div>
<div class="{{ namespace }}snetFrame__menuListHeaderActions {{ namespace }}btnGroup">
{% render "@btn-secondary--icon-left",{eltType: "a", text: "Afficher", icon: "icon-visible"},true %}
</div>
</div>
<div class="{{ namespace }}snetFrame__menuListHeaderHiddenOpen">
{% render "@icon-btn-secondary",{eltType: "a", icon: "icon-visible"},true %}
</div>
<div class="{{ namespace }}snetFrame__menuListHeaderProgress">
{% render "@snet-progress--xtrasmall-primary-badge" %}
</div>
</div>
{% endif %}
{% if menuFrameImg %}
{% if externalImg %}
<img class="img-fluid" src="{{ (menuFrameImg) | path }}" alt="">
{% else %}
<img class="img-fluid" src="{{ (mediaPath+menuFrameImg) | path }}" alt="">
{% endif %}
{% endif %}
<ul class="{{ namespace }}snetFrame__menuListInner list-unstyled">
{% if bfm %}
{% set links = bfmMenuLinks %}
{% else %}
{% set links = MenuLinks %}
{% endif %}
{% for menuLinkKey, menuLink in links %}
{% if menuLink %}
<li class="{{ namespace }}snetFrame__menuItem{% if menuLink.active %} -isActive{% endif %}{% if menuLink.subMenu %} -isOpen{% endif %}{% if menuLink.checked %} -isChecked{% endif %}{% if menuLink.checkedMandatory %} -mandatoryFilled{% endif %}{% if menuLink.divider %} -isSeparator{% endif %}{% if menuLink.dividerNoOffset %} -isSeparatorNoOffset{% endif %}{% if menuLink.isStatic %} -isStatic{% endif %}{% if menuLink.isFloatingMobile %} -isFloating{% endif %}{% if menuLink.hasNotifs %} -hasNotifs{% endif %}{% if menuLink.hiddenMobile %} -isHiddenMobile{% endif %}">
<{{ menuLink.frameMenuEltType or frameMenuEltType }}{% if frameMenuEltType == "a"%}{% if menuLink.frameMenuEltType == "button" %}{% else %} href=""{% endif %}{% endif %}{% if menuLink.frameMenuEltType == "button" %} type="button"{% endif%} {% for attrKey, attr in menuLink.attrs %} {{ attrKey }}="{{ attr }}"{% endfor %} class="{{ namespace }}snetFrame__menuLink">
{% if step %}
<span class="{{ namespace }}snetFrame__menuItemStep" data-toggle="tooltip" data-title="{{ menuLink.text }}"
data-placement="right" data-boundary="window">
{% if menuLink.checked %}
{% render '@checkbox-dot--no-input-active',{
classes: [namespace + "snetFrame__menuItemCheckbox"]
}, true %}
{% endif %}
{% if menuLink.active or menuLink.stepStarted %}
<div class="{{ namespace }}snetFrame__menuItemProgress">
{% render "@snet-circular-progress",{progress: menuLink.circularProgress},true %}
</div>
{% endif %}
{{ menuLink.step }}
</span>
{% else %}
<span data-toggle="tooltip" data-title="{{ menuLink.text }}"
data-placement="right" data-boundary="window">
{% if menuLink.hasNotifs %}
<span class="{{ namespace }}snetFrame__menuLinkNotif">{% if menuLink.hasNotifs.text %} {{ menuLink.hasNotifs.text }}{% else %}{% endif %}</span>
{% endif %}
{% if menuLink.cta %}
{% render "@icon-circle-regular--success-gradient",{icon: "icon-plus"},true %}
{% else %}
{% render "@icon-circle-regular--secondary-60",{classes: [namespace+"snetFrame__menuLinkBubble"], icon: menuLink.icon},true %}
{% endif %}
</span>
{% endif %}
<span class="{{ namespace }}snetFrame__menuItemText">{{ menuLink.text }}</span>
{% if menuLink.external %}
<span class="{{ namespace }}icon {{ namespace }}icon-externallink"></span>
{% endif %}
</{{ menuLink.frameMenuEltType or frameMenuEltType }}>
{% if menuLink.targetElement %}
{% render "@"+menuLink.targetElement,menuLink.targetElementOptions,true %}
{% endif %}
{% if menuLink.subMenu and subMenuDeployed %}
<ul class="{{ namespace }}snetFrame__submenu list-unstyled">
{% for subLinkKey, subMenuItem in menuLink.subMenu %}
<li class="{{ namespace }}snetFrame__submenuItem{% if subMenuItem.active %} -isActive{% endif %}{% if subMenuItem.inprogress %} -inProgress{% endif %}{% if subMenuItem.completed %} -completed{% endif %}{% if subMenuItem.mandataoryfilled %} -mandatoryFilled{% endif %}">
<a href="" class="{{ namespace }}snetFrame__submenuLink">
<span class="{{ namespace }}snetFrame__submenuLinkIndicator"
data-toggle="tooltip" data-title="{{ subMenuItem.text }}"
data-placement="right" data-boundary="window"></span>
<span
class="{{ namespace }}snetFrame__submenuItemText">{{ subMenuItem.text }}</span>
{% if subMenuItem.count %}
{% render "@count-badge--primary",{
classes: [namespace+"snetFrame__menuCountBadge"],
text: subMenuItem.count.text
},true %}
{% endif %}
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endif %}
{% endfor %}
</ul>
<ul class="{{ namespace }}snetFrame__settings list-unstyled">
{% if call %}
<li class="{{ namespace }}snetFrame__settingsItem">
<a class="{{ namespace }}snetFrame__menuLink" href="">
{% render '@icon-circle-regular--primary-100',{icon: "icon-phone"},true %}
<span class="{{ namespace }}snetFrame__menuItemText">
<span class="{{ namespace }}snetFrame__settingsCallTitle">Besoin d’un expert?</span>
<span class="{{ namespace }}snetFrame__settingsCallSubtitle">Un conseiller logement vous rappelle!</span>
</span>
</a>
</li>
{% endif %}
<li class="{{ namespace }}snetFrame__settingsItem {{ namespace }}snetFrame__settingsOpenMenu">
<button type="button" class="{{ namespace }}snetFrame__settingsButton">
<span
class="{{ namespace }}snetFrame__settingsButtonIcon {{ namespace }}icon {{ namespace }}icon-chevronrightdouble"
data-toggle="tooltip" data-title="Toggle Menu" data-placement="right"
data-boundary="window"></span>
<span class="sr-only">Déployer le menu</span>
</button>
</li>
</ul>
</div>
</nav>
</div>
{% endif %}
<main class="{{ namespace }}snetFrame__main" id="frameMain">
<!-- panel header content start -->
{% if panelHeaderContent %}
<div class="{{ namespace }}snetFrame__mainHeader {% if noHeadroom %}{% else %}-headroom{% endif %}{% if headerSearch %}-noPadding{% endif %}">
{% endif %}
{% block panelHeaderContent %}
{% endblock %}
{% if panelHeaderContent %}
</div>
{% endif %}
{% if panelLoader %}
<div class="{{ namespace }}snetFrame__panelLoader">
{% render "@loader-lottie" %}
</div>
{% endif %}
<!-- panel header content end -->
<div class="{{ namespace }}snetFrame__mainContent">
<!-- main content start -->
{% block panelMainContent %}
{% endblock %}
<!-- main content end -->
</div>
{% if backToTop %}
<div class="{{ namespace }}snetFrame__backToTop">
{% render "@icon-btn-secondary",{
eltType: "a",
href: "#top",
action: "Retour en haut de page",
icon: "icon-arrowtop",
classes: [namespace + "snetFrame__backToTopItem", namespace + "opacityBgFloating"]
},true %}
</div>
{% endif %}
</main>
</div>
</div>
<!-- content such as modals, tooltips, popovers etc should be included here -->
{% block misc %}
{% endblock %}
@use "sass:math";
/* variables specific to current element */
$snet-frame-menu-width-collapsed: $snet-frame-menu-width-collapsed-global;
$snet-frame-nav-topbar-height: $nav-topbar-height-global;
$snet-frame-top-padding: $snet-frame-nav-topbar-height;
$snet-frame-user-dropdown-padding: map-deep-get($token-spacer-unit-map, "8");
$snet-frame-client-zone-height: map-deep-get($token-sizes-component-map, "panel-header-height") - map-deep-get($token-spacer-unit-map, "8");
$snet-frame-main-horiz-padding-mobile: $snet-frame-main-horiz-padding-mobile-global;
$snet-frame-main-horiz-padding-desktop: $snet-frame-main-horiz-padding-desktop-global;
$snet-frame-menu-open-width: $snet-frame-menu-open-width-global;
$snet-frame-menu-list-vertical-padding-mobile: map-deep-get($token-spacer-unit-map, "8");
$snet-frame-menu-list-vertical-padding-desktop: map-deep-get($token-spacer-unit-map, "16");
$snet-frame-menu-list-horizontal-padding: map-deep-get($token-spacer-unit-map, "8");
$snet-frame-menu-list-header-horizontal-padding: map-deep-get($token-spacer-unit-map, "8");
$snet-frame-menu-list-header-bottom-padding: map-deep-get($token-spacer-inset-map, "xl");
$snet-frame-menu-toggle-top-padding-top: map-deep-get($token-spacer-unit-map, "72");
$snet-frame-menu-transition-timing: 0.15s;
.#{$namespace}snetFrame {
/* Save root element context for easy access if nesting is needed */
$self: &;
@include custom-prop-fallback-override("comp-snet-frame-background", "sys-color-elevation-surface-sunken");
/* properties of current element + media queries */
position: relative;
min-height: 100%;
display: flex;
flex-direction: column;
background-color: $snet-frame-bg-global;
background-color: var(--comp-snet-frame-background);
//padding-top: $snet-frame-top-padding;
/* Pseudo Elements */
&::before {
}
&::after {
}
/*
Include elements that are linked to the current element but have to reside at the root level of the stylesheet
(e.g: keyframes)
*/
@at-root {
}
/* children - write selector in full in comments in order to facilitate search */
// snetFrame__header
&__header {
position: sticky;
z-index: z("fixed");
top: 0;
left: 0;
right: 0;
}
// snetFrame__inner
&__inner {
// follows same logic as parent
flex-grow: 1;
display: flex;
max-width: none;
padding-right: 0;
transition: padding-left $snet-frame-menu-transition-timing linear;
background-color: inherit;
&::after {
content:""; // needed if absolutely positioned element were to stretch the body overflow
position: fixed;
z-index: z("negative");
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: map-deep-get($token-color-brand-map, "secondary", "06");
background-color: var(--comp-snet-frame-background);
}
@include media-breakpoint-up(lg){
width: 100%;
margin: 0 auto;
padding-left: $snet-frame-menu-width-collapsed;
}
@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
max-width: map-deep-get($container-max-widths, "xl");
padding-left: $snet-frame-menu-open-width;
}
}
&__fader {
position: absolute;
z-index: z("zero");
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
visibility: hidden;
background-color: rgba(map-deep-get($token-color-brand-map, "secondary", "100"), 0.64);
@include add-backdrop-filter(#{map-deep-get($token-spacer-unit-map, "8")});
transition: opacity 0.15s 0.1s linear;
}
/* Frame Menu */
/* shared properties */
// frame menu shared properties
&__menuContainer {
position: fixed;
z-index: z("sticky");
bottom: 0;
left: 0;
right: 0;
@include custom-prop-fallback("background-color", "sys-color-elevation-surface-flat");
flex-shrink: 0;
transition: width $snet-frame-menu-transition-timing linear;
@include media-breakpoint-up(lg) {
top: $nav-topbar-height-global;
right: auto;
width: $snet-frame-menu-width-collapsed;
box-shadow: map-deep-get($token-shadow-map, "sidebar");
}
@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
width: $snet-frame-menu-open-width;
padding-top: 0;
left: auto;
right: calc(100% - #{$snet-frame-menu-open-width});
}
$menu-desktop-positioning: math.div(map-deep-get($container-max-widths, "xl"),2);
@media screen and (min-width: #{map-deep-get($container-max-widths, "xl")}) {
right: auto;
left: calc(50% - #{$menu-desktop-positioning});
}
&::before {
content: "";
background-color: inherit;
z-index: z("negative");
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: -50vw;
height: 100%;
}
}
&__menuClientZone {
flex-shrink: 0;
position: relative;
z-index: z("low");
height: $snet-frame-client-zone-height;
border-bottom: $border-width solid;
@include custom-prop-fallback("border-bottom-color", "sys-color-border-primary-moderate");
/*
*
* Leave this in case it is ever needed for mobile
*
*/
//&.-isFloating {
//
// @include media-breakpoint-between(xs,sm){
//
// position: absolute;
// bottom: 100%;
// right: 0;
// width: $snet-frame-client-zone-height;
// border-bottom: 0;
//
// }
//
// #{$self}__menuItemText {
//
// @include media-breakpoint-between(xs,sm){
// @include sr-only();
// }
//
// }
//
//}
+ #{$self}__menuList {
padding-top: map-deep-get($token-spacer-unit-map, "8");
}
}
&__menuClientZoneItem {
position: absolute;
bottom: 0;
left: map-deep-get($token-radius-map, "8");
width: 100%;
&.-isDropdownDeactivated {
bottom: map-deep-get($token-radius-map, "8");
}
}
&__menuClientZoneDropdown {
width: 100%;
@include custom-prop-fallback("background-color", "comp-dropdown-background-color");
@include spacer-component-inset("sm");
border-top-left-radius: map-deep-get($token-radius-map, "32");
border-top-right-radius: map-deep-get($token-radius-map, "32");
margin-left: -(map-deep-get($token-radius-map, "8"));
overflow: hidden;
&.show.show.show {
box-shadow: map-deep-get($token-shadow-map, "detail");
overflow: visible;
width: $snet-frame-menu-open-width;
#{$self}__menuClientZoneDropdownTrigger {
&::before {
content: none;
}
}
@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
width: 100%;
}
}
}
&__menuClientZoneDropdownMenu {
border: none;
z-index: z("zero");
width: 100%;
left: 0 !important;
top: 100% !important;
margin: 0;
border-radius: 0;
border-bottom-left-radius: map-deep-get($token-radius-map, "32");
border-bottom-right-radius: map-deep-get($token-radius-map, "32");
transform: none !important;
@include spacer-component-inset("sm");
@include spacer-component-stack("sm");
box-shadow: map-deep-get($token-shadow-map, "detail");
&::after {
content: "";
background-color: inherit;
position: absolute;
top: -(map-deep-get($token-spacer-unit-map, "16") - $border-width ); // readjustment needed to avoid jump effect
left: 0;
right: 0;
height: map-deep-get($token-sizes-unit-map, "16");
border-bottom: $border-width solid;
@include custom-prop-fallback("border-bottom-color", "sys-color-border-primary-moderate");
}
}
&__menuClientZoneDropdownTrigger {
position: relative;
z-index: z("low");
&::before {
content: $icon-chevrondown;
@include icon-base;
width: map-deep-get($token-sizes-unit-map, "16");
height: map-deep-get($token-sizes-unit-map, "16");
display: flex;
align-items: center;
justify-content: center;
border-radius: map-deep-get($token-radius-map, "circle");
@include custom-prop-fallback("background-color", "comp-button-secondary-background-color");
position: absolute;
z-index: z("low");
bottom: map-deep-get($token-spacer-unit-map, "4");
right: map-deep-get($token-spacer-unit-map, "4");
font-weight: bold;
font-size: 85%;
@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
content: none;
}
}
}
&__menu {
background-color: inherit;
transition: width $snet-frame-menu-transition-timing linear;
width: 100%;
display: flex;
flex-direction: column;
height: 100%;
}
&__menuList {
margin-bottom: 0;
padding-top: map-deep-get($token-spacer-inline-map,"sm");
padding-bottom: calc(#{$snet-frame-menu-list-vertical-padding-mobile} + env(safe-area-inset-bottom));
@include media-breakpoint-up(lg){
padding: $snet-frame-menu-list-vertical-padding-desktop $snet-frame-menu-list-horizontal-padding;
@include spacer-component-stack('sm');
background-color: inherit;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
flex-grow: 1;
}
@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
width: 100% !important;
}
}
&__menuListHeader {
padding: map-deep-get($token-spacer-inset-map, "sm") $snet-frame-menu-list-header-horizontal-padding $snet-frame-menu-list-header-bottom-padding;
margin-bottom: map-deep-get($token-spacer-stack-max-map, "md");
white-space: nowrap;
position: relative;
@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
white-space: normal;
}
.-hasMenuOpen & {
@include media-breakpoint-up(lg) {
white-space: normal;
}
@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
white-space: nowrap;
}
}
}
#{$self}__menuListHeaderContent {
width: $snet-frame-menu-open-width - ($snet-frame-menu-list-horizontal-padding*2) - ($snet-frame-menu-list-header-horizontal-padding*2);
}
&__menuListHeaderSubtitle {
@include custom-prop-fallback("color", "sys-color-text-primary-vivid");
}
&__menuListHeaderShownOpen {
display: none;
@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
display: block;
}
.-hasMenuOpen & {
@include media-breakpoint-up(lg){
display: block;
}
@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
display: none;
}
}
}
&__menuListHeaderActions {
white-space: nowrap;
> * {
white-space: nowrap;
}
}
&__menuListHeaderHiddenOpen {
display: block;
@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
display: none;
}
.-hasMenuOpen & {
@include media-breakpoint-up(lg) {
display: none;
}
@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
display: block;
}
}
}
&__menuListHeaderProgress {
position: absolute;
top: 100%;
left: -($snet-frame-menu-list-header-horizontal-padding);
right: -($snet-frame-menu-list-header-horizontal-padding);
}
&__menuListInner {
margin-bottom: 0;
flex-grow: 1;
display: flex;
@include media-breakpoint-up(lg){
@include spacer-component-stack('sm');
display: block;
}
}
&__menuItem {
text-align: center;
flex: 1;
min-width: 0;
/* @TODO take a look at this and see how / if it can be safely removed */
@for $i from 1 through 10 {
&:nth-of-type(#{$i}) {
order: #{$i};
}
}
@include media-breakpoint-up(lg){
text-align: left;
flex-grow: 0;
min-width: $snet-frame-menu-width-collapsed-global - ($snet-frame-menu-list-horizontal-padding*2);
}
&.-isSeparator {
padding-top: map-deep-get($token-spacer-inset-map, "sm");
#{$self}__menuLink {
position: relative;
&::before {
content: "";
position: absolute;
top: -(map-deep-get($token-spacer-unit-map, "8"));
left: -(map-deep-get($token-spacer-inline-map, "sm"));
right: -(map-deep-get($token-spacer-inline-map, "sm"));
height: $border-width;
@include custom-prop-fallback("background-color", "sys-color-border-primary-subtle");
}
}
&:first-of-type {
padding-top: 0;
padding-bottom: map-deep-get($token-spacer-inset-map, "sm");
#{$self}__menuLink {
&::before {
top: auto;
bottom: -(map-deep-get($token-spacer-unit-map, "8"));
padding-top: 0;
}
}
}
}
&.-isSeparatorNoOffset {
position: relative;
padding-top: map-deep-get($token-spacer-inset-map, "sm");
&::before {
content: "";
position: absolute;
top: 0;
left: map-deep-get($token-spacer-inline-map, "sm");
right: map-deep-get($token-spacer-inline-map, "sm");
height: $border-width;
@include custom-prop-fallback("background-color", "sys-color-border-primary-subtle");
}
}
&.-isStatic {
#{$self}__menuLink {
&:hover {
background-color: transparent;
cursor: default;
}
}
#{$self}__menuItemCheckbox {
cursor: default;
}
}
&.-isActive {
#{$self}__menuLink {
@include custom-prop-fallback("color", "sys-color-text-secondary-vivid");
}
#{$self}__menuLinkBubble {
[class*="icon"] {
&::before {
@include custom-prop-fallback("color", "sys-color-text-secondary-vivid");
@include media-breakpoint-up(lg){
@include custom-prop-fallback("color", "sys-color-text-neutral-inverse");
}
}
}
}
#{$self}__menuLinkBubble {
@include custom-prop-fallback("background-color", "sys-color-text-secondary-vivid","true","true");
}
#{$self}__menuItemText {
color: inherit;
}
}
&.-isOpen {
#{$self}__submenu {
display: block;
}
}
&.-isFloating {
@include media-breakpoint-between(xs,md){
order: 4;
}
#{$self}__menuItemText {
@include media-breakpoint-between(xs,md){
@include sr-only();
}
}
}
&.-isHiddenMobile {
display: none;
@include media-breakpoint-up(lg) {
display: flex;
}
}
}
&__menuItemCheckbox {
display: none;
width: map-deep-get($token-spacer-unit-map, "40");
height: map-deep-get($token-spacer-unit-map, "40");
position: absolute;
top: 0;
left: 0;
font-size: map-deep-get($design-tokens,"sys-font-size-body-extra-large-max");
border-radius: map-deep-get($token-radius-map, "circle");
}
&__menuLink {
@include custom-prop-fallback("color", "sys-color-text-primary-vivid");
width: 100%; /* if item is button */
display: block;
position: relative;
@include media-breakpoint-up(lg){
display: flex;
align-items: center;
flex-direction: row;
}
&[disabled] {
@include custom-prop-fallback("color", "sys-color-text-primary-muted");
pointer-events: none;
}
}
&__menuLinkNotif {
position: absolute;
top: 0;
padding: map-deep-get($token-spacer-inset-map, "xxs") map-deep-get($token-spacer-inset-map, "xs");
left: $icon-circle-regular-dimensions-global;
transform: translate(-25%, 50%);
@include custom-prop-fallback("background-image", "sys-color-background-secondary-gradient");
min-width: map-deep-get($token-spacer-unit-map, "16");
height: map-deep-get($token-spacer-unit-map, "16");
border-radius: map-deep-get($token-radius-map, "24");
border: $border-width*2 solid;
@include custom-prop-fallback("border-color", "sys-color-elevation-surface-flat");
font-size: map-deep-get($token-font-size-map, "body", "3xs");
@include custom-prop-fallback("color", "sys-color-text-neutral-inverse");
line-height: 1;
font-weight: map-deep-get($token-font-weight-map, "bold");
}
&__menuLink,
&__menuItemText {
@include media-breakpoint-between(xs,md){
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}
&__submenuLink,
&__submenuLinkIndicator {
display: flex;
align-items: center;
}
&__menuLink,
&__submenuLink {
padding-left: map-deep-get($token-spacer-inline-map, "sm");
padding-right: map-deep-get($token-spacer-inline-map, "sm");
border-radius: map-deep-get($token-radius-map, "32");
transition: background-color $snet-frame-menu-transition-timing ease-in;
@include custom-prop-fallback("color", "sys-color-text-primary-vivid");
@include media-breakpoint-up(lg){
@include spacer-component-inset("sm");
}
&:hover {
@include media-breakpoint-up(lg){
@include custom-prop-fallback("background-color", "sys-color-background-primary-6");
@include custom-prop-fallback("color", "sys-color-text-primary-vivid");
}
}
}
&__menuItemText {
display: block;
line-height: map-deep-get($token-font-line-height-map, "m");
@include media-breakpoint-up("lg") {
flex-shrink: 0 !important;
}
}
&__menuItemText,
&__submenuItemText {
@extend %textHelper3xs;
font-weight: map-deep-get($token-font-weight-map, "semi-bold");
flex: 1;
@include media-breakpoint-between(xs,md){
@include custom-prop-fallback("color", "sys-color-text-primary-muted");
}
@include media-breakpoint-up(lg){
@include fluid-type($min_width, $max_width, $h5-font-size, $h5-font-size);
font-family: map-deep-get($token-font-family-map, "headings");
max-width: 230px;
margin-right: auto;
opacity: 0;
padding-left: map-deep-get($token-spacer-unit-map, "16");
overflow: visible;
text-overflow: inherit;
flex: 0 0 auto;
}
@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
opacity: 1;
flex-shrink: 1;
}
}
&__menuLinkBubble {
@include media-breakpoint-between(xs,md) {
height: auto;
background-color: transparent !important;
@include custom-prop-fallback("color", "sys-color-text-primary-muted", "true", "true");
}
}
&__submenu {
display: none;
margin-bottom: map-deep-get($token-spacer-unit-map, "8");
}
&__submenuItem {
&.-isActive {
#{$self}__submenuLink {
@include custom-prop-fallback("color", "sys-color-text-secondary-vivid");
}
#{$self}__submenuItemText {
color: inherit;
}
#{$self}__submenuLinkIndicator {
&::before {
background-color: currentColor;
}
}
}
}
&__submenuLinkIndicator {
width: 40px;
height: 40px;
flex-shrink: 0;
justify-content: center;
&::before {
content: "";
border-radius: map-deep-get($token-radius-map, "circle");
@include custom-prop-fallback("background-color", "sys-color-background-primary-30");
width: map-deep-get($token-sizes-unit-map, "8");
height: map-deep-get($token-sizes-unit-map, "8");
}
}
&__menuCountBadge {
margin-left: map-deep-get($token-spacer-unit-map, "16");
}
&__menuDropdownPositioning {
@include media-breakpoint-down(md) {
bottom: calc(100% + #{map-deep-get($token-spacer-stack-max-map, "md")}) !important;
left: 50% !important;
transform: translateX(-50%) !important;
top: auto !important;
}
width: calc(100% - (#{$snet-frame-main-horiz-padding-mobile}*2));
@include media-breakpoint-up(sm) {
max-width: 350px;
}
@include media-breakpoint-up(lg) {
max-width: none;
min-width: 350px;
width: auto;
left: calc(100% + #{map-deep-get($token-spacer-unit-map, "16")}) !important;
top: map-deep-get($token-spacer-unit-map ,"8") !important;
max-height: calc(100vh - env(safe-area-inset-bottom) - #{map-deep-get($token-sizes-component-map, "topbar-height")} - #{map-deep-get($token-spacer-unit-map, "16")});
overflow-y: auto;
}
}
/* Frame Main */
&__main {
padding-left: $snet-frame-main-horiz-padding-mobile;
padding-right: $snet-frame-main-horiz-padding-mobile;
padding-bottom: $nav-topbar-height-global;
flex-grow: 1;
min-width: 0; // FKIN OVERFLOW. FKIN. OVERFLOW. Never take this out or I kill you.
position: relative;
z-index: z("zero");
display: flex;
flex-direction: column;
background-color: inherit;
@media (orientation: landscape) {
padding-left: calc(env(safe-area-inset-left) + #{$snet-frame-main-horiz-padding-mobile});
padding-right: calc(env(safe-area-inset-right) + #{$snet-frame-main-horiz-padding-mobile});
}
@include media-breakpoint-up(sm) {
padding-bottom: map-deep-get($token-spacer-unit-map, "32");
}
@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
padding-left: $snet-frame-main-horiz-padding-desktop;
padding-right: $snet-frame-main-horiz-padding-desktop;
}
}
&__mainHeader {
margin: 0 (-$snet-frame-main-horiz-padding-mobile);
padding: 0 $snet-frame-main-horiz-padding-mobile;
background-color: inherit;
@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
margin: 0 (-$snet-frame-main-horiz-padding-desktop);
padding: 0 $snet-frame-main-horiz-padding-desktop;
}
&.-headroom {
position: sticky;
z-index: z("sticky");
top: $snet-frame-nav-topbar-height;
transition: transform $snet-frame-main-header-transition-duration-global linear;
}
&.-headroomUnpinned.-headroomNotTop {
transform: translateY(-100%);
}
&.-noPadding {
padding: 0;
}
}
&__mainHeader + &__mainContent {
padding-top: map-deep-get($design-tokens, "ui-space-inset-vertical-static-250");
}
&__mainContent {
padding: $snet-frame-main-content-vertical-padding-desktop-global 0;
flex-grow: 1;
display: flex;
flex-direction: column;
width: 100%;
}
/* Frame Menu Settings */
// frame menu settings shared properties
&__settingsButton,
&__settingsButtonIcon,
&__settingsItem {
display: flex;
align-items: center;
}
&__settings {
margin-top: map-deep-get($token-spacer-unit-map, "64");
margin-bottom: 0;
@include spacer-component-stack('sm');
position: sticky;
bottom: 0;
display: none;
@include media-breakpoint-up(lg){
display: block;
}
@supports (position: sticky) {
margin-top: map-deep-get($token-spacer-unit-map, "24");
}
}
&__settingsItem {
position: relative;
}
&__settingsButton {
@include spacer-component-inset('sm');
@include custom-prop-fallback("color", "sys-color-text-primary-muted");
transition: color $snet-frame-menu-transition-timing linear;
@include custom-prop-fallback("background-color", "sys-color-elevation-surface-flat");
border-radius: map-deep-get($token-radius-map, "circle");
&:hover,
&:focus {
#{$self}__settingsButtonIcon {
@include custom-prop-fallback("background-color", "comp-button-secondary-background-color");
}
}
}
&__settingsButtonIcon {
width: map-deep-get($token-sizes-unit-map, "40");
height: map-deep-get($token-sizes-unit-map, "40");
justify-content: center;
border-radius: map-deep-get($token-radius-map, "circle");
}
&__settingsButtonText {
color: inherit;
}
&__settingsOpenMenu {
@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
display: none;
}
}
&__settingsCallTitle {
display: block;
@extend %headingBase;
@extend %h5;
}
&__settingsCallSubtitle {
display: block;
font-size: map-deep-get($design-tokens,"sys-font-size-helper-medium");
@include custom-prop-fallback("color", "sys-color-text-primary-vivid");
font-weight: map-deep-get($token-font-weight-map, "regular");
}
&__panelLoader {
display: flex;
align-items: center;
justify-content: center;
min-height: 160px;
height: 100%;
}
&__backToTop {
position: sticky;
padding-right: $opacity-background-inset-spacing-global;
text-align: right;
z-index: z("fixed");
bottom: $snet-frame-main-content-vertical-padding-desktop-global + $opacity-background-inset-spacing-global;
@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
bottom: $snet-frame-main-content-vertical-padding-desktop-global + $opacity-background-inset-spacing-global;
}
}
&__backToTopItem {
&::before {
box-shadow: map-deep-get($token-shadow-map, "active");
}
}
/* modifiers */
// snetFrame -hasMenuOpen
&.-hasMenuOpen {
@include media-breakpoint-up(lg) {
#{$self}__fader {
opacity: 1;
visibility: visible;
z-index: z("sticky");
@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
opacity: 0;
visibility: hidden;
}
}
#{$self}__menu {
width: $snet-frame-menu-open-width;
}
#{$self}__menuItemText,
#{$self}__submenuItemText,
#{$self}__settingsCallText {
opacity: 1;
transition: opacity 0.1s 0.1s linear,
flex-shrink 0s $snet-frame-menu-transition-timing linear // necessary for alignment on menu hide/show
;
flex-shrink: 1;
}
#{$self}__settingsCall {
width: auto;
}
#{$self}__settingsButtonIcon {
transform: rotateY(180deg);
}
#{$self}__menuClientZoneDropdownTrigger {
&::before {
display: none;
}
}
}
}
// snetFrame -noMenu
&.-noMenu {
// follows same logic as base element
#{$self}__inner {
padding-left: 0;
}
#{$self}__main {
padding-left: 0;
padding-right: 0;
}
.#{$namespace}frameContentBottomBar {
&__container {
padding-left: $snet-frame-main-horiz-padding-mobile-global;
padding-right: $snet-frame-main-horiz-padding-mobile-global;
@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
padding-left: $snet-frame-main-horiz-padding-desktop-global;
padding-right: $snet-frame-main-horiz-padding-desktop-global;
}
}
}
}
&.-bgWhite,
&.-bgInverted {
@include custom-prop-fallback-override("comp-snet-frame-background", "sys-color-elevation-surface-flat");
background-color: #ffffff;
background-color: var(--comp-snet-frame-background);
#{$self}__mainHeader {
background-color: #ffffff;
background-color: var(--comp-snet-frame-background);
}
}
&.-contentCentered {
#{$self}__main {
@include media-breakpoint-up(md){
margin: auto;
}
}
}
&.-hasBottomBar {
#{$self}__mainContent {
padding-bottom: $frame-content-bottom-bar-min-height-global;
}
#{$self}__backToTop {
bottom: $frame-content-bottom-bar-min-height-global + $snet-frame-main-content-vertical-padding-desktop-global*0.5 + $opacity-background-inset-spacing-global;
@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
bottom: $frame-content-bottom-bar-min-height-global + $snet-frame-main-content-vertical-padding-desktop-global*0.5 + $opacity-background-inset-spacing-global;
}
}
}
&.-step {
&.-hasMenuOpen {
@include media-breakpoint-up(lg) {
#{$self}__menuItem {
&.-isActive {
#{$self}__menuLink {
@include custom-prop-fallback("background-color", "sys-color-background-primary-10");
}
}
}
}
}
#{$self}__menuContainer {
display: none;
@include media-breakpoint-up(lg){
display: block;
}
}
#{$self}__menuItem {
&.-isActive {
#{$self}__menuLink {
@include custom-prop-fallback("color", "sys-color-text-primary-vivid");
@media screen and (min-width: map-get($tweakpoint-map, "tablet")){
@include custom-prop-fallback("background-color", "sys-color-background-primary-10");
}
}
#{$self}__menuItemText {
@include custom-prop-fallback("color", "sys-color-text-primary-vivid");
}
#{$self}__menuItemProgress {
display: block;
.#{$namespace}circularProgress__shape {
@include custom-prop-fallback("stroke", "sys-color-border-status-success-strong");
}
}
}
&.-isChecked {
#{$self}__menuItemCheckbox {
display: flex;
align-items: center;
justify-content: center;
@include custom-prop-fallback("border-color", "sys-color-border-status-success-strong","true","true");
@include custom-prop-fallback("background-color", "sys-color-background-status-success-100","true","true");
}
#{$self}__menuItemText {
@include custom-prop-fallback("color", "sys-color-text-primary-vivid");
}
&.-mandatoryFilled {
#{$self}__menuItemCheckbox {
@include custom-prop-fallback("border-color", "sys-color-border-status-warning-strong","true","true");
@include custom-prop-fallback("background-color", "sys-color-background-status-warning-100","true","true");
}
}
}
}
#{$self}__submenuItem {
&.-completed,
&.-inProgress,
&.-mandatoryFilled {
#{$self}__submenuLink {
@include custom-prop-fallback("color", "sys-color-text-primary-vivid");
}
}
&.-completed {
#{$self}__submenuLinkIndicator {
&::before {
@include custom-prop-fallback("background-color", "sys-color-background-status-success-100");
}
}
}
&.-inProgress {
#{$self}__submenuLinkIndicator {
&::before {
@include custom-prop-fallback("background-color", "sys-color-background-secondary-100");
}
}
}
&.-mandatoryFilled {
#{$self}__submenuLinkIndicator {
&::before {
@include custom-prop-fallback("background-color", "sys-color-background-status-warning-100");
}
}
}
&.-isActive {
#{$self}__submenuLinkIndicator {
position: relative;
z-index: z("zero");
&::after {
content: "";
width: map-deep-get($token-sizes-unit-map, "16");
height: map-deep-get($token-sizes-unit-map, "16");
position: absolute;
z-index: z("negative");
border-radius: map-deep-get($token-radius-map, "circle");
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
@include custom-prop-fallback("background-color", "sys-color-background-secondary-30");
}
}
}
}
#{$self}__menuItemProgress {
width: 115%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
#{$self}__menuItemStep {
position: relative;
width: map-deep-get($token-spacer-unit-map, "40");
height: map-deep-get($token-spacer-unit-map, "40");
border-radius: map-deep-get($token-radius-map, "circle");
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
@include custom-prop-fallback("background-color", "sys-color-background-primary-10");
font-family: map-deep-get($token-font-family-map, "headings");
}
#{$self}__menuItemText {
font-family: map-deep-get($token-font-family-map, "text");
font-weight: map-deep-get($token-font-weight-map, "semi-bold");
}
#{$self}__submenuItemText {
font-family: map-deep-get($token-font-family-map, "text");
}
#{$self}__main {
padding: $snet-frame-main-horiz-padding-mobile;
overflow: hidden;
padding-left: calc(env(safe-area-inset-left) + #{$snet-frame-main-horiz-padding-mobile});
padding-right: calc(env(safe-area-inset-right) + #{$snet-frame-main-horiz-padding-mobile});
@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
padding: math.div($snet-frame-main-horiz-padding-desktop,2) $snet-frame-main-horiz-padding-desktop;
}
}
#{$self}__mainContent {
height: 100%;
padding: 0;
@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
padding-top: map-deep-get($token-spacer-stack-max-map, "xs");
padding-bottom: map-deep-get($token-spacer-stack-max-map, "xs");
}
}
}
&.-contentLoading {
#{$self}__mainContent {
position: relative;
&::before {
content: "";
position: absolute;
opacity: 0.4;
z-index: z("medium");
top: 0;
left: 0;
right: 0;
bottom: 0;
@include custom-prop-fallback("background-color", "sys-color-background-primary-6");
}
}
}
/* @TODO get rid of this shite ASAP */
&.-spkCustomFrame {
.new-styles {
display: flex;
flex-direction: column;
min-height: 100%;
flex-grow: 1;
& > div {
display: flex;
flex-direction: column;
min-height: 100%;
flex-grow: 1;
}
}
}
/* Frame rakes all available witdh */
&.-fullWidth {
#{$self}__inner {
max-width: none;
}
#{$self}__menuContainer {
left: 0;
}
}
&.-storeContext {
#{$self}__main {
padding-left: 0 !important;
padding-right: 0 !important;
}
#{$self}__mainContent {
padding-top: map-deep-get($token-spacer-stack-max-map, "lg");
.container,
.container-fluid {
@include containerPaddingInline();
}
.#{$namespace}stripContainerPadding {
.container,
.container-fluid {
padding-left: 0;
padding-right: 0;
}
}
}
#{$self}__mainHeader {
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/*
* menu toggle button is placed above all menu items
*
* DOES NOT WORK WITH DROPDOWN IN MENU
*
*/
&.-menuToggleTop {
#{$self}__menuList {
padding-top: $snet-frame-menu-toggle-top-padding-top;
@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
position: relative;
padding-top: $snet-frame-menu-list-vertical-padding-desktop;
}
}
&.-hasMenuOpen {
#{$self}__menuList {
@include media-breakpoint-up(lg){
position: relative;
padding-top: $snet-frame-menu-list-vertical-padding-desktop;
}
@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
position: static;
padding-top: $snet-frame-menu-toggle-top-padding-top;
}
}
}
#{$self}__menuListHeaderContent {
width: ($snet-frame-menu-open-width*(0.75));
}
#{$self}__settings {
position: static;
}
#{$self}__settingsOpenMenu {
position: absolute;
z-index: z("low");
top: $snet-frame-menu-list-vertical-padding-mobile;
@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
right: $snet-frame-menu-list-horizontal-padding;
}
}
&.-hasMenuOpen {
#{$self}__settingsOpenMenu {
@include media-breakpoint-up(lg) {
right: $snet-frame-menu-list-horizontal-padding;
}
@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
right: auto;
}
}
}
}
&.-menuToggleVisible {
#{$self}__menuItemText,
#{$self}__submenuItemText,
#{$self}__settingsCallText {
flex: 0 0 auto;
}
#{$self}__settingsButtonIcon {
@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
transform: rotateY(180deg);
}
}
#{$self}__settingsOpenMenu {
@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
display: flex;
}
}
// snetFrame -hasMenuOpen
&.-hasMenuOpen,
&.-menuHiddenDesktop {
@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
#{$self}__inner {
padding-left: $snet-frame-menu-width-collapsed;
}
#{$self}__menuContainer {
width: $snet-frame-menu-width-collapsed;
right: calc(100% - $snet-frame-menu-width-collapsed);
}
#{$self}__fader {
opacity: 0;
visibility: hidden;
}
#{$self}__menu {
width: $snet-frame-menu-width-collapsed;
}
#{$self}__menuItemText,
#{$self}__submenuItemText,
#{$self}__settingsCallText {
opacity: 1;
transition: opacity 0.1s 0.1s linear,
flex-shrink 0s $snet-frame-menu-transition-timing linear // necessary for alignment on menu hide/show
;
}
#{$self}__menuLink {
}
#{$self}__settingsCall {
width: auto;
}
#{$self}__settingsButtonIcon {
transform: rotateY(0deg);
}
#{$self}__menuClientZoneDropdown {
&.show.show.show {
width: $snet-frame-menu-open-width;
}
}
#{$self}__menuClientZoneDropdownTrigger {
&::before {
content: $icon-chevrondown;
display: flex;
}
}
}
}
&.-menuHiddenDesktop.-hasMenuOpen {
@include media-breakpoint-up(lg) {
#{$self}__fader {
opacity: 1;
visibility: visible;
z-index: z("sticky");
@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
opacity: 0;
visibility: hidden;
}
}
#{$self}__menu {
width: $snet-frame-menu-open-width;
}
#{$self}__menuItemText,
#{$self}__submenuItemText,
#{$self}__settingsCallText {
opacity: 1;
transition: opacity 0.1s 0.1s linear,
flex-shrink 0s $snet-frame-menu-transition-timing linear // necessary for alignment on menu hide/show
;
flex-shrink: 1;
}
#{$self}__settingsCall {
width: auto;
}
#{$self}__settingsButtonIcon {
transform: rotateY(180deg);
}
#{$self}__menuClientZoneDropdownTrigger {
&::before {
display: none;
}
}
}
#{$self}__menuContainer {
@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
width: $snet-frame-menu-open-width;
}
}
#{$self}__inner {
@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
padding-left: $snet-frame-menu-open-width;
}
}
}
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
.bfm-theme & {
#{$self}__menuLinkBubble {
@include custom-prop-fallback("background-color", "sys-color-background-primary-100");
}
}
.modal-open & {
#{$self}__main {
overflow: visible;
position: static;
z-index: auto;
}
}
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}
export default class SnetFrame {
constructor() {
this.toggleMenu()
}
toggleMenu() {
const mediaQuery = window.matchMedia('(min-width: 1279px)');
$('.sds-snetFrame__settingsOpenMenu BUTTON').on('click', function (event) {
$('.sds-snetFrame').toggleClass('-hasMenuOpen');
});
$('.sds-snetFrame__fader').on('click', function (event) {
$('.sds-snetFrame').toggleClass('-hasMenuOpen');
});
mediaQuery.addEventListener('change', event => {
if (event.matches) {
$('.sds-snetFrame').removeClass('-hasMenuOpen');
} else {
$('.sds-snetFrame').removeClass('-hasMenuOpen');
}
})
}
}