Aeroporto di Bologna - Design System

Social share 

<div class="c-social-share ">

    <label for="toggle-social-btns">
        <span class="u-visuallyhidden">Condividi sui social</span>
        <svg class="c-icon c-icon--24">
            <use xlink:href="#ic_share_black_24px"></use>
        </svg> </label>

    <input type="checkbox" id="toggle-social-btns" class="u-visuallyhidden">

    <div class="c-social-share__list">
        <ul>
            <li>
                <button class="c-social-share__social-item" aria-label="facebook">
                    <svg class="c-icon--48 c-icon--social c-icon--facebook">
                        <use xlink:href="#ic-social-facebook"></use>
                    </svg> </button>
            </li>
            <li>
                <button class="c-social-share__social-item" aria-label="gplus">
                    <svg class="c-icon--48 c-icon--social c-icon--gplus">
                        <use xlink:href="#ic-google-plus"></use>
                    </svg> </button>
            </li>
            <li>
                <button class="c-social-share__social-item" aria-label="linkedin">
                    <svg class="c-icon--48 c-icon--social c-icon--linkedin">
                        <use xlink:href="#ic-social-linkedin"></use>
                    </svg> </button>
            </li>
            <li>
                <button class="c-social-share__social-item" aria-label="twitter">
                    <svg class="c-icon--48 c-icon--social c-icon--twitter">
                        <use xlink:href="#ic-social-twitter"></use>
                    </svg> </button>
            </li>
            <li>
                <button class="c-social-share__social-item" aria-label="twitter">
                    <svg class="c-icon--48 c-icon--social c-icon--wechat">
                        <use xlink:href="#ic-social-wechat"></use>
                    </svg> </button>
            </li>
            <li>
                <button class="c-social-share__social-item" aria-label="instagram">
                    <svg class="c-icon--48 c-icon--social c-icon--instagram">
                        <use xlink:href="#ic-social-instagram"></use>
                    </svg> </button>
            </li>
        </ul>
    </div>

</div>
 
<div class="c-social-share {{ modifier }}">

  <label for="toggle-social-btns">
    <span class="u-visuallyhidden">Condividi sui social</span>
    {{> @icon social-share-icon }}
  </label>

  <input type="checkbox" id="toggle-social-btns" class="u-visuallyhidden">

  <div class="c-social-share__list">
    <ul>
      {{#each socials}}
        <li>
          <button class="c-social-share__social-item" aria-label="{{ this.name }}">
            {{> @icon }}
          </button>
        </li>
      {{/each}}
    </ul>
  </div>

</div>

{{!-- 
  fb
  twitter
  wechat
  g+
  linkedin
--}}
 
{
  "social-share-icon": {
    "symbol": "ic_share_black_24px",
    "class": "c-icon c-icon--24"
  },
  "socials": [
    {
      "name": "facebook",
      "symbol": "ic-social-facebook",
      "class": "c-icon--48 c-icon--social c-icon--facebook",
      "url": "#"
    },
    {
      "name": "gplus",
      "symbol": "ic-google-plus",
      "class": "c-icon--48 c-icon--social c-icon--gplus",
      "url": "#"
    },
    {
      "name": "linkedin",
      "symbol": "ic-social-linkedin",
      "class": "c-icon--48 c-icon--social c-icon--linkedin",
      "url": "#"
    },
    {
      "name": "twitter",
      "symbol": "ic-social-twitter",
      "class": "c-icon--48 c-icon--social c-icon--twitter",
      "url": "#"
    },
    {
      "name": "twitter",
      "symbol": "ic-social-wechat",
      "class": "c-icon--48 c-icon--social c-icon--wechat",
      "url": "#"
    },
    {
      "name": "instagram",
      "symbol": "ic-social-instagram",
      "class": "c-icon--48 c-icon--social c-icon--instagram",
      "url": "#"
    }
  ]
}
  • Content: 
    .c-social-share {
  position: relative;

  .c-canvas--content-template & {
    margin-top: remify(16px);

    @include min-screen(bp(desktop-large)) {
      margin-top: 0;
      position: absolute;
      left: remify(-84px);
      top: remify(60px);
    }

  }

}

.c-social-share label {
  display: inline-block;
  text-decoration: underline;
  position: relative;
  width: remify(56px);
  height: remify(56px);
  border-radius: 50%;
  padding: 0;
  color: #fff;
  background-color: primary(sky, 120);

  svg {
    position: absolute;
    right: remify(8px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    * {
      fill: currentColor;
    }

  }
}

.c-social-share__list {
  display: none;
  position: absolute;
  top: remify(4px);
  left: remify(69px);

  @include min-screen(bp(desktop-large)) {
    position: relative;
    top: 0;
    left: 0;
  }

}

.c-social-share__list ul {
  display: flex;
  flex-wrap: wrap;

  @include min-screen(bp(desktop-large)) {
    display: block;
  }

}

.c-social-share__list li {
  margin-right: remify(4px);

  @include min-screen(bp(desktop-large)) {
    margin-right: 0;
  }

  &:last-child {
    margin-right: 0;
  }
}

.c-social-share__social-item {
  border: none;
  background: transparent;
  padding: 0;
}

.c-social-share input[type="checkbox"] {

  &:checked ~ .c-social-share__list {
    display: block;
  }

}
  • URL: /components/raw/social-share/_social-share.scss
  • Filesystem Path: src/views/02-molecules/social-share/_social-share.scss
  • Size: 1.4 KB

No notes defined.