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>
@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 {
}
}