No notes defined.
<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">
<p class="sds-hint sds-textHelperSmall -hintError">
<span class="sds-hint__icon sds-icon sds-icon-alert" aria-hidden="true"></span>
{Hint}
</p>
</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>
<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">
{% render "@hint--error",{
text: feedback
},true %}
</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>
/* 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 {
}
}
/* 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 {
}
}