workarea-one_theme 1.3.0

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

@@ -0,0 +1,99 @@
+/*------------------------------------*\
+    #PRIMARY-NAV
+\*------------------------------------*/
+
+$primary-nav-bg-color:          $primary-nav-background-color !default;
+$primary-nav-alignment:         left !default;
+$primary-nav-border:            1px solid $primary-nav-border-color !default;
+
+$primary-nav-link-font-size:    13px !default;
+$primary-nav-content-bg-color:  $background-color-component !default;
+$primary-nav-link-font-size:    15px !default;
+
+$primary-nav-link-icon-color:   $link-secondary-color !default;
+
+
+/**
+ * 1. provides positioning context for `.primary-nav__content`
+ */
+.primary-nav {
+    display: none;
+    z-index: index($page-header, primary-nav);
+    background-color: $primary-nav-bg-color;
+    border-top: $primary-nav-border;
+
+    @include respond-to($medium-breakpoint) {
+        display: block;
+    }
+}
+
+    .primary-nav__menu {
+        @extend %inline-list;
+        @extend %content-wrapper;
+
+        @include respond-to($medium-breakpoint) {
+            position: relative; /* [1] */
+            text-align: $primary-nav-alignment;
+            background-color: $primary-nav-bg-color;
+        }
+    }
+
+        .primary-nav__item {
+            margin: 0 $spacing-unit;
+
+            &:first-child {
+                margin-left: 0;
+            }
+        }
+
+        .primary-nav__item--hover {}
+
+            .primary-nav__link {
+                @extend %link--secondary;
+                display: block;
+                position: relative;
+                padding: $spacing-unit * 2;
+                padding-left: 0;
+                font-size: $primary-nav-link-font-size;
+                font-weight: bold;
+            }
+
+            .primary-nav__link--selected {
+                opacity: 1;
+
+                &:after {
+                    position: absolute;
+                    right: $spacing-unit * 2;
+                    bottom: 0;
+                    left: 0;
+                    height: 3px;
+                    background-color: $primary-color;
+                    content: '';
+                }
+            }
+
+                .primary-nav__link-text {}
+
+                .primary-nav__link-icon {
+                    margin-left: $spacing-unit;
+                    fill: $primary-nav-link-icon-color;
+                }
+
+
+            /**
+            * 1. injected via JavaScript
+            */
+            .primary-nav__content { /* [1] */
+                display: none;
+                z-index: index($page-header, primary-nav-content);
+
+                .primary-nav__item--hover & ,
+                .primary-nav__item:hover & {
+                    display: block;
+                    position: absolute;
+                    top: 100%;
+                    right: 0;
+                    left: 0;
+                    background: $primary-nav-content-bg-color;
+                }
+            }

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

@@ -0,0 +1,19 @@
+/*------------------------------------*\
+    #PRODUCT-DETAIL-CONTAINER
+\*------------------------------------*/
+
+.product-detail-container {}
+
+    .product-detail-container__section {
+        margin: $spacing-unit * 2;
+
+        @include respond-to($medium-breakpoint) {
+            margin: $spacing-unit * 5;
+        }
+    }
+
+        .product-detail-container__description {}
+
+            .product-detail-container__description-heading {}
+
+            .product-detail-container__description-body {}

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

@@ -0,0 +1,94 @@
+/*------------------------------------*\
+    #PRODUCT-DETAILS
+\*------------------------------------*/
+
+$product-details-primary-image-max-width:         255px !default;
+$product-details-primary-image-max-width-medium:  360px !default;
+$product-details-primary-image-ratio:      2 / 3 !default;
+
+$product-details-alt-image-selected-outline-color:  $highlight-color !default;
+
+$product-details-form-border: 1px solid $border-color !default;
+
+
+/**
+ * 1. within a jQuery Dialog, set width since there is no
+ *    .product-details-container
+ */
+
+.product-details {
+    .ui-dialog & { /* [1] */
+        max-width: $dialog-content-max-width;
+    }
+}
+
+.product-details--generic {}
+.product-details--swatches {}
+.product-details--quickview {}
+
+
+    .product-details__name {
+        text-align: center;
+
+        @include respond-to($medium-breakpoint) {
+            text-align: left;
+        }
+    }
+
+        .product-details__heading {}
+
+        .product-details__id {}
+
+    .product-details__description {
+        display: none;
+
+        .ui-dialog & {
+            display: block;
+        }
+    }
+
+
+    .product-details__add-to-cart-form {
+        margin: ($spacing-unit * 2) 0;
+        padding: ($spacing-unit * 2) 0;
+        text-align: center;
+        border-top: $product-details-form-border;
+        border-bottom: $product-details-form-border;
+
+        @include respond-to($medium-breakpoint) {
+            text-align: left;
+        }
+    }
+
+        .product-details__quantity {
+            display: inline-block;
+        }
+
+        .product-details__add-to-cart-action {
+            margin-bottom: 0;
+
+            .product-details--swatches & {
+                vertical-align: middle;
+            }
+        }
+
+        .product-details__inventory-status {}
+
+        .product-details__unavailable {}
+
+    .product-details__full-details {
+        display: none;
+
+        .ui-dialog & {
+            display: block;
+        }
+    }
+
+    .product-details__media {
+        margin: 0 auto;
+        max-width: $product-details-primary-image-max-width;
+
+        @include respond-to($medium-breakpoint) {
+            max-width: $product-details-primary-image-max-width-medium;
+        }
+    }

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

