workarea-nvy_theme 1.1.2

data/app/assets/stylesheets/workarea/storefront/components/_overlay.scss

@@ -0,0 +1,21 @@
+/*------------------------------------*\
+    #OVERLAY
+\*------------------------------------*/
+
+$overlay-background-color: $overlay-shadow-color !default;
+
+.overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: index($components, overlay);
+    background-color: $overlay-background-color;
+    cursor: default;
+}
+
+.overlay--active {
+    display: block;
+}

data/app/assets/stylesheets/workarea/storefront/components/_page_content.scss

@@ -0,0 +1,30 @@
+/*------------------------------------*\
+    #PAGE-CONTENT
+\*------------------------------------*/
+
+.page-content {
+    position: relative;
+    z-index: index($page-container, page-content);
+}
+
+.page-content--checkout {}
+
+    .page-content__aside {
+        display: none;
+
+        @include respond-to($medium-breakpoint) {
+            display: block;
+        }
+
+        .mobile-filters-nav & {
+            display: block;
+            max-height: 100%;
+            overflow-y: auto;
+        }
+
+        .page-content--checkout & {
+            display: block;
+        }
+    }
+
+    .page-content__main {}

data/app/assets/stylesheets/workarea/storefront/components/_page_footer.scss

@@ -0,0 +1,104 @@
+/*------------------------------------*\
+    #PAGE-FOOTER
+\*------------------------------------*/
+
+$page-footer-background-color: $page-footer-background-color !default;
+$page-footer-checkout-background-color: $page-footer-checkout-background-color !default;
+$page-footer-color: $page-footer-color !default;
+$page-footer-checkout-color: $page-footer-checkout-color !default;
+$page-footer-link-color: $page-footer-link-color !default;
+$page-footer-link-color-hover: $page-footer-link-color-hover !default;
+$page-footer-email-form-max-width: 350px !default;
+$page-footer-email-input-width: calc(100% - 140px) !default;
+$page-footer-copyright-color: $page-footer-copyright-color !default;
+$page-footer-copyright-border: 1px solid $page-footer-border-color !default;
+
+
+.page-footer {
+    padding: ($spacing-unit * 6) ($spacing-unit * 2) $spacing-unit;
+    color: $page-footer-color;
+    background-color: $page-footer-background-color;
+
+    @include respond-to($medium-breakpoint) {
+        padding: ($spacing-unit * 5) ($spacing-unit * 4) $spacing-unit;
+    }
+
+    @include respond-to($wide-breakpoint) {
+        padding: ($spacing-unit * 8) ($spacing-unit * 10) $spacing-unit;
+    }
+}
+
+.page-footer--checkout {
+    color: $page-footer-checkout-color;
+    background-color: $page-footer-checkout-background-color;
+}
+
+    /**
+     * 1. make sure no content block can inject `p` tags that will break layout.
+     */
+    .page-footer__nav {
+        padding: ($spacing-unit * 8) 0;
+
+        @include respond-to($wide-breakpoint) {
+            padding: 0 ($spacing-unit * 4) ($spacing-unit * 4);
+        }
+
+        p { margin: 0; } /* [1] */
+    }
+
+    .page-footer__help {
+        @extend %list-reset;
+    }
+
+        .page-footer__help-item {
+            margin-bottom: $spacing-unit;
+        }
+
+            .page-footer__help-link {
+                color: $page-footer-link-color;
+
+                &:hover {
+                    color: $page-footer-link-color-hover;
+                }
+            }
+
+    .page-footer__email-signup {}
+
+        .page-footer__email-signup-heading {}
+
+        .page-footer__email-signup-form {
+            max-width: $page-footer-email-form-max-width;
+
+            @include respond-to($wide-breakpoint) {
+                display: inline-block;
+            }
+        }
+
+            .page-footer__email-value {
+                display: inline-block;
+                margin-right: $spacing-unit;
+                width: $page-footer-email-input-width;
+                vertical-align: top;
+            }
+
+            .page-footer__email-button {
+                display: inline-block;
+                vertical-align: top;
+            }
+
+
+    .page-footer__copyright {
+        margin: 0;
+        padding: ($spacing-unit * 2) 0;
+        color: $page-footer-copyright-color;
+        text-align: center;
+        border-top: $page-footer-copyright-border;
+
+        @include respond-to($wide-breakpoint) {
+            padding: ($spacing-unit * 3) 0;
+        }
+
+        .page-footer--checkout & {
+            color: $page-footer-checkout-color;
+        }
+    }

data/app/assets/stylesheets/workarea/storefront/components/_page_header.scss

