Alpaca components for Magento 2

Quicksearch 

<div class="quicksearch__wrapper">
    <section class="quicksearch quicksearch--visible" tabindex="0" aria-label="Quicksearch results" aria-live="assertive" aria-describedby="instructions">
        <div class="quicksearch__results">
            <h2 class="quicksearch__results-heading margin-bottom-0">
                Results for your request:
                <span class="quicksearch__typed">
                    Ni
                </span>
            </h2>
        </div>
        <div class="quicksearch__content">
            <ul class="quicksearch__list quicksearch__list--column">
                <li class="quicksearch__product">
                    <a href="#" title="Lorem Ipsum is simply dummy...">
                        <div class="lazyload-wrapper quicksearch__product-image-wrapper">
                            <img class="
            image
            lazyload
            quicksearch__product-image
        " src="" data-src="/images/product/minicart-product-64x96.jpeg" alt="">
                        </div>

                    </a>
                    <div class="quicksearch__product-details">
                        <a href="#" class="link quicksearch__link" title="Lorem Ipsum is simply dummy...">
                            <h3 class="quicksearch__name">
                                Lorem Ipsum is simply dummy...
                            </h3>

                        </a>
                        <div class="price  ">
                            <span class="price__value price__value--old ">
                                <del aria-label="Price reduced from: $249.95">
                                    $
                                    249.95

                                </del>
                            </span>
                            <span class="price__value price__value--special ">
                                <ins aria-label="On sale at: $159.95">

                                    $

                                    159.95

                                </ins>
                            </span>
                        </div>

                    </div>
                </li>
                <li class="quicksearch__product">
                    <a href="#" title="Lorem Ipsum is simply dummy...">
                        <div class="lazyload-wrapper quicksearch__product-image-wrapper">
                            <img class="
            image
            lazyload
            quicksearch__product-image
        " src="" data-src="/images/product/minicart-product-64x96.jpeg" alt="">
                        </div>

                    </a>
                    <div class="quicksearch__product-details">
                        <a href="#" class="link quicksearch__link" title="Lorem Ipsum is simply dummy...">
                            <h3 class="quicksearch__name">
                                Lorem Ipsum is simply dummy...
                            </h3>

                        </a>
                        <div class="price  ">
                            <span class="price__value price__value--old ">
                                <del aria-label="Price reduced from: $249.95">
                                    $
                                    249.95

                                </del>
                            </span>
                            <span class="price__value price__value--special ">
                                <ins aria-label="On sale at: $159.95">

                                    $

                                    159.95

                                </ins>
                            </span>
                        </div>

                    </div>
                </li>
                <li class="quicksearch__product">
                    <a href="#" title="Lorem Ipsum is simply dummy...">
                        <div class="lazyload-wrapper quicksearch__product-image-wrapper">
                            <img class="
            image
            lazyload
            quicksearch__product-image
        " src="" data-src="/images/product/minicart-product-64x96.jpeg" alt="">
                        </div>

                    </a>
                    <div class="quicksearch__product-details">
                        <a href="#" class="link quicksearch__link" title="Lorem Ipsum is simply dummy...">
                            <h3 class="quicksearch__name">
                                Lorem Ipsum is simply dummy...
                            </h3>

                        </a>
                        <div class="price  ">
                            <span class="price__value price__value--old ">
                                <del aria-label="Price reduced from: $249.95">
                                    $
                                    249.95

                                </del>
                            </span>
                            <span class="price__value price__value--special ">
                                <ins aria-label="On sale at: $159.95">

                                    $

                                    159.95

                                </ins>
                            </span>
                        </div>

                    </div>
                </li>
                <li class="quicksearch__product">
                    <a href="#" title="Lorem Ipsum is simply dummy...">
                        <div class="lazyload-wrapper quicksearch__product-image-wrapper">
                            <img class="
            image
            lazyload
            quicksearch__product-image
        " src="" data-src="/images/product/minicart-product-64x96.jpeg" alt="">
                        </div>

                    </a>
                    <div class="quicksearch__product-details">
                        <a href="#" class="link quicksearch__link" title="Lorem Ipsum is simply dummy...">
                            <h3 class="quicksearch__name">
                                Lorem Ipsum is simply dummy...
                            </h3>

                        </a>
                        <div class="price  ">
                            <span class="price__value price__value--old ">
                                <del aria-label="Price reduced from: $249.95">
                                    $
                                    249.95

                                </del>
                            </span>
                            <span class="price__value price__value--special ">
                                <ins aria-label="On sale at: $159.95">

                                    $

                                    159.95

                                </ins>
                            </span>
                        </div>

                    </div>
                </li>
            </ul>
            <div class="quicksearch__sidebar-column">
                <h3 id="qs-category-title" class="quicksearch__sidebar-title">
                    Category
                </h3>
                <ul class="quicksearch__list quicksearch__sidebar-list" aria-labelledby="qs-category-title">
                    <li class="quicksearch__sidebar-item">
                        <a href="#" class="
                                    link
                                    quicksearch__link
                                     quicksearch__link--sidebar
                                " title="Category 1">
                            Category 1
                        </a>
                    </li>
                    <li class="quicksearch__sidebar-item">
                        <a href="#" class="
                                    link
                                    quicksearch__link
                                     quicksearch__link--sidebar
                                " title="Category 2">
                            Category 2
                        </a>
                    </li>
                </ul>
                <h3 id="qs-manufacturer-title" class="quicksearch__sidebar-title">
                    Manufacturer
                </h3>
                <ul class="quicksearch__list quicksearch__sidebar-list" aria-labelledby="qs-manufacturer-title">
                    <li class="quicksearch__sidebar-item">
                        <a href="#" class="
                                    link
                                    quicksearch__link
                                     
                                " title="Nike">
                            Nike
                        </a>
                    </li>
                    <li class="quicksearch__sidebar-item">
                        <a href="#" class="
                                    link
                                    quicksearch__link
                                     
                                " title="Nike SB">
                            Nike SB
                        </a>
                    </li>
                    <li class="quicksearch__sidebar-item">
                        <a href="#" class="
                                    link
                                    quicksearch__link
                                     
                                " title="Nike sportswear">
                            Nike sportswear
                        </a>
                    </li>
                    <li class="quicksearch__sidebar-item">
                        <a href="#" class="
                                    link
                                    quicksearch__link
                                     
                                " title="Nixon">
                            Nixon
                        </a>
                    </li>
                </ul>
            </div>
            <div id="instructions" class="visually-hidden">
                Available results: 4 products, 2 categories
            </div>
        </div>
        <a class="link button button--fluid quicksearch__more-link" href="#" title="See All">
            See All
        </a>

        <button class="button button--icon button--rotate-icon quicksearch__close-button" type="button" aria-label="Close quicksearch">
            <svg class="icon button__icon quicksearch__close-icon" role="img">
                <title>Close</title>
                <use href="/images/icons-sprite.svg#close"></use>
            </svg>

        </button>

    </section>
