No notes defined.
<div class="sds-frameContentBottomBar">
<div class="sds-frameContentBottomBar__container container">
<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">
<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 {
}
}