No notes defined.
<nav>
<ul class="sds-toggleTab list-unstyled nav" id="" role="tablist">
<li class="nav-item" role="presentation">
<button type="button" class="sds-btn -btnSecondary -btnSmall sds-toggleTab__btn -isActive active" id="" data-toggle="tab" data-target="#ordres-a-valider" role="tab" aria-controls="ordres-a-valider" aria-selected="true">
<span class="sds-btn__text">Ordres de virement</span>
<div class="sds-badge badge sds-btn__badge -primary100 -small">
99+
</div>
</button>
</li>
<li class="nav-item" role="presentation">
<button type="button" class="sds-btn -btnSecondary -btnSmall sds-toggleTab__btn" id="" data-toggle="tab" data-target="#ordres-valides" role="tab" aria-controls="ordres-valides" aria-selected="false">
<span class="sds-btn__text">Ordres permanents</span>
</button>
</li>
</li>
</ul>
</nav>
<nav>
<ul class="{{ namespace }}toggleTab list-unstyled nav{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}" id="{{ id }}" role="tablist">
{% for key, item in toggleTabItems %}
{% if item.active %}
{% set classes = [namespace+"toggleTab__btn", "-isActive", "active"] %}
{% else %}
{% set classes = [namespace+"toggleTab__btn"] %}
{% endif %}
<li class="nav-item" role="presentation">
{% render "@btn-secondary--small",{
text: item.text,
classes: classes,
attrs: {
"id": item.id,
"data-toggle":"tab",
"data-target": "#"+item.target,
"role": "tab",
"aria-controls": item.target,
"aria-selected": item.selection
},
badge: item.badge
},true %}
</li>
{% endfor %}
</li>
</ul>
</nav>
export default class ToggleTab {
constructor() {
this.toggleClasses();
}
toggleClasses () {
$(".sds-toggleTab").find(".sds-toggleTab__btn").on("click", (e) => {
$(".sds-toggleTab__btn").removeClass("-isActive");
$(e.currentTarget).each(function( index, elt ) {
$(elt).addClass("-isActive");
});
})
}
}
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}toggleTab {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
@include custom-prop-fallback("background-color","sys-color-elevation-surface-sunken");
border-radius: map-deep-get($token-radius-map, "32");
display: inline-flex;
gap: map-deep-get($design-tokens, "ui-space-inline-static-500");
@include spacer-component-inset("xs");
/* 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 */
// toggleTab__childElement
&__btn#{$self}__btn {
// follows same logic as parent
background-color: transparent ;
//min-height: map-deep-get($token-spacer);
&.active,
&.-isActive {
@include custom-prop-fallback("background-color","comp-button-secondary-hovered-background-color");
}
INPUT:checked + & {
@include custom-prop-fallback("background-color", "comp-button-secondary-hovered-background-color");
}
INPUT:checked:focus-visible + & {
outline-style: solid !important;
outline-width: map-deep-get($design-tokens, "comp-button-pressed-border-width") !important;
}
}
/* modifiers */
// toggleTab -fullWidth
&.-fullWidth {
// follows same logic as base element
width: 100%;
> * {
flex-grow: 1;
}
#{$self}__btn {
width: 100%;
}
}
&.-light {
@include custom-prop-fallback("background-color","sys-color-elevation-surface-flat");
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}