<section class="share-section">
    <span class="icon icon-arrow-long-down icon--brand-secondary"></span>
    <h3 class="share-section__heading">Share on</h3>
    <ul class="share-section__list">
        <li>
            <a class="share-section__link" target="_blank" href="" title="Facebook">
                <span class="icon icon-facebook icon--brand-secondary"></span>
            </a>
        </li>
        <li>
            <a class="share-section__link" target="_blank" href="" title="Twitter">
                <span class="icon icon-twitter icon--brand-secondary"></span>
            </a>
        </li>
        <li>
            <a class="share-section__link" href="">
                <span class="icon icon-email icon--brand-secondary" title="Email"></span>
            </a>
        </li>
    </ul>
</section>
<section class="share-section">
    <span class="icon icon-arrow-long-down icon--brand-secondary"></span>
    <h3 class="share-section__heading">Share on</h3>
    <ul class="share-section__list">
        <li>
            <a class="share-section__link" target="_blank" href="" title="Facebook">
                <span class="icon icon-facebook icon--brand-secondary"></span>
            </a>
        </li>
        <li>
            <a class="share-section__link" target="_blank" href="" title="Twitter">
                <span class="icon icon-twitter icon--brand-secondary"></span>
            </a>
        </li>
        <li>
            <a class="share-section__link" href="">
                <span class="icon icon-email icon--brand-secondary" title="Email"></span>
            </a>
        </li>
    </ul>
</section>
/* No context defined. */
  • Content:
    .share-section {
      @extend %container-vertical-spacing-xl;
    
      margin: 0 auto;
      text-align: center;
    
      > * + * {
        margin-top: $spacer-sm;
      }
    
      .icon-arrow-long-down {
        transition: $transform-transition;
      }
    
      &:hover {
        .icon-arrow-long-down {
          transform: translateY($spacer-xs);
        }
      }
    }
    
    .share-section__heading {
      margin-bottom: 0; //FIXME
      color: $sharing-headline-color;
      font-size: $font-size-lg;
    }
    
    .share-section__list {
      @extend %list-unstyled;
    
      display: flex;
      flex-wrap:nowrap;
      justify-content: center;
      margin-bottom: 0;
    }
    
    .share-section__link {
      @extend %heading-font-bold;
      @extend %link-unstyled;
    
      padding: $spacer-sm;
    
      .icon {
        transition: standard-transition(background-color);
    
        &:hover,
        &:focus {
          background-color: $sharing-interaction-color;
        }
      }
    }
    
  • URL: /components/raw/share-section/_share-section.scss
  • Filesystem Path: components/04-molecules/article&blog-post-elements/share-section/_share-section.scss
  • Size: 827 Bytes
  • Handle: @share-section
  • Preview:
  • Filesystem Path: components/04-molecules/article&blog-post-elements/share-section/share-section.html

No notes defined.