@@ -0,0 +1,237 @@
+/*------------------------------------*\
+    #PAGE-HEADER
+\*------------------------------------*/
+
+$page-header-promo-background: $page-header-promo-background-color !default;
+$page-header-promo-color: $page-header-promo-color !default;
+
+$page-header-mobile-nav-icon-color: $page-header-icon-color !default;
+$page-header-mobile-nav-icon-size: 32px !default;
+
+$page-header-utility-nav-icon-color: $page-header-icon-color !default;
+$page-header-utility-nav-icon-size: 24px !default;
+
+$page-header-main-height: 104px !default;
+$page-header-main-height-wide: 80px !default;
+$page-header-logo-width:   40px !default;
+$page-header-logo-width-wide:   160px !default;
+$page-header-logo-height:  40px !default;
+$page-header-logo-height-wide:  64px !default;
+
+$page-header-cart-count-color: $cart-count-color !default;
+$page-header-cart-count-background-color: $cart-count-background-color !default;
+$page-header-cart-count-size: 19px !default;
+$page-header-cart-count-font-size: 12px !default;
+$page-header-cart-count-font-family: $secondary-font-family !default;
+
+$page-header-search-width: 100% !default;
+$page-header-search-width-wide: 348px !default;
+$page-header-search-icon-size: 16px !default;
+
+
+.page-header {
+    position: relative;
+    z-index: index($page-container, page-header);
+    text-align: center;
+
+    @include respond-to($wide-breakpoint) {
+        text-align: left;
+    }
+}
+
+.page-header--checkout {
+    margin-bottom: $vertical-margin;
+    padding-top: ($spacing-unit * 2);
+    text-align: center;
+}
+
+    .page-header__main {
+        display: flex;
+        position: relative;
+        z-index: index($components, header-main);
+        margin: 0 auto;
+        padding: $spacing-unit;
+        height: $page-header-main-height;
+        max-width: $x-wide-breakpoint;
+        flex: 0 1 auto;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        align-items: center;
+
+        @include respond-to($wide-breakpoint) {
+            height: $page-header-main-height-wide;
+            flex-wrap: nowrap;
+        }
+    }
+
+    .page-header__mobile-nav {
+        display: inline-block;
+        float: left;
+        order: 1;
+
+        @include respond-to($wide-breakpoint) {
+            display: none;
+        }
+    }
+
+        .page-header__mobile-nav-icon {
+            width: $page-header-mobile-nav-icon-size;
+            height: $page-header-mobile-nav-icon-size;
+            fill: $page-header-mobile-nav-icon-color;
+        }
+
+    /**
+     * 1. Reset position and transform from centered
+     */
+    .page-header__logo-container {
+        @include center($to: 'horizontal');
+        display: inline-block;
+        top: $spacing-unit;
+        order: 2;
+
+        @include respond-to($wide-breakpoint) {
+            position: static; /* [1] */
+            transform: initial; /* [1] */
+            order: 1;
+        }
+    }
+
+        .page-header__logo {
+            display: block;
+            width:  $page-header-logo-width;
+            height: $page-header-logo-height;
+
+            @include respond-to($wide-breakpoint) {
+                width:  $page-header-logo-width-wide;
+                height: $page-header-logo-height-wide;
+            }
+
+            .page-header--checkout & {
+                display: inline-block;
+                margin-bottom: $spacing-unit * 2;
+                width:  $page-header-logo-width;
+                height: $page-header-logo-height;
+            }
+        }
+
+        .page-header__logo--small {
+            @include respond-to($wide-breakpoint) {
+                display: none;
+            }
+        }
+
+        .page-header__logo--wide {
+            display: none;
+
+            @include respond-to($wide-breakpoint) {
+                display: block;
+            }
+        }
+
+    .page-header__account-link {
+        @extend %button-reset;
+        cursor: pointer;
+    }
+
+    .page-header__logout-link {
+        &:before { content: '('; }
+        &:after  { content: ')'; }
+    }
+
+    .page-header__cart-link {
+        position: relative;
+    }
+
+        .page-header__cart-count {
+            position: absolute;
+            right: -30%;
+            bottom: 0%;
+            width: $page-header-cart-count-size;
+            color: $page-header-cart-count-color;
+            font-size: $page-header-cart-count-font-size;
+            font-family: $page-header-cart-count-font-family;
+            line-height: $page-header-cart-count-size;
+            text-align: center;
+            background-color: $page-header-cart-count-background-color;
+            border-radius: 50%;
+        }
+
+
+    .page-header__utility-nav {
+        margin-right: $spacing-unit;
+        order: 3;
+    }
+
+        .page-header__utility-nav-item {
+            margin-left: $spacing-unit * 2;
+
+            @include respond-to($wide-breakpoint) {
+                margin-left: $spacing-unit * 6;
+            }
+        }
+
+        .page-header__icon {
+            width: $page-header-utility-nav-icon-size;
+            height: $page-header-utility-nav-icon-size;
+            fill: $page-header-utility-nav-icon-color;
+        }
+
+    .page-header__locale {}
+
+    /**
+     * 2. Push flex item to right
+     */
+    .page-header__search {
+        display: block;
+        margin-top: $spacing-unit;
+        width: $page-header-search-width;
+        text-align: center;
+        order: 4;
+
+        @include respond-to($wide-breakpoint) {
+            margin-top: 0;
+            margin-left: auto; /* [2] */
+            width: $page-header-search-width-wide;
+            text-align: right;
+            order: 2;
+        }
+    }
+
+        .page-header__search-form {
+            position: relative;
+        }
+
+            .page-header__search-value {
+                display: block;
+                vertical-align: top;
+            }
+
+            .page-header__search-button {
+                @extend %button-reset;
+                position: absolute;
+                top: 50%;
+                right: $spacing-unit;
+                width: $page-header-search-icon-size;
+                height: $page-header-search-icon-size;
+                transform: translate(-50%, -50%);
+                cursor: pointer;
+            }
+
+                .page-header__search-icon {
+                    width: $page-header-search-icon-size;
+                    height: $page-header-search-icon-size;
+                    fill: $page-header-utility-nav-icon-color;
+                }
+
+
+    /**
+     * 1. make sure no content block can inject `p` tags that will break layout.
+     */
+    .page-header__promo {
+        padding: ($spacing-unit / 2) $spacing-unit;
+        color: $page-header-promo-color;
+        text-align: center;
+        background-color: $page-header-promo-background;
+
+        p { margin: 0; } /* [1] */
+    }

