Checkbox

No notes defined.

<!-- Default -->
<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 class="sds-checkbox__error invalid-feedback">Error message</div>
</div>

<!-- Checked -->
<div class="sds-checkbox custom-control custom-checkbox">
    <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="checkboxxed" checked><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
    <label class="custom-control-label" for="checkboxxed">Check this custom checkbox</label>

    <div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>

<!-- Indeterminate -->
<div class="sds-checkbox custom-control custom-checkbox">
    <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="indeterminate" data-js-checkbox-indeterminate=""><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
    <label class="custom-control-label" for="indeterminate">Check this custom checkbox</label>

    <div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>

<!-- Loading -->
<div class="sds-checkbox custom-control custom-checkbox">
    <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="loading" disabled><span class="sds-checkboxDot sds-checkbox__shape -isLoading" aria-hidden="true"></span>
    <label class="custom-control-label" for="loading">Check this custom checkbox</label>

    <div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>

<!-- Disabled -->
<div class="sds-checkbox custom-control custom-checkbox">
    <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="checkbox-disabled" disabled><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
    <label class="custom-control-label" for="checkbox-disabled">Check this custom checkbox</label>

    <div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>

<!-- Checked Disabled -->
<div class="sds-checkbox custom-control custom-checkbox">
    <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="checkbox-checked-disabled" disabled checked><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
    <label class="custom-control-label" for="checkbox-checked-disabled">Check this custom checkbox</label>

    <div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>

<!-- Error -->
<div class="sds-checkbox custom-control custom-checkbox">
    <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input is-invalid" id="checkbox-error"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
    <label class="custom-control-label" for="checkbox-error">Check this custom checkbox</label>

    <div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>

<!-- Hint -->
<div class="sds-checkbox custom-control custom-checkbox">
    <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="checkbox-hint"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
    <label class="custom-control-label" for="checkbox-hint">Check this custom checkbox</label>

    <p class="sds-checkbox__hint sds-textHelperSmall">Checkbox hint</p>

    <div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>

<!-- Alert -->
<div class="sds-checkbox custom-control custom-checkbox -alert">
    <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="checkbox-alert"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
    <label class="custom-control-label" for="checkbox-alert">Check this custom checkbox</label>

    <div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>

<!-- Alert Link -->
<div class="sds-checkbox custom-control custom-checkbox -alert">
    <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="checkbox-alert-link"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
    <label class="custom-control-label" for="checkbox-alert-link">Les données à caractère personnel collectées sont traitées dans le strict respect de la législation relative à la protection des personnes physiques à l'égard du traitement des données à caractère personnel. Vous disposez notamment d'un droit d'accès et de rectification de ces données en envoyant votre demande par message S-Net, e-mail ou courrier à l'<a href='https://www.spuerkeess.lu'>adresse suivante</a>.<br> Pour plus d'informations : <a href='https://www.spuerkeess.lu'>Data Protection Policy</a></label>

    <div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>

<!-- Alert Optional -->
<div class="sds-checkbox custom-control custom-checkbox -alert -optional">
    <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="checkbox-alert-optional"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
    <label class="custom-control-label" for="checkbox-alert-optional">Check this custom checkbox</label>

    <div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>

<!-- Alert Error -->
<div class="sds-checkbox custom-control custom-checkbox -alert">
    <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input is-invalid" id="checkbox-alert-error"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
    <label class="custom-control-label" for="checkbox-alert-error">Check this custom checkbox</label>

    <div class="sds-checkbox__error invalid-feedback">Error message</div>
</div>

