<section class="center share-section">
    <img src="../../assets/arrow-long-down.svg" class="share-section__arrow">
    <h3 class="share-section__heading">Share on</h3>
    <ul class="share-section__list">
        <li><a class="share-section__link" target="_blank" href="http://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.innoq.com%2Fde%2Farticles%2F2017%2F06%2Finnovation-tokens%2F"><i class="icon icon-facebook"></i></a>
        </li>
        <li><a class="share-section__link" target="_blank" href="http://twitter.com/share?url=https%3A%2F%2Fwww.innoq.com%2Fde%2Farticles%2F2017%2F06%2Finnovation-tokens%2F&amp;text=Innovation+Tokens+%E2%80%93+Gegen+Informatikerromantik+und+Technologie%C3%BCberflutung+von+%40heribert_innoq&amp;via=innoq"><i class="icon icon-twitter"></i></a>
        </li>
        <li><a class="share-section__link" href="mailto:?subject=Innovation+Tokens+%E2%80%93+Gegen+Informatikerromantik+und+Technologie%C3%BCberflutung&amp;body=https%3A%2F%2Fwww.innoq.com%2Fde%2Farticles%2F2017%2F06%2Finnovation-tokens%2F"><i class="icon icon-email"></i></a>
        </li>
    </ul>
</section>
<section class="center share-section">
    <img src={context.app.uri('assets/arrow-long-down.svg')} class="share-section__arrow" />
    <h3 class="share-section__heading">Share on</h3>
    <ul class="share-section__list">
        <li>
            <a class="share-section__link" target="_blank" href="http://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.innoq.com%2Fde%2Farticles%2F2017%2F06%2Finnovation-tokens%2F">
                <i class="icon icon-facebook"></i>
            </a>
        </li>
        <li>
            <a class="share-section__link" target="_blank" href="http://twitter.com/share?url=https%3A%2F%2Fwww.innoq.com%2Fde%2Farticles%2F2017%2F06%2Finnovation-tokens%2F&amp;text=Innovation+Tokens+%E2%80%93+Gegen+Informatikerromantik+und+Technologie%C3%BCberflutung+von+%40heribert_innoq&amp;via=innoq">
                <i class="icon icon-twitter"></i>
            </a>
        </li>
        <li>
            <a class="share-section__link" href="mailto:?subject=Innovation+Tokens+%E2%80%93+Gegen+Informatikerromantik+und+Technologie%C3%BCberflutung&amp;body=https%3A%2F%2Fwww.innoq.com%2Fde%2Farticles%2F2017%2F06%2Finnovation-tokens%2F">
                <i class="icon icon-email"></i>
            </a>
        </li>
    </ul>
</section>
/* No context defined for this component. */
  • Content:
    $share-section-icon-size: ms(4);
    $share-section-arrow-size: ms(16);
    
    .share-section {
      margin: 0 auto;
      margin-bottom: $spacer-xl;
      width: 50%;
      text-align: center;
    
      &::before {
        display: block;
        transition: $ease-out-back-transition;
        margin-bottom: $spacer-sm;
        font-size: $share-section-arrow-size;
      }
    
      &:hover {
        &::before {
          transform: translateY($spacer-xs);
        }
      }
    }
    
    .share-section__heading {
      line-height: $share-section-heading-line-height;
      font-size: $share-section-heading-font-size;
    }
    
    .share-section__list {
      @extend %list-unstyled;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }
    
    .share-section__link {
      @extend %heading-font-bold;
      @extend %link-unstyled;
      transition: standard-transition(color);
      padding: $spacer-sm;
      font-size: $share-section-icon-size;
    
      &:hover,
      &:focus {
        color: $haring-interaction-color;
      }
    }
    
  • URL: /components/raw/share-section/_share-section.scss
  • Filesystem Path: components/02-molecules/share-section/_share-section.scss
  • Size: 900 Bytes

There are no notes for this item.