For zero notifications the class "-hasNotifEmpty" gets added to the "sds-navTopbar__item" element
For one or more notifications the class "-hasNotif" gets added to the "sds-navTopbar__item" element
The class "-hasLabelShown" can be added with a slight delay to show the transition
<header role="banner" class="sds-navTopbar">
<div class="sds-navTopbar__container">
<nav role="navigation" class="sds-navTopbar__inner navbar navbar-expand">
<div class="sds-navTopbar__alignToMainContent">
<a class="sds-navTopbar__logo navbar-brand" href="#">
<span class="sr-only">Accueil S-Net</span>
<img src="../../media/logos/logo-bcee.svg" class="img-fluid" alt="Logo Spuerkeess">
</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 -hasNotifEmpty -hasLabelShown">
<button type="button" class="sds-btn -iconBtn -secondary100 sds-navTopbar__icon dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span aria-hidden="true" class="sds-icon sds-icon-bell"></span>
</button>
<span class="sds-navTopbar__notificationLabel">
<span class="sds-navTopbar__notificationLabelText">
0
</span>
</span>
</li>
<li class="sds-navTopbar__item">
<button type="button" class="sds-btn -iconBtn -secondary100 sds-navTopbar__icon">
<span aria-hidden="true" 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-btn -btnSecondary -btnHasAvatar sds-navTopbar__btn" data-toggle="dropdown" aria-expanded="false">
<div class="sds-btn__avatar">
<div class="sds-avatar centeredBgi -avatarBase">
<div class="sds-avatar__text">JS</div>
</div>
</div>
<span class="sds-btn__text">
Jil Schmidt
</span>
<span class="sds-icon sds-icon-chevrondown"></span>
</button>
<div class="dropdown-menu dropdown-menu-right sds-fullScreenMinusTopNav dropdown-menu-inset-md sds-navTopbar__dropdown sds-navTopbar__userMenu">
<div class="sds-staticStackLg">
<div class="sds-listItem" data-scope-wrapper="box" data-scope="sunken">
<div class="sds-listItem__leading">
<div class="sds-avatar centeredBgi -avatarBase" aria-hidden="true">
<div class="sds-avatar__text">JS</div>
</div>
</div>
<div class="sds-listItem__center">
<div class="sds-staticStackXxs">
<p class="sds-textSemiBold sds-headingColor">Jil Schmidt</p>
<p class="sds-textHelper sds-metaColor">Mes données personnelles</p>
</div>
</div>
<div class="sds-listItem__trailing">
<button type="button" class="sds-btn -iconBtn -btnSecondary">
<span aria-hidden="true" class="sds-icon sds-icon-edit"></span>
<div class="sr-only">Editer mes données personnelles</div>
</button>
</div>
</div>
<div>
<ul class="list-unstyled sds-staticStackSm">
<li>
<a href="" class="sds-listItem" data-scope-wrapper="box" data-scope="flat">
<div class="sds-listItem__leading">
<span class="sds-iconBlock -iconBlockHighlight" aria-hidden="true">
<span class="sds-iconBlock__icon sds-icon sds-icon-chat"></span>
</span>
</div>
<div class="sds-listItem__center">
<p class="sds-textSemiBold sds-headingColor">Mes communications</p>
</div>
<div class="sds-listItem__trailing">
<span class="sds-badge badge -badgeHighlight -badgeSm">
99+
<span class="sr-only">notifications</span>
</span>
</div>
</a>
</li>
<li>
<a href="" class="sds-listItem" data-scope-wrapper="box" data-scope="flat">
<div class="sds-listItem__leading">
<span class="sds-iconBlock -iconBlockHighlight" aria-hidden="true">
<span class="sds-iconBlock__icon sds-icon sds-icon-chat"></span>
</span>
</div>
<div class="sds-listItem__center">
<p class="sds-textSemiBold sds-headingColor">Mes documents</p>
</div>
</a>
</li>
<li>
<a href="" class="sds-listItem" data-scope-wrapper="box" data-scope="flat">
<div class="sds-listItem__leading">
<span class="sds-iconBlock -iconBlockHighlight" aria-hidden="true">
<span class="sds-iconBlock__icon sds-icon sds-icon-chat"></span>
</span>
</div>
<div class="sds-listItem__center">
<p class="sds-textSemiBold sds-headingColor">Mes commandes</p>
</div>
</a>
</li>
<li>
<a href="" class="sds-listItem" data-scope-wrapper="box" data-scope="flat">
<div class="sds-listItem__leading">
<span class="sds-iconBlock -iconBlockHighlight" aria-hidden="true">
<span class="sds-iconBlock__icon sds-icon sds-icon-chat"></span>
</span>
</div>
<div class="sds-listItem__center">
<p class="sds-textSemiBold sds-headingColor">Mes rendez-vous</p>
</div>
</a>
</li>
<li>
<a href="" class="sds-listItem" data-scope-wrapper="box" data-scope="flat">
<div class="sds-listItem__leading">
<span class="sds-iconBlock -iconBlockHighlight" aria-hidden="true">
<span class="sds-iconBlock__icon sds-icon sds-icon-chat"></span>
</span>
</div>
<div class="sds-listItem__center">
<p class="sds-textSemiBold sds-headingColor">Paramètres</p>
</div>
</a>
</li>
</ul>
<div class="dropdown-divider" aria-hidden="true"></div>
<a href="" class="sds-listItem" data-scope-wrapper="box" data-scope="flat">
<div class="sds-listItem__leading">
<span class="sds-iconBlock -iconBlockHighlight" aria-hidden="true">
<span class="sds-iconBlock__icon sds-icon sds-icon-switch"></span>
</span>
</div>
<div class="sds-listItem__center">
<p class="sds-textSemiBold sds-headingColor">Changer de compte</p>
</div>
</a>
</div>
<section class="sds-staticStackSm">
<div class="sds-listItem -listItemNoInsetBlock -listItemStatic">
<p class="h4">Besoin d'aide?</p>
</div>
<button type="button" class="sds-listItem" data-scope-wrapper="box" data-scope="flat">
<span class="sds-listItem__leading">
<div class="sds-avatar centeredBgi">
<img class="img-fluid" src="../../media/snet/avatars/avatarUser.png" alt="">
</div>
</span>
<span class="sds-listItem__center">
<span class="sds-textSemiBold sds-headingColor">Contacter votre conseiller</span>
</span>
</button>
</section>
</div>
</div>
</li>
<li class="sds-navTopbar__item">
<button type="button" class="sds-btn -iconBtn -secondary100 sds-navTopbar__icon">
<span aria-hidden="true" class="sds-icon sds-icon-logout"></span>
</button>
</li>
</ul>
</div>
</nav>
</div>
</header>
<header role="banner"
class="{{ namespace }}navTopbar{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="{{ namespace }}navTopbar__container">
<nav role="navigation" class="{{ namespace }}navTopbar__inner navbar navbar-expand">
<div class="{{ namespace }}navTopbar__alignToMainContent">
<a class="{{ namespace }}navTopbar__logo navbar-brand" href="#">
<span class="sr-only">Accueil S-Net</span>
<img src="{{ (mediaPath + '/logos/logo-bcee.svg') | path }}" class="img-fluid" alt="Logo Spuerkeess">
</a>
</div>
<div class="{{ namespace }}navTopbar__meta {{ namespace }}textHelper">
<span>{% if bfm %}S-Net Professionnel{% elseif msp %}My Spuerkeess{% elseif cpb %}Corporate's Bridge{% else %}{% if onboarding %}Bienvenue sur S-Net{% else %}S-Net Privé{% endif %}{% endif %}</span>
<span class="{{ namespace }}navTopbar__metaTime">Mercredi, 23. Octobre・10:54</span>
</div>
<div class="{{ namespace }}navTopbar__collapse navbar-collapse" id="{{ namespace }}navTopbar__collapse">
<ul class="{{ namespace }}navTopbar__content navbar-nav">
{% if noActions %}
{% else %}
{% if msp %}
{% else %}
<li class="{{ namespace }}navTopbar__item dropdown{% if hasNotif %} -hasNotif -hasLabelShown{% elseif hasNotifEmpty %} -hasNotifEmpty -hasLabelShown{% endif %}">
{% render "@icon-btn-regular--secondary-100", {
icon: "icon-bell",
classes: [namespace + "navTopbar__icon", "dropdown-toggle"],
attrs: {
"data-toggle": "dropdown",
"aria-expanded": "false"
}
}, true %}
{% if hasNotif or hasNotifEmpty %}
<span class="{{ namespace }}navTopbar__notificationLabel">
<span class="{{ namespace }}navTopbar__notificationLabelText">
{% if hasNotifCount %}10{% endif %}
{% if hasNotifEmpty %}0{% endif %}
{% if hasWarningIcon %} <span
class="{{ namespace }}navTopbar__notificationLabelIcon {{ namespace }}icon {{ namespace }}icon-alert">
<span class="sr-only">You have stuff to check</span></span>{% endif %}
</span>
</span>
{% endif %}
{% if hasNotif %}
<div class="{{ namespace }}navTopbar__itemNotifAnim">
<span class="lottieBellAnim"></span>
</div>
{% endif %}
</li>
{% endif %}
{% if not bfm and not cpb %}
<li class="{{ namespace }}navTopbar__item">
{% render "@icon-btn-regular--secondary-100",{icon: "icon-speechbubble", classes: [namespace + "navTopbar__icon"]}, true %}
<span class="{{ namespace }}navTopbar__itemLabel {{ namespace }}textHelper">Aide</span>
</li>
{% endif %}
<li class="{{ namespace }}navTopbar__item dropdown{% if menuShown %} show{% endif %}">
{% if msp %}
<span
class="{{ namespace }}navTopbar__dropdownToggle -avatar -transparent -noInteraction">
{% render "@avatar--image",{
classes: [namespace + "navTopbar__userDropdownAvatar"],
img: "/snet/avatars/nopic/avatarNoPicWoman.svg"
},true %}
<span class="{{ namespace }}navTopbar__userDropdownLabel {{ namespace }}textHelper">Label With Name</span>
</span>
{% else %}
{% set userMenuDropdownToggleAvatarOptions = {
text: "JS"
} %}
{% if bfm %}
{% set userMenuDropdownToggleAvatarOptions = {
classes: ["-badgeVisible"],
img: "/snet/avatars/avatarUser.png",
text: "JS",
circleBadge: true,
iconCircle: "icon-business"
} %}
{% endif %}
{% render "@btn-secondary",{
classes: ["-btnHasAvatar",namespace + "navTopbar__btn"],
avatar: true,
btnAvatarOptions: userMenuDropdownToggleAvatarOptions,
text: "Jil Schmidt",
iconRight: true,
icon: "icon-chevrondown",
attrs: {
"data-toggle": "dropdown",
"aria-expanded": "false"
}
},true %}
{% endif %}
{% if bfm %}
{% render "@dropdown-user-menu--bfm",{
classes: [namespace + "navTopbar__dropdown",namespace + "navTopbar__userMenu"]
},true %}
{% elseif cpb %}
{% render "@cpb-user-menu",userMenuOptions,true %}
{% elseif msp %}
{% else %}
{% render "@dropdown-user-menu",{
classes: [namespace + "navTopbar__dropdown",namespace + "navTopbar__userMenu"]
},true %}
{% endif %}
</li>
{% endif %}
<li class="{{ namespace }}navTopbar__item">
{% render "@icon-btn-regular--secondary-100",{icon: "icon-logout", classes: [namespace + "navTopbar__icon"]},true %}
</li>
</ul>
</div>
</nav>
</div>
</header>
/* variables specific to current element */
$nav-topbar-height: $nav-topbar-height-global;
$nav-topbar-icon-background: map-deep-get($token-color-brand-map,"secondary","100");
$nav-topbar-icon-background-hover: map-deep-get($token-color-brand-map,"secondary","120");
$nav-topbar-logo-mobile-width: $nav-topbar-logo-mobile-width-global;
$nav-topbar-logo-desktop-width: 220px;
$snet-frame-menu-open-width: $snet-frame-menu-open-width-global;
$bfm-nav-topbar-icon-background: map-deep-get($token-color-brand-map,"secondary","160");
$bfm-nav-topbar-icon-background-hover: map-deep-get($token-color-grayscale-map,"1000");
.#{$namespace}navTopbar {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
@include custom-prop-fallback("background-color","comp-navbar-fallback-background-color");
@include custom-prop-fallback("background-image","comp-navbar-background-color");
color: map-deep-get($token-color-grayscale-map, "0");
height: $nav-topbar-height;
display: flex;
align-items: center;
/* 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 */
&__container {
padding: 0;
@include make-container();
max-width: none;
@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
max-width: map-deep-get($container-max-widths, "xl");
}
}
// navTopbar__inner
&__inner {
padding: 0;
> {
H1,.h1,
H2,.h2,
H3,.h3,
H4,.h4,
H5,.h5,
H6,.h6 {
color: inherit;
font-size: map-deep-get($design-tokens, "sys-font-size-helper-medium") !important;
font-family: inherit !important;
font-weight: map-deep-get($token-font-weight-map, "semi-bold") !important;
}
}
}
&__alignToMainContent {
display: flex;
align-items: center;
@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
width: $snet-frame-menu-open-width;
margin-right: map-deep-get($token-spacer-unit-map, "16");
}
}
// navTopbar__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;
}
}
}
&__centeredContent,
&__backText {
display: none;
@include media-breakpoint-up(lg) {
display: block;
}
}
// navTopbar__logo
&__logo {
width: $nav-topbar-logo-mobile-width-global;
height: $nav-topbar-logo-mobile-width-global;
overflow: hidden;
padding: 0;
margin-right: map-deep-get($token-spacer-unit-map, '16');
@include media-breakpoint-up(md){
width: $nav-topbar-logo-desktop-width;
height: auto;
}
IMG {
height: $nav-topbar-logo-mobile-width-global;
max-width: none;
@include media-breakpoint-up(md){
width: 100%;
height: auto;
max-width: 100%;
}
}
}
// navTopbar__collapse
&__collapse {
flex-grow: 0;
margin-left: auto;
}
// navTopbar__meta
&__meta {
// follows same logic as parent
display: none;
@include media-breakpoint-up(md){
font-weight: map-deep-get($token-font-weight-map, "semi-bold");
display: flex;
align-items: center;
}
}
&__centeredContent {
margin: auto;
font-weight: map-deep-get($token-font-weight-map, "semi-bold");
}
&__dropdownWrapper {
.dropdown-menu {
top: $nav-topbar-height;
}
}
// navTopbar__metaTime
&__metaTime {
color: map-deep-get($token-color-brand-map, 'secondary', '30');
display: none;
@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
display: block;
}
}
// navTopbar__content
&__content {
// follows same logic as parent
margin-left: auto;
@include spacer-component-inline("md");
}
&__item {
display: flex;
align-items: center;
position: relative;
z-index: z("low");
&.dropdown.show {
// follows same logic as base element
position: relative;
#{$self}__userMenu {
display: block;
}
}
&.-hasNotifEmpty {
#{$self}__icon {
@include gradient-directional(map-deep-get($token-color-brand-map, "primary", "100"), map-deep-get($token-color-brand-map, "gradient", "primary"), 0, 100%, 45deg, true);
}
}
&.-hasNotif {
position: relative;
#{$self}__icon {
position: relative;
z-index: z("low");
}
}
&.-hasLabelShown {
#{$self}__notificationLabel {
transform: scaleX(1) translateY(-50%);
}
#{$self}__notificationLabelText {
transition: opacity 0.1s linear;
transition-delay: 0.2s;
opacity: 1;
}
}
&:hover {
@media (hover: hover) {
#{$self}__itemIcon {
background-color: map-deep-get($token-color-brand-map,"secondary","120");
}
}
}
}
&__notificationLabel {
background-color: map-deep-get($token-color-grayscale-map, "0");
color: map-deep-get($token-color-grayscale-map, "1000");
position: absolute;
z-index: z("negative");
top: 50%;
transform: scaleX(0) translateY(-50%);
right: map-deep-get($token-spacer-unit-map, "16");
@include spacer-component-inset-horiz-greater("xs","sm");
padding-right: map-deep-get($token-spacer-unit-map, "32");
border-radius: map-deep-get($token-radius-map, "16");
transition: transform 0.15s ease-out;
transform-origin: right;
font-weight: map-deep-get($token-font-weight-map, "bold");
font-size: map-deep-get($design-tokens, "sys-font-size-helper-small");
}
&__notificationLabelText {
opacity: 0;
}
&__notificationLabelIcon {
display: inline-block;
transform: translateX(2px);
}
&__itemNotifAnim {
position: absolute;
z-index: z("low");
top: 50%;
left: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
pointer-events: none;
}
&__itemLabel {
font-weight: #{map-deep-get($token-font-weight-map, "semi-bold")};
margin-left: map-deep-get($token-spacer-unit-map,"8");
display: none;
@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
display: block;
}
}
// navTopbar__meta
// navTopbar__content
&__meta,
&__content {
@include spacer-component-inline('md');
}
&__dropdownToggle {
position: relative;
background-color: $nav-topbar-icon-background;
border-radius: map-deep-get($token-radius-map, "32");
display: flex;
align-items: center;
padding-left: map-deep-get($token-spacer-unit-map, "16");
font-weight: map-deep-get($token-font-weight-map, "semi-bold");
.#{$namespace}iconCircle {
display: none;
transition: transform 0.15s linear;
@include media-breakpoint-up(md){
display: inline-flex;
}
}
* {
color: map-deep-get($token-color-grayscale-map, "0");
}
&[aria-expanded="true"] {
> [class*="icon"] {
transform: rotate(180deg);
}
}
&.-avatar {
padding-left: 0;
}
&.-transparent {
background-color: transparent;
}
&.-noInteraction {
&:hover {
background-color: transparent;
}
}
&:hover {
background-color: $nav-topbar-icon-background-hover;
}
}
&__userDropdownAvatar {
}
&__userDropdownLabel {
padding-left: map-deep-get($token-spacer-unit-map, "8");
@include truncate-text(160px);
@include media-breakpoint-between(xs,sm){
@include sr-only;
}
@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
font-weight: #{map-deep-get($token-font-weight-map, "semi-bold")};
}
}
&__userMenu {
display: none;
position: absolute;
top: #{$nav-topbar-height};
width: 430px;
max-width: calc(100vw - #{$snet-frame-main-horiz-padding-mobile-global*2});
right: -(map-deep-get($token-sizes-unit-map, "72"));
margin-right: $snet-frame-main-horiz-padding-mobile-global;
@include media-breakpoint-up(sm){
right: 0;
margin-right: 0;
}
}
&__btn {
@include custom-prop-fallback-override("comp-button-secondary-background-color","comp-navbar-button-background-color");
@include custom-prop-fallback-override("comp-button-secondary-text-color","comp-navbar-button-text-color");
@include hover () {
@include custom-prop-fallback-override("comp-button-secondary-hovered-background-color","comp-navbar-button-hovered-background-color");
}
&:active {
@include custom-prop-fallback-override("comp-button-secondary-pressed-background-color","comp-navbar-button-pressed-background-color");
}
@include focus-visible () {
@include custom-prop-fallback-override("comp-button-secondary-pressed-background-color","comp-navbar-button-pressed-background-color");
@include custom-prop-fallback-override("comp-button-secondary-pressed-border-color","comp-navbar-button-text-color");
}
}
&__dropdown {
top: $nav-topbar-height-global;
}
/* modifiers */
// navTopbar -altStyle
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
.cpb-theme &,
.bfm-theme & {
// follows same logic as base element
@include gradient-directional(map-deep-get($token-color-brand-map, "secondary", "160"), map-deep-get($token-color-brand-map, "secondary", "140"), 0, 100%, 45deg, true);
&__back {
background-color: $bfm-nav-topbar-icon-background;
&:hover,
&:focus {
@media (hover: hover) {
background-color: $bfm-nav-topbar-icon-background;
}
}
}
&__icon,
&__dropdownToggle {
background-color: $bfm-nav-topbar-icon-background;
&:hover {
background-color: $bfm-nav-topbar-icon-background-hover;
}
}
&__hoverBackground {
&:hover {
background-color: $bfm-nav-topbar-icon-background-hover;
}
}
}
.-fullWidth & {
#{$self}__container {
max-width: none;
}
}
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}