Frame Content Bottom Bar: Default

No notes defined.

<div class="sds-frameContentBottomBar">
    <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>
            <a href="#!" tabindex="0" 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>
            </a>
        </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>
  • Content:
    /* 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 {
    	}
    
    }
  • URL: /components/raw/snet-frame-content-bottom-bar/_frame-content-bottom-bar.scss
  • Filesystem Path: components/snet/molecules/frame-content-bottom-bar/_frame-content-bottom-bar.scss
  • Size: 3.1 KB