workarea-nvy_theme 1.1.2

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

@@ -0,0 +1,62 @@
+/*------------------------------------*\
+    #TEXT-BOX
+\*------------------------------------*/
+
+$text-box-background-color: $input-background-color !default;
+$text-box-border-color: $input-border-color !default;
+$text-box-invalid-border-color: $invalid-color !default;
+$text-box-valid-border-color: $valid-color !default;
+$text-box-disabled-color: $input-disabled-color !default;
+$text-box-disabled-background-color: $input-disabled-background-color !default;
+$text-box-disabled-border-color: $input-disabled-border-color !default;
+$text-box-border: 1px solid $text-box-border-color !default;
+
+$text-box-padding: $spacing-unit !default;
+$text-box-width:              200px !default;
+$text-box-x-small-width:       62px !default;
+$text-box-small-width:         96px !default;
+$text-box-wide-width:         256px !default;
+
+$text-box-multi-line-height:  168px !default;
+
+
+.text-box {
+    padding: $text-box-padding;
+    width: $text-box-width;
+    background-color: $text-box-background-color;
+    border: $text-box-border;
+    border-radius: 0;
+    transition: border $transition-time ease-in-out;
+
+    &:focus {
+        @include focus-ring;
+    }
+
+    &:disabled {
+        color: $text-box-disabled-color;
+        background: $text-box-disabled-background-color;
+        border-color: $text-box-disabled-border-color;
+    }
+
+    .property--invalid & {
+        border-color: $text-box-invalid-border-color;
+    }
+
+    .page-footer & {
+        color: $page-footer-color;
+    }
+}
+
+.text-box--x-small    { width:  $text-box-x-small-width;     }
+.text-box--small      { width:  $text-box-small-width;       }
+.text-box--wide       { width:  $text-box-wide-width;        }
+.text-box--full       { width:  100%;                        }
+.text-box--multi-line { height: $text-box-multi-line-height; }
+
+.text-box--invalid {
+    border-color: $text-box-invalid-border-color;
+}
+
+.text-box--valid {
+    border-color: $text-box-valid-border-color;
+}

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

@@ -0,0 +1,39 @@
+/*------------------------------------*\
+    #TEXT-BUTTON
+\*------------------------------------*/
+
+$text-button-color: $link-color !default;
+$text-button-hover-color: $link-color-hover !default;
+
+
+.text-button {
+    @extend %button-reset;
+    color: $text-button-color;
+    font-weight: bold;
+    text-decoration: none;
+    cursor: pointer;
+
+    &:focus {
+        color: $text-button-hover-color;
+    }
+
+    &:hover {
+        color: $text-button-hover-color;
+        text-decoration: underline;
+    }
+}
+
+.text-button--block {
+    display: block;
+}
+
+    .text-button__icon {
+        width: 1em;
+        height: 1em;
+        fill: $text-button-color;
+        vertical-align: middle;
+
+        &:hover {
+            color: $text-button-hover-color;
+        }
+    }

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

@@ -0,0 +1,29 @@
+/*------------------------------------*\
+    #VALIDATION-ICON
+\*------------------------------------*/
+
+$validation-icon-color-valid: $valid-color !default;
+$validation-icon-color-invalid: $invalid-color !default;
+
+
+.validation-icon {}
+
+    .validation-icon__valid {
+        display: none;
+
+        .value--valid &,
+        .text-box--valid ~ .validation-icon & {
+            display: inline-block;
+            fill: $validation-icon-color-valid;
+        }
+    }
+
+    .validation-icon__invalid {
+        display: none;
+
+        .text-box--invalid ~ .validation-icon &,
+        .value__error ~ .validation-icon & {
+            display: inline-block;
+            fill: $validation-icon-color-invalid;
+        }
+    }

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

