workarea-one_theme 1.3.0

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

@@ -0,0 +1,75 @@
+/*------------------------------------*\
+    #HERO-SLIDER-CONTENT-BLOCK
+\*------------------------------------*/
+
+$hero-slider-block-content-offset: 45px !default;
+$hero-slider-block-content-offset-wide: 120px !default;
+
+$hero-slider-heading-color: $link-secondary-color !default;
+$hero-slider-heading-background-color: $primary-color !default;
+$hero-slider-sub-heading-color: $primary-nav-links !default;
+$hero-slider-sub-heading-background-color: $background-secondary-color !default;
+
+
+.hero-slider-content-block {}
+
+.hero-slider-content-block--full-bleed {
+    @include full-bleed-container;
+}
+
+    .hero-slider-content-block__slide {
+        @include respond-to($medium-breakpoint) {
+            position: relative;
+        }
+    }
+
+        .hero-slider-content-block__slide-content-wrapper {
+
+        }
+
+        .hero-slider-content-block__slide-content {
+            padding: $spacing-unit;
+
+            @include respond-to($medium-breakpoint) {
+                position: absolute;
+                bottom: $hero-slider-block-content-offset;
+                left: $hero-slider-block-content-offset;
+            }
+
+            @include respond-to($wide-breakpoint) {
+                bottom: $hero-slider-block-content-offset-wide;
+            }
+
+            .hero-slider-content-block--full-bleed & {
+                left: auto;
+            }
+        }
+
+            .hero-slider-content-block__slide-heading {
+                @extend %heading;
+                @extend %heading--1;
+                @extend %heading--fancy;
+                margin-bottom: 0;
+                padding: $spacing-unit;
+                color: $hero-slider-heading-color;
+                background-color: $hero-slider-heading-background-color;
+            }
+
+            .hero-slider-content-block__slide-sub-heading {
+                @extend %heading;
+                @extend %heading--5;
+                display: inline-block;
+                padding: $spacing-unit;
+                color: $hero-slider-sub-heading-color;
+                background-color: $hero-slider-sub-heading-background-color;
+            }
+
+        .hero-slider-content-block__slide-image {
+            margin: 0 auto;
+
+            .hero-slider-content-block--full-bleed & {
+                width: 100%;
+            }
+        }
+
+        .hero-slider-content-block__slide-link {}

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

