workarea-nvy_theme 1.1.2

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

@@ -0,0 +1,44 @@
+/*------------------------------------*\
+    #BOX
+\*------------------------------------*/
+
+$box-background-color: $background-color-component !default;
+
+$box-padding: ($spacing-unit * 3) ($spacing-unit * 3) 0 !default;
+
+$box-heading-font-size: 18px !default;
+$box-heading-font-size-wide: 20px !default;
+
+
+.box {
+    margin-bottom: $spacing-unit * 2;
+    background-color: $box-background-color;
+}
+
+
+    .box__header {
+        @extend %clearfix;
+        padding: $box-padding;
+    }
+
+        /**
+         * 1. approximate the height of a button
+         */
+        .box__heading {
+            margin-bottom: 0;
+            font-size: $box-heading-font-size;
+            line-height: 1.7; /* [1] */
+
+            @include respond-to($wide-breakpoint) {
+                font-size: $box-heading-font-size-wide;
+            }
+        }
+
+        .box__action {
+            float: right;
+        }
+
+
+    .box__body {
+        padding: ($spacing-unit * 2) ($spacing-unit * 3);
+    }

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

@@ -0,0 +1,31 @@
+/*------------------------------------*\
+    #BREADCRUMBS
+\*------------------------------------*/
+
+$breadcrumb-font-size: 12px !default;
+$breadcrumb-font-family: $secondary-font-family !default;
+$breadcrumb-node-separator: '/' !default;
+
+
+/**
+ * 1. adds visual separator for adjacent `.breadcrumbs_node`
+ */
+
+.breadcrumbs {
+    margin-bottom: $vertical-margin;
+    font-size: $breadcrumb-font-size;
+    font-family: $breadcrumb-font-family;
+}
+
+    .breadcrumbs__node-group {}
+
+        .breadcrumbs__node {
+            & + &:before { /* [1] */
+                margin: 0 ($spacing-unit / 2);
+                content: $breadcrumb-node-separator;
+            }
+        }
+
+            .breadcrumbs__link {}
+
+            .breadcrumbs__text {}

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

@@ -0,0 +1,43 @@
+/*------------------------------------*\
+    #BROWSING-CONTROLS
+\*------------------------------------*/
+
+
+.browsing-controls {
+    margin: 0 ($spacing-unit * 3) ($spacing-unit * 2);
+
+    @include respond-to($medium-breakpoint) {
+        margin: 0 0 ($spacing-unit * 2);
+    }
+}
+
+    .browsing-controls__heading {
+        @extend %heading;
+        @extend %heading--2;
+        margin-bottom: $spacing-unit;
+        text-align: center;
+
+        @include respond-to($medium-breakpoint) {
+            margin-bottom: 0;
+            text-align: left;
+        }
+    }
+
+    .browsing-controls__sort {
+        text-align: center;
+
+        @include respond-to($medium-breakpoint) {
+            text-align: right;
+        }
+    }
+
+        .browsing-controls__sort-form {
+            @include respond-to($medium-breakpoint) {
+                display: inline-block;
+            }
+        }
+
+    .browsing-controls__filter-button {
+        @extend %visible;
+        @extend %visible--for-small-only;
+    }

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

