SNET Main Page Frame: Default

Frame classes

Please add the following classes to the frame to adapt the frame to various contexts

  • -noMenu: overrides default frame styles when a menu is present
  • -centeredContent: vertically centers any content in the panel content zone. Exclusively used with -noMenu for now.
  • -hasMenuOpen: is dynamically added to the frame when the menu is toggled through the sds-snetFrame__settingsButton element.
  • -step: changes menu styles for a step context
  • -menuToggleTop: switches menu toggle button position above any menu items.
  • -menuHiddenDesktop: forces the menu to stay collapsed on desktop.

Toggle menu overlay

When the collapsed menu is opened, the "sds-snetFrame" gets the "-hasMenuOpen" class, which shows the fader element.

BFM theme

Add the class "bfm-theme" to the body element.

Corporate's Bridge theme

Add the class "cpb-theme" to the body element.

Tooltips

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 Privé</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">
                            <button type="button" class="sds-btn -iconBtn -secondary100 sds-navTopbar__icon">

                                <span class="sds-icon sds-icon-speechbubble"></span>

                            </button>
                            <span class="sds-navTopbar__itemLabel sds-textHelper">Aide</span>
                        </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 sds-navTopbar__userDropdownAvatar">

                                    <img class="img-fluid" src="../../media/snet/avatars/nopic/avatarNoPicWoman.svg" alt="">

                                </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 -avatarXl sds-userMenu__avatar">

                                        <img class="img-fluid" src="../../media/snet/avatars/nopic/avatarNoPicWoman.svg" alt="">

                                    </div>

                                    <div class="sds-userMenu__headerText">
                                        <div class="h3">Jil Schmit Longname</div>
                                        <div class="sds-userMenu__headerMeta sds-textHelper">Espace privé</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 données personnelles</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-client"></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">Mes commandes</span>
                                            <div class="sds-userMenu__itemMeta d-flex align-items-center">

                                                <span class="sds-countBadge -primary">
                                                    01
                                                    <span class="sr-only">Notifications non lues</span>
                                                </span>

                                                <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">Mes documents</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-document"></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">

                                        <button type="button" class="sds-userMenu__link d-flex align-items-center justify-content-between" data-toggle="modal" data-target="#modalConventions">
                                            <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>
                                        </button>
                                    </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__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 -isActive -isOpen">
                            <a href="" class="sds-snetFrame__menuLink">

                                <span data-toggle="tooltip" data-title="Paiements" data-placement="right" data-boundary="window">

                                    <span class="sds-iconCircle -secondary60 sds-snetFrame__menuLinkBubble" aria-hidden="true">

                                        <span class="sds-icon sds-icon-plus"></span>

                                    </span>

                                </span>

                                <span class="sds-snetFrame__menuItemText">Paiements</span>

                            </a>

                        </li>

                        <li class="sds-snetFrame__menuItem">
                            <a href="" class="sds-snetFrame__menuLink">

                                <span data-toggle="tooltip" data-title="My Intelligent Assistant" data-placement="right" data-boundary="window">

                                    <span class="sds-iconCircle -secondary60 sds-snetFrame__menuLinkBubble" aria-hidden="true">

                                        <span class="sds-icon sds-icon-mia"></span>

                                    </span>

                                </span>

                                <span class="sds-snetFrame__menuItemText">My Intelligent Assistant</span>

                            </a>

                        </li>

                        <li class="sds-snetFrame__menuItem">
                            <a href="" class="sds-snetFrame__menuLink">

                                <span data-toggle="tooltip" data-title="Instruments financiers" data-placement="right" data-boundary="window">

                                    <span class="sds-iconCircle -secondary60 sds-snetFrame__menuLinkBubble" aria-hidden="true">

                                        <span class="sds-icon sds-icon-instrument"></span>

                                    </span>

                                </span>

                                <span class="sds-snetFrame__menuItemText">Instruments financiers</span>

                            </a>

                        </li>

                        <li class="sds-snetFrame__menuItem">
                            <a href="" class="sds-snetFrame__menuLink">

                                <span data-toggle="tooltip" data-title="Messages" data-placement="right" data-boundary="window">

                                    <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">Messages</span>

                            </a>

                        </li>

                        <li class="sds-snetFrame__menuItem">
                            <a href="" class="sds-snetFrame__menuLink">

                                <span data-toggle="tooltip" data-title="Store" data-placement="right" data-boundary="window">

                                    <span class="sds-iconCircle -secondary60 sds-snetFrame__menuLinkBubble" aria-hidden="true">

                                        <span class="sds-icon sds-icon-shoppingbag"></span>

                                    </span>

                                </span>

                                <span class="sds-snetFrame__menuItemText">Store</span>

                            </a>

                        </li>

                        <li class="sds-snetFrame__menuItem">
                            <a href="" class="sds-snetFrame__menuLink">

                                <span data-toggle="tooltip" data-title="Espace fiscal" data-placement="right" data-boundary="window">

                                    <span class="sds-iconCircle -secondary60 sds-snetFrame__menuLinkBubble" aria-hidden="true">

                                        <span class="sds-icon sds-icon-percentage"></span>

                                    </span>

                                </span>

                                <span class="sds-snetFrame__menuItemText">Espace fiscal</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 %}
  • Content:
    @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($token-font-size-map,"body", "xl");
    		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: 0;
    
    	}
    
    	&__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($token-font-size-map,"body", "s");
    		@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 {
    	}
    
    }
  • URL: /components/raw/snet-page-frame/_snet-frame.scss
  • Filesystem Path: components/snet/frames/page-frame/_snet-frame.scss
  • Size: 36.7 KB
  • Content:
    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');
    			}
    		})
    
    	}
    
    }
    
  • URL: /components/raw/snet-page-frame/page-frame.js
  • Filesystem Path: components/snet/frames/page-frame/page-frame.js
  • Size: 622 Bytes