workarea-haven_theme 1.3.0

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

@@ -0,0 +1,51 @@
+// TODO: v4 remove. Replaced by WORKAREA.mobileFilterButtons
+/*------------------------------------*\
+    #MOBILE-FILTERS
+\*------------------------------------*/
+
+$mobile-filters-action-max-width: 276px !default;
+$mobile-filters-max-width: 75% !default;
+
+
+.mobile-filters {
+    margin: 0 auto $vertical-margin;
+    max-width: $mobile-filters-action-max-width;
+}
+
+    .mobile-filters__heading {
+        @extend %heading;
+        @extend %heading--4;
+        @extend %heading--upcase;
+        margin: 0;
+        color: $mobile-filters-heading-color;
+    }
+
+    .mobile-filters__sort {
+        padding: ($spacing-unit * 3) 0;
+        background: $mobile-filters-sort-background-color;
+    }
+
+    .mobile-filters__wrapper {
+        margin: 0 auto;
+        max-width: $mobile-filters-max-width;
+    }
+
+    .mobile-filters__control {
+        display: none;
+    }
+
+    .mobile-filters__trigger {
+        margin-bottom: $vertical-margin;
+        text-align: center;
+    }
+
+    .mobile-filters__content {
+        display: none;
+
+        .mobile-filters-nav & ,
+        .mobile-filters__control:checked ~ & {
+            display: block;
+            height: 100%;
+            overflow-y: scroll;
+        }
+    }

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

@@ -0,0 +1,42 @@
+/*------------------------------------*\
+    #MOBILE-FILTERS-NAV
+\*------------------------------------*/
+
+$mobile-filters-nav-bg-color: $background-color !default;
+$mobile-filters-nav-box-shadow: -8px 0 8px $black-alpha-50;
+$mobile-filters-nav-width: 84% !default;
+$mobile-filters-nav-min-width: 250px !default;
+$mobile-filters-nav-max-width: 420px !default;
+$mobile-filters-action-font-size: $font-size * 2;
+
+
+.mobile-filters-nav {
+    display: none;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: index($components, mobile-filters-nav);
+    width: 100%;
+    background: $mobile-filters-overlay-color;
+    box-shadow: $mobile-filters-nav-box-shadow;
+}
+
+.mobile-filters-nav__wrapper {
+    width: $mobile-filters-nav-width;
+    height: 100%;
+    max-width: $mobile-filters-nav-max-width;
+    min-width: $mobile-filters-nav-min-width;
+    background: $mobile-filters-background-color;
+}
+
+.mobile-filters-nav--active {
+    display: block;
+}
+
+    .mobile-filters-nav__close-action {
+        @include svg('dialog_close.svg', $mobile-filters-action-font-size);
+        position: absolute;
+        right: 0;
+        cursor: pointer;
+    }

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

