Spartherm

Lists 

<div class="container">

    <div class="row mb-4">
        <div class="col-lg-4">
            <div class="desc desc-line mt-5">Unordered list</div>
            <ul class="list"><strong>Bulletpoints</strong><br>Lorem ipsum
                <li>Lorem ipsum</li>
                <li>Lorem ipsum dolor sit</li>
                <li>Lorem ipsum next</li>
                <li>Um solis natoque magnis</li>
            </ul>
        </div>
        <div class="col-lg-4">
            <div class="desc desc-line mt-5">Ordered list</div>
            <ol>
                <li>Lorem ipsum</li>
                <li>Lorem ipsum dolor sit</li>
                <li>Lorem ipsum next</li>
                <li>Um solis natoque magnis</li>
                <li>Lorem ipsum</li>
                <li>Um solis natoque</li>
            </ol>
        </div>
        <div class="col-lg-4">
            <div class="desc desc-line mt-5">Check list</div>
            <ul class="check-list">
                <li>Lorem ipsum</li>
                <li>Lorem ipsum dolor sit</li>
                <li>Lorem ipsum next</li>
                <li>Um solis natoque magnis</li>
                <li>Lorem ipsum</li>
                <li>Um solis natoque</li </ul>
        </div>
    </div>

    <div class="row">
        <div class="col-12 col-md-8 col-lg-6">
            <div class="desc desc-line">Structured list</div>
            <ul class="structured-list">
                <li>Zubehör 1</li>
                <li>Zubehör 2</li>
                <li>Zubehör 3</li>
                <li>Zubehör 4</li>
                <li>Zubehör 5</li>
                <li>Zubehör 6</li>
            </ul>
        </div>
    </div>
</div>

</div>
 
<div class="container">

    <div class="row mb-4">
        <div class="col-lg-4">
            <div class="desc desc-line mt-5">Unordered list</div>
            <ul class="list"><strong>Bulletpoints</strong><br>Lorem ipsum
                <li>Lorem ipsum</li>
                <li>Lorem ipsum dolor sit</li>
                <li>Lorem ipsum next</li>
                <li>Um solis natoque magnis</li>
            </ul>
        </div>
        <div class="col-lg-4">
            <div class="desc desc-line mt-5">Ordered list</div>
            <ol>
                <li>Lorem ipsum</li>
                <li>Lorem ipsum dolor sit</li>
                <li>Lorem ipsum next</li>
                <li>Um solis natoque magnis</li>
                <li>Lorem ipsum</li>
                <li>Um solis natoque</li>
            </ol>
        </div>
        <div class="col-lg-4">
            <div class="desc desc-line mt-5">Check list</div>
            <ul class="check-list">
                <li>Lorem ipsum</li>
                <li>Lorem ipsum dolor sit</li>
                <li>Lorem ipsum next</li>
                <li>Um solis natoque magnis</li>
                <li>Lorem ipsum</li>
                <li>Um solis natoque</li
            </ul>
        </div>
    </div>

    <div class="row">
        <div class="col-12 col-md-8 col-lg-6">
            <div class="desc desc-line">Structured list</div>
            <ul class="structured-list">
                <li>Zubehör 1</li>
                <li>Zubehör 2</li>
                <li>Zubehör 3</li>
                <li>Zubehör 4</li>
                <li>Zubehör 5</li>
                <li>Zubehör 6</li>
            </ul>
            </div>
        </div>
    </div>

</div>
 
/* Kein Inhalt definiert. */
  • Inhalt: 
    ol, ul {
  list-style: none;
  margin: 0 0 .5em;
  padding: 0;
  font-weight: $font-weight-lighter;
  .dark & {
    color: $white;
  }
  strong {
    font-weight: 500;
  }
}

ul {
  &.list {
    li {
      position: relative;
      padding-left: 1em;
      &:before {
        position: absolute;
        content: '■';
        color: $accent;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        font-size: .5rem;
      }
    }
  }
  &.check-list {
    li {
      padding-left: 1.75em;
      &:before {
        position: absolute;
        content: '\f00c';
        font-family: "Font Awesome 5 Pro";
        font-weight: 400;
        font-size: 1rem;
        color: $accent;

      }
    }
  }
  &.structured-list {
    li {
      padding: .5em 0;
      border-bottom: 1px solid $gray-300;
      font-weight: $font-weight-medium;
      .dark & {
        border-color: $gray-600;
      }
      &:before {
        content: '';
      }
    }
  }
  &.nav {
    list-style-type: none;
    display: flex;
    align-items: center;
    li {
      margin: 0;
      padding: 0;
      &:before {
        display: none;
      }
    }
  }
}

ol {
  counter-reset: item;
  li {
    display: block;
    &:before {
      padding-right: .25rem;
      color: $accent;
      content: counter(item) ". ";
      counter-increment: item;
      font-weight: 400;
    }
  }
}
  • URL: /components/raw/lists/lists.scss
  • Pfad Dateisystem: components\01-general\lists\lists.scss
  • Größe: 1.5 KB

Keine Notizen vorhanden.