workarea-haven_theme 1.3.0

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

@@ -0,0 +1,104 @@
+/*------------------------------------*\
+    #PRODUCT-SUMMARY
+\*------------------------------------*/
+
+$product-summary-max-width-medium: 260px !default;
+$product-summary-small-width: 200px !default;
+$product-summary-divider-min-height: 90px !default;
+$product-summary-divider-min-height-wide: 120px !default;
+
+$product-summary-media-max-height: 232px !default;
+$product-summary-media-ratio: $product-image-ratio !default;
+
+$product-summary-border-color: $product-summary-border-color !default;
+$product-summary-background-color: $background-color-component !default;
+$product-summary-background-color-hover: $product-summary-background-color-hover !default;
+$product-summary-name-color: $product-summary-name-color !default;
+
+
+/**
+ * 1. sets positioning context for any absolutely positioned product summary
+ *    child elements
+ */
+
+.product-summary {
+    position: relative; /* [1] */
+    margin: 0 auto $spacing-unit;
+    background-color: $product-summary-background-color;
+    border: 2px solid $product-summary-border-color;
+
+    @include respond-to($medium-breakpoint) {
+        max-width: $product-summary-max-width-medium;
+    }
+
+    .product-summary--small & {
+        max-width: $product-summary-small-width;
+    }
+
+    .search-autocomplete & {
+        margin-left: 0;
+        margin-right: 0;
+    }
+}
+
+.product-summary--small {}
+
+    .product-summary__media {
+        margin: $spacing-unit auto;
+        max-height: $product-summary-media-max-height;
+        text-align: center;
+
+        @include respond-to($small-horizontal-breakpoint) {
+            margin: ($spacing-unit * 2) auto;
+        }
+
+        @include respond-to($medium-breakpoint) {
+            max-height: none;
+        }
+    }
+
+        .product-summary__media-link {
+            display: block;
+            padding: 0 0 ((1 / $product-summary-media-ratio) * 100%);
+            height: 0;
+        }
+
+            .product-summary__media-image {}
+
+    .product-summary__divider {
+        min-height: $product-summary-divider-min-height;
+
+        @include respond-to($medium-breakpoint) {
+            width: 100%;
+            min-height: $product-summary-divider-min-height-wide;
+            border-top: 2px solid $product-summary-border-color;
+
+            .product-summary:hover & {
+                background: $product-summary-background-color-hover;
+            }
+        }
+    }
+
+        .product-summary__info {
+            margin: $spacing-unit auto 0;
+            padding: $spacing-unit ($spacing-unit * 2);
+
+            @include respond-to($medium-breakpoint) {
+                margin-top: $spacing-unit * 2;
+            }
+        }
+
+            .product-summary__name {
+                @extend %break-word;
+                margin: 0 0 ($spacing-unit / 2);
+            }
+
+                .product-summary__name-link {
+                    color: $product-summary-name-color;
+                    font-size: $font-size-tiny;
+                    font-weight: $font-weight-regular;
+
+                    @include respond-to($medium-breakpoint) {
+                        font-size: $font-size;
+                    }
+                }

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

@@ -0,0 +1,71 @@
+/*------------------------------------*\
+    #PROPERTY
+\*------------------------------------*/
+
+.property {
+    margin-bottom: $vertical-margin;
+
+    .mobile-filters__content & {
+        margin: 0;
+    }
+}
+
+.property--responsive {
+    @include respond-to($medium-breakpoint) {
+        display: table-row;
+        margin: 0;
+    }
+
+    /**
+     * Extend `.value {}` in _value.scss
+     *
+     * 1. bottom padding matches default property bottom margin
+     */
+
+    .value {
+        display: block;
+
+        @include respond-to($medium-breakpoint) {
+            display: table-cell;
+            padding: $spacing-unit; /* [1] */
+            vertical-align: top;
+        }
+    }
+}
+
+.property--valid {}
+
+.property--invalid {}
+
+    /**
+     * 1. allows use of `strong` elements
+     * 2. bottom padding matches default property bottom margin
+     */
+
+    .property__name {
+        display: block;
+        font-weight: normal; /* [1] */
+
+        .property--responsive & {
+            @include respond-to($medium-breakpoint) {
+                display: table-cell;
+                padding: $spacing-unit; /* [2] */
+                vertical-align: middle;
+            }
+        }
+    }
+
+        .property__text {
+            letter-spacing: $font-letter-spacing;
+
+            .mobile-filters-nav & {
+                display: block;
+                padding: $spacing-unit 0;
+                font-weight: $font-weight-medium;
+                text-transform: uppercase;
+            }
+        }
+
+        .property__requirement {}
+
+        .property__requirement--optional {}

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

