workarea-haven_theme 1.3.0

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

@@ -0,0 +1,53 @@
+/*------------------------------------*\
+    #PAGE-FOOTER
+\*------------------------------------*/
+
+$page-footer-color: $footer-color !default;
+$page-footer-background-color: $footer-background-color !default;
+$page-footer-border: 1px solid $footer-border-color !default;
+
+
+.page-footer {
+    padding-top: $spacing-unit * 4;
+    color: $page-footer-color;
+    background-color: $page-footer-background-color;
+}
+
+
+    /**
+     * 1. make sure no content block can inject `p` tags that will break layout.
+     */
+    .page-footer__nav {
+        margin: 0 auto;
+        padding: ($spacing-unit * 3) 0;
+        max-width: 50%;
+        text-align: left;
+
+        @include respond-to($medium-breakpoint) {
+            padding: ($spacing-unit * 6) 0;
+            max-width: none;
+        }
+
+        p { margin: 0; } /* [1] */
+    }
+
+        .page-footer__heading {
+            @extend %heading;
+            @extend %heading--6;
+            font-weight: $font-weight-heavy;
+        }
+
+    .page-footer__help {
+        @extend %list-reset;
+    }
+
+        .page-footer__help-item {}
+
+            .page-footer__help-link {}
+
+    .page-footer__copyright {
+        margin: 0;
+        padding: $spacing-unit * 2;
+        text-align: center;
+        border-top: $page-footer-border;
+    }

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

