workarea-haven_theme 1.3.0

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

@@ -0,0 +1,44 @@
+/*------------------------------------*\
+    #BOX
+\*------------------------------------*/
+
+$box-border-color: $border-color !default;
+$box-background-color: $background-color-component !default;
+$box-border-radius: 0 !default;
+
+$box-padding: $spacing-unit ($spacing-unit * 2) !default;
+
+.box {
+    margin-bottom: $spacing-unit * 2;
+    background-color: $box-background-color;
+    border: 1px solid $border-color;
+    border-radius: $box-border-radius;
+}
+
+
+    .box__header {
+        @extend %clearfix;
+        padding: $box-padding;
+        border-bottom: 1px solid $box-border-color;
+    }
+
+        /**
+         * 1. approximate the height of a button
+         */
+        .box__heading {
+            @extend %heading;
+            @extend %heading--5;
+            @extend %heading--upcase;
+            margin-bottom: 0;
+            line-height: 1.75; /* [1] */
+        }
+
+        .box__action {
+            float: right;
+        }
+
+
+    .box__body {
+        padding: $spacing-unit * 2;
+        padding-bottom: 0;
+    }

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

@@ -0,0 +1,53 @@
+/*------------------------------------*\
+    #BREADCRUMBS
+\*------------------------------------*/
+
+$breadcrumb-node-separator: '>' !default;
+$breadcrumbs-container-max-width: 1410px !default;
+$breadcrumb-node-separator-font-size: $font-size-tiny;
+
+/**
+ * 1. adds visual separator for adjacent `.breadcrumbs_node`
+ */
+
+.breadcrumbs {
+    display: none;
+
+    @include respond-to($medium-breakpoint) {
+        display: block;
+        margin: 0 auto $vertical-margin;
+        border-color: $breadcrumbs-divider-color;
+        border-style: solid;
+        border-width: 1px 0;
+    }
+}
+
+    .breadcrumbs__node-group {
+        margin: $spacing-unit auto;
+        padding: 0 ($spacing-unit * 2);
+        max-width: $breadcrumbs-container-max-width;
+    }
+
+        .breadcrumbs__node {
+            font-size: $font-size-small;
+
+            & + &:before { /* [1] */
+                display: inline-block;
+                margin: 0 ($spacing-unit / 2);
+                color: $breadcrumbs-arrow-color;
+                font-size: $breadcrumb-node-separator-font-size;
+                content: $breadcrumb-node-separator;
+            }
+        }
+
+            .breadcrumbs__link {}
+
+            .breadcrumbs__text {}
+
+            .breadcrumbs__link,
+            .breadcrumbs__text {
+                color: $breadcrumbs-color;
+                font-weight: $font-weight-regular;
+                text-transform: capitalize;
+                vertical-align: middle;
+            }

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