</div>
 
<div class="quicksearch__wrapper">
    <section
        class="quicksearch quicksearch--visible"
        tabindex="0"
        aria-label="Quicksearch results"
        aria-live="assertive"
        aria-describedby="instructions"
    >
        <div class="quicksearch__results">
            <h2 class="quicksearch__results-heading margin-bottom-0">
                {{ results.text }}
                <span class="quicksearch__typed">
                    {{ results.typed }}
                </span>
            </h2>
        </div>
        <div class="quicksearch__content">
            {{#if noresults.visible }}
                <h2 class="quicksearch__empty">
                    {{ noresults.text }}
                </h2>
            {{/if }}
            <ul class="quicksearch__list quicksearch__list--column">
                {{#each product }}
                    <li class="quicksearch__product">
                        <a
                            href="#"
                            title="{{ name.text }}"
                        >
                            {{ render '@image' image }}
                        </a>
                        <div class="quicksearch__product-details">
                            <a
                                href="#"
                                class="link quicksearch__link"
                                title="{{ name.text }}"
                            >
                                {{ render '@heading' name }}
                            </a>
                            {{ render '@price--with-special-price' }}
                        </div>
                    </li>
                {{/each }}
            </ul>
            <div class="quicksearch__sidebar-column">
                <h3
                    id="qs-category-title"
                    class="quicksearch__sidebar-title"
                >
                    {{ category.title }}
                </h3>
                <ul class="quicksearch__list quicksearch__sidebar-list" aria-labelledby="qs-category-title">
                    {{#each category.items }}
                        <li class="quicksearch__sidebar-item">
                            <a
                                href="#"
                                class="
                                    link
                                    quicksearch__link
                                     {{ class }}
                                "
                                title="{{ name }}"
                            >
                                {{ name }}
                            </a>
                        </li>
                    {{/each }}
                </ul>
                <h3
                    id="qs-manufacturer-title"
                    class="quicksearch__sidebar-title"
                >
                    {{ manufacturer.title }}
                </h3>
                <ul class="quicksearch__list quicksearch__sidebar-list" aria-labelledby="qs-manufacturer-title">
                    {{#each manufacturer.items }}
                        <li class="quicksearch__sidebar-item">
                            <a
                                href="#"
                                class="
                                    link
                                    quicksearch__link
                                     {{ class }}
                                "
                                title="{{ name }}"
                            >
                                {{ name }}
                            </a>
                        </li>
                    {{/each }}
                </ul>
            </div>
            <div
                id="instructions"
                class="visually-hidden"
            >
                Available results: 4 products, 2 categories
            </div>
        </div>
        {{ render '@link' more }}
        {{ render '@button--rotate-icon' close }}
    </section>
</div>
 
{
  "results": {
    "text": "Results for your request:",
    "typed": "Ni"
  },
  "noresults": {
    "visible": false,
    "text": "No search results found."
  },
  "close": {
    "tag": "button",
    "class": "button--rotate-icon quicksearch__close-button",
    "icon": {
      "id": "close",
      "title": "Close",
      "class": "button__icon quicksearch__close-icon"
    },
    "attributes": "type=\"button\" aria-label=\"Close quicksearch\""
  },
  "product": [
    {
      "image": {
        "wrapperClass": "quicksearch__product-image-wrapper",
        "class": "quicksearch__product-image",
        "dataSrc": "/images/product/minicart-product-64x96.jpeg"
      },
      "name": {
        "class": "quicksearch__name",
        "tag": "h3",
        "text": "Lorem Ipsum is simply dummy..."
      }
    },
    {
      "image": {
        "wrapperClass": "quicksearch__product-image-wrapper",
        "class": "quicksearch__product-image",
        "dataSrc": "/images/product/minicart-product-64x96.jpeg"
      },
      "name": {
        "class": "quicksearch__name",
        "tag": "h3",
        "text": "Lorem Ipsum is simply dummy..."
      }
    },
    {
      "image": {
        "wrapperClass": "quicksearch__product-image-wrapper",
        "class": "quicksearch__product-image",
        "dataSrc": "/images/product/minicart-product-64x96.jpeg"
      },
      "name": {
        "class": "quicksearch__name",
        "tag": "h3",
        "text": "Lorem Ipsum is simply dummy..."
      }
    },
    {
      "image": {
        "wrapperClass": "quicksearch__product-image-wrapper",
        "class": "quicksearch__product-image",
        "dataSrc": "/images/product/minicart-product-64x96.jpeg"
      },
      "name": {
        "class": "quicksearch__name",
        "tag": "h3",
        "text": "Lorem Ipsum is simply dummy..."
      }
    }
  ],
  "category": {
    "title": "Category",
    "items": [
      {
        "name": "Category 1",
        "class": "quicksearch__link--sidebar"
      },
      {
        "name": "Category 2",
        "class": "quicksearch__link--sidebar"
      }
    ]
  },
  "manufacturer": {
    "title": "Manufacturer",
    "items": [
      {
        "name": "Nike"
      },
      {
        "name": "Nike SB"
      },
      {
        "name": "Nike sportswear"
      },
      {
        "name": "Nixon"
      }
    ]
  },
  "more": {
    "class": "button button--fluid quicksearch__more-link",
    "href": "#",
    "text": "See All"
  }
}
  • Content: 
    $quicksearch__mq-large                      : 950px !default;
$quicksearch__right\@medium                 : auto !default;
$quicksearch__width                         : 100% !default;
$quicksearch__width\@medium                 : 100% !default;
$quicksearch__width\@large                  : 880px !default;
$quicksearch__width\@xl                     : 880px !default;
$quicksearch__top                           : calc(100% + 1px) !default;
$quicksearch__top\@medium                   : calc(100% - #{$spacer--medium}) !default;
$quicksearch__left                          : 0 !default;
$quicksearch__left\@medium                  : 0 !default;
$quicksearch__left\@large                   : calc((100% - #{$quicksearch__width\@large}) / 2) !default;
$quicksearch__left\@xl                      : calc((100% - #{$quicksearch__width\@large}) / 2) !default;
$quicksearch__padding                       : 0 $spacer--medium !default;
$quicksearch__padding\@medium               : 0 $spacer--medium !default;
$quicksearch__padding\@large                : 0 $spacer--large !default;
$quicksearch__padding\@xl                   : 0 $spacer--large !default;
$quicksearch__background                    : $white !default;
$quicksearch__box-shadow                    : 0 $spacer $spacer--medium 0 rgba(0, 0, 0, 0.16) !default;

$quicksearch__wrapper-position              : static !default;

$quicksearch__results-padding               : $spacer--medium $spacer--extra-large $spacer--medium 0 !default;
$quicksearch__results-padding\@medium       : $spacer 0 !default;
$quicksearch__results-padding\@large        : $spacer 0 !default;
$quicksearch__results-border                : 1px solid $gray-light !default;

$quicksearch__empty-margin                  : $spacer 0 !default;

$quicksearch__results-heading-font-family   : $font-family-base !default;
$quicksearch__results-heading-font-size     : $font-size-medium !default;
$quicksearch__results-heading-font-weight   : $font-weight-normal !default;
$quicksearch__results-heading-text-transform: none !default;

$quicksearch__typed-min-height              : 48px !default;
$quicksearch__typed-font-weight             : $font-weight-bold !default;

$quicksearch__close-position                : absolute !default;
$quicksearch__close-right                   : $spacer--medium !default;
$quicksearch__close-right\@medium           : $spacer--medium !default;
$quicksearch__close-right\@large            : $spacer--medium !default;
$quicksearch__close-right\@xl               : $spacer--medium !default;
$quicksearch__close-top                     : $spacer--medium !default;
$quicksearch__close-top\@medium             : $spacer !default;
$quicksearch__close-top\@large              : $spacer--medium !default;
$quicksearch__close-top\@xl                 : $spacer--medium !default;
$quicksearch__close-fill                    : $color-primary !default;
$quicksearch__close-background              : transparent !default;

$quicksearch__content-padding               : $spacer 0 !default;

$quicksearch__list-margin                   : 0 !default;
$quicksearch__list-padding                  : 0 !default;
$quicksearch__sidebar-list-top-margin       : 0 0 $spacer--medium 0 !default;

$quicksearch__sidebar-item-padding          : $spacer--medium 0 !default;
$quicksearch__sidebar-link-font-size        : $font-size-base !default;
$quicksearch__sidebar-link-font-weight      : $font-weight-base !default;
$quicksearch__sidebar-link-color            : $color-primary !default;
$quicksearch__sidebar-title-font-family     : $font-family-base !default;
$quicksearch__sidebar-title-font-size       : $font-size-base !default;
$quicksearch__sidebar-title-font-weight     : $font-weight-bold !default;
$quicksearch__sidebar-title-text-transform  : none !default;

$quicksearch__sidebar-column-padding        : $spacer--large 0 0 0 !default;
$quicksearch__sidebar-column-padding\@medium: $spacer--semi-medium 0 0 $spacer--medium !default;
$quicksearch__sidebar-column-padding\@large : $spacer--semi-medium 0 0 $spacer--large !default;
$quicksearch__sidebar-column-padding\@xl    : $spacer--semi-medium 0 0 $spacer--large !default;

$quicksearch__product-border                : 1px solid $gray-light !default;
$quicksearch__product-padding               : $spacer--medium 0 !default;
$quicksearch__product-image-size            : 72px !default;
$quicksearch__product-image-margin-right    : $spacer !default;

$quicksearch__name-margin                   : 0 !default;
$quicksearch__name-padding                  : 0 0 $spacer !default;
$quicksearch__name-color                    : inherit !default;
$quicksearch__name-font-family              : $font-family-base !default;
$quicksearch__name-font-size                : $font-size-base !default;
$quicksearch__name-font-size\@medium        : $font-size-base !default;
$quicksearch__name-font-weight              : $font-weight-normal !default;
$quicksearch__name-text-decoration          : none !default;

$quicksearch__more-link-margin              : $spacer--medium 0 !default;
$quicksearch__more-link-margin\@large       : $spacer--medium 0 $spacer--large !default;
$quicksearch__more-link-border-top          : 1px solid $gray-light !default;
  • URL: /components/raw/quicksearch/_quicksearch-variables.scss
  • Filesystem Path: build/components/Organisms/quicksearch/_quicksearch-variables.scss
  • Size: 5.2 KB
  • Content: 
    @import 'quicksearch-variables';

.quicksearch {
    position: absolute;
    top: $quicksearch__top;
    left: $quicksearch__left;
    display: none;
    padding: $quicksearch__padding;
    width: $quicksearch__width;
    background: $quicksearch__background;
    box-shadow: $quicksearch__box-shadow;
    transition: $transition-base;

    @include mq($screen-m) {
        top: $quicksearch__top\@medium;
        left: $quicksearch__left\@medium;
        right: $quicksearch__right\@medium;
        width: $quicksearch__width\@medium;
        padding: $quicksearch__padding\@medium;
    }


    @include mq($quicksearch__mq-large) {
        padding: $quicksearch__padding\@large;
        left: $quicksearch__left\@large;
        width: $quicksearch__width\@large;
    }

    @include mq($screen-xl) {
        padding: $quicksearch__padding\@xl;
        left: $quicksearch__left\@xl;
        width: $quicksearch__width\@xl;
    }

    &--visible {
        display: block;
    }

    &__wrapper {
        position: $quicksearch__wrapper-position;
    }

    &__results {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: $quicksearch__results-padding;
        border-bottom: $quicksearch__results-border;

        @include mq($screen-m) {
            padding: $quicksearch__results-padding\@medium;
        }

        @include mq($screen-l) {
            padding: $quicksearch__results-padding\@large;
        }
    }

    &__empty {
        margin: $quicksearch__empty-margin;
    }

    &__empty,
    &__results-heading {
        font-family: $quicksearch__results-heading-font-family;
        font-size: $quicksearch__results-heading-font-size;
        font-weight: $quicksearch__results-heading-font-weight;
        text-transform:  $quicksearch__results-heading-text-transform;
    }

    &__typed {
        display: inline-flex;
        align-items: center;
        min-height: $quicksearch__typed-min-height;
        font-weight: $quicksearch__typed-font-weight;
    }

    &__close-button {
        position: $quicksearch__close-position;
        right: $quicksearch__close-right;
        top: $quicksearch__close-top;
        background-color: $quicksearch__close-background;

        @include mq($screen-m) {
            top: $quicksearch__close-top\@medium;
            right: $quicksearch__close-right\@medium;
        }

        @include mq($screen-l) {
            top: $quicksearch__close-top\@large;
            right: $quicksearch__close-right\@large;
        }

        .quicksearch__close-icon {
            fill: $quicksearch__close-fill;
        }
    }

    &__content {
        padding: $quicksearch__content-padding;

        @include mq($screen-m) {
            display: flex;
        }
    }

    &__list {
        margin: $quicksearch__list-margin;
        padding: $quicksearch__list-padding;
        list-style-type: none;

        &--column {
            flex: 2;
        }
    }

    &__product {
        display: flex;
        padding: $quicksearch__product-padding;
        border-bottom: $quicksearch__product-border;
    }

    &__product-image-wrapper {
        min-width: $quicksearch__product-image-size;
        min-height: $quicksearch__product-image-size;
        margin-right: $quicksearch__product-image-margin-right;
    }

    &__product-image {
        max-width: $quicksearch__product-image-size;
    }

    &__link {
        display: block;
        text-decoration: none;

        &--sidebar {
            color: $quicksearch__sidebar-link-color;
            font-size: $quicksearch__sidebar-link-font-size;
            font-weight: $quicksearch__sidebar-link-font-weight;
        }
    }

    &__name {
        color: $quicksearch__name-color;
        font-family: $quicksearch__name-font-family;
        font-size: $quicksearch__name-font-size;
        text-transform: $quicksearch__name-text-decoration;
        font-weight: $quicksearch__name-font-weight;
        margin: $quicksearch__name-margin;
        padding: $quicksearch__name-padding;

        @include mq($screen-m) {
            font-size: $quicksearch__name-font-size\@medium;
        }
    }

    &__sidebar-column {
        flex: 1;
        padding: $quicksearch__sidebar-column-padding;

        @include mq($screen-m) {
            padding: $quicksearch__sidebar-column-padding\@medium;
        }

        @include mq($screen-l) {
            padding: $quicksearch__sidebar-column-padding\@large;
        }

        @include mq($screen-xl) {
            padding: $quicksearch__sidebar-column-padding\@xl;
        }
    }

    &__sidebar-list {
        &:first-of-type {
            margin: $quicksearch__sidebar-list-top-margin;
        }
    }

    &__sidebar-item {
        padding: $quicksearch__sidebar-item-padding;
    }

    &__sidebar-title {
        font-family: $quicksearch__sidebar-title-font-family;
        font-size: $quicksearch__sidebar-title-font-size;
        font-weight: $quicksearch__sidebar-title-font-weight;
        text-transform: $quicksearch__sidebar-title-text-transform;
    }

    &__more-link {
        margin: $quicksearch__more-link-margin;
        border-top: $quicksearch__more-link-border-top;

        @include mq($screen-l) {
            margin: $quicksearch__more-link-margin\@large;
        }

        &:hover {
            color: inherit;
        }
    }
}
  • URL: /components/raw/quicksearch/_quicksearch.scss
  • Filesystem Path: build/components/Organisms/quicksearch/_quicksearch.scss
  • Size: 5.4 KB

No notes defined.