workarea-haven_theme 1.3.0

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

@@ -0,0 +1,80 @@
+/*------------------------------------*\
+    #CHECKOUT-PAYMENT
+\*------------------------------------*/
+
+$checkout-payment-method-border-color:  $border-color !default;
+$checkout-payment-method-selected-border-color:  $primary-color !default;
+$checkout-payment-primary-method-max-width: 420px !default;
+$checkout-payment-secondary-method-max-width: 420px !default;
+
+.checkout-payment {}
+
+    .checkout-payment__heading {
+        @extend %heading;
+        @extend %heading--4;
+    }
+
+    .checkout-payment__section {
+        margin-bottom: $vertical-margin;
+    }
+
+    .checkout-payment__secondary {}
+
+        .checkout-payment__secondary-method {
+            margin-bottom: $vertical-margin;
+            max-width: $checkout-payment-secondary-method-max-width;
+        }
+
+    .checkout-payment__primary-payment {}
+
+        .checkout-payment__primary-method-group {
+            margin-bottom: $vertical-margin;
+        }
+
+            .checkout-payment__primary-method {
+                margin-bottom: $vertical-margin;
+                padding: ($spacing-unit * 2);
+                max-width: $checkout-payment-primary-method-max-width;
+                border: 1px solid $checkout-payment-method-border-color;
+            }
+
+            .checkout-payment__primary-method--selected {
+                border-color: $checkout-payment-method-selected-border-color;
+            }
+
+                .checkout-payment__primary-method-description {
+                    @extend %text;
+                    @extend %text--tiny;
+                    @extend %text--no-margin;
+                    margin-left: $spacing-unit * 3;
+                }
+
+                    .checkout-payment__primary-method-name-on-card {
+                        @extend %text;
+                        @extend %text--tiny;
+                        @extend %text--no-margin;
+                        display: block;
+                    }
+
+                .checkout-payment__primary-method-edit {
+                    .js & {
+                        display: none;
+                    }
+
+                    .checkout-payment__primary-method--selected & {
+                        .js & {
+                            display: block;
+                        }
+                    }
+                }
+
+                .checkout-payment__all-payment-icons {
+                    @include respond-to($medium-breakpoint) {
+                        display: inline-block;
+                        padding-left: $spacing-unit;
+                    }
+                }
+
+    .checkout-payment__cart-items {}
+
+    .checkout-payment__place-order {}

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

