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>
                <span class="sr-only">Show more info</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 -labelForm">
                        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 -labelForm">
                        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 -labelForm">
                        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>
    <button type="button" 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>
        <span class="sr-only">Show more info</span>
    </button>
</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