The progress bar badge positiong has to be adjusted depending on the progress element's width. sds-progress__badge should be positioned slightly more to the right when either a low or high progress percentage hs been reached, so as not to disappear offscreen on the left or be cut off by the parent element menu's overflow on the right.
The following classes need to be present on the sds-snetFrame element for styles to be rendered correctly:
<div class="sds-snetFrame -menuToggleVisible -fullWidth">
<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>Corporate's Bridge</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 -hasNotif -hasLabelShown">
<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>
<span class="sds-navTopbar__notificationLabel">
<span class="sds-navTopbar__notificationLabelText">
10
</span>
</span>
<div class="sds-navTopbar__itemNotifAnim">
<span class="lottieBellAnim"></span>
</div>
</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">Corporate's Bridge</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">Changer de convention</span>
<div class="sds-userMenu__itemMeta d-flex align-items-center">
<span class="sds-iconCircle -secondary10" aria-hidden="true">
<span class="sds-icon sds-icon-switch"></span>
</span>
</div>
</a>
</li>
<li class="sds-userMenu__item -borderTop">
<div class="sds-userMenu__link d-flex align-items-center justify-content-between -isStatic">
<span class="font-weight-semibold">Langue</span>
<div class="sds-btnGroup">
<a href="" class="sds-numberCircle -secondary10 -large sds-userMenu__langItem ">
EN
</a>
<a href="" class="sds-numberCircle -secondary10 -large sds-userMenu__langItem -isActive">
FR
</a>
<a href="" class="sds-numberCircle -secondary10 -large sds-userMenu__langItem ">
DE
</a>
</div>
</div>
</li>
</ul>
</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 -isSeparator -isFloating">
<a href="" data-toggle="dropdown" id="cpbShortCutMenu" data-boundary="viewport" data-reference="parent" class="sds-snetFrame__menuLink">
<span data-toggle="tooltip" data-title="Nouvelle Demande" data-placement="right" data-boundary="window">
<span class="sds-iconCircle -successG" aria-hidden="true">
<span class="sds-icon sds-icon-plus"></span>
</span>
</span>
<span class="sds-snetFrame__menuItemText">Nouvelle Demande</span>
</a>
</li>
<li class="sds-snetFrame__menuItem -isActive">
<a href="" class="sds-snetFrame__menuLink">
<span data-toggle="tooltip" data-title="Tableau de bord" data-placement="right" data-boundary="window">
<span class="sds-iconCircle -secondary60 sds-snetFrame__menuLinkBubble" aria-hidden="true">
<span class="sds-icon sds-icon-graphgauge"></span>
</span>
</span>
<span class="sds-snetFrame__menuItemText">Tableau de bord</span>
</a>
</li>
<li class="sds-snetFrame__menuItem">
<a href="" class="sds-snetFrame__menuLink">
<span data-toggle="tooltip" data-title="Entités" data-placement="right" data-boundary="window">
<span class="sds-iconCircle -secondary60 sds-snetFrame__menuLinkBubble" aria-hidden="true">
<span class="sds-icon sds-icon-business"></span>
</span>
</span>
<span class="sds-snetFrame__menuItemText">Entités</span>
</a>
</li>
<li class="sds-snetFrame__menuItem">
<a href="" class="sds-snetFrame__menuLink">
<span data-toggle="tooltip" data-title="Suivi des demandes" data-placement="right" data-boundary="window">
<span class="sds-iconCircle -secondary60 sds-snetFrame__menuLinkBubble" aria-hidden="true">
<span class="sds-icon sds-icon-list"></span>
</span>
</span>
<span class="sds-snetFrame__menuItemText">Suivi des demandes</span>
</a>
</li>
<li class="sds-snetFrame__menuItem">
<a href="" class="sds-snetFrame__menuLink">
<span data-toggle="tooltip" data-title="Dossiers due diligence" data-placement="right" data-boundary="window">
<span class="sds-iconCircle -secondary60 sds-snetFrame__menuLinkBubble" aria-hidden="true">
<span class="sds-icon sds-icon-folder"></span>
</span>
</span>
<span class="sds-snetFrame__menuItemText">Dossiers due diligence</span>
</a>
</li>
<li class="sds-snetFrame__menuItem">
<a href="" class="sds-snetFrame__menuLink">
<span data-toggle="tooltip" data-title="Gestion des droits" data-placement="right" data-boundary="window">
<span class="sds-iconCircle -secondary60 sds-snetFrame__menuLinkBubble" aria-hidden="true">
<span class="sds-icon sds-icon-locked"></span>
</span>
</span>
<span class="sds-snetFrame__menuItemText">Gestion des droits</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 -->
{% extends "@snet-page-frame" %}
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}snetFrame {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
/* 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 */
&__submenuLink {
color: map-deep-get($token-color-brand-map, "secondary", "60");
}
/* modifiers */
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}