<!-- Collapse -->
<div class="sds-checkboxCollapse">
    <div class="sds-checkboxCollapse__triggerZone">
        <div class="sds-checkbox custom-control custom-checkbox flex-grow-1">
            <input value="checkbox-value" type="checkbox" name="" class="sr-only custom-control-input " id="checkbox-collapse" aria-expanded="false" data-toggle="collapse" data-target="#checkboxCollapse" aria-controls="checkboxCollapse"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
            <label class="sds-checkboxCollapse__checkboxLabel custom-control-label" for="checkbox-collapse">Check this custom checkbox</label>
            <div class="sds-checkbox__error invalid-feedback">Error message</div>
        </div>

        <div class="sds-aboveClickArea d-flex align-self-baseline">

            <button type="button" class="sds-infoDot" data-toggle="modal" data-target="#">
                <span class="sds-icon sds-icon-infocircleborder"></span>
            </button>

        </div>

    </div>
    <div class="sds-collapse collapse" id="checkboxCollapse">
        <div class="sds-checkboxCollapse__inner">
            <div class="sds-checkboxCollapse__row row row-sm no-bottom-gutter">
                <div class="col-12 col-md-6">
                    <label for="" class="sds-label -form">
                        Label

                    </label>
                    <div class="sds-input">
                        <input id="" class="sds-input form-control" type="text" placeholder="Entrez une communication" value="">

                    </div>
                </div>
                <div class="col-12 col-md-6">
                    <label for="" class="sds-label -form">
                        Label

                    </label>
                    <div class="sds-input">
                        <input id="" class="sds-input form-control" type="text" placeholder="Entrez une communication" value="">

                    </div>
                </div>
                <div class="col-12 col-md-6">
                    <label for="" class="sds-label -form">
                        Label

                    </label>
                    <div class="sds-input -hasIcon -calendar">
                        <input class="sds-input form-control" type="text" placeholder="11/04/2023" value="">

                        <div class="sds-input__iconRight">
                            <span class="sds-icon sds-icon-calendar"></span>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Info Dot -->
<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>

<!-- Default -->
<div class="{{ namespace }}checkbox custom-control custom-checkbox{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	{% render "@checkbox-dot",{
		classes: checkboxDotClasses,
		inputModifiers: ["custom-control-input",state],
		id: id,
		checked: checked,
		disabled: disabled,
		attrs: checkboxShapeAttrs
	},true %}
	<label class="custom-control-label" for="{{ id }}">{{ text | safe }}</label>
	{% if hint %}
		<p class="{{ namespace }}checkbox__hint {{ namespace }}textHelperSmall">Checkbox hint</p>
	{% endif %}
	<div class="{{ namespace }}checkbox__error invalid-feedback">Error message</div>
</div>

<!-- Checked -->
<div class="{{ namespace }}checkbox custom-control custom-checkbox{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	{% render "@checkbox-dot",{
		classes: checkboxDotClasses,
		inputModifiers: ["custom-control-input",state],
		id: id,
		checked: checked,
		disabled: disabled,
		attrs: checkboxShapeAttrs
	},true %}
	<label class="custom-control-label" for="{{ id }}">{{ text | safe }}</label>
	{% if hint %}
		<p class="{{ namespace }}checkbox__hint {{ namespace }}textHelperSmall">Checkbox hint</p>
	{% endif %}
	<div class="{{ namespace }}checkbox__error invalid-feedback">Error message</div>
</div>

<!-- Indeterminate -->
<div class="{{ namespace }}checkbox custom-control custom-checkbox{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	{% render "@checkbox-dot",{
		classes: checkboxDotClasses,
		inputModifiers: ["custom-control-input",state],
		id: id,
		checked: checked,
		disabled: disabled,
		attrs: checkboxShapeAttrs
	},true %}
	<label class="custom-control-label" for="{{ id }}">{{ text | safe }}</label>
	{% if hint %}
		<p class="{{ namespace }}checkbox__hint {{ namespace }}textHelperSmall">Checkbox hint</p>
	{% endif %}
	<div class="{{ namespace }}checkbox__error invalid-feedback">Error message</div>
</div>

