No notes defined.
<div class="sds-toggleTab -fullWidth">
<label class="sds-btn -btnSecondary -btnSmall sds-toggleTab__btn">
<span class="sds-btn__text">Heures</span>
</label>
<label class="sds-btn -btnSecondary -btnSmall sds-toggleTab__btn -isActive">
<span class="sds-btn__text">Jours</span>
</label>
</div>
<div class="{{ namespace }}toggleTab{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}"{% for attrKey, attr in attrs %} {{ attrKey }}="{{ attr }}"{% endfor %}>
{% render "@btn-secondary--small",{
eltType: "label",
text: toggleTabBtn1Text,
classes: [namespace+"toggleTab__btn"]
},true %}
{% render "@btn-secondary--small",{
eltType: "label",
text: toggleTabBtn2Text,
classes: [namespace+"toggleTab__btn", "-isActive"]
},true %}
</div>
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 {
}
}