@@ -0,0 +1,120 @@
+/*------------------------------------*\
+    #MOBILE-NAV
+\*------------------------------------*/
+
+$mobile-nav-bg-color: $mobile-nav-bg-color !default;
+$mobile-nav-box-shadow: 8px 0 8px $black-alpha-50;
+
+$mobile-nav-width: 90% !default;
+$mobile-nav-close-button-size: 20px !default;
+$mobile-nav-close-button-color: $mobile-nav-close-button-color !default;
+$mobile-nav-item-border: 1px solid $border-color !default;
+$mobile-nav-link-font-size: 14px !default;
+$mobile-nav-link-color: $mobile-nav-links !default;
+
+$mobile-nav-back-button-icon-size: 24px !default;
+$mobile-nav-back-button-color: $mobile-nav-back-button-color !default;
+$mobile-nav-back-button-icon-fill: $mobile-nav-back-button-color !default;
+$mobile-nav-back-button-bg-color: $mobile-nav-back-button-bg-color !default;
+
+.mobile-nav {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: index($components, mobile-nav);
+    width: $mobile-nav-width;
+    background: $mobile-nav-bg-color;
+    box-shadow: $mobile-nav-box-shadow;
+    transform: translateX(-110%);
+    visibility: hidden;
+    transition: visibility 0s linear $transition-time, transform $transition-time ease-out 0s;
+}
+
+.mobile-nav--active {
+    visibility: visible;
+    transform: translateX(0);
+    transition: visibility 0s linear 0s, transform $transition-time ease-out $transition-time;
+}
+    /**
+     * 1. offset based on vw to ensure equal positioning on any device
+     */
+    .mobile-nav__close-button {
+        position: fixed;
+        top: $spacing-unit * 2;
+        right: -6vw; /* [1] */
+        color: $mobile-nav-close-button-color;
+        font-size: $mobile-nav-close-button-size;
+
+        &:hover {
+            color: $mobile-nav-close-button-color;
+        }
+
+        .primary-nav & {
+            display: none;
+        }
+    }
+
+
+    .mobile-nav__back-button {
+        display: block;
+        padding: ($spacing-unit * 2) ($spacing-unit * 4);
+        background-color: $mobile-nav-back-button-bg-color;
+    }
+
+        .mobile-nav__back-button-icon {
+            width: $mobile-nav-back-button-icon-size;
+            height: $mobile-nav-back-button-icon-size;
+            float: right;
+            transform: rotate(180deg);
+            fill: $mobile-nav-back-button-icon-fill;
+        }
+
+        .mobile-nav__back-button-text {
+            display: inline-block;
+            margin: 0;
+            color: $mobile-nav-back-button-color;
+        }
+
+    /**
+     * 1. provides positioning context for `.mobile-nav__content`
+     */
+    .mobile-nav__menu {
+        @extend %list-reset;
+    }
+
+
+        .mobile-nav__item {
+            border-bottom: $mobile-nav-item-border;
+        }
+
+        .mobile-nav__item--has-children {}
+
+            .mobile-nav__link {
+                display: block;
+                padding: ($spacing-unit * 2) $spacing-unit ($spacing-unit * 2) ($spacing-unit * 4);
+                color: $mobile-nav-link-color;
+                font-size: $mobile-nav-link-font-size;
+                text-transform: uppercase;
+
+                .primary-nav & {
+                    display: none;
+                }
+            }
+
+            .mobile-nav__link--selected {
+                font-weight: $font-weight-medium;
+            }
+
+            .mobile-nav__link--all {
+                font-weight: $font-weight-light;
+                text-transform: none;
+            }
+
+
+            /**
+             * 1. injected via JavaScript
+             */
+            .mobile-nav__content { /* [1] */
+                @extend %list-reset;
+            }

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

@@ -0,0 +1,48 @@
+/*------------------------------------*\
+    #OPTION-BUTTON
+\*------------------------------------*/
+
+$option-button-color: $font-color !default;
+$option-button-border-color: $input-border-color !default;
+$option-button-active-border-color: $primary-color !default;
+/**
+* Extend the `.option-button` class from Workarea to include a swatch option.
+*
+* 1. These dimensions match the :swatch_thumb processor
+*/
+$option-button-swatch-height: 32px !default; /* [1] */
+$option-button-swatch-width: 32px !default; /* [1] */
+
+.option-button {
+    display: inline-block;
+    margin: $spacing-unit;
+    margin-left: 0;
+    padding: $spacing-unit;
+    min-width: $spacing-unit * 4;
+    color: $option-button-color;
+    font-weight: $font-weight-medium;
+    text-align: center;
+    border: 1px solid $option-button-border-color;
+    vertical-align: top;
+
+    &:last-of-type {
+        margin-right: 0;
+    }
+}
+
+.option-button--active {
+    border-color: $option-button-active-border-color;
+}
+
+.option-button--color {
+    padding: 0;
+}
+
+    .option-button__text {}
+
+    .option-button__image {}
+
+    .option-button__swatch {
+        width: $option-button-swatch-width;
+        height: $option-button-swatch-height;
+    }

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

@@ -0,0 +1,55 @@
+/*------------------------------------*\
+    #ORDER-DETAILS
+\*------------------------------------*/
+
+$order-details-border: 1px solid $border-color !default;
+$order-details-info-background-color: $background-color-alternate !default;
+
+
+.order-details {
+    padding: 0 ($spacing-unit * 2) ($spacing-unit * 2);
+
+    .page-content--checkout & {
+        margin-top: $spacing-unit * 5;
+        padding-top: ($spacing-unit * 2);
+        border-top: $order-details-border;
+    }
+}
+
+    .order-details__info {
+        margin: 0 ($spacing-unit * -2);
+        padding: $spacing-unit * 2;
+        background-color: $order-details-info-background-color;
+    }
+
+    .order-details__section {
+        margin: ($spacing-unit * 2) 0;
+        padding: $spacing-unit * 2;
+        border-bottom: $order-details-border;
+
+        @include respond-to($medium-breakpoint) {
+            margin-bottom: $spacing-unit * 2;
+        }
+
+        &:last-of-type {
+            border-bottom: 0;
+        }
+    }
+
+    .order-details__title {
+        @extend %heading;
+        @extend %heading--4;
+        @extend %heading--upcase;
+    }
+
+    .order-details__heading {
+        @extend %heading;
+        @extend %heading--6;
+        @extend %heading--upcase;
+    }
+
+    .order-details__order-number {}
+
+    .order-details__order-date {}
+
+    .order-details__order-status {}

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

