<a href="#" class="link link--colored">
    <span class="link__label">Buy now</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: colored
label: Buy now
url: '#'
class: false
target: false
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.