workarea-one_theme 1.3.0

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

@@ -0,0 +1,31 @@
+/*------------------------------------*\
+    #PAGE-CONTAINER
+\*------------------------------------*/
+
+$page-container-max-width:  100% !default;
+$page-container-min-width:  320px !default;
+
+/**
+ * 1. in case `$page-container-max-width` isn't set to 100%.
+ * 2. the admin-toolbar only appears for medium+ devices.
+ */
+.page-container {
+    position: relative;
+    right: 0;
+    left:  0;
+    z-index: index($components, page-container);
+    margin:  0 auto; /* [1] */
+    max-width: $page-container-max-width;
+    min-width: $page-container-min-width;
+    transition: left 0.15s ease-in;
+
+    .admin-toolbar ~ & {
+        @include respond-to($medium-breakpoint) { /* [2] */
+            top: $global-admin-toolbar-height;
+        }
+    }
+}
+
+.page-container--drawer-left-open {
+    left: 300px;
+}

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

@@ -0,0 +1,30 @@
+/*------------------------------------*\
+    #PAGE-CONTENT
+\*------------------------------------*/
+
+$page-content-vertical-margin: $spacing-unit * 4 !default;
+$page-content-checkout-margin: $spacing-unit * 2 !default;
+$page-content-checkout-margin-medium: $spacing-unit * 4 !default;
+$page-content-no-breadcrumbs-margin-top: $spacing-unit * 2 !default;
+
+.page-content {
+    position: relative;
+    z-index: index($page-container, page-content);
+    margin: 0 0 $page-content-vertical-margin;
+}
+
+.page-content--checkout {
+    margin: $page-content-checkout-margin;
+
+    @include respond-to($medium-breakpoint) {
+        margin: $page-content-checkout-margin-medium;
+    }
+}
+
+.page-content--no-breadcrumbs {
+    margin-top: $page-content-no-breadcrumbs-margin-top;
+}
+
+    .page-content__aside {}
+
+    .page-content__main {}

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

@@ -0,0 +1,96 @@
+/*------------------------------------*\
+    #PAGE-FOOTER
+\*------------------------------------*/
+
+$page-footer-background-color: $background-secondary-color !default;
+$page-footer-color: $footer-text !default;
+$page-footer-email-signup-label-opacity: 0.6 !default;
+$page-footer-email-button-height: 40px !default;
+
+
+.page-footer {
+    padding: ($spacing-unit * 4) 0;
+    color: $page-footer-color;
+    background-color: $page-footer-background-color;
+}
+
+    /**
+     * 1. make sure no content block can inject `p` tags that will break layout.
+     */
+    .page-footer__nav {
+        margin-bottom: $spacing-unit * 4;
+        text-align: center;
+
+        @include respond-to($medium-breakpoint) {
+            margin-bottom: 0;
+            text-align: left;
+        }
+
+        p { margin: 0; } /* [1] */
+    }
+
+    .page-footer__help {
+        @extend %list-reset;
+        margin-bottom: $spacing-unit * 4;
+        text-align: center;
+
+        @include respond-to($medium-breakpoint) {
+            margin-bottom: 0;
+            text-align: left;
+        }
+    }
+
+        .page-footer__help-item {
+            padding-top: $spacing-unit;
+        }
+
+            .page-footer__help-link {
+                @extend %link--secondary;
+            }
+
+    .page-footer__email-signup {
+        margin: 0 auto;
+        width: 100%;
+        // max-width: $page-footer-email-signup-max-width;
+        text-align: center;
+
+        @include respond-to($medium-breakpoint) {
+            text-align: left;
+        }
+    }
+
+        .page-footer__heading {
+            @extend %heading;
+            @extend %heading--fancy;
+            color: $page-footer-color;
+        }
+
+        .page-footer__email-signup-form {
+            display: inline-block;
+        }
+
+            .page-footer__email-signup-label {
+                display: block;
+                margin-bottom: $spacing-unit * 2;
+                opacity: $page-footer-email-signup-label-opacity;
+            }
+
+            /**
+             * 1. Positioning context for page-footer__email-button
+             */
+            .page-footer__email-container {
+                position: relative; /* [1] */
+            }
+
+            .page-footer__email-value {
+                display: block;
+            }
+
+            .page-footer__email-action {
+                display: inline-block;
+                position: absolute;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                height: $page-footer-email-button-height;
+            }

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

