workarea-haven_theme 1.3.0

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

@@ -0,0 +1,105 @@
+/*------------------------------------*\
+    #PRODUCT-DETAILS
+\*------------------------------------*/
+
+$product-details-left-column-width: 44% !default;
+$product-details-right-column-width: 56% !default;
+$product-details-right-padding-right: 140px !default;
+$product-details-quantity-width: 96px !default;
+
+$product-details-header-max-width: 550px !default;
+
+$product-details-name-font-size: 22px !default;
+$product-details-name-font-size-wide: 30px !default;
+$product-details-id-font-size: 30px !default;
+$product-details-id-color: $font-color-light !default;
+
+
+
+/**
+ * 1. within a jQuery Dialog, set width since there is no
+ *    .product-details-container
+ */
+
+.product-details {
+    @extend %clearfix;
+
+    .ui-dialog & { /* [1] */
+        max-width: $dialog-content-max-width;
+    }
+}
+
+.product-details--generic {}
+
+    .product-details__left-column {
+        @include respond-to($medium-breakpoint) {
+            width: $product-details-left-column-width;
+            float: left;
+        }
+    }
+
+    .product-details__right-column {
+        @include respond-to($medium-breakpoint) {
+            width: $product-details-right-column-width;
+            float: right;
+        }
+
+        @include respond-to($wide-breakpoint) {
+            padding-right: $product-details-right-padding-right;
+        }
+    }
+
+    .product-details__header {
+        max-width: $product-details-header-max-width;
+    }
+
+        .product-details__name {
+            margin-bottom: 0;
+            font-size: $product-details-name-font-size;
+
+            @include respond-to($medium-breakpoint) {
+                font-size: $product-details-name-font-size-wide;
+            }
+        }
+
+            .product-details__id {
+                margin-bottom: $spacing-unit;
+                color: $product-details-id-color;
+                font-size: $font-size-small;
+
+                @include respond-to($medium-breakpoint) {
+                    display: inline-block;
+                    margin-bottom: $vertical-margin;
+                    font-size: $font-size;
+                }
+            }
+
+
+    .product-details__short-description {}
+
+
+    .product-details__add-to-cart-form {}
+
+        .product-details__quantity {
+            margin-bottom: $vertical-margin;
+            max-width: $product-details-quantity-width;
+        }
+
+        .product-details__clear-selection {
+            margin-bottom: $vertical-margin;
+        }
+
+        .product-details__add-to-cart-action {
+            margin-bottom: $vertical-margin;
+        }
+
+        .product-details__unavailable {}
+
+
+    .product-details__full-details {
+        display: none;
+
+        .ui-dialog & {
+            display: block;
+        }
+    }

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

@@ -0,0 +1,22 @@
+/*------------------------------------*\
+    #PRODUCT-INSIGHTS-CONTENT-BLOCK
+\*------------------------------------*/
+
+$product-insights-content-block-background-color: $background-color-alternate !default;
+
+
+.product-insights-content-block {
+    padding: ($spacing-unit * 4) 0;
+    background-color: $product-insights-content-block-background-color;
+}
+
+.product-insights-content-block--full-bleed {
+    @include full-bleed-container;
+}
+
+    .product-insights-content-block__heading {
+        @extend %heading;
+        @extend %heading--4;
+        @extend %heading--upcase;
+        text-align: center;
+    }

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

