workarea-one_theme 1.3.0

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

@@ -0,0 +1,21 @@
+/*------------------------------------*\
+    #CHECKOUT-ADDRESSES
+\*------------------------------------*/
+
+.checkout-addresses {}
+
+    .checkout-addresses__section {
+        @include checkout-section;
+        margin-bottom: $vertical-margin;
+    }
+
+    .checkout-addresses__section--email {}
+    .checkout-addresses__section--shipping {}
+    .checkout-addresses__section--billing {}
+
+        .checkout-addresses__heading {
+            @extend %heading;
+            @extend %heading--4;
+        }
+
+        .checkout-addresses__fields {}

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

@@ -0,0 +1,58 @@
+/*------------------------------------*\
+    #CHECKOUT-PAYMENT
+\*------------------------------------*/
+
+$checkout-payment-method-selected-color:  $highlight-color !default;
+
+
+.checkout-payment {}
+
+    .checkout-payment__section {
+        @include checkout-section;
+        margin-bottom: $vertical-margin;
+    }
+
+        .checkout-payment__heading {
+            @extend %heading;
+            @extend %heading--4;
+        }
+
+    .checkout-payment__secondary {}
+
+        .checkout-payment__secondary-method {
+            margin-bottom: $spacing-unit * 2;
+        }
+
+    .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 {
+                background: $checkout-payment-method-selected-color;
+            }
+
+    .checkout-payment__cart-items {}
+
+    .checkout-payment__place-order {
+        margin-bottom: 0;
+    }

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

