PSI Software SE Design Library

List

No notes defined.

<!-- Unsorted -->
<ul class="ul">
    <li>Hashtag Echo Park selfies</li>
    <li>PBR try-hard skateboard, <a href="#">plaid 8-bit</a></li>
    <li>Flexitarian retro single-origin coffee</li>
    <li>Church-key vinyl pug cardigan</li>
    <li>Biodiesel locavore PBR<br /> try-hard skateboard</li>
    <li>Plaid 8-bit</li>
</ul>


<!-- Sorted -->
<ol class="ol">
    <li>Hashtag Echo Park selfies</li>
    <li>PBR try-hard skateboard, <a href="#">plaid 8-bit</a></li>
    <li>Flexitarian retro single-origin coffee</li>
    <li>Church-key vinyl pug cardigan</li>
    <li>Biodiesel locavore PBR<br /> try-hard skateboard</li>
    <li>Plaid 8-bit</li>
    <li>Hashtag Echo Park selfies</li>
    <li>PBR try-hard skateboard, <a href="#">plaid 8-bit</a></li>
    <li>Flexitarian retro single-origin coffee</li>
    <li>Church-key vinyl pug cardigan</li>
</ol>


<!-- Description list -->
<dl class="dl">
    <dt>Church-key</dt>
    <dd>Hashtag Echo Park selfies</dd>
    <dt>Biodiesel locavore</dt>
    <dd>PBR try-hard skateboard, <a href="#">plaid 8-bit</a></dd>
    <dt>Plaid 8-bit</dt>
    <dd>Flexitarian retro single-origin coffee</dd>
</dl>


