List

<div>
    <ul>
        <li>Unordered List item</li>
        <li>Unordered List item
            <ul>
                <li>Nested unordered list item</li>
                <li>Nested unordered list item
                    <ul>
                        <li>Another Nested unordered list item</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>Unordered List item
            <br>Unordered List item</li>
    </ul>
    <ul class="bold-list">
        <li>Bullet List Bold Item</li>
        <li>Bullet List Bold Item</li>
    </ul>
    <ul class="checklist">
        <li>Checklist Item</li>
        <li>Checklist Item</li>
    </ul>
    <ol>
        <li>Ordered List item</li>
        <li>Ordered List item</li>
        <li>Ordered List item</li>
    </ol>
    <ol>
        <li>Ordered List item
            <ul>
                <li>Nested unordered list item</li>
                <li>Nested unordered list item</li>
            </ul>
        </li>
        <li>Ordered List item</li>
        <li>Ordered List item</li>
    </ol>
    <dl>
        <dt>Description List item term</dt>
        <dd>Description List item description</dd>
        <dt>Description List item term</dt>
        <dd>Description List item description 1</dd>
        <dd>Description List item description 2</dd>
    </dl>
    <ul class="tuple-list">
        <li class="tuple-list__entry"><span class="tuple-list__label">Dauer:</span><span class="tuple-list__value">1 Tag</span>
        </li>
        <li class="tuple-list__entry"><span class="tuple-list__label">Teilnehmer:</span><span class="tuple-list__value">Management, Product Owner, Digital Product Designer</span>
        </li>
        <li class="tuple-list__entry"><span class="tuple-list__label">Ergebnis:</span><span class="tuple-list__value">Eine konkrete Produktvision und ein Vorschlag zu umsetzbaren nächsten Schritten.</span>
        </li>
    </ul>
</div>
<div>
    <ul>
        <li>
            Unordered List item
        </li>
        <li>
            Unordered List item
            <ul>
                <li>
                    Nested unordered list item
                </li>
                <li>
                    Nested unordered list item
                    <ul>
                        <li>
                            Another Nested unordered list item
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            Unordered List item <br />
            Unordered List item
        </li>
    </ul>

    <ul class="bold-list">
        <li>
            Bullet List Bold Item
        </li>
        <li>
            Bullet List Bold Item
        </li>
    </ul>

    <ul class="checklist">
        <li>
            Checklist Item
        </li>
        <li>
            Checklist Item
        </li>
    </ul>

    <ol>
        <li>
            Ordered List item
        </li>
        <li>
            Ordered List item
        </li>
        <li>
            Ordered List item
        </li>
    </ol>

    <ol>
        <li>
            Ordered List item
            <ul>
                <li>
                    Nested unordered list item
                </li>
                <li>
                    Nested unordered list item
                </li>
            </ul>
        </li>
        <li>
            Ordered List item
        </li>
        <li>
            Ordered List item
        </li>
    </ol>

    <dl>
        <dt>Description List item term</dt>
        <dd>Description List item description</dd>
        <dt>Description List item term</dt>
        <dd>Description List item description 1</dd>
        <dd>Description List item description 2</dd>
    </dl>

    <ul class="tuple-list">
        <li class="tuple-list__entry"><span class="tuple-list__label">Dauer:</span><span class="tuple-list__value">1 Tag</span></li>
        <li class="tuple-list__entry"><span class="tuple-list__label">Teilnehmer:</span><span class="tuple-list__value">Management, Product Owner, Digital Product Designer</span></li>
        <li class="tuple-list__entry"><span class="tuple-list__label">Ergebnis:</span><span class="tuple-list__value">Eine konkrete Produktvision und ein Vorschlag zu umsetzbaren nächsten Schritten.</span></li>
    </ul>
