Styleguide

Share 

<div class="m-share">
    <button class="m-share__mobile" aria-label="">
        <svg role="img">
            <title>partager</title>
            <use xlink:href="#mobile"></use>
        </svg>
    </button>
    <button class="m-share__close" aria-label="">
        <svg role="img">
            <title>partager</title>
            <use xlink:href="#close"></use>
        </svg>
    </button>
    <div class="m-share__buttons">
        <div class="m-share__icon">
            <button data-link="https://example.com" class="a-social-icon" aria-label="">
                <figure class="a-social-icon__figure">
                    <svg role="img" class="a-social-icon__svg">
                        <title>link</title>
                        <use xlink:href="#link"></use>
                    </svg>

                </figure>
                <div class="a-social-icon__copied">Copied!</div>
            </button>
        </div>
        <div class="m-share__icon">
            <a href="https://www.facebook.com/sharer.php?u&#x3D;https%3A%2F%2Fcss-tricks.com%2F" class="a-social-icon" aria-label="">
                <figure class="a-social-icon__figure">
                    <svg role="img" class="a-social-icon__svg">
                        <title>facebook--no-outline</title>
                        <use xlink:href="#facebook--no-outline"></use>
                    </svg>

                </figure>
            </a>
        </div>
        <div class="m-share__icon">
            <a href="https://twitter.com/intent/tweet?url&#x3D;https%3A%2F%2Fcss-tricks.com%2F&amp;text&#x3D;Tips%2C+Tricks%2C+and+Techniques+on+using+Cascading+Style+Sheets.&amp;hashtags&#x3D;css,html" class="a-social-icon" aria-label="">
                <figure class="a-social-icon__figure">
                    <svg role="img" class="a-social-icon__svg">
                        <title>twitter--no-outline</title>
                        <use xlink:href="#twitter--no-outline"></use>
                    </svg>

                </figure>
            </a>
        </div>
        <div class="m-share__icon">
            <a href="mailto:?subject&#x3D;Sitetitle&amp;body&#x3D;Some%20content" class="a-social-icon" aria-label="">
                <figure class="a-social-icon__figure">
                    <svg role="img" class="a-social-icon__svg">
                        <title>mail--no-outline</title>
                        <use xlink:href="#mail--no-outline"></use>
                    </svg>

                </figure>
            </a>
        </div>
        <div class="m-share__icon">
            <a href="whatsapp://send?abid&#x3D;BROADCAST_ID&amp;text&#x3D;" class="a-social-icon" aria-label="">
                <figure class="a-social-icon__figure">
                    <svg role="img" class="a-social-icon__svg">
                        <title>whatsapp--no-outline</title>
                        <use xlink:href="#whatsapp--no-outline"></use>
                    </svg>

                </figure>
            </a>
        </div>
    </div>
    <div class="m-share__desc">partager</div>
</div>
 
