No notes defined.
<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>
<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>
/* 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 {
}
}