workarea-haven_theme 1.3.0

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

@@ -0,0 +1,54 @@
+/*------------------------------------*\
+    #REVIEWS-AGGREGATE
+\*------------------------------------*/
+
+$reviews-aggregate-border: 1px solid $link-color !default;
+$reviews-aggregate-count-color: $font-color-light !default;
+$reviews-aggregate-read-font-size: $font-size !default;
+
+
+.reviews-aggregate {
+    @extend %clearfix;
+    margin: 0 0 12px;
+
+    @include respond-to($medium-breakpoint) {
+        float: right;
+    }
+
+    /**
+     * Extend `.rating {}` in _rating.scss.
+     */
+
+    .rating {
+        @extend %inline-list;
+        margin: 0 ($spacing-unit / 2) 0 0;
+    }
+}
+
+    .reviews-aggregate__rating-link {
+        display: inline-block;
+        margin-right: $spacing-unit;
+        vertical-align: middle;
+
+        &:hover {
+            text-decoration: none;
+        }
+    }
+
+    .reviews-aggregate__count {
+        color: $reviews-aggregate-count-color;
+    }
+
+    .reviews-aggregate__read {
+        margin-left: $spacing-unit * 2;
+        font-size: $reviews-aggregate-read-font-size;
+        font-weight: $font-weight-regular;
+    }
+
+    .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,65 @@
+/*------------------------------------*\
+    #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 {
+                cursor: pointer;
+            }
+
+                .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;
+                    }

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

@@ -0,0 +1,56 @@
+/*------------------------------------*\
+    #SEARCH-AUTOCOMPLETE
+\*------------------------------------*/
+
+$search-autocomplete-bg-color: $transparent !default;
+$search-autocomplete-border: none !default;
+$search-autocomplete-searches-link-color: $white !default;
+
+$search-autocomplete-z-indexes: ();
+@each $name in $page-container {
+    $search-autocomplete-z-indexes: append($search-autocomplete-z-indexes, $name);
+
+    @if $name == page-header {
+        $search-autocomplete-z-indexes: append($search-autocomplete-z-indexes, search-autocomplete);
+    }
+}
+
+.search-autocomplete {
+    display: none;
+    background: $search-autocomplete-bg-color;
+    border: $search-autocomplete-border;
+    padding: $spacing-unit;
+
+    @include respond-to($medium-breakpoint) {
+        display: block;
+    }
+}
+
+.search-autocomplete--visible {}
+
+
+    .search-autocomplete__products {
+        text-align: left;
+    }
+
+
+    .search-autocomplete__heading {
+        @extend %heading;
+        @extend %heading--4;
+    }
+
+
+    .search-autocomplete__searches {
+        @extend %list-reset;
+    }
+
+        .search-autocomplete__searches-item {}
+
+            .search-autocomplete__searches-link {
+                color: $search-autocomplete-searches-link-color;
+
+                &:hover {
+                    color: $search-autocomplete-searches-link-color;
+                    text-decoration: underline;
+                }
+            }

data/app/assets/stylesheets/workarea/storefront/settings/_colors.scss.erb

@@ -0,0 +1,17 @@
+/*------------------------------------*\
+    #COLORS
+\*------------------------------------*/
+
+/**
+ * Color Variables
+ *
+ * These variables are loaded in from the theme's color scheme configurations
+ *
+ * To customize colors in this theme you can add your own color scheme
+ * file to the storefront/theme_config directory and reference
+ * it by name below.
+ */
+
+<% path = "\'workarea/storefront/theme_config/color_schemes/#{Workarea.config.theme[:color_scheme].downcase}_color_scheme\';" %>
+
+<%= "@import #{path}" %>

data/app/assets/stylesheets/workarea/storefront/settings/_font_families.scss.erb

@@ -0,0 +1,6 @@
+/*------------------------------------*\
+    #FONT-FAMILIES
+\*------------------------------------*/
+
+<%= "$font-family: #{Workarea.config.theme[:font_stacks][Workarea.config.theme[:primary_font_family].to_sym]} !default;" %>
+<%= "$secondary-font-family: #{Workarea.config.theme[:font_stacks][Workarea.config.theme[:secondary_font_family].to_sym]} !default;" %>

data/app/assets/stylesheets/workarea/storefront/settings/_global.scss

@@ -0,0 +1,36 @@
+/*------------------------------------*\
+    #GLOBAL
+\*------------------------------------*/
+
+/**
+ * Default global spacing units
+ */
+$spacing-unit:  8px !default;
+
+$vertical-margin:    $spacing-unit * 2 !default;
+$horizontal-margin:  $spacing-unit * 2 !default;
+
+
+/**
+ * These dialog dimensions allow for certain components to know their maximum
+ * possible width when being displayed within a dialog.
+ */
+$dialog-content-min-width:  300px !default;
+$dialog-content-max-width:  700px !default;
+
+
+/**
+ * Heights
+ */
+$global-admin-toolbar-height: 64px !default;
+
+
+/**
+ * Transitions
+ */
+$transition-time:   0.15s;
+
+/**
+ * Product images
+ */
+ $product-image-ratio:      1 / 1 !default;

