workarea-haven_theme 1.3.0

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

@@ -0,0 +1,82 @@
+/*------------------------------------*\
+    #TEXT-BOX
+\*------------------------------------*/
+
+$text-box-border: 2px solid $input-border-color !default;
+$text-box-invalid-border-color: $invalid-color !default;
+$text-box-valid-border-color: $valid-color !default;
+
+$text-box-color-page-footer: $footer-color !default;
+
+$text-box-stripped-border: 0 !default;
+$text-box-stripped-placeholder-color: $text-box-color-page-footer !default;
+
+$text-box-search-color: $search-color !default;
+$text-box-search-background-color: $transparent !default;
+
+$text-box-width:              100% !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-font-size: 16px !default;
+$text-box-font-size-wide: $font-size !default;
+
+
+
+.text-box {
+    width: $text-box-width;
+    font-size: $text-box-font-size;
+    border: 0;
+    border-bottom: $text-box-border;
+    transition: border $transition-time ease-in-out;
+
+    @include respond-to($medium-breakpoint) {
+        font-size: $text-box-font-size-wide;
+    }
+
+    &:focus {
+        @include focus-ring;
+    }
+
+    .page-footer & {
+        color: $text-box-color-page-footer;
+    }
+}
+
+.text-box--stripped {
+    background: $transparent;
+    border: $text-box-stripped-border;
+
+    &::placeholder {
+        color: $text-box-stripped-placeholder-color;
+        opacity: 1;
+    }
+}
+
+.text-box--search {
+    padding-left: $spacing-unit * 5;
+    color: $text-box-search-color;
+    background: $text-box-search-background-color;
+    border: 0;
+
+    &::placeholder {
+        color: $text-box-search-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_content_block.scss

@@ -0,0 +1,5 @@
+/*------------------------------------*\
+    #TEXT-CONTENT-BLOCK
+\*------------------------------------*/
+
+.text-content-block {}

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

@@ -0,0 +1,85 @@
+/*------------------------------------*\
+    #VALUE
+\*------------------------------------*/
+
+$value-error-color: $invalid-color !default;
+$value-valid-color: $valid-color !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: 20px !default;
+
+/**
+ * 1. for use with `p` tags
+ */
+
+.value {
+    display: inline-block;
+    position: relative;
+    margin: 0; /* [1] */
+}
+
+.value--block {
+    display: block;
+}
+
+    .value__note {
+        display: block;
+    }
+
+    /**
+     * 1. focus ring matches error color
+     * 2. when specifically applied to a `.text-box` component
+     */
+
+    .value__error {
+        display: block;
+        color: $value-error-color;
+
+        &:focus {
+            @include focus-ring($value-error-color); /* [1] */
+        }
+
+        &.text-box {/* [2] */
+            border-color: $value-error-color;
+        }
+    }
+
+    /**
+     * 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;
+        right: $spacing-unit;
+        width: $value-icon-size;
+        height: $value-icon-size;
+        fill: $value-icon-color;
+
+        .value__error ~ &,
+        .value__note ~ & {
+            top: $value-icon-top-offset; /* [1] */
+        }
+
+        .value__error ~ & {
+            fill: $value-icon-color-error;
+        }
+
+        .value--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/components/_video_and_text_content_block.scss

@@ -0,0 +1,42 @@
+/*------------------------------------*\
+    #VIDEO-AND-TEXT-CONTENT-BLOCK
+\*------------------------------------*/
+
+.video-and-text-content-block {
+    @extend %clearfix;
+}
+
+    .video-and-text-content-block__video-container {
+        display: block;
+        margin-bottom: $spacing-unit;
+
+        @include respond-to($medium-breakpoint) {
+            margin-right: $spacing-unit;
+            margin-left: $spacing-unit;
+        }
+    }
+
+    .video-and-text-content-block__video-container--left {
+        @include respond-to($medium-breakpoint) {
+            margin-left: 0;
+            float: left;
+        }
+    }
+
+    .video-and-text-content-block__video-container--right {
+        @include respond-to($medium-breakpoint) {
+            margin-right: 0;
+            float: right;
+        }
+    }
+
+        /**
+         * 1. element selector required to support pasted embed code
+         */
+        .video-and-text-content-block__video {
+            iframe { /* [1] */
+                max-width: 100%;
+            }
+        }
+
+    .video-and-text-content-block__text {}

data/app/assets/stylesheets/workarea/storefront/content_search/components/_search_autocomplete.scss

@@ -0,0 +1,20 @@
+/**
+ * Extensions to the search autocomplete plugin to support content
+ * results.
+ */
+
+$search-autocomplete-content-link-color: $white !default;
+
+.search-autocomplete__content {
+    @extend %list-reset;
+}
+    .search-autocomplete__content-item {}
+
+        .search-autocomplete__content-link {
+            color: $search-autocomplete-content-link-color;
+
+            &:hover {
+                color: $search-autocomplete-content-link-color;
+                text-decoration: underline;
+            }
+        }

data/app/assets/stylesheets/workarea/storefront/email/_settings.scss

@@ -0,0 +1,23 @@
+/*------------------------------------*\
+    #SETTINGS
+\*------------------------------------*/
+
+/**
+ * In this file you can override a variables !default value before it is
+ * imported, effectively adjusting the theme of the site for the site's emails.
+ */
+
+$font-size: 16px !default;
+
+@import '../settings/colors';
+@import '../settings/font_families';
+@import '../settings/typography';
+@import '../settings/global';
+
+
+/**
+ * Email-specific variables are defined separately.
+ */
+
+$email-max-width: 600px !default;
+$email-background-color: $background-color-alternate !default;

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/objects/_content_wrapper.scss

@@ -0,0 +1,19 @@
+/*------------------------------------*\
+    #CONTENT-WRAPPER
+\*------------------------------------*/
+
+/**
+ * Wraps a portion of a page's content to center the content at a given width.
+ * This is useful for full-bleed sites where some internal content should be
+ * full width unless the viewport is very wide.
+ */
+
+$content-wrapper-padding:  0 $spacing-unit !default;
+$content-wrapper-width: 1374px !default;
+
+.content-wrapper,
+%content-wrapper {
+    margin:  0 auto;
+    padding: $content-wrapper-padding;
+    max-width: $content-wrapper-width;
+}

data/app/assets/stylesheets/workarea/storefront/package_products/components/_product_detail_packaged_products.scss

@@ -0,0 +1,29 @@
+/*------------------------------------*\
+    #PRODUCT-DETAIL-PACKAGED-PRODUCTS
+\*------------------------------------*/
+
+.product-detail-packaged-products {
+    input[type=checkbox] {
+        display: inline-block;
+    }
+}
+
+.product-detail-packaged-products--family {
+    .product-details__add-to-cart-action {
+        display: none;
+    }
+}
+
+    .product-detail-packaged-products__container {
+        display: inline-block;
+        margin-top: $spacing-unit * 2;
+        padding: ($spacing-unit * 2) 0;
+        width: calc(100% - 18px);
+        border-top: 1px solid $border-color;
+        vertical-align: middle;
+
+        @include respond-to($medium-breakpoint) {
+            margin-top: $spacing-unit * 4;
+            padding: ($spacing-unit * 4) 0;
+        }
+    }

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

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

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

@@ -0,0 +1,41 @@
+/*------------------------------------*\
+    #RATING
+\*------------------------------------*/
+
+$rating-fill-color: $rating-star-color !default;
+$rating-empty-color: $rating-star-color-empty !default;
+$rating-star-size: 16px !default;
+
+
+
+.rating {
+    display: inline-block;
+    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;
+    }
+
+    .rating__star--empty {
+        fill: $rating-empty-color;
+    }
+
+    .rating__star--half {
+        .rating__star--half__filled-half {}
+
+        .rating__star--half__empty-half {
+            fill: $rating-empty-color;
+        }
+    }

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

@@ -0,0 +1,93 @@
+/*------------------------------------*\
+    #REVIEWS
+\*------------------------------------*/
+
+$reviews-meta-color: $font-color-light !default;
+$reviews-meta-font-size: 10px !default;
+$reviews-review-border:  2px solid $border-color !default;
+
+
+.reviews {}
+
+    .reviews__header {
+        display: block;
+        margin: 0 0 ($spacing-unit * 2);
+
+        @include respond-to($medium-breakpoint) {
+            display: flex;
+            align-items: flex-end;
+            justify-content: space-between;
+        }
+    }
+
+        .reviews__count {}
+
+        .reviews__sort {
+            padding: 0 ($spacing-unit * 3);
+
+            @include respond-to($medium-breakpoint) {
+                padding: 0;
+            }
+        }
+
+    .reviews__review-group {
+        @extend %list-reset;
+    }
+
+        .reviews__review {
+            margin: ($spacing-unit * 2) 0;
+            padding: ($spacing-unit * 2) 0;
+            border-bottom: $reviews-review-border;
+
+            &:last-of-type {
+                border-bottom: 0;
+            }
+        }
+
+            .reviews__review-title {
+                @extend %heading;
+                @extend %heading--6;
+                @extend %heading--upcase;
+                @extend %heading--no-margin;
+
+                @include respond-to($medium-breakpoint) {
+                    display: inline-block;
+                    margin-left: $spacing-unit * 2;
+                    vertical-align: top;
+                }
+            }
+
+            .reviews__review-body {
+                font-weight: $font-weight-light;
+            }
+
+            .reviews__review-meta {
+                @extend %clearfix;
+            }
+
+                .reviews__review-author {
+                    margin: 0;
+                    float: left;
+                    color: $reviews-meta-color;
+                    font-size: $reviews-meta-font-size;
+                    line-height: 1;
+                }
+
+                .reviews__review-verified {
+                    margin: 0 0 0 $spacing-unit;
+                    padding-left: $spacing-unit;
+                    float: left;
+                    font-size: $reviews-meta-font-size;
+                    line-height: 1;
+                }
+
+                .reviews__review-date {
+                    margin: 0 0 0 $spacing-unit;
+                    padding-left: $spacing-unit;
+                    float: left;
+                    color: $reviews-meta-color;
+                    font-size: $reviews-meta-font-size;
+                    line-height: 1;
+                }
+
+    .reviews__write-action {}