Checkbox: Checked

300 × 150

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="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>
<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>
  • 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