Nav: Default

No notes defined.

<nav class="sds-nav">
    <div class="sds-nav__inner">
        <a href="#back" class="sds-nav__back flex-shrink-0">
            <span class="sds-iconCircle sds-nav__backIcon" aria-hidden="true">

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

            </span>

            <span class="sds-nav__backText sds-textHelper">Retour</span>
        </a>
        <div class="sds-nav__adaptiveLogo flex-shrink-0">
            <svg width="214" height="40" viewBox="0 0 214 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_1029_767)">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M192.88 12.12C193.4 12.56 193.72 13.04 193.92 13.56L196.76 11.92C196.28 10.96 195.6 10.16 195 9.59998C194.28 8.95998 192.84 8.03998 190.36 8.03998C186 8.03998 183.6 11 183.6 14.12C183.6 17.6 186.4 19.16 188.4 20L190.6 20.92C192.16 21.52 193.96 22.56 193.96 24.88C193.96 27.2 192.24 28.76 190.12 28.76C188.68 28.76 187.72 28.24 187.08 27.4C186.52 26.64 186.12 25.56 186.12 24.44L182.6 25.2C182.72 26.8 183.28 28.36 184.52 29.72C185.68 31.04 187.28 32.04 189.96 32.04C194.28 32.04 197.4 29.04 197.4 24.64C197.4 22 196.24 19.56 191.96 17.84L189.64 16.92C187.36 15.96 187.12 14.76 187.12 14.08C187.12 12.56 188.28 11.28 190.4 11.28C191.4 11.28 192.16 11.52 192.88 12.12ZM145.72 8.39999L136.76 17.64V8.39999H133.24V31.52H136.76V21.96L137.44 21.24L145.72 31.52H150.44L139.92 18.88L150.36 8.39999H145.72ZM155.64 11.72H164.88V8.39999H152.08V31.52H164.88V28.2H155.64V20.92H164.6V17.6H155.64V11.72ZM180.76 11.72H171.52V17.6H180.52V20.92H171.52V28.2H180.76V31.52H168.04V8.39999H180.76V11.72ZM210 13.56C209.8 13.04 209.48 12.56 208.96 12.12C208.24 11.52 207.48 11.28 206.44 11.28C204.32 11.28 203.16 12.56 203.16 14.08C203.16 14.76 203.4 15.96 205.68 16.92L208 17.84C212.28 19.56 213.44 22 213.44 24.64C213.44 29.04 210.32 32.04 206 32.04C203.32 32.04 201.72 31.04 200.56 29.72C199.32 28.36 198.76 26.8 198.64 25.2L202.16 24.44C202.16 25.56 202.56 26.64 203.12 27.4C203.76 28.24 204.72 28.76 206.16 28.76C208.28 28.76 210 27.2 210 24.88C210 22.56 208.2 21.52 206.64 20.92L204.44 20C202.56 19.2 199.72 17.64 199.72 14.16C199.72 11.04 202.12 8.07997 206.48 8.07997C209 8.07997 210.4 8.99997 211.12 9.63997C211.72 10.2 212.4 11 212.88 11.96L210 13.56ZM57.56 12.12C58.08 12.56 58.4 13.04 58.6 13.56L61.48 11.96C61 11 60.32 10.2 59.72 9.63997C59 8.99997 57.56 8.07997 55.08 8.07997C50.72 8.07997 48.32 11.04 48.32 14.16C48.32 17.64 51.16 19.2 53.04 20L55.24 20.92C56.8 21.52 58.6 22.56 58.6 24.88C58.6 27.2 56.88 28.76 54.76 28.76C53.32 28.76 52.36 28.24 51.72 27.4C51.16 26.64 50.76 25.56 50.76 24.44L47.24 25.2C47.36 26.8 47.92 28.36 49.16 29.72C50.32 31.04 51.92 32.04 54.6 32.04C58.92 32.04 62.04 29.04 62.04 24.64C62.04 22 60.88 19.56 56.6 17.84L54.28 16.92C52.04 15.96 51.8 14.76 51.8 14.08C51.8 12.56 52.96 11.28 55.08 11.28C56.08 11.28 56.84 11.52 57.56 12.12ZM68.2 18.88H69.8C72.88 18.88 74.32 17.4 74.32 15.24C74.32 13.96 73.8 11.64 69.76 11.64H68.2V18.88ZM69.76 8.39999C71.16 8.39999 73.16 8.51999 74.84 9.63999C76.76 10.92 77.72 13.16 77.72 15.24C77.72 16.6 77.36 18.68 75.48 20.32C73.64 21.88 71.52 22.12 69.84 22.12H68.24V31.52H64.68V8.39999H69.76ZM83.4 22.36V8.39999H80V23.28C80 25.12 80.36 27.36 82.12 29.28C83.32 30.64 85.36 32 88.52 32C91.64 32 93.72 30.6 94.92 29.28C96.68 27.36 97.04 25.12 97.04 23.28V8.39999H93.48V22.36C93.48 23.6 93.44 25.16 92.76 26.36C92.08 27.52 90.48 28.72 88.44 28.72C86.36 28.72 84.8 27.52 84.12 26.36C83.44 25.16 83.4 23.6 83.4 22.36ZM113.24 11.72H104V17.6H112.96V20.92H104V28.2H113.24V31.52H100.44V8.39999H113.24V11.72ZM121.08 19.04H119.96V11.64H121.16C122.88 11.64 126 11.96 126 15.24C126 18.92 122.04 19.04 121.08 19.04ZM126.68 9.75999C125.16 8.75999 123.4 8.39999 120.56 8.39999H116.48V31.52H120.04V22.04H120.64L127.24 31.52H131.52L124.32 21.64C127.4 20.96 129.44 18.56 129.44 15.2C129.44 14.2 129.24 11.44 126.68 9.75999Z" fill="#003060" />
                    <path d="M40 0H0V40H40V0Z" fill="#DE0000" />
                    <path d="M27.28 15.84V9.95999L24.32 4.07999L21.36 9.95999V15.84H22.88V10.32L24.32 7.35999L25.8 10.32V15.84H27.28Z" fill="white" />
                    <path d="M32.04 17.72H8.03999V19.28H32.04V17.72Z" fill="white" />
                    <path d="M31.96 22.36C29.36 22.36 27.28 24.44 27.28 27.04V36.36C26.8 35.64 26.28 34.88 25.72 34.2V27.04C25.72 23.6 28.48 20.8 31.96 20.8V22.36Z" fill="white" />
                    <path d="M23.16 23.92C23.16 22.2 21.76 20.8 20 20.8C18.24 20.8 16.88 22.2 16.88 23.92V27.2C17.4 27.4 17.92 27.64 18.44 27.92V23.92C18.44 23.08 19.12 22.36 20 22.36C20.84 22.36 21.56 23.04 21.56 23.92V29.8L23.12 31L23.16 23.92Z" fill="white" />
                    <path d="M11.12 20.8C12.88 20.8 14.28 22.2 14.28 23.92H14.24V26.6C13.72 26.44 13.2 26.28 12.68 26.16V23.92C12.68 23.04 11.96 22.36 11.12 22.36C10.24 22.36 9.56 23.08 9.56 23.92V25.6L8 25.48V23.92C8 22.2 9.36 20.8 11.12 20.8Z" fill="white" />
                </g>
                <defs>
                    <clipPath id="clip0_1029_767">
                        <rect width="214" height="40" fill="white" />
                    </clipPath>
                </defs>
            </svg>
        </div>

        <div class="sds-nav__centeredContent text-truncate sds-textHelper sds-textSemiBold mx-auto flex-grow-1 text-center">
            Rendez-vous en ligne
        </div>

        <div class="sds-nav__alignEnd flex-shrink-0">

            <div class="sds-nav__languageSwitcher">
                <div class="sds-languageSwitcher dropdown">
                    <button class="sds-languageSwitcher__trigger sds-textHelper sds-textSemiBold dropdown-toggle" type="button" data-toggle="dropdown" data-display="static" aria-expanded="false">
                        Fr
                        <span class="sds-iconCircle sds-languageSwitcher__icon" aria-hidden="true">

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

                        </span>

                    </button>
                    <div class="sds-languageSwitcher__menu sds-actionMenu dropdown-menu dropdown-menu-right">
                        <a class="sds-actionMenu__item dropdown-item" href="#">
                            De
                        </a>
                        <a class="sds-actionMenu__item dropdown-item" href="#">
                            En
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</nav>
<nav class="{{ namespace }}nav{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	<div class="{{ namespace }}nav__inner">
		<a href="#back" class="{{namespace}}nav__back flex-shrink-0">
			{% render '@icon-circle-regular',{
				icon: "icon-chevronleft",
				classes: [namespace + "nav__backIcon"]
			},true %}
			<span class="{{namespace}}nav__backText {{ namespace }}textHelper">Retour</span>
		</a>
		<div class="{{ namespace }}nav__adaptiveLogo flex-shrink-0">
			<svg width="214" height="40" viewBox="0 0 214 40" fill="none" xmlns="http://www.w3.org/2000/svg">
				<g clip-path="url(#clip0_1029_767)">
					<path fill-rule="evenodd" clip-rule="evenodd" d="M192.88 12.12C193.4 12.56 193.72 13.04 193.92 13.56L196.76 11.92C196.28 10.96 195.6 10.16 195 9.59998C194.28 8.95998 192.84 8.03998 190.36 8.03998C186 8.03998 183.6 11 183.6 14.12C183.6 17.6 186.4 19.16 188.4 20L190.6 20.92C192.16 21.52 193.96 22.56 193.96 24.88C193.96 27.2 192.24 28.76 190.12 28.76C188.68 28.76 187.72 28.24 187.08 27.4C186.52 26.64 186.12 25.56 186.12 24.44L182.6 25.2C182.72 26.8 183.28 28.36 184.52 29.72C185.68 31.04 187.28 32.04 189.96 32.04C194.28 32.04 197.4 29.04 197.4 24.64C197.4 22 196.24 19.56 191.96 17.84L189.64 16.92C187.36 15.96 187.12 14.76 187.12 14.08C187.12 12.56 188.28 11.28 190.4 11.28C191.4 11.28 192.16 11.52 192.88 12.12ZM145.72 8.39999L136.76 17.64V8.39999H133.24V31.52H136.76V21.96L137.44 21.24L145.72 31.52H150.44L139.92 18.88L150.36 8.39999H145.72ZM155.64 11.72H164.88V8.39999H152.08V31.52H164.88V28.2H155.64V20.92H164.6V17.6H155.64V11.72ZM180.76 11.72H171.52V17.6H180.52V20.92H171.52V28.2H180.76V31.52H168.04V8.39999H180.76V11.72ZM210 13.56C209.8 13.04 209.48 12.56 208.96 12.12C208.24 11.52 207.48 11.28 206.44 11.28C204.32 11.28 203.16 12.56 203.16 14.08C203.16 14.76 203.4 15.96 205.68 16.92L208 17.84C212.28 19.56 213.44 22 213.44 24.64C213.44 29.04 210.32 32.04 206 32.04C203.32 32.04 201.72 31.04 200.56 29.72C199.32 28.36 198.76 26.8 198.64 25.2L202.16 24.44C202.16 25.56 202.56 26.64 203.12 27.4C203.76 28.24 204.72 28.76 206.16 28.76C208.28 28.76 210 27.2 210 24.88C210 22.56 208.2 21.52 206.64 20.92L204.44 20C202.56 19.2 199.72 17.64 199.72 14.16C199.72 11.04 202.12 8.07997 206.48 8.07997C209 8.07997 210.4 8.99997 211.12 9.63997C211.72 10.2 212.4 11 212.88 11.96L210 13.56ZM57.56 12.12C58.08 12.56 58.4 13.04 58.6 13.56L61.48 11.96C61 11 60.32 10.2 59.72 9.63997C59 8.99997 57.56 8.07997 55.08 8.07997C50.72 8.07997 48.32 11.04 48.32 14.16C48.32 17.64 51.16 19.2 53.04 20L55.24 20.92C56.8 21.52 58.6 22.56 58.6 24.88C58.6 27.2 56.88 28.76 54.76 28.76C53.32 28.76 52.36 28.24 51.72 27.4C51.16 26.64 50.76 25.56 50.76 24.44L47.24 25.2C47.36 26.8 47.92 28.36 49.16 29.72C50.32 31.04 51.92 32.04 54.6 32.04C58.92 32.04 62.04 29.04 62.04 24.64C62.04 22 60.88 19.56 56.6 17.84L54.28 16.92C52.04 15.96 51.8 14.76 51.8 14.08C51.8 12.56 52.96 11.28 55.08 11.28C56.08 11.28 56.84 11.52 57.56 12.12ZM68.2 18.88H69.8C72.88 18.88 74.32 17.4 74.32 15.24C74.32 13.96 73.8 11.64 69.76 11.64H68.2V18.88ZM69.76 8.39999C71.16 8.39999 73.16 8.51999 74.84 9.63999C76.76 10.92 77.72 13.16 77.72 15.24C77.72 16.6 77.36 18.68 75.48 20.32C73.64 21.88 71.52 22.12 69.84 22.12H68.24V31.52H64.68V8.39999H69.76ZM83.4 22.36V8.39999H80V23.28C80 25.12 80.36 27.36 82.12 29.28C83.32 30.64 85.36 32 88.52 32C91.64 32 93.72 30.6 94.92 29.28C96.68 27.36 97.04 25.12 97.04 23.28V8.39999H93.48V22.36C93.48 23.6 93.44 25.16 92.76 26.36C92.08 27.52 90.48 28.72 88.44 28.72C86.36 28.72 84.8 27.52 84.12 26.36C83.44 25.16 83.4 23.6 83.4 22.36ZM113.24 11.72H104V17.6H112.96V20.92H104V28.2H113.24V31.52H100.44V8.39999H113.24V11.72ZM121.08 19.04H119.96V11.64H121.16C122.88 11.64 126 11.96 126 15.24C126 18.92 122.04 19.04 121.08 19.04ZM126.68 9.75999C125.16 8.75999 123.4 8.39999 120.56 8.39999H116.48V31.52H120.04V22.04H120.64L127.24 31.52H131.52L124.32 21.64C127.4 20.96 129.44 18.56 129.44 15.2C129.44 14.2 129.24 11.44 126.68 9.75999Z" fill="#003060"/>
					<path d="M40 0H0V40H40V0Z" fill="#DE0000"/>
					<path d="M27.28 15.84V9.95999L24.32 4.07999L21.36 9.95999V15.84H22.88V10.32L24.32 7.35999L25.8 10.32V15.84H27.28Z" fill="white"/>
					<path d="M32.04 17.72H8.03999V19.28H32.04V17.72Z" fill="white"/>
					<path d="M31.96 22.36C29.36 22.36 27.28 24.44 27.28 27.04V36.36C26.8 35.64 26.28 34.88 25.72 34.2V27.04C25.72 23.6 28.48 20.8 31.96 20.8V22.36Z" fill="white"/>
					<path d="M23.16 23.92C23.16 22.2 21.76 20.8 20 20.8C18.24 20.8 16.88 22.2 16.88 23.92V27.2C17.4 27.4 17.92 27.64 18.44 27.92V23.92C18.44 23.08 19.12 22.36 20 22.36C20.84 22.36 21.56 23.04 21.56 23.92V29.8L23.12 31L23.16 23.92Z" fill="white"/>
					<path d="M11.12 20.8C12.88 20.8 14.28 22.2 14.28 23.92H14.24V26.6C13.72 26.44 13.2 26.28 12.68 26.16V23.92C12.68 23.04 11.96 22.36 11.12 22.36C10.24 22.36 9.56 23.08 9.56 23.92V25.6L8 25.48V23.92C8 22.2 9.36 20.8 11.12 20.8Z" fill="white"/>
				</g>
				<defs>
					<clipPath id="clip0_1029_767">
						<rect width="214" height="40" fill="white"/>
					</clipPath>
				</defs>
			</svg>
		</div>
		{% if cobranding %}
		<a class="{{ namespace }}nav__logoCoBranding" href="#">
			<img src="{{ (mediaPath + '/logos/logo-immotop-squared.svg') | path }}" class="img-fluid" alt="">
			<img src="{{ (mediaPath + '/logos/logo-immotop.svg') | path }}" class="img-fluid" alt="">
		</a>
		{% endif %}
		{% if navLabel %}
			<div class="{{ namespace }}nav__centeredContent text-truncate {{ namespace }}textHelper {{ namespace }}textSemiBold mx-auto flex-grow-1 text-center">
				{{ navLabel }}
			</div>
		{% endif %}
		<div class="{{ namespace }}nav__alignEnd flex-shrink-0">
			{% if hasStickyFooterContent %}
			<div class="{{ namespace }}nav__stickyFooterContent -staticMd">
				{% render "@btn-primary",{text: ctaText or "Espace S-Net"},true %}
			</div>
			{% endif %}
			<div class="{{ namespace }}nav__languageSwitcher">
				{% render "@spk-language-switcher" %}
			</div>
		</div>
	</div>
