GDL - Global Design Language

Alphindex 

<div class="u-sticky u-top u-flex u-column u-row@lg u-pb-medium u-overflow-auto">

    <a href="#" class="c-alphindex current  u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
        a
    </a>

    <a href="#" class="c-alphindex   u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
        b
    </a>

    <a href="#" class="c-alphindex  disabled u-cursor-not-allowed u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
        c
    </a>

    <a href="#" class="c-alphindex   u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
        d
    </a>

    <a href="#" class="c-alphindex   u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
        e
    </a>

    <a href="#" class="c-alphindex   u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
        f
    </a>

    <a href="#" class="c-alphindex   u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
        g
    </a>

    <a href="#" class="c-alphindex   u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
        h
    </a>

    <a href="#" class="c-alphindex   u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
        i
    </a>

    <a href="#" class="c-alphindex  disabled u-cursor-not-allowed u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
        j
    </a>

    <a href="#" class="c-alphindex   u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
        k
    </a>

    <a href="#" class="c-alphindex   u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
        l
    </a>

    <a href="#" class="c-alphindex   u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
        m
    </a>

    <a href="#" class="c-alphindex   u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
        n
    </a>

    <a href="#" class="c-alphindex   u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
        o
    </a>

    <a href="#" class="c-alphindex   u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
        p
    </a>

    <a href="#" class="c-alphindex   u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
        q
    </a>

    <a href="#" class="c-alphindex   u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
        r
    </a>

    <a href="#" class="c-alphindex   u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
        s
    </a>

    <a href="#" class="c-alphindex   u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
        t
    </a>

    <a href="#" class="c-alphindex   u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
        u
    </a>

    <a href="#" class="c-alphindex   u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
        v
    </a>

    <a href="#" class="c-alphindex   u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
        w
    </a>

    <a href="#" class="c-alphindex   u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
        x
    </a>

    <a href="#" class="c-alphindex   u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
        y
    </a>

    <a href="#" class="c-alphindex   u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
        z
    </a>

</div>
 
<div class="u-sticky u-top u-flex u-column u-row@lg u-pb-medium u-overflow-auto">
  {% for letter in alphabet %}
    <a href="#" class="c-alphindex {% if letter.current %}current{% endif %} {% if letter.disabled %}disabled u-cursor-not-allowed{% endif %} u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
      {{letter.glifo}}
    </a>
  {% endfor %}
</div>
 
{
  "alphabet": [
    {
      "letter": null,
      "glifo": "a",
      "current": true
    },
    {
      "letter": null,
      "glifo": "b"
    },
    {
      "letter": null,
      "glifo": "c",
      "disabled": true
    },
    {
      "letter": null,
      "glifo": "d"
    },
    {
      "letter": null,
      "glifo": "e"
    },
    {
      "letter": null,
      "glifo": "f"
    },
    {
      "letter": null,
      "glifo": "g"
    },
    {
      "letter": null,
      "glifo": "h"
    },
    {
      "letter": null,
      "glifo": "i"
    },
    {
      "letter": null,
      "glifo": "j",
      "disabled": true
    },
    {
      "letter": null,
      "glifo": "k"
    },
    {
      "letter": null,
      "glifo": "l"
    },
    {
      "letter": null,
      "glifo": "m"
    },
    {
      "letter": null,
      "glifo": "n"
    },
    {
      "letter": null,
      "glifo": "o"
    },
    {
      "letter": null,
      "glifo": "p"
    },
    {
      "letter": null,
      "glifo": "q"
    },
    {
      "letter": null,
      "glifo": "r"
    },
    {
      "letter": null,
      "glifo": "s"
    },
    {
      "letter": null,
      "glifo": "t"
    },
    {
      "letter": null,
      "glifo": "u"
    },
    {
      "letter": null,
      "glifo": "v"
    },
    {
      "letter": null,
      "glifo": "w"
    },
    {
      "letter": null,
      "glifo": "x"
    },
    {
      "letter": null,
      "glifo": "y"
    },
    {
      "letter": null,
      "glifo": "z"
    }
  ]
}
  • Content: 
    .c-alphindex {
  --alphindex-bg: var(--background-color-gray);
  --alphindex-color: var(--link-color-dark);
  --alphindex-width: auto;
  --alphindex-px: #{$padding-base};
  width: var(--alphindex-width);
  padding-right: var(--alphindex-px);
  padding-left: var(--alphindex-px);
  background-color: var(--alphindex-bg);
  color: var(--alphindex-color);
  transition: $global-interactive-transition;
  @include bp(lg) {
    --alphindex-px: #{$padding-small};
  }
  @include bp(lg) {
    --alphindex-width: 100%;
  }

  #{$global-background-dark} &,
  #{$global-background-primary-dark} & {
    --alphindex-color: $link-01;
  }

  &:hover:not(.disabled) {
    --alphindex-color: $hover-04;
    --alphindex-bg: var(--nav-active-bg-hover);
  }

  &.current {
    --alphindex-bg: var(--theme-color);
    --alphindex-color: #{$inverse-01};
  }

  &.disabled {
    --alphindex-color: #{$disabled-02};
  }

}
  • URL: /components/raw/alphindex/alphindex.scss
  • Filesystem Path: src/lib/components/alphindex/alphindex.scss
  • Size: 901 Bytes

No notes defined.