@@ -0,0 +1,95 @@
+/*------------------------------------*\
+    #VALUE
+\*------------------------------------*/
+
+$value-font: $secondary-font-family !default;
+$value-error-color: $red !default;
+
+$value-icon-size: $form-control-font-size !default;
+$value-icon-color: $input-icon-color !default;
+$value-icon-color-error: $invalid-color !default;
+$value-icon-color-valid: $valid-color !default;
+$value-icon-top-offset: 22px !default;
+
+
+/**
+ * 1. for use with `p` tags
+ */
+.value {
+    display: block;
+    position: relative;
+    margin: 0; /* [1] */
+    font-family: $value-font;
+
+    .button-property & {
+        display: inline-block;
+        margin-right: $spacing-unit;
+        vertical-align: middle;
+    }
+}
+
+    .value__note {
+        display: block;
+        font-size: $form-supplementary-font-size;
+    }
+
+    /**
+     * 1. focus ring matches error color
+     * 2. when specifically applied to a `.text-box` component
+     */
+
+    .value__error {
+        display: block;
+        position: relative;
+        color: $value-error-color;
+        font-size: $form-supplementary-font-size;
+
+        &:focus {
+            @include focus-ring($value-error-color); /* [1] */
+        }
+
+        &.text-box {/* [2] */
+            font-size: $form-control-font-size;
+            border-color: $value-error-color;
+        }
+
+        .button-property & {
+            position: absolute;
+            white-space: nowrap;
+        }
+    }
+
+    /**
+     * 1. Offset position from top when messaging is present.
+     * 2. Font size must be removed from the container of option buttons to get proper spacing
+     */
+
+    .value__icon {
+        @include center($to: vertical);
+        position: absolute;
+        top: $value-icon-top-offset; /* [1] */
+        right: $spacing-unit;
+        width: $value-icon-size;
+        height: $value-icon-size;
+        fill: $value-icon-color;
+
+        .value__error ~ & {
+            fill: $value-icon-color-error;
+        }
+
+        .value--valid &,
+        .text-box--valid ~ & {
+            fill: $value-icon-color-valid;
+        }
+    }
+
+    .value__button {
+        position: absolute;
+        top: $spacing-unit / 2;
+        right: $spacing-unit;
+    }
+
+    .value__option-group {
+        display: inline;
+        font-size: 0; /* [2] */
+    }

data/app/assets/stylesheets/workarea/storefront/generic/_fonts.scss.erb

@@ -0,0 +1,11 @@
+/*------------------------------------*\
+    #FONTS
+\*------------------------------------*/
+
+// scss-lint:disable VariableForProperty
+
+<% primary_font_face_path = "\'workarea/storefront/theme_config/fonts/#{Workarea.config.theme[:primary_font_family].downcase}\';" %>
+<% secondary_font_face_path = "\'workarea/storefront/theme_config/fonts/#{Workarea.config.theme[:secondary_font_family].downcase}\';" %>
+
+<%= "@import #{primary_font_face_path}" %>
+<%= "@import #{secondary_font_face_path}" %>

data/app/assets/stylesheets/workarea/storefront/product_quickview/components/_quickview_button.scss

@@ -0,0 +1,26 @@
+/*------------------------------------*\
+    #QUICKVIEW-BUTTON
+\*------------------------------------*/
+
+// scss-lint:disable ImportantRule
+
+$quickview-button-top-offset:  33% !default;
+
+/**
+ * 1. disable quickview buttons for touch devices
+ */
+.quickview-button {
+    display: none;
+
+    .product-summary:hover & {
+        @include respond-to($medium-breakpoint) {
+            @include center(horizontal);
+            display: block;
+            position: absolute;
+            top: $quickview-button-top-offset;
+            white-space: nowrap;
+        }
+
+        .touch & { display: none !important; } /* [1] */
+    }
+}

data/app/assets/stylesheets/workarea/storefront/reviews/components/_rating.scss

@@ -0,0 +1,28 @@
+/*------------------------------------*\
+    #RATING
+\*------------------------------------*/
+
+$rating-fill-color:   $yellow !default;
+$rating-empty-color:  $gray !default;
+$rating-star-size: 16px !default;
+
+
+
+.rating {
+    position: relative;
+    white-space: nowrap;
+    vertical-align: middle;
+    user-select: none;
+
+    .product-summary & {
+        margin: $spacing-unit auto 0;
+    }
+}
+
+    .rating__star {
+        display: inline-block;
+        width:  $rating-star-size;
+        height: $rating-star-size;
+        fill: $rating-fill-color;
+        overflow: hidden;
+    }

data/app/assets/stylesheets/workarea/storefront/reviews/components/_reviews.scss

