List

Lists modifiers in WYSIWYG context

Lists can be used in a wysiwyg context. To do so, add the sds-wysiwyg class around the list you wish to style.

The following modifiers will change the lists' styles:

  • -checkListBase gets you the default checkmark look
  • -checkListBase -invalidList gets you the default cross look
  • -checkList gets you the valid success check look
  • -checkList -invalidList gets you the invalid faded cross look
  • -checkList -invalidListStrikeThrough gets you the struckthrough text with no icon look
<!-- Default -->
<ul class="sds-list -dot">

    <li>

        item

    </li>

    <li>

        item

    </li>

    <li>

        item

    </li>

    <li>

        item

    </li>

</ul>

<!-- Checked -->
<ul class="sds-list -checkIcon">

    <li>

        item

    </li>

    <li>

        item

    </li>

    <li>

        item

    </li>

    <li>

        item

    </li>

</ul>

<!-- Checked Alt -->
<ul class="sds-list -checkIcon -checkIconAlt">

    <li>

        item

    </li>

    <li>

        item

    </li>

    <li>

        item

    </li>

    <li>

        item

    </li>

</ul>

<!-- Checked Alt Disabled -->
<ul class="sds-list -checkIcon -checkIconAlt">

    <li>

        item

    </li>

    <li>

        item

    </li>

    <li>

        item

    </li>

    <li class="sds-list__disabled">
        <span class="sr-only">N'est pas disponible:</span>
        item

    </li>

</ul>

<!-- Checked Alt Unavailable -->
<ul class="sds-list -checkIcon -checkIconAlt">

    <li>

        item

    </li>

    <li>

        item

    </li>

    <li>

        item

    </li>

    <li class="sds-list__unavailable">

        <s>item unavailable</s>

    </li>

</ul>

<!-- Ordered -->
<ol class="sds-list -dot">

    <li>

        item

        <ol class="sds-list">

            <li>

                item
            </li>

        </ol>

    </li>

    <li>

        item

        <ol class="sds-list">

            <li>

                item
            </li>

        </ol>

    </li>

    <li>

        item

        <ol class="sds-list">

            <li>

                item
            </li>

        </ol>

    </li>

    <li>

        item

        <ol class="sds-list">

            <li>

                item
            </li>

        </ol>

    </li>

</ol>

<{{ eltType}} class="{{ namespace }}list{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
    {% for key, item in listItem %}
		{% if item %}
			<li{% if item.disabled %} class="{{ namespace }}list__disabled"{% endif %}{% if item.unavailable %} class="{{ namespace }}list__unavailable"{% endif %}>
				{% if item.disabled %}<span class="sr-only">N'est pas disponible:</span>{% endif %}
				{{ item.text | safe }}
				{% if subeltType %}
				<{{ subeltType}} class="{{ namespace }}list">
				{% for key, item in sublistItem %}
					{% if item %}
						<li{% if item.disabled %} class="{{ namespace }}list__disabled"{% endif %}{% if item.unavailable %} class="{{ namespace }}list__unavailable"{% endif %}>
							{% if item.disabled %}<span class="sr-only">N'est pas disponible:</span>{% endif %}
							{{ item.text | safe }}
						</li>
					{% endif %}
				{% endfor %}
				</{{ subeltType}}>
				{% endif %}
			</li>
		{% endif %}
    {% endfor %}
</{{ eltType}}>
  • Content:
    /* variables specific to current element */
    
    $element-specific-variables: "";
    
    .#{$namespace}list {
    
        /* Save root element context for easy access if nesting is needed */
    
        $self: &;
    
    
        /* properties of current element  + media queries */
        @include list();
    
        /* 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)
        */
    
    	> LI {
    
    		@include list-item();
    
    		> OL,
    		> UL {
    
    			margin-top: map-deep-get($token-spacer-stack-min-map, "md");
    
    			@include media-breakpoint-up("lg") {
    
    				margin-top: map-deep-get($token-spacer-stack-min-map, "md");
    
    			}
    
    		}
    
    	}
    
        @at-root {
    
    		UL#{&} {
    
    			> LI {
    
    				@include list-item-dot();
    
    			}
    
    		}
    
    		OL#{&} {
    
    			counter-reset: my-awesome-counter;
    
    			> LI {
    
    				counter-increment: my-awesome-counter;
    
    				&::before {
    
    					content: counter(my-awesome-counter) ".";
    					left: -2.25em;
    					width: $circle-dimensions-global;
    					text-align: center;
    					@include custom-prop-fallback("color", "sys-color-text-primary-muted");
    
    				}
    
    			}
    
    		}
    
        }
    
    
        /* children - write selector in full in comments in order to facilitate search */
    
        // list__childElement
    
    
    
        /* modifiers */
    
        // list -checkIcon
        &.-checkIcon {
    
    		@include list-check();
    
    		> LI {
    
    			@include list-item-check();
    
            }
    
    		&.-checkIconAlt {
    
    			> LI {
    
    				@include list-item-check-alt();
    
    				&#{$self}__disabled {
    
    					@include custom-prop-fallback("color", "sys-color-text-neutral-vivid", true, true);
    					@include list-item-check-alt-disabled();
    
    				}
    
    				&#{$self}__unavailable {
    
    					@include list-item-unavailable;
    
    				}
    
    			}
    
    		}
    
        }
    
        /* random parent element */
        /*
        *
        *   Syntax : .randomParentElt & {}
        *
        */
    
        /* Pseudo Classes */
    
        &:hover {
            @media (hover: hover) {
    
            }
        }
    
        &:focus {
        }
    
        &:active {
        }
    
        &:focus,
        &:active {
        }
    
    }
  • URL: /components/raw/list/_list.scss
  • Filesystem Path: components/base-components/molecules/list/_list.scss
  • Size: 2 KB