Web Design Guide 2024-10-28 08:44:01 | 2.0.0

List: Horizontal 

<ul class=" list -horizontal">
    <li class="list__item">schnelle Verlegung von großen Nennweiten
    </li>
    <li class="list__item">RAUMAT auf einen Blick
    </li>
    <li class="list__item">Ringsteifigkeit SN8 oder SN16
    </li>
</ul>
 
{{#if text}}{{{trim text}}}{{/if}}
{{#if items}}
  {{#tag tag class=(concat mixes " list " modifiers)}}
    {{#each items}}
      <li class="list__item">{{render '@atoms-list' this}}</li>
    {{/each}}
  {{/tag}}
{{/if}}
 
{
  "items": [
    {
      "text": "schnelle Verlegung von großen Nennweiten"
    },
    {
      "text": "RAUMAT auf einen Blick"
    },
    {
      "text": "Ringsteifigkeit SN8 oder SN16"
    }
  ],
  "tag": "ul",
  "modifiers": "-horizontal"
}
  • Content: 
    /* List */

.list {
  $root: &;

  padding-left: 0;
  list-style: none;

  &.-horizontal {
    > #{$root}__item {
      display: inline-block;
      margin-right: 2 * $list-margin;

      &:last-child {
        margin-right: 0;
      }
    }
  }

  &.-ordered {
    counter-reset: item;

    > #{$root}__item {
      counter-increment: item;

      &::before {
        content: counter(item);
      }
    }
  }

  &.-unordered {
    > #{$root}__item {
      @include icon-content('\\2014');
    }
  }

  &.-chevron {
    $symbol: map-get($icons, 'chevron-right');

    > #{$root}__item {
      &::before {
        @include icon-content-extended($symbol);

        color: var(--list-chevron-color, #{$list-chevron-color});
      }

      &:hover::before {
        color: var(--list-chevron-hover-color, var(--list-chevron-color, #{$list-chevron-hover-color}));
      }

      &:active::before {
        color: var(
          --list-chevron-active-color,
          var(--list-chevron-hover-color, var(--list-chevron-color, #{$list-chevron-active-color}))
        );
      }
    }
  }

  &.-arrow-right {
    $symbol: map-get($icons, 'arrow-right-middle');

    > #{$root}__item {
      --link-color: $list-arrow-color;
      margin-left: 2.4rem;
      color: $list-arrow-color;

      &::before {
        @include icon-content-extended($symbol);

        margin: 0 0.6rem 0 -2.4rem;
        color: var(--list-chevron-color, #{$list-arrow-arrow-color});
      }

      &:hover,
      &:active {
        color: var(--list-chevron-hover-color, var(--list-chevron-color, #{$list-arrow-hover-color}));

        a {
          text-decoration: none;
        }
      }
    }
  }

  &.-hook {
    $symbol: map-get($icons, 'hook');

    > #{$root}__item {
      margin-left: 2.4rem;

      &::before {
        @include icon-content-extended($symbol);

        margin: 0 0.6rem 0 -2.4rem;
        color: var(--list-hook-color, #{$list-hook-icon-color});
      }
    }
  }

  &.-ordered,
  &.-unordered {
    > #{$root}__item {
      &::before {
        font-weight: $font-weight-bold;
      }
    }
  }

  &.-ordered,
  &.-unordered,
  &.-chevron {
    > #{$root}__item {
      margin-left: 2.4rem;

      &::before {
        display: inline-block;
        width: 2.4rem;
        margin: 0 0 0 -2.4rem;
      }
    }
  }
}
  • URL: /components/raw/atoms-list/_list.scss
  • Filesystem Path: src/components/02-ui-components/01-atoms/03-list/_list.scss
  • Size: 2.3 KB

There are no notes for this item.