<div class="c-traverse-nav">
    <a class="c-traverse-nav__item" rel="prev" href="/2015/how-tabs-should-work/" data-sequence-title="How Tabs Should Work">
        <svg class="c-traverse-nav__icon" width="20" height="20" viewBox="0 0 200 200" role="img">
  <path d="M50 100l85 85 7-7-78-78 78-78-7-7"/>
</svg>

        <span class="u-hidden">Previous article</span>
    </a>
    <a class="c-traverse-nav__item" rel="next" href="/2015/solve-the-hard-problems/" data-sequence-title="Solve the Hard Problems">
        <span class="u-hidden">Next article</span>
        <svg class="c-traverse-nav__icon" width="20" height="20" viewBox="0 0 200 200" role="img">
  <path d="M150 100l-85 85-7-7 78-78-78-78 7-7"/>
</svg>

    </a>
</div>
{% if traverse %}
<div class="c-traverse-nav">
  {%- if traverse.prev -%}
  <a class="c-traverse-nav__item" rel="prev" href="{{ traverse.prev.url }}" data-sequence-title="{{ traverse.prev.title }}">
    {% include "prev.svg" %}
    <span class="u-hidden">Previous {{ traverse.type }}</span>
  </a>
  {%- endif -%}
  {%- if traverse.next -%}
  <a class="c-traverse-nav__item" rel="next" href="{{ traverse.next.url }}" data-sequence-title="{{ traverse.next.title }}">
    <span class="u-hidden">Next {{ traverse.type }}</span>
    {% include "next.svg" %}
  </a>
  {%- endif -%}
</div>
{% endif %}
{
  "site": {
    "title": "24 ways",
    "handle": "24ways",
    "description": "24 ways is the advent calendar for web geeks. Each day throughout December we publish a daily dose of web design and development goodness to bring you all a little Christmas cheer.",
    "url": "https://24ways.org",
    "feed": "https://feeds.feedburner.com/24ways",
    "theme_color": "#f04"
  },
  "theme": {
    "year": [
      348,
      344,
      340,
      336,
      332,
      328,
      324,
      320,
      316,
      312,
      308,
      304,
      300,
      296,
      292,
      288
    ],
    "day": [
      360,
      353,
      346,
      339,
      332,
      325,
      318,
      311,
      304,
      297,
      290,
      283,
      276,
      269,
      262,
      255,
      248,
      241,
      234,
      227,
      220,
      213,
      206,
      199
    ]
  },
  "traverse": {
    "type": "article",
    "prev": {
      "url": "/2015/how-tabs-should-work/",
      "title": "How Tabs Should Work"
    },
    "next": {
      "url": "/2015/solve-the-hard-problems/",
      "title": "Solve the Hard Problems"
    }
  }
}
  • Content:
    $traverse-nav__label-width: 18rem; /* 288px */
    
    .c-traverse-nav {
      display: none;
    
      @media (--from-medium-screen) {
        display: initial;
        position: fixed;
        right: 0;
        top: $banner-height--large;
        z-index: calc(map(layers, modal) + 1);
        width: $navigation-width--large;
      }
    }
    
    .c-traverse-nav__item {
      @apply --focusable;
      @apply --navigation-link;
      display: block;
      position: relative;
      width: auto;
      padding: map(spaces, medium);
      box-shadow: inset 0 -1px 0 $navigation-color--offset;
    
      &[rel=prev]::after {
        content: 'Previously: \A' attr(data-sequence-title);
      }
    
      &[rel=next]::after {
        content: 'Next: \A' attr(data-sequence-title);
      }
    
      @media (--from-medium-screen) {
        &::before,
        &::after {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
        }
    
        &::before {
          content: '';
          z-index: map(layers, underlay);
          background-color: $navigation-color;
        }
    
        &::after {
          @apply --typeset-label;
          z-index: calc(map(layers, underlay) - 1);
          width: $traverse-nav__label-width;
          overflow: hidden;
          background-color: $color-year--dark-alpha;
          background-color: var(--color-year--dark-alpha, $color-year--dark-alpha);
          backdrop-filter: blur(4px);
          padding: map(spaces, xsmall) map(spaces, small);
          white-space: pre-wrap;
          color: white;
          transition: all 0.3s ease-out;
        }
    
        &:hover {
          &::after {
            left: calc($traverse-nav__label-width * -1);
          }
        }
      }
    
      [data-menu-expanded=true] & {
        &::after {
          display: none;
        }
      }
    }
    
    .c-traverse-nav__icon {
      height: 2.5rem;
      width: 2.5rem;
    }
    
  • URL: /components/raw/traverse-nav/traverse-nav.css
  • Filesystem Path: src/components/global/traverse-nav/traverse-nav.css
  • Size: 1.7 KB

There are no notes for this item.