GDL - Global Design Language

Share 

<div class="c-share u-flex">

    <a href="#" class="u-mr-xsmall">
        <div class="c-share__item c-share__item--facebook u-flex u-items-center u-justify-center">
            <svg class="o-icon--md  o-icon--fill-inverse ">
                <use xlink:href="#icon-facebook" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
            </svg>
        </div>
    </a>

    <a href="#" class="u-mr-xsmall">
        <div class="c-share__item c-share__item--twitter u-flex u-items-center u-justify-center">
            <svg class="o-icon--md  o-icon--fill-inverse ">
                <use xlink:href="#icon-twitter" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
            </svg>
        </div>
    </a>

    <a href="#" class="u-mr-xsmall">
        <div class="c-share__item c-share__item--whatsapp u-flex u-items-center u-justify-center">
            <svg class="o-icon--md  o-icon--fill-inverse ">
                <use xlink:href="#icon-whatsapp" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
            </svg>
        </div>
    </a>

    <a href="#" class="u-mr-xsmall">
        <div class="c-share__item c-share__item--email u-flex u-items-center u-justify-center">
            <svg class="o-icon--md  o-icon o-icon--inverse ">
                <use xlink:href="#icon-email" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
            </svg>
        </div>
    </a>

</div>
 
<div class="c-share u-flex">

{% if native %}
  {% render "@button--default", {label: 'Condividi', icon:'share', size: 'small'}, true %}
{% else %}
  {% for social in share %}
    <a href="#" class="u-mr-xsmall">
      <div class="c-share__item c-share__item--{{social}} u-flex u-items-center u-justify-center">
        <svg class="o-icon--md {% if social=="email"%} o-icon o-icon--inverse {% else %} o-icon--fill-inverse {% endif %}">
          <use xlink:href="#icon-{{social}}" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
        </svg>
      </div>
    </a>
  {% endfor %}
{% endif %}



</div>
 
{
  "share": [
    "facebook",
    "twitter",
    "whatsapp",
    "email"
  ]
}
  • Content: 
    // Name:            Social share
// Description:     Social share widget for items
//
// Component:       `c-share`
//
// Dependencies:    `settings/v7/colors.tokens`
//
// ========================================================================

// Variables
// ========================================================================

$share-item-rounded: 50%;
$share-item-size: 2.5rem;

$shares: ( // 
  facebook:  #3b5998,
  twitter: #1da1f2,
  whatsapp: #25d366,
  email: $ui-06
);

// Styles
// ========================================================================

.c-share {
  &__item {
    width: $share-item-size;
    height: $share-item-size;
    border-radius: $share-item-rounded;
    @each $social, $color in $shares {
      &--#{$social} {
        background-color: $color;
  
        &:hover {
          background-color: lighten($color, 5%);
        }
      }
    }
  }
}
  • URL: /components/raw/share/share.scss
  • Filesystem Path: src/lib/components/share/share.scss
  • Size: 892 Bytes

No notes defined.