@@ -0,0 +1,153 @@
+/*------------------------------------*\
+    #BUTTON
+\*------------------------------------*/
+
+$button-color: $button-color !default;
+$button-bg-color: $button-background-color !default;
+$button-bg-color-hover: $button-background-color-hover !default;
+
+$button-secondary-color: $button-secondary-color !default;
+$button-secondary-bg-color: $button-secondary-background-color !default;
+$button-secondary-bg-color-hover: $button-secondary-background-color-hover !default;
+$button-secondary-border-color: $button-secondary-border-color !default;
+$button-secondary-border-color-disabled: $button-secondary-border-color-disabled !default;
+$button-secondary-border-width: 3px !default;
+
+$button-secondary-color-alt: $button-secondary-color-alt !default;
+$button-secondary-border-color-alt: $button-secondary-border-color-alt !default;
+
+$button-disabled-color: $button-disabled-color !default;
+$button-disabled-background-color: $button-disabled-background-color !default;
+
+$button-padding: $spacing-unit ($spacing-unit * 2) !default;
+$button-small-padding: ($spacing-unit / 2) $spacing-unit !default;
+$button-large-padding: $spacing-unit ($spacing-unit * 3) !default;
+
+$button-font-size: 12px !default;
+$button-secondary-font-size: 18px !default;
+$button-small-font-size: 12px !default;
+$button-large-font-size: 15px !default;
+
+
+/**
+ * 1. ensure button text won't receive an underline on hover
+ */
+%button,
+.button {
+    @extend %button-reset;
+    display: inline-block;
+    padding: $button-padding;
+    color: $button-color;
+    font-size: $button-font-size;
+    letter-spacing: $font-letter-spacing;
+    background: $button-bg-color;
+    cursor: pointer;
+
+    &:focus,
+    &:hover {
+        color: $button-color;
+        text-decoration: none; /* [1] */
+        background-color: $button-bg-color-hover;
+    }
+
+    &:disabled {
+        color: $button-disabled-color;
+        background-color: $button-disabled-background-color;
+    }
+
+    .search__button & {
+        padding: $spacing-unit ($spacing-unit * 2);
+        background-color: $transparent;
+    }
+}
+
+%button--secondary,
+.button--secondary {
+    color: $button-secondary-color;
+    font-size: $button-secondary-font-size;
+    background: $button-secondary-bg-color;
+    border: $button-secondary-border-width solid $button-secondary-border-color;
+
+    &:focus,
+    &:hover {
+        color: $button-secondary-color;
+        background-color: $button-secondary-bg-color-hover;
+    }
+
+    &:disabled {
+        background-color: $button-disabled-background-color;
+        border-color: $button-secondary-border-color-disabled;
+    }
+}
+
+%button--secondary-alt,
+.button--secondary-alt {
+    @extend %button--secondary;
+    color: $button-secondary-color-alt;
+    border-color: $button-secondary-border-color-alt;
+
+    &:focus,
+    &:hover {
+        color: $button-secondary-color-alt;
+        background-color: $button-secondary-bg-color;
+    }
+}
+
+.button--small {
+    padding: $button-small-padding;
+    font-size: $button-small-font-size;
+}
+
+.button--large {
+    padding: $button-large-padding;
+    font-size: $button-large-font-size;
+    text-transform: uppercase;
+}
+
+.button--full {
+    width: 100%;
+    text-align: center;
+}
+
+    .button__icon {
+        display: inline-block;
+        width: $button-font-size * 2;
+        height: $button-font-size;
+        vertical-align: middle;
+        transform: translateX($spacing-unit);
+        fill: $button-color;
+
+        .button--small & {
+            transform: translateX($spacing-unit / 2);
+        }
+
+        .button--large & {
+            width: $button-large-font-size * 2;
+            height: $button-large-font-size;
+            transform: translateX($spacing-unit * 2);
+        }
+
+        .button--secondary & {
+            fill: $button-secondary-color;
+        }
+
+        .button--secondary-alt & {
+            fill: $button-secondary-color-alt;
+        }
+    }
+
+    .button__icon--shift-right {
+        transition: transform $transition-time ease-in;
+
+        .button:hover & {
+            transform: translateX($spacing-unit + 4px);
+        }
+
+        .button--small:hover & {
+            transform: translateX($spacing-unit);
+        }
+
+        .button--large:hover & {
+            transform: translateX(($spacing-unit * 2) + $spacing-unit);
+        }
+    }

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