@@ -0,0 +1,188 @@
+/*------------------------------------*\
+    #PAGE-HEADER
+\*------------------------------------*/
+
+$page-header-small-breakpoint: 450px !default;
+
+$page-header-logo-width:   140px !default;
+$page-header-logo-height:  37px !default;
+
+$page-header-background-color: $background-secondary-color !default;
+
+$page-header-cart-indicator-color: $primary-color !default;
+$page-header-cart-indicator-size: $spacing-unit !default;
+
+$page-header-promo-bg-color: $background-color !default;
+$page-header-promo-border: 1px solid $border-color;
+
+/**
+ * 1. clear z-index to allow drop shadow of drawers to cover page-header
+ */
+.page-header {
+    z-index: index($page-container, page-header);
+    background-color: $page-header-background-color;
+
+    .page-container--drawer-left-open & {
+        z-index: 0; /* [1] */
+    }
+}
+
+.page-header--checkout {}
+
+    /**
+    * 1. Positioning context to allow .utility-nav to slide out from behind the .page-header__main
+    */
+    .page-header__main {
+        position: relative; /* [1] */
+        z-index: index($page-header, page-header-main);
+        padding: $spacing-unit 0;
+        background-color: $background-secondary-color;
+
+        @include respond-to($medium-breakpoint) {
+            padding: ($spacing-unit * 2) 0;
+        }
+
+        .page-header--checkout & {
+            padding: ($spacing-unit * 2) 0;
+        }
+    }
+
+    .page-header__locale {}
+
+    .page-header__user-link {
+        padding: 0;
+
+        @include respond-to($page-header-small-breakpoint) {
+            padding: 0 $spacing-unit;
+        }
+
+        @include respond-to($medium-breakpoint) {
+            padding: 0 ($spacing-unit * 2);
+        }
+    }
+
+    .page-header__account-link {
+        @extend %link;
+        @extend %link--secondary;
+        display: block;
+        padding: $spacing-unit;
+    }
+
+
+    .page-header__logout-link {
+        @extend %link;
+        @extend %link--secondary;
+        display: block;
+        padding: $spacing-unit;
+    }
+
+
+    .page-header__cart-link {
+        position: relative;
+    }
+
+        .page-header__cart-icon {}
+
+        .page-header__cart-indicator {
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: $page-header-cart-indicator-size;
+            height: $page-header-cart-indicator-size;
+            background-color: $page-header-cart-indicator-color;
+            border-radius: 50%;
+            opacity: 0;
+            transition: opacity 0.15s ease-in;
+
+            .page-header__cart-link--has-items & {
+                opacity: 1;
+            }
+        }
+
+    .page-header__mobile-nav-button {
+        display: inline-block;
+        width: 20%;
+        vertical-align: middle;
+
+        @include respond-to($medium-breakpoint) {
+            display: none;
+        }
+    }
+
+    .page-header__logo-container {
+        display: inline-block;
+        width: 80%;
+        vertical-align: middle;
+    }
+
+    .page-header__logo {
+        display: block;
+        margin: 0 auto;
+        width:  $page-header-logo-width;
+        height: $page-header-logo-height;
+
+        @include respond-to($medium-breakpoint) {
+            margin: 0;
+        }
+    }
+
+    /**
+     * 1. Positioning context for .page-header__search-button and
+     *    .value__error
+     * 2. Negative offset to create equal spacing between utility nav icons
+     */
+    .page-header__search {
+        display: none;
+        position: relative; /* [1] */
+        right: $spacing-unit * -1; /* [2] */
+        text-align: center;
+
+        @include respond-to($medium-breakpoint) {
+            display: inline-block;
+            text-align: right;
+        }
+    }
+
+        .page-header__search-form {}
+
+        .page-header__search-form--open {}
+
+            .page-header__search-value {
+                display: inline-block;
+                width: 0;
+                vertical-align: middle;
+                opacity: 0;
+                transition: opacity 0.15s ease-in, width 0.15s ease-in;
+
+                .page-header__search-form--open & {
+                    width: 200px;
+                    opacity: 1;
+                }
+
+                .value__error {
+                    position: absolute;
+                }
+            }
+
+            .page-header__search-button {
+                @extend %button-reset;
+                display: inline-block;
+                position: absolute;
+                top: $spacing-unit;
+                right: $spacing-unit;
+                cursor: pointer;
+            }
+
+
+    /**
+     * 1. make sure no content block can inject `p` tags that will break layout.
+     */
+    .page-header__promo {
+        z-index: index($page-header, header-promo);
+        padding: $spacing-unit 0;
+        text-align: center;
+        background-color: $page-header-promo-bg-color;
+        border-bottom: $page-header-promo-border;
+
+        p { margin: 0; } /* [1] */
+    }

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