@@ -0,0 +1,149 @@
+/*------------------------------------*\
+    #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-step-color: $checkout-progress-step-color !default;
+$checkout-progress-step-background-color: $checkout-progress-step-background-color !default;
+
+$checkout-progress-step-number-color: $checkout-progress-step-number-color !default;
+$checkout-progress-step-completed-color: $checkout-progress-active-color !default;
+$checkout-progress-step-completed-background-color: $checkout-progress-active-color !default;
+
+$checkout-progress-max-width: 768px !default;
+$checkout-progress-step-font-size: 8px !default;
+$checkout-progress-step-font-size-wide: 12px !default;
+$checkout-progress-step-number-size: $spacing-unit * 4 !default;
+$checkout-progress-step-complete-icon-size: 8px !default;
+$checkout-progress-step-complete-icon-size-wide: 16px !default;
+
+$checkout-progress-step-divider-height: 2px !default;
+$checkout-progress-step-divider-width: 6vw !default;
+$checkout-progress-step-divider-color: $checkout-progress-step-divider-color !default;
+$checkout-progress-step-divider-color-complete: $primary-color !default;
+
+
+.checkout-progress {
+    @extend %list-reset;
+    display: table;
+    margin: ($spacing-unit * 2) auto;
+    width: 100%;
+    max-width: $checkout-progress-max-width;
+    text-align: center;
+
+    @include respond-to($medium-breakpoint) {
+        margin: ($spacing-unit * 3) auto;
+        padding: 0 ($spacing-unit * 2);
+    }
+
+    @include respond-to($wide-breakpoint) {
+        margin: ($spacing-unit * 4) auto;
+    }
+}
+
+    /**
+     * 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;
+        width: 33%;
+        color: $checkout-progress-completed-color; /* [1] */
+        white-space: nowrap;
+        vertical-align: middle;
+
+        @include respond-to($small-horizontal-breakpoint) {
+            width: auto;
+        }
+
+        @include respond-to($medium-breakpoint) {
+            margin: 0 $spacing-unit;
+
+        }
+    }
+
+    .checkout-progress__step--active { /* [2] */
+        color: $checkout-progress-active-color;
+
+        ~ .checkout-progress__step { /* [3] */
+            color: $checkout-progress-color;
+
+            .checkout-progress__step-number {
+                background-color: $checkout-progress-step-background-color;
+            }
+        }
+    }
+
+        .checkout-progress__divider {
+            display: none;
+            margin: 0 ($spacing-unit * 2);
+            height: $checkout-progress-step-divider-height;
+            background-color: $checkout-progress-step-divider-color-complete;
+            vertical-align: middle;
+
+            @include respond-to($small-horizontal-breakpoint) {
+                display: inline-block;
+                width: $checkout-progress-step-divider-width;
+            }
+
+            .checkout-progress__step--active ~ & {
+                background-color: $checkout-progress-step-divider-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;
+                line-height: $checkout-progress-step-number-size;
+                text-align: center;
+                background-color: $checkout-progress-step-completed-background-color;
+                border-radius: 50%;
+                vertical-align: middle;
+
+                @include respond-to($small-horizontal-breakpoint) {
+                    display: inline-block;
+                }
+
+                .checkout-progress__step--active & {
+                    background-color: $checkout-progress-step-completed-background-color;
+                }
+            }
+
+                .checkout-progress__step-checkmark {
+                    position: absolute;
+                    top: 50%;
+                    width: $checkout-progress-step-complete-icon-size;
+                    height: $checkout-progress-step-complete-icon-size;
+                    transform: translate(-50%, -50%);
+                    fill: $checkout-progress-step-number-color;
+
+                    @include respond-to($medium-breakpoint) {
+                        width: $checkout-progress-step-complete-icon-size-wide;
+                        height: $checkout-progress-step-complete-icon-size-wide;
+                    }
+                }

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

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

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

@@ -0,0 +1,81 @@
+/*------------------------------------*\
+    #CHECKOUT-STEP-SUMMARY
+\*------------------------------------*/
+
+$checkout-step-summary-section-border-color: $checkout-summary-section-border-color !default;
+
+
+.checkout-step-summary {
+    padding: ($spacing-unit * 4) ($spacing-unit * 2);
+}
+
+    .checkout-step-summary__step {
+        & + & {
+            border-top: 1px solid $checkout-step-summary-section-border-color;
+        }
+    }
+
+    .checkout-step-summary__step--hidden-for-small {
+        display: none;
+
+        @include respond-to($medium-breakpoint) {
+            display: block;
+        }
+    }
+
+        .checkout-step-summary__step-heading {
+            @extend %visually-hidden;
+        }
+
+        .checkout-step-summary__section {
+            position: relative;
+            padding: ($spacing-unit * 2) 0;
+            border-bottom: 1px solid $checkout-step-summary-section-border-color;
+
+            &:last-of-type {
+                border-bottom: 0;
+            }
+        }
+
+            .checkout-step-summary__section-heading {
+                @extend %heading;
+                @extend %heading--6;
+                @extend %heading--upcase;
+            }
+
+            .checkout-step-summary__section-content {
+                @extend %text;
+                @extend %text--small;
+                @extend %text--no-margin;
+            }
+
+            .checkout-step-summary__section-action {
+                position: absolute;
+                top: $spacing-unit;
+                right: 0;
+            }
+
+        .checkout-step-summary__items {
+            margin-bottom: $vertical-margin;
+        }
+
+            .checkout-step-summary__heading {
+                text-transform: uppercase;
+            }
+
+            .checkout-step-summary__totals {
+                margin-bottom: $spacing-unit * 2;
+
+                @include respond-to($medium-breakpoint) {
+                    margin-bottom: $spacing-unit * 4;
+                }
+            }
+
+        .checkout-step-summary__promo-code {
+            margin-bottom: $spacing-unit * 4;
+        }
+
+        .checkout-step-summary__promo-code-heading {
+            @extend %heading;
+            @extend %heading--5;
+        }

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

@@ -0,0 +1,83 @@
+/*------------------------------------*\
+    #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; }
+
+    // Site header colors
+    .color-box__swatch--header-icon-color { background: $header-icon-color; }
+    .color-box__swatch--header-icon-color-hover { background: $header-icon-color-hover; }
+    .color-box__swatch--utility-nav-background-color { background: $utility-nav-background-color; }
+
+    // Navigation colors
+    .color-box__swatch--primary-nav-background-color { background: $primary-nav-background-color; }
+    .color-box__swatch--primary-nav-border-color { background: $primary-nav-border-color; }
+    .color-box__swatch--primary-nav-links-color { background: $primary-nav-links-color; }
+    .color-box__swatch--primary-nav-links-color-hover { background: $primary-nav-links-color-hover; }
+    .color-box__swatch--primary-nav-dropdown-links { background: $primary-nav-dropdown-links; }
+    .color-box__swatch--primary-nav-dropdown-links-hover { background: $primary-nav-dropdown-links-hover; }
+    .color-box__swatch--mobile-nav-links { background: $mobile-nav-links; }
+
+    // Footer colors
+    .color-box__swatch--footer-color { background: $footer-color; }
+    .color-box__swatch--footer-background-color { background: $footer-background-color; }
+
+    // Typography colors
+    .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; }
+
+    // Links & Buttons
+    .color-box__swatch--link-color { background: $link-color; }
+    .color-box__swatch--link-color-hover { background: $link-color-hover; }
+    .color-box__swatch--button-color { background: $button-color; }
+    .color-box__swatch--button-background-color { background: $button-background-color; }
+    .color-box__swatch--button-background-color-hover { background: $button-background-color-hover; }
+    .color-box__swatch--button-border-color { background: $button-border-color; }
+
+    .color-box__swatch--button-secondary-color { background: $button-secondary-color; }
+    .color-box__swatch--button-secondary-background-color { background: $button-secondary-background-color; }
+    .color-box__swatch--button-secondary-background-color-hover { background: $button-secondary-background-color-hover; }
+    .color-box__swatch--button-secondary-border-color { background: $button-secondary-border-color; }
+    .color-box__swatch--button-secondary-border-color-disabled { background: $button-secondary-border-color-disabled; }
+
+    .color-box__swatch--button-disabled-color { background: $button-disabled-color; }
+    .color-box__swatch--button-disabled-background-color { background: $button-disabled-background-color; }
+
+
+    // Inputs
+    .color-box__swatch--label-color { background: $label-color; }
+    .color-box__swatch--input-color { background: $input-color; }
+    .color-box__swatch--input-background-color { background: $input-background-color; }
+    .color-box__swatch--input-border-color { background: $input-border-color; }
+    .color-box__swatch--input-border-color-focus { background: $input-border-color-focus; }
+    .color-box__swatch--focus-ring-color { background: $focus-ring-color; }
+    .color-box__swatch--invalid-color { background: $invalid-color; }
+    .color-box__swatch--valid-color { background: $valid-color; }
+
+    .color-box__swatch-name {}

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

@@ -0,0 +1,56 @@
+/*------------------------------------*\
+    #CONTENT-BLOCK
+\*------------------------------------*/
+
+$content-block-font-size: $font-size-content-blocks !default;
+
+
+.content-block {
+    .page-content & {
+        font-size: $content-block-font-size;
+    }
+}
+
+/**
+ * 1. Font size must be 0 to preserve inline-block layout.
+ * Content blocks available in-grid must set a font-size to prevent regressions
+ */
+.content-block--product-grid-cell {
+    .page-content & {
+        font-size: 0; /* [1] */
+    }
+}
+
+.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;
+    }
+}