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>

</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"
  ]
}
  • Content: 
    @use 'sass:color';

// Name:            Social share
// Description:     Social share widget for items
//
// Component:       `c-share`
//
// Dependencies:    `settings/v7/colors.tokens`
//
// ========================================================================
@use '../../../assets/sass/objects/v7/links' as *;
@use '../../../assets/sass/objects/v7/icons' as *;

@use '../../../assets/sass/tools/v7/utils'as *;
@use '../../../assets/sass/tools/v7/colors'as *;
@use '../../../assets/sass/tools/v7/mq'as *;
@use '../../../assets/sass/tools/v7/spacing'as *;
@use '../../../assets/sass/tools/v7/typography'as *;
@use '../../../assets/sass/tools/v7/zindex'as *;

@use '../../../assets/sass/settings/v7/layout-standard' as *;
@use '../../../assets/sass/settings/v7/atomictypography.map' as *;
@use '../../../assets/sass/settings/v7/colors.tokens' as *;
@use '../../../assets/sass/settings/v7/colors.map' as *;
@use '../../../assets/sass/settings/v7/sizes.map' as *;
@use '../../../assets/sass/settings/v7/spacing.tokens' as *;
@use '../../../assets/sass/settings/v7/typography.tokens' as *;
@use '../../../assets/sass/settings/v7/visibility.map' as *;
@use '../../../assets/sass/settings/v7/global' as *;
@use '../../../assets/sass/settings/v7/properties' as *;
@use '../../../assets/sass/settings/v7/scrollbar' as *;
// Variables
// ========================================================================

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

$shares: ( // 
  facebook:  #3b5998,
  twitter: #000,
  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: color.adjust($color, $lightness: 5%);
        }
      }
    }
  }
}
  • URL: /components/raw/share/share.scss
  • Filesystem Path: src/lib/components/share/share.scss
  • Size: 2 KB

Share

This component shows a social share widget for items

Usage

Render share

In order to display a share component

  {% render "@share" %}