UCI

Alpha menu 

<div class="alpha-menu">
    <ul class="alpha-menu__list">
        <li class="alpha-menu__item">
            <div class="
                    alpha-menu__radio
                " data-letter="a">
                <input class="alpha-menu__input" id="letter-a" type="radio" name="Letters" value="a">
                <label class="alpha-menu__label
                                visible
                            " for="letter-a">
                    a
                </label>
            </div>
        </li>
        <li class="alpha-menu__item">
            <div class="
                    alpha-menu__radio
                " data-letter="b">
                <input class="alpha-menu__input" id="letter-b" type="radio" name="Letters" value="b">
                <label class="alpha-menu__label
" for="letter-b">
                    b
                </label>
            </div>
        </li>
        <li class="alpha-menu__item">
            <div class="
                    alpha-menu__radio
                " data-letter="c">
                <input class="alpha-menu__input" id="letter-c" type="radio" name="Letters" value="c" disabled>
                <label class="alpha-menu__label
" for="letter-c">
                    c
                </label>
            </div>
        </li>
        <li class="alpha-menu__item">
            <div class="
                    alpha-menu__radio
                " data-letter="d">
                <input class="alpha-menu__input" id="letter-d" type="radio" name="Letters" value="d" disabled>
                <label class="alpha-menu__label
" for="letter-d">
                    d
                </label>
            </div>
        </li>
        <li class="alpha-menu__item">
            <div class="
                    alpha-menu__radio
                " data-letter="e">
                <input class="alpha-menu__input" id="letter-e" type="radio" name="Letters" value="e">
                <label class="alpha-menu__label
" for="letter-e">
                    e
                </label>
            </div>
        </li>
        <li class="alpha-menu__item">
            <div class="
                    alpha-menu__radio
                " data-letter="f">
                <input class="alpha-menu__input" id="letter-f" type="radio" name="Letters" value="f" disabled>
                <label class="alpha-menu__label
" for="letter-f">
                    f
                </label>
            </div>
        </li>
        <li class="alpha-menu__item">
            <div class="
                    alpha-menu__radio
                " data-letter="g">
                <input class="alpha-menu__input" id="letter-g" type="radio" name="Letters" value="g">
                <label class="alpha-menu__label
" for="letter-g">
                    g
                </label>
            </div>
        </li>
        <li class="alpha-menu__item">
            <div class="
                    alpha-menu__radio
                " data-letter="h">
                <input class="alpha-menu__input" id="letter-h" type="radio" name="Letters" value="h" disabled>
                <label class="alpha-menu__label
" for="letter-h">
                    h
                </label>
            </div>
        </li>
        <li class="alpha-menu__item">
            <div class="
                    alpha-menu__radio
                " data-letter="i">
                <input class="alpha-menu__input" id="letter-i" type="radio" name="Letters" value="i" disabled>
                <label class="alpha-menu__label
" for="letter-i">
                    i
                </label>
            </div>
        </li>
        <li class="alpha-menu__item">
            <div class="
                    alpha-menu__radio
                " data-letter="j">
                <input class="alpha-menu__input" id="letter-j" type="radio" name="Letters" value="j" disabled>
                <label class="alpha-menu__label
" for="letter-j">
                    j
                </label>
            </div>
        </li>
        <li class="alpha-menu__item">
            <div class="
                    alpha-menu__radio
                " data-letter="k">
                <input class="alpha-menu__input" id="letter-k" type="radio" name="Letters" value="k" disabled>
                <label class="alpha-menu__label
" for="letter-k">
                    k
                </label>
            </div>
        </li>
        <li class="alpha-menu__item">
            <div class="
                    alpha-menu__radio
                " data-letter="l">
                <input class="alpha-menu__input" id="letter-l" type="radio" name="Letters" value="l" disabled>
                <label class="alpha-menu__label
" for="letter-l">
                    l
                </label>
            </div>
        </li>
        <li class="alpha-menu__item">
            <div class="
                    alpha-menu__radio
                " data-letter="m">
                <input class="alpha-menu__input" id="letter-m" type="radio" name="Letters" value="m" disabled>
                <label class="alpha-menu__label
" for="letter-m">
                    m
                </label>
            </div>
        </li>
        <li class="alpha-menu__item">
            <div class="
                    alpha-menu__radio
                " data-letter="n">
                <input class="alpha-menu__input" id="letter-n" type="radio" name="Letters" value="n" disabled>
                <label class="alpha-menu__label
" for="letter-n">
                    n
                </label>
            </div>
        </li>
        <li class="alpha-menu__item">
            <div class="
                    alpha-menu__radio
                " data-letter="o">
                <input class="alpha-menu__input" id="letter-o" type="radio" name="Letters" value="o" disabled>
                <label class="alpha-menu__label
