Fractal Starter
Project version : 0.1.2

Share

<div class="tool-share">
    <p class="h6">Partager</p>

    <ul class="list--unstyled list--inline">
        <li><button class="button--unstyled" data-share-to="https://www.facebook.com/sharer/sharer.php?u=">Facebook</button></li>
        <li><button class="button--unstyled" data-share-to="http://twitter.com/home?status=+">Twitter</button></li>
        <li><button class="button--unstyled" data-share-to="https://www.linkedin.com/shareArticle?mini=true&url=&title=&summary=">LinkedIn</button></li>
    </ul>
</div>
<div class="tool-share">
   <p class="h6">Partager</p>

   <ul class="list--unstyled list--inline">
      <li><button class="button--unstyled" data-share-to="https://www.facebook.com/sharer/sharer.php?u={{ share_url }}">Facebook</button></li>
      <li><button class="button--unstyled" data-share-to="http://twitter.com/home?status={{share_title}}+{{ share_url }}">Twitter</button></li>
      <li><button class="button--unstyled" data-share-to="https://www.linkedin.com/shareArticle?mini=true&url={{ share_url }}&title={{share_title}}&summary={{ share_url }}">LinkedIn</button></li>
   </ul>
</div>
/* No context defined for this component. */
  • Content:
    .tool-share {
       .h6 {
          position: relative;
          font-size: rem(24);
          font-family: $font-primary;
          margin-bottom: 1rem;
    
          &::after {
             content: '';
             position: absolute;
             left: 0;
             bottom: -2px;
             width: 40px;
             height: 2px;
             background: linear-gradient(90deg, #B49E66 0%, #A5925E 48.33%, #796C46 100%);
          }
       }
    
       > ul > li {
          display: inline-block;
          padding: 0 1rem 0 0;
    
          @include mediaWQuery($media-query-m) {
             padding: 0 2rem 0 0;
          }
       }
    
       > ul li button {
          font-family: $font-primary;
          font-weight: 700;
          font-size: rem(18);
    
          &:hover, &:focus {
             text-decoration: underline;
          }
       }
    }
  • URL: /components/raw/share/share.scss
  • Filesystem Path: components/05-objects/05-tools/share/share.scss
  • Size: 733 Bytes
  • Content:
    const shareButtons = document.querySelectorAll('[data-share-to]');
    
    [].slice.call(shareButtons).forEach(shareButton => {
       shareButton.onclick = () => window.open(shareButton.getAttribute('data-share-to'), '', 'menubar=no,toolbar=no,resizable=no,scrollbars=no,height=400,width=600')
    })
  • URL: /components/raw/share/share.js
  • Filesystem Path: components/05-objects/05-tools/share/share.js
  • Size: 286 Bytes

There are no notes for this item.