@@ -0,0 +1,81 @@
+/*------------------------------------*\
+    #REVIEWS
+\*------------------------------------*/
+
+$review-border-color: $product-review-border-color !default;
+
+.reviews {
+    margin: ($spacing-unit * 3) 0 0;
+}
+
+    .reviews__count {
+        @extend %heading;
+        @extend %heading--3;
+    }
+
+    .reviews__header {
+        display: flex;
+        margin: 0 0 ($spacing-unit * 2);
+        width: 100%;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+
+        .reviews__write-action {
+            display: inline-block;
+        }
+
+        .reviews__sort {
+            display: inline-block;
+            vertical-align: middle;
+        }
+
+    .reviews__review-group {
+        margin: 0 0 ($spacing-unit * 4);
+        list-style: none;
+    }
+
+        .reviews__review {
+            padding: ($spacing-unit * 2) 0;
+
+            @include respond-to($medium-breakpoint) {
+                padding: ($spacing-unit * 4) 0;
+            }
+
+            & + & {
+                border-top: 1px solid $review-border-color;
+            }
+        }
+
+            .reviews__review-title {
+                @extend %heading;
+                @extend %heading--5;
+            }
+
+            .reviews__review-body {}
+
+            .reviews__review-meta {
+                @extend %clearfix;
+            }
+
+                .reviews__review-author {
+                    margin: 0;
+                    float: left;
+                    line-height: 1;
+                }
+
+                .reviews__review-verified {
+                    margin: 0 0 0 $spacing-unit;
+                    padding-left: $spacing-unit;
+                    float: left;
+                    font-weight: bold;
+                    line-height: 1;
+                }
+
+                .reviews__review-date {
+                    margin: 0 0 0 $spacing-unit;
+                    padding-left: $spacing-unit;
+                    float: left;
+                    line-height: 1;
+                }

data/app/assets/stylesheets/workarea/storefront/reviews/components/_reviews_aggregate.scss

@@ -0,0 +1,43 @@
+/*------------------------------------*\
+    #REVIEWS-AGGREGATE
+\*------------------------------------*/
+
+$reviews-aggregate-border: 1px solid $link-color !default;
+
+
+.reviews-aggregate {
+    @extend %clearfix;
+    margin: 0 0 ($spacing-unit * 2);
+
+    /**
+     * Extend `.rating {}` in _rating.scss.
+     */
+
+    .rating {
+        @extend %inline-list;
+        margin: 0 ($spacing-unit / 2) 0 0;
+    }
+}
+
+    .reviews-aggregate__rating-link {
+        display: inline-block;
+        vertical-align: middle;
+
+        &:hover {
+            text-decoration: none;
+        }
+    }
+
+    .reviews-aggregate__count {
+        @extend %inline-list;
+    }
+
+    .reviews-aggregate__read {}
+
+    .reviews-aggregate__write-action {
+        &::before {
+            padding-right: ($spacing-unit / 2);
+            border-left: $reviews-aggregate-border;
+            content: '';
+        }
+    }

data/app/assets/stylesheets/workarea/storefront/reviews/components/_write_review.scss

@@ -0,0 +1,63 @@
+/*------------------------------------*\
+    #WRITE-REVIEW
+\*------------------------------------*/
+
+$write-review-fill-color:   $yellow !default;
+$write-review-empty-color:  $transparent !default;
+$write-review-star-size:    16px !default;
+
+
+.write-review {}
+
+    .write-review__ratings {
+        @extend %inline-list;
+
+
+        .js & {
+            @extend %clearfix;
+        }
+    }
+
+        .write-review__rating {
+            font-size: $write-review-star-size;
+
+            .js & {
+                padding-right: ($spacing-unit / 2);
+                float: left;
+            }
+        }
+
+            .write-review__rating-input {
+                margin: 0 ($spacing-unit / 2) 0 0;
+
+                .js & {
+                    @extend %visually-hidden;
+                }
+            }
+
+            .write-review__star {}
+
+                .write-review__star-icon {
+                    width:  $write-review-star-size;
+                    height: $write-review-star-size;
+                    fill: $write-review-empty-color;
+                    stroke: $write-review-fill-color;
+
+                    .write-review__star--hovered &,
+                    .write-review__star--active & {
+                        fill: $write-review-fill-color;
+                    }
+                }
+
+
+                .write-review__star--hovered {
+                    opacity: 0.4;
+                }
+
+                .write-review__star--active {
+                    opacity: 1;
+                }
+
+                    .write-review__star-text {
+                        @extend %hidden-if-js-enabled;
+                    }