@@ -0,0 +1,186 @@
+/*------------------------------------*\
+    #PRODUCT-LIST
+\*------------------------------------*/
+
+$product-list-media-ratio: $product-image-ratio !default;
+$product-list-media-size:  80px !default;
+
+$product-list-item-font-size: $font-size-tiny !default;
+$product-list-item-font-size-small: $font-size-tiny - 2px !default;
+$product-list-item-background-color: $background-color-component !default;
+$product-list-item-options-color: $product-list-item-options-color !default;
+$product-list-item-border: 1px solid $border-color !default;
+$product-list-item-info-items-margin: ($spacing-unit / 2) 0 0 !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--medium {}
+
+.product-list--narrow {
+    @include respond-to ($medium-breakpoint) {
+        display: block;
+        width: auto;
+    }
+}
+
+    .product-list__item {
+        @extend %clearfix;
+        margin-bottom: $spacing-unit * 2;
+        padding: ($spacing-unit * 2) $spacing-unit;
+        background-color: $product-list-item-background-color;
+        border: $product-list-item-border;
+
+        @include respond-to($medium-breakpoint) {
+            display: table-row;
+        }
+
+        .product-list--narrow & {
+            @include respond-to($medium-breakpoint) {
+                display: block;
+                width: auto;
+            }
+        }
+    }
+
+        .product-list__summary {
+            display: inline-block;
+
+            @include respond-to($medium-breakpoint) {
+                width: 50%;
+            }
+
+            .product-list--medium,
+            .product-list--narrow & {
+                width: 100%;
+            }
+        }
+
+            .product-list__media {
+                display: inline-block;
+                padding: 0 $spacing-unit 0 0;
+                width: $product-list-media-size;
+                max-width: $product-list-media-size;
+                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: inline-block;
+                text-align: left;
+                vertical-align: top;
+            }
+
+                .product-list__name {
+                    margin: $product-list-item-info-items-margin;
+                }
+
+                .product-list__option-group {
+                    margin: $product-list-item-info-items-margin;
+                }
+
+                    .product-list__option {
+                        display: block;
+                        margin: 0 ($spacing-unit / 2) 0 0;
+                        color: $product-list-item-options-color;
+                        font-size: $product-list-item-font-size-small;
+                    }
+
+                .product-list__customization {
+                    margin: $product-list-item-info-items-margin;
+                }
+
+                .product-list__download-link {
+                    margin: $product-list-item-info-items-margin;
+                }
+
+
+                .product-list__quantity {
+                    margin: $product-list-item-info-items-margin;
+                    font-size: $product-list-item-font-size-small;
+                    white-space: nowrap;
+                }
+
+        .product-list__actions {
+            margin-left: $product-list-media-size;
+
+            @include respond-to($medium-breakpoint) {
+                display: inline-block;
+                margin-left: 0;
+            }
+
+            .product-list--narrow & {
+                display: block;
+                margin-bottom: $spacing-unit;
+                margin-left: $product-list-media-size;
+            }
+        }
+
+            .product-list__remove-item {
+                text-align: center;
+            }
+
+        /**
+        * 1. Left margin must be auto to ensure flex alignment is correct.
+        */
+        .product-list__prices {
+            margin: 0 ($spacing-unit * 2);
+            text-align: right;
+
+            @include respond-to($medium-breakpoint) {
+                display: inline-block;
+                margin: 0;
+                margin-left: auto;/* [1] */
+            }
+
+            .product-list--medium {
+                margin: 0 ($spacing-unit * 2);
+            }
+
+            .product-list--narrow & {
+                display: block;
+                margin-left: $product-list-media-size;
+                text-align: left;
+            }
+        }
+
+            .product-list__total-price {
+                padding-top: $spacing-unit;
+                border-top: $product-list-item-border;
+
+                @include respond-to($medium-breakpoint) {
+                    padding-left: $spacing-unit * 2;
+                }
+            }
+
+        .product-list__shipments {}
+
+            .product-list__shipments-heading {}
+
+            .product-list__tracking {
+                display: block;
+                margin-bottom: $spacing-unit;
+                text-align: right;
+            }
+
+                .product-list__tracking__qty {}
+                .product-list__tracking__link {}

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

@@ -0,0 +1,22 @@
+/*------------------------------------*\
+    #PRODUCT-LIST-CONTENT-BLOCK
+\*------------------------------------*/
+
+$product-list-content-block-background-color: $background-color-alternate !default;
+
+
+.product-list-content-block {
+    padding: ($spacing-unit * 4) 0;
+    background-color: $product-list-content-block-background-color;
+}
+
+.product-list-content-block--full-bleed {
+    @include full-bleed-container;
+}
+
+    .product-list-content-block__heading {
+        @extend %heading;
+        @extend %heading--4;
+        @extend %heading--upcase;
+        text-align: center;
+    }

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

