workarea-one_theme 1.3.0

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

@@ -0,0 +1,66 @@
+/*------------------------------------*\
+    #REVIEWS
+\*------------------------------------*/
+
+$reviews-background-color: $background-color-component !default;
+
+
+.reviews {
+    margin-top: $spacing-unit * 2;
+    padding: $spacing-unit * 2;
+    background-color: $reviews-background-color;
+
+    @include respond-to($medium-breakpoint) {
+        padding: $spacing-unit * 5;
+    }
+}
+
+    .reviews__header {
+        padding-left: $spacing-unit * 2;
+        width: 100%;
+    }
+
+        .reviews__heading {
+            margin-bottom: 0;
+        }
+
+        .reviews__count {}
+
+        .reviews__write-action {
+            text-align: center;
+
+            @include respond-to($medium-breakpoint) {
+                margin: 0 $spacing-unit * 2;
+            }
+        }
+
+    .reviews__review-group {
+        margin: 0;
+        list-style: none;
+    }
+
+        .reviews__review {
+            padding: ($spacing-unit * 2) 0;
+            border-top: 1px solid $border-color;
+        }
+
+            .reviews__review-title {}
+
+            .reviews__review-body {}
+
+            .reviews__review-meta {
+                @extend %clearfix;
+            }
+
+                .reviews__review-author {
+                    margin: 0;
+                    float: left;
+                    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/_write_review.scss

@@ -0,0 +1,71 @@
+/*------------------------------------*\
+    #WRITE-REVIEW
+\*------------------------------------*/
+
+$write-review-fill-color:   $yellow !default;
+$write-review-empty-color:  $transparent !default;
+$write-review-star-size:    16px !default;
+$write-review-star-hover-opacity: 0.4 !default;
+
+.write-review {}
+
+    .write-review__ratings {
+        margin: 0;
+        list-style: none;
+
+        .js & {
+            @extend %clearfix;
+        }
+    }
+
+        .write-review__rating-fieldset {}
+
+            .write-review__rating-ledgend {
+                margin-bottom: 0;
+            }
+
+
+            .write-review__rating {
+                display: inline-block;
+                font-size: $write-review-star-size;
+
+                .js & {
+                    padding-right: $spacing-unit;
+                    float: left;
+                }
+            }
+
+                .write-review__rating-input {
+                    margin: 0 $spacing-unit 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: $write-review-star-hover-opacity;
+                    }
+
+                    .write-review__star--active {
+                        opacity: 1;
+                    }
+
+                        .write-review__star-text {
+                            @extend %hidden-if-js-enabled;
+                        }

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

@@ -0,0 +1,21 @@
+/*------------------------------------*\
+    #COLORS
+\*------------------------------------*/
+
+/**
+ * Color Variables
+ *
+ * These variables are loaded in from the theme's color scheme configurations
+ * Available color scheme names for this theme are:
+ * - Workarea
+ * - Midnight
+ * - One
+ *
+ * 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/#{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,39 @@
+/*------------------------------------*\
+    #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;
+$drawer-transition: transform 0.15s ease-in-out;
+
+
+/**
+ * Border Radius
+ */
+
+$border-radius: 4px;

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

@@ -0,0 +1,8 @@
+/*------------------------------------*\
+    #TYPOGRAPHY
+\*------------------------------------*/
+
+$font-size:                 14px !default;
+$form-control-font-size:    14px !default;
+$line-height:               1.375 !default;
+$form-control-line-height:  1.75 !default;

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

@@ -0,0 +1,43 @@
+/*------------------------------------*\
+        #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,
+    ui-autocomplete,
+    ui-dialog,
+    admin-toolbar,
+    page-messages,
+    mobile-nav,
+    result-filters
+) !default;
+
+    $page-container: (
+        page-content,
+        page-header
+    ) !default;
+
+        $page-header: (
+            header-promo,
+            primary-nav,
+            primary-nav-content,
+            utility-nav,
+            page-header-main
+        ) !default;
+
+        $category-summary-content-block: (
+            overlay,
+            content
+        ) !default;
+

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

@@ -0,0 +1,22 @@
+/*------------------------------------*\
+    #SHARE-BUTTONS
+\*------------------------------------*/
+
+.share-buttons {
+    @extend %inline-list;
+    margin: $spacing-unit 0;
+    padding: $spacing-unit 0;
+    text-align: right;
+    border-top: 1px solid $border-color;
+}
+
+    .share-buttons__item {
+        margin: 0 ($spacing-unit * 2);
+        vertical-align: middle;
+    }
+
+        .share-buttons__title {
+            margin-bottom: 0;
+        }
+
+        .share-buttons__button {}

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

@@ -0,0 +1,171 @@
+/*------------------------------------*\
+    #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:         $link-color !default;
+$slick-slider-dots-bg-color:      $background-color !default;
+$slick-slider-dots-border-width:  2px !default;
+$slick-slider-dots-spacing:       2 * $spacing-unit !default;
+$slick-slider-nav-font-size:      40px !default;
+$slick-slider-nav-color:          $font-color !default;
+$slick-slider-nav-bg-color:       transparent !default;
+
+$slick-slider-nav-font-size-hero-slider: $spacing-unit * 3 !default;
+$slick-slider-nav-color-hero-slider: $primary-nav-links !default;
+$slick-slider-nav-bg-color-hero-slider: $background-secondary-color !default;
+
+$slick-slider-arrows-offset:      -30px !default;
+
+$slick-slider-active-color:    $slick-slider-dots-color !default;
+
+
+.slick-slider {
+    transition: opacity 0.15s ease-in;
+}
+
+.slick-slider--waiting-for-images {
+    opacity: 0;
+}
+
+.slick-slider--images-loaded {
+    opacity: 1;
+}
+
+        .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;
+
+        .hero-slider-content-block & {
+            background-color: $slick-slider-nav-bg-color-hero-slider;
+        }
+    }
+
+    .slick-slider__nav--prev {
+        left: $slick-slider-arrows-offset;
+
+        .product-list-content-block & {
+            left: 0;
+        }
+
+        .hero-slider-content-block & {
+            left: 0;
+        }
+
+        .hero-slider-content-block--full-bleed & {
+            left: $slick-slider-arrows-offset * -1;
+        }
+
+        .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;
+
+        .product-list-content-block & {
+            right: 0;
+        }
+
+        .hero-slider-content-block & {
+            right: 0;
+        }
+
+        .hero-slider-content-block--full-bleed & {
+            right: $slick-slider-arrows-offset * -1;
+        }
+
+        .slick-vertical & {
+            top: auto;
+            right: 50%;
+            bottom: $slick-slider-arrows-offset;
+            transform: translateX(50%) rotate(90deg);
+        }
+    }
+
+        .slick-slider__nav-icon {
+            @include svg('icons/arrow_left.svg', $slick-slider-nav-font-size);
+            fill: $slick-slider-nav-color;
+
+            .hero-slider-content-block & {
+                padding: $spacing-unit;
+                background: none;
+                fill: $slick-slider-nav-color-hero-slider;
+            }
+        }
+
+        .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;
+    }
+}