@@ -0,0 +1,34 @@
+// TODO: v4 remove
+/*------------------------------------*\
+    #ORDER-SUMMARY
+\*------------------------------------*/
+
+.order-summary {
+    padding: ($spacing-unit * 4) ($spacing-unit * 2);
+}
+
+    .order-summary__section {
+        margin-bottom: $vertical-margin;
+    }
+
+    .order-summary__heading {
+        @extend %heading;
+        @extend %heading--6;
+        @extend %heading--upcase;
+    }
+
+    .order-summary__items {
+        margin-bottom: $vertical-margin;
+    }
+
+    .order-summary__totals {
+        margin-bottom: $spacing-unit * 2;
+
+        @include respond-to($medium-breakpoint) {
+            margin-bottom: $spacing-unit * 4;
+        }
+    }
+
+    .order-summary__data {}
+
+        .order-summary__data-section {}

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

@@ -0,0 +1,20 @@
+/*------------------------------------*\
+    #OVERLAY
+\*------------------------------------*/
+
+$overlay-background-color: $overlay-shadow-color !default;
+
+.overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: index($components, overlay);
+    background-color: $overlay-background-color;
+}
+
+.overlay--active {
+    display: block;
+}

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

@@ -0,0 +1,96 @@
+/*------------------------------------*\
+    #PAGE-CONTENT
+\*------------------------------------*/
+
+$page-content-max-width: 1410px !default;
+$page-content-checkout-container-max-width: 500px !default;
+$page-content-checkout-aside-width: 478px !default;
+
+/**
+ * 1. Prevent display: table; overflowing window in IE11
+ */
+.page-content {
+    display: table;
+    position: relative;
+    z-index: index($page-container, page-content);
+    margin: 0 auto;
+    padding: 0 ($spacing-unit / 2);
+    width: 100%;
+    max-width: $page-content-max-width;
+    table-layout: fixed; /* [1] */
+
+    @include respond-to($medium-breakpoint) {
+        margin: 0 auto;
+        padding: 0;
+    }
+}
+
+.page-content--checkout {}
+
+.page-content--order {}
+
+    .page-content__main {
+        padding: 0 $spacing-unit;
+    }
+
+    .page-content__main--with-aside {
+        @include respond-to($wide-breakpoint) {
+            display: table-cell;
+            padding-left: $spacing-unit * 2;
+            width: 80%;
+            vertical-align: top;
+        }
+
+        .page-content--checkout & {
+            @include respond-to($wide-breakpoint) {
+                width: 63%;
+                padding-right: $spacing-unit * 2;
+            }
+        }
+
+        .page-content--order & {
+            @include respond-to($wide-breakpoint) {
+                padding-right: $spacing-unit * 2;
+                width: 75%;
+            }
+        }
+    }
+
+        .page-content__aside {
+            display: none;
+
+            @include respond-to($wide-breakpoint) {
+                display: table-cell;
+                background-color: $page-aside-background-color;
+                vertical-align: top;
+            }
+
+            .mobile-filters-nav & {
+                display: block;
+            }
+
+            .page-content--order &,
+            .page-content--checkout & {
+                display: block;
+
+                @include respond-to($wide-breakpoint) {
+                    display: table-cell;
+                    width: $page-content-checkout-aside-width;
+                    vertical-align: top;
+                }
+            }
+        }
+
+        .page-content__checkout-container {
+            margin: 0 auto;
+            max-width: $page-content-checkout-container-max-width;
+
+
+            @include respond-to($wide-breakpoint) {
+                margin: 0 ($spacing-unit * 2);
+            }
+        }
+
+        .page-content__checkout-container--wide {
+            max-width: none;
+        }