@ou-imdt/css/src/native/lists.css

The IMDT CSS library styles native elements with light, extendable CSS. It is developed for Interactive Media Developers at the Open University.

:root,
:host {
    /* Lists */
    --list-margin: 1rem 1rem 1rem 2rem;
    --list-padding: 0;
    --list-padding-sub: 0 0 0 2rem;
    --ul-li-list-style: initial;
    --ol-li-list-style: initial;
    --dl-after: ": ";
    --dl-margin: 0.5rem 0;
    --dt-weight: bold;
    --dd-padding: 0 1rem;

    /* --list-custom-icon: var(); */
    --list-custom-icon-color: #F4846A;
    --list-custom-icon-weight: bold;
}


/* Listed Items */
ol,
ul {
    padding: var(--list-padding);
    margin: var(--list-margin);
}


li>:is(ol, ul) {
    padding: var(--list-padding-sub);
    margin: 0;
}

ul li {
    list-style: var(--ul-li-list-style);
}


ol li {
    list-style: var(--ol-li-list-style)
}

:is(ol, ul).unstyled,
:is([role="list"]) {
    list-style-type: none;
    margin-left: 0;
    margin-right: 0;
}

ul.custom {

    --icon: var(--list-custom-icon);
    --icon-font: var(--icon-font, var(--font), Arial);
    --icon-color: var(--list-custom-icon-color);
    --icon-weight: var(--list-custom-icon-weight);
    --icon-nested: var(--icon-nested);
    list-style-type: none;
}

ul.custom li {
    position: relative;
}

ul.custom li:before {
    font-family: var(--icon-font);
    position: absolute;
    display: grid;
    transform: translateX(-100%);
    color: var(--icon-color);
    content: var(--icon, "● ");
    font-weight: var(--icon-weight, bold);
    aspect-ratio: 1;
    width: 1.5em;
    place-items: center;
}

ul.custom ul {
    list-style-type: none;
    --icon: var(--icon-nested, "○ ");
}


/* Definition */

dt::after {
    content: var(--dl-after) / " ";
}


dl {
    margin: var(--dl-margin);
}


dt {
    font-weight: var(--dt-weight);
}

dd {
    padding: var(--dd-padding);
}