workarea-nvy_theme 1.1.2

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

@@ -0,0 +1,14 @@
+/*------------------------------------*\
+    #CHECKOUT-SHIPPING
+\*------------------------------------*/
+
+.checkout-shipping {}
+
+    .checkout-shipping__section {
+        margin-bottom: $vertical-margin;
+    }
+
+        .checkout-shipping__heading {
+            @extend %heading;
+            @extend %heading--3;
+        }

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

@@ -0,0 +1,19 @@
+/*------------------------------------*\
+    #CHECKOUT-STEP-SUMMARY
+\*------------------------------------*/
+
+.checkout-step-summary {
+    padding: $spacing-unit;
+}
+
+    .checkout-step-summary__step {}
+
+    .checkout-step-summary__step--hidden-for-small {
+        display: none;
+
+        @include respond-to($medium-breakpoint) {
+            display: block;
+        }
+    }
+        .checkout-step-summary__step-heading {}
+        .checkout-step-summary__section {}

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

@@ -0,0 +1,30 @@
+/*------------------------------------*\
+    #COLOR-BOX
+\*------------------------------------*/
+
+$color-box-size: 100px !default;
+$color-box-outline: 1px solid $black !default;
+
+
+.color-box {
+    @extend %style-guide-bg-grid;
+    display: block;
+    width: $color-box-size;
+}
+
+    .color-box__swatch {
+        width: $color-box-size;
+        height: $color-box-size;
+        outline: $color-box-outline;
+    }
+
+    // Generic
+    .color-box__swatch--primary-color { background: $primary-color; }
+    .color-box__swatch--primary-color-dark { background: $primary-color-dark; }
+
+    .color-box__swatch--background-color { background: $background-color; }
+    .color-box__swatch--background-color-component { background: $background-color-component; }
+
+    .color-box__swatch--border-color { background: $border-color; }
+    .color-box__swatch--highlight-color { background: $highlight-color; }
+    .color-box__swatch--overlay-shadow-color { background: $overlay-shadow-color; }

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

@@ -0,0 +1,57 @@
+/*------------------------------------*\
+    #CONTENT-BLOCK
+\*------------------------------------*/
+
+$content-block-font-size: 16px !default;
+$content-block-font-size-wide: 18px !default;
+$page-header-promo-font-size: 12px !default;
+
+.content-block {
+    font-size: $content-block-font-size;
+
+    @include respond-to($medium-breakpoint) {
+        font-size: $content-block-font-size-wide;
+    }
+
+    .page-header__promo & {
+        font-size: $page-header-promo-font-size;
+
+        @include respond-to($wide-breakpoint) {
+            font-size: $content-block-font-size;
+        }
+    }
+}
+
+.content-block--hidden-for-small {
+    display: none;
+
+    @include respond-to($medium-breakpoint) {
+        display: block;
+    }
+}
+
+.content-block--hidden-for-medium {
+    @include respond-to($medium-breakpoint) {
+        display: none;
+    }
+
+    @include respond-to($wide-breakpoint) {
+        display: block;
+    }
+}
+
+.content-block--hidden-for-wide {
+    @include respond-to($wide-breakpoint) {
+        display: none;
+    }
+
+    @include respond-to($x-wide-breakpoint) {
+        display: block;
+    }
+}
+
+.content-block--hidden-for-x-wide {
+    @include respond-to($x-wide-breakpoint) {
+        display: none;
+    }
+}

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

