Spot Select: Centered

Checked status on page load

Set the checkbox input element's checked attribute to true.
If there's a message, it will be shown automatically. If another radio is selected, it'll be hidden again.

<div class="sds-spotSelect sds-showCustomIndicatorHover  -centered">
    <input type="radio" id="spotSelectContentCentered" class="sds-spotSelect__radioInput sr-only" value="" name="radio-name">
    <div class="sds-spotSelect__body">
        <div class="sds-spotSelect__content">

            <span class="sds-radioDot  sds-spotSelect__checkItem" aria-hidden="true"></span>

            <img src="../../media/illustrations/svg/spot/sdsillu-armchairb.svg" alt="">

            <div class="sds-spotSelect__inner sds-stackMd">
                <div class="sds-spotSelect__text">

                    <p><label class="sds-spotSelect__checkItemLabel" for="spotSelectContentCentered">Acheter</label></p>

                </div>
            </div>

        </div>

    </div>

</div>
<div class="{{ namespace }}spotSelect {{ namespace }}showCustomIndicatorHover {% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	<input type="{{ checkItemType }}" id="{{ spotSelectID }}" class="{% if checkItemType === "radio" %}{{ namespace }}spotSelect__radioInput{% else %}{{ namespace }}spotSelect__checkboxInput{% endif %} sr-only{% if error %} is-invalid{% endif %}"{% if checked %} checked{% endif%}{% if disabled %} disabled{% endif %} value="{{ inputValue }}" name="{{ inputName }}"{% if collapse %} data-toggle='collapse' data-target='#{{ collapse }}'{% endif %}>
	<div class="{{ namespace }}spotSelect__body">
		<div class="{{ namespace }}spotSelect__content">
			{% if loading %}
			{% set checkItemClasses = [namespace+"spotSelect__checkItem","-isLoading"] %}
				{% else %}
			{% set checkItemClasses = [namespace+"spotSelect__checkItem"] %}
			{% endif %}
			{% if checkItemType === "radio" %}
				{% render "@radio-dot--no-input",{
					classes: checkItemClasses
				},true %}
			{% else %}
				{% render "@checkbox-dot--no-input",{
					classes: checkItemClasses
				},true %}
			{% endif %}
			{% if internalResource %}
				{% set mediaPath = (mediaPath+img) | path %}
			{% else %}
				{% set mediaPath = img %}
			{% endif %}
			{% if roundedImg %}
				<div class="{{ namespace }}spotSelect__img centeredBgi"
					 style="background-image: url({{ mediaPath }})"></div>
			{% elseif img %}
				<img src="{{ mediaPath }}" alt="">
			{% endif %}
			<div class="{{ namespace }}spotSelect__inner {{ namespace }}stackMd">
				<div class="{{ namespace }}spotSelect__text">
					{% if title %}
					<div class="{{ namespace }}spotSelect__title">
						<div class="{{ namespace }}textSemiBold">
							<label class="{{ namespace }}spotSelect__checkItemLabel"
								   for="{{ spotSelectID }}">{{ title }}</label>
						</div>
						{% if icon %}
							<span class="{{ namespace }}icon {{ namespace }}{{ icon }}"></span>
						{% endif %}
					</div>
					{% endif %}
					{% if text %}
						<p><label class="{{ namespace }}spotSelect__checkItemLabel"
								  for="{{ spotSelectID }}">{{ text }}</label></p>
					{% endif %}
				</div>
			</div>
			{% if infoDot %}
			<div class="{{ namespace }}aboveClickArea d-inline-flex">
				{% render "@info-dot--modal",{
					target: spotSelectModalTarget
				},true %}
			</div>
			{% endif %}
		</div>
		{% if message %}
			<div class="{{ namespace }}spotSelect__hiddenContent">
				<div class="{{ namespace }}spotSelect__hiddenContentInner">
					{% render '@message--options', {text: "Veuillez noter, le prêt logement n’est élligible que pour l’un des types de projet suivant :"}, true %}
				</div>
			</div>
		{% endif %}
	</div>
	{% if checkItemType === "checkbox" %}
		<div class="invalid-feedback">Error message</div>
	{% endif %}