data/app/assets/stylesheets/workarea/storefront/settings/_typography.scss

@@ -0,0 +1,19 @@
+/*------------------------------------*\
+    #TYPOGRAPHY
+\*------------------------------------*/
+
+$font-size:                 14px !default;
+$font-size-small:           12px !default;
+$font-size-tiny:            10px !default;
+$font-size-content-blocks:  18px !default;
+$form-control-font-size:    14px !default;
+
+$line-height:               1.375 !default;
+$line-height-large:         1.666 !default;
+$form-control-line-height:  1.75 !default;
+
+$font-weight-heavy:         700 !default;
+$font-weight-medium:        500 !default;
+$font-weight-regular:       400 !default;
+$font-weight-light:         300 !default;
+$font-letter-spacing:       1px !default;

data/app/assets/stylesheets/workarea/storefront/settings/_z_indexes.scss

@@ -0,0 +1,39 @@
+/*------------------------------------*\
+        #Z-INDEXES
+\*------------------------------------*/
+
+/**
+ * z-index values ordered pertaining to their container.
+ *
+ * $components is the base level. Other containers require a position
+ * other than 'static'
+ *
+ * Based upon this article in Smashing Magazine
+ * https://www.smashingmagazine.com/2014/06/sassy-z-index-management-for-complex-layouts/
+ */
+
+$components: (
+    page-container,
+    back-to-top-button,
+    account-menu,
+    header-main,
+    ui-autocomplete,
+    overlay,
+    search,
+    ui-dialog,
+    admin-toolbar,
+    page-messages,
+    mobile-nav,
+    mobile-filters-nav
+) !default;
+
+    $page-container: (
+        page-content,
+        search,
+        page-header
+    ) !default;
+
+    $quantity-control: (
+        input,
+        button
+    ) !default;

data/app/assets/stylesheets/workarea/storefront/share/components/_share_buttons.scss

@@ -0,0 +1,139 @@
+/*------------------------------------*\
+    #SHARE-BUTTONS
+\*------------------------------------*/
+
+// This variable is used to calculate animation offsets for FadeIn
+// Update this to match the number of share icons on your site.
+$share-buttons-item-count: 5 !default;
+
+$share-buttons-icon-size: 16px !default;
+$share-buttons-icon-color: $social-icon-color !default;
+$share-buttons-icon-color-hover: $social-icon-color-hover !default;
+$share-buttons-icon-background-color: $social-icon-background !default;
+$share-buttons-icon-background-color-hover: $social-icon-background-hover !default;
+
+$share-buttons-button-size: 42px !default;
+$share-buttons-toggle-button-background: $social-icon-background !default;
+$share-buttons-toggle-button-background-hover: $social-icon-background-hover !default;
+$share-buttons-toggle-button-border: 1px solid $border-color !default;
+$share-buttons-toggle-button-border-color-hover: $social-icon-border-color !default;
+$share-buttons-animation-duration: 0.2s !default;
+
+$share-buttons-item-border: 1px solid $social-icon-border-color;
+
+
+@keyframes FadeIn {
+    0% {
+        opacity: 0;
+        transform: scale(0.1);
+    }
+
+    85% {
+        opacity: 1;
+        transform: scale(1.05);
+    }
+
+    100% {
+        transform: scale(1);
+    }
+}
+
+
+.share-buttons {
+    display: none;
+    position: absolute;
+    top: $spacing-unit;
+    right: $spacing-unit * 2;
+
+    @include respond-to($medium-breakpoint) {
+        display: block;
+    }
+}
+
+.share-buttons--open {}
+
+    .share-buttons__toggle-button {
+        @extend %button-reset;
+        width: $share-buttons-button-size;
+        height: $share-buttons-button-size;
+        text-align: center;
+        background-color: $share-buttons-toggle-button-background;
+        border: $share-buttons-toggle-button-border;
+        border-radius: 50%;
+        cursor: pointer;
+
+        &:hover,
+        .share-buttons--open & {
+            background-color: $share-buttons-toggle-button-background-hover;
+            border-color: $share-buttons-toggle-button-border-color-hover;
+        }
+
+        &:focus,
+        .share-buttons--open & {
+            outline: none;
+        }
+    }
+
+        .share-buttons__toggle-button-icon {
+            width: $share-buttons-icon-size;
+            height: $share-buttons-icon-size;
+            vertical-align: middle;
+            fill: $share-buttons-icon-color;
+
+            .share-buttons--open &,
+            .share-buttons__toggle-button:hover & {
+                fill: $share-buttons-icon-color-hover;
+            }
+        }
+
+    .share-buttons__list {
+        @extend %list-reset;
+    }
+
+    .share-buttons__item {
+        display: none;
+        margin: $spacing-unit 0;
+        width: $share-buttons-button-size;
+        height: $share-buttons-button-size;
+        text-align: center;
+        background-color: $share-buttons-toggle-button-background;
+        border: $share-buttons-item-border;
+        border-radius: 50%;
+        vertical-align: middle;
+        animation: FadeIn $share-buttons-animation-duration linear;
+        animation-fill-mode: both;
+
+        @for $i from 1 through $share-buttons-item-count {
+            &:nth-child(#{$i}) {
+                animation-delay: #{($i * $share-buttons-animation-duration) - 0.1};
+            }
+        }
+
+        &:hover {
+            background-color: $share-buttons-toggle-button-background-hover;
+            border-color: $share-buttons-toggle-button-border-color-hover;
+        }
+
+        .share-buttons--open & {
+            display: block;
+        }
+    }
+
+        .share-buttons__button {
+            display: block;
+            position: relative;
+            width: $share-buttons-button-size;
+            height: $share-buttons-button-size;
+        }
+
+            .share-buttons__social-icon {
+                @include center;
+                display: inline-block;
+                width: $share-buttons-icon-size;
+                height: $share-buttons-icon-size;
+                fill: $share-buttons-icon-color;
+
+                .share-buttons__item:hover & {
+                    fill: $share-buttons-icon-color-hover;
+                }
+            }