@@ -0,0 +1,46 @@
+/*------------------------------------*\
+    #BUTTON-PROPERTY
+\*------------------------------------*/
+
+.button-property {
+    margin-bottom: $vertical-margin;
+
+    .checkout-payment__primary-method & {
+        margin-bottom: 0;
+    }
+}
+
+
+/**
+ * 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;
+        padding-left: $spacing-unit;
+        vertical-align: middle;
+    }
+
+        .button-property__text {}

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

@@ -0,0 +1,85 @@
+/*------------------------------------*\
+    #CART
+\*------------------------------------*/
+
+$cart-item-count-color: $cart-item-count-color !default;
+$cart-aside-background-color: $page-aside-background-color !default;
+$cart-action-max-width: 100% !default;
+$cart-action-max-width-wide: 420px !default;
+
+
+.cart {
+    padding: 0 $spacing-unit $spacing-unit;
+
+    @include respond-to($medium-breakpoint) {
+        padding: 0 ($spacing-unit * 3) ($spacing-unit * 3);
+    }
+}
+
+.cart--empty {
+    padding-top: $spacing-unit * 5;
+    padding-bottom: $spacing-unit * 5;
+    text-align: center;
+}
+
+    .cart__content {
+        margin-bottom: $spacing-unit;
+
+        @include respond-to($medium-breakpoint) {
+            margin-bottom: $spacing-unit * 2;
+        }
+    }
+
+    .cart__heading {
+        @extend %heading;
+        @extend %heading--4;
+        @extend %heading--upcase;
+    }
+
+    .cart__item-count {
+        color: $cart-item-count-color;
+    }
+
+    .cart__continue-shopping {}
+
+    .cart__checkout-action-group {
+        @include respond-to($medium-breakpoint) {
+            text-align: right;
+        }
+    }
+
+        .cart__checkout-action {
+            margin-bottom: $vertical-margin;
+            max-width: $cart-action-max-width;
+
+            @include respond-to($medium-breakpoint) {
+                max-width: $cart-action-max-width-wide;
+            }
+        }
+
+    .cart__aside {
+        padding: ($spacing-unit * 3) ($spacing-unit * 2);
+        background-color: $cart-aside-background-color;
+
+        @include respond-to($medium-breakpoint) {
+            padding: ($spacing-unit * 5) ($spacing-unit * 3);
+        }
+    }
+
+        .cart__discount-messaging {}
+
+        .cart__aside-heading {
+            @extend %heading;
+            @extend %heading--6;
+            @extend %heading--upcase;
+        }
+
+        .cart__promo-code {
+            margin-bottom: $vertical-margin;
+        }
+
+            .cart__promo-code-heading {
+                @extend %heading;
+                @extend %heading--6;
+                @extend %heading--upcase;
+            }

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

@@ -0,0 +1,27 @@
+/*------------------------------------*\
+    #CATEGORY-SUMMARY-CONTENT-BLOCK
+\*------------------------------------*/
+
+$category-summary-content-block-background-color: $background-color-alternate !default;
+
+
+.category-summary-content-block {
+    padding: ($spacing-unit * 4) 0;
+    background-color: $category-summary-content-block-background-color;
+}
+
+.category-summary-content-block--full-bleed {
+    @include full-bleed-container;
+}
+
+    .category-summary-content-block__heading {
+        text-align: center;
+    }
+
+        .category-summary-content-block__heading-link {
+            @extend %heading;
+            @extend %heading--4;
+            @extend %heading--upcase;
+        }
+
+    .category-summary-content-block__empty-message {}

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

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

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

@@ -0,0 +1,57 @@
+/*------------------------------------*\
+    #CHECKOUT-CONFIRMATION
+\*------------------------------------*/
+
+$checkout-confirmation-border: 1px solid $border-color !default;
+
+$checkout-confirmation-checkmark-size: 46px !default;
+$checkout-confirmation-checkmark-background-color: $checkout-conifrmation-checkmark-background-color !default;
+$checkout-confirmation-checkmark-icon-size: 23px !default;
+$checkout-confirmation-checkmark-icon-color: $checkout-conifrmation-checkmark-icon-color !default;
+
+$checkout-confirmation-account-min-height: 230px !default;
+
+.checkout-confirmation {
+    margin-top: $spacing-unit * 5;
+}
+
+    .checkout-confirmation__content {
+        padding: $spacing-unit * 2;
+
+        @include respond-to($medium-breakpoint) {
+            display: inline-block;
+            padding-left: 0;
+            width: 50%;
+            vertical-align: top;
+        }
+    }
+
+        .checkout-confirmation__checkmark {
+            position: relative;
+            margin: 0 auto ($spacing-unit * 4);
+            width: $checkout-confirmation-checkmark-size;
+            height: $checkout-confirmation-checkmark-size;
+            background-color: $checkout-confirmation-checkmark-background-color;
+            border-radius: 50%;
+        }
+
+            .checkout-confirmation__checkmark-icon {
+                @include center;
+                width: $checkout-confirmation-checkmark-icon-size;
+                height: $checkout-confirmation-checkmark-icon-size;
+                fill: $checkout-confirmation-checkmark-icon-color;
+            }
+
+    .checkout-confirmation__account {
+        padding: $spacing-unit * 2;
+        border-top: $checkout-confirmation-border;
+
+        @include respond-to($medium-breakpoint) {
+            display: inline-block;
+            padding-right: 0;
+            width: 50%;
+            min-height: $checkout-confirmation-account-min-height;
+            border-top: 0;
+            border-left: $checkout-confirmation-border;
+        }
+    }