Checkbox Dot: Loading Indeterminate

Indeterminate checkbox

The indeterminate checkbox's state can only be set through javascript. There is no indeterminate attribute.

Add the data-js-checkbox-indeterminate data attribute to a checkbox to be able to target it through javascript. The following line can be used to set the indeterminate state on a single checkbox:

document.querySelector("[data-js-checkbox-indeterminate]").indeterminate = true;
<input value="checkbox-value" type="checkbox" name="" class="sr-only" id="" disabled checked data-js-checkbox-indeterminate=""><span class="sds-checkboxDot -isLoading" aria-hidden="true"></span>
{%- if input -%}
	<input value="{{ value }}" type="checkbox" name="{{ name }}" class="sr-only{% for mod in inputModifiers %} {{ mod }}{% endfor %}" id="{{ id }}"{% if disabled %} disabled{% endif %}{% if checked %} checked{% endif %}{% for attrKey, attr in attrs %} {{ attrKey }}="{{ attr }}"{% endfor %}>
{%- endif -%}
<span class="{{ namespace }}checkboxDot{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}" aria-hidden="true"></span>
  • Handle: @checkbox-dot--loading-indeterminate
  • Preview:
  • Filesystem Path: components/base-components/atoms/forms/checkbox-dot/checkbox-dot.njk
  • Content:
    /* variables specific to current element */
    
    $checkbox-dot-dimensions: $checkbox-dot-dimensions-global;
    
    .#{$namespace}checkboxDot {
    
    	/* Save root element context for easy access if nesting is needed */
    
    	$self: &;
    
    	/* properties of current element  + media queries */
    
    	border-width: $border-width*2;
    	border-style: solid;
    	width: $checkbox-dot-dimensions-global;
    	height: $checkbox-dot-dimensions-global;
    	@extend %checkboxDotShape;
    
    	/* Pseudo Elements */
    
    	&::before {
    
    		content: map-deep-get($token-icon-map, "checksmall");
    		font-size: map-deep-get($token-font-size-map,"body","xl");
    		opacity: 0;
    		@include icon-base;
    
    	}
    
    	&::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 {
    
    		@keyframes rotation {
    			0% {
    				transform: rotate(0deg);
    			}
    			100% {
    				transform: rotate(360deg);
    			}
    		}
    
    	}
    
    
    	/* children - write selector in full in comments in order to facilitate search */
    
    
    	/* modifiers */
    
    	// checkboxDot -active
    	INPUT:indeterminate + &,
    	INPUT:checked + &,
    	&.-isActive {
    
    		@include checkboxInputChecked();
    
    	}
    
    	INPUT:indeterminate + & {
    
    		&::before {
    
    			content: map-deep-get($token-icon-map, "undetermined");
    
    		}
    
    	}
    
    	// disabled
    	&.-isDisabled,
    	INPUT[disabled] + &, INPUT:disabled + & {
    
    		@include checkboxInputDisabled();
    
    	}
    
    	&.-isDisabled:checked,
    	INPUT[disabled]:checked + &, INPUT:disabled:checked + & {
    
    		@include checkboxInputDisabledChecked();
    
    	}
    
    	&.-isLoading.-isLoading {
    
    		@include custom-prop-fallback("border-color","comp-checkbox-border-color");
    
    		&::before {
    
    			@extend %skeletonUnit;
    			position: absolute;
    			inset: 0;
    			opacity: 1 !important;
    			color: transparent;
    			border-radius: calc(#{map-deep-get($design-tokens, "comp-checkbox-border-radius")} - #{map-deep-get($design-tokens, "comp-checkbox-border-width")});
    			border-radius: calc(var(--comp-checkbox-border-radius) - var(--comp-checkbox-border-width));
    
    		}
    
    		INPUT[disabled]:indeterminate + &,
    		INPUT[disabled]:checked + & {
    
    			border-color: transparent !important;
    			background-color: transparent !important;
    
    			&::before {
    
    				opacity: 1;
    				border: none !important;
    				@include custom-prop-fallback("inset","comp-checkbox-border-width","true","true","true");
    				@include custom-prop-fallback("color","comp-checkbox-loading-icon-background-color");
    				border-radius: inherit;
    
    			}
    
    		}
    
    	}
    
    	/* random parent element */
    	/* 
    	*
    	*   Syntax : .randomParentElt & {}
    	*
    	*/
    
    	.#{$namespace}showCustomIndicatorHover {
    
    		&:hover & {
    
    			@media (hover: hover) {
    
    				@include checkboxHovered();
    
    			}
    
    		}
    
    	}
    
    	/* Pseudo Classes */
    
    	&:hover {
    		@media (hover: hover) {
    			@include checkboxHovered();
    		}
    	}
    
    	INPUT:active:not([disabled]) + &,
    	INPUT:focus-visible + & {
    		@include checkboxFocused();
    	}
    
    	&:active {
    	}
    
    	&:focus,
    	&:active {
    	}
    
    }
  • URL: /components/raw/checkbox-dot/_checkbox-dot.scss
  • Filesystem Path: components/base-components/atoms/forms/checkbox-dot/_checkbox-dot.scss
  • Size: 2.9 KB