@@ -0,0 +1,208 @@
+/*------------------------------------*\
+    #PAGE-HEADER
+\*------------------------------------*/
+
+$page-header-background-color: $header-background-color !default;
+$page-header-border-color: $header-border-color !default;
+
+$page-header-height: 53px !default;
+$page-header-height-medium: $spacing-unit * 10 !default;
+$page-header-button-padding: $spacing-unit * 2 !default;
+$page-header-button-padding-medium: 25px !default;
+
+$page-header-button-icon-size: 18px !default;
+$page-header-button-icon-size-medium: 28px !default;
+$page-header-button-icon-color: $header-icon-color !default;
+$page-header-button-icon-color-hover: $header-icon-color-hover !default;
+
+$page-header-cart-count-color: $header-cart-count-color !default;
+$page-header-cart-background-color: $header-cart-background-color !default;
+$page-header-cart-count-background-color: $header-cart-count-background-color !default;
+$page-header-cart-button-color: $header-icon-color-cart !default;
+$page-header-cart-icon-color: $header-icon-color-cart !default;
+
+$page-header-logo-width:   72px !default;
+$page-header-logo-height:  18px !default;
+$page-header-logo-width-medium:   144px !default;
+$page-header-logo-height-medium:  36px !default;
+
+$page-header-breakpoint: $small-horizontal-breakpoint !default;
+
+
+.page-header {
+    position: sticky;
+    top: 0;
+    z-index: index($page-container, page-header);
+    padding: 0;
+
+    .admin-toolbar ~ .page-container & {
+        @include respond-to($wide-breakpoint) {
+            top: $global-admin-toolbar-height;
+        }
+    }
+}
+
+.page-header--checkout {
+    position: static;
+}
+
+.page-header--sticky {}
+
+    .page-header__main {
+        display: flex;
+        position: relative;
+        z-index: index($components, header-main);
+        max-width: 100vw;
+        background-color: $page-header-background-color;
+        border-bottom: 1px solid $page-header-border-color;
+        flex: 0 1 auto;
+
+        .page-header--checkout & {
+            padding: ($spacing-unit * 2) 0;
+            justify-content: center;
+        }
+    }
+
+        .page-header__button {
+            @extend %button-reset;
+            display: inline-block;
+            position: relative;
+            padding: $page-header-button-padding;
+            text-align: center;
+            cursor: pointer;
+
+            @include respond-to($page-header-breakpoint) {
+                padding: $page-header-button-padding-medium;
+            }
+
+            @include respond-to($wide-breakpoint) {
+                border-right: 1px solid $page-header-border-color;
+                border-left: 1px solid $page-header-border-color;
+            }
+
+            & + & {
+                border-left: 0;
+            }
+
+            &:last-child {
+                border-right: 0;
+            }
+        }
+
+        .page-header__button--mobile-only {
+            @include respond-to($wide-breakpoint) {
+                display: none;
+            }
+        }
+
+        .page-header__button--mobile-hidden {
+            display: none;
+
+            @include respond-to($wide-breakpoint) {
+                display: inline-block;
+            }
+        }
+
+        .page-header__button--menu {}
+
+        .page-header__button--search {}
+
+        .page-header__button--account {}
+
+        .page-header__button--cart {
+            color: $page-header-cart-button-color;
+            background-color: $page-header-cart-background-color;
+
+            &:hover {
+                color: $page-header-cart-button-color;
+            }
+        }
+
+
+            .page-header__button-icon {
+                display: inline-block;
+                width: $page-header-button-icon-size;
+                height: $page-header-button-icon-size;
+                vertical-align: middle;
+                fill: $page-header-button-icon-color;
+                transition: fill $transition-time ease-in;
+
+                @include respond-to($page-header-breakpoint) {
+                    width: $page-header-button-icon-size-medium;
+                    height: $page-header-button-icon-size-medium;
+                }
+
+                .page-header__button:hover & {
+                    fill: $page-header-button-icon-color-hover;
+                }
+
+                .page-header__button--cart & {
+                    fill: $page-header-cart-icon-color;
+                }
+
+                .page-header__button--cart:hover & {
+                    fill: $page-header-cart-icon-color;
+                }
+            }
+
+            .page-header__cart-count {
+                position: absolute;
+                top: 0;
+                right: 0;
+                padding: $spacing-unit / 2;
+                color: $page-header-cart-count-color;
+                line-height: 1;
+
+                @include respond-to($page-header-breakpoint) {
+                    padding: ($spacing-unit / 2) $spacing-unit;
+                    background-color: $page-header-cart-count-background-color;
+                }
+            }
+
+    .page-header__logo-container {
+        padding: 0 $spacing-unit * 2;
+        width: 100%;
+        line-height: $page-header-height;
+        text-align: center;
+
+        @include respond-to($page-header-breakpoint) {
+            line-height: $page-header-height-medium;
+        }
+
+        @include respond-to($wide-breakpoint) {
+            width:  auto;
+        }
+    }
+
+        .page-header__logo {
+            display: inline-block;
+            margin: 0 auto;
+            width:  $page-header-logo-width;
+            height: $page-header-logo-height;
+
+            @include respond-to($page-header-breakpoint) {
+                margin: 0;
+                width:  $page-header-logo-width-medium;
+                height: $page-header-logo-height-medium;
+            }
+        }
+
+    .page-header__navigation-container {
+        display: none;
+        text-align: center;
+
+        @include respond-to($wide-breakpoint) {
+            display: inline-block;
+            width: 100%;
+        }
+    }
+
+    /**
+     * 1. make sure no content block can inject `p` tags that will break layout.
+     */
+    .page-header__promo {
+        margin: $vertical-margin 0;
+        text-align: center;
+
+        p { margin: 0; } /* [1] */
+    }

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

@@ -0,0 +1,12 @@
+/*------------------------------------*\
+    #PAGINATION
+\*------------------------------------*/
+
+.pagination {
+    padding-bottom: $spacing-unit * 3;
+}
+
+    .pagination__button {
+        margin-top: $spacing-unit;
+        text-align: center;
+    }

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

@@ -0,0 +1,37 @@
+/*------------------------------------*\
+    #PAYMENT-ICON
+\*------------------------------------*/
+
+$payment-icon-width: 32px !default;
+$payment-icon-height: 21px !default;
+$payment-icon-width-medium: 38px !default;
+$payment-icon-height-medium: 25px !default;
+$payment-icon-unselected-opacity: 0.2 !default;
+
+.payment-icon {
+    display: inline-block;
+    width:  $payment-icon-width;
+    height: $payment-icon-height;
+    vertical-align: middle;
+    transition: opacity $transition-time ease-in;
+
+    @include respond-to($medium-breakpoint){
+        width:  $payment-icon-width-medium;
+        height: $payment-icon-height-medium;
+    }
+
+    .checkout-payment__primary-method--new-card.checkout-payment__primary-method--selected & {
+        opacity: $payment-icon-unselected-opacity;
+    }
+}
+
+.payment-icon--selected {
+    .checkout-payment__primary-method--new-card.checkout-payment__primary-method--selected & {
+        opacity: 1;
+    }
+}
+
+.payment-icon--visa {}
+.payment-icon--mastercard {}
+.payment-icon--amex {}
+.payment-icon--discover {}

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