</div>
{
  "text": "Listen"
}
  • Content:
      // ---- List related variables--------------------------------------------------
    $bullet-size: $spacer-xs; // ~9px
    $bullet-offset: $spacer-sm; // ~16px
    $list-indent: $bullet-offset + $bullet-size;
    $number-space: $spacer-md;
    $tuple-list-label-width: 8rem;
    
    
    // ---- Unordered Lists --------------------------------------------------------
    //
    .list-unstyled {
      @extend %list-unstyled;
    }
    
    // ---- Unordered Lists --------------------------------------------------------
    //
    // Scope element based selector to elements, that do not carry a
    // class attribute, to prevent reverting styles for all non-default lists.
    //
    // sass-lint:disable force-pseudo-nesting
    
    ul:not([class]),
    .bold-list {
      @extend %unsorted-list;
      @extend %heading-font-regular;
    
      & > li {
        padding-left: $list-indent;
    
        &::before {
          position: absolute;
          top: ($bullet-list-line-height * $bullet-list-font-size) / 2;
          left: 0;
          margin-top: -($bullet-size / 2);
          border-radius: 50%;
          background: $bullet-list-color;
          width: $bullet-size;
          height: $bullet-size;
          content: '';
        }
      }
    
      ul {
        // Nested lists need diffrent vertical spacings
        // to blend into the outer list.
        margin-top: $container-spacer-x-sm;
    
        &,
        li > ul > li {
          margin-bottom: 0;
        }
    
        // Change bullet appeareance in nested contexts
        li::before {
          border: 1px solid $bullet-list-color;
          background: $bullet-list-bg-color;
        }
      }
    }
    
    
    // ---- Bold Bullet Lists ----------------------------------------------------------
    //
    .bold-list {
      @extend %heading-font-bold;
    }
    
    // ---- Checked Lists ----------------------------------------------------------
    //
    .checklist {
      @extend %unsorted-list;
      @extend %heading-font-bold;
    
      li {
        padding-left: $list-indent;
    
        &::before {
          @extend %icon;
          position: absolute;
          top: .45em;
          left: 0;
          color: $bullet-list-color;
          content: $icon-check;
    
          // sass-lint:disable no-vendor-prefixes
          -webkit-text-stroke-width: 2px;
        }
      }
    }
    
    
    // ---- Ordered Lists ----------------------------------------------------------
    //
    // Generated numbers from default ordered lists can't be styled directly
    // yet. Therefore we disable auto-numbering and use a counter to increment
    // a number and insert it via :before content.
    //
    // Scope element based selector to elements, that do not carry a
    // class attribute, to prevent reverting styles for all non-default lists.
    //
    // sass-lint:disable force-pseudo-nesting
    ol:not([class]) {
      @extend %heading-font-regular;
      @include list-unstyled;
      margin-bottom: $content-spacer-base;
      line-height: $ordered-list-line-height-small;
      font-size: $ordered-list-font-size-small;
      counter-reset: number;
    
      & > li {
        position: relative;
        margin-bottom: $spacer-xs;
        padding-left: $number-space;
    
        &::before {
          @extend %heading-font-bold;
          position: absolute;
          top: -.02em;
          left: 0;
          width: $number-space;
          line-height: $ordered-list-counter-line-height;
          font-size: $ordered-list-counter-font-size-small;
          content: counter(number);
          counter-increment: number;
        }
      }
    
      ul {
        // Nested lists need diffrent vertical spacings
        // to blend into the outer list.
        margin-top: $container-spacer-x-sm;
    
        &,
        li > ul > li {
          margin-bottom: 0;
        }
      }
    }
    
    // ---- Definition Lists -------------------------------------------------------
    //
    // adapted from: /components/detail/talk-page
    // see lib/styles/tools/text
    dl:not([class]) {
      @extend %definition-list;
    }
    
    // ---------- Tuple List ----------
    .tuple-list {
      @extend %list-unstyled;
    }
    
    .tuple-list__label {
      @extend %teaser-caption;
      display: block;
    }
    
    .tuple-list__entry {
      margin-bottom: $container-spacer-y-sm;
    }
    
    .tuple-list__value {
      display: block;
      font-family: $font-family-sans-serif;
    }
    
    @media screen and (min-width: $grid-breakpoint-md) {
      .tuple-list__entry {
        display: grid;
        margin-bottom: $spacer-xxs;
        grid-template-columns: $tuple-list-label-width auto;
        grid-template-rows: auto;
        grid-template-areas: 'label value';
      }
    
      .tuple-list__label {
        grid-area: label;
      }
    
      .tuple-list__value {
        grid-area: value;
      }
    }
    
    // @media screen and (min-width: $grid-breakpoint-lg) {
    //   .tuple-list__entry {
    //     grid-template-columns: 15% 75%;
    //   }
    // }
    
  • URL: /components/raw/list/_list.scss
  • Filesystem Path: components/01-atoms/text/block/list/_list.scss
  • Size: 4.4 KB

@todo:

find a solution to make it work without a div wrapper for jsx