PDJ Brandbox

link: underlined 

<a href="#" target="_blank" class="link link--underlined">
    <span class="link__label">This is a link</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: This is a link
url: '#'
class: false
target: _blank
icon: false
  • 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.