@@ -0,0 +1,97 @@
+/*------------------------------------*\
+    #BUTTON
+\*------------------------------------*/
+
+$button-font-family: $secondary-font-family !default;
+$button-font-weight: bold !default;
+
+$button-color: $button-color !default;
+$button-bg-color: $button-background-color !default;
+$button-border-color: $button-border-color !default;
+$button-border-color-hover: $button-border-color-hover !default;
+
+$button-filled-color: $button-filled-color !default;
+$button-filled-background-color: $button-filled-background-color !default;
+$button-filled-background-color-hover: $button-filled-background-color-hover !default;
+
+$button-disabled-color: $button-disabled-color !default;
+$button-disabled-background-color: $button-disabled-background-color !default;
+
+$button-padding: 5px 32px !default;
+$button-small-padding: 3px 20px !default;
+$button-large-padding: 9px 48px !default;
+$button-extra-large-padding: 18px 61px !default;
+
+$button-font-size: $font-size !default;
+$button-small-font-size: $font-size - 2px !default;
+$button-large-font-size: $font-size !default;
+$button-extra-large-font-size: $font-size + 2px !default;
+
+
+/**
+ * 1. Override hover styles for links
+ */
+.button {
+    @extend %button-reset;
+    display: inline-block;
+    padding: $button-padding;
+    color: $button-color;
+    font-size: $button-font-size;
+    font-family: $button-font-family;
+    font-weight: $button-font-weight;
+    background: $button-bg-color;
+    border: 1px solid $button-border-color;
+    cursor: pointer;
+
+    &:hover {
+        color: $button-color; /* [1] */
+        text-decoration: none; /* [1] */
+        border-color: $button-border-color-hover;
+    }
+
+    &:disabled {
+        color: $button-disabled-color;
+        background-color: $button-disabled-background-color;
+        border-color: $button-disabled-background-color;
+
+        &:hover {
+            background-color: $button-disabled-background-color;
+        }
+    }
+}
+
+.button--solid {
+    color: $button-filled-color;
+    background: $button-filled-background-color;
+    border: 0;
+
+    &:focus,
+    &:hover {
+        color: $button-filled-color;
+        background: $button-filled-background-color-hover;
+    }
+}
+
+.button--small {
+    padding: $button-small-padding;
+    font-size: $button-small-font-size;
+}
+
+.button--large {
+    padding: $button-large-padding;
+    font-size: $button-large-font-size;
+}
+
+.button--extra-large {
+    padding: $button-extra-large-padding;
+    font-size: $button-extra-large-font-size;
+}
+
+.button--margin-bottom {
+    margin-bottom: $spacing-unit * 2;
+}
+
+.button--full {
+    width: 100%;
+    text-align: center;
+}

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

@@ -0,0 +1,41 @@
+/*------------------------------------*\
+    #BUTTON-PROPERTY
+\*------------------------------------*/
+
+.button-property {
+    margin-bottom: $spacing-unit * 3;
+}
+
+
+/**
+ * 1. ensures consistent layout with other `.property--responsive` blocks
+ */
+
+.button-property--responsive {
+    display: table-row;
+    margin: 0;
+
+    &:before { /* [1] */
+        display: table-cell;
+        content: '';
+    }
+
+    /**
+     * Extend `.value {}` in components/_value.scss.
+     */
+
+    .value {
+        display: inline-block;
+        margin:  0;
+        padding: $spacing-unit;
+        line-height: 1.43;
+        vertical-align: middle;
+    }
+}
+
+    .button-property__name {
+        display: inline-block;
+        vertical-align: middle;
+    }
+
+        .button-property__text {}

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

@@ -0,0 +1,44 @@
+/*------------------------------------*\
+    #CART
+\*------------------------------------*/
+
+.cart {}
+
+.cart--empty {
+    margin-top: $spacing-unit * 4;
+    text-align: center;
+
+}
+
+    .cart__empty-pre-heading {
+        font-weight: bold;
+        text-transform: uppercase;
+    }
+
+    .cart__empty-heading {
+        @extend %heading;
+        @extend %heading--4;
+        margin-bottom: $spacing-unit * 3;
+
+        @include respond-to($medium-breakpoint) {
+            margin-bottom: $spacing-unit * 5;
+        }
+    }
+
+    .cart__continue-shopping {
+        margin-bottom: $spacing-unit * 10;
+    }
+
+    .cart__checkout-action-group {
+        @include respond-to($medium-breakpoint) {
+            text-align: right;
+        }
+    }
+
+        .cart__checkout-action {
+            margin-bottom: $vertical-margin;
+        }
+
+    .cart__promo-code {
+        margin-bottom: $vertical-margin;
+    }

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

@@ -0,0 +1,25 @@
+/*------------------------------------*\
+    #CHECKOUT-ADDRESSES
+\*------------------------------------*/
+
+$checkout-addresses-max-width: 600px !default;
+
+
+.checkout-addresses {
+    max-width: $checkout-addresses-max-width;
+}
+
+    .checkout-addresses__section {
+        margin-bottom: $vertical-margin;
+    }
+
+    .checkout-addresses__section--email {}
+    .checkout-addresses__section--shipping {}
+    .checkout-addresses__section--billing {}
+
+        .checkout-addresses__heading {
+            @extend %heading;
+            @extend %heading--3;
+        }
+
+        .checkout-addresses__fields {}

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

