Action Menu

No notes defined.

<div aria-labelledby="" class="sds-actionMenu dropdown-menu">
    <div class="dropdown-header">Type</div>
    <div class="dropdown-item">
        <div class="sds-radio custom-control custom-radio">
            <input value="radio-value" type="radio" name="radio-dropdown-1" class="sr-only custom-control-input " id="action-menu-radio-1" checked><span class="sds-radioDot  sds-radio__shape" aria-hidden="true"></span>
            <label class="custom-control-label" for="action-menu-radio-1">
                Tout
            </label>

        </div>
    </div>
    <div class="dropdown-item">
        <div class="sds-radio custom-control custom-radio">
            <input value="radio-value" type="radio" name="radio-dropdown-1" class="sr-only custom-control-input " id="action-menu-radio-2"><span class="sds-radioDot  sds-radio__shape" aria-hidden="true"></span>
            <label class="custom-control-label" for="action-menu-radio-2">
                Congé
            </label>

        </div>
    </div>
    <div class="dropdown-item">
        <div class="sds-radio custom-control custom-radio">
            <input value="radio-value" type="radio" name="radio-dropdown-1" class="sr-only custom-control-input " id="action-menu-radio-3"><span class="sds-radioDot  sds-radio__shape" aria-hidden="true"></span>
            <label class="custom-control-label" for="action-menu-radio-3">
                CET
            </label>

        </div>
    </div>
    <div class="dropdown-item">
        <div class="sds-radio custom-control custom-radio">
            <input value="radio-value" type="radio" name="radio-dropdown-1" class="sr-only custom-control-input " id="action-menu-radio-3"><span class="sds-radioDot  sds-radio__shape" aria-hidden="true"></span>
            <label class="custom-control-label" for="action-menu-radio-3">
                Téléavail
            </label>

        </div>
    </div>
    <div class="dropdown-header">Statut</div>
    <div class="dropdown-item">
        <div class="sds-radio custom-control custom-radio">
            <input value="radio-value" type="radio" name="radio-dropdown-2" class="sr-only custom-control-input " id="action-menu-radio-4" checked><span class="sds-radioDot  sds-radio__shape" aria-hidden="true"></span>
            <label class="custom-control-label" for="action-menu-radio-4">
                Tous
            </label>

        </div>
    </div>
    <div class="dropdown-item">
        <div class="sds-radio custom-control custom-radio">
            <input value="radio-value" type="radio" name="radio-dropdown-2" class="sr-only custom-control-input " id="action-menu-radio-5"><span class="sds-radioDot  sds-radio__shape" aria-hidden="true"></span>
            <label class="custom-control-label" for="action-menu-radio-5">
                En attente
            </label>

        </div>
    </div>
    <div class="dropdown-item">
        <div class="sds-radio custom-control custom-radio">
            <input value="radio-value" type="radio" name="radio-dropdown-2" class="sr-only custom-control-input " id="action-menu-radio-6"><span class="sds-radioDot  sds-radio__shape" aria-hidden="true"></span>
            <label class="custom-control-label" for="action-menu-radio-6">
                Validé
            </label>

        </div>
    </div>
    <div class="dropdown-item">
        <div class="sds-radio custom-control custom-radio">
            <input value="radio-value" type="radio" name="radio-dropdown-2" class="sr-only custom-control-input " id="action-menu-radio-7"><span class="sds-radioDot  sds-radio__shape" aria-hidden="true"></span>
            <label class="custom-control-label" for="action-menu-radio-7">
                Rejeté
            </label>

        </div>
    </div>
    <div class="dropdown-item">
        <div class="sds-radio custom-control custom-radio">
            <input value="radio-value" type="radio" name="radio-dropdown-2" class="sr-only custom-control-input " id="action-menu-radio-8"><span class="sds-radioDot  sds-radio__shape" aria-hidden="true"></span>
            <label class="custom-control-label" for="action-menu-radio-8">
                Annulé
            </label>

        </div>
    </div>
</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">Type</div>
	<div class="dropdown-item">
		{% render "@radio",{
			id: "action-menu-radio-1",
			inputName: "radio-dropdown-1",
			text: "Tout",
			checked: true
		},true %}
	</div>
	<div class="dropdown-item">
		{% render "@radio",{
			id: "action-menu-radio-2",
			inputName: "radio-dropdown-1",
			text: "Congé"
		},true %}
	</div>
	<div class="dropdown-item">
		{% render "@radio",{
			id: "action-menu-radio-3",
			inputName: "radio-dropdown-1",
			text: "CET"
		},true %}
	</div>
	<div class="dropdown-item">
		{% render "@radio",{
			id: "action-menu-radio-3",
			inputName: "radio-dropdown-1",
			text: "Téléavail"
		},true %}
	</div>
	<div class="dropdown-header">Statut</div>
	<div class="dropdown-item">
		{% render "@radio",{
			id: "action-menu-radio-4",
			inputName: "radio-dropdown-2",
			text: "Tous",
			checked: true
		},true %}
	</div>
	<div class="dropdown-item">
		{% render "@radio",{
			id: "action-menu-radio-5",
			inputName: "radio-dropdown-2",
			text: "En attente"
		},true %}
	</div>
	<div class="dropdown-item">
		{% render "@radio",{
			id: "action-menu-radio-6",
			inputName: "radio-dropdown-2",
			text: "Validé"
		},true %}
	</div>
	<div class="dropdown-item">
		{% render "@radio",{
			id: "action-menu-radio-7",
			inputName: "radio-dropdown-2",
			text: "Rejeté"
		},true %}
	</div>
	<div class="dropdown-item">
		{% render "@radio",{
			id: "action-menu-radio-8",
			inputName: "radio-dropdown-2",
			text: "Annulé"
		},true %}
	</div>
</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 */
    	min-width: 16rem;
    
    	/* 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
    	&__childElement {
    
    		// follows same logic as parent
    
    	}
    
    
    	/* modifiers */
    
    	// actionMenu -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/msp-action-menu/_action-menu.scss
  • Filesystem Path: components/my-spuerkeess/molecules/action-menu/_action-menu.scss
  • Size: 961 Bytes