@@ -0,0 +1,19 @@
+/*------------------------------------*\
+    #PERSONALIZED-RECOMMENDATIONS-CONTENT-BLOCK
+\*------------------------------------*/
+
+$personalized-recommendations-content-block-background-color: $background-color-alternate !default;
+
+
+.personalized-recommendations-content-block {
+    @include full-bleed-container;
+    padding: ($spacing-unit * 5) 0;
+    background-color: $personalized-recommendations-content-block-background-color;
+}
+
+    .personalized-recommendations-content-block__heading {
+        @extend %heading;
+        @extend %heading--4;
+        @extend %heading--upcase;
+        text-align: center;
+    }

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

@@ -0,0 +1,75 @@
+/*------------------------------------*\
+    #PRIMARY-NAV
+\*------------------------------------*/
+
+$primary-nav-bg-color:  $primary-nav-background-color !default;
+$primary-nav-border:  1px solid $primary-nav-border-color !default;
+
+$primary-nav-link-font-size: 15px !default;
+$primary-nav-item-weight: $font-weight-medium !default;
+$primary-nav-link-color: $primary-nav-links-color !default;
+$primary-nav-link-color-hover: $primary-nav-links-color-hover !default;
+$primary-nav-link-border: 3px solid $transparent !default;
+$primary-nav-link-hover-border-color: $primary-nav-link-hover-border-color !default;
+
+$primary-nav-content-bg-color:  $primary-nav-background-color !default;
+
+.primary-nav {
+    display: none;
+    line-height: 80px;
+    text-align: left;
+
+    @include respond-to($wide-breakpoint) {
+        display: flex;
+    }
+}
+
+    .primary-nav__menu{
+        @extend %inline-list;
+    }
+
+        .primary-nav__item {
+            margin: 0 $spacing-unit;
+            font-weight: $primary-nav-item-weight;
+            text-transform: uppercase;
+        }
+
+            /**
+            * 1. Transparent border prevents re-flow and content shift on hover
+            */
+            .primary-nav__link {
+                padding: $spacing-unit;
+                color: $primary-nav-link-color;
+                font-size: $primary-nav-link-font-size;
+                border: $primary-nav-link-border; /* [1] */
+                transition: border-color $transition-time ease-in;
+
+                .primary-nav__item:hover & {
+                    color: $primary-nav-link-color-hover;
+                    border-color: $primary-nav-link-hover-border-color;
+                }
+            }
+
+            .primary-nav__link--selected {
+                border-color: $primary-nav-link-hover-border-color;
+            }
+
+
+            /**
+            * 1. injected via JavaScript
+            */
+            .primary-nav__content { /* [1] */
+                display: none;
+
+                .primary-nav__item:hover & {
+                    display: block;
+                    position: absolute;
+                    top: 100%;
+                    right: 0;
+                    left: 0;
+                    line-height: 2;
+                    background: $primary-nav-content-bg-color;
+                    border-top: $primary-nav-border;
+                    border-bottom: $primary-nav-border;
+                }
+            }

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