@@ -0,0 +1,92 @@
+/*------------------------------------*\
+    #LOADING
+\*------------------------------------*/
+
+$loading-color:                 $black-alpha-50 !default;
+$loading-bg-color:              $transparent !default;
+$loading-light-color:           $white-alpha-50 !default;
+
+$loading-indicator-size:        24px !default;
+$loading-border-width:          4px !default;
+
+$loading-inline-indicator-size: 1em !default;
+$loading-inline-border-width:   0.15em !default;
+
+$loading-animation-speed:       0.8s !default;
+
+
+.loading {
+    display: block;
+    position: relative;
+    margin: $vertical-margin 0;
+    min-height: $loading-indicator-size + $loading-border-width * 2;
+    text-indent: 200%;
+    white-space: nowrap;
+    background-color: $loading-bg-color;
+    overflow: hidden;
+
+    &:before {
+        display: block;
+        position: absolute;
+        top:  50%;
+        left: 50%;
+        margin-top:  ($loading-indicator-size / 2) * -1;
+        margin-right:  0;
+        margin-bottom: 0;
+        margin-left: ($loading-indicator-size / 2) * -1;
+        width:  $loading-indicator-size - $loading-border-width;
+        height: $loading-indicator-size - $loading-border-width;
+        background: none;
+        border-color: $loading-color $loading-bg-color $loading-color $loading-color;
+        border-style: solid;
+        border-width: $loading-border-width;
+        border-radius: 50%;
+        animation: rotate $loading-animation-speed infinite linear;
+        content: '';
+    }
+}
+
+
+.loading--fill-parent {
+    position: absolute;
+    top:    0;
+    right:  0;
+    bottom: 0;
+    left:   0;
+}
+
+
+.loading--inline {
+    margin: 0;
+    min-height: 0;
+    text-indent: 0;
+    background-color: $loading-bg-color;
+
+    &:before {
+        display: inline-block;
+        position: relative;
+        top: 0;
+        left: 0;
+        margin-top: 0;
+        margin-right: calc((#{$loading-inline-indicator-size} - #{$loading-inline-border-width}) / 2 );
+        margin-left: calc((#{$loading-inline-indicator-size} - #{$loading-inline-border-width}) / 2 );
+        width:  calc(#{$loading-inline-indicator-size} - #{$loading-inline-border-width});
+        height: calc(#{$loading-inline-indicator-size} - #{$loading-inline-border-width});
+        border-right-color: transparent;
+        border-width: $loading-inline-border-width;
+        vertical-align: middle;
+    }
+}
+
+
+.loading--light {
+    &:before {
+        border-color: $loading-light-color $loading-bg-color $loading-light-color $loading-light-color;
+    }
+}
+
+
+@keyframes rotate {
+    0%    { transform: rotate(0deg);   }
+    100%  { transform: rotate(360deg); }
+}

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

@@ -0,0 +1,42 @@
+/*------------------------------------*\
+    #MOBILE-FILTERS
+\*------------------------------------*/
+
+$mobile-filters-content-width: 300px !default;
+$mobile-filters-overlay-bg-color: $overlay-shadow-color !default;
+
+.mobile-filters {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: $mobile-filters-content-width;
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transform: translateX(-100%);
+    transition: $drawer-transition;
+
+    .admin-toolbar ~ .page-container & {
+        top: 64px;
+    }
+}
+
+.mobile-filters--is-open {
+    z-index: index($components, result-filters);
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+    transform: translateX(0);
+}
+
+.mobile-filters-overlay {
+    position: fixed;
+    top:    0;
+    right:  0;
+    bottom: 0;
+    left:   0;
+    z-index: index($components, result-filters) - 1;
+    background-color: $mobile-filters-overlay-bg-color;
+}
+
+    .mobile-filters__content {}

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

@@ -0,0 +1,146 @@
+/*------------------------------------*\
+    #MOBILE-NAV
+\*------------------------------------*/
+
+$mobile-nav-bg-color: $background-color-component !default;
+$mobile-nav-search-bg-color: $background-secondary-color !default;
+$mobile-nav-overlay-bg-color: $overlay-shadow-color !default;
+
+// This value should match the height of .page-header__main at mobile to ensure alignment
+$mobile-nav-search-height: 53px !default;
+
+$mobile-nav-width:  300px !default;
+
+$mobile-nav-back-button-size: 24px !default;
+$mobile-nav-back-color: $header-icon-color !default;
+$mobile-nav-back-color-hover: $header-icon-color-hover !default;
+$mobile-nav-back-background-color: $mobile-nav-search-bg-color !default;
+
+$mobile-nav-item-border: 1px solid $border-color !default;
+
+$mobile-nav-link-color: $mobile-nav-links !default;
+$mobile-nav-link-font-size: 26px !default;
+$mobile-nav-link-font-family: $secondary-font-family !default;
+$mobile-nav-link-hover-bg-color: $background-color !default;
+
+.mobile-nav {
+    display: none;
+    transform: translateX(-100%);
+    transition: $drawer-transition;
+}
+
+.mobile-nav--active {
+    display: block;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: index($components, mobile-nav);
+    width: $mobile-nav-width;
+    background: $mobile-nav-bg-color;
+    transform: translateX(0%);
+}
+
+.mobile-nav-overlay {
+    position: fixed;
+    top:    0;
+    right:  0;
+    bottom: 0;
+    left:   0;
+    z-index: index($components, mobile-nav) - 1;
+    background-color: $mobile-nav-overlay-bg-color;
+}
+
+    /**
+     * 1. Positioning context for mobile-nav__search-button
+     */
+    .mobile-nav__search {
+        padding: ($spacing-unit / 2) ($spacing-unit * 2);
+        height: $mobile-nav-search-height;
+        text-align: center;
+        background-color: $mobile-nav-search-bg-color;
+    }
+
+        .mobile-nav__search-form {
+            position: relative; /* [1] */
+        }
+
+            .mobile-nav__search-value {
+                display: inline-block;
+                width: 100%;
+                vertical-align: top;
+            }
+
+            .mobile-nav__search-button {
+                display: inline-block;
+                position: absolute;
+                top: 50%;
+                right: 0;
+                vertical-align: top;
+                transform: translateY(-50%);
+            }
+
+    .mobile-nav__close-button {}
+
+    .mobile-nav__back-button {
+        display: block;
+        padding: $spacing-unit ($spacing-unit * 2);
+        color: $mobile-nav-back-color;
+        font-size: $mobile-nav-back-button-size;
+        line-height: 1.55;
+        background-color: $mobile-nav-back-background-color;
+
+        &:hover {
+            color: $mobile-nav-back-color-hover;
+        }
+    }
+
+
+    /**
+     * 1. Should match padding-right for mobile-nav__link
+     */
+    .mobile-nav__menu {
+        @extend %list-reset;
+    }
+
+
+        .mobile-nav__item {
+            position: relative;
+            border-bottom: $mobile-nav-item-border;
+        }
+
+        .mobile-nav__item--has-children {
+            &:after {
+                position: absolute;
+                top: 50%;
+                right: $spacing-unit * 2; /* [1] */
+                content: '→';
+                transform: translate(-50%, -50%);
+                pointer-events: none;
+            }
+        }
+
+            .mobile-nav__link {
+                display: block;
+                padding: $spacing-unit ($spacing-unit * 2);
+                color: $mobile-nav-link-color;
+                font-size: $mobile-nav-link-font-size;
+                font-family: $mobile-nav-link-font-family;
+                font-weight: bold;
+
+                &:hover {
+                    color: $mobile-nav-link-color;
+                    background-color: $mobile-nav-link-hover-bg-color;
+                }
+            }
+
+            .mobile-nav__link--selected {
+                font-weight: bold;
+            }
+
+            /**
+             * 1. injected via JavaScript
+             */
+            .mobile-nav__content { /* [1] */
+                @extend %list-reset;
+            }

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

@@ -0,0 +1,45 @@
+/*------------------------------------*\
+    #OPTION-BUTTON
+\*------------------------------------*/
+
+$option-button-border-color: $gray !default;
+$option-button-active-border-color: $focus-ring-color !default;
+
+$option-button-size: 36px !default;
+
+
+.option-button {
+    display: inline-block;
+    margin: $spacing-unit;
+    margin-left: 0;
+    padding: $spacing-unit;
+    min-width: $option-button-size;
+    min-height: $option-button-size;
+    text-align: center;
+    border: 1px solid $option-button-border-color;
+    vertical-align: top;
+
+    & + & {
+        margin-left: $spacing-unit;
+    }
+}
+
+.option-button--active {
+    font-weight: bold;
+    border-color: $option-button-active-border-color;
+}
+
+.option-button--color {
+    padding: 0;
+}
+
+    .option-button__text {}
+
+    .option-button__image {
+        width: $option-button-size;
+    }
+
+    .option-button__swatch {
+        width: $option-button-size;
+        height: $option-button-size;
+    }

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

@@ -0,0 +1,33 @@
+/*------------------------------------*\
+    #ORDER-HELP-MENU
+\*------------------------------------*/
+
+$order-help-menu-item-separator:  '|' !default;
+$order-help-menu-item-separator-color:  $header-icon-color !default;
+
+
+.order-help-menu {
+    @extend %inline-list;
+    margin-bottom: $vertical-margin;
+    text-align: center;
+
+    .page-header & {
+        margin-bottom: 0;
+
+        @include respond-to($medium-breakpoint) {
+            text-align: right;
+        }
+    }
+}
+
+    /**
+     * 1. adds visual separator for adjacent `.order-help-menu__item`
+     */
+
+    .order-help-menu__item {
+        & + &:before { /* [1] */
+            margin: 0 ($spacing-unit / 2);
+            color: $order-help-menu-item-separator-color;
+            content: $order-help-menu-item-separator;
+        }
+    }

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

@@ -0,0 +1,19 @@
+/*------------------------------------*\
+    #ORDER-SUMMARY
+\*------------------------------------*/
+
+$order-summary-data-section-background-color:  $background-color-component !default;
+
+.order-summary {}
+
+    .order-summary__section {
+        margin-bottom: $vertical-margin;
+    }
+
+    .order-summary__data {}
+
+        .order-summary__data-section {
+            margin-bottom: $vertical-margin;
+            padding: $spacing-unit * 2;
+            background-color: $order-summary-data-section-background-color;
+        }