" for="letter-o">
                    o
                </label>
            </div>
        </li>
        <li class="alpha-menu__item">
            <div class="
                    alpha-menu__radio
                " data-letter="p">
                <input class="alpha-menu__input" id="letter-p" type="radio" name="Letters" value="p" disabled>
                <label class="alpha-menu__label
" for="letter-p">
                    p
                </label>
            </div>
        </li>
        <li class="alpha-menu__item">
            <div class="
                    alpha-menu__radio
                " data-letter="q">
                <input class="alpha-menu__input" id="letter-q" type="radio" name="Letters" value="q" disabled>
                <label class="alpha-menu__label
" for="letter-q">
                    q
                </label>
            </div>
        </li>
        <li class="alpha-menu__item">
            <div class="
                    alpha-menu__radio
                " data-letter="r">
                <input class="alpha-menu__input" id="letter-r" type="radio" name="Letters" value="r" disabled>
                <label class="alpha-menu__label
" for="letter-r">
                    r
                </label>
            </div>
        </li>
        <li class="alpha-menu__item">
            <div class="
                    alpha-menu__radio
                " data-letter="s">
                <input class="alpha-menu__input" id="letter-s" type="radio" name="Letters" value="s" disabled>
                <label class="alpha-menu__label
" for="letter-s">
                    s
                </label>
            </div>
        </li>
        <li class="alpha-menu__item">
            <div class="
                    alpha-menu__radio
                " data-letter="t">
                <input class="alpha-menu__input" id="letter-t" type="radio" name="Letters" value="t" disabled>
                <label class="alpha-menu__label
" for="letter-t">
                    t
                </label>
            </div>
        </li>
        <li class="alpha-menu__item">
            <div class="
                    alpha-menu__radio
                " data-letter="u">
                <input class="alpha-menu__input" id="letter-u" type="radio" name="Letters" value="u" disabled>
                <label class="alpha-menu__label
" for="letter-u">
                    u
                </label>
            </div>
        </li>
        <li class="alpha-menu__item">
            <div class="
                    alpha-menu__radio
                " data-letter="v">
                <input class="alpha-menu__input" id="letter-v" type="radio" name="Letters" value="v" disabled>
                <label class="alpha-menu__label
" for="letter-v">
                    v
                </label>
            </div>
        </li>
        <li class="alpha-menu__item">
            <div class="
                    alpha-menu__radio
                " data-letter="w">
                <input class="alpha-menu__input" id="letter-w" type="radio" name="Letters" value="w" disabled>
                <label class="alpha-menu__label
" for="letter-w">
                    w
                </label>
            </div>
        </li>
        <li class="alpha-menu__item">
            <div class="
                    alpha-menu__radio
                " data-letter="x">
                <input class="alpha-menu__input" id="letter-x" type="radio" name="Letters" value="x" disabled>
                <label class="alpha-menu__label
" for="letter-x">
                    x
                </label>
            </div>
        </li>
        <li class="alpha-menu__item">
            <div class="
                    alpha-menu__radio
                " data-letter="y">
                <input class="alpha-menu__input" id="letter-y" type="radio" name="Letters" value="y" disabled>
                <label class="alpha-menu__label
" for="letter-y">
                    y
                </label>
            </div>
        </li>
        <li class="alpha-menu__item">
            <div class="
                    alpha-menu__radio
                " data-letter="z">
                <input class="alpha-menu__input" id="letter-z" type="radio" name="Letters" value="z" disabled>
                <label class="alpha-menu__label
" for="letter-z">
                    z
                </label>
            </div>
        </li>
    </ul>
</div>
 