</div>
  • Content:
    $spot-select-padding-x: map-deep-get($token-spacer-inset-map, "md");
    $spot-select-padding-y: map-deep-get($token-spacer-inset-map, "sm");
    $spot-select-border-radius: map-deep-get($token-radius-map, "16");
    $spot-select-padding-left: ($checkbox-dot-dimensions-global + ($spot-select-padding-x*2));
    $spot-select-hidden-content-negative-offset: -$spot-select-padding-left + $spot-select-padding-x;
    
    .#{$namespace}spotSelect {
    
    	/* Save root element context for easy access if nesting is needed */
    
    	$self: &;
    
    
    	/* variables specific to current element */
    
    
    	/* properties of current element  + media queries */
    
    	position: relative;
    
    	/* 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 */
    
    	IMG {
    
    		display: none;
    
    		@include media-breakpoint-up(sm){
    
    			display: block;
    
    		}
    
    
    		width: map-deep-get($token-sizes-unit-map, "40");
    		height: map-deep-get($token-sizes-unit-map, "40");
    
    		@include media-breakpoint-up(lg) {
    
    			width: map-deep-get($token-sizes-unit-map, "64");
    			height: map-deep-get($token-sizes-unit-map, "64");
    
    		}
    
    		object-fit: cover;
    
    	}
    
    	// spotSelect__body
    	&__body {
    
    		display: flex;
    		flex-direction: column;
    		justify-content: space-between;
    		border: $border-width*2 solid;
    		@include custom-prop-fallback("background-color","sys-color-elevation-surface-flat");
    		@include custom-prop-fallback("border-color","sys-color-border-primary-moderate");
    		// same as body color
    		@include custom-prop-fallback("color","sys-color-text-primary-contrast");
    		padding: $spot-select-padding-y $spot-select-padding-x $spot-select-padding-y $spot-select-padding-left;
    		border-radius: map-deep-get($token-radius-map, "16");
    		min-height: map-deep-get($token-sizes-unit-map, "56");
    		height: 100%; /* if spot selects are in stretch container */
    
    	}
    
    	&__content {
    
    		display: flex;
    		align-items: center;
    		flex-grow: 1;
    		@include spacer-component-inline("md");
    		position: relative;
    
    		@include media-breakpoint-up(lg) {
    			align-items: center;
    		}
    
    	}
    
    	&__checkItemLabel {
    
    		&::after {
    
    			content: "";
    			position: absolute;
    			z-index: z("zero");
    			top: -$spot-select-padding-y;
    			left: -$spot-select-padding-left;
    			right: -$spot-select-padding-x;
    			bottom: -$spot-select-padding-y;
    			cursor: pointer;
    			border-radius: $spot-select-border-radius;
    
    		}
    
    	}
    
    	&__title {
    
    		display: flex;
    		align-items: center;
    		@include spacer-component-inline("sm");
    		padding-right: map-deep-get($token-spacer-inset-map, "xl");
    
    		> * {
    
    			font-family: map-deep-get($token-font-family-map, "text");
    			font-weight: map-deep-get($token-font-weight-map, "semi-bold");
    			color: inherit;
    
    		}
    
    		.#{$namespace}icon {
    
    			display: inline-block;
    			vertical-align: middle;
    
    			&::before {
    
    				font-size: 1.25em;
    
    			}
    
    		}
    
    	}
    
    	&__inner {
    
    		flex-grow: 1;
    		display: flex;
    		flex-direction: column;
    		justify-content: center;
    		padding-top: $spot-select-padding-y;
    		padding-bottom: $spot-select-padding-y;
    
    	}
    
    	&__hiddenContent,
    	&__message {
    		display: none;
    		margin-left: $spot-select-hidden-content-negative-offset;
    	}
    
    	&__radioInput:checked ~ * &__message,
    	&__radioInput:checked ~ * &__hiddenContent {
    		display: block;
    	}
    
    	&__hiddenContentInner,
    	&__messageInner {
    
    		padding-top: map-deep-get($token-spacer-inset-map, "md");
    
    	}
    
    	&__radioInput,
    	&__checkboxInput,
    	&__checkItem {
    
    		position: absolute;
    		top: 50%;
    		transform: translateY(-50%);
    		left: -(($checkbox-dot-dimensions-global + ($spot-select-padding-x)));
    
    
    	}
    
    	&__radioInput,
    	&__checkboxInput {
    
    		left: $spot-select-padding-x;
    
    	}
    
    	&__radioInput,
    	&__checkboxInput {
    
    		&:checked ~ #{$self}__body {
    
    			position: relative;
    			z-index: z("low");
    			@include custom-prop-fallback("border-color", "comp-radio-checked-border-color")
    
    		}
    
    		&.-isDisabled,
    		&[disabled] ~ #{$self}__body, &:disabled ~ #{$self}__body {
    
    			pointer-events: none;
    			@include custom-prop-fallback("border-color", "comp-checkbox-disabled-border-color");
    			@include custom-prop-fallback("color", "comp-checkbox-disabled-border-color");
    
    		}
    
    		&.-isDisabled,
    		&[disabled] ~ * #{$self}__img, &:disabled ~ * #{$self}__img,
    		&[disabled] ~ * IMG, &:disabled ~ * IMG {
    
    			filter: grayscale(1);
    
    		}
    
    		&.is-invalid ~ #{$self}__body {
    
    			position: relative;
    			z-index: z("low");
    			@include custom-prop-fallback("background-color", "sys-color-background-status-danger-6");
    			@include custom-prop-fallback("border-color", "sys-color-text-status-danger-vivid");
    			@include custom-prop-fallback("color", "sys-color-text-status-danger-vivid");
    
    		}
    
    	}
    
    	&__radioInput {
    
    		&:active ~ * #{$self}__checkItem,
    		&:focus-visible ~ * #{$self}__checkItem {
    
    			@include radioInputFocused();
    
    		}
    
    		&:checked ~ * #{$self}__checkItem,
    		&.-active {
    
    			@include radioInputChecked();
    
    		}
    
    		&.-isDisabled,
    		&[disabled] ~ * #{$self}__checkItem, &:disabled ~ * #{$self}__checkItem {
    
    			@include radioInputDisabled();
    
    		}
    
    		&.-isDisabled:checked,
    		&[disabled]:checked ~ * #{$self}__checkItem, &:disabled:checked ~ * #{$self}__checkItem {
    
    			@include radioInputDisabledChecked();
    
    		}
    
    	}
    
    	&__checkboxInput {
    
    		&:checked ~ * #{$self}__checkItem,
    		&.-isActive {
    
    			@include checkboxInputChecked();
    
    		}
    
    		&:active ~ * #{$self}__checkItem,
    		&:focus-visible ~ * #{$self}__checkItem {
    
    			@include checkboxFocused();
    
    		}
    
    		&.-isDisabled,
    		&[disabled] ~ * #{$self}__checkItem, &:disabled ~ * #{$self}__checkItem {
    
    			@include checkboxInputDisabled();
    
    		}
    
    		&.-isDisabled:checked,
    		&[disabled]:checked ~ * #{$self}__checkItem, &:disabled:checked ~ * #{$self}__checkItem {
    
    			@include checkboxInputDisabledChecked();
    
    		}
    
    	}
    
    	/* modifiers */
    
    	// spotSelect -roundedImg
    
    	&.-roundedImg {
    
    		display: none;
    
    		@include media-breakpoint-up(sm){
    
    			display: block;
    
    		}
    
    		#{$self}__img {
    
    			flex-shrink: 0;
    			width: map-deep-get($token-sizes-unit-map, "40");
    			height: map-deep-get($token-sizes-unit-map, "40");
    			border-radius: map-deep-get($token-radius-map, "circle");
    
    			@include media-breakpoint-up(lg) {
    
    				width: map-deep-get($token-sizes-unit-map, "64");
    				height: map-deep-get($token-sizes-unit-map, "64");
    
    			}
    
    		}
    
    	}
    
    	/* @TODO Deprecated remove when safe to do so */
    	&.-centered {
    		
    		#{$self}__radioInput,
    		#{$self}__checkItem {
    
    			top: $spot-select-padding-y * 2;
    			right: $spot-select-padding-x;
    			left: auto;
    			margin-right: 0 !important;
    			transform: none;
    
    		}
    
    		#{$self}__checkItemLabel {
    			
    			&::after {
    
    				top: 0;
    				right: 0;
    				bottom: 0;
    				left: 0;
    
    			}
    			
    		}
    
    		#{$self}__body {
    
    			padding: $spot-select-padding-y $spot-select-padding-x !important;
    			position: relative;
    
    		}
    
    		#{$self}__content {
    
    			display: flex;
    			justify-content: center;
    			align-items: center;
    			@include spacer-component-inline("sm");
    			position: static;
    
    			@include media-breakpoint-up(lg) {
    
    				@include spacer-component-stack("md");
    				flex-direction: column;
    				padding-top: map-deep-get($token-spacer-unit-map, "24");
    
    			}
    
    			IMG {
    
    				@include media-breakpoint-up(lg) {
    
    					margin-right: 0;
    					margin-top: 0;
    					width: map-deep-get($token-sizes-unit-map, "80");
    					height: map-deep-get($token-sizes-unit-map, "80");
    
    				}
    
    			}
    
    		}
    
    	}
    
    	&.-noPic {
    
    		#{$self}__content {
    
    			align-items: flex-start;
    
    		}
    
    	}
    
    	/* random parent element */
    	/*
    	*
    	*   Syntax : .randomParentElt & {}
    	*
    	*/
    
    	/* Pseudo Classes */
    
    	&:hover {
    		@media (hover: hover) {
    
    		}
    
    	}
    
    	&:focus {
    	}
    
    	&:active {
    	}
    
    	&:focus,
    	&:active {
    	}
    
    }
  • URL: /components/raw/spot-select/_spot-select.scss
  • Filesystem Path: components/base-components/molecules/forms/spot-select/_spot-select.scss
  • Size: 7.7 KB