@@ -0,0 +1,36 @@
+/*------------------------------------*\
+    #PAGE-MESSAGES
+\*------------------------------------*/
+
+$page-messages-small-top-offset:    ($spacing-unit * 2) !default;
+$page-messages-small-right-offset:  ($spacing-unit * 2) !default;
+$page-messages-small-left-offset:   ($spacing-unit * 2) !default;
+
+$page-messages-medium-top-offset:   $spacing-unit !default;
+$page-messages-medium-right-offset: 20% !default;
+$page-messages-medium-left-offset:  20% !default;
+
+$page-messages-message-box-shadow:  0 0 16px $overlay-shadow-color !default;
+
+
+.page-messages {
+    position: fixed;
+    top:   $page-messages-small-top-offset;
+    right: $page-messages-small-right-offset;
+    left:  $page-messages-small-left-offset;
+    z-index: index($components, page-messages);
+
+    @include respond-to($medium-breakpoint) {
+        top:   $page-messages-medium-top-offset;
+        right: $page-messages-medium-right-offset;
+        left:  $page-messages-medium-left-offset;
+    }
+
+    /**
+     * Extend `.message {}` in components/_message.scss.
+     */
+
+    .message {
+        box-shadow: $page-messages-message-box-shadow;
+    }
+}

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

@@ -0,0 +1,39 @@
+/*------------------------------------*\
+    #PAGE-SUB-FOOTER
+\*------------------------------------*/
+
+$page-sub-footer-background-color: $background-secondary-color !default;
+$page-sub-footer-copyright-opacity: 0.6 !default;
+$page-sub-footer-copyright-font-size: 11px !default;
+
+
+.page-sub-footer {
+    padding: $spacing-unit;
+    color: $page-footer-color;
+    background-color: $page-footer-background-color;
+    border-top: 1px solid $border-color;
+}
+
+    .page-sub-footer__copyright {
+        margin: 0;
+        font-size: $page-sub-footer-copyright-font-size;
+        text-align: center;
+        opacity: $page-sub-footer-copyright-opacity;
+
+        @include respond-to($medium-breakpoint) {
+            text-align: left;
+        }
+    }
+
+    .page-sub-footer__payment-icons {
+        margin: $spacing-unit;
+        text-align: center;
+
+        @include respond-to($medium-breakpoint) {
+            text-align: right;
+        }
+
+        .payment-icon {
+            margin: 0 $spacing-unit;
+        }
+    }

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

@@ -0,0 +1,10 @@
+/*------------------------------------*\
+    #PAGINATION
+\*------------------------------------*/
+
+.pagination {}
+
+    .pagination__button {
+        margin-top: $spacing-unit * 2;
+        text-align: center;
+    }

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

@@ -0,0 +1,29 @@
+/*------------------------------------*\
+    #PAYMENT-ICON
+\*------------------------------------*/
+
+$payment-icon-width: 38px !default;
+$payment-icon-height: 25px !default;
+$payment-icon-unselected-opacity: 0.2 !default;
+
+.payment-icon {
+    display: inline-block;
+    width:  $payment-icon-width;
+    height: $payment-icon-height;
+    vertical-align: middle;
+
+    .checkout-payment__primary-method--new & {
+        opacity: $payment-icon-unselected-opacity;
+    }
+}
+
+.payment-icon--selected {
+    .checkout-payment__primary-method--new & {
+        opacity: 1;
+    }
+}
+
+.payment-icon--visa {}
+.payment-icon--mastercard {}
+.payment-icon--amex {}
+.payment-icon--discover {}