@@ -0,0 +1,101 @@
+/*------------------------------------*\
+    #QUANTITY-CONTROL
+\*------------------------------------*/
+
+$quantity-input-color: $font-color !default;
+$quantity-control-background-color: $background-color !default;
+$quantity-control-width-mobile: 50px !default;
+$quantity-control-width: 100px !default;
+$quantity-control-height: 42px !default;
+$quantity-control-border: 1px solid $quantity-control-border-color !default;
+
+$quantity-control-error-label-top-offset: 4em !default;
+$quantity-control-error-label-left-offset-dialog: 110px !default;
+$quantity-control-error-label-width: 300px !default;
+$quantity-control-error-label-width-dialog: 200px !default;
+$quantity-control-error-label-width-dialog-list-item: 100px !default;
+
+$quantity-control-button-color: $quantity-control-button-color !default;
+$quantity-control-button-background-color: $quantity-control-button-background-color !default;
+
+/**
+ * 1. Arbitrary padding value used to visually center text in input
+ * 2. Subtract double border width from height & width to ensure consistent rendering
+ * 3. Remove arrows from number field styles on non-mobile devices
+ * 4. Some margins are still there even though it's hidden
+ */
+
+.quantity-control {
+    position: relative;
+    width: $quantity-control-width;
+    height: $quantity-control-height;
+    border: $quantity-control-border;
+
+    /**
+     * Extend .value__error from _value.scss
+     */
+
+    label.value__error {
+        position: absolute;
+        bottom: $quantity-control-error-label-top-offset;
+        width: $quantity-control-error-label-width;
+
+        .ui-dialog & {
+            top: 0;
+            bottom: auto;
+            left: $quantity-control-error-label-left-offset-dialog;
+            width: $quantity-control-error-label-width-dialog;
+        }
+
+        .ui-dialog .product-list__item & {
+            width: $quantity-control-error-label-width-dialog-list-item;
+        }
+    }
+}
+
+    .quantity-control__input {
+        padding: $spacing-unit;
+        padding-right: 10px; /* [1] */
+        width: $quantity-control-width-mobile - 2px; /* [2] */
+        height: $quantity-control-height - 2px; /* [2] */
+        color: $quantity-input-color;
+        text-align: center;
+        background-color: $quantity-control-background-color;
+        border: 0;
+
+        /* [3] */
+        @include respond-to($medium-breakpoint) {
+            width: $quantity-control-width - 2px; /* [2] */
+            appearance: textfield;
+
+            &::-webkit-outer-spin-button,
+            &::-webkit-inner-spin-button {
+                margin: 0; /* [4] */
+                appearance: none;
+            }
+        }
+    }
+
+    .quantity-control__button {
+        display: none;
+
+        @include respond-to($medium-breakpoint) {
+            @include center($to: vertical);
+            display: inline-block;
+            z-index: index($quantity-control, button);
+            padding: $spacing-unit;
+            height: 100%;
+            color: $quantity-control-button-color;
+            background: $quantity-control-button-background-color;
+            border: 0;
+            cursor: pointer;
+        }
+    }
+
+    .quantity-control__button--increment {
+        right: 0;
+    }
+
+    .quantity-control__button--decrement {
+        left: 0;
+    }

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

