workarea-storefront 3.4.12

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

@@ -0,0 +1,14 @@
+/*------------------------------------*\
+    #CATEGORY-SUMMARY-CONTENT-BLOCK
+\*------------------------------------*/
+
+.category-summary-content-block {}
+
+    .category-summary-content-block__heading {
+        @extend %heading;
+        @extend %heading--2;
+    }
+
+        .category-summary-content-block__heading-link {}
+
+    .category-summary-content-block__empty-message {}

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

@@ -0,0 +1,17 @@
+/*------------------------------------*\
+    #CHECKOUT-ADDRESSES
+\*------------------------------------*/
+
+.checkout-addresses {}
+
+    .checkout-addresses__section {
+        margin-bottom: $vertical-margin;
+    }
+
+    .checkout-addresses__section--email {}
+    .checkout-addresses__section--shipping {}
+    .checkout-addresses__section--billing {}
+
+        .checkout-addresses__heading {}
+
+        .checkout-addresses__fields {}

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

@@ -0,0 +1,48 @@
+/*------------------------------------*\
+    #CHECKOUT-PAYMENT
+\*------------------------------------*/
+
+$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;
+    }
+
+    .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,42 @@
+/*------------------------------------*\
+    #CHECKOUT-PROGRESS
+\*------------------------------------*/
+
+$checkout-progress-color:            $font-color !default;
+$checkout-progress-active-color:     $font-color !default;
+$checkout-progress-completed-color:  darken($gray, 50) !default;
+
+
+.checkout-progress {
+    @extend %list-reset;
+    margin-bottom: $vertical-margin;
+    text-align: center;
+}
+
+    /**
+     * 1. a `.checkout-progress__step` is considered "completed" until:
+     * 2. it becomes activated, or
+     * 3. appears after the activated step
+     */
+    .checkout-progress__step {
+        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,11 @@
+/*------------------------------------*\
+    #CHECKOUT-SHIPPING
+\*------------------------------------*/
+
+.checkout-shipping {}
+
+    .checkout-shipping__section {
+        margin-bottom: $vertical-margin;
+    }
+
+        .checkout-shipping__heading {}

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__section {}

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

@@ -0,0 +1,39 @@
+/*------------------------------------*\
+    #CONTENT-BLOCK
+\*------------------------------------*/
+
+.content-block {}
+
+.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,68 @@
+/*------------------------------------*\
+    #DATA-CARD
+\*------------------------------------*/
+
+$data-card-minimum-width:      200px !default;
+$data-card-border-color:       $light-gray !default;
+
+$data-card-default-indicator:  '✓' !default;
+
+
+.data-card {
+    margin:  0 0 $vertical-margin;
+    padding: ($spacing-unit * 2);
+    min-width: $data-card-minimum-width;
+    border: 1px solid $data-card-border-color;
+    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: ($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/_divider_content_block.scss

@@ -0,0 +1,38 @@
+/*------------------------------------*\
+    #DIVIDER-CONTENT-BLOCK
+\*------------------------------------*/
+
+$divider-content-block-color:  $black !default;
+
+.divider-content-block {
+    &:before,
+    &:after {
+        display: block;
+        height: ($spacing-unit * 4); // TODO: v4 remove
+        content: '';
+    }
+}
+
+.divider-content-block--small {
+    &:before, &:after {
+        height: $spacing-unit;
+    }
+}
+
+.divider-content-block--medium {
+    &:before, &:after {
+        height: $spacing-unit * 2;
+    }
+}
+
+.divider-content-block--large {
+    &:before, &:after {
+        height: $spacing-unit * 4;
+    }
+}
+
+    .divider-content-block__line {
+        display: block;
+        height: 0;
+        border-color: $divider-content-block-color;
+    }

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

@@ -0,0 +1,9 @@
+/*------------------------------------*\
+    #EMAIL-SIGNUP
+\*------------------------------------*/
+
+.email-signup {}
+
+    .email-signup__content {}
+
+    .email-signup__form {}

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

@@ -0,0 +1,77 @@
+/*------------------------------------*\
+    #HERO-CONTENT-BLOCK
+\*------------------------------------*/
+
+$hero-content-block-position-offset:  ($spacing-unit * 2) !default;
+
+
+/**
+ * 1. provides positioning context for `.hero-content-block__button`
+ */
+.hero-content-block {
+    position: relative; /* [1] */
+}
+
+    /**
+     * 1. height is achieved by adding bottom padding to the element via inline
+     *    styles
+     */
+    .hero-content-block__image-container {
+        height: 0; /* [1] */
+    }
+
+        .hero-content-block__image {
+            display: block;
+            width: 100%;
+        }
+
+    .hero-content-block__button {
+        position: absolute;
+    }
+
+
+    .hero-content-block__button--top-left {
+        top: $hero-content-block-position-offset;
+        left: $hero-content-block-position-offset;
+    }
+
+    .hero-content-block__button--top-center {
+        @include center('horizontal');
+        top: $hero-content-block-position-offset;
+    }
+
+    .hero-content-block__button--top-right {
+        top: $hero-content-block-position-offset;
+        right: $hero-content-block-position-offset;
+    }
+
+
+    .hero-content-block__button--middle-left {
+        @include center('vertical');
+        left: $hero-content-block-position-offset;
+    }
+
+    .hero-content-block__button--middle-center {
+        @include center;
+    }
+
+    .hero-content-block__button--middle-right {
+        @include center('vertical');
+        right: $hero-content-block-position-offset;
+    }
+
+
+    .hero-content-block__button--bottom-left {
+        bottom: $hero-content-block-position-offset;
+        left: $hero-content-block-position-offset;
+    }
+
+    .hero-content-block__button--bottom-center {
+        @include center('horizontal');
+        bottom: $hero-content-block-position-offset;
+    }
+
+    .hero-content-block__button--bottom-right {
+        right: $hero-content-block-position-offset;
+        bottom: $hero-content-block-position-offset;
+    }

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

@@ -0,0 +1,5 @@
+/*------------------------------------*\
+    #HTML-CONTENT-BLOCK
+\*------------------------------------*/
+
+.html-content-block {}

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

@@ -0,0 +1,30 @@
+/*------------------------------------*\
+    #IMAGE-AND-TEXT-CONTENT-BLOCK
+\*------------------------------------*/
+
+.image-and-text-content-block {
+    @extend %clearfix;
+}
+
+
+    .image-and-text-content-block__image-container {
+        display: block;
+        margin: 0 $spacing-unit $spacing-unit;
+    }
+
+    .image-and-text-content-block__image-container--left {
+        margin-left: 0;
+        float: left;
+    }
+
+    .image-and-text-content-block__image-container--right {
+        margin-right: 0;
+        float: right;
+    }
+
+        .image-and-text-content-block__image-link {}
+
+            .image-and-text-content-block__image {}
+
+
+    .image-and-text-content-block__text {}

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

@@ -0,0 +1,16 @@
+/*------------------------------------*\
+    #IMAGE-CONTENT-BLOCK
+\*------------------------------------*/
+
+.image-content-block {}
+
+.image-content-block--left { text-align: left; }
+.image-content-block--center { text-align: center; }
+.image-content-block--right { text-align: right; }
+
+
+    .image-content-block__image-link {}
+
+        .image-content-block__image {
+            display: inline-block;
+        }