<div class="page-wrapper">
<a href="#maincontent" id="skip-nav-top" class="skip-nav">
Skip to content
</a>
<script src="/components/raw/skip-nav/skip-nav.js" defer></script>
<div class="marketing-bar marketing-bar--closed" data-type="marketing-bar">
<div class="container marketing-bar__container">
<div class="marketing-bar__text">
Subscribe and get 10$ for Shopping! Lorem ipsum text in marketing bar.
</div>
<button class="button button--icon button--rotate-icon marketing-bar__close" type="button" aria-label="Close marketing bar">
<svg class="icon button__icon marketing-bar__close-icon" role="img">
<title>Close</title>
<use href="/images/icons-sprite.svg#close"></use>
</svg>
</button>
</div>
</div>
<script src="/components/raw/marketing-bar/marketing-bar.js"></script>
<div class="contact-bar ">
<div class="contact-bar__wrapper">
<div class="contact-bar__container container">
<ul class="list contact-bar__list">
<li class="list-item contact-bar__item">
<a href="#" class="
contact-bar__link
">
<span class="
button__text
contact-bar__text
">
Account
</span>
</a>
</li>
<li class="list-item contact-bar__item">
<a href="#" class="
contact-bar__link
">
<span class="
button__text
contact-bar__text
">
Blog
</span>
</a>
</li>
<li class="list-item contact-bar__item">
<a href="#" class="
contact-bar__link
">
<span class="
button__text
contact-bar__text
">
Contact
</span>
</a>
</li>
</ul>
<ul class="list contact-bar__list contact-bar__list--icons">
<li class="list-item contact-bar__item">
<a href="tel:8002669590" class="
contact-bar__link
">
<span class="
icon
contact-bar__icon
" aria-label="">
<svg class="icon " role="img">
<title>Phone</title>
<use href="/images/icons-sprite.svg#phone"></use>
</svg>
</span>
<span class="
button__text
contact-bar__text
">
Call us for free 800 - 266 - 9590
</span>
</a>
</li>
<li class="contact-bar__item">
<a href="mailto:test@test.com" class="
contact-bar__link
">
<span class="
icon
contact-bar__icon
" aria-label="">
<svg class="icon " role="img">
<title>Email</title>
<use href="/images/icons-sprite.svg#envelope"></use>
</svg>
</span>
<span class="
button__text
contact-bar__text
">
Email Us
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<header class="header ">
<div class="container">
<div class="header__wrapper">
<a class="logo header__logo" href="#" aria-label="Homepage">
<img class="logo__image " src="/images/logo/logo.svg" alt="Alpaca Logo">
</a>
<div class="side-menu ">
<button class="button button--icon modal-trigger side-menu__trigger" type="button" data-modal-trigger="side-menu" aria-label="Open menu">
<svg class="icon side-menu__trigger-icon" role="presentation" focusable="false">
<title>Mobile-menu</title>
<use href="/images/icons-sprite.svg#mobile-menu"></use>
</svg>
</button>
<div role="dialog" aria-hidden="true" id="side-menu" data-modal="side-menu" class="modal modal--tertiary side-menu__modal">
<div role="document" class="modal__container side-menu__container" tabindex="0">
<div class="modal__content side-menu__content">
<div class="modal__middle side-menu__content-middle">
<div id="dropdown-default" class="dropdown-list dropdown-list--with-nested">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<button class="dropdown-list__label " aria-expanded="false" aria-controls="dropdown-1">
dropdown title
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</button>
<div id="dropdown-1" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-1-1">
Item name
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-1-1" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-1-2">
sublist item name
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-1-2" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sub sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sub sublist item name
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-2-2">
Item name
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-2-2" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
Item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
Item name
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-2">
dropdown title
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-2" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
Item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
Item name
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3">
dropdown title
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-3" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3-1">
Item name
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-3-1" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
Item name
</a>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3-2">
Item name
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-3-2" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3-3">
Item name
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-3-3" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3-4">
item name
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-3-4" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<script type="text/javascript">
new DropdownList(document.getElementById('dropdown-default'));
</script>
</div>
<div class="modal__bottom side-menu__content-bottom">
<div class="modal__bottom-actions side-menu__bottom-actions">
<div class="
modal__bottom-action
side-menu__bottom-action
">
<div class="contact-bar contact-bar--vertical">
<div class="contact-bar__wrapper">
<div class="contact-bar__container ">
<ul class="list contact-bar__list">
<li class="list-item contact-bar__item">
<a href="#" class="
contact-bar__link
">
<span class="
button__text
contact-bar__text
">
Account
</span>
</a>
</li>
<li class="list-item contact-bar__item">
<a href="#" class="
contact-bar__link
">
<span class="
button__text
contact-bar__text
">
Blog
</span>
</a>
</li>
<li class="list-item contact-bar__item">
<a href="#" class="
contact-bar__link
">
<span class="
button__text
contact-bar__text
">
Contact
</span>
</a>
</li>
</ul>
<ul class="list contact-bar__list contact-bar__list--icons">
<li class="list-item contact-bar__item">
<a href="tel:8002669590" class="
contact-bar__link
">
<span class="
icon
contact-bar__icon
" aria-label="">
<svg class="icon " role="img">
<title>Phone</title>
<use href="/images/icons-sprite.svg#phone"></use>
</svg>
</span>
<span class="
button__text
contact-bar__text
">
Call us for free 800 - 266 - 9590
</span>
</a>
</li>
<li class="contact-bar__item">
<a href="mailto:test@test.com" class="
contact-bar__link
">
<span class="
icon
contact-bar__icon
" aria-label="">
<svg class="icon " role="img">
<title>Email</title>
<use href="/images/icons-sprite.svg#envelope"></use>
</svg>
</span>
<span class="
button__text
contact-bar__text
">
Email Us
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="button button--icon button--rotate-icon modal__close-button side-menu__close-button" type="button" aria-label="click to close the modal">
<svg class="icon button__icon modal__close-button-icon" role="presentation" focusable="false">
<title>Close</title>
<use href="/images/icons-sprite.svg#close"></use>
</svg>
</button>
</div>
</div>
<script type="text/javascript">
new Modal(document.querySelector('[data-modal-trigger="side-menu"]'));
</script>
</div>
<div class="header__brief-info">
<div class="brief-info brief-info--link">
<ul class="list brief-info__items-container">
<li class="brief-info__list-item list__item">
<a class="
brief-info__link
">
<span class="
brief-info__icon-wrapper
">
<svg class="icon brief-info__icon" role="presentation" focusable="false">
<title>Free shipping icon</title>
<use href="/images/icons-sprite.svg#delivery-truck"></use>
</svg>
</span>
<span class="brief-info__title ">
Free Shipping
</span>
<span class="brief-info__subtitle
">
On Hundreds of Products
</span>
</a>
</li>
</ul>
</div>
</div>
<div class="header__buttons">
<a class="
header-button
button
button--icon
button--icon-light
button--icon-fill
" href="#" aria-label="Wishlist">
<svg class="icon header-button__icon" role="presentation" focusable="false">
<title>Heart</title>
<use href="/images/icons-sprite.svg#heart"></use>
</svg>
</a>
<div class="header__minicart">
<button type="button" class="
header-button
button
button--icon
button--icon-light
modal-trigger
" aria-label="Shopping cart dropdown trigger" data-modal-trigger="modal-minicart">
<svg class="icon header-button__icon" role="presentation" focusable="false">
<title>Shopping cart</title>
<use href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>
<span class="header-button__counter">
<span class="header-button__counter-dot"></span>
</span>
</button>
</div>
<div role="dialog" aria-hidden="true" id="modal-minicart" data-modal="modal-minicart" class="modal modal--secondary" aria-labelledby="minicart-title" aria-describedby="minicart-products">
<div role="document" class="modal__container " tabindex="0">
<div class="modal__content modal__content--block">
<div class="minicart-content ">
<div class="minicart-content__top" id="minicart-title">
<h2 class="minicart-content__heading">
Shopping cart
</h2>
<div class="minicart-content__counter">
2 items
</div>
</div>
<div class="minicart-content__middle" id="minicart-products">
<div class="minicart-content__products-list">
<div class="minicart-product">
<div class="minicart-product__image">
<div class="lazyload-wrapper ">
<img class="
image
lazyload
" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/product/minicart-product-64x96.jpeg" alt="product name goes here">
</div>
</div>
<div class="minicart-product__data">
<div class="minicart-product__info">
<div class="minicart-product__name-wrapper">
<h3 class="minicart-product__name">
<a class="
link
link--invert
minicart-product__link
" href="#">
Some product name
</a>
</h3>
<div class="minicart-product__price margin-bottom-xs">
<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>
</div>
<dl class="list list--description minicart-product__attributes-list" title="Alpaca description list">
<dt class="list__label">
Lorem ipsum
</dt>
<dd class="list__value">
Lorem ipsum Value
</dd>
<dt class="list__label">
Lorem ipsum
</dt>
<dd class="list__value">
Lorem ipsum Value
</dd>
</dl>
</div>
<div class="minicart-product__bottom">
<div class="minicart-product__qty">
</div>
<div class="minicart-product__actions">
<a class="button button--icon " href="#" aria-label="edit product in your shopping cart">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Edit pencil</title>
<use href="/images/icons-sprite.svg#edit"></use>
</svg>
</a>
<a class="button button--icon " href="#" aria-label="remove this product from your shopping cart">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Trash bin</title>
<use href="/images/icons-sprite.svg#remove"></use>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="minicart-product">
<div class="minicart-product__image">
<div class="lazyload-wrapper ">
<img class="
image
lazyload
" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/product/minicart-product-64x96.jpeg" alt="product name goes here">
</div>
</div>
<div class="minicart-product__data">
<div class="minicart-product__info">
<div class="minicart-product__name-wrapper">
<h3 class="minicart-product__name">
<a class="
link
link--invert
minicart-product__link
" href="#">
Some product 2 name
</a>
</h3>
<div class="minicart-product__price margin-bottom-xs">
<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>
</div>
<dl class="list list--description minicart-product__attributes-list" title="Alpaca description list">
<dt class="list__label">
Lorem ipsum
</dt>
<dd class="list__value">
Lorem ipsum Value
</dd>
<dt class="list__label">
Lorem ipsum
</dt>
<dd class="list__value">
Lorem ipsum Value
</dd>
</dl>
</div>
<div class="minicart-product__bottom">
<div class="minicart-product__qty">
</div>
<div class="minicart-product__actions">
<a class="button button--icon " href="#" aria-label="edit product in your shopping cart">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Edit pencil</title>
<use href="/images/icons-sprite.svg#edit"></use>
</svg>
</a>
<a class="button button--icon " href="#" aria-label="remove this product from your shopping cart">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Trash bin</title>
<use href="/images/icons-sprite.svg#remove"></use>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="minicart-content__bottom">
<div class="minicart-content__summary">
<div class="minicart-content__summary-label">
Cart Subtotal
</div>
<div class="minicart-content__summary-value">
$ 200.00
</div>
</div>
<div class="minicart-content__actions">
<a href="/edit" class="
button
button--secondary
minicart-content__edit
minicart-content__action-button
">
View and edit cart
</a>
<button class="button minicart-content__action-button minicart-content__checkout" type="button">
Go to Checkout
</button>
</div>
</div>
</div>
</div>
<button class="button button--icon button--rotate-icon modal__close-button" type="button" aria-label="click to close the modal">
<svg class="icon button__icon modal__close-button-icon" role="presentation" focusable="false">
<title>Close</title>
<use href="/images/icons-sprite.svg#close"></use>
</svg>
</button>
</div>
</div>
<script type="text/javascript">
new Modal(document.querySelector('[data-modal-trigger="modal-minicart"]'));
</script>
</div>
<div class="header__search-wrapper">
<form class="search-form">
<div class="search-form__wrapper">
<div class="input search-form__input-wrapper margin-0">
<label class="
label
input__label
label--hidden
" for="search">
Search products
</label>
<input class="input__field search-form__input" id="search" name="search" type="search" placeholder="Search entire store here...">
</div>
<button class="button button--icon button--icon search-form__button" type="button" aria-label="Search">
<svg class="icon button__icon" role="presentation" focusable="false">
<title>Search</title>
<use href="/images/icons-sprite.svg#search"></use>
</svg>
</button>
</div>
</form>
</div>
</div>
</div>
</header>
<div class="mega-menu ">
<ul class="mega-menu__list container ">
<li class="mega-menu__item mega-menu__item--parent mega-menu__item--secondary">
<a href="/new-in" class="mega-menu__link">
New In
</a>
<ul class="list mega-menu__inner-list mega-menu__inner-list--level1">
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
View all
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Clothing
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Shoes
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Accessories
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Face + Body
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Living + Gifts
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Back in stock
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Trending now
</a>
</li>
</ul>
</li>
<li class="mega-menu__item mega-menu__item--parent mega-menu__item--rows">
<a href="/clothing" class="mega-menu__link">
Clothing
</a>
<ul class="list mega-menu__inner-list mega-menu__inner-list--level1">
<li class="list__item mega-menu__inner-item mega-menu__inner-item--inline mega-menu__column-hidden">
<a href="" class="
link
mega-menu__inner-link
">
Row one
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
columns one item
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
columns one item 2
</a>
</li>
</ul>
</li>
<li class="list__item mega-menu__inner-item mega-menu__column-hidden mega-menu__inner-item--images">
<a href="" class="
link
mega-menu__inner-link
">
Row two
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
<div class="lazyload-wrapper ">
<img class="
image
lazyload
" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/product/cart-product-160_160.jpg" alt="brand name alt text">
</div>
Summer
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
<div class="lazyload-wrapper ">
<img class="
image
lazyload
" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/product/cart-product-160_160.jpg" alt="brand name alt text">
</div>
Spring
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
<div class="lazyload-wrapper ">
<img class="
image
lazyload
" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/product/cart-product-160_160.jpg" alt="brand name alt text">
</div>
Autumn
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
<div class="lazyload-wrapper ">
<img class="
image
lazyload
" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/product/cart-product-160_160.jpg" alt="brand name alt text">
</div>
Winter
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
<div class="lazyload-wrapper ">
<img class="
image
lazyload
" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/product/cart-product-160_160.jpg" alt="brand name alt text">
</div>
View all
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
<div class="lazyload-wrapper ">
<img class="
image
lazyload
" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/product/cart-product-160_160.jpg" alt="brand name alt text">
</div>
lorem ipsum
</a>
</li>
</ul>
</li>
<li class="list__item mega-menu__inner-item mega-menu__column-hidden mega-menu__inner-item--columns">
<a href="" class="
link
mega-menu__inner-link
">
Row three
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item mega-menu__column-hidden">
<a href="" class="
link
mega-menu__inner-link
">
row 3 c 1
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item mega-menu__inner-item--children">
<a href="" class="
link
mega-menu__inner-link
">
Men
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Elegant
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Casual
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Active
</a>
</li>
</ul>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Wallets
</a>
</li>
</ul>
</li>
<li class="list__item mega-menu__inner-item mega-menu__column-hidden">
<a href="" class="
link
mega-menu__inner-link
">
row 3 column 2
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item mega-menu__inner-item--children">
<a href="" class="
link
mega-menu__inner-link
">
Women
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Elegant
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Casual
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Active
</a>
</li>
</ul>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Bags
</a>
</li>
</ul>
</li>
<li class="list__item mega-menu__inner-item mega-menu__column-hidden">
<a href="" class="
link
mega-menu__inner-link
">
row 3 column 3
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item mega-menu__inner-item--children">
<a href="" class="
link
mega-menu__inner-link
">
Kids
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Pijamas
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
School Days
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--children">
<a href="" class="
link
mega-menu__inner-link
">
Kids Fance Dress
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Hats
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Special Ocassions
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="list__item mega-menu__inner-item mega-menu__column-hidden">
<a href="" class="
link
mega-menu__inner-link
">
row 3 column 4
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Jackets
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Shirts
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Dresses
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Trousers
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Hats
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="mega-menu__item ">
<a href="/shoes" class="mega-menu__link">
Shoes
</a>
</li>
<li class="mega-menu__item ">
<a href="/furniture" class="mega-menu__link">
Furniture
</a>
</li>
<li class="mega-menu__item ">
<a href="/accessories" class="mega-menu__link">
Accessories
</a>
</li>
<li class="mega-menu__item mega-menu__item--parent mega-menu__item--rows">
<a href="/activewear" class="mega-menu__link">
Activewear
</a>
<ul class="list mega-menu__inner-list mega-menu__inner-list--level1">
<li class="list__item mega-menu__inner-item mega-menu__inner-item--columns mega-menu__column-hidden">
<a href="" class="
link
mega-menu__inner-link
">
Row one
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item mega-menu__column-hidden">
<a href="" class="
link
mega-menu__inner-link
">
row 3 c 1
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item mega-menu__inner-item--children">
<a href="" class="
link
mega-menu__inner-link
">
Men
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Elegant
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Casual
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Active
</a>
</li>
</ul>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Wallets
</a>
</li>
</ul>
</li>
<li class="list__item mega-menu__inner-item mega-menu__column-hidden">
<a href="" class="
link
mega-menu__inner-link
">
row 3 column 2
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item mega-menu__inner-item--children">
<a href="" class="
link
mega-menu__inner-link
">
Women
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Elegant
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Casual
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Active
</a>
</li>
</ul>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Bags
</a>
</li>
</ul>
</li>
<li class="list__item mega-menu__inner-item mega-menu__column-hidden">
<a href="" class="
link
mega-menu__inner-link
">
row 3 column 3
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item mega-menu__inner-item--children">
<a href="" class="
link
mega-menu__inner-link
">
Kids
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Pijamas
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
School Days
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Fance Dress
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Special Occasion
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="list__item mega-menu__inner-item mega-menu__column-hidden">
<a href="" class="
link
mega-menu__inner-link
">
row 3 column 4
</a>
<ul class="list mega-menu__inner-list">
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Jackets
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Shirts
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Dresses
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Trousers
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Hats
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="mega-menu__item mega-menu__item--parent mega-menu__item--secondary">
<a href="/brands" class="mega-menu__link">
Brands Brands
</a>
<ul class="list mega-menu__inner-list mega-menu__inner-list--level1">
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
View all
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Clothing
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Shoes
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Accessories
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Face + Body
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Living + Gifts
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Back in stock
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Trending now
</a>
</li>
</ul>
</li>
</ul>
</div>
<script src="/components/raw/mega-menu/mega-menu.js"></script>
<main id="maincontent" class="
dashboard
container
margin-vc-m
">
<nav class="breadcrumbs " aria-label="" role="navigation">
<ol class="breadcrumbs__list ">
<li class="breadcrumbs__item">
<a href="#" class="breadcrumbs__link">
Home
</a>
</li>
<li class="breadcrumbs__item" aria-current="true">
My orders
</li>
</ol>
</nav>
<div class="row">
<div class="
col-xs-12
col-lg-3
dashboard__sidebar margin-top-sl
">
<div class="dashboard-nav">
<div class="dashboard-nav__mobile">
Account Dashboard
</div>
<div class="dashboard-nav__content">
<ul class="list ">
<li class="list__item dashboard-nav__item current">
<a href="#" class="
link
dashboard-nav__link
">
Account Dashboard
</a>
</li>
<li class="list__item dashboard-nav__item">
<a href="#" class="
link
dashboard-nav__link
">
Account Information
</a>
</li>
<li class="list__item dashboard-nav__item">
<a href="#" class="
link
dashboard-nav__link
">
Address Book
</a>
</li>
<li class="list__item dashboard-nav__item">
<a href="#" class="
link
dashboard-nav__link
">
Downloadable Products
</a>
</li>
<li class="list__item dashboard-nav__item ">
<a href="#" class="
link
dashboard-nav__link
">
My Orders
</a>
</li>
<li class="list__item dashboard-nav__item ">
<a href="#" class="
link
dashboard-nav__link
">
My Credit Cards
</a>
</li>
<li class="list__item dashboard-nav__item">
<a href="#" class="
link
dashboard-nav__link
">
Newsletter Subscriptions
</a>
</li>
<li class="list__item dashboard-nav__item">
<a href="#" class="
link
dashboard-nav__link
">
Billing Agreements
</a>
</li>
<li class="list__item dashboard-nav__item">
<a href="#" class="
link
dashboard-nav__link
">
My Product Reviews
</a>
</li>
<li class="list__item dashboard-nav__item ">
<a href="#" class="
link
dashboard-nav__link
">
My Wishlist
</a>
</li>
</ul>
</div>
<div class="dashboard-nav__actions">
<a class="button button--secondary dashboard-nav__button" title="Sign out">
Sign out
</a>
</div>
<div class="dashboard-nav__section margin-top-xl">
<div class="sidebar-block">
<div class="sidebar-block__heading ">
<h2 class="sidebar-block__title dashboard-nav__title">
Compare Products
</h2>
<span class="sidebar-block__counter">
3 items
</span>
</div>
<ol class="list sidebar-block__list">
<li class="sidebar-block__item">
<button class="button button--icon sidebar-block__remove margin-right-xs" aria-label="Remove product from compare" title="Remove product from compare">
<svg class="icon icon sidebar-block__remove-icon" role="img">
<title>Close</title>
<use href="/images/icons-sprite.svg#close"></use>
</svg>
</button>
<a class="link sidebar-block__link" href="#" title="Chaz Kangeroo Hoodie">
Chaz Kangeroo Hoodie
</a>
</li>
<li class="sidebar-block__item">
<button class="button button--icon sidebar-block__remove margin-right-xs" aria-label="Remove product from compare" title="Remove product from compare">
<svg class="icon icon sidebar-block__remove-icon" role="img">
<title>Close</title>
<use href="/images/icons-sprite.svg#close"></use>
</svg>
</button>
<a class="link sidebar-block__link" href="#" title="Bruno Compete Hoodie">
Bruno Compete Hoodie
</a>
</li>
<li class="sidebar-block__item">
<button class="button button--icon sidebar-block__remove margin-right-xs" aria-label="Remove product from compare" title="Remove product from compare">
<svg class="icon icon sidebar-block__remove-icon" role="img">
<title>Close</title>
<use href="/images/icons-sprite.svg#close"></use>
</svg>
</button>
<a class="link sidebar-block__link" href="#" title="Hero Hoodie">
Hero Hoodie
</a>
</li>
</ol>
<div class="sidebar-block__actions">
<a class="link sidebar-block__action" href="#" title="Compare">
Compare
</a>
<button class="button button--link sidebar-block__action" type="button">
Clear all
</button>
</div>
</div>
</div>
<div class="dashboard-nav__section">
<div class="sidebar-block">
<div class="sidebar-block__heading ">
<h2 class="sidebar-block__title dashboard-nav__title">
My Wish List
</h2>
<span class="sidebar-block__counter">
3 items
</span>
</div>
<ol class="list sidebar-block__list">
<li class="margin-bottom-m">
<div class="sidebar-block__item">
<div class="sidebar-block__product-image">
<a href="#">
<div class="lazyload-wrapper ">
<img class="
image
lazyload
" src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/banner/banner-480_480.png" alt="image alt text">
</div>
</a>
</div>
<div class="sidebar-block__product-info">
<a href="#" class="link sidebar-block__link">
Chaz Kangeroo Hoodie
</a>
<div class="price ">
<span class="price__value ">
$
159.95
</span>
</div>
</div>
</div>
<div class="sidebar-block__actions">
<button class="button button--link sidebar-block__action" type="button">
Add to Cart
</button>
<button class="button button--link sidebar-block__action" type="button">
Remove this item
</button>
</div>
</li>
<li class="margin-bottom-m">
<div class="sidebar-block__item">
<div class="sidebar-block__product-image">
<a href="#">
<div class="lazyload-wrapper ">
<img class="
image
lazyload
" src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/banner/banner-480_480.png" alt="image alt text">
</div>
</a>
</div>
<div class="sidebar-block__product-info">
<a href="#" class="link sidebar-block__link">
Bruno Compete Hoodie
</a>
<div class="price ">
<span class="price__value ">
$
159.95
</span>
</div>
</div>
</div>
<div class="sidebar-block__actions">
<button class="button button--link sidebar-block__action" type="button">
Add to Cart
</button>
<button class="button button--link sidebar-block__action" type="button">
Remove this item
</button>
</div>
</li>
<li class="margin-bottom-m">
<div class="sidebar-block__item">
<div class="sidebar-block__product-image">
<a href="#">
<div class="lazyload-wrapper ">
<img class="
image
lazyload
" src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/banner/banner-480_480.png" alt="image alt text">
</div>
</a>
</div>
<div class="sidebar-block__product-info">
<a href="#" class="link sidebar-block__link">
Hero Hoodie
</a>
<div class="price ">
<span class="price__value ">
$
159.95
</span>
</div>
</div>
</div>
<div class="sidebar-block__actions">
<button class="button button--link sidebar-block__action" type="button">
Add to Cart
</button>
<button class="button button--link sidebar-block__action" type="button">
Remove this item
</button>
</div>
</li>
</ol>
<a class="button button--secondary button--fluid" href="#">
Go to Wish List
</a>
</div>
</div>
</div>
<script src="/components/raw/dashboard-nav/../dashboard-nav/nav.js"></script>
</div>
<div class="
col-xs-12
col-lg-9
dashboard__content margin-top-sl
">
<h1 class="heading dashboard__content-heading dashboard__content-heading--with-status margin-bottom-xs">
ORDER # 000000011
</h1>
<span class="dashboard__status margin-bottom-xs">
Pending
</span>
<div class="dashboard__order-date margin-bottom-sm">
<span>
Created:
</span>
<date>
Apr 7, 2020
</date>
</div>
<div class="actions-group margin-bottom-l">
<div class="actions-group__handler">
<a class="link actions-group__link" href="#" title="Reorder">
Reorder
</a>
<a class="link actions-group__link" href="#" title="Return">
Return
</a>
</div>
<div class="actions-group__handler">
<a class="link actions-group__link" href="#" title="Print Order">
Print Order
</a>
</div>
</div>
<div class="dashboard-table ">
<div class="dashboard-table__header">
<h2 class="dashboard-table__title">
Items Ordered
</h2>
</div>
<div class="dashboard-table__content">
<table class="table " tabindex="0" role="table">
<thead>
<tr>
<th class="">
Product Name
</th>
<th class="">
SKU
</th>
<th class="">
Price
</th>
<th class="">
Qty
</th>
<th class="">
Subtotal
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="" data-th="Product Name:">
Stellar Solar Jacket, Color RED, Size L
</td>
<td class="" data-th="SKU:">
WJ01-L-RED
</td>
<td class="" data-th="Price:">
$ 55.00
</td>
<td class="" data-th="Qty:">
Ordered: 1, Shipped: 1
</td>
<td class="" data-th="Subtotal:">
Subtotal: $ 55.00
</td>
</tr>
<tr>
<td class="" data-th="Prroduct Name:">
Example product
</td>
<td class="" data-th="SKU:">
233-LV04
</td>
<td class="" data-th="Price:">
$ 5.00
</td>
<td class="" data-th="Qty:">
Ordered: 1
</td>
<td class="" data-th="Subtotal:">
$ 5.00
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="" colspan="4">
Subtotal
</td>
<td class="">
$ 60.00
</td>
</tr>
<tr>
<td class="" colspan="4">
Shipping & Handling
</td>
<td class="">
$ 0.00
</td>
</tr>
<tr>
<td class="" colspan="4">
Discount
</td>
<td class="">
$ 0.00
</td>
</tr>
<tr>
<td class="" colspan="4">
Grand Total
</td>
<td class="">
$ 60.00
</td>
</tr>
</tfoot>
</table>
</div>
</div>
<div class="dashboard-table ">
<div class="dashboard-table__header">
<h2 class="dashboard-table__title">
Invoices
</h2>
</div>
<div class="dashboard-table__content">
<table class="table " tabindex="0" role="table">
<thead>
<tr>
<th class="">
Product Name
</th>
<th class="">
SKU
</th>
<th class="">
Price
</th>
<th class="">
Qty Invoiced
</th>
<th class="">
Subtotal
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="" data-th="Product Name:">
Stellar Solar Jacket, Color RED, Size L
</td>
<td class="" data-th="SKU:">
WJ01-L-RED
</td>
<td class="" data-th="Price:">
$ 55.00
</td>
<td class="" data-th="Qty Invoiced:">
1
</td>
<td class="" data-th="Subtotal:">
$ 55.00
</td>
</tr>
<tr>
<td class="" data-th="Product Name:">
Example product
</td>
<td class="" data-th="SKU:">
233-LV04
</td>
<td class="" data-th="Price:">
$ 5.00
</td>
<td class="" data-th="Qty Invoiced:">
1
</td>
<td class="" data-th="Subtotal:">
$ 5.00
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="" colspan="4">
Subtotal
</td>
<td class="">
$ 60.00
</td>
</tr>
<tr>
<td class="" colspan="4">
Discount
</td>
<td class="">
$ 0.00
</td>
</tr>
<tr>
<td class="" colspan="4">
Grand Total
</td>
<td class="">
$ 60.00
</td>
</tr>
</tfoot>
</table>
</div>
</div>
<div class="dashboard-table ">
<div class="dashboard-table__header">
<h2 class="dashboard-table__title">
Order Shipments
</h2>
</div>
<div class="dashboard-table__content">
<table class="table " tabindex="0" role="table">
<thead>
<tr>
<th class="">
Product Name
</th>
<th class="">
SKU
</th>
<th class="">
Qty Invoiced
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="" data-th="Product Name:">
Stellar Solar Jacket, Color RED, Size L
</td>
<td class="" data-th="SKU:">
WJ01-L-RED
</td>
<td class="" data-th="Qty Invoiced:">
1
</td>
</tr>
<tr>
<td class="" data-th="Product Name:">
Example product
</td>
<td class="" data-th="SKU:">
233-LV04
</td>
<td class="" data-th="Qty Invoiced:">
1
</td>
</tr>
</tbody>
</table>
</div>
</div>
<h2 class="dashboard__title">
Order Information
</h2>
<div class="row">
<div class="information col-sm-3">
<h3 class="dashboard__subtitle margin-bottom-l">
Shipping Address
</h3>
<p class="information__text">
Lorem Ipsum Shipping Address example 1
</p>
</div>
<div class="information col-sm-3">
<h3 class="dashboard__subtitle margin-bottom-l">
Shipping Method
</h3>
<p class="information__text">
United Parcel Service - Ground
</p>
</div>
<div class="information col-sm-3">
<h3 class="dashboard__subtitle margin-bottom-l">
Billing Address
</h3>
<p class="information__text">
Lorem Ipsum Billing Address example 1
</p>
</div>
<div class="information col-sm-3">
<h3 class="dashboard__subtitle margin-bottom-l">
Payment Method
</h3>
<p class="information__text">
Check / Money order
</p>
</div>
</div>
<div class="actions-group margin-top-l">
<div class="actions-group__handler">
<a class="link actions-group__link" href="#" title="Back to My Orders">
Back to My Orders
</a>
</div>
</div>
</div>
</div>
</main>
</div>
<footer class="footer margin-top-xl">
<div class="footer__handler container">
<button class="button button--icon footer__scroll-top" type="button" data-focus-top="skip-nav-top" aria-label="scroll to top">
<svg class="icon " role="presentation" focusable="false">
<title>Scroll to top</title>
<use href="/images/icons-sprite.svg#arrow-up"></use>
</svg>
</button>
<section class="footer__newsletter">
<div class="newsletter ">
<div class="newsletter__heading ">
<h2 class="newsletter__title">
JOIN OUR EMAIL LIST
</h2>
<p class="newsletter__subtitle">
Sign up for savings and product announcements
</p>
</div>
<form class="newsletter__form">
<div class="newsletter__controls">
<div class="input newsletter__input">
<label class="
label
input__label
label--hidden
newsletter__label
" for="newsletterEmail">
Email for newsletter subscription
</label>
<input class="input__field newsletter__field" id="newsletterEmail" name="newsletterEamil" type="" placeholder="Enter your email">
</div>
<button class="button button--secondary newsletter__button">
Sign Up
</button>
</div>
<div class="newsletter__agreements">
<div class="checkbox newsletter__checkbox">
<input type="checkbox" id="newsletter" name="" class="checkbox__field ">
<svg class="
checkbox__icon
checkbox__icon--checked
" role="presentation">
<use href="/images/icons-sprite.svg#checked"></use>
</svg>
<svg class="
checkbox__icon
checkbox__icon--unchecked
" role="presentation">
<use href="/images/icons-sprite.svg#unchecked"></use>
</svg>
<label for="newsletter" class="checkbox__label ">
<span class="checkbox__text">
I agree to <a href="#" title="Terms and conditions">Terms & Conditions</a> and I am happy to receive your newsletter with all your promotions.
</span>
</label>
</div>
</div>
</form>
</div>
</section>
<div class="footer__social-handler ">
<h3 class="footer__social-list-title">
Let's get social!
</h3>
<ul class="list list--with-icon list--horizontal footer__social-list">
<li class="list__item ">
<a href="#" class="list__icon-link button button--icon button--icon-border" aria-label="Go to Our Facebook Page">
<svg class="icon footer__social-icon" role="img">
<title>Facebook logo</title>
<use href="/images/icons-sprite.svg#facebook"></use>
</svg>
</a>
</li>
<li class="list__item ">
<a href="#" class="list__icon-link button button--icon button--icon-border" aria-label="Check Our on Twitter">
<svg class="icon footer__social-icon" role="img">
<title>Twitter logo</title>
<use href="/images/icons-sprite.svg#twitter"></use>
</svg>
</a>
</li>
</ul>
</div>
<section class="footer__links">
<div id="dropdown-footer" class="dropdown-list dropdown-list--with-breakpoint">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<button class="dropdown-list__label " aria-expanded="false" aria-controls="dropdown-customers" aria-controls="dropdown-customers">
Customers
<svg class="icon dropdown-list__icon dropdown-list__icon--inner" role="presentation" focusable="false">
<title>Arrow down</title>
<use href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</button>
<div id="dropdown-customers" class="dropdown-list__content " aria-hidden="true">
<ul class="
list
list__columns
footer__links-list
">
<li class="
list__item
list__column
list__column--hidden
">
<a href="" class="
link
">
Column 1
</a>
<ul class="list">
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Sign in">
Login to My Account
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Sign up">
Create an Account
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="My Orders">
My Orders
</a>
</li>
</ul>
</li>
<li class="
list__item
list__column
list__column--hidden
">
<a href="" class="
link
">
Column 2
</a>
<ul class="list">
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="My Cart">
My Cart
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Checkout">
Checkout
</a>
</li>
</ul>
</li>
</ul>
</div>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<button class="dropdown-list__label " aria-expanded="false" aria-controls="dropdown-information" aria-controls="dropdown-information">
Information
<svg class="icon dropdown-list__icon dropdown-list__icon--inner" role="img">
<title>Arrow down</title>
<use href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</button>
<div id="dropdown-information" class="dropdown-list__content " aria-hidden="true">
<ul class="
list
list__columns
footer__links-list
">
<li class="
list__item
list__column
list__column--hidden
">
<a href="" class="
link
">
Column 1
</a>
<ul class="list">
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Hours">
Hours
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="About Us">
About Us
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Contact Us">
Contact Us
</a>
</li>
</ul>
</li>
<li class="
list__item
list__column
list__column--hidden
">
<a href="" class="
link
">
Column 2
</a>
<ul class="list">
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Job Openings">
Job Openings
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Returns">
Returns
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Shipping">
Shipping
</a>
</li>
</ul>
</li>
<li class="
list__item
list__column
list__column--hidden
">
<a href="" class="
link
">
Column 3
</a>
<ul class="list">
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Privacy Policy">
Privacy Policy
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Terms & Conditions">
Terms & Conditions
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Site Map">
Site Map
</a>
</li>
</ul>
</li>
<li class="
list__item
list__column
list__column--hidden
">
<a href="" class="
link
">
Column 4
</a>
<ul class="list">
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Reviews">
Reviews
</a>
</li>
<li class="
list__item
list__column-item
">
<a href="#" class="
link
footer__link
" title="Email Us!">
Email Us!
</a>
</li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
</div>
<script type="text/javascript">
new DropdownList(document.getElementById('dropdown-footer'));
</script>
</section>
</div>
<section class="footer__bottom-bar ">
<div class="footer__bottom-bar-handler container">
<div class="footer__copyright">
<small>
Copyright © 2019 Alpaca
</small>
</div>
<ul class="
footer__payments-list
list
list--horizontal
">
<li class="list__item">
<svg class="icon footer__payments-list-icon footer__payments-list-icon--visa" role="img">
<title>Visa</title>
<use href="/images/icons-sprite.svg#visa"></use>
</svg>
</li>
<li class="list__item">
<svg class="icon footer__payments-list-icon" role="img">
<title>Master Card</title>
<use href="/images/icons-sprite.svg#master-card"></use>
</svg>
</li>
<li class="list__item">
<svg class="icon footer__payments-list-icon" role="img">
<title>Discover</title>
<use href="/images/icons-sprite.svg#discover"></use>
</svg>
</li>
<li class="list__item">
<svg class="icon footer__payments-list-icon" role="img">
<title>American Express</title>
<use href="/images/icons-sprite.svg#american-express"></use>
</svg>
</li>
<li class="list__item">
<svg class="icon footer__payments-list-icon footer__payments-list-icon--paypal" role="img">
<title>PayPal</title>
<use href="/images/icons-sprite.svg#paypal"></use>
</svg>
</li>
</ul>
<div class="footer__switchers">
<div id="language-dropdown" class="dropdown-list dropdown-list--detailed-content footer__dropdown-switcher">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-detailed-content1">
German
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-detailed-content1" class="dropdown-list__content " aria-hidden="true">
<ul class="list ">
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
</ul>
</div>
</li>
</ul>
</div>
<script type="text/javascript">
new DropdownList(document.getElementById('language-dropdown'));
</script>
<div id="currency-dropdown" class="dropdown-list dropdown-list--detailed-content footer__dropdown-switcher margin-right-xs">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-detailed-content2">
USD - US Dollar
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-detailed-content2" class="dropdown-list__content " aria-hidden="true">
<ul class="list ">
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
</ul>
</div>
</li>
</ul>
</div>
<script type="text/javascript">
new DropdownList(document.getElementById('currency-dropdown'));
</script>
</div>
</div>
</section>
<div class="cookie-message cookie-message" data-type="cookie" tabindex="0" aria-label="Cookie policy message">
<div class="cookie-message__container">
<p class="cookie-message__text">
<a href="#" class="link--invert">Example link</a> Find out more about their purpose and settings in your browser. By browsing the site you are agreeing to use cookies according to your browser settings.
</p>
<button class="
button
button--icon
cookie-message__close
cookie-message__button
button--rotate-icon
" type="button" aria-label="Close cookie message">
<svg class="icon button__icon cookie-message__button-icon" role="presentation" focusable="false">
<title>Close</title>
<use href="/images/icons-sprite.svg#close"></use>
</svg>
</button>
</div>
</div>
<script src="/components/raw/cookie-message/cookie-message.js"></script>
</footer>
<script src="/components/raw/footer/footer.js"></script>
<div class="page-wrapper">
{{ render '@header' }}
<main
id="maincontent"
class="
dashboard
container
{{ class }}
"
>
{{ render '@breadcrumbs' breadcrumbs }}
<div class="row">
<div
class="
col-xs-12
col-lg-3
{{ sidebarClass }}
"
>
{{ render '@dashboard-nav' }}
</div>
<div
class="
col-xs-12
col-lg-9
{{ contentClass }}
"
>
{{ render '@heading' heading }}
<span class="dashboard__status {{ orderStatusClass }}">
{{ orderStatus }}
</span>
<div class="dashboard__order-date {{ orderDateClass }}">
<span>
{{ orderDateTitle }}
</span>
<date>
{{ orderDate }}
</date>
</div>
{{ render '@actions-group' orderActions }}
{{ render '@dashboard-table' itemsOrdered }}
{{ render '@dashboard-table' invoice }}
{{ render '@dashboard-table' orderShipment }}
{{ render '@heading' orderInfoTitle }}
<div class="row">
{{ render '@information' orderInfo }}
</div>
{{ render '@actions-group' action }}
</div>
</div>
</main>
</div>
{{ render '@footer' }}
{
"class": "margin-vc-m",
"sidebarClass": "dashboard__sidebar margin-top-sl",
"contentClass": "dashboard__content margin-top-sl",
"breadcrumbs": {
"categories": [
{
"name": "Home",
"href": "#",
"linkClass": "breadcrumbs__link"
},
{
"name": "My orders",
"href": "#",
"linkClass": "breadcrumbs__link"
}
]
},
"heading": {
"tag": "h1",
"class": "heading dashboard__content-heading dashboard__content-heading--with-status margin-bottom-xs",
"text": "ORDER # 000000011"
},
"action": {
"class": "margin-top-l",
"sides": [
{
"action": [
{
"link": {
"title": "Back to My Orders",
"text": "Back to My Orders",
"class": "actions-group__link"
}
}
]
}
]
},
"toolbar": {
"class": "margin-top-xl",
"showMode": false,
"showSorter": false,
"showAmount": true,
"showLimit": true,
"showPager": true,
"amount": {
"class": "toolbar__amount--visible"
},
"limiter": {
"class": "toolbar__limiter--relative"
}
},
"orderStatus": "Pending",
"orderStatusClass": "margin-bottom-xs",
"orderDateTitle": "Created:",
"orderDate": "Apr 7, 2020",
"orderDateClass": "margin-bottom-sm",
"orderActions": {
"class": "margin-bottom-l",
"sides": [
{
"action": [
{
"link": {
"title": "Reorder",
"text": "Reorder",
"class": "actions-group__link"
}
},
{
"link": {
"title": "Return",
"text": "Return",
"class": "actions-group__link"
}
}
]
},
{
"action": [
{
"link": {
"title": "Print Order",
"text": "Print Order",
"class": "actions-group__link"
}
}
]
}
]
},
"itemsOrdered": {
"title": {
"tag": "h2",
"class": "dashboard-table__title",
"text": "Items Ordered"
},
"table": {
"mainTags": [
{
"mainTag": "thead",
"rowTags": [
{
"rowTag": "tr",
"childTags": [
{
"childTag": "th",
"content": "Product Name"
},
{
"childTag": "th",
"content": "SKU"
},
{
"childTag": "th",
"content": "Price"
},
{
"childTag": "th",
"content": "Qty"
},
{
"childTag": "th",
"content": "Subtotal"
}
]
}
]
},
{
"mainTag": "tbody",
"rowTags": [
{
"rowTag": "tr",
"childTags": [
{
"childTag": "td",
"childTagAttributes": "data-th=\"Product Name:\"",
"content": "Stellar Solar Jacket, Color RED, Size L"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"SKU:\"",
"content": "WJ01-L-RED"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Price:\"",
"content": "$ 55.00"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Qty:\"",
"content": "Ordered: 1, Shipped: 1"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Subtotal:\"",
"content": "Subtotal: $ 55.00"
}
]
},
{
"rowTag": "tr",
"childTags": [
{
"childTag": "td",
"childTagAttributes": "data-th=\"Prroduct Name:\"",
"content": "Example product"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"SKU:\"",
"content": "233-LV04"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Price:\"",
"content": "$ 5.00"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Qty:\"",
"content": "Ordered: 1"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Subtotal:\"",
"content": "$ 5.00"
}
]
}
]
},
{
"mainTag": "tfoot",
"rowTags": [
{
"rowTag": "tr",
"childTags": [
{
"childTag": "td",
"content": "Subtotal",
"childTagAttributes": "colspan=\"4\""
},
{
"childTag": "td",
"content": "$ 60.00"
}
]
},
{
"rowTag": "tr",
"childTags": [
{
"childTag": "td",
"content": "Shipping & Handling",
"childTagAttributes": "colspan=\"4\""
},
{
"childTag": "td",
"content": "$ 0.00"
}
]
},
{
"rowTag": "tr",
"childTags": [
{
"childTag": "td",
"content": "Discount",
"childTagAttributes": "colspan=\"4\""
},
{
"childTag": "td",
"content": "$ 0.00"
}
]
},
{
"rowTag": "tr",
"childTags": [
{
"childTag": "td",
"content": "Grand Total",
"childTagAttributes": "colspan=\"4\""
},
{
"childTag": "td",
"content": "$ 60.00"
}
]
}
]
}
]
}
},
"invoice": {
"title": {
"tag": "h2",
"class": "dashboard-table__title",
"text": "Invoices"
},
"link": "Print Invoice",
"table": {
"mainTags": [
{
"mainTag": "thead",
"rowTags": [
{
"rowTag": "tr",
"childTags": [
{
"childTag": "th",
"content": "Product Name"
},
{
"childTag": "th",
"content": "SKU"
},
{
"childTag": "th",
"content": "Price"
},
{
"childTag": "th",
"content": "Qty Invoiced"
},
{
"childTag": "th",
"content": "Subtotal"
}
]
}
]
},
{
"mainTag": "tbody",
"rowTags": [
{
"rowTag": "tr",
"childTags": [
{
"childTag": "td",
"childTagAttributes": "data-th=\"Product Name:\"",
"content": "Stellar Solar Jacket, Color RED, Size L"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"SKU:\"",
"content": "WJ01-L-RED"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Price:\"",
"content": "$ 55.00"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Qty Invoiced:\"",
"content": "1"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Subtotal:\"",
"content": "$ 55.00"
}
]
},
{
"rowTag": "tr",
"childTags": [
{
"childTag": "td",
"childTagAttributes": "data-th=\"Product Name:\"",
"content": "Example product"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"SKU:\"",
"content": "233-LV04"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Price:\"",
"content": "$ 5.00"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Qty Invoiced:\"",
"content": "1"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Subtotal:\"",
"content": "$ 5.00"
}
]
}
]
},
{
"mainTag": "tfoot",
"rowTags": [
{
"rowTag": "tr",
"childTags": [
{
"childTag": "td",
"content": "Subtotal",
"childTagAttributes": "colspan=\"4\""
},
{
"childTag": "td",
"content": "$ 60.00"
}
]
},
{
"rowTag": "tr",
"childTags": [
{
"childTag": "td",
"content": "Discount",
"childTagAttributes": "colspan=\"4\""
},
{
"childTag": "td",
"content": "$ 0.00"
}
]
},
{
"rowTag": "tr",
"childTags": [
{
"childTag": "td",
"content": "Grand Total",
"childTagAttributes": "colspan=\"4\""
},
{
"childTag": "td",
"content": "$ 60.00"
}
]
}
]
}
]
}
},
"orderShipment": {
"title": {
"tag": "h2",
"class": "dashboard-table__title",
"text": "Order Shipments"
},
"link": "Print Shipment",
"table": {
"mainTags": [
{
"mainTag": "thead",
"rowTags": [
{
"rowTag": "tr",
"childTags": [
{
"childTag": "th",
"content": "Product Name"
},
{
"childTag": "th",
"content": "SKU"
},
{
"childTag": "th",
"content": "Qty Invoiced"
}
]
}
]
},
{
"mainTag": "tbody",
"rowTags": [
{
"rowTag": "tr",
"childTags": [
{
"childTag": "td",
"childTagAttributes": "data-th=\"Product Name:\"",
"content": "Stellar Solar Jacket, Color RED, Size L"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"SKU:\"",
"content": "WJ01-L-RED"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Qty Invoiced:\"",
"content": "1"
}
]
},
{
"rowTag": "tr",
"childTags": [
{
"childTag": "td",
"childTagAttributes": "data-th=\"Product Name:\"",
"content": "Example product"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"SKU:\"",
"content": "233-LV04"
},
{
"childTag": "td",
"childTagAttributes": "data-th=\"Qty Invoiced:\"",
"content": "1"
}
]
}
]
}
]
}
},
"orderInfoTitle": {
"tag": "h2",
"class": "dashboard__title",
"text": "Order Information"
},
"orderInfo": {
"informations": [
{
"heading": {
"tag": "h3",
"class": "dashboard__subtitle margin-bottom-l",
"text": "Shipping Address"
},
"class": "col-sm-3",
"text": "Lorem Ipsum Shipping Address example 1"
},
{
"heading": {
"tag": "h3",
"class": "dashboard__subtitle margin-bottom-l",
"text": "Shipping Method"
},
"class": "col-sm-3",
"text": "United Parcel Service - Ground"
},
{
"heading": {
"tag": "h3",
"class": "dashboard__subtitle margin-bottom-l",
"text": "Billing Address"
},
"class": "col-sm-3",
"text": "Lorem Ipsum Billing Address example 1"
},
{
"heading": {
"tag": "h3",
"class": "dashboard__subtitle margin-bottom-l",
"text": "Payment Method"
},
"class": "col-sm-3",
"text": "Check / Money order"
}
]
}
}
$my-orders__fieldset-padding : 0 $spacer !default;
$my-orders__search-min-width : 50% !default;
$my-orders__search-margin\@medium : $spacer--medium 0 0 !default;
$my-orders__search-padding\@medium : 0 $spacer 0 0 !default;
$my-orders__date-padding : 0 $spacer !default;
$my-orders__date-padding\@medium : 0 $spacer--medium !default;
$my-orders__date-form-margin\@medium: 0 $spacer--medium 0 0 !default;
$my-orders__total-min-margin\@medium: 0 $spacer--medium 0 0 !default;
$my-orders__field-label-margin : 0 $spacer 0 0 !default;
$my-orders__summary-list-padding : 0 $spacer !default;
$my-orders__summary-label-margin : 0 $spacer--extra-small 0 0 !default;
$my-orders__summary-icon-size : 24px !default;
$my-orders__summary-icon-fill : $red !default;
@import 'my-orders-variables';
.my-orders {
&__fieldset {
display: flex;
justify-content: space-between;
flex-direction: column;
padding: $my-orders__fieldset-padding;
@include mq($screen-m) {
flex-direction: row;
align-items: center;
}
}
&__search {
min-width: $my-orders__search-min-width;
@include mq($screen-m) {
margin: $my-orders__search-margin\@medium;
padding: $my-orders__search-padding\@medium;
}
}
&__select {
select {
@extend .select__field;
}
}
&__date {
input {
padding: $my-orders__date-padding;
@include mq($screen-m) {
padding: $my-orders__date-padding\@medium;
}
}
&--from {
@include mq($screen-m) {
margin: $my-orders__date-form-margin\@medium;
}
}
}
&__total {
&--min {
@include mq($screen-m) {
margin: $my-orders__total-min-margin\@medium;
}
}
}
&__field-wrapper {
@include mq($screen-m) {
display: flex;
align-items: center;
}
input {
@extend .input__field;
}
}
&__field-label {
margin: $my-orders__field-label-margin;
}
&__actions {
justify-content: flex-end;
}
&__filter-summary {
& > ul {
padding: $my-orders__summary-list-padding;
& > li {
display: flex;
flex-wrap: wrap;
}
}
.label,
.sub-label ,
span[data-name='order-date-from'],
span[data-name='order-total-min'] {
margin: $my-orders__summary-label-margin;
}
.action-remove {
margin: $my-orders__summary-label-margin;
&:not(.action-clear-all) {
&:before {
content: '';
position: relative;
display: flex;
background: svg-uri("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path fill='#{$my-orders__summary-icon-fill}' fill-rule='nonzero' d='M18.3 5.71a.996.996 0 0 0-1.41 0L12 10.59 7.11 5.7A.996.996 0 1 0 5.7 7.11L10.59 12 5.7 16.89a.996.996 0 1 0 1.41 1.41L12 13.41l4.89 4.89a.996.996 0 1 0 1.41-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z'/></svg>");
background-repeat: no-repeat;
width: $my-orders__summary-icon-size;
height: $my-orders__summary-icon-size;
}
}
}
}
}
No notes defined.