PDJ Brandbox

link: icon marker 

<a href="#" class="link link--underlined link--icon-marker">
    <span class="link__icon">
        <svg class="icon-marker" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 28">
            <path fill="currentColor" d="M10,0c5.5,0,10,4.4,10,9.8c0,1.8-0.5,3.5-1.4,5l0,0l-7.7,12.7c-0.1,0.2-0.4,0.4-0.7,0.4l0,0c-0.3,0-0.6-0.1-0.7-0.4l0,0L1.5,15C0.5,13.5,0,11.7,0,9.8C0,4.4,4.5,0,10,0z M10,1.6c-4.6,0-8.3,3.7-8.3,8.2c0,1.5,0.4,3,1.3,4.3l0,0l7.2,11.4l7-11.6c0.8-1.3,1.2-2.7,1.2-4.2C18.3,5.3,14.6,1.6,10,1.6z M10,5c2.8,0,5,2.2,5,5c0,2.7-2.2,5-5,5c-2.8,0-5-2.3-5-5C5,7.2,7.2,5,10,5z M10,6.7c-1.8,0-3.3,1.5-3.3,3.3c0,1.8,1.5,3.3,3.3,3.3c1.9,0,3.3-1.5,3.3-3.3C13.3,8.2,11.8,6.7,10,6.7z" />
        </svg>

    </span>
    <span class="link__label">Find a store</span>
</a>
 
<a href="{{ url }}"{{#if target}} target="{{ target }}"{{/if}} class="{{#if class }}{{ class }} {{/if}}link{{#if modifier }} link--{{ modifier }}{{/if}}{{#if icon }} link--icon-{{ icon }}{{/if}}{{#if modal }} overlay-modal__trigger{{/if}}" {{#if modal }} data-modal="{{ modal }}"{{/if}}>
  {{#if icon}}
  <span class="link__icon">
    {{#if (eq icon "marker")}}
      {{> @icon-marker }}
    {{else}} {{#if (eq icon "download")}}
      {{> @icon-download }}
    {{else}}
      {{> @icon-chevron }}
    {{/if}}{{/if}}
  </span>
  {{/if}}
  <span class="link__label">{{ label }}</span>
</a>
 
modifier: underlined
label: Find a store
url: '#'
class: false
target: false
icon: marker
  • Content: 
    const LINK = ((w, d, undefined) => {

  'use strict';

  const settings = {
    debug: false,
    offset: 50,
  };

  const selectors = {
    theTrigger: 'a[href^="#"]:not([href="#"]):not([href="#0"])',
    theStickies: '.header, .nav-in-page, .simple-header',
  };

  const els = {};

  const scrollToTarget = selector => {
    if (!selector) {
      return;
    }

    const $target = document.querySelector(selector);

    if (!$target) { return; }

    window.location.hash = selector;

    let offset = settings.offset;

    els.theStickies.forEach($sticky => {
      offset += $sticky.clientHeight;
    });

    const { scrollY } = window;
    const offsetTop = getTop($target);
    const top = offsetTop - offset;

    if (settings.debug) { console.log('LINK SCROLLTO', scrollY, offsetTop, offset, top); }

    window.scroll({
      top,
      behavior: 'smooth',
    });
  };

  const onLinkClick = e => {
    e.preventDefault();

    const $link = e.currentTarget;

    if (settings.debug) { console.log('LINK CLICK', $link); }

    const href = $link.getAttribute('href');
    scrollToTarget(href);
  };

  const getTop = (el) => {
    const rect = el.getBoundingClientRect(),
    // scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
    scrollTop = window.pageYOffset || document.documentElement.scrollTop;

    return Math.round(rect.top + scrollTop);
  };

  const init = () => {
    if (settings.debug) { console.log('LINK INIT'); }

    els.theTriggers = d.querySelectorAll(selectors.theTrigger);
    els.theStickies = d.querySelectorAll(selectors.theStickies);

    if (els.theTriggers && els.theTriggers.length) {
      [...els.theTriggers].forEach(trigger => trigger.addEventListener('click', onLinkClick));
    }

    if (window.location.hash) {
      scrollToTarget(window.location.hash);
    }
  };

  w.addEventListener('DOMContentLoaded', init);

})(window, window.document);
  • URL: /components/raw/link/link.js
  • Filesystem Path: ../src/02_atoms/link/link.js
  • Size: 1.9 KB
  • Content: 
    .link {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-decoration: none;

  &:hover,
  &:focus {
    color: inherit;
    text-decoration: none;
    outline: none;
  }

  &.link--icon-left > * {
    flex: 0 0 auto;
    margin-left: var(--gap--2);

    &:first-child {
      margin-left: 0;
    }
  }

  &.link--icon-right, &.link--icon-download {
    flex-direction: row-reverse;

    & > * {
      flex: 0 0 auto;
      margin-right: var(--gap--2);

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

.link__icon {
  display: block;
}

.link__label {
  transition: color 250ms;
  position: relative;

  .link--default &:after {
    transition: width 250ms, opacity 350ms;
    transform: translate(-50%, .75em);
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 0%;
    height: 1px;
    background-color: currentColor;
    content: '';
    backface-visibility: hidden;
    opacity: 0;
  }

  .link--default:hover &:after {
    width: 100%;
    opacity: 1;
  }

  .link--default:active &:after {
    transition: width 150ms;
    width: calc(100% - var(--gap--4));
  }

  .link--underlined &:after {
    transition: width 250ms;
    transform: translate(-50%, .75em);
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 100%;
    height: calc(1em / 16);
    background-color: currentColor;
    content: '';
    backface-visibility: hidden;
  }

  .link--underlined:hover &:after {
    width: calc(100% - var(--gap--4));
  }

  .link--underlined:active &:after {
    transition: width 150ms;
    width: 100%;
  }

  .link--colored & {
    color: var(--color--action);
  }

  .link--colored:hover & {
    color: var(--color--hover);
  }
}

.link--care {
  display: inline-flex;
  max-width: 250px;
  margin: var(--gap--2) 0;

  img {
    display: block;
    width: 100%;
  }
}

.link--icon-left.link--back {
  .link__icon {
    transform: rotate(-180deg);
  }
}
  • URL: /components/raw/link/link.scss
  • Filesystem Path: ../src/02_atoms/link/link.scss
  • Size: 2 KB

No notes defined.