TheaterMania Component Library

Social: Share 

<div class="social social--share">
    <span class="social-text title-highlight">Share This</span>
    <ul class="social__list" aria-label="Social network profiles">
        <li class="social-list-item">
            <a href="#facebook-url">
                <svg class="icon icon--facebook">
  <use xlink:href="/assets/icons/sprite-sheet.svg#facebook"></use>
</svg>
                <span class="visually-hidden">Facebook</span>
            </a>
        </li>
        <li class="social-list-item">
            <a href="#twitter-url">
                <svg class="icon icon--twitter">
  <use xlink:href="/assets/icons/sprite-sheet.svg#twitter"></use>
</svg>
                <span class="visually-hidden">Twitter</span>
            </a>
        </li>
        <li class="social-list-item">
            <a href="#mailto">
                <svg class="icon icon--email">
  <use xlink:href="/assets/icons/sprite-sheet.svg#email"></use>
</svg>
                <span class="visually-hidden">Email</span>
            </a>
        </li>
    </ul>
</div>
 
<div class="social{{#if modifier}} social--{{modifier}}{{/if}}">
  {{#if copy}}
    <span class="social-text title-highlight">{{copy}}</span>
  {{/if}}
  <ul class="social__list" aria-label="Social network profiles">
    {{#each social-items}}
    <li class="social-list-item">
      <a href="{{link}}">
        {{render '@icons--facebook' icon merge=true}}
        <span class="visually-hidden">{{text}}</span>
      </a>
    </li>
    {{/each}}
  </ul>
</div>
 
{
  "modifier": "share",
  "copy": "Share This",
  "social-items": [
    {
      "link": "#facebook-url",
      "text": "Facebook"
    },
    {
      "link": "#twitter-url",
      "text": "Twitter",
      "icon": {
        "modifier": "twitter"
      }
    },
    {
      "link": "#mailto",
      "text": "Email",
      "icon": {
        "modifier": "email"
      }
    }
  ]
}
  • Content: 
    .social {
  position: relative;
  margin-bottom: 0.75rem;
}

.social--share {
  display: flex;
  justify-content: inherit;

  @include breakpoint($break-small) {
    justify-content: flex-start;
  }
}

.social-text {
  margin-right: 0.75rem;
}

.social__list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;

  .social--share & {
    display: inline-flex;
    justify-content: flex-start;
    margin-top: -0.63rem;
  }
}

.social-list-item {
  padding: 0;
  margin: 0 1.5rem 0 0;

  .social--share & {
    margin: 0 1rem 0 0;

    @include breakpoint($break-xsmall) {
      margin: 0 0.75rem 0 0;
    }
  }

  &:last-child {
    margin-right: 0;
  }
}

.icon {
  .social__list & {
    width: 1.75rem;
    height: 1.75rem;
    fill: $color-gray-light;
    stroke: $color-gray-light;
    transition: $transition;

    &:hover {
      fill: $color-gray;
      stroke: $color-gray;
    }
  }

  .social--share .social__list & {
    width: 1.13rem;
    height: 1.13rem;
  }
}

.icon--email {
  .social--share .social__list & {
    width: 1.25rem;
    height: 1.25rem;
  }
}

.icon--facebook {
  .social--share .social__list & {
    width: 1rem;
    height: 1rem;
  }
}
  • URL: /components/raw/social/Social.scss
  • Filesystem Path: src/components/02-Patterns/Social/Social.scss
  • Size: 1.2 KB

There are no notes for this item.