@@ -0,0 +1,65 @@
+/*------------------------------------*\
+    #DATA-CARD
+\*------------------------------------*/
+
+$data-card-minimum-width:      200px !default;
+
+$data-card-default-indicator:  '✓' !default;
+
+
+.data-card {
+    margin:  0 0 $vertical-margin;
+    min-width: $data-card-minimum-width;
+    border-radius: 5px;
+}
+
+/**
+ * 1. adjacent `.data-card__cell`
+ * 2. adjacent `.data-card__cell` within a `.data-card--row`
+ */
+
+    .data-card__cell {
+        margin-bottom: $vertical-margin;
+
+        & + & { /* [1] */
+            margin: 0;
+        }
+
+        .data-card--row & {
+            display: table-cell;
+            padding-bottom: $spacing-unit;
+        }
+
+        .data-card--row & + & { /* [2] */
+            text-align: right;
+        }
+    }
+
+        .data-card__line {
+            margin: 0;
+
+            & + & {
+                margin-top: $spacing-unit;
+            }
+        }
+
+        .data-card__credit-card {}
+
+            .data-card__credit-card-number {
+                display: inline-block;
+                vertical-align: middle;
+            }
+
+        .data-card__credit-card--default {
+            &:after {
+                content: $data-card-default-indicator;
+            }
+        }
+
+
+.data-card--row {
+    display: table;
+    width: 100%;
+    border-spacing:  0;
+    border-collapse: collapse;
+}

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

@@ -0,0 +1,32 @@
+/*------------------------------------*\
+    #LOGIN
+\*------------------------------------*/
+
+$login-section-background-color: $background-color-component !default;
+$login-section-min-height: 500px !default;
+
+
+/**
+ * 1. adds visual separator for adjacent `.breadcrumbs_node`
+ */
+
+.login {}
+
+    .login__section {
+        margin: ($spacing-unit * 2) auto;
+        padding: ($spacing-unit * 5);
+        background-color: $login-section-background-color;
+
+        @include respond-to($medium-breakpoint) {
+            padding: ($spacing-unit * 10);
+            min-height: $login-section-min-height;
+        }
+    }
+
+    .login__section--login {}
+    .login__section--create-account {}
+    .login__section--order-lookup {}
+
+        .login__heading {}
+
+        .login__form {}

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

@@ -0,0 +1,42 @@
+/*------------------------------------*\
+    #MOBILE-FILTERS-NAV
+\*------------------------------------*/
+
+$mobile-filters-nav-bg-color:   $white !default;
+$mobile-filters-nav-box-shadow: -8px 0 8px rgba($black, 0.5);
+
+$mobile-filters-nav-width:  100% !default;
+
+
+.mobile-filters-nav {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: index($components, mobile-filters-nav);
+    padding: $spacing-unit * 2;
+    width: $mobile-filters-nav-width;
+    background: $mobile-filters-nav-bg-color;
+    box-shadow: $mobile-filters-nav-box-shadow;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateX(-100%);
+    transition: transform $transition-time ease-out;
+}
+
+.mobile-filters-nav--active {
+    opacity: 1;
+    visibility: visible;
+    transform: translateX(0);
+    transition-timing-function: ease-in;
+}
+
+.mobile-filters-nav--closing {
+    transform: translateX(-100%);
+}
+
+
+    .mobile-filters-nav__close-button {
+        margin-bottom: $vertical-margin;
+    }

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

