Checkbox: Info Dot

No notes defined.

<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">Check this custom checkbox</label>

    </div>
    <a href="#!" tabindex="0" class="sds-infoDot sds-checkbox__infoDot" data-trigger="focus" data-container="body" data-placement="left" 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="d-flex">
	<div class="{{ namespace }}checkbox custom-control custom-checkbox">
		{% render "@checkbox-dot",{
			classes: [namespace+"checkbox__shape"],
			inputModifiers: ["custom-control-input",state],
			id: id,
			checked: checkboxCheckedState,
			disabled: checkboxDisabledState
		},true %}
		<label class="custom-control-label" for="{{ id }}">{{ text }}</label>
		{% if error %}
		<div class="{{ namespace }}checkbox__error invalid-feedback">Error message</div>
		{% endif %}
	</div>
	{% render "@info-dot",{
		placement: infoDotPopoverPlacement,
		classes: [namespace+"checkbox__infoDot"],
		title: false,
		disabled: infoDotDisabledState
	},true %}
</div>
  • Content:
    /* variables specific to current element */
    
    $checkbox-collapse-padding: map-deep-get($token-spacer-unit-map, "16");
    
    .#{$namespace}checkboxCollapse {
    
    	/* Save root element context for easy access if nesting is needed */
    
    	$self: &;
    
    	/* properties of current element  + media queries */
    	padding: $checkbox-collapse-padding;
    	border-radius: map-deep-get($token-radius-map, "16");
    	border: $border-width solid;
    	@include custom-prop-fallback("border-color","sys-color-border-primary-moderate");
    
    	/* 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 */
    
    	// checkboxCollapse__inner
    	&__inner {
    
    		padding-top: map-deep-get($token-spacer-inset-map, "md");
    		padding-bottom: map-deep-get($token-spacer-inset-map, "sm"); /* SM because the + the value of the parent's padding = 24 */
    
    	}
    
    	&__row {
    
    		margin-bottom: 0 !important;
    		
    		> [class*="col"] {
    
    			margin-bottom: 0;
    
    		}
    
    		&.row-sm {
    
    			row-gap: $grid-gutter-width-sm;
    
    		}
    
    	}
    	
    	&__triggerZone {
    
    		display: flex;
    		align-items: center;
    		position: relative;
    
    	}
    
    	&__triggerInfoDot {
    
    		align-self: baseline;
    
    	}
    
    	&__checkboxLabel {
    
    		@extend .stretched-link;
    		&::after {
    			top: -$checkbox-collapse-padding;
    			right: -$checkbox-collapse-padding;
    			bottom: -$checkbox-collapse-padding;
    			left: -$checkbox-collapse-padding;
    		}
    
    	}
    
    
    	/* modifiers */
    
    	// checkboxCollapse -altStyle
    	&.-altStyle {
    
    		// follows same logic as base element
    
    	}
    
    	/* random parent element */
    	/* 
    	*
    	*   Syntax : .randomParentElt & {}
    	*
    	*/
    
    	/* Pseudo Classes */
    
    	&:hover {
    		@media (hover: hover) {
    
    		}
    	}
    
    	&:focus {
    	}
    
    	&:active {
    	}
    
    	&:focus,
    	&:active {
    	}
    
    }
  • URL: /components/raw/checkbox/_checkbox-collapse.scss
  • Filesystem Path: components/base-components/atoms/forms/checkbox/_checkbox-collapse.scss
  • Size: 1.9 KB
  • Content:
    /* variables specific to current element */
    
    .#{$namespace}checkbox {
    
    	/* Save root element context for easy access if nesting is needed */
    
    	$self: &;
    
    	/* properties of current element  + media queries */
    
    	display: flex;
    	flex-direction: column;
    	cursor: pointer;
    	width: fit-content;
    
    	/* 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 */
    
    	A {
    
    		@extend .#{$namespace}link;
    
    	}
    
    	// checkbox__shape
    	&__shape {
    
    		// follows same logic as parent
    
    		position: absolute;
    		z-index: z("low");
    		left: 0;
    		top: 0;
    		pointer-events: none;
    
    	}
    
    	&__error,
    	&__hint {
    
    		margin-top: 0;
    		padding-left: $custom-control-label-shape-space;
    
    	}
    
    	&__hint {
    
    		@include custom-prop-fallback("color", "sys-color-text-primary-muted");
    
    	}
    
    	&__infoDot {
    
    		margin-left: map-deep-get($token-spacer-unit-map, "16");
    
    	}
    
    	/* modifiers */
    
    	// checkbox -active
    	&.-alert {
    
    		$checkbox-alert-padding-inline-start: map-deep-get($token-spacer-inset-map, "lg") + $custom-control-indicator-size;
    		width: auto;
    
    		.custom-control-label {
    
    			padding-top: map-deep-get($token-spacer-inset-map, "md");
    			padding-bottom: map-deep-get($token-spacer-inset-map, "md");
    			padding-right: map-deep-get($token-spacer-inset-map, "md");
    			padding-left: map-deep-get($token-spacer-inset-map, "lg") + $custom-control-indicator-size;
    			@include custom-prop-fallback("background-color", "sys-color-background-secondary-6");
    			border-radius: map-deep-get($token-radius-map, "16");
    
    		}
    
    		.custom-control-input:checked ~ .custom-control-label {
    
    			@include custom-prop-fallback("background-color", "sys-color-background-primary-10");
    
    		}
    
    		#{$self}__shape {
    
    			top: map-deep-get($token-spacer-inset-map, "md");
    			left: map-deep-get($token-spacer-inset-map, "md");
    
    		}
    
    		#{$self}__error {
    
    			padding-left: $checkbox-alert-padding-inline-start;
    
    		}
    
    		&.-optional {
    
    			.custom-control-label {
    
    				@include custom-prop-fallback("background-color", "sys-color-background-primary-10");
    
    			}
    
    		}
    
    	}
    
    	/* random parent element */
    	/* 
    	*
    	*   Syntax : .randomParentElt & {}
    	*
    	*/
    
    	/* Pseudo Classes */
    
    	&:hover {
    		@media (hover: hover) {
    			#{$self}__shape {
    				@include checkboxHovered();
    			}
    		}
    	}
    
    	&:focus {
    	}
    
    	&:active {
    	}
    
    	&:focus,
    	&:active {
    	}
    
    }
  • URL: /components/raw/checkbox/_checkbox.scss
  • Filesystem Path: components/base-components/atoms/forms/checkbox/_checkbox.scss
  • Size: 2.5 KB