<div class="relative c-share" data-behaviour="Share">
<div data-share-container class="absolute bg-white h-full w-full flex items-center justify-center pointer-events-none">
<a data-share-social target="_blank" rel="noopener norefferer" href="https://twitter.com/intent/tweet?text=Lorem, ipsum dolor.&url=http%3A%2F%2Fwww.asta.mudbank.uk&via=asta" class="c-share__item text-blush mx-2 opacity-0">
<i class="icon icon--ui-twitter">
<svg>
<use class="no-barba" xlink:href="#ui-twitter"></use>
</svg>
</i>
</a>
<a data-share-social target="_blank" rel="noopener norefferer" href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.asta.mudbank.uk" class="c-share__item text-blush mx-2 opacity-0">
<i class="icon icon--ui-facebook">
<svg>
<use class="no-barba" xlink:href="#ui-facebook"></use>
</svg>
</i>
</a>
<button data-clipboard-text="http://www.asta.mudbank.uk" data-copy-link class="c-share__item text-blush mx-2 opacity-0">
<i class="icon icon--ui-link">
<svg>
<use class="no-barba" xlink:href="#ui-link"></use>
</svg>
</i>
</button>
<a target="_blank" rel="noopener norefferer" href="mailto:?subject=Lorem, ipsum dolor.&body=Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam maiores, sed voluptate similique tempore laborum. http://www.asta.mudbank.uk" class="c-share__item text-blush mx-2 opacity-0">
<i class="icon icon--ui-message">
<svg>
<use class="no-barba" xlink:href="#ui-message"></use>
</svg>
</i>
</a>
</div>
<button data-share-button class="o-btn o-btn--sm o-btn--share text-blush relative py-4 px-3 justify-around items-center">
<span class="flex items-center justify-between">
<i class="icon icon--ui-share">
<svg>
<use class="no-barba" xlink:href="#ui-share"></use>
</svg>
</i>
<b class="ml-2">
Button
</b>
</span>
</button>
</div>
{% import '@helpers' as h %}
<div class="relative c-share" data-behaviour="Share">
<div data-share-container class="absolute bg-white h-full w-full flex items-center justify-center pointer-events-none">
<a data-share-social target="_blank" rel="noopener norefferer" href="https://twitter.com/intent/tweet?text={{ title }}&url={{ pageUrl|url_encode }}&via={{ twitterHandle }}" class="c-share__item text-blush mx-2 opacity-0">
{{ h.symbol('ui-twitter') }}
</a>
<a data-share-social target="_blank" rel="noopener norefferer" href="https://www.facebook.com/sharer/sharer.php?u={{ pageUrl|url_encode }}" class="c-share__item text-blush mx-2 opacity-0">
{{ h.symbol('ui-facebook') }}
</a>
<button data-clipboard-text="{{ pageUrl }}" data-copy-link class="c-share__item text-blush mx-2 opacity-0">
{{ h.symbol('ui-link') }}
</button>
<a target="_blank" rel="noopener norefferer" href="mailto:?subject={{ title }}&body={{ shareDesc }} {{ pageUrl }}" class="c-share__item text-blush mx-2 opacity-0">
{{ h.symbol('ui-message') }}
</a>
</div>
{% include '@button--share' %}
</div>
{
"siteTitle": "Asta Valentaite",
"copyright": "© 2017 Asta Valentaite. All rights reserved.",
"craft": {
"app": {
"config": {
"general": {
"custom": {
"objects": "/02-objects/",
"global": "../03-global/",
"components": "/04-components/",
"pages": "/05-pages/",
"macros": "/macros/",
"wrapper": "/wrapper/"
}
}
}
}
},
"sitemenu": [
{
"title": "About",
"slug": "/components/preview/about"
},
{
"title": "Fashion",
"slug": "/components/preview/press"
},
{
"title": "Beauty",
"slug": "/components/preview/post"
},
{
"title": "Lifestyle",
"slug": "/components/preview/vertical"
},
{
"title": "Collaborations",
"slug": "/components/preview/collaborations"
},
{
"title": "Press",
"slug": "/components/preview/press"
}
],
"title": "Lorem, ipsum dolor.",
"pageUrl": "http://www.asta.mudbank.uk",
"twitterHandle": "asta",
"shareDesc": "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam maiores, sed voluptate similique tempore laborum."
}
.c-share {
.o-btn > span {
transition: transform 300ms 300ms ease, opacity 300ms 300ms ease;
}
}
.c-share__notification {
border-radius: rem(10px);
transform: translate3d(0, rem(-20px), 0) scale(0);
transition: transform 300ms ease, opacity 300ms ease;
opacity: 0;
&.is-visible {
transform: translate3d(0, rem(-30px), 0) scale(1);
opacity: 1;
}
}
.c-share__item {
transition: transform 300ms 0ms ease, opacity 300ms 0ms ease;
}
.is-sharing {
[data-share-container] {
pointer-events: auto;
}
.c-share__item {
opacity: 1;
transform: translate3d(0, 0, 0);
transition-delay: 300ms;
}
[data-share-button] {
pointer-events: none;
span {
opacity: 0;
}
}
.o-btn > span {
transition-delay: 0ms;
}
}
There are no notes for this item.