<div class="alpha-menu">
    <ul class="alpha-menu__list">
        {{#each item}}
            <li class="alpha-menu__item">
                <div class="
                    alpha-menu__radio
                " data-letter="{{ this.letter }}">
                    <input
                        class="alpha-menu__input"
                        id="{{ this.id }}"
                        type="radio"
                        name="Letters"
                        value="{{ this.letter }}"
                        {{#if isDisabled}}disabled{{/if}}
                    >
                    <label
                        class="alpha-menu__label
                            {{#if this.isVisible}}
                                visible
                            {{/if}}"
                        for="{{ this.id }}"
                    >
                        {{ this.letter }}
                    </label>
                </div>
            </li>
        {{/each}}
    </ul>
</div>
 
{
  "item": [
    {
      "isVisible": true,
      "id": "letter-a",
      "letter": "a"
    },
    {
      "id": "letter-b",
      "letter": "b"
    },
    {
      "id": "letter-c",
      "letter": "c",
      "isDisabled": true
    },
    {
      "id": "letter-d",
      "letter": "d",
      "isDisabled": true
    },
    {
      "id": "letter-e",
      "letter": "e"
    },
    {
      "id": "letter-f",
      "letter": "f",
      "isDisabled": true
    },
    {
      "id": "letter-g",
      "letter": "g"
    },
    {
      "id": "letter-h",
      "letter": "h",
      "isDisabled": true
    },
    {
      "id": "letter-i",
      "letter": "i",
      "isDisabled": true
    },
    {
      "id": "letter-j",
      "letter": "j",
      "isDisabled": true
    },
    {
      "id": "letter-k",
      "letter": "k",
      "isDisabled": true
    },
    {
      "id": "letter-l",
      "letter": "l",
      "isDisabled": true
    },
    {
      "id": "letter-m",
      "letter": "m",
      "isDisabled": true
    },
    {
      "id": "letter-n",
      "letter": "n",
      "isDisabled": true
    },
    {
      "id": "letter-o",
      "letter": "o",
      "isDisabled": true
    },
    {
      "id": "letter-p",
      "letter": "p",
      "isDisabled": true
    },
    {
      "id": "letter-q",
      "letter": "q",
      "isDisabled": true
    },
    {
      "id": "letter-r",
      "letter": "r",
      "isDisabled": true
    },
    {
      "id": "letter-s",
      "letter": "s",
      "isDisabled": true
    },
    {
      "id": "letter-t",
      "letter": "t",
      "isDisabled": true
    },
    {
      "id": "letter-u",
      "letter": "u",
      "isDisabled": true
    },
    {
      "id": "letter-v",
      "letter": "v",
      "isDisabled": true
    },
    {
      "id": "letter-w",
      "letter": "w",
      "isDisabled": true
    },
    {
      "id": "letter-x",
      "letter": "x",
      "isDisabled": true
    },
    {
      "id": "letter-y",
      "letter": "y",
      "isDisabled": true
    },
    {
      "id": "letter-z",
      "letter": "z",
      "isDisabled": true
    }
  ]
}
  • Content: 
    .alpha-menu {
    padding: 10px 0;
    background-color: var(--color-accent-light);

    @media (--viewport-xs-max) {
        margin: 0;
        overflow: hidden;
    }

    @media (--viewport-ms-min) {
        padding: 11.5px 30px;
    }

    @media (--viewport-sm-min) {
        padding: 20px 33px;
    }

    &__list {
        overflow-x: scroll;
        scrollbar-width: none; /* Hide the scrollbar in Mozilla Firefox*/
        -ms-overflow-style: none; /* Hide the scrollbar in IE and Edge*/
        display: flex;
        margin: 0 -12.5px;

        &::-webkit-scrollbar {
            display: none; /* Hide the scrollbar in Chromium */
        }

        @media (--viewport-ms-min) {
            flex-wrap: wrap;
            margin: 0 -12px;
        }

        @media (--viewport-sm-min) {
            margin: 0 -10px;
        }
    }

    &__item {
        &:first-child {
            @media (--viewport-xs-max) {
                padding-left: 20px;
            }
        }

        &:last-child {
            @media (--viewport-xs-max) {
                padding-right: 20px;
            }
        }
    }

    &__input {
        position: absolute;
        left: -9999px;
        opacity: 0;

        &:hover,
        &:focus {
            + .alpha-menu__label {
                color: var(--color-accent);
            }
        }

        &:disabled {
            + .alpha-menu__label {
                color: var(--color-disabled);
            }
        }
    }

    &__label {
        display: block;
        padding: 10px 12.5px;
        text-transform: uppercase;
        font-family: "Jornada Sans Medium";
        font-size: 12px;
        line-height: 20px;
        letter-spacing: 1.4px;
        color: var(--color-secondary);
        transition: all 0.3s;

        @media (--viewport-ms-min) {
            padding: 8.5px 12px;
            font-family: "Jornada Sans Book";
            font-size: 13px;
            line-height: 23px;
            letter-spacing: 0;
        }

        @media (--viewport-sm-min) {
            padding: 10px;
            font-family: "Jornada Sans Medium";
            font-size: 12px;
            line-height: 20px;
            letter-spacing: 1.4px;
        }

        &.visible {
            color: var(--color-accent);
        }
    }
}
  • URL: /components/raw/alpha-menu/alpha-menu.css
  • Filesystem Path: src/02-molecules/alpha-menu/alpha-menu.css
  • Size: 2.3 KB

No notes defined.