No notes defined.
<div class="sds-frameContentBottomBar -isActive">
<div class="sds-frameContentBottomBar__container container">
<div class="d-flex">
<div class="sds-checkbox custom-control custom-checkbox">
<input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="default"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
<label class="custom-control-label" for="default">Débit global</label>
</div>
<button type="button" class="sds-infoDot sds-checkbox__infoDot" data-trigger="focus" data-container="body" data-placement="top" data-toggle="popover" data-content="Le détail de la / des transactions (bénéficiaire et communication) sera masqué dans les mouvements des transactions (sur S-Net Pro et dans les extraits de compte)">
<span class="sds-icon sds-icon-infocirclefill"></span>
<span class="sr-only">Show more info</span>
</button>
</div>
<div class="sds-frameContentBottomBar__alignEnd sds-btnGroup">
<button type="button" class="sds-btn -btnPrimary" disabled>
<span class="sds-btn__text">Contrôler</span>
</button>
</div>
</div>
</div>
<div class="{{ namespace }}frameContentBottomBar{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="{{ namespace }}frameContentBottomBar__container container">
{% render "@checkbox--info-dot",{
text: "Débit global",
checkboxCheckedState: checkboxCheckedState,
checkboxDisabledState: checkboxDisabledState,
infoDotDisabledState: infoDotDisabledState,
infoDotPopoverPlacement: "top"
},true %}
<div class="{{ namespace }}frameContentBottomBar__alignEnd {{ namespace }}btnGroup">
{% render "@btn-primary"+btnState,{
text: frameContentBottomBarValidationBtnText
},true %}
</div>
</div>
</div>
/* variables specific to current element */
$frame-content-bottom-bar-horiz-padding-mobile: $snet-frame-main-horiz-padding-mobile-global;
$frame-content-bottom-bar-horiz-padding-desktop: $snet-frame-main-horiz-padding-desktop-global;
$frame-content-bottom-bar-min-height: $frame-content-bottom-bar-min-height-global;
.#{$namespace}frameContentBottomBar {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
padding: map-deep-get($token-spacer-inset-map, "lg") 0;
min-height: $frame-content-bottom-bar-min-height;
@include custom-prop-fallback("background-color", "sys-color-elevation-surface-flat");
display: flex;
align-items: center;
position: fixed;
z-index: z("sticky");
bottom: 0;
left: 0;
right: 0;
box-shadow: map-get($token-shadow-map, "sidebar");
transform: translateY(100%);
transition: transform 0.15s linear;
//box-shadow: map-deep-get($token-shadow-map, "sidebar");
/* 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 {
max-width: map-get($container-max-widths, "xl");
padding-left: $snet-frame-menu-width-collapsed-global + $snet-frame-main-horiz-padding-mobile-global;
padding-right: $frame-content-bottom-bar-horiz-padding-mobile;
display: flex;
align-items: center;
@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
padding-left: $snet-frame-menu-open-width-global + $snet-frame-main-horiz-padding-desktop-global;
padding-right: $frame-content-bottom-bar-horiz-padding-desktop;
}
}
// frameContentBottomBar__alignEnd
&__alignEnd {
// follows same logic as parent
margin-left: auto;
}
&__transactionNumber {
display: flex;
align-items: center;
@include spacer-component-inline("md");
padding-left: $transaction-block-padding-mobile-global + map-deep-get($token-sizes-unit-map, "40") + $transaction-block-row-element-horizontal-margin-global + $transaction-block-amount-price-col-global + $transaction-block-row-element-horizontal-margin-global - ($transaction-block-negative-margin-global*2);
padding-left: calc(var(--sys-space-inset-horizontal-1000) + #{(map-deep-get($token-sizes-unit-map, "40") + $transaction-block-row-element-horizontal-margin-global + $transaction-block-amount-price-col-global + $transaction-block-row-element-horizontal-margin-global - ($transaction-block-negative-margin-global*2))});
}
/* modifiers */
// frameContentBottomBar -isActive
&.-isActive {
// follows same logic as base element
transform: translateY(0);
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
.#{$namespace}snetFrame.-fullWidth & {
#{$self}__container {
max-width: 100%;
}
}
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}