Skip to content

Instantly share code, notes, and snippets.

@evdeveloper

evdeveloper/mixin Pug select custom

Last active January 18, 2020 06:18
Download ZIP

Revisions

  1. evdeveloper revised this gist Jan 18, 2020. No changes.
  2. evdeveloper created this gist Jan 18, 2020.
    141 changes: 141 additions & 0 deletions mixin Pug select custom
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,141 @@
    // Pug

    mixin SelectBox(name, options)
    .select-box
    .select-box__current(tabindex="1")
    each option, index in options
    .select-box__value
    input.select-box__input(type="radio" id=index value=option.value name=name checked)
    p.select-box__input-text #{option.name}
    img.select-box__icon(src="http://cdn.onlinewebfonts.com/svg/img_295694.svg" alt="Arrow Icon" aria-hidden="true")
    ul.select-box__list
    each option, index in options
    li
    label.select-box__option(for=index aria-hidden) #{option.name}

    +SelectBox('Ben', [
    {name: 'Cream', value: '1'},
    {name: 'Cheese', value: '2'},
    {name: 'Milk', value: '3'},
    {name: 'Honey', value: '4'},
    {name: 'Toast', value: '5'}
    ])




    // Scss

    .select-box {
    position: relative;
    display: block;
    width: 100%;
    margin: 0 auto;
    font-family: 'Open Sans', 'Helvetica Neue', 'Segoe UI', 'Calibri', 'Arial', sans-serif;
    font-size: 18px;
    color: #60666d;

    @media (min-width: 768px) {
    width: 70%;
    }

    @media (min-width: 992px) {
    width: 50%;
    }

    @media (min-width: 1200px) {
    width: 30%;
    }

    &__current {
    position: relative;
    box-shadow: 0 15px 30px -10px transparentize(#000, 0.9);
    cursor: pointer;
    outline: none;

    &:focus {
    & + .select-box__list {
    opacity: 1;

    // We have to set "animation-name: none;" to make the list visible (read below how it works)

    animation-name: none;

    .select-box__option {
    cursor: pointer;
    }
    }

    .select-box__icon {
    transform: translateY(-50%) rotate(180deg);
    }
    }
    }

    &__icon {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    width: 20px;
    opacity: 0.3;
    transition: 0.2s ease;
    }

    &__value {
    display: flex;
    }

    &__input {
    display: none;

    &:checked + .select-box__input-text {
    display: block;
    }
    }

    &__input-text {
    display: none;
    width: 100%;
    margin: 0;
    padding: 15px;
    background-color: #fff;
    }

    &__list {
    position: absolute;
    width: 100%;
    padding: 0;
    list-style: none;
    opacity: 0;


    animation-name: HideList;
    animation-duration: 0.5s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
    animation-timing-function: step-start;
    box-shadow: 0 15px 30px -10px transparentize(#000, 0.9);
    }

    &__option {
    display: block;
    padding: 15px;
    background-color: #fff;

    &:hover,
    &:focus {
    color: #546c84;
    background-color: #fbfbfb;
    }
    }
    }

    @keyframes HideList {
    from {
    transform: scaleY(1);
    }
    to {
    transform: scaleY(0);
    }
    }