data/app/assets/stylesheets/workarea/storefront/slick_slider/components/_slick_slider.scss

@@ -0,0 +1,140 @@
+/*------------------------------------*\
+    #SLICK-SLIDER
+\*------------------------------------*/
+
+$slick-slider-elements: (
+    slick-list,
+    slick-slider__nav,
+    slick-slider__dots
+) !default;
+
+$slick-slider-dots-width:         $font-size !default;
+$slick-slider-dots-color:         $slider-dots-color !default;
+$slick-slider-dots-bg-color:      $slider-dots-bg-color !default;
+$slick-slider-dots-border-width:  2px !default;
+$slick-slider-dots-spacing:       2 * $spacing-unit !default;
+$slick-slider-nav-color:          $slider-nav-color !default;
+$slick-slider-nav-color-alt:      $slider-nav-color-alt !default;
+$slick-slider-nav-bg-color:       $slider-nav-bg-color !default;
+
+$slick-slider-arrow-size:         13px !default;
+$slick-slider-arrow-size-small:   8px !default;
+$slick-slider-arrows-offset:      8px !default;
+
+$slick-slider-active-color:       $slider-active-color !default;
+
+.slick-slider {}
+
+.slick-slider--waiting-for-images {
+    opacity: 0;
+}
+
+.slick-slider--images-loaded {
+    opacity: 1;
+    transition: opacity 0.15s ease-in;
+}
+
+        .slick-slider__image-wrapper {}
+
+            .slick-slider__image {}
+
+    .slick-slider__nav {
+        @extend %button-reset;
+        @include center('vertical');
+        z-index: index($slick-slider-elements, slick-slider__nav);
+        background: $slick-slider-nav-bg-color;
+        cursor: pointer;
+    }
+
+    .slick-slider__nav--prev {
+        left: $slick-slider-arrows-offset;
+
+        .slick-vertical & {
+            top: $slick-slider-arrows-offset;
+            right: 50%;
+            left: auto;
+            transform: translateX(50%) rotate(90deg);
+        }
+    }
+
+    .slick-slider__nav--next {
+        right: $slick-slider-arrows-offset;
+
+        .slick-vertical & {
+            top: auto;
+            right: 50%;
+            bottom: $slick-slider-arrows-offset;
+            transform: translateX(50%) rotate(90deg);
+        }
+    }
+
+        .slick-slider__nav-icon {
+            width: $slick-slider-arrow-size;
+            height: $slick-slider-arrow-size;
+            fill: $slick-slider-nav-color;
+
+            .product-media__alt-images & {
+                width: $slick-slider-arrow-size-small;
+                height: $slick-slider-arrow-size-small;
+                fill: $slick-slider-nav-color-alt;
+            }
+        }
+
+        .slick-slider__nav-icon--left  {}
+        .slick-slider__nav-icon--right { background-image: image-url('workarea/storefront/icons/arrow_right.svg'); }
+
+
+    .slick-slider__dots {
+        @extend %inline-list;
+        z-index: index($slick-slider-elements, slick-slider__dots);
+        text-align: center;
+
+        .slick-vertical & {
+            @include center($to: vertical);
+            left: -100%;
+        }
+
+        li {
+            margin: $slick-slider-dots-spacing;
+
+            .slick-vertical & {
+                display: block;
+            }
+        }
+
+        button {
+            display: block;
+            padding: 0;
+            width:  $slick-slider-dots-width;
+            height: $slick-slider-dots-width;
+            font-size: 0;
+            background: $slick-slider-dots-bg-color;
+            border: $slick-slider-dots-border-width solid $slick-slider-dots-color;
+            border-radius: 50%;
+            cursor: pointer;
+            outline: 0;
+
+            &:hover,
+            &:focus {
+                outline: 0;
+            }
+        }
+    }
+
+
+/*------------------------------------*\
+    #SLICK-LIST
+\*------------------------------------*/
+
+.slick-list { z-index: index($slick-slider-elements, slick-list); }
+
+
+/*------------------------------------*\
+    #SLICK-ACTIVE
+\*------------------------------------*/
+
+.slick-active {
+    button {
+        background: $slick-slider-active-color;
+    }
+}