Web Toolkit

image/svg+xml GitHub

Share 

<div class="Share">
    <div class="Share-reveal js-Share">
        <a href="#share-options" class="Share-revealText" data-menu-trigger="share-options" data-menu-inline>
      <span class="Share-revealIcon Icon Icon-share"></span>
      Condividi
    </a>
    </div>
    <ul id="share-options" class="Dropdown-menu" data-menu>
        <li><a href="#" title=""><span class="Icon Icon-facebook"></span><span class="u-hiddenVisually">Facebook</span></a></li>
        <li><a href="#"><span class="Icon Icon-twitter"></span><span class="u-hiddenVisually">Twitter</span></a></li>
        <li><a href="#"><span class="Icon Icon-googleplus"></span><span class="u-hiddenVisually">Google Plus</span></a></li>
        <li><a href="#"><span class="Icon Icon-youtube"></span><span class="u-hiddenVisually">Youtube</span></a></li>
        <li><a href="#"><span class="Icon Icon-flickr"></span><span class="u-hiddenVisually">Flickr</span></a></li>
        <li><a href="#"><span class="Icon Icon-slideshare"></span><span class="u-hiddenVisually">Slideshare</span></a></li>
        <li><a href="#"><span class="Icon Icon-whatsapp"></span><span class="u-hiddenVisually">Whatsapp</span></a></li>
    </ul>
</div>
  • Content: 
    /** @define Share; weak */

.Share > ul > li {
  @extend .u-background-50;
  @extend .u-floatLeft;
  @extend .u-textCenter;
  @extend .u-color-white;
  @extend .u-border-right-xxs;
  @extend .u-text-r-l;

  height: 1.5em;
  width: 1.8em;
}

.Share-reveal > a > span,
.Share > ul > li > a {
  @extend .u-inlineBlock;
  @extend .u-alignMiddle;
  @extend .u-color-white;
  @extend .u-textClean;
  @extend .u-posRelative;
  @extend .u-layoutCenterVertically;
}

.Share-reveal {
  @extend .u-floatLeft;
  @extend .u-background-grey-20;
  @extend .u-text-r-l;

  cursor: pointer;
  height: 1.5em;
  line-height: 1.5em;
}

.Share-revealIcon {
  @extend .u-color-white;
  @extend .u-floatLeft;
  @extend .u-background-50;
  @extend .u-textCenter;

  height: 100%;
  line-height: 1.5em !important;
  width: 1.8em;
}

.Share-revealIcon.is-open {
  @extend .u-color-50;
  @extend .u-background-grey-20;
}

.Share-revealText {
  @extend .u-color-grey-50;
  @extend .u-text-r-l;
  @extend .u-textWeight-400;
  @extend .u-textClean;

  padding-left: 1em;
  padding-right: 1em;
}

.Share-revealText:hover {
  text-decoration: underline;
}

.Share-revealText:focus {
  background-color: transparent;
}
  • URL: /components/raw/share/index.css
  • Filesystem Path: src/modules/share/index.css
  • Size: 1.2 KB

There are no notes for this item.