<nav class="c-traverse-nav" aria-label="Article">
    <a class="c-traverse-nav__item" rel="prev" href="/2015/how-tabs-should-work/" aria-label="Previous: How Tabs Should Work">
    <svg class="c-traverse-nav__icon" width="20" height="20" viewBox="0 0 200 200" focusable="false" aria-hidden="true">
  <path d="M50 100l85 85 7-7-78-78 78-78-7-7"/>
</svg>

  </a><a class="c-traverse-nav__item" rel="next" href="/2015/solve-the-hard-problems/" aria-label="Next: Solve the Hard Problems">
    <svg class="c-traverse-nav__icon" width="20" height="20" viewBox="0 0 200 200" focusable="false" aria-hidden="true">
  <path d="M150 100l-85 85-7-7 78-78-78-78 7-7"/>
</svg>

  </a></nav>
{% if traverse %}
<nav class="c-traverse-nav" aria-label="{{ traverse.type | capitalize }}">
  {%- if traverse.prev -%}
  <a class="c-traverse-nav__item" rel="prev" href="{{ traverse.prev.url }}" aria-label="Previous: {{ traverse.prev.title }}">
    {% include "prev.svg" %}
  </a>
  {%- endif -%}
  {%- if traverse.next -%}
  <a class="c-traverse-nav__item" rel="next" href="{{ traverse.next.url }}" aria-label="Next: {{ traverse.next.title }}">
    {% include "next.svg" %}
  </a>
  {%- endif -%}
</nav>
{% 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: flex;
    
      .has-js & {
        @media (--from-medium-screen) {
          display: block;
          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: flex;
      flex: 50% 0 1;
      justify-content: center;
      position: relative;
      width: auto;
      box-shadow: inset 0 -1px 0 $navigation-color--offset;
      padding: map(spaces, medium);
    
      @media (-ms-high-contrast: active) {
        border: 1px solid;
      }
    }
    
    .c-traverse-nav__item[rel] {
      &::before,
      &::after {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
      }
    
      /* Box: covers ear */
      &::before {
        z-index: map(layers, underlay);
        background-color: $navigation-color;
        box-shadow: inset 1px 0 $navigation-color--offset;
        content: '';
      }
    
      /* Ear: slides from under box on hover */
      &::after {
        .has-js & {
          @media (--from-medium-screen) {
            @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;
            content: attr(aria-label);
          }
        }
    
        [data-menu-expanded=true] & {
          display: none;
        }
      }
    
      &:hover {
        &::after {
          left: calc($traverse-nav__label-width * -1);
        }
      }
    }
    
    .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.8 KB

There are no notes for this item.