@@ -0,0 +1,42 @@
+/*------------------------------------*\
+    #QUOTE-CONTENT-BLOCK
+\*------------------------------------*/
+
+// scss-lint:disable StringQuotes
+
+$quote-content-block-quote-size:  5em !default;
+$quote-content-block-quote-width: 100px !default;
+
+
+.quote-content-block {
+    margin: 0;
+    padding: $spacing-unit * 4;
+    quotes: "\201C""\201D""\2018""\2019";
+
+    &:before {
+        display: inline-block;
+        margin-right: $spacing-unit * 3;
+        font-size: $quote-content-block-quote-size;
+        line-height: 1em;
+        vertical-align: top;
+        content: '“';
+    }
+}
+
+    /**
+     * 1. element selector required due to rich text editor content.
+     */
+    .quote-content-block__text {
+        display: inline-block;
+        width: calc(100% - #{$quote-content-block-quote-width});
+
+        p { /* [1] */
+            display: inline;
+        }
+    }
+
+    .quote-content-block__author {
+        display: block;
+        font-style: italic;
+        text-align: right;
+    }

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

@@ -0,0 +1,46 @@
+/*------------------------------------*\
+    #RECENT-VIEWS
+\*------------------------------------*/
+
+$recent-views-section-products-background-color: $background-color-alternate !default;
+
+.recent-views {}
+
+.recent-views--aside {}
+
+    .recent-views__section {
+        margin-bottom: $vertical-margin;
+    }
+
+    .recent-views__section--products {
+        @include full-bleed-container;
+        padding: ($spacing-unit * 5) 0;
+        background-color: $recent-views-section-products-background-color;
+
+        .recent-views--aside & {
+            position: static;
+            right: auto;
+            left: auto;
+            margin: 0;
+            width: auto;
+        }
+    }
+
+    .recent-views__section--categories {}
+
+        .recent-views__heading {
+            @extend %heading;
+            @extend %heading--5;
+
+            .recent-views__section--products & {
+                text-align: center;
+            }
+        }
+
+        .recent-views__list {
+            @extend %list-reset;
+        }
+
+            .recent-views__item {}
+
+                .recent-views__link {}

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

@@ -0,0 +1,31 @@
+/*------------------------------------*\
+    #RECOMMENDATIONS
+\*------------------------------------*/
+
+$recommendations-background-color: $background-color-alternate !default;
+
+
+.recommendations {
+    padding: ($spacing-unit * 5) 0;
+    background-color: $personalized-recommendations-content-block-background-color;
+}
+
+.recommendations--full-bleed {
+    @include full-bleed-container;
+}
+
+.recommendations--vertical {
+    padding: ($spacing-unit * 2) ($spacing-unit * 4);
+    overflow-y: scroll;
+}
+
+    .recommendations__heading {
+        @extend %heading;
+        @extend %heading--4;
+        @extend %heading--upcase;
+        text-align: center;
+    }
+
+    .recommendations__list {
+        @extend %list-reset;
+    }

data/app/assets/stylesheets/workarea/storefront/components/_result_filters.scss.erb

@@ -0,0 +1,203 @@
+/*------------------------------------*\
+    #RESULT-FILTERS
+\*------------------------------------*/
+
+$result-filters-attribute-icon-width: 16px !default;
+$result-filters-attribute-icon-height: 3px !default;
+
+$result-filters-width-selected: 32px !default;
+$result-filters-height-selected: 32px !default;
+$result-filters-max-width:  75% !default;
+$result-filters-medium-max-width:  196px !default;
+$result-filters-truncation-limit: <%= Workarea.config.filter_group_truncation_limit + 1 %> !default;
+
+$result-filters-count-width: 26px !default;
+$result-filters-count-height: 16px !default;
+$result-filters-count-border-radius: 8px !default;
+
+
+.result-filters {
+    margin: 0 auto;
+    padding: ($spacing-unit * 2) 0;
+    max-width: $result-filters-max-width;
+
+    @include respond-to($wide-breakpoint) {
+        margin: 0 auto;
+        max-width: $result-filters-medium-max-width;
+    }
+}
+
+    .result-filters__container {}
+
+    .result-filters__container--closed {}
+
+    .result-filters__heading {
+        @extend %heading;
+        @extend %heading--4;
+        @extend %heading--upcase;
+        padding: ($spacing-unit * 2) 0 $spacing-unit;
+        text-align: center;
+
+        @include respond-to($medium-breakpoint) {
+            text-align: left;
+        }
+    }
+
+    /**
+     * 1. position static to override absolute position from .ui-menu-active
+     */
+    .result-filters__attribute {
+        @extend %heading;
+        @extend %heading--6;
+        @extend %heading--upcase;
+        display: flex;
+        margin: 0;
+        padding: $spacing-unit;
+        align-items: center;
+        cursor: pointer;
+
+        &:after {
+            position: static; /* [1] */
+            margin-left: auto;
+            width: $result-filters-attribute-icon-width;
+            height: $result-filters-attribute-icon-height;
+            background-color: $result-filters-icon-background-color;
+            content: '';
+            vertical-align: middle;
+        }
+
+        .applied-filters & {
+            display: block;
+            padding: ($spacing-unit * 2) 0;
+
+            @include respond-to($wide-breakpoint) {
+                padding: ($spacing-unit * 2) 0;
+            }
+
+            &:after {
+                height: 0;
+            }
+        }
+    }
+
+    .result-filters__count {
+        color: $category-count-color;
+    }
+
+    .result-filters__sort {
+        float: right;
+    }
+
+    .result-filters__section {
+        display: block;
+
+        .result-filters__container--closed & {
+            display: none;
+        }
+    }
+
+    .result-filters__section--color {}
+    .result-filters__section--price {}
+    .result-filters__section--category {}
+
+        .result-filters__group {
+            @extend %list-reset;
+            padding: ($spacing-unit / 2) 0 0;
+
+            .applied-filters & {
+                padding: 0;
+            }
+        }
+
+            .result-filters__filter {
+                padding: $spacing-unit;
+            }
+
+                .result-filters__filter-link {
+                    display: flex;
+                    color: $result-filters-text-color;
+                    align-items: center;
+
+                    &:hover {
+                        color: $result-filters-text-color-hover;
+                    }
+
+                    .result-filters__filter--selected & {
+                        padding: 0 $spacing-unit;
+                        height: $result-filters-width-selected;
+                        background: $result-filters-selected-background-color;
+                        border-radius: 16px;
+
+                        &:hover {
+                            color: $result-filters-selected-color-hover;
+                        }
+                    }
+                }
+
+                    .result-filters__filter-text {
+                        font-size: $font-size;
+                    }
+
+                    /**
+                     * 1. Align item to right within flex container
+                     */
+                    .result-filters__filter-count {
+                        margin-left: auto; /* [1] */
+                        width: $result-filters-count-width;
+                        height: $result-filters-count-height;
+                        color: $result-filters-count-text-color;
+                        font-size: $font-size-tiny;
+                        line-height: 1.5;
+                        text-align: center;
+                        background-color: $result-filters-count-background-color;
+                        border-radius: $result-filters-count-border-radius;
+                    }
+
+                    .result-filters__filter-remove {
+                        margin-left: auto; /* [1] */
+                        width: $result-filters-count-width;
+                        text-align: center;
+                    }
+
+            .result-filters__filter--selected {
+                padding: $spacing-unit 0;
+            }
+
+    .result-filters__filter:nth-child(n+#{$result-filters-truncation-limit}) {
+        .result-filters__group--truncated & {
+            display: none;
+
+            .no-js & {
+                display: block;
+            }
+        }
+    }
+
+    .result-filters__view-more-button {
+        @extend %button-reset;
+        margin: 0;
+        padding: $spacing-unit;
+        color: $result-filters-view-more-text-color;
+        cursor: pointer;
+
+        &:hover {
+            color: $result-filters-view-more-text-color-hover;
+        }
+
+        &:after {
+            display: inline-block;
+            padding-left: $spacing-unit;
+            vertical-align: middle;
+            content: '+';
+        }
+    }
+
+    .result-filters__view-more-button--expanded {
+        &:after {
+            content: '-';
+        }
+    }
+
+    .applied-filters {
+        background-color: $result-filters-applied-background-color;
+    }