<div class="quicksearch__wrapper">
<div class="quicksearch quicksearch--visible">
<button class="button button--icon quicksearch__close-button" type="button" aria-label="Close quicksearch">
<svg class="icon " role="img">
<title>Close</title>
<use xlink:href="/images/icons-sprite.svg#close"></use>
</svg>
</button>
<p class="quicksearch__results">
Results for your request:
<span class="quicksearch__typed">
Ni
</span>
</p>
<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/catalog-grid-item/product-1_320_312.jpg" alt="">
</div>
</a>
<div class="quicksearch__product-details">
<a href="#" class="link link--invert quicksearch__link" title="Lorem Ipsum is simply dummy...">
<h3 class="quicksearch__name quicksearch__name--thin">
Lorem Ipsum is simply dummy...
</h3>
</a>
<div class="price ">
<span class="price__value price__value--special ">
<ins aria-label="On sale at: €109,95">
€
109,95
</ins>
</span>
<span class="price__value price__value--old ">
<del aria-label="Price reduced from: €129,95">
€
129,95
</del>
</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/catalog-grid-item/product-1_320_312.jpg" alt="">
</div>
</a>
<div class="quicksearch__product-details">
<a href="#" class="link link--invert quicksearch__link" title="Lorem Ipsum is simply dummy...">
<h3 class="quicksearch__name quicksearch__name--thin">
Lorem Ipsum is simply dummy...
</h3>
</a>
<div class="price ">
<span class="price__value price__value--special ">
<ins aria-label="On sale at: €109,95">
€
109,95
</ins>
</span>
<span class="price__value price__value--old ">
<del aria-label="Price reduced from: €129,95">
€
129,95
</del>
</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/catalog-grid-item/product-1_320_312.jpg" alt="">
</div>
</a>
<div class="quicksearch__product-details">
<a href="#" class="link link--invert quicksearch__link" title="Lorem Ipsum is simply dummy...">
<h3 class="quicksearch__name quicksearch__name--thin">
Lorem Ipsum is simply dummy...
</h3>
</a>
<div class="price ">
<span class="price__value price__value--special ">
<ins aria-label="On sale at: €109,95">
€
109,95
</ins>
</span>
<span class="price__value price__value--old ">
<del aria-label="Price reduced from: €129,95">
€
129,95
</del>
</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/catalog-grid-item/product-1_320_312.jpg" alt="">
</div>
</a>
<div class="quicksearch__product-details">
<a href="#" class="link link--invert quicksearch__link" title="Lorem Ipsum is simply dummy...">
<h3 class="quicksearch__name quicksearch__name--thin">
Lorem Ipsum is simply dummy...
</h3>
</a>
<div class="price ">
<span class="price__value price__value--special ">
<ins aria-label="On sale at: €109,95">
€
109,95
</ins>
</span>
<span class="price__value price__value--old ">
<del aria-label="Price reduced from: €129,95">
€
129,95
</del>
</span>
</div>
</div>
</li>
</ul>
<div class="quicksearch__categories-column">
<ul class="quicksearch__list">
<li class="quicksearch__category">
<a href="#" class="link link--invert quicksearch__link" title="Category name">
<h3 class="quicksearch__name">
Category name
</h3>
</a>
598 item(s)
</li>
<li class="quicksearch__category">
<a href="#" class="link link--invert quicksearch__link" title="Category name">
<h3 class="quicksearch__name">
Category name
</h3>
</a>
598 item(s)
</li>
<li class="quicksearch__category">
<a href="#" class="link link--invert quicksearch__link" title="Category name">
<h3 class="quicksearch__name">
Category name
</h3>
</a>
598 item(s)
</li>
</ul>
<ul class="quicksearch__list quicksearch__list--below">
<li class="quicksearch__manufacturer">
<a href="#" class="link link--invert quicksearch__link" title="Manufacturer name">
<h3 class="quicksearch__name">
Manufacturer name
</h3>
</a>
598 item(s)
</li>
<li class="quicksearch__manufacturer">
<a href="#" class="link link--invert quicksearch__link" title="Manufacturer name">
<h3 class="quicksearch__name">
Manufacturer name
</h3>
</a>
598 item(s)
</li>
<li class="quicksearch__manufacturer">
<a href="#" class="link link--invert quicksearch__link" title="Manufacturer name">
<h3 class="quicksearch__name">
Manufacturer name
</h3>
</a>
598 item(s)
</li>
<li class="quicksearch__manufacturer">
<a href="#" class="link link--invert quicksearch__link" title="Manufacturer name">
<h3 class="quicksearch__name">
Manufacturer name
</h3>
</a>
598 item(s)
</li>
</ul>
</div>
</div>
<a class="link link--invert quicksearch__more-link" href="#" title="See All">
See All
</a>
</div>
</div>
<div class="quicksearch__wrapper">
<div class="quicksearch quicksearch--visible">
{{ render '@button--icon' close }}
<p class="quicksearch__results">
{{ results.text }}
<span class="quicksearch__typed">
{{ results.typed }}
</span>
</p>
<div class="quicksearch__content">
{{#if noresults.visible }}
<p class="quicksearch__empty">
{{ noresults.text }}
</p>
{{/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 link--invert quicksearch__link"
title="{{ name.text }}"
>
{{ render '@heading' name }}
</a>
{{ render '@price--with-special-price' }}
</div>
</li>
{{/each }}
</ul>
<div class="quicksearch__categories-column">
<ul class="quicksearch__list">
{{#each category }}
<li class="quicksearch__category">
<a
href="#"
class="link link--invert quicksearch__link"
title="{{ name.text }}"
>
{{ render '@heading' name }}
</a>
{{ items }}
</li>
{{/each }}
</ul>
<ul class="quicksearch__list quicksearch__list--below">
{{#each manufacturer }}
<li class="quicksearch__manufacturer">
<a
href="#"
class="link link--invert quicksearch__link"
title="{{ name.text }}"
>
{{ render '@heading' name }}
</a>
{{ items }}
</li>
{{/each }}
</ul>
</div>
</div>
{{ render '@link' more }}
</div>
</div>
{
"results": {
"text": "Results for your request:",
"typed": "Ni"
},
"noresults": {
"visible": false,
"text": "No search results found."
},
"close": {
"tag": "button",
"class": "button--icon quicksearch__close-button",
"icon": {
"id": "close",
"title": "Close",
"iconClass": "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/catalog-grid-item/product-1_320_312.jpg"
},
"name": {
"class": "quicksearch__name quicksearch__name--thin",
"tag": "h3",
"text": "Lorem Ipsum is simply dummy..."
}
},
{
"image": {
"wrapperClass": "quicksearch__product-image-wrapper",
"class": "quicksearch__product-image",
"dataSrc": "/images/catalog-grid-item/product-1_320_312.jpg"
},
"name": {
"class": "quicksearch__name quicksearch__name--thin",
"tag": "h3",
"text": "Lorem Ipsum is simply dummy..."
}
},
{
"image": {
"wrapperClass": "quicksearch__product-image-wrapper",
"class": "quicksearch__product-image",
"dataSrc": "/images/catalog-grid-item/product-1_320_312.jpg"
},
"name": {
"class": "quicksearch__name quicksearch__name--thin",
"tag": "h3",
"text": "Lorem Ipsum is simply dummy..."
}
},
{
"image": {
"wrapperClass": "quicksearch__product-image-wrapper",
"class": "quicksearch__product-image",
"dataSrc": "/images/catalog-grid-item/product-1_320_312.jpg"
},
"name": {
"class": "quicksearch__name quicksearch__name--thin",
"tag": "h3",
"text": "Lorem Ipsum is simply dummy..."
}
}
],
"category": [
{
"name": {
"class": "quicksearch__name",
"tag": "h3",
"text": "Category name"
},
"items": "598 item(s)"
},
{
"name": {
"class": "quicksearch__name",
"tag": "h3",
"text": "Category name"
},
"items": "598 item(s)"
},
{
"name": {
"class": "quicksearch__name",
"tag": "h3",
"text": "Category name"
},
"items": "598 item(s)"
}
],
"manufacturer": [
{
"name": {
"class": "quicksearch__name",
"tag": "h3",
"text": "Manufacturer name"
},
"items": "598 item(s)"
},
{
"name": {
"class": "quicksearch__name",
"tag": "h3",
"text": "Manufacturer name"
},
"items": "598 item(s)"
},
{
"name": {
"class": "quicksearch__name",
"tag": "h3",
"text": "Manufacturer name"
},
"items": "598 item(s)"
},
{
"name": {
"class": "quicksearch__name",
"tag": "h3",
"text": "Manufacturer name"
},
"items": "598 item(s)"
}
],
"more": {
"class": "link--invert quicksearch__more-link",
"href": "#",
"text": "See All"
}
}
$quicksearch__top : calc(100% - #{$spacer} + 1px) !default;
$quicksearch__top\@medium : calc(100% + 1px) !default;
$quicksearch__left : 0 !default;
$quicksearch__left\@medium : auto !default;
$quicksearch__right\@medium : calc(50% - 375px) !default;
$quicksearch__left\@large : -$spacer--medium !default;
$quicksearch__width : 100% !default;
$quicksearch__width\@medium : 688px !default;
$quicksearch__padding : 0 $spacer !default;
$quicksearch__padding\@medium : 0 $spacer--medium !default;
$quicksearch__background : $white !default;
$quicksearch__box-shadow : 0 4px 6px 0 rgba(57, 50, 67, 0.3) !default;
$quicksearch__results-padding : $spacer--medium 0 !default;
$quicksearch__results-margin : 0 !default;
$quicksearch__results-border : 1px solid $gray-light !default;
$quicksearch__empty-margin : $spacer 0 !default;
$quicksearch__typed-font-weight : $font-weight-bold !default;
$quicksearch__close-top : 0 !default;
$quicksearch__close-right : 0 !default;
$quicksearch__close-fill : $color-secondary !default;
$quicksearch__close-background : transparent !default;
$quicksearch__close-border : 0 !default;
$quicksearch__close-size : $spacer--medium !default;
$quicksearch__content-padding : $spacer 0 !default;
$quicksearch__list-margin : 0 !default;
$quicksearch__list-padding : 0 !default;
$quicksearch__list-padding-top--below : $spacer--medium !default;
$quicksearch__category-padding : $spacer 0 !default;
$quicksearch__categories-column-padding : $spacer 0 0 0 !default;
$quicksearch__categories-column-padding\@medium: 0 0 0 $spacer--medium !default;
$quicksearch__product-border : 1px solid $gray-light !default;
$quicksearch__product-border--last : 0 !default;
$quicksearch__product-padding : $spacer 0 !default;
$quicksearch__product-image-size : 72px !default;
$quicksearch__product-image-margin-right : $spacer !default;
$quicksearch__name-margin : 0 !default;
$quicksearch__name-padding : $spacer 0 !default;
$quicksearch__name-color : inherit !default;
$quicksearch__name-font-size : 16px !default;
$quicksearch__name-font-weight : $font-weight-normal !default;
$quicksearch__more-link-padding : $spacer--medium 0 !default;
$quicksearch__more-link-border-top : 1px solid $gray-light !default;
$quicksearch__more-link-text-align : center !default;
$quicksearch__more-link-font-weight : $font-weight-bold !default;
.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;
@include mq($screen-m) {
top: $quicksearch__top\@medium;
left: $quicksearch__left\@medium;
right: $quicksearch__right\@medium;
padding: $quicksearch__padding\@medium;
width: $quicksearch__width\@medium;
}
@include mq($screen-l) {
left: $quicksearch__left\@large;
}
&--visible {
display: block;
}
&__wrapper {
position: relative;
}
&__results {
margin: $quicksearch__results-margin;
padding: $quicksearch__results-padding;
border-bottom: $quicksearch__results-border;
}
&__empty {
margin: $quicksearch__empty-margin;
}
&__typed {
font-weight: $quicksearch__typed-font-weight;
}
&__close-button {
position: absolute;
top: $quicksearch__close-top;
right: $quicksearch__close-right;
border: $quicksearch__close-border;
background-color: $quicksearch__close-background;
&:hover,
&:focus {
border: $quicksearch__close-border;
background-color: $quicksearch__close-background;
}
}
&__close-icon {
width: $quicksearch__close-size;
height: $quicksearch__close-size;
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;
}
&--below {
padding-top: $quicksearch__list-padding-top--below;
}
}
&__categories-column {
flex: 1;
padding: $quicksearch__categories-column-padding;
@include mq($screen-m) {
padding: $quicksearch__categories-column-padding\@medium;
}
}
&__product {
display: flex;
padding: $quicksearch__product-padding;
border-bottom: $quicksearch__product-border;
@include mq($screen-m) {
&:last-child {
border-bottom: $quicksearch__product-border--last;
}
}
}
&__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;
}
&__name {
color: $quicksearch__name-color;
font-size: $quicksearch__name-font-size;
&--thin {
margin: $quicksearch__name-margin;
padding: $quicksearch__name-padding;
font-weight: $quicksearch__name-font-weight;
}
}
&__category,
&__manufacturer {
padding: $quicksearch__category-padding;
}
&__more-link {
display: block;
padding: $quicksearch__more-link-padding;
border-top: $quicksearch__more-link-border-top;
text-align: $quicksearch__more-link-text-align;
font-weight: $quicksearch__more-link-font-weight;
text-decoration: none;
}
}
There are no notes for this item.