<!-- Unsorted -->
<ul class="ul{{#modifier}} {{.}}{{/modifier}}">
    {{#items}}<li>{{{.}}}</li>{{/items}}
</ul>

<!-- Sorted -->
<ol class="ol{{#modifier}} {{.}}{{/modifier}}">
    {{#items}}<li>{{{.}}}</li>{{/items}}
</ol>

<!-- Description list -->
<dl class="dl{{#modifier}} {{.}}{{/modifier}}">
        {{#items}}
    {{#title}}<dt>{{{.}}}</dt>{{/title}}
    {{#data}}<dd>{{{.}}}</dd>{{/data}}
        {{/items}}
</dl>
 
/* Unsorted */
{
  "items": [
    "Hashtag Echo Park selfies",
    "PBR try-hard skateboard, <a href=\"#\">plaid 8-bit</a>",
    "Flexitarian retro single-origin coffee",
    "Church-key vinyl pug cardigan",
    "Biodiesel locavore PBR<br/> try-hard skateboard",
    "Plaid 8-bit"
  ]
}


/* Sorted */
{
  "items": [
    "Hashtag Echo Park selfies",
    "PBR try-hard skateboard, <a href=\"#\">plaid 8-bit</a>",
    "Flexitarian retro single-origin coffee",
    "Church-key vinyl pug cardigan",
    "Biodiesel locavore PBR<br/> try-hard skateboard",
    "Plaid 8-bit",
    "Hashtag Echo Park selfies",
    "PBR try-hard skateboard, <a href=\"#\">plaid 8-bit</a>",
    "Flexitarian retro single-origin coffee",
    "Church-key vinyl pug cardigan"
  ]
}


/* Description list */
{
  "items": [
    {
      "title": "Church-key",
      "data": "Hashtag Echo Park selfies"
    },
    {
      "title": "Biodiesel locavore",
      "data": "PBR try-hard skateboard, <a href=\"#\">plaid 8-bit</a>"
    },
    {
      "title": "Plaid 8-bit",
      "data": "Flexitarian retro single-origin coffee"
    }
  ]
}
  • Content: 
    $list_ident: .5em !default;

$list_marker_gutter: $list_ident !default;
$list_marker_color: $_text-color !default;

$list_marker_size: 9px !default;

$list_marker_image: '<svg width="10" height="10" viewBox="0 0 10 10" fill="{{color}}" xmlns="http://www.w3.org/2000/svg"><circle cx="5" cy="5" r="4"/></svg>' !default;
$list_marker_image--mobile: '<svg width="10" height="10" viewBox="0 0 10 10" fill="{{color}}" xmlns="http://www.w3.org/2000/svg"><circle cx="5" cy="5" r="3"/></svg>' !default;

$list_marker_styles: (
    background: svg-url($list_marker_image) center center no-repeat,
) !default;

$list_marker_styles--mobile: (
    background: svg-url($list_marker_image--mobile) center center no-repeat,
) !default;

$list_marker_styles--numeric: (
    font-weight: $_font-weight--bold,
    color: $list_marker_color,
) !default;

@import "_list.settings";
@import "_list.styles";

%ul-li {

    @supports (mask-image: url()) {
        position: relative;

        &::before {
            content: "";

            background-image: none !important;
            background-color: currentcolor;
            background-size: contain;

            height: $list_marker_size;
            width: $list_marker_size;

            position: absolute;
            top: (.5em * $_line-height);
            left: calc(#{$list_marker_width} - #{$list_marker_gutter});

            transform: translate(-50%, -50%);

            mask-image: svg-url($list_marker_image);
            mask-repeat: no-repeat;
            mask-position: center left;
            mask-size: contain;

            pointer-events: none;
            user-select: none;
        }

    }

        // Fallback for dark theme if "mask-image" is not supported
    [data-theme="dark"] &::before {
        background-image: svg-url($list_marker_image, $_PAGE-COLOR);
    }

    @include not-on-desktop(){

        @supports (mask-image: url()) {

            &::before {
                mask-image: svg-url($list_marker_image--mobile);
            }

        }

            // Fallback for dark theme if "mask-image" is not supported
        [data-theme="dark"] &::before {
            background-image: svg-url($list_marker_image--mobile, $_PAGE-COLOR);
        }

    }

}
  • URL: /components/raw/list/_list.scss
  • Filesystem Path: components/02-elements/list/_list.scss
  • Size: 2.2 KB
  • Content: 
    $list_ident: .5em !default;

$list_marker_width: 2.5ch !default;
$list_marker_gutter: $list_ident !default;
$list_marker_color: $_text-color !default;

$list_marker_width--numeric: $list_marker_width !default;

$list_marker_styles: (
    background: linear-gradient(to left, $list_marker_color, $list_marker_color) center center no-repeat,
    background-size: 80% 1px,
) !default;

$list_marker_styles--numeric: (
) !default;

$list_title_styles: (
    font-weight: $_font-weight--bold,
) !default;

$list_data_styles: (
    margin-left: 0,
) !default;
  • URL: /components/raw/list/_list.settings.scss
  • Filesystem Path: components/02-elements/list/_list.settings.scss
  • Size: 554 Bytes
  • Content: 
    %ul {
    list-style: none;
    padding-left: $list_ident;

    .ul, .ol {
        @include stack-spacing(small);
    }

    &-li {
        padding-left: calc(#{$list_marker_width} + #{$list_marker_gutter});

        position: relative;

        & + & {
            @include stack-spacing(small);
        }

        &::before {
            content: "";

            position: absolute;
            left: 0;

            display: block;
            width: $list_marker_width;
            height: 1em * $_line-height;
            height: 1lh;

            @include styles($list_marker_styles);
        }

    }

    & > li {
        @extend %ul-li;
    }

}

%ol {
    list-style: none;
    padding-left: $list_ident;

    counter-reset: list;

    #{&}, .ul {
        @include stack-spacing(small);
    }

    &-li {
        padding-left: calc(#{$list_marker_width--numeric} + #{$list_marker_gutter});

        counter-increment: list;

        position: relative;

        & + & {
            @include stack-spacing(small);
        }

        &::before {
            content: counter(list) ".";

            position: absolute;
            left: 0;

            display: block;
            width: $list_marker_width--numeric;

            text-align: right;

            @include styles($list_marker_styles--numeric);
        }

    }

    & > li {
        @extend %ol-li;
    }

}

%dl {
    @include stack-spacing();

    &-dt {
        @include styles($list_title_styles);

        &:not(:first-child) {
            @include stack-spacing(small);
        }

    }

    &-dd {
        @include styles($list_data_styles);
    }

    & > dt {
        @extend %dl-dt;
    }

    & > dd {
        @extend %dl-dd;
    }

}

%ul,
%ol,
%dl {

    a {
        @extend %link;
    }

}

.ul {
    @extend %ul;
}

.ol {
    @extend %ol;
}

.dl {
    @extend %dl;
}
  • URL: /components/raw/list/_list.styles.scss
  • Filesystem Path: components/02-elements/list/_list.styles.scss
  • Size: 1.9 KB