data/app/assets/stylesheets/workarea/storefront/components/_pagination.scss

@@ -0,0 +1,10 @@
+/*------------------------------------*\
+    #PAGINATION
+\*------------------------------------*/
+
+.pagination {}
+
+    .pagination__button {
+        margin: $vertical-margin 0;
+        text-align: center;
+    }

data/app/assets/stylesheets/workarea/storefront/components/_primary_nav.scss

@@ -0,0 +1,76 @@
+/*------------------------------------*\
+    #PRIMARY-NAV
+\*------------------------------------*/
+
+$primary-nav-bg-color: $primary-navigation-background-color !default;
+$primary-nav-content-bg-color: $primary-navigation-dropdown-background-color !default;
+$primary-nav-content-box-shadow: 0 4px 4px -4px $black-alpha-50 !default;
+$primary-nav-link-color: $primary-navigation-link-color !default;
+$primary-nav-link-font-family: $secondary-font-family !default;
+
+
+/**
+ * 1. provides positioning context for `.primary-nav__content`
+ */
+.primary-nav {
+    display: none;
+    background-color: $primary-nav-bg-color;
+
+    @include respond-to($wide-breakpoint) {
+        display: block;
+        position: relative; /* [1] */
+    }
+}
+
+    .primary-nav__items {
+        @extend %inline-list;
+        display: none;
+
+        @include respond-to($wide-breakpoint) {
+            display: flex;
+            margin: 0 auto $vertical-margin;
+            max-width: $wide-breakpoint;
+            text-align: center;
+            flex: 0 1 auto;
+            justify-content: space-between;
+            align-items: center;
+        }
+    }
+
+        .primary-nav__item {
+            margin: 0 $spacing-unit;
+        }
+
+        .primary-nav__item--hover {}
+
+            .primary-nav__link {
+                display: block;
+                padding: $spacing-unit;
+                color: $primary-nav-link-color;
+                font-family: $primary-nav-link-font-family;
+                font-weight: bold;
+                text-transform: uppercase;
+            }
+
+            .primary-nav__link--selected {
+                font-weight: bold;
+            }
+
+
+            /**
+                * 1. injected via JavaScript
+                */
+            .primary-nav__content { /* [1] */
+                display: none;
+
+                .primary-nav__item--hover &,
+                .primary-nav__item:hover & {
+                    display: block;
+                    position: absolute;
+                    top: 100%;
+                    right: 0;
+                    left: 0;
+                    background: $primary-nav-content-bg-color;
+                    box-shadow: $primary-nav-content-box-shadow;
+                }
+            }