@@ -0,0 +1,47 @@
+/*------------------------------------*\
+    #CHECKOUT-PROGRESS
+\*------------------------------------*/
+
+$checkout-progress-color:            $font-color !default;
+$checkout-progress-active-color:     $font-color !default;
+$checkout-progress-completed-color:  darken($font-color, 50) !default;
+
+
+.checkout-progress {
+    @extend %list-reset;
+    margin: ($spacing-unit * 2) 0 ($spacing-unit * 3);
+    text-align: center;
+
+    @include respond-to($medium-breakpoint) {
+        text-align: left;
+    }
+}
+
+    /**
+     * 1. a `.checkout-progress__step` is considered "completed" until:
+     * 2. it becomes activated, or
+     * 3. appears after the activated step
+     */
+    .checkout-progress__step {
+        padding: $spacing-unit / 2;
+        color: $checkout-progress-completed-color; /* [1] */
+
+        @include respond-to($medium-breakpoint) {
+            display: inline-block;
+            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] */

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

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

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

@@ -0,0 +1,47 @@
+/*------------------------------------*\
+    #CHECKOUT-STEP-SUMMARY
+\*------------------------------------*/
+
+.checkout-step-summary {
+    @include checkout-section;
+}
+
+    /**
+    * 1. Positioning context for .checkout-step-summary__step-section-action
+    */
+    .checkout-step-summary__step {
+        position: relative; /* [1] */
+        margin-bottom: $spacing-unit * 2;
+    }
+
+    .checkout-step-summary__step--hidden-for-small {
+        display: none;
+
+        @include respond-to($medium-breakpoint) {
+            display: block;
+        }
+    }
+
+        .checkout-step-summary__step-heading {
+            @extend %heading;
+            @extend %heading--4;
+        }
+
+        .checkout-step-summary__section {
+            padding: $spacing-unit;
+        }
+
+            .checkout-step-summary__step-section-heading {
+                @extend %heading;
+                @extend %heading--5;
+            }
+
+            .checkout-step-summary__step-section-content {
+                margin-bottom: 0;
+            }
+
+        .checkout-step-summary__step-action {
+            position: absolute;
+            top: 0;
+            right: 0;
+        }

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

@@ -0,0 +1,48 @@
+/*------------------------------------*\
+    #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;
+    }
+
+    .color-box__swatch--focus-ring-color { background: $focus-ring-color; }
+    .color-box__swatch--primary-color { background: $primary-color; }
+    .color-box__swatch--primary-color-light { background: $primary-color-light; }
+    .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--background-secondary-color { background: $background-secondary-color; }
+    .color-box__swatch--border-color { background: $border-color; }
+    .color-box__swatch--highlight-color { background: $highlight-color; }
+    .color-box__swatch--font-color { background: $font-color; }
+    .color-box__swatch--heading-color { background: $heading-color; }
+    .color-box__swatch--product-name-color { background: $product-name-color; }
+    .color-box__swatch--header-icon-color { background: $header-icon-color; }
+    .color-box__swatch--utility-nav-background-color { background: $utility-nav-background-color; }
+    .color-box__swatch--primary-nav-links { background: $primary-nav-links; }
+    .color-box__swatch--primary-nav-dropdown-links { background: $primary-nav-dropdown-links; }
+    .color-box__swatch--mobile-nav-links { background: $mobile-nav-links; }
+    .color-box__swatch--footer-text { background: $footer-text; }
+    .color-box__swatch--link-color { background: $link-color; }
+    .color-box__swatch--link-color-hover { background: $link-color-hover; }
+    .color-box__swatch--link-secondary-color { background: $link-secondary-color; }
+    .color-box__swatch--input-color { background: $input-color; }
+    .color-box__swatch--input-background-color { background: $input-background-color; }
+    .color-box__swatch--input-secondary-color { background: $input-secondary-color; }
+    .color-box__swatch--input-secondary-bg-color { background: $input-secondary-bg-color; }
+    .color-box__swatch--overlay-shadow-color { background: $overlay-shadow-color; }
+
+    .color-box__swatch-name {}

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

@@ -0,0 +1,70 @@
+/*------------------------------------*\
+    #DATA-CARD
+\*------------------------------------*/
+
+$data-card-minimum-width:      200px !default;
+
+$data-card-default-indicator:  '✓' !default;
+
+
+.data-card {
+    display: inline-block;
+    margin:  0 $horizontal-margin $vertical-margin 0;
+    padding: ($spacing-unit * 2);
+    min-width: $data-card-minimum-width;
+
+    .account-dashboard__component & {
+        margin-bottom: 0;
+    }
+}
+
+/**
+ * 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: ($spacing-unit * 2);
+        }
+
+        .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/_hamburger.scss

@@ -0,0 +1,107 @@
+/*------------------------------------*\
+    #HAMBURGER
+\*------------------------------------*/
+
+$hamburger-color:                       $header-icon-color !default;
+$hamburger-width:                       18px !default;
+$hamburger-width-wide:                  22px !default;
+$hamburger-height:                      16px !default;
+$hamburger-height-wide:                 16px !default;
+$hamburger-top-margin:                  10px !default;
+$hamburger-line-thickness:              2px !default;
+$hamburger-line-thickness-wide:         3px !default;
+$hamburger-line-spacing:                -5px !default;
+$hamburger-line-spacing-wide:           -6px !default;
+$hamburger-animation-duration:          0.15s !default;
+
+
+.hamburger {
+    transition: top $hamburger-animation-duration ease-in-out,
+                bottom $hamburger-animation-duration ease-in-out;
+}
+
+
+    .hamburger__box {
+        display: inline-block;
+        position: relative;
+        margin-top: $hamburger-top-margin;
+        margin-left: $spacing-unit;
+        width: $hamburger-width;
+        height: $hamburger-height;
+        vertical-align: middle;
+
+        @include respond-to($wide-breakpoint) {
+            width: $hamburger-width-wide;
+            height: $hamburger-height-wide;
+        }
+    }
+
+    .hamburger__inner,
+    .hamburger__inner:before,
+    .hamburger__inner:after {
+        position: absolute;
+        width: $hamburger-width;
+        height: $hamburger-line-thickness;
+        background-color: $hamburger-color;
+        border-radius: $hamburger-line-thickness;
+        transition: transform $hamburger-animation-duration ease;
+
+        @include respond-to($wide-breakpoint) {
+            width: $hamburger-width-wide;
+            height: $hamburger-line-thickness-wide;
+        }
+    }
+
+    /**
+     * 1. targets the hamburger__inner on hamburger hover
+     * only if hamburger is inactive
+     */
+    .hamburger__inner {
+        display: block;
+        top: 50%;
+        margin-top: -2px;
+        transition-duration: 0.3s;
+        transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+
+        &:before,
+        &:after {
+            display: block;
+            content: '';
+        }
+
+        &:before {
+            top: $hamburger-line-spacing;
+            transition: top 0.1s 0.34s ease-in, opacity 0.1s ease-in;
+
+            @include respond-to($wide-breakpoint) {
+                top: $hamburger-line-spacing-wide;
+            }
+        }
+
+        &:after {
+            bottom: $hamburger-line-spacing;
+            transition: bottom 0.1s 0.34s ease-in, transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+
+            @include respond-to($wide-breakpoint) {
+                bottom: $hamburger-line-spacing-wide;
+            }
+        }
+
+        .page-container--drawer-left-open & {
+            transform: rotate(225deg);
+            transition-delay: 0.14s;
+            transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+
+            &:before {
+                top: 0;
+                transition: top 0.1s ease-out, opacity 0.1s 0.14s ease-out;
+                opacity: 0;
+            }
+
+            &:after {
+                bottom: 0;
+                transform: rotate(-90deg);
+                transition: bottom 0.1s ease-out, transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
+            }
+        }
+    }

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

@@ -0,0 +1,31 @@
+/*------------------------------------*\
+    #HEADER
+\*------------------------------------*/
+
+.header {
+    margin-bottom: $spacing-unit * 4;
+}
+
+.header--center-at-small {
+    text-align: center;
+
+    @include respond-to($medium-breakpoint) {
+        text-align: left;
+    }
+}
+
+    .header__title {}
+
+    .header__title--center-at-small {
+        text-align: center;
+
+        @include respond-to($medium-breakpoint) {
+            text-align: left;
+        }
+    }
+
+    .header__subtitle {}
+
+    .header__filter-button {
+        text-align: center;
+    }