Action Menu: Energy Badges

Usage

Has to be paired with a dropdown toggle button for activation.

Place inside parent element with dropdown class. Refer to documentation for structure

If dropdown shouldn't close on interaction, add JS to prevent it from closing on click inside. Like this possible solution. (See accepted answer)

<div aria-labelledby="" class="sds-actionMenu dropdown-menu">
    <div class="dropdown-header">Performance énergétique</div>

    <label class="sds-actionMenu__energyItem sds-showCustomIndicatorHover dropdown-item">
        <input value="radio-value" type="radio" name="radio-name" class="sr-only" id="radioEnergyPerformanceAPlus"><span class="sds-radioDot " aria-hidden="true"></span>

        <span class="sds-energyBadge -performAPlus">A+</span>

    </label>

    <label class="sds-actionMenu__energyItem sds-showCustomIndicatorHover dropdown-item">
        <input value="radio-value" type="radio" name="radio-name" class="sr-only" id="radioEnergyPerformanceA"><span class="sds-radioDot " aria-hidden="true"></span>

        <span class="sds-energyBadge -performA">A</span>

    </label>

    <label class="sds-actionMenu__energyItem sds-showCustomIndicatorHover dropdown-item">
        <input value="radio-value" type="radio" name="radio-name" class="sr-only" id="radioEnergyPerformanceB"><span class="sds-radioDot " aria-hidden="true"></span>

        <span class="sds-energyBadge -performB">B</span>

    </label>

    <label class="sds-actionMenu__energyItem sds-showCustomIndicatorHover dropdown-item">
        <input value="radio-value" type="radio" name="radio-name" class="sr-only" id="radioEnergyPerformanceC"><span class="sds-radioDot " aria-hidden="true"></span>

        <span class="sds-energyBadge -performC">C</span>

    </label>

    <label class="sds-actionMenu__energyItem sds-showCustomIndicatorHover dropdown-item">
        <input value="radio-value" type="radio" name="radio-name" class="sr-only" id="radioEnergyPerformanceD"><span class="sds-radioDot " aria-hidden="true"></span>

        <span class="sds-energyBadge -performD">D</span>

    </label>

    <label class="sds-actionMenu__energyItem sds-showCustomIndicatorHover dropdown-item">
        <input value="radio-value" type="radio" name="radio-name" class="sr-only" id="radioEnergyPerformanceE"><span class="sds-radioDot " aria-hidden="true"></span>

        <span class="sds-energyBadge -performE">E</span>

    </label>

    <label class="sds-actionMenu__energyItem sds-showCustomIndicatorHover dropdown-item">
        <input value="radio-value" type="radio" name="radio-name" class="sr-only" id="radioEnergyPerformanceF"><span class="sds-radioDot " aria-hidden="true"></span>

        <span class="sds-energyBadge -performF">F</span>

    </label>

    <label class="sds-actionMenu__energyItem sds-showCustomIndicatorHover dropdown-item">
        <input value="radio-value" type="radio" name="radio-name" class="sr-only" id="radioEnergyPerformanceG"><span class="sds-radioDot " aria-hidden="true"></span>

        <span class="sds-energyBadge -performG">G</span>

    </label>

    <label class="sds-actionMenu__energyItem sds-showCustomIndicatorHover dropdown-item">
        <input value="radio-value" type="radio" name="radio-name" class="sr-only" id="radioEnergyPerformanceH"><span class="sds-radioDot " aria-hidden="true"></span>

        <span class="sds-energyBadge -performH">H</span>

    </label>

    <label class="sds-actionMenu__energyItem sds-showCustomIndicatorHover dropdown-item">
        <input value="radio-value" type="radio" name="radio-name" class="sr-only" id="radioEnergyPerformanceH"><span class="sds-radioDot " aria-hidden="true"></span>

        <span class="sds-energyBadge -performI">I</span>

    </label>

    <label class="sds-actionMenu__energyItem sds-showCustomIndicatorHover dropdown-item">
        <input value="radio-value" type="radio" name="radio-name" class="sr-only" id="radioEnergyPerformanceUnknown"><span class="sds-radioDot " aria-hidden="true"></span>

        <span>Je ne sais pas</span>

    </label>

