<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.