<!-- Loading -->
<div class="{{ namespace }}checkbox custom-control custom-checkbox{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	{% render "@checkbox-dot",{
		classes: checkboxDotClasses,
		inputModifiers: ["custom-control-input",state],
		id: id,
		checked: checked,
		disabled: disabled,
		attrs: checkboxShapeAttrs
	},true %}
	<label class="custom-control-label" for="{{ id }}">{{ text | safe }}</label>
	{% if hint %}
		<p class="{{ namespace }}checkbox__hint {{ namespace }}textHelperSmall">Checkbox hint</p>
	{% endif %}
	<div class="{{ namespace }}checkbox__error invalid-feedback">Error message</div>
</div>

<!-- Disabled -->
<div class="{{ namespace }}checkbox custom-control custom-checkbox{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	{% render "@checkbox-dot",{
		classes: checkboxDotClasses,
		inputModifiers: ["custom-control-input",state],
		id: id,
		checked: checked,
		disabled: disabled,
		attrs: checkboxShapeAttrs
	},true %}
	<label class="custom-control-label" for="{{ id }}">{{ text | safe }}</label>
	{% if hint %}
		<p class="{{ namespace }}checkbox__hint {{ namespace }}textHelperSmall">Checkbox hint</p>
	{% endif %}
	<div class="{{ namespace }}checkbox__error invalid-feedback">Error message</div>
</div>

<!-- Checked Disabled -->
<div class="{{ namespace }}checkbox custom-control custom-checkbox{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	{% render "@checkbox-dot",{
		classes: checkboxDotClasses,
		inputModifiers: ["custom-control-input",state],
		id: id,
		checked: checked,
		disabled: disabled,
		attrs: checkboxShapeAttrs
	},true %}
	<label class="custom-control-label" for="{{ id }}">{{ text | safe }}</label>
	{% if hint %}
		<p class="{{ namespace }}checkbox__hint {{ namespace }}textHelperSmall">Checkbox hint</p>
	{% endif %}
	<div class="{{ namespace }}checkbox__error invalid-feedback">Error message</div>
</div>

<!-- Error -->
<div class="{{ namespace }}checkbox custom-control custom-checkbox{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	{% render "@checkbox-dot",{
		classes: checkboxDotClasses,
		inputModifiers: ["custom-control-input",state],
		id: id,
		checked: checked,
		disabled: disabled,
		attrs: checkboxShapeAttrs
	},true %}
	<label class="custom-control-label" for="{{ id }}">{{ text | safe }}</label>
	{% if hint %}
		<p class="{{ namespace }}checkbox__hint {{ namespace }}textHelperSmall">Checkbox hint</p>
	{% endif %}
	<div class="{{ namespace }}checkbox__error invalid-feedback">Error message</div>
</div>

<!-- Hint -->
<div class="{{ namespace }}checkbox custom-control custom-checkbox{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	{% render "@checkbox-dot",{
		classes: checkboxDotClasses,
		inputModifiers: ["custom-control-input",state],
		id: id,
		checked: checked,
		disabled: disabled,
		attrs: checkboxShapeAttrs
	},true %}
	<label class="custom-control-label" for="{{ id }}">{{ text | safe }}</label>
	{% if hint %}
		<p class="{{ namespace }}checkbox__hint {{ namespace }}textHelperSmall">Checkbox hint</p>
	{% endif %}
	<div class="{{ namespace }}checkbox__error invalid-feedback">Error message</div>
</div>

<!-- Alert -->
<div class="{{ namespace }}checkbox custom-control custom-checkbox{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	{% render "@checkbox-dot",{
		classes: checkboxDotClasses,
		inputModifiers: ["custom-control-input",state],
		id: id,
		checked: checked,
		disabled: disabled,
		attrs: checkboxShapeAttrs
	},true %}
	<label class="custom-control-label" for="{{ id }}">{{ text | safe }}</label>
	{% if hint %}
		<p class="{{ namespace }}checkbox__hint {{ namespace }}textHelperSmall">Checkbox hint</p>
	{% endif %}
	<div class="{{ namespace }}checkbox__error invalid-feedback">Error message</div>
</div>

