workarea-one_theme 1.3.0

data/app/assets/stylesheets/workarea/storefront/clothing/components/_color_options.scss

@@ -0,0 +1,57 @@
+/*------------------------------------*\
+    #COLOR-OPTIONS
+\*------------------------------------*/
+
+$color-options-outline: 2px solid $border-color !default;
+$color-options-selected-outline: 2px solid $primary-color !default;
+$color-options-color-size: 44px !default;
+$color-options-small-color-size: 24px !default;
+
+
+.color-options {}
+
+.color-options--small {}
+
+    .color-options__label {
+        margin: 0;
+    }
+
+    .color-options__color-group {
+        @extend %inline-list;
+    }
+
+        .color-options__color {
+            position: relative;
+            margin: 0 0 $spacing-unit;
+            width:  $color-options-color-size;
+            height: $color-options-color-size;
+            outline: $color-options-outline;
+            overflow: hidden;
+
+            & + & {
+                margin-left: $spacing-unit;
+            }
+
+            .color-options--small & {
+                margin-top:    $spacing-unit;
+                margin-bottom: 0;
+                width:  $color-options-small-color-size;
+                height: $color-options-small-color-size;
+            }
+        }
+
+        .color-options__color--selected {
+            outline: $color-options-selected-outline;
+        }
+
+            .color-options__color-button,
+            .color-options__color-button-image {
+                display: block;
+                position: absolute;
+                top:    0;
+                right:  0;
+                bottom: 0;
+                left:   0;
+            }
+
+            .color-options__color-name {}

data/app/assets/stylesheets/workarea/storefront/clothing/components/_size_options.scss

@@ -0,0 +1,123 @@
+/*------------------------------------*\
+    #SIZE-OPTIONS
+\*------------------------------------*/
+
+$size-options-error-color:                $black !default;
+$size-options-error-bg-color:             $red !default;
+$size-options-color:                      $font-color !default;
+$size-options-selected-color:             $input-secondary-color !default;
+$size-options-border-color:               $link-color !default;
+$size-options-selected-background-color:  $primary-color !default;
+$size-options-limited-outline-color:      lighten($red, 25%) !default;
+$size-options-backordered-outline-color:  $red !default;
+$size-options-focused-outline-color:      $primary-color !default;
+
+$size-options-unavailable-opacity:  $primary-color !default;
+$size-options-message-shadow:       0 0 8px $overlay-shadow-color !default;
+
+
+.size-options {}
+
+    .size-options__size-header {}
+
+        .size-options__label {
+            display: inline;
+            margin: 0;
+        }
+
+        .size-options__size-guide {
+            display: inline;
+        }
+
+    /**
+     * 1. positioning context for error message
+     */
+
+    .size-options__size-group {
+        @extend %inline-list;
+        position: relative; /* [1] */
+    }
+
+        .size-options__size {
+            margin: 0 $spacing-unit $spacing-unit 0;
+
+            /**
+             * Extend `.value__error {}` in _value.scss.
+             */
+
+            .value__error {
+                position: absolute;
+                bottom: 100%;
+                left:   0;
+                padding: 0 ($spacing-unit / 2);
+                color: $size-options-error-color;
+                background: $size-options-error-bg-color;
+                box-shadow: $size-options-message-shadow;
+            }
+        }
+
+            .size-options__size-button {
+                margin: 0;
+            }
+
+                .size-options__size-input {
+                    vertical-align: top;
+
+                    .js & {
+                        @extend %visually-hidden;
+                    }
+                }
+
+                /**
+                 * 1. vertically centers label value
+                 */
+
+                .size-options__size-label {
+                    display: inline-block;
+                    padding: 12px 0 0; /* [1] */
+                    width:  44px;
+                    height: 44px;
+                    color: $size-options-color;
+                    text-align: center;
+                    border: 1px solid $size-options-border-color;
+                    vertical-align: top;
+                    cursor: pointer;
+                }
+
+                .size-options__size-label--unavailable {
+                    opacity: $size-options-unavailable-opacity;
+                    cursor: not-allowed;
+                }
+
+                .size-options__size-label--selected {
+                    color: $size-options-selected-color;
+                    background-color: $size-options-selected-background-color;
+                }
+
+                .size-options__size-label--limited {
+                    outline: 1px dotted $size-options-limited-outline-color;
+                }
+
+                .size-options__size-label--backordered {
+                    outline: 1px dashed $size-options-backordered-outline-color;
+                }
+
+                .size-options__size-label--focused {
+                    outline: 1px solid $size-options-focused-outline-color;
+                }
+
+            .size-options__size-messages {
+                display: none;
+
+                .size-options__size:hover & {
+                    display: block;
+                    position: absolute;
+                    bottom: 100%;
+                    left:   0;
+                    box-shadow: $size-options-message-shadow;
+                }
+            }
+
+                .size-options__size-message {
+                    padding: 0 ($spacing-unit / 2);
+                }

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

@@ -0,0 +1,33 @@
+/*------------------------------------*\
+    #ACCOUNT-DASHBOARD
+\*------------------------------------*/
+
+$account-dashboard-component-padding: $spacing-unit * 2 !default;
+$account-dashboard-component-bg-color: $background-color-component !default;
+
+
+.account-dashboard {}
+
+    .account-dashboard__heading {}
+
+    .account-dashboard__component {
+        position: relative;
+        margin-bottom: $spacing-unit * 2;
+        padding: $account-dashboard-component-padding;
+        background-color: $account-dashboard-component-bg-color;
+    }
+
+        .account-dashboard__component-heading {
+            @extend %heading;
+            @extend %heading--4;
+        }
+
+        .account-dashboard__component-action {
+            position: absolute;
+            top: $account-dashboard-component-padding;
+            right: $account-dashboard-component-padding;
+        }
+
+        .account-dashboard__component-action--static {
+            position: static;
+        }

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

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

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

