hkk Frontend 2017

Bühnen-Einschub: Stage Insert Text Teaser 

<div class="stage-insert u-inverted stage-insert--text">
    <div class="stage-insert__inner">
        <div class="stage-insert__section">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
                pretium quis, sem.</p>
        </div>
        <div class="stage-insert__links"><a class="teaser-link stage-insert__link teaser-link--big" href=""><span class="teaser-link__inner">Lorem ipsum</span>
<svg class="icon icon--arrow-right" id="icon-4e2f" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a><a class="teaser-link stage-insert__link teaser-link--big" href=""><span class="teaser-link__inner">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</span>
<svg class="icon icon--arrow-right" id="icon-4f88" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a><a class="teaser-link stage-insert__link teaser-link--big" href=""><span class="teaser-link__inner">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</span>
<svg class="icon icon--arrow-right" id="icon-d306" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-arrow-right"></use>
</svg></a>
        </div>
    </div>
</div>
 
-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);
  attr.class.push(`stage-insert--${variants || 'default'}`);

//- Render stage insert
.stage-insert.u-inverted&attributes(attr)
  .stage-insert__inner
    //- Description
    if description
      .stage-insert__section
        != renderPug(description)

    //- Table of contents
    if toc
      .stage-insert__toc
        ul.stage-insert__toc-list(aria-label='Zum Bereich springen')
          each item in toc
            li.stage-insert__toc-item
              a.stage-insert__toc-link(href='') #[!= include('@icon', {icon: 'arrow-down', before: true})]#{item}

    //- Links
    if links
      .stage-insert__links
        each link in links
          != include('@teaser-link--big-white', { text: link, attr: { class: 'stage-insert__link' } })

    if teaser
      .stage-insert__teaser
        if teaser.figure
          != include('@figure', teaser.figure)

        if teaser.icon
          .stage-insert__teaser-icon
            != include('@icon', { icon: teaser.icon })

        if teaser.title
          .stage-insert__teaser-title #{teaser.title}

        if teaser.link
          .stage-insert__teaser-link
            != include('@teaser-link', {link: teaser.link, text: 'Mehr erfahren'})
          //- Faux link
          a.teaser__overlay-link(href=teaser.link, tabindex='-1', aria-hidden='true')
 
