Spartherm

Dividers & Lines 

<div class="container">

    <div class="desc desc-line">Lines</div>

    <div class="row py-4">
        <div class="col-12 col-lg-6">
            <span class="line"></span>
        </div>
        <div class="col-12 col-lg-6">
            <span class="line line-left"></span>

        </div>
    </div>

    <div class="desc desc-line">Dividers</div>

    <pre><code>hr, .hr</code></pre>
    <hr>

    <pre><code>hr.secondary, .hr.secondary</code></pre>
    <hr class="secondary">

    <pre><code>hr.dark, .hr.dark</code></pre>
    <hr class="dark">

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

    <div class="desc desc-line">Lines</div>

    <div class="row py-4">
        <div class="col-12 col-lg-6">
            <span class="line"></span>
        </div>
        <div class="col-12 col-lg-6">
            <span class="line line-left"></span>

        </div>
    </div>


    <div class="desc desc-line">Dividers</div>

    <pre><code>hr, .hr</code></pre>
    <hr>

    <pre><code>hr.secondary, .hr.secondary</code></pre>
    <hr class="secondary">

    <pre><code>hr.dark, .hr.dark</code></pre>
    <hr class="dark">

</div>
 
/* Kein Inhalt definiert. */
  • Inhalt: 
    .line {
  display: inline-block;
  height: 4px;
  width: 55px;
  margin: .75rem 0 1rem;
  background-color: $secondary;
  &-left {
    display: inline-block;
    width: 4px;
    height: 44px;
  }
}

hr, .hr {
  border-color: $gray-300;
  .dark & {
    border-color: $gray-600;
    &.primary {
      border-color: $primary;
    }
    &.light {
      border-color: $dark;
    }
    &.dark {
      border-color: $light;
    }
  }
  &.accent {
    border-color: $accent;
  }
  &.primary {
    border-color: $primary;
  }
  &.secondary {
    border-color: $secondary;
  }
  &.light {
    border-color: $light;
  }
  &.dark {
    border-color: $dark;
  }
}
  • URL: /components/raw/lines/lines.scss
  • Pfad Dateisystem: components\01-general\lines\lines.scss
  • Größe: 692 Bytes

Keine Notizen vorhanden.