Dismissible Account Card

No notes defined.

<!-- Default -->
<div class="sds-dismissibleAccountCard align-items-baseline">
    <div class="sds-dismissibleAccountCard__content">
        <div class="sds-avatarText">
            <span class="sds-numberCircle -highlight30 -large">
                C
            </span>
            <div class="sds-avatarText__content">
                <div class="sds-textHelper">Jil Schmit</div>
            </div>
        </div>
    </div>
    <button type="button" class="sds-btn -iconBtn -btnSecondary -btnSmall">

        <span class="sds-icon sds-icon-close"></span>

    </button>
</div>

<!--  -->
<div class="sds-dismissibleAccountCard align-items-baseline">
    <div class="sds-dismissibleAccountCard__content">
        <div class="sds-avatarText">
            <span class="sds-numberCircle -highlight30 -large">
                C
            </span>
            <div class="sds-avatarText__content">
                <div class="sds-textHelper">Jil Schmit</div>
            </div>
        </div>
    </div>
    <button type="button" class="sds-btn -iconBtn -btnSecondary -btnSmall">

        <span class="sds-icon sds-icon-close"></span>

    </button>
</div>

<!-- Gestionnaire -->
<div class="sds-dismissibleAccountCard align-items-baseline">
    <div class="sds-dismissibleAccountCard__content d-sm-flex flex-grow-1">
        <div class="sds-dismissibleAccountCard__infoRow row row-xs flex-grow-1 align-items-center">
            <div class="col col-sm-5 col-md-4">
                <div class="sds-avatarText">
                    <span class="sds-numberCircle -info100 -large">
                        GE
                    </span>
                    <div class="sds-avatarText__content">
                        <div class="sds-textHelper">Gestion Entités</div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-auto mx-auto">
                <label class="sds-switch -small" for="smallSwitch">
                    <input type="checkbox" class="sds-switch__input custom-control-input" id="smallSwitch" checked>

                    <span class="sds-switch__outsideLabel">Gestionnaire principal</span>

                    <span class="sds-switch__shape custom-control custom-switch">

                    </span>
                </label>

            </div>
            <div class="col-12 col-md-auto">
                <div class="dropdown">
                    <button type="button" class="sds-btn -btnSecondary -btnSmall" data-toggle="dropdown">

                        <span class="sds-btn__text">Gestion</span>

                        <span class="sds-icon sds-icon-chevrondown"></span>

                    </button>
                    <div aria-labelledby="" class="sds-actionMenu dropdown-menu">

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

                            </div>
                        </div>

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

                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <button type="button" class="sds-btn -iconBtn -btnSecondary -btnSmall">

        <span class="sds-icon sds-icon-close"></span>

    </button>
</div>

<!-- Default -->
<div class="{{ namespace }}dismissibleAccountCard{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	<div class="{{ namespace }}dismissibleAccountCard__content">
		{% render "@snet-avatar-text--number-circle-text-helper" %}
	</div>
	{% render "@icon-btn-secondary--smaller",{icon: "icon-close"},true %}
</div>

<!--  -->
<div class="{{ namespace }}dismissibleAccountCard{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	<div class="{{ namespace }}dismissibleAccountCard__content">
		{% render "@snet-avatar-text--number-circle-text-helper" %}
	</div>
	{% render "@icon-btn-secondary--smaller",{icon: "icon-close"},true %}
</div>

<!-- Gestionnaire -->
<div class="{{ namespace }}dismissibleAccountCard{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
	<div class="{{ namespace }}dismissibleAccountCard__content d-sm-flex flex-grow-1">
		<div class="{{ namespace }}dismissibleAccountCard__infoRow row row-xs flex-grow-1 align-items-center">
			<div class="col col-sm-5 col-md-4">
				{% render "@snet-avatar-text--number-circle-text-helper",{
					numberCircleOptions: {
						modifiers: ["-info100", "-large"],
						text: text or "GE"
					},
					text: text or "Gestion Entités"
				},true %}
			</div>
			<div class="col-12 col-md-auto mx-auto">
				{% render "@switch--small",{
					id: id,
					outsideLabel: "Gestionnaire principal",
					checked: true,
					textInside: false
				},true %}
			</div>
			<div class="col-12 col-md-auto">
				<div class="dropdown">
					{% render "@btn-secondary--small-icon-right",{
						text: "Gestion",
						icon: "icon-chevrondown",
						attrs: {
							"data-toggle": "dropdown"
						}
					},true %}
					{% render "@snet-action-menu--radios" %}
				</div>
			</div>
		</div>
	</div>
	{% render "@icon-btn-secondary--smaller",{
		icon: "icon-close"
	},true %}
</div>
  • Content:
    /* variables specific to current element */
    
    $element-specific-variables: "";
    
    .#{$namespace}dismissibleAccountCard {
    
    	/* Save root element context for easy access if nesting is needed */
    
    	$self: &;
    
    	/* properties of current element  + media queries */
    
    
    	/* 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 */
    
    	// dismissibleAccountCard__infoRow
    
    	&__infoRow {
    
    
    	}
    
    
    	/* modifiers */
    
    	// dismissibleAccountCard -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/cpb-dismissible-account-card/_dismissible-account-card.scss
  • Filesystem Path: components/corporate-bridge/molecules/dismissible-account-card/_dismissible-account-card.scss
  • Size: 936 Bytes