@@ -0,0 +1,182 @@
+/*------------------------------------*\
+    #PRODUCT-LIST
+\*------------------------------------*/
+
+$product-list-media-ratio:  2 / 3 !default;
+$product-list-media-padding-right: $spacing-unit * 2 !default;
+$product-list-media-width:  120px + $product-list-media-padding-right !default;
+$product-list-item-bg-color: $background-color-component !default;
+
+
+.product-list {
+    @extend %list-reset;
+    margin-bottom: $vertical-margin;
+
+    @include respond-to ($medium-breakpoint) {
+        display: table;
+        width: 100%;
+        border-spacing:  0;
+        border-collapse: collapse;
+    }
+}
+
+.product-list--narrow {
+    @include respond-to ($medium-breakpoint) {
+        display: block;
+        width: auto;
+    }
+}
+
+    .product-list__item {
+        @extend %clearfix;
+        margin-bottom: $spacing-unit * 2;
+        background-color: $product-list-item-bg-color;
+
+        @include respond-to ($medium-breakpoint) {
+            display: table-row;
+        }
+
+        .product-list--narrow & {
+            @include respond-to ($medium-breakpoint) {
+                display: block;
+                width: auto;
+            }
+        }
+    }
+
+        /**
+         * 1. this block is designed to have two cells, maximum
+         */
+
+        .product-list__item-cell {
+            padding: $spacing-unit * 2;
+            padding-bottom: 0;
+
+            @include respond-to ($medium-breakpoint) {
+                display: table-cell;
+                padding-bottom: $spacing-unit * 2;
+                vertical-align: top;
+            }
+
+            .product-list--narrow & {
+                @include respond-to ($medium-breakpoint) {
+                    display: block;
+                    vertical-align: baseline;
+                }
+            }
+
+            & + & { /* [1] */
+                @include respond-to ($medium-breakpoint) {
+                    padding-left: ($spacing-unit * 2);
+                }
+
+                .product-list--narrow & {
+                    @include respond-to ($medium-breakpoint) {
+                        padding-left: 0;
+                    }
+                }
+
+                /**
+                 * Extend `.table {}` in _table.scss.
+                 */
+
+                .table {
+                    margin: 0;
+                }
+            }
+
+            /**
+             * Extend `.property {}` in _property.scss.
+             */
+
+            .property {
+                margin: $vertical-margin 0 0;
+            }
+        }
+
+            .product-list__summary {
+                display: table;
+                width: 100%;
+                border-spacing:  0;
+                border-collapse: collapse;
+            }
+
+                .product-list__media {
+                    display: table-cell;
+                    padding-right: $product-list-media-padding-right;
+                    width: $product-list-media-width;
+                    max-width: $product-list-media-width;
+                    vertical-align: top;
+                }
+
+                    .product-list__media-link {
+                        display: block;
+                        padding: 0 0 ((1 / $product-list-media-ratio) * 100%);
+                        height: 0;
+                    }
+
+                        .product-list__media-image {
+                            display: block;
+                        }
+
+                .product-list__info {
+                    display: table-cell;
+                    text-align: left;
+                    vertical-align: top;
+                }
+
+                    /**
+                     * 1. Element selector used as base does not currently have a class on this element
+                     */
+                    .product-list__name {
+                        margin: ($spacing-unit / 2) 0 0;
+                        font-weight: bold;
+
+                        a { /* [1] */
+                            color: $product-name-color;
+
+                            &:hover {
+                                color: $product-name-color;
+                            }
+                        }
+                    }
+
+                    .product-list__id {
+                        margin: ($spacing-unit / 2) 0 0;
+                    }
+
+                    .product-list__price-group {
+                        margin: ($spacing-unit / 2) 0 0;
+                    }
+
+                        .product-list__price {
+                            display: inline-block;
+                            margin: 0 ($spacing-unit / 2) 0 0;
+                            white-space: nowrap;
+                        }
+
+                    .product-list__option-group {
+                        margin: ($spacing-unit / 2) 0 0;
+                    }
+
+                        .product-list__option {
+                            display: inline-block;
+                            margin: 0 ($spacing-unit / 2) 0 0;
+                            white-space: nowrap;
+                        }
+
+                    .product-list__customization {
+                        margin: ($spacing-unit / 2) 0 0;
+                    }
+
+                    .product-list__quantity {
+                        margin: ($spacing-unit / 2) 0 0;
+                    }
+
+                    .product-list__inventory-status {
+                        margin: ($spacing-unit / 2) 0 0;
+                    }
+
+                    .product-list__actions {
+                        padding: $spacing-unit 0;
+                    }

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

