workarea-nvy_theme 1.1.2

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

@@ -0,0 +1,16 @@
+/*------------------------------------*\
+    #PRODUCT-DETAIL-CONTAINER
+\*------------------------------------*/
+
+.product-detail-container {}
+
+    .product-detail-container__description {
+        margin: $vertical-margin 0;
+    }
+
+        .product-detail-container__description-heading {
+            @extend %heading;
+            @extend %heading--5;
+        }
+
+        .product-detail-container__description-body {}

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

@@ -0,0 +1,82 @@
+/*------------------------------------*\
+    #PRODUCT-DETAILS
+\*------------------------------------*/
+
+$product-details-info-max-width: 480px !default;
+$product-details-id-color: $product-id-color !default;
+
+$product-details-quantity-width: 62px !default;
+
+$product-details-add-to-cart-margin: ($spacing-unit * 6) !default;
+$product-details-add-to-cart-margin-medium: ($spacing-unit * 7) !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__info {
+        max-width: $product-details-info-max-width;
+
+        @include respond-to($medium-breakpoint) {
+            padding-right: ($spacing-unit * 5);
+        }
+    }
+
+        .product-details__name {
+            line-height: 1;
+        }
+
+            .product-details__heading {
+                .ui-dialog & {
+                    text-align: left;
+                }
+            }
+
+            .product-details__id {
+                color: $product-details-id-color;
+            }
+
+
+        .product-details__description {}
+
+
+        .product-details__add-to-cart-form {
+            margin-bottom: $product-details-add-to-cart-margin;
+
+            @include respond-to($medium-breakpoint) {
+                margin-bottom: $product-details-add-to-cart-margin-medium;
+            }
+        }
+
+            .product-details__quantity {
+                display: inline-block;
+                margin-right: $spacing-unit;
+                width: $product-details-quantity-width;
+            }
+
+            .product-details__add-to-cart-action {
+                display: inline-block;
+                width: calc(100% - (#{$product-details-quantity-width} + #{$spacing-unit * 2}));
+            }
+
+            .product-details__unavailable {}
+
+            .product-details__inventory-status {}
+
+        .product-details__full-details {
+            display: none;
+
+            .ui-dialog & {
+                display: block;
+            }
+        }

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

@@ -0,0 +1,193 @@
+/*------------------------------------*\
+    #PRODUCT-LIST
+\*------------------------------------*/
+
+$product-list-media-ratio: $product-image-ratio !default;
+$product-list-item-media-width: 80px !default;
+$product-list-item-border: 1px solid $product-list-item-border-color !default;
+$product-list-item-info-font: $secondary-font-family !default;
+$product-list-id-color: $product-id-color !default;
+$product-list-info-item-margin: $spacing-unit 0 0 !default;
+
+
+.product-list {
+    @extend %list-reset;
+    margin-bottom: $vertical-margin;
+}
+
+.product-list--narrow {}
+
+    .product-list__item {
+        @extend %clearfix;
+        position: relative;
+        margin-bottom: $spacing-unit * 2;
+        border-bottom: $product-list-item-border;
+
+        @include respond-to ($medium-breakpoint) {
+            display: table;
+            margin-bottom: $spacing-unit * 3;
+            width: 100%;
+            border: $product-list-item-border;
+            border-spacing:  0;
+            border-collapse: collapse;
+        }
+
+        .product-list--narrow & {
+            @include respond-to ($medium-breakpoint) {
+                display: block;
+                width: auto;
+            }
+        }
+
+        .ui-dialog & {
+            @include respond-to($medium-breakpoint) {
+                min-width: $dialog-content-max-width;
+            }
+        }
+    }
+
+        /**
+         * 1. this block is designed to have two cells, maximum
+         */
+
+        .product-list__item-cell {
+            padding: $spacing-unit * 2;
+
+            @include respond-to ($medium-breakpoint) {
+                display: table-cell;
+                padding: ($spacing-unit * 3) ($spacing-unit * 4);
+                vertical-align: top;
+            }
+
+            .product-list--narrow & {
+                @include respond-to ($medium-breakpoint) {
+                    display: block;
+                    vertical-align: baseline;
+                }
+            }
+
+            .cart & {
+                @include respond-to ($medium-breakpoint) {
+                    padding: ($spacing-unit * 7) ($spacing-unit * 4) ($spacing-unit * 3);
+                }
+            }
+
+            & + & { /* [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: 0 $spacing-unit 0 0;
+                    width: $product-list-item-media-width;
+                    max-width: $product-list-item-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;
+                    padding-left: $spacing-unit * 3;
+                    font-family: $product-list-item-info-font;
+                    text-align: left;
+                    vertical-align: top;
+                }
+
+                    .product-list__name {
+                        margin: 0;
+                        font-size: 16px;
+                    }
+
+                    .product-list__id {
+                        margin: $product-list-info-item-margin;
+                        color: $product-list-id-color;
+                    }
+
+                    .product-list__price-group {
+                        margin: $product-list-info-item-margin;
+                    }
+
+                        .product-list__price {
+                            display: inline-block;
+                            margin: 0 ($spacing-unit / 2) 0 0;
+                            white-space: nowrap;
+                        }
+
+                    .product-list__option-group {
+                        margin: $product-list-info-item-margin;
+                    }
+
+                        .product-list__option {
+                            display: inline-block;
+                            margin: 0 ($spacing-unit / 2) 0 0;
+                            white-space: nowrap;
+                        }
+
+                    .product-list__customization {
+                        margin: $product-list-info-item-margin;
+                    }
+
+                    .product-list__quantity {
+                        margin: $product-list-info-item-margin;
+                    }
+
+                    .product-list__inventory-status {
+                        margin: ($spacing-unit / 2) 0 0;
+                    }
+
+            .product-list__item-actions {
+                margin-top: $spacing-unit * 2;
+                text-align: right;
+            }
+
+                .product-list__remove-item {
+                    position: absolute;
+                    top: 0;
+                    right: $spacing-unit * 2;
+
+                    @include respond-to($medium-breakpoint) {
+                        top: $spacing-unit * 2;
+                        right: $spacing-unit * 4;
+                    }
+                }

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

@@ -0,0 +1,76 @@
+/*------------------------------------*\
+    #PRODUCT-MEDIA
+\*------------------------------------*/
+
+$product-media-alt-images-max-width:  120px !default;
+$product-media-primary-image-max-width:  472px !default;
+$product-media-primary-image-ratio: $product-image-ratio !default;
+$product-media-alt-image-selected-outline-color:  $highlight-color !default;
+
+
+.product-media {
+    @include respond-to($medium-breakpoint) {
+        display: flex;
+    }
+}
+
+    .product-media__alt-images {
+        @extend %list-reset;
+
+        @include respond-to($medium-breakpoint) {
+            display: inline-block;
+            margin-right: $spacing-unit * 2;
+            padding-top: $spacing-unit * 2;
+            max-width: $product-media-alt-images-max-width;
+            vertical-align: top;
+        }
+    }
+
+        .product-media__alt-image {
+            text-align: center;
+
+            @include respond-to($medium-breakpoint) {
+                margin-bottom: $spacing-unit;
+            }
+        }
+
+            .product-media__alt-image-link {
+                display: inline-block;
+            }
+
+            .product-media__alt-image-link--selected {
+                cursor: default;
+                outline: 1px solid $product-media-alt-image-selected-outline-color;
+            }
+
+    /**
+     * 1. provides positioning context for loading indicator
+     * 2. Styles for pages with multiple product images
+     */
+    .product-media__primary-image {
+        position: relative; /* [1] */
+        margin: 0 auto;
+        max-width: $product-media-primary-image-max-width;
+
+        @include respond-to($medium-breakpoint) {
+            display: inline-block;
+        }
+
+        .product-media__alt-images + & { /* [2] */
+            display: none;
+
+            @include respond-to($medium-breakpoint) {
+                display: inline-block;
+                margin: 0;
+            }
+        }
+    }
+
+        .product-media__primary-image-link {
+            display: block;
+            padding: 0 0 ((1 / $product-media-primary-image-ratio) * 100%);
+            height: 0;
+            vertical-align: top;
+        }
+
+            .product-media__primary-image-link-image {}

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

@@ -0,0 +1,46 @@
+/*------------------------------------*\
+    #PRODUCT-PRICES
+\*------------------------------------*/
+
+$product-prices-font: $secondary-font-family !default;
+$product-prices-details-font-size: 16px !default;
+
+$product-prices-details-decoration-offset: -4px !default;
+$product-prices-details-decoration-height: 3px !default;
+$product-prices-details-decoration-width: 100% !default;
+$product-prices-details-decoration-color: $product-price-decoration-color !default;
+
+
+.product-prices {
+    font-family: $product-prices-font;
+}
+
+.product-prices--summary {}
+
+.product-prices--details {
+    margin-bottom: $vertical-margin;
+    font-size: $product-prices-details-font-size;
+}
+
+    .product-prices__price {
+        display: block;
+        margin: 0;
+        white-space: nowrap;
+
+        .product-prices--details & {
+            position: relative;
+            display: inline;
+            margin-right: $spacing-unit * 3;
+            white-space: normal;
+
+            &:first-of-type:after {
+                position: absolute;
+                bottom: $product-prices-details-decoration-offset;
+                left: 0;
+                width: $product-prices-details-decoration-width;
+                height: $product-prices-details-decoration-height;
+                background-color: $product-prices-details-decoration-color;
+                content: '';
+            }
+        }
+    }

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

@@ -0,0 +1,119 @@
+/*------------------------------------*\
+    #PRODUCT-SUMMARY
+\*------------------------------------*/
+
+$product-summary-width: 276px !default;
+$product-summary-small-width: 240px !default;
+$product-summary-hover-box-shadow: 0 2px 15px $black-alpha-15;
+
+$product-summary-media-ratio: $product-image-ratio !default;
+
+$product-summary-name-font: $secondary-font-family !default;
+$product-summary-name-color: $product-name-color !default;
+$product-summary-name-font-size: 16px !default;
+$product-summary-name-font-size-wide: 20px !default;
+
+
+/**
+ * 1. sets positioning context for any absolutely positioned product summary
+ *    child elements
+ * 2. Create a dropshadow on hover with performant transition
+ * 3. Offset Y axis on hover to make dropshadow look realistic
+ * 4. Disable dropshadow for product-summary--small
+ */
+
+.product-summary {
+    position: relative; /* [1] */
+    margin-bottom: $spacing-unit * 5;
+    padding: $spacing-unit;
+    transform: translateY(0);
+    transition: transform $transition-time ease-out;
+
+    @include respond-to($wide-breakpoint) {
+        padding: ($spacing-unit * 2);
+    }
+
+    &:after { /* [2] */
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        box-shadow: $product-summary-hover-box-shadow;
+        opacity: 0;
+        transition: opacity $transition-time ease-out;
+        pointer-events: none;
+        content: '';
+    }
+
+    &:hover {
+        transform: translateY(-2px); /* [3] */
+        transition-timing-function: ease-in;
+
+        &:after {
+            opacity: 1;  /* [2] */
+            transition-timing-function: ease-in;
+        }
+    }
+
+    .page-content__aside & {
+        padding: 0;
+    }
+}
+
+.product-summary--small {
+    &:after {
+        display: none; /* [4] */
+    }
+
+    &:hover {
+        transform: translateY(0); /* [4] */
+    }
+}
+
+    .product-summary__media {
+        margin: 0 auto ($spacing-unit * 3);
+        max-width: $product-summary-width;
+
+        @include respond-to($medium-breakpoint) {
+            margin-bottom: $spacing-unit * 2;
+        }
+
+        .product-summary--small & {
+            max-width: $product-summary-small-width;
+        }
+    }
+
+        .product-summary__media-link {
+            display: block;
+            padding: 0 0 ((1 / $product-summary-media-ratio) * 100%);
+            height: 0;
+        }
+
+            .product-summary__media-image {}
+
+    .product-summary__info {
+        margin: 0 auto;
+        max-width: $product-summary-width;
+
+        .product-summary--small & {
+            max-width: $product-summary-small-width;
+        }
+    }
+
+        .product-summary__name {
+            @extend %break-word;
+            margin: 0 0 $spacing-unit;
+            color: $product-summary-name-color;
+            font-size: $product-summary-name-font-size;
+            font-family: $product-summary-name-font;
+            font-weight: bold;
+
+            @include respond-to($medium-breakpoint) {
+                font-size: $product-summary-name-font-size-wide;
+            }
+
+            a {
+                color: $product-summary-name-color;
+            }
+        }