<div class="content-separator">
    <time class="content-separator__duration duration" datetime="P8M">8 Min. Lesedauer</time>
</div>
<div class="content-separator">
    <time class="content-separator__date date" datetime="2017-06-26">26. Juni 2017</time>
    <hr class="content-separator__separator" />
    <time class="content-separator__duration duration" datetime="P8M">8 Min. Lesedauer</time>
</div>
<div class="demo demo--inverted">
    <div class="content-separator content-seperator--inverted">
        <time class="content-separator__date date" datetime="2017-06-26">26. Juni 2017</time>
        <hr class="content-separator__separator" />
        <time class="content-separator__duration duration" datetime="P8M">8 Min. Lesedauer</time>
    </div>
</div>
<div class="content-separator">
    <time class="content-separator__duration duration" datetime="P8M">8 Min. Lesedauer</time>
</div>

<div class="content-separator">
    <time class="content-separator__date date" datetime="2017-06-26">26. Juni 2017</time>
    <hr class="content-separator__separator" />
    <time class="content-separator__duration duration" datetime="P8M">8 Min. Lesedauer</time>
</div>

<div class="demo demo--inverted">
    <div class="content-separator content-seperator--inverted">
        <time class="content-separator__date date" datetime="2017-06-26">26. Juni 2017</time>
        <hr class="content-separator__separator" />
        <time class="content-separator__duration duration" datetime="P8M">8 Min. Lesedauer</time>
    </div>
</div>
/* No context defined. */
  • Content:
    //
    // Content Separator
    //
    
    // Component specific variables
    $border-position: $font-size-base / 2;
    
    // Component definition
    .content-separator {
      display: flex;
      width: 100%;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
    }
    
    // Both subcomponents overlap the border of its parent component by
    // having a small padding and a white background color.
    .content-separator__date,
    .content-separator__duration {
      display: inline-block;
      padding-right: $spacer-xs;
      padding-left: $spacer-xs;
      background-color: $box-shadow-color-light;
      color: $content-seperator-text-color;
      line-height: 1;
    }
    
    .content-separator__separator {
      width: $spacer-sm;
      height: 2px;
      border: 0;
      margin: $spacer-sm 0;
      background-color: $content-seperator-text-color;
      transform: rotate(90deg);
    }
    
    // Inverted Version
    .content-seperator--inverted {
      .content-separator__date,
      .content-separator__duration {
        background-color: $content-seperator-text-color;
        color: $box-shadow-color-light;
      }
    
      .content-separator__separator {
        background-color: $box-shadow-color-light;
      }
    }
    
    //Breakpoints
    @media screen and (min-width: $grid-breakpoint-md) {
      .content-separator {
        height: 1px;
        min-height: $font-size-base;
        flex-direction: row;
        align-content: center;
        // The border in the middle of the component is realized with
        // a stack of two inset box-shadows the first one is white
        // and reaches from the top to the middle of the baseline.
        // The second box-shadow is 1px taller than the first one,
        // resulting in a single line.
        box-shadow: $box-shadow-color-light 0 $border-position 0 0 inset,
          $box-shadow-color-dark 0 calc(#{$border-position} + 1px) 0 0 inset;
      }
    
      .content-seperator--inverted {
        // The border in the middle of the component is realized with
        // a stack of two inset box-shadows the first one is white
        // and reaches from the top to the middle of the baseline.
        // The second box-shadow is 1px taller than the first one,
        // resulting in a single line.
        box-shadow: $box-shadow-color-dark 0 $border-position 0 0 inset,
          $box-shadow-color-light 0 calc(#{$border-position} + 1px) 0 0 inset;
      }
    
      .content-separator__separator {
        margin: 0;
        transform: rotate(180deg);
      }
    }
    
  • URL: /components/raw/content-separator/_content-separator.scss
  • Filesystem Path: components/04-molecules/article&blog-post-elements/content-separator/_content-separator.scss
  • Size: 2.3 KB
  • Handle: @content-separator
  • Preview:
  • Filesystem Path: components/04-molecules/article&blog-post-elements/content-separator/content-separator.html

No notes defined.