<div class="content-separator">
    <time class="content-separator__date date" datetime="2017-06-26">26. Juni 2017</time>
    <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>
    <time class="content-separator__duration duration" datetime="P8M">8 Min. Lesedauer</time>
</div>
/* No context defined for this component. */
  • Content:
    //
    // Content Separator
    //
    
    // Component specific variables
    $border-position: $base-font-size / 2;
    
    // Component definition
    .content-separator {
      display: flex;
      align-content: center;
      align-items: baseline;
      justify-content: center;
      margin-bottom: $spacer-base;
    
      // 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;
      min-height: $base-font-size;
    }
    
    // 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 {
      background-color: $box-shadow-color-light;
      padding-right: $spacer-xs;
      padding-left: $spacer-xs;
      line-height: 1;
    }
    
    .content-separator__date {
      margin-right: $spacer-base;
    }
    
  • URL: /components/raw/content-separator/_content-separator.scss
  • Filesystem Path: components/02-molecules/content-separator/_content-separator.scss
  • Size: 1.1 KB
  • Handle: @content-separator
  • Preview:
  • Filesystem Path: components/02-molecules/content-separator/content-separator.html

There are no notes for this item.