<!-- Alert Link -->
<div class="{{ namespace }}checkbox custom-control custom-checkbox{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	{% render "@checkbox-dot",{
		classes: checkboxDotClasses,
		inputModifiers: ["custom-control-input",state],
		id: id,
		checked: checked,
		disabled: disabled,
		attrs: checkboxShapeAttrs
	},true %}
	<label class="custom-control-label" for="{{ id }}">{{ text | safe }}</label>
	{% if hint %}
		<p class="{{ namespace }}checkbox__hint {{ namespace }}textHelperSmall">Checkbox hint</p>
	{% endif %}
	<div class="{{ namespace }}checkbox__error invalid-feedback">Error message</div>
</div>

<!-- Alert Optional -->
<div class="{{ namespace }}checkbox custom-control custom-checkbox{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	{% render "@checkbox-dot",{
		classes: checkboxDotClasses,
		inputModifiers: ["custom-control-input",state],
		id: id,
		checked: checked,
		disabled: disabled,
		attrs: checkboxShapeAttrs
	},true %}
	<label class="custom-control-label" for="{{ id }}">{{ text | safe }}</label>
	{% if hint %}
		<p class="{{ namespace }}checkbox__hint {{ namespace }}textHelperSmall">Checkbox hint</p>
	{% endif %}
	<div class="{{ namespace }}checkbox__error invalid-feedback">Error message</div>
</div>

<!-- Alert Error -->
<div class="{{ namespace }}checkbox custom-control custom-checkbox{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	{% render "@checkbox-dot",{
		classes: checkboxDotClasses,
		inputModifiers: ["custom-control-input",state],
		id: id,
		checked: checked,
		disabled: disabled,
		attrs: checkboxShapeAttrs
	},true %}
	<label class="custom-control-label" for="{{ id }}">{{ text | safe }}</label>
	{% if hint %}
		<p class="{{ namespace }}checkbox__hint {{ namespace }}textHelperSmall">Checkbox hint</p>
	{% endif %}
	<div class="{{ namespace }}checkbox__error invalid-feedback">Error message</div>
</div>

<!-- Collapse -->
<div class="{{ namespace }}checkboxCollapse">
	<div class="{{ namespace }}checkboxCollapse__triggerZone">
		<div class="{{ namespace }}checkbox custom-control custom-checkbox flex-grow-1{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
			{% render "@checkbox-dot",{
				classes: [namespace+"checkbox__shape"],
				inputModifiers: ["custom-control-input",state],
				id: id,
				checked: checked,
				disabled: disabled,
				attrs: {
					"aria-expanded": "false",
					"data-toggle": "collapse",
					"data-target": "#"+checkboxCollapseID,
					"aria-controls": checkboxCollapseID
				}
			},true %}
			<label class="{{ namespace }}checkboxCollapse__checkboxLabel custom-control-label" for="{{ id }}">{{ text }}</label>
			<div class="{{ namespace }}checkbox__error invalid-feedback">Error message</div>
		</div>
		{% if additionalContent %}
			<div class="{{ namespace }}aboveClickArea d-flex align-self-baseline">
				{% if additionalContent.infoDot %}
					{% render "@info-dot--modal",{
						target: infoModalTarget
					},true %}
				{% endif %}
			</div>
		{% endif %}
	</div>
	<div class="{{ namespace }}collapse collapse" id="{{ checkboxCollapseID }}">
		<div class="{{ namespace }}checkboxCollapse__inner">
			<div class="{{ namespace }}checkboxCollapse__row row row-sm no-bottom-gutter">
				<div class="col-12 col-md-6">
					{% render "@label--form" %}
					{% render "@input" %}
				</div>
				<div class="col-12 col-md-6">
					{% render "@label--form" %}
					{% render "@input" %}
				</div>
				<div class="col-12 col-md-6">
					{% render "@label--form" %}
					{% render "@input--calendar" %}
				</div>
			</div>
		</div>
	</div>
</div>

<!-- Info Dot -->
<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