@@ -0,0 +1,27 @@
+/*------------------------------------*\
+    #BREADCRUMBS
+\*------------------------------------*/
+
+$breadcrumb-node-separator:  '/' !default;
+
+
+/**
+ * 1. adds visual separator for adjacent `.breadcrumbs_node`
+ */
+
+.breadcrumbs {
+    margin: $vertical-margin 0;
+}
+
+    .breadcrumbs__node-group {}
+
+        .breadcrumbs__node {
+            & + &:before { /* [1] */
+                margin: 0 ($spacing-unit / 2);
+                content: $breadcrumb-node-separator;
+            }
+        }
+
+            .breadcrumbs__link {}
+
+            .breadcrumbs__text {}

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

@@ -0,0 +1,72 @@
+/*------------------------------------*\
+    #BUTTON
+\*------------------------------------*/
+
+$button-color:            $button-text-color !default;
+$button-bg-color:         $link-color !default;
+$button-bg-color-hover:   $link-color-hover !default;
+
+// This value should match the total height of .text-box in your applciation
+$button-inline-form-min-height: 42px !default;
+
+$button-padding:          $spacing-unit ($spacing-unit * 4)  !default;
+$button-small-padding:    ($spacing-unit / 2) ($spacing-unit * 2) !default;
+$button-large-padding:    ($spacing-unit * 2) ($spacing-unit * 6) !default;
+
+$button-font-size:        $font-size !default;
+$button-small-font-size:  $font-size - 2px !default;
+$button-large-font-size:  $font-size + 8px !default;
+
+
+/**
+ * 1. ensure button text won't receive an underline on hover
+ */
+.button {
+    @extend %button-reset;
+    display: inline-block;
+    padding: $button-padding;
+    color: $button-color;
+    font-size: $button-font-size;
+    background: $button-bg-color;
+    cursor: pointer;
+    transition: background-color 0.15s ease-in;
+
+    &:hover {
+        color: $button-color;
+        text-decoration: none; /* [2] */
+        background-color: $button-bg-color-hover;
+    }
+
+    .inline-form__cell & {
+        min-height: $button-inline-form-min-height;
+    }
+}
+
+.button--small {
+    padding: $button-small-padding;
+    font-size: $button-small-font-size;
+}
+
+.button--large {
+    padding: $button-large-padding;
+    font-size: $button-large-font-size;
+}
+
+.button--full-width {
+    padding-right: 0;
+    padding-left: 0;
+    width: 100%;
+    text-align: center;
+}
+
+.button--full-height {
+    height: 100%;
+}
+
+.button--transparent {
+    background-color: $transparent;
+
+    &:hover {
+        background-color: $transparent;
+    }
+}

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

@@ -0,0 +1,41 @@
+/*------------------------------------*\
+    #BUTTON-PROPERTY
+\*------------------------------------*/
+
+
+.button-property {
+    margin-bottom: $vertical-margin;
+}
+
+
+/**
+ * 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;
+    }
+
+        .button-property__text {}

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

@@ -0,0 +1,26 @@
+/*------------------------------------*\
+    #CART
+\*------------------------------------*/
+
+.cart {}
+
+    .cart__continue-shopping {}
+
+    .cart__checkout-action-group {
+        @include respond-to($medium-breakpoint) {
+            text-align: right;
+        }
+    }
+
+        .cart__checkout-action {
+            margin-bottom: $vertical-margin;
+        }
+
+    .cart__promo-code {
+        margin-bottom: $vertical-margin;
+        float: right;
+
+        @include respond-to ($medium-breakpoint) {
+            float: none;
+        }
+    }

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

@@ -0,0 +1,78 @@
+/*------------------------------------*\
+    #CATEGORY-SUMMARY-CONTENT-BLOCK
+\*------------------------------------*/
+
+$category-summary-content-block-default-background: $primary-color !default;
+$category-summary-content-padding-top: 70% !default;
+
+$category-summary-content-block-content-background: $primary-color !default;
+$category-summary-content-block-content-min-height-mobile: 450px !default;
+
+.category-summary-content-block {
+    display: flex;
+    flex-flow: row wrap;
+}
+
+    .category-summary-content-block__content {
+        display: inline-block;
+        position: relative;
+        min-height: $category-summary-content-block-content-min-height-mobile;
+        background-color: $category-summary-content-block-default-background;
+        flex: 3 0 0%;
+
+        @include respond-to($medium-breakpoint) {
+            min-height: 0;
+            flex: 1 0 0%;
+        }
+
+        &:after {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            background: $overlay-shadow-color;
+            content: '';
+            opacity: 0;
+            transition: opacity 0.15s ease-in;
+        }
+
+        &:hover:after {
+            opacity: 0.6;
+        }
+    }
+
+        .category-summary-content-block__content-container {
+            position: absolute;
+            top: 35%;
+            z-index: index($category-summary-content-block, content);
+        }
+
+        .category-summary-content-block__heading {
+            @extend %heading;
+            @extend %heading--2;
+            @extend %link--secondary;
+            display: inline-block;
+            padding: $spacing-unit ($spacing-unit * 2);
+            background-color: $category-summary-content-block-content-background;
+            opacity: 1;
+        }
+
+        .category-summary-content-block__call-to-action {
+            @extend %link--secondary;
+            display: block;
+            padding-left: $spacing-unit * 2;
+            opacity: 1;
+        }
+
+    .category-summary-content-block__products {
+        @include respond-to($medium-breakpoint) {
+            flex: 1 0 0%;
+        }
+
+        @include respond-to($wide-breakpoint) {
+            flex: 3 0 0%;
+        }
+    }
+
+    .category-summary-content-block__empty-message {}