@@ -0,0 +1,20 @@
+/*------------------------------------*\
+    #PRODUCT-LIST-CONTENT-BLOCK
+\*------------------------------------*/
+
+/**
+ * 1. Since slick adds various DOM elements the .grid--flush class
+ * does not remove the padding for grid__cells in the context of a slider.
+ * This override is a little unorthodox but since avalanche generates all the
+ * grid CSS there isn't a better place to do this contextual styling.
+ */
+.product-list-content-block {
+    .grid__cell { /* [1] */
+        padding-left: 0;
+    }
+}
+
+    .product-list-content-block__heading {
+        @extend %heading;
+        @extend %heading--2;
+    }

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

@@ -0,0 +1,109 @@
+/*------------------------------------*\
+    #PRODUCT-MEDIA
+\*------------------------------------*/
+
+$product-media-primary-image-max-width:         255px !default;
+$product-media-primary-image-max-width-wide:    360px !default;
+$product-media-primary-image-ratio: 2 / 3 !default;
+$product-media-alt-image-max-width: 70px !default;
+
+$product-media-alt-image-selected-outline-color:  $primary-color !default;
+$product-media-quickview-height: 400px !default;
+
+.product-media {
+    margin: ($spacing-unit * 2) auto 0;
+    max-width: $product-media-primary-image-max-width;
+
+    @include respond-to($wide-breakpoint) {
+        max-width: $product-media-primary-image-max-width-wide;
+    }
+}
+
+.product-media--carousel {
+    @include respond-to($wide-breakpoint) {
+        margin: ($spacing-unit * 2) 0 0;
+    }
+}
+
+    .product-media__container {
+
+        @include respond-to($wide-breakpoint) {
+            display: flex;
+            align-items: flex-start;
+            flex-direction: row;
+        }
+
+        .ui-dialog & {
+            height: $product-media-quickview-height;
+        }
+    }
+
+        /**
+        * 1. provides positioning context for loading indicator
+        */
+        .product-media__primary-image {
+            position: relative; /* [1] */
+            margin: 0 auto;
+            width: 100%;
+            max-width: $product-media-primary-image-max-width;
+
+            @include respond-to($wide-breakpoint) {
+                max-width: $product-media-primary-image-max-width-wide;
+            }
+
+            .product-media--carousel & {
+                flex: 1 1 auto;
+                order: 1;
+
+                @include respond-to($wide-breakpoint) {
+                    flex: 1 1 auto;
+                    order: 2;
+                }
+            }
+        }
+
+            .product-media__primary-image-link {
+                display: block;
+                padding: 0 0 ((1 / $product-media-primary-image-ratio) * 100%);
+                height: 0;
+
+                .product-media--carousel & {
+                    padding-bottom: 0;
+                    height: auto;
+                }
+            }
+
+                .product-media__primary-image-link-image {}
+
+        .product-media__alt-image-list {
+            @extend %list-reset;
+
+            @include respond-to($wide-breakpoint) {
+                flex: 0 0 22%;
+                order: 1;
+            }
+        }
+
+        .product-media__alt-images {
+            margin-top: $spacing-unit / 2;
+            width: $product-media-alt-image-max-width;
+
+            @include respond-to($wide-breakpoint) {
+                margin-top: $spacing-unit;
+            }
+        }
+
+            .product-media__alt-image {
+                margin: $spacing-unit / 2;
+            }
+
+                .product-media__alt-image-link {
+                    display: inline-block;
+
+                    .slick-current & {
+                        cursor: default;
+                        outline: 2px solid $product-media-alt-image-selected-outline-color;
+                    }
+                }
+
+                .product-media__alt-image-link--selected {}