@@ -0,0 +1,50 @@
+/*------------------------------------*\
+    #CHECKOUT-PAYMENT
+\*------------------------------------*/
+
+$checkout-payment-max-width: 680px !default;
+$checkout-payment-method-selected-color:  $highlight-color !default;
+$checkout-payment-method-selected-border: 2px solid $checkout-payment-method-selected-color;
+
+.checkout-payment {}
+
+    .checkout-payment__section {
+        margin-bottom: $vertical-margin;
+        max-width: $checkout-payment-max-width;
+    }
+
+    .checkout-payment__secondary {}
+
+        .checkout-payment__secondary-method {}
+
+    .checkout-payment__primary-payment {}
+
+        .checkout-payment__primary-method-group {
+            margin-bottom: $vertical-margin;
+        }
+
+            .checkout-payment__primary-method {
+                padding: ($spacing-unit * 2);
+            }
+
+                .checkout-payment__primary-method-description {}
+
+                .checkout-payment__primary-method-edit {
+                    .js & {
+                        display: none;
+                    }
+
+                    .checkout-payment__primary-method--selected & {
+                        .js & {
+                            display: block;
+                        }
+                    }
+                }
+
+            .checkout-payment__primary-method--selected {
+                border: $checkout-payment-method-selected-border;
+            }
+
+    .checkout-payment__cart-items {}
+
+    .checkout-payment__place-order {}

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

@@ -0,0 +1,102 @@
+/*------------------------------------*\
+    #CHECKOUT-PROGRESS
+\*------------------------------------*/
+
+$checkout-progress-color: $checkout-progress-color !default;
+$checkout-progress-active-color: $checkout-progress-active-color !default;
+$checkout-progress-completed-color: $checkout-progress-completed-color !default;
+$checkout-progress-font: $secondary-font-family !default;
+
+$checkout-progress-step-font-size: 10px !default;
+$checkout-progress-step-font-size-wide: 12px !default;
+
+$checkout-progress-step-number-size: $spacing-unit * 4 !default;
+$checkout-progress-step-number-color: $checkout-progress-step-number-color !default;
+$checkout-progress-step-background-color: $checkout-progress-color !default;
+$checkout-progress-step-completed-background-color: $checkout-progress-active-color !default;
+
+$checkout-progress-step-divider-height: 2px !default;
+$checkout-progress-step-divider-width: 20vw !default;
+$checkout-progress-step-divider-color: $checkout-progress-color !default;
+$checkout-progress-step-divider-color-complete: $checkout-progress-active-color !default;
+
+
+.checkout-progress {
+    @extend %list-reset;
+    margin-bottom: $vertical-margin;
+    text-align: center;
+    font-family: $checkout-progress-font;
+}
+
+    /**
+     * 1. a `.checkout-progress__step` is considered "completed" until:
+     * 2. it becomes activated, or
+     * 3. appears after the activated step
+     */
+    .checkout-progress__step {
+        display: inline-block;
+        color: $checkout-progress-completed-color; /* [1] */
+        vertical-align: middle;
+
+        @include respond-to($medium-breakpoint) {
+            margin: 0 $spacing-unit;
+        }
+    }
+
+    .checkout-progress__step--active { /* [2] */
+        color: $checkout-progress-active-color;
+        font-weight: bold;
+
+        ~ .checkout-progress__step { /* [3] */
+            color: $checkout-progress-color;
+        }
+    }
+
+        /**
+         * 1. the link only appears within the "completed" state
+         */
+        .checkout-progress__link {} /* [1] */
+
+        .checkout-progress__text {}
+
+        .checkout-progress__link,
+        .checkout-progress__text {
+            font-size: $checkout-progress-step-font-size;
+            letter-spacing: 1px;
+
+            @include respond-to($medium-breakpoint) {
+                font-size: $checkout-progress-step-font-size-wide;
+            }
+        }
+
+            .checkout-progress__step-number {
+                display: block;
+                position: relative;
+                margin: 0 auto;
+                width: $checkout-progress-step-number-size;
+                height: $checkout-progress-step-number-size;
+                color: $checkout-progress-step-number-color;
+                font-weight: bold;
+                line-height: $checkout-progress-step-number-size;
+                text-align: center;
+                background-color: $checkout-progress-step-completed-background-color;
+                vertical-align: middle;
+
+                .checkout-progress__step--active ~ .checkout-progress__step & {
+                    background-color: $checkout-progress-step-background-color;
+                }
+            }
+
+        .checkout-progress__divider {
+            display: inline-block;
+            position: relative;
+            top: $spacing-unit * -1;
+            width: $checkout-progress-step-divider-width;
+            height: $checkout-progress-step-divider-height;
+            background-color: $checkout-progress-step-divider-color-complete;
+            vertical-align: middle;
+
+            .checkout-progress__step--active ~ & {
+                background-color: $checkout-progress-step-divider-color;
+            }
+        }