</nav>
  • Content:
    @use "sass:math";
    /* variables specific to current element */
    
    $element-specific-variables: "";
    
    .#{$namespace}nav {
    
    	/* Save root element context for easy access if nesting is needed */
    
    	$self: &;
    
    	/* properties of current element  + media queries */
    	@include custom-prop-fallback("color", "comp-navbar-text-color");
    	@include custom-prop-fallback("background-image","comp-navbar-background-color");
    	height: $nav-topbar-height;
    	@include make-container();
    
    	/* 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 */
    
    	// nav__back
    
    	&__back {
    
    		display: flex;
    		align-items: center;
    		margin-right: map-deep-get($token-spacer-unit-map, "8");
    		border-radius: map-deep-get($token-radius-map, "32");
    		font-weight: map-deep-get($token-font-weight-map, "semi-bold");
    		background-color: $nav-topbar-icon-background-hover;
    		height: $language-switcher-height-global;
    
    		@include media-breakpoint-up(lg) {
    			height: auto;
    			background-color: transparent;
    			padding-right: map-deep-get($token-spacer-unit-map, "16");
    			margin-right: map-deep-get($token-spacer-unit-map, "24");
    		}
    
    		&:hover,
    		&:focus {
    
    			@media (hover: hover) {
    				background-color: $nav-topbar-icon-background-hover;
    			}
    
    		}
    
    	}
    
    	&__inner {
    
    		@include contentSectionDimensions();
    		padding-left: 0;
    		padding-right: 0;
    		display: flex;
    		align-items: center;
    		height: 100%;
    		flex-wrap: nowrap;
    
    		> {
    
    			H1,.h1,
    			H2,.h2,
    			H3,.h3,
    			H4,.h4,
    			H5,.h5,
    			H6,.h6 {
    				color: inherit;
    				font-size: map-deep-get($token-font-size-map, "body", "s") !important;
    				font-family: inherit !important;
    				font-weight: map-deep-get($token-font-weight-map, "semi-bold") !important;
    			}
    
    		}
    
    	}
    
    	&__fakeSearch {
    
    		display: flex;
    		align-items: center;
    		@include custom-prop-fallback("background-color","comp-navbar-search-background-color");
    		border-radius: map-deep-get($token-radius-map, "button-small");
    		padding: $input-padding-x*0.5 $input-padding-x;
    		height: $language-switcher-height-global;
    		font-size: map-deep-get($token-font-size-map, "body", "s");
    		margin-right: map-deep-get($token-spacer-inline-map, "sm");
    		font-weight: map-deep-get($token-font-weight-map, "semi-bold") !important;
    
    		@include media-breakpoint-up(sm) {
    			padding: $input-padding-x $input-padding-x*2;
    			height: map-deep-get($token-button-size-big-map, "mobile" ,"min-height");
    			width: 180px;
    		}
    
    		@include hover-focus() {
    			text-decoration: none;
    			@include custom-prop-fallback("background-color","comp-navbar-button-hovered-background-color");
    		}
    
    		&:focus-visible {
    
    			outline-style: solid;
    			outline-width: map-deep-get($design-tokens, "comp-button-pressed-border-width");
    			@include custom-prop-fallback("outline-color", "comp-navbar-link-color-text-active-screenlarge", true, true);
    
    		}
    
    	}
    
    	&__fakeSearchText {
    
    		@include sr-only();
    
    		@include media-breakpoint-up(sm) {
    
    			@include undo-sr-only();
    			margin: 0;
    			margin-left: map-deep-get($token-spacer-inline-map, "sm");
    			padding: 0;
    			
    		}
    
    	}
    
    	&__collapseContainer {
    
    		height: $nav-topbar-height-global;
    		display: flex;
    		flex-grow: 1;
    
    		@include media-breakpoint-up(sm) {
    
    			position: relative;
    
    		}
    
    	}
    	
    	&__collapse {
    
    		margin: auto;
    		position: absolute;
    		top: calc(100% + #{map-deep-get($token-spacer-unit-map, "8")});
    		left: 0;
    		right: 0;
    		box-shadow: map-deep-get($token-shadow-map, "detail");
    		border-radius: map-deep-get($token-radius-map, "16");
    
    		@include media-breakpoint-up(sm) {
    
    			right: auto;
    			min-width: 320px;
    
    		}
    
    		@each $breakpoint in map-keys($grid-breakpoints) {
    			$next: breakpoint-next($breakpoint, $grid-breakpoints);
    			$infix: breakpoint-infix($next, $grid-breakpoints);
    
    			.navbar-expand#{$infix} & {
    
    				@include media-breakpoint-up($next) {
    
    					position: static;
    					box-shadow: none;
    					justify-content: center;
    					height: 100%;
    
    				}
    
    			}
    
    		}
    
    	}
    
    	&__collapseInner {
    
    		padding: $navbar-collapse-inner-padding;
    		@include custom-prop-fallback("background-color","comp-dropdown-background-color");
    		@include custom-prop-fallback("color","sys-color-text-primary-vivid");
    		border-radius: map-deep-get($token-radius-map, "16");
    
    		> * + * {
    
    			margin-top: map-deep-get($token-spacer-stack-max-map, "sm");
    
    		}
    
    		@each $breakpoint in map-keys($grid-breakpoints) {
    			$next: breakpoint-next($breakpoint, $grid-breakpoints);
    			$infix: breakpoint-infix($next, $grid-breakpoints);
    
    			.navbar-expand#{$infix} & {
    
    				@include media-breakpoint-up($next) {
    
    					padding: 0 map-deep-get($token-spacer-inset-map, "md");
    					flex-direction: row;
    					align-items: center;
    					background: transparent;
    					@include custom-prop-fallback("color", "sys-color-background-primary-30");
    					height: 100%;
    					overflow: visible;
    
    					> * + * {
    
    						margin-top: 0;
    
    					}
    
    				}
    
    			}
    
    		}
    
    	}
    
    	&__collapseItem {
    
    		&.active {
    
    			#{$self}__collapseLink {
    
    				@include custom-prop-fallback("background-color","comp-navbar-link-color-background-active-screensmall");
    				@include custom-prop-fallback("color","comp-navbar-link-color-text-active-screensmall");
    
    			}
    
    		}
    
    		@each $breakpoint in map-keys($grid-breakpoints) {
    			$next: breakpoint-next($breakpoint, $grid-breakpoints);
    			$infix: breakpoint-infix($next, $grid-breakpoints);
    
    			.navbar-expand#{$infix} & {
    
    				@include media-breakpoint-up($next) {
    
    					display: flex;
    					align-items: center;
    					height: 100%;
    
    					#{$self}__collapseLink {
    
    						&:focus-visible {
    
    							outline-style: solid;
    							outline-width: map-deep-get($design-tokens, "comp-button-pressed-border-width");
    							@include custom-prop-fallback("outline-color", "comp-navbar-link-color-text-active-screenlarge", true, true);
    
    
    						}
    
    					}
    
    					&.active {
    
    						#{$self}__collapseLink {
    
    							background-color: transparent;
    							@include custom-prop-fallback("color", "comp-navbar-link-color-text-active-screenlarge");
    
    						}
    
    					}
    
    				}
    
    			}
    
    		}
    
    	}
    
    	&__collapseLink#{$self}__collapseLink {
    
    		display: flex;
    		align-items: center;
    		padding: 0.75em $navbar-nav-link-padding-x-mobile;
    		border-radius: map-deep-get($token-radius-map, "8");
    		width: 100%; // for btn items
    		font-weight: map-deep-get($token-font-weight-map, "semi-bold");
    
    		[class*="icon"] {
    			transition: transform 0.1s linear;
    			margin-left: auto;
    		}
    
    		&[data-toggle="dropdown"] {
    
    			&[aria-expanded="true"] {
    
    				[class*="icon"] {
    					transform: rotate(180deg);
    				}
    
    			}
    
    		}
    
    		&:hover,
    		&:focus {
    			@media (hover: hover) {
    
    				@include custom-prop-fallback("background-color","comp-navbar-link-color-background-hovered-screensmall");
    				@include custom-prop-fallback("color", "comp-navbar-link-color-text-hovered-screensmall");
    
    			}
    		}
    
    		@each $breakpoint in map-keys($grid-breakpoints) {
    			$next: breakpoint-next($breakpoint, $grid-breakpoints);
    			$infix: breakpoint-infix($next, $grid-breakpoints);
    
    			.navbar-expand#{$infix} & {
    
    				@include media-breakpoint-up($next) {
    
    					padding-right: $navbar-nav-link-padding-x-desktop;
    					padding-left: $navbar-nav-link-padding-x-desktop;
    					font-size: map-deep-get($token-font-size-map, "body", "s");
    					border-radius: map-deep-get($token-radius-map, "32");
    					width: auto;
    
    					[class*="icon"] {
    						margin-left: map-deep-get($token-spacer-inline-map, "sm");
    					}
    
    					&[data-toggle="dropdown"] {
    
    						height: map-deep-get($token-button-size-big-map, "mobile" ,"min-height");
    
    						&[aria-expanded="true"] {
    
    							@include custom-prop-fallback("background-color","comp-navbar-link-color-background-hovered-screenlarge");
    							@include custom-prop-fallback("color", "comp-navbar-text-color");
    
    							[class*="icon"] {
    								transform: rotate(180deg);
    							}
    
    						}
    
    					}
    
    					&:hover,
    					&:focus {
    						@media (hover: hover) {
    							background-color: transparent;
    							@include custom-prop-fallback("color", "comp-navbar-text-color");
    						}
    					}
    
    				}
    
    			}
    
    		}
    
    	}
    
    	&__collapseDropdownMenu {
    
    		position: static;
    		float: none;
    		margin: 0 (-($navbar-collapse-inner-padding));
    		box-shadow: none;
    		padding-top: map-deep-get($token-spacer-inset-map, "xs");
    		padding-bottom: 0;
    		@include spacer-component-stack("xs");
    
    		.active {
    
    			#{$self}__collapseDropdownMenu {
    
    				@include custom-prop-fallback("background-color", "sys-color-elevation-surface-sunken");
    				@include custom-prop-fallback("color", "sys-color-text-secondary-vivid");
    
    			}
    
    			#{$self}__collapseDropdownItem {
    				@include custom-prop-fallback("background-color","comp-navbar-link-color-background-hovered-screensmall");
    				@include custom-prop-fallback("color", "comp-navbar-link-color-text-hovered-screensmall");
    			}
    
    		}
    
    		#{$self}__collapseDropdownItem {
    
    			display: flex;
    			align-items: center;
    			padding: map-deep-get($token-spacer-inset-map, "md") map-deep-get($token-spacer-inset-map, "sm");
    			padding-left: $navbar-collapse-inner-padding + map-deep-get($token-sizes-unit-map, "32") + map-deep-get($token-spacer-inline-map, "md");
    			border-radius: map-deep-get($token-radius-map, "8");
    			width: 100%; // for btn items
    			font-weight: map-deep-get($token-font-weight-map, "semi-bold");
    			font-size: map-deep-get($token-font-size-map, "body", "s");
    			@include custom-prop-fallback("color","sys-color-text-primary-vivid");
    
    			&:hover,
    			&:focus {
    				@media (hover: hover) {
    					@include custom-prop-fallback("background-color","comp-navbar-link-color-background-hovered-screensmall");
    					@include custom-prop-fallback("color", "comp-navbar-link-color-text-hovered-screensmall");
    				}
    
    			}
    
    			&:focus-visible {
    
    				outline-style: solid;
    				outline-width: map-deep-get($design-tokens, "comp-button-pressed-border-width");
    				@include custom-prop-fallback("outline-color", "comp-navbar-link-color-text-hovered-screensmall", true, true);
    
    			}
    
    		}
    
    		@each $breakpoint in map-keys($grid-breakpoints) {
    			$next: breakpoint-next($breakpoint, $grid-breakpoints);
    			$infix: breakpoint-infix($next, $grid-breakpoints);
    
    			.navbar-expand#{$infix} & {
    
    				@include media-breakpoint-up($next) {
    
    					position: absolute;
    					box-shadow: map-deep-get($token-shadow-map, "active");
    					padding: map-deep-get($token-spacer-inset-map, "sm");
    					top: calc(100% + #{map-deep-get($token-spacer-unit-map, "8")}) !important;
    					margin: 0;
    
    					#{$self}__collapseDropdownItem {
    
    						padding-left: map-deep-get($token-spacer-inset-map, "sm");
    						font-size: map-deep-get($token-font-size-map, "body", "m");
    
    					}
    
    				}
    
    			}
    
    		}
    
    	}
    
    	&__collapseToggler {
    
    		display: flex;
    		align-items: center;
    		align-self: center;
    		padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
    		font-size: $navbar-toggler-font-size;
    		font-weight: map-deep-get($token-font-weight-map, "semi-bold") !important;
    		height: map-deep-get($token-button-size-big-map, "mobile" ,"min-height");
    		gap: map-deep-get($token-spacer-inline-map, "sm");
    
    		[class*="icon"] {
    
    			@include icon-base;
    			transition: transform 0.1s linear;
    
    			&::before {
    
    				content: map-deep-get($token-icon-map, "burger");
    
    			}
    
    		}
    
    		&[aria-expanded="true"] {
    
    			[class*="icon"] {
    
    				&::before {
    
    					content: map-deep-get($token-icon-map, "close");
    
    				}
    
    			}
    
    		}
    
    		@include hover-focus() {
    			text-decoration: none;
    			@include custom-prop-fallback("background-color","comp-navbar-button-hovered-background-color");
    		}
    
    	}
    	
    	&__collapseLinkImg {
    
    		width: map-deep-get($token-sizes-unit-map, "32");
    		height: map-deep-get($token-sizes-unit-map, "32");
    		margin-right: map-deep-get($token-spacer-inline-map, "md");
    
    		svg,
    		IMG {
    
    			width: 100%;
    			height: 100%;
    			object-fit: cover;
    
    		}
    
    		@each $breakpoint in map-keys($grid-breakpoints) {
    			$next: breakpoint-next($breakpoint, $grid-breakpoints);
    			$infix: breakpoint-infix($next, $grid-breakpoints);
    
    			.navbar-expand#{$infix} &{
    
    				@include media-breakpoint-up($next) {
    
    					display: none;
    
    				}
    
    			}
    
    		}
    
    	}
    
    	&__backIcon {
    		//width: auto;
    	}
    
    	&__backText {
    		@include media-breakpoint-between(xs,md) {
    			@include sr-only;
    		}
    	}
    
    	&__adaptiveLogo {
    
    		width: $nav-topbar-logo-mobile-width-global;
    		height: $nav-topbar-logo-mobile-width-global;
    		overflow: hidden;
    		margin-right: map-deep-get($token-spacer-unit-map, "16");
    
    		svg {
    
    			path[fill="#{map-deep-get($design-tokens, 'sys-color-text-primary-vivid')}"] {
    				fill: map-deep-get($design-tokens, "comp-navbar-text-color");
    			}
    
    		}
    
    		@include media-breakpoint-up(lg) {
    			margin-right: map-deep-get($token-spacer-unit-map, "24");
    			width: auto;
    		}
    
    		* {
    			max-height: 100%;
    		}
    
    	}
    
    	&__alignEnd {
    
    		display: flex;
    		align-items: center;
    		justify-content: flex-end;
    		margin-left: auto;
    		gap: map-deep-get($token-spacer-inline-map, "sm")
    
    	}
    
    	&__languageSwitcher {
    
    		height: $nav-topbar-height-global;
    
    		@include media-breakpoint-up("lg") {
    			height: map-deep-get($token-button-size-big-map, "mobile" ,"min-height");
    		}
    		
    		> * {
    
    			height: 100%;
    			display: flex;
    			align-items: center;
    
    		}
    
    	}
    
    	// nav__stepper
    	&__stepper {
    
    		// follows same logic as parent
    
    		display: none;
    
    		@include media-breakpoint-up(lg) {
    			display: block;
    		}
    
    	}
    	
    	&__stickyFooterContent {
    
    		position: fixed;
    		z-index: z("sticky");
    		right: 0;
    		bottom: map-deep-get($token-spacer-stack-max-map, "xl");
    		left: 0;
    		display: flex;
    		align-items: center;
    		justify-content: center;
    
    		@each $breakpoint in map-keys($grid-breakpoints) {
    
    			$camelKey: camelize(static-#{$breakpoint});
    
    			&.-#{$camelKey} {
    
    				@include media-breakpoint-up(#{$breakpoint}) {
    
    					position: static;
    
    				}
    
    			}
    
    		}
    
    
    	}
    
    	/* @TODO replace with contextual class */
    	.dropdown-menu {
    
    		top: calc(100% + #{map-deep-get($token-spacer-unit-map, "8")});
    
    		@include media-breakpoint-up("lg") {
    			top: calc(100% + #{map-deep-get($token-spacer-unit-map, "16")});
    		}
    
    	}
    
    
    	/* modifiers */
    
    	// nav -altStyle
    	&.-cobranding {
    
    		#{$self}__logo {
    			flex-shrink: 0;
    		}
    
    		#{$self}__adaptiveLogo {
    			margin-right: map-deep-get($token-spacer-unit-map, "24");
    		}
    
    		#{$self}__logoCoBranding {
    
    			position: relative;
    			display: flex;
    			align-items: center;
    			flex-shrink: 0;
    			margin-right: map-deep-get($token-spacer-unit-map, "8");
    
    			&::before {
    
    				content: "";
    				margin-right: map-deep-get($token-spacer-unit-map, "24");
    				height: $nav-topbar-cobranding-logo-height-global;
    				width: 1.5px;
    				@include custom-prop-fallback("background-color", "sys-color-text-primary-muted");
    
    				flex-shrink: 0;
    
    			}
    
    
    			IMG {
    
    				width: $nav-topbar-logo-mobile-width-global;
    
    				&:last-child {
    
    					display: none;
    
    				}
    
    				@include media-breakpoint-up(lg){
    
    					width: auto;
    					height: $nav-topbar-cobranding-logo-height-global;
    
    					&:first-child {
    
    						display: none;
    
    					}
    
    					&:last-child {
    
    						display: block;
    
    					}
    
    				}
    
    			}
    
    		}
    
    		#{$self}__centeredContent {
    
    			display: block;
    			@include text-truncate;
    
    		}
    
    		#{$self}__content {
    
    			margin-left: map-deep-get($token-spacer-unit-map, "8");
    
    		}
    
    		#{$self}__dropdownToggle {
    
    			padding-left: 0;
    
    			@include media-breakpoint-up(lg){
    
    				padding-left: map-deep-get($token-spacer-unit-map, "16");
    
    			}
    
    		}
    
    	}
    
    	/* random parent element */
    	/* 
    	*
    	*   Syntax : .randomParentElt & {}
    	*
    	*/
    
    	/* Pseudo Classes */
    
    	&:hover {
    		@media (hover: hover) {
    
    		}
    	}
    
    	&:focus {
    	}
    
    	&:active {
    	}
    
    	&:focus,
    	&:active {
    	}
    
    }
  • URL: /components/raw/spk-nav/_nav.scss
  • Filesystem Path: components/spuerkeess-site/organisms/nav/_nav.scss
  • Size: 15.6 KB