FTSE Russell Styleguide

Social Share: Default 

<div class="social-share social-share--">
    <div class="social-share__heading">
        <svg class="social-share__icon">
          <use xlink:href="/assets/sprites/icons.svg#ico-share-stroke"></use>
      </svg> Share
    </div>
    <ul>

        <li>
            <a class="resp-sharing-button__link" href="#" target="_blank">
                <span class="share-title">Facebook</span>
                <svg class="resp-sharing-button__icon">
                    <use xlink:href="/assets/sprites/icons.svg#ico-facebook"></use>
                </svg>
            </a>
        </li>

        <li>
            <a class="resp-sharing-button__link" href="#" target="_blank">
                <span class="share-title">Twitter</span>
                <svg class="resp-sharing-button__icon">
                    <use xlink:href="/assets/sprites/icons.svg#ico-twitter"></use>
                </svg>
            </a>
        </li>

        <li>
            <a class="resp-sharing-button__link" href="#" target="_blank">
                <span class="share-title">Pinterest</span>
                <svg class="resp-sharing-button__icon">
                    <use xlink:href="/assets/sprites/icons.svg#ico-pinterest"></use>
                </svg>
            </a>
        </li>

        <li>
            <a class="resp-sharing-button__link" href="#" target="_blank">
                <span class="share-title">Email</span>
                <svg class="resp-sharing-button__icon">
                    <use xlink:href="/assets/sprites/icons.svg#ico-email"></use>
                </svg>
            </a>
        </li>

    </ul>
</div>
 
{% if guide %}
{% endif %}
<div class="social-share social-share--{{mods}}">
  <div class="social-share__heading">
      <svg class="social-share__icon">
          <use xlink:href="/assets/sprites/icons.svg#{{button_icon}}"></use>
      </svg>
      {{button_text}}
  </div>
  <ul>
      {% for link in links %}
        <li>
            <a class="resp-sharing-button__link" href="{{link.url}}" target="_blank">
                <span class="share-title">{{link.title}}</span>
                <svg class="resp-sharing-button__icon">
                    <use xlink:href="/assets/sprites/icons.svg#{{link.icon}}"></use>
                </svg>
            </a>
        </li>
      {% endfor %}
  </ul>
</div>
{% if guide %}
{% endif %}
 
{
  "title": "social-share",
  "button_text": "Share",
  "button_icon": "ico-share-stroke",
  "guide": true,
  "links": [
    {
      "title": "Facebook",
      "url": "#",
      "icon": "ico-facebook"
    },
    {
      "title": "Twitter",
      "url": "#",
      "icon": "ico-twitter"
    },
    {
      "title": "Pinterest",
      "url": "#",
      "icon": "ico-pinterest"
    },
    {
      "title": "Email",
      "url": "#",
      "icon": "ico-email"
    }
  ]
}
  • Content: 
    .social-share {
  position: relative;
  cursor: pointer;
  background: $white;
  height: 55px;
  width: 200px;
  align-items: center;
  text-align: center;

  .social-share__heading {
    color: $secondary;
    transition: all .3s;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: .3em;
    justify-content: center;
    height: 100%;
    z-index: 40;
    font-weight: $font-weight-normal;

    .social-share__icon {
      fill: $gray;
      height: 1.5rem;
      margin-right: 1rem;
      width: 1.5rem;
    }
  }

  ul {
    opacity: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    transition: all .3s ease-out;
    display: none;
    height: 55px;
    width: 200px;

    li {
      align-items: center;
      display: flex;
      position: relative;

      .share-title {
        color: $white;
        background: $primary-lighter;
        height: 30px;
        line-height: 30px;
        position: absolute;
        top: -45px;
        left: -33px;
        width: 90px;
        transition: all .3s ease-out;
        opacity: 0;
        font-size: $font-size-sm;
        text-align: center;
        border-radius: $border-radius-sm;
        //z-index: -1;

        //triangle
        &:before {
          content: '';
          display: block;
          width: 0;
          height: 0;
          position: absolute;
          border-style: solid;
          left: 40%;
          bottom: -10px;
          border-style: solid;
          border-width: 10px 10px 0 10px;
          border-color: $primary-lighter transparent transparent transparent;
        }
      }

      .resp-sharing-button__icon {
        stroke: none;
        fill: $gray-light;
        max-width: 1.6rem;
        max-height: 1.6rem;
        vertical-align: bottom;
      }

      &:hover {
        .share-title {
          top: -25px;
          opacity: 1;
        }

        .resp-sharing-button__icon {
          fill: $primary;
        }
      }
    }
  }

  &.hover {
    .social-share__heading {
      visibility: hidden;
      opacity: 0;
    }

    ul {
      align-items: stretch;
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-around;
      opacity: 1;
    }
  }

}

.resp-sharing-button__link,
.resp-sharing-button__icon {
  display: inline-block;
}

.resp-sharing-button__link {
  color: #000;
  text-decoration: none;
  vertical-align: text-bottom;
}

.resp-sharing-button {
  transition: 25ms ease-out;
}

.resp-sharing-button__icon svg {
  width: 1rem;
  height: 1rem;
  margin-right: 0.4em;
  vertical-align: top;

  &:hover {
    fill: red;
  }
}


.social-share--add-calendar {
  border: none;
  background-color: transparent;
  height: 100px;

  &.hover {
    background-color: $white;
  }

  .social-share__heading {
    align-items: flex-start;
    justify-content: flex-start;

    .social-share__icon {
      fill: $primary;
      height: $space-xl;
      margin-left: $space-sm;
      margin-top: $space-sm;
      width: $space-xl;

      @include mq($breakpoint-lg) {
        margin-left: $space-xs;
      }
    }
  }

  ul {
    height: 100px;
  }
}
  • URL: /components/raw/social-share/_social-share.scss
  • Filesystem Path: src/components/molecules/social-share/_social-share.scss
  • Size: 3.2 KB

There are no notes for this item.