<div class="m-share">
	<button class="m-share__mobile" aria-label="{{'show share buttons'}}">
		<svg role="img">
			<title>{{label}}</title>
			<use xlink:href="#mobile"></use>
		</svg>
	</button>
	<button class="m-share__close" aria-label="{{'hide share buttons'}}">
		<svg role="img">
			<title>{{label}}</title>
			<use xlink:href="#close"></use>
		</svg>
	</button>
	<div class="m-share__buttons">
		{{#each icons}}
			<div class="m-share__icon">
				{{> @a-social-icon this}}
			</div>
		{{/each}}
	</div>
	<div class="m-share__desc">{{label}}</div>
</div>
  • Content: 
    body.has-share-buttons {
	@include media($_MOBILE) {
		margin-bottom: 42px;
	}
}

.m-share {
	$icon-size: 40px;
	$height-desktop: 315px;

	width: 100%;
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	background: $color-grey-1;
	border-right: 1px solid $color-primary;
	padding: 1px;

	@include high-contrast {
		border-color: $color-primary-dark;
	}

	@include media($_DESKTOP) {
		width: $height-desktop;
		transform: translateY($height-desktop) rotate(-90deg);
		transform-origin: top left;
		padding: 4px 8px 4px 4px;
	}

	@media print {
		display: none;
	}

	&__icon {
		height: $icon-size;
		width: $icon-size;

		@media all and (max-width: ($size-tiny - 1)) {
			width: 38px;
		}

		@include media($_DESKTOP) {
			transform: rotate(90deg);
		}
	}

	&__desc {
		font-size: 0.75rem;
		color: $color-primary-dark;
		font-family: $font-secondary;
		font-weight: $font-weight-bold;
		text-transform: uppercase;
		cursor: pointer;
		letter-spacing: 0.08928em;
		padding: 0 0.5em 0 1em;

		@include media($_DESKTOP) {
			padding: 0 1em 0 1.5em;
			cursor: default;
		}
	}

	&__buttons {
		display: flex;
		justify-content: space-around;
		width: 0;
		height: $icon-size;
		transition: width $transition-mid $transition-ease;
		max-width: 250px;
		pointer-events: none;

		&.is-open {
			width: 100vw;
			pointer-events: auto;
		}

		@include media($_DESKTOP) {
			width: 100%;
			pointer-events: auto;
		}
	}

	&__mobile {
		padding: 0;
		height: $icon-size;

		svg {
			width: $icon-size;
			height: $icon-size;
			fill: $color-primary;
			transition: fill $transition-fast $transition-ease;

			@include high-contrast {
				fill: $color-primary-dark;
			}

			@include hover {
				fill: $color-primary-dark;
			}

			@include media($_DESKTOP) {
				display: none;
			}
		}
	}

	&.is-open &__mobile {
		display: none;
	}

	&__close {
		stroke: $color-primary-dark;
		width: $icon-size;
		height: $icon-size;
		display: none;
		padding: 10px;

		svg {
			width: 100%;
			height: 100%;
		}
	}

	@include media($_MOBILE) {
		&.is-open &__close {
			display: block;
		}
	}
}
  • URL: /components/raw/m-share/_m-share.scss
  • Filesystem Path: styleguide/src/components/molecules/m-share/_m-share.scss
  • Size: 2.1 KB
  • Content: 
    import BaseView from './../../../js/base-view';

const MOBILE_SELECTOR = '.m-share__mobile';
const LABEL_SELECTOR = '.m-share__desc';
const CLOSE_SELECTOR = '.m-share__close';
const BUTTONS_SELECTOR = '.m-share__buttons';

const OPEN_STATE = 'is-open';
const HAS_SHARE_BUTTONS = 'has-share-buttons';

export default class MShare extends BaseView {
	initialize() {
		this.buttons = this.getScopedElement( BUTTONS_SELECTOR );

		this.addPageBottomMargin();
	}

	bind() {
		super.bind();

		this.on( 'click', MOBILE_SELECTOR, () => this.show() );
		this.on( 'click', LABEL_SELECTOR, () => this.show() );
		this.on( 'click', CLOSE_SELECTOR, () => this.hide() );
	}

	addPageBottomMargin() {
		this.addClass( document.body, HAS_SHARE_BUTTONS );
	}

	show() {
		if (! this.isDesktop()) {
			this.addClass( this.buttons, OPEN_STATE );
			this.addClass( OPEN_STATE );
		}
	}

	hide() {
		if (! this.isDesktop()) {
			this.removeClass( this.buttons, OPEN_STATE );
			this.removeClass( OPEN_STATE );
		}
	}
}
  • URL: /components/raw/m-share/m-share.js
  • Filesystem Path: styleguide/src/components/molecules/m-share/m-share.js
  • Size: 999 Bytes 
{
  "label": "partager",
  "icons": [
    {
      "link": "https://example.com",
      "type": "link",
      "linkButton": "yes"
    },
    {
      "link": "https://www.facebook.com/sharer.php?u=https%3A%2F%2Fcss-tricks.com%2F",
      "type": "facebook--no-outline"
    },
    {
      "link": "https://twitter.com/intent/tweet?url=https%3A%2F%2Fcss-tricks.com%2F&text=Tips%2C+Tricks%2C+and+Techniques+on+using+Cascading+Style+Sheets.&hashtags=css,html",
      "type": "twitter--no-outline"
    },
    {
      "link": "mailto:?subject=Sitetitle&body=Some%20content",
      "type": "mail--no-outline"
    },
    {
      "link": "whatsapp://send?abid=BROADCAST_ID&text=",
      "type": "whatsapp--no-outline"
    }
  ]
}

No notes defined.