{
  "description": "p Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.\n",
  "variants": "text",
  "links": [
    "Lorem ipsum",
    "Lorem ipsum dolor sit amet, consectetuer adipiscing elit",
    "Lorem ipsum dolor sit amet, consectetuer adipiscing elit"
  ]
}
  • Content: 
    .stage-insert {
  background-color: $color-blue;
  color: rgba(#fff, 0.9);
}

.stage-insert__inner {
  @include mq($from: m) {
    display: flex;
    flex-wrap: wrap;
  }

  @include mq($from: l) {
    flex-wrap: nowrap;
    justify-content: space-between;
  }
}

.stage-insert__section,
.stage-insert__toc {
  padding: 2rem 2.5rem 1.5rem;

  @include mq($from: m) {
    width: 50%;
  }

  @include mq($from: l) {
    padding: 3rem 3.5rem 2.5rem;
  }

  @include mq($from: xl) {
    padding: 4rem 4.5rem 3.5rem;
  }
}

.stage-insert__section {
  @include mq($from: l) {
    flex-shrink: 1;
    max-width: 60%;
    width: auto;
  }
}

.stage-insert__section:only-child {
  max-width: 100%;
  width: 100%;
}

.stage-insert__toc {
  margin-top: -1rem;
  padding-top: 0;

  @include mq($from: m) {
    margin-top: 0;
    padding-top: 2rem;
  }

  @include mq($from: l) {
    max-width: 40%;
    min-width: 30%;
    padding-top: 2.5rem;
    width: auto;

    &:last-child {
      min-width: 40%;
    }
  }

  @include mq($from: xl) {
    max-width: 33.33%;
    min-width: 33.33%;
    padding-top: 3.5rem;

    &:last-child {
      min-width: 33.33%;
    }
  }
}

.stage-insert__toc-list {
  @include list-reset();

  font-size: 1.5rem;
  margin-bottom: 2rem;
}

.stage-insert__toc-item {
  border-bottom: 1px solid rgba($color-steelgrey-light, 0.2);
  color: #fff;
  display: block;
  font-weight: bold;
}

.stage-insert__toc-link {
  display: block;
  padding-bottom: 1rem;
  padding-top: 1rem;
}

.stage-insert__links {
  @include mq($from: m) {
    display: flex;
    flex-wrap: wrap;
    width: 50%;
  }

  @include mq($from: l) {
    max-width: 40%;
    min-width: 30%;
    width: auto;
  }

  @include mq($from: l) {
    max-width: 33.33%;
    min-width: 33.33%;
  }
}

@include mq($from: m, $until: l) {
  .stage-insert__links:nth-child(3) {
    flex-wrap: nowrap;
    width: 100%;
  }
}

.stage-insert__link {
  background-color: $color-blue-light;
  display: block;
  flex-shrink: 1;
  margin-top: 1px;
  padding: 2rem 2.5rem;
  width: 100%;

  &:first-child {
    margin-top: 0;
  }

  @include mq($from: l) {
    padding: 3rem 3.5rem;
  }

  @include mq($from: xl) {
    padding: 4rem 4.5rem;
  }

  @include mq($from: m, $until: l) {
    .stage-insert__links:nth-child(3) & {
      margin-left: 1px;
      margin-top: 0;
      width: 50%;

      &:first-child,
      &:only-child {
        margin-left: 0;
      }

      &:only-child {
        width: 100%;
      }
    }
  }
}

.stage-insert--text {
  .stage-insert__links,
  .stage-insert__link {
    display: inline-block;
  }

  .stage-insert__link {
    margin-bottom: 1.5rem;
    padding: 2rem;
  }

  .stage-insert__links {
    padding: 2rem 2.5rem 1.5rem;

    @include mq($from: l) {
      padding: 3rem 3.5rem 2.5rem;
    }

    @include mq($from: xl) {
      padding: 4rem 4.5rem 3.5rem;
    }
  }
}

.stage-insert__teaser {
  background-color: $color-blue-light;
  display: inline-block;
  padding: 2rem 2.5rem 1.5rem;
  position: relative;
  width: 100%;

  .figure {
    margin-bottom: 1.5rem;
  }

  .stage-insert__teaser-title {
    font-weight: bold;
    margin-bottom: 0.5rem;

    @include mq($from: m) {
      margin-bottom: 1rem;
    }
  }

  .stage-insert__teaser-link {
    font-size: 1.5rem;
    font-weight: bold;
  }

  &:hover .stage-insert__teaser-link,
  &:focus .stage-insert__teaser-link {
    text-decoration: underline;
  }

  &:hover,
  &:focus {
    text-decoration: none;
  }

  @include mq($from: m) {
    max-width: 50%;
  }

  @include mq($from: l) {
    max-width: 33.33%;
    min-width: 33.33%;
    padding: 3rem 3.5rem 2.5rem;
  }

  @include mq($from: xl) {
    padding: 4rem 4.5rem 3.5rem;
  }
}

.stage-insert--icon,
.stage-insert--image {
  .stage-insert__teaser {
    background-color: transparent;
  }

  .stage-insert__section {
    @include mq($from: m) {
      max-width: 66%;
    }
  }
}

.stage-insert--icon {
  .stage-insert__teaser {
    text-align: center;
  }
}

.stage-insert__teaser-icon {
  color: rgba(#fff, 0.9);
  display: block;
  font-size: 20rem;
  line-height: 1.5rem;
  opacity: 0.1;
  user-select: none;
}
  • URL: /components/raw/stage-insert/stage-insert.scss
  • Filesystem Path: src/components/organisms/stage-insert/stage-insert.scss
  • Size: 4.1 KB

There are no notes for this item.