@@ -0,0 +1,177 @@
+/*------------------------------------*\
+    #PRODUCT-DETAIL-CONTAINER
+\*------------------------------------*/
+
+$product-detail-container-tabs-background-color: $background-color-alternate !default;
+$product-detail-container-section-border: 1px solid $border-color !default;
+
+// These offsets must match the height of the sticky header
+$product-detail-container-section-top-offset: 54px !default;
+$product-detail-container-section-top-offset-landscape: 82px !default;
+$product-detail-container-section-background-color: $background-color !default;
+$product-detail-container-section-heading-background-color: $background-color-alternate !default;
+
+$product-detail-container-tab-color: $font-color !default;
+$product-detail-container-tab-color-hover: $link-color !default;
+$product-detail-container-tab-font-size: 18px !default;
+$product-detail-container-tab-font-size-medium: 22px !default;
+$product-detail-container-tab-border: 1px solid $product-detail-container-tab-border-color !default;
+
+$product-detail-container-section-back-icon-size: 24px !default;
+$product-detail-container-section-back-icon-color: $link-color !default;
+
+
+.product-detail-container {}
+
+    .product-detail-container__tabs {
+        @include full-bleed-container;
+        background-color: $product-detail-container-tabs-background-color;
+
+        @include respond-to($medium-breakpoint) {
+            position: static;
+            right: auto;
+            left: auto;
+            margin: ($spacing-unit * 4) 0 0;
+            padding: $spacing-unit * 4;
+            width: auto;
+        }
+    }
+
+        .product-detail-container__tab {
+            border-bottom: $product-detail-container-tab-border;
+
+            @include respond-to($medium-breakpoint) {
+                display: inline-block;
+                margin-right: $spacing-unit * 6;
+                border-bottom: 0;
+
+                &:last-of-type {
+                    margin-right: 0;
+                }
+            }
+        }
+
+        .product-detail-container__tab-link {
+            display: block;
+            padding: $spacing-unit * 3;
+            color: $product-detail-container-tab-color;
+            font-size: $product-detail-container-tab-font-size;
+            text-transform: uppercase;
+
+            @include respond-to($medium-breakpoint) {
+                padding: 0;
+                font-size: $product-detail-container-tab-font-size-medium;
+            }
+
+            &:after {
+                @include svg($image: 'icons/arrow_right.svg', $width: $product-detail-container-tab-font-size);
+                margin-top: $spacing-unit / 2;
+                float: right;
+                content: '';
+
+                @include respond-to($medium-breakpoint) {
+                    display: none;
+                }
+            }
+
+            &:hover {
+                color: $product-detail-container-tab-color-hover;
+                text-decoration: underline;
+            }
+        }
+
+        .product-detail-container__section {
+            position: fixed;
+            top: $product-detail-container-section-top-offset;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            z-index: 10;
+            background-color: $product-detail-container-section-background-color;
+            transform: translateX(-100%);
+            transition: transform $transition-time ease-in;
+            visibility: hidden;
+
+            @include respond-to($small-horizontal-breakpoint) {
+                top: $product-detail-container-section-top-offset-landscape;
+            }
+
+            @include respond-to($medium-breakpoint) {
+                position: static;
+                margin: $vertical-margin 0;
+                padding: ($spacing-unit * 5) ($spacing-unit * 4);
+                border-top: $product-detail-container-section-border;
+                transform: translateX(0);
+                visibility: visible;
+            }
+        }
+
+        .product-detail-container__section--open-overlay {
+            visibility: visible;
+            transform: translateX(0%);
+            overflow-y: scroll;
+        }
+
+        .product-detail-container__section--description {
+            border-top: 0;
+        }
+
+        .product-detail-container__section--information {}
+        .product-detail-container__section--reviews {}
+
+            .product-detail-container__section-header {}
+
+                .product-detail-container__section-overlay-controls {
+                    padding: ($spacing-unit * 2) ($spacing-unit * 3);
+
+                    @include respond-to($medium-breakpoint) {
+                        display: none;
+                    }
+                }
+
+                    .product-detail-container__section-back-icon {
+                        display: inline-block;
+                        margin-right: $spacing-unit * 2;
+                        width: $product-detail-container-section-back-icon-size;
+                        height: $product-detail-container-section-back-icon-size;
+                        vertical-align: middle;
+                        transform: rotate(180deg);
+                        fill: $product-detail-container-section-back-icon-color;
+                    }
+
+                .product-detail-container__section-heading {
+                    @extend %heading;
+                    @extend %heading--4;
+                    @extend %heading--upcase;
+                    padding: ($spacing-unit * 2) ($spacing-unit * 3);
+                    background-color: $product-detail-container-section-heading-background-color;
+
+                    @include respond-to($medium-breakpoint) {
+                        padding: 0;
+                        background-color: $transparent;
+                    }
+
+                    .product-detail-container__section--description & {
+                        @include respond-to($medium-breakpoint) {
+                            display: none;
+                        }
+                    }
+                }
+
+            .product-detail-container__section-content {
+                padding: 0 ($spacing-unit * 3);
+
+                @include respond-to($medium-breakpoint) {
+                    padding: 0;
+                }
+            }
+
+        .product-detail-container__description {}
+
+        .product-detail-container__attributes {}
+
+            .product-detail-container__attribute-name {
+                font-weight: $font-weight-heavy;
+            }
+
+            .product-detail-container__attribute-value {}