</div>
<div aria-labelledby="{{ parentID }}" class="{{ namespace }}actionMenu dropdown-menu{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	<div class="dropdown-header">Performance énergétique</div>
	{% for key, radioItem in radios %}
		<label class="{{ namespace }}actionMenu__energyItem {{ namespace }}showCustomIndicatorHover dropdown-item">
			{% render "@radio-dot",{
				input: true,
				id: radioItem.id
			},true %}
			{% if radioItem.variant === "--unknown" %}
				<span>Je ne sais pas</span>
			{% else %}
				{% render "@energy-badge"+radioItem.variant %}
			{% endif %}
		</label>
	{% endfor %}
</div>
  • Content:
    /* variables specific to current element */
    
    $element-specific-variables: "";
    
    .#{$namespace}actionMenu {
    
    	/* Save root element context for easy access if nesting is needed */
    
    	$self: &;
    
    	/* properties of current element  + media queries */
    
    	width: 320px;
    	max-width: max-content;
    	min-width: 0;
    	top: calc(100% + #{map-deep-get($token-spacer-unit-map, "8")});
    
    	/* 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 */
    
    	// actionMenu__childElement
    	&__item {
    
    		// follows same logic as parent
    
    		display: flex;
    		align-items: center;
    		@include spacer-component-inline("sm");
    		font-size: map-deep-get($token-font-size-map, "body", "s");
    		font-weight: map-deep-get($token-font-weight-map, "semi-bold");
    		@include custom-prop-fallback("color","comp-dropdown-link-text-color");
    
    
    		@include hover-focus() {
    			@include custom-prop-fallback("color","comp-dropdown-link-text-color");
    			@include custom-prop-fallback("background-color","comp-dropdown-link-hovered-background-color");
    			text-decoration: none;
    		}
    
    		&.active,
    		&:active {
    			color: $dropdown-link-active-color;
    			text-decoration: none;
    			@include gradient-bg($dropdown-link-active-bg);
    		}
    
    		&.disabled,
    		&:disabled {
    			color: $dropdown-link-disabled-color;
    			pointer-events: none;
    			background-color: transparent;
    			// Remove CSS gradients if they're enabled
    			@if $enable-gradients {
    				background-image: none;
    			}
    		}
    
    		&:focus-visible {
    
    			outline-style: solid;
    			outline-width: map-deep-get($design-tokens, "comp-button-pressed-border-width");
    			@include custom-prop-fallback("outline-color", "comp-dropdown-link-text-color", true, true);
    
    		}
    
    	}
    
    	&__filter {
    
    		margin-top: map-deep-get($token-spacer-stack-max-map, "sm");
    
    	}
    
    	&__energyItem {
    		display: flex;
    		align-items: center;
    		@include spacer-component-inline("md");
    		cursor: pointer;
    	}
    
    	&__yearSelect {
    
    		display: flex;
    		align-items: center;
    		justify-content: space-between;
    		padding: $dropdown-item-padding-y $dropdown-item-padding-x;
    
    		[class*="icon"] {
    
    			transition: transform 0.15s linear;
    
    		}
    
    		&[aria-expanded="true"] {
    
    			[class*="icon"] {
    
    				transform: rotate(180deg);
    
    			}
    
    		}
    
    	}
    
    
    	/* modifiers */
    
    	// actionMenu -positionTriggerTop
    	&.-positionTriggerTop {
    
    		// follows same logic as base element
    
    		top: -($input-padding-y * 3);
    
    	}
    
    	// actionMenu -transparentFrame
    	&.-transparentFrame {
    
    		// follows same logic as base element
    
    		background-color: transparent;
    		box-shadow: none;
    		padding: 0;
    
    	}
    
    	&.-scrollHeightMd {
    
    		max-height: 400px;
    
    	}
    
    	/* random parent element */
    	/* 
    	*
    	*   Syntax : .randomParentElt & {}
    	*
    	*/
    
    	/* Pseudo Classes */
    
    	&:hover {
    		@media (hover: hover) {
    
    		}
    	}
    
    	&:focus {
    	}
    
    	&:active {
    	}
    
    	&:focus,
    	&:active {
    	}
    
    }
  • URL: /components/raw/snet-action-menu/_action-menu.scss
  • Filesystem Path: components/snet/molecules/action-menu/_action-menu.scss
  • Size: 3 KB