@@ -0,0 +1,70 @@
+/*------------------------------------*\
+    #PRODUCT-MEDIA
+\*------------------------------------*/
+
+$product-primary-image-max-width: 600px !default;
+$product-primary-image-ratio: $product-image-ratio !default;
+
+$product-media-alt-images-background-color: $background-color-alternate !default;
+$product-media-alt-image-border: 2px solid $transparent !default;
+$product-alt-image-selected-border-color:  $primary-color !default;
+
+.product-media {
+    margin-right: $spacing-unit * 2;
+}
+
+.product-media--carousel {}
+
+    /**
+     * 1. provides positioning context for loading indicator
+     */
+    .product-media__primary-image {
+        display: block;
+        position: relative; /* [1] */
+        margin: 0 auto;
+        max-width: $product-primary-image-max-width;
+    }
+
+        .product-media__primary-image-link {
+            display: block;
+            padding: 0 0 ((1 / $product-primary-image-ratio) * 100%);
+            height: 0;
+            vertical-align: top;
+
+            .product-media--carousel & {
+                padding-bottom: 0;
+                height: auto;
+            }
+        }
+
+            .product-media__primary-image-link-image {
+                margin: 0 auto;
+            }
+
+
+    .product-media__alt-images {
+        @extend %inline-list;
+        margin: 0;
+        padding: $spacing-unit ($spacing-unit * 3);
+        background-color: $product-media-alt-images-background-color;
+    }
+
+        .product-media__alt-image {
+            margin: 0 $spacing-unit / 2;
+
+            @include respond-to($medium-breakpoint) {
+                margin: 0 $spacing-unit;
+            }
+        }
+
+            .product-media__alt-image-link {
+                display: inline-block;
+                border-top: $product-media-alt-image-border;
+
+                .slick-current & {
+                    border-color: $product-alt-image-selected-border-color;
+                    cursor: default;
+                }
+            }
+
+            .product-media__alt-image-link--selected {}

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

@@ -0,0 +1,82 @@
+/*------------------------------------*\
+    #PRODUCT-PRICES
+\*------------------------------------*/
+
+$product-price-details-font-size: 15px !default;
+$product-price-details-font-size-wide: 18px !default;
+$product-price-color: $product-price-color !default;
+$product-price-sale-color: $product-price-sale-color !default;
+$product-price-discount-color: $product-price-discount-color !default;
+
+.product-prices {
+    font-size: $font-size;
+    font-weight: $font-weight-medium;
+}
+
+.product-prices--summary {}
+
+.product-prices--details {
+    margin: $vertical-margin 0;
+    font-size: $product-price-details-font-size;
+    font-weight: $font-weight-regular;
+
+    @include respond-to($medium-breakpoint) {
+        margin-top: 0;
+        font-size: $product-price-details-font-size-wide;
+    }
+}
+
+    .product-prices__price {
+        display: inline-block;
+        margin: 0;
+        color: $product-price-color;
+        white-space: nowrap;
+
+        .product-prices--details & {
+            display: inline;
+            white-space: normal;
+        }
+
+        .product-prices--summary & {
+            font-size: $font-size-tiny;
+            font-weight: $font-weight-medium;
+
+            @include respond-to($medium-breakpoint) {
+                font-size: $font-size;
+            }
+        }
+
+        & + & {
+            margin-left: $spacing-unit / 2;
+
+            .product-prices--summary & {
+                margin-left: 0;
+            }
+        }
+    }
+
+    .product-prices__price--original {}
+
+    .product-prices__price--original-range {
+        .product-summary & {
+            @extend %visually-hidden;
+        }
+    }
+
+    .product-prices__price--sale {
+        color: $product-price-sale-color;
+        font-weight: $font-weight-heavy;
+
+        .product-prices--details & {
+            font-weight: $font-weight-regular;
+        }
+    }
+
+
+    .product-prices__discounts {
+        color: $product-price-discount-color;
+    }
+
+        .product-prices__discount {}
+
+            .product-prices__discount-price {}