@@ -0,0 +1,111 @@
+/*------------------------------------*\
+    #MOBILE-NAV
+\*------------------------------------*/
+
+$mobile-nav-bg-color: $mobile-navigation-background-color !default;
+$mobile-nav-box-shadow: 0 2px 4px $black-alpha-50;
+
+$mobile-nav-width:  87.5% !default;
+$mobile-nav-font-size: 18px !default;
+$mobile-nav-font: $secondary-font-family !default;
+$mobile-nav-link-color: $mobile-navigation-link-color !default;
+$mobile-nav-header-height: 56px;
+$mobile-nav-header-background-color: $mobile-navigation-header-background-color !default;
+$mobile-nav-header-border-color: $mobile-navigation-header-border-color !default;
+$mobile-nav-close-button-size: 16px !default;
+$mobile-nav-close-right-offset: -7% !default;
+$mobile-nav-close-button-color: $mobile-navigation-close-button-color !default;
+
+
+.mobile-nav {
+    display: none;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: index($components, mobile-nav);
+    width: $mobile-nav-width;
+    font-size: $mobile-nav-font-size;
+    font-family: $mobile-nav-font;
+    background: $mobile-nav-bg-color;
+    box-shadow: $mobile-nav-box-shadow;
+}
+
+.mobile-nav--active {
+    display: block;
+}
+
+    .mobile-nav__close-button {
+        position: absolute;
+        top: $spacing-unit * 2;
+        right: $mobile-nav-close-right-offset;
+        width: $mobile-nav-close-button-size;
+        height: $mobile-nav-close-button-size;
+        color: $mobile-nav-close-button-color;
+        transform: translateX(50%);
+
+        &:hover {
+            color: $mobile-nav-close-button-color;
+        }
+    }
+
+    .mobile-nav__header {
+        padding-left: $spacing-unit * 3;
+        height: $mobile-nav-header-height;
+        line-height: $mobile-nav-header-height;
+        background-color: $mobile-nav-header-background-color;
+        border-bottom: 1px solid $mobile-nav-header-border-color;
+    }
+
+    .mobile-nav__header--transparent {
+        opacity: 0;
+    }
+
+        .mobile-nav__back-button {
+            color: $mobile-nav-link-color;
+        }
+
+        .mobile-nav__back-button-icon {}
+        .mobile-nav__back-button-text {
+            margin-left: $spacing-unit / 2;
+        }
+
+    /**
+     * 1. provides positioning context for `.mobile-nav__content`
+     */
+    .mobile-nav__menu {
+        @extend %list-reset;
+        margin-left: $spacing-unit * 3;
+    }
+
+        .mobile-nav__item {
+            margin: $spacing-unit 0 ($spacing-unit * 4);
+        }
+
+        .mobile-nav__item--has-children {}
+
+
+            .mobile-nav__link {
+                display: block;
+                color: $mobile-nav-link-color;
+                font-weight: normal;
+
+                .mobile-nav__item--has-children & {
+                    &:after {
+                        margin-right: $spacing-unit * 3;
+                        float: right;
+                        content: '▶';
+                    }
+                }
+            }
+
+            .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,48 @@
+/*------------------------------------*\
+    #OPTION-BUTTON
+\*------------------------------------*/
+
+$option-button-size: 40px !default;
+$option-button-swatch-size: 32px !default;
+$option-button-color: $button-color !default;
+$option-button-border-color: $border-color !default;
+
+/**
+* 1. Property not supported in IE11, progressive enhancement with fallback to no offset on outline for IE11.
+*/
+.option-button {
+    display: inline-block;
+    position: relative;
+    margin: 0 ($spacing-unit * 2) $spacing-unit 0;
+    width: $option-button-size;
+    height: $option-button-size;
+    color: $option-button-color;
+    line-height: $option-button-size;
+    text-align: center;
+    vertical-align: top;
+
+    & + & {
+        margin-left: $spacing-unit;
+    }
+
+    .ui-dialog & {
+        margin-right: $spacing-unit;
+    }
+}
+
+.option-button--active {
+    font-weight: bold;
+    border: 1px solid $option-button-border-color;
+}
+
+    .option-button__text {}
+
+    .option-button__image {
+        @include center;
+    }
+
+    .option-button__swatch {
+        @include center;
+        width: $option-button-swatch-size;
+        height: $option-button-swatch-size;
+    }

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

@@ -0,0 +1,24 @@
+/*------------------------------------*\
+    #ORDER-HELP-MENU
+\*------------------------------------*/
+
+$order-help-menu-item-separator:  '|' !default;
+
+
+.order-help-menu {
+    @extend %inline-list;
+    margin: ($spacing-unit * 2) 0;
+    text-align: center;
+}
+
+    /**
+     * 1. adds visual separator for adjacent `.order-help-menu__item`
+     */
+
+    .order-help-menu__item {
+        margin: 0 $spacing-unit;
+
+        @include respond-to($medium-breakpoint) {
+            margin: 0 ($spacing-unit * 2);
+        }
+    }