workarea-nvy_theme 1.1.2

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

@@ -0,0 +1,70 @@
+/*------------------------------------*\
+    #PROPERTY
+\*------------------------------------*/
+
+$property-font: $secondary-font-family !default;
+$property-name-invalid-color:  $red !default;
+$property-requirement-required-color:  $red !default;
+
+.property {
+    margin-bottom: $vertical-margin;
+}
+
+.property--responsive {
+    @include respond-to($medium-breakpoint) {
+        display: table-row;
+        margin: 0;
+    }
+
+    /**
+     * Extend `.value {}` in _value.scss
+     *
+     * 1. bottom padding matches default property bottom margin
+     */
+
+    .value {
+        display: block;
+
+        @include respond-to($medium-breakpoint) {
+            display: table-cell;
+            padding: $spacing-unit; /* [1] */
+            padding-right: 0;
+            vertical-align: middle;
+        }
+    }
+}
+
+.property--invalid {}
+
+    /**
+     * 1. allows use of `strong` elements
+     * 2. bottom padding matches default property bottom margin
+     */
+
+    .property__name {
+        display: block;
+        font-family: $property-font;
+        font-weight: normal; /* [1] */
+
+        .property--responsive & {
+            @include respond-to($medium-breakpoint) {
+                display: table-cell;
+                padding: $spacing-unit; /* [2] */
+                vertical-align: middle;
+            }
+        }
+
+        .property--invalid & {
+            color: $property-name-invalid-color;
+        }
+    }
+
+        .property__text {}
+
+        .property__requirement {}
+
+        .property__requirement--optional {}
+
+        .property__requirement--required {
+            color: $property-requirement-required-color;
+        }

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

@@ -0,0 +1,36 @@
+/*------------------------------------*\
+    #RECENT-VIEWS
+\*------------------------------------*/
+
+$recent-views-aside-max-width: 170px !default;
+
+.recent-views {}
+
+.recent-views--aside {
+    max-width: $recent-views-aside-max-width;
+}
+
+    .recent-views__section {
+        .recent-views--aside & {
+            margin-bottom: $vertical-margin;
+        }
+    }
+
+    .recent-views__section--products {}
+    .recent-views__section--categories {}
+
+        .recent-views__heading {
+            @extend %heading;
+            @extend %heading--5;
+            @extend %heading--upcase;
+        }
+
+        .recent-views__list {
+            .recent-views--aside & {
+                @extend %list-reset;
+            }
+        }
+
+            .recent-views__item {}
+
+                .recent-views__link {}

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

@@ -0,0 +1,40 @@
+/*------------------------------------*\
+    #RECOMMENDATIONS
+\*------------------------------------*/
+
+$recommendations-heading-decoration-width: 40px !default;
+$recommendations-heading-decoration-height: 3px !default;
+$recommendations-heading-decoration-color: $product-recommendations-heading-decoration-color !default;
+
+
+.recommendations {
+
+    .product-detail-container & {
+        margin-top: $spacing-unit * 6;
+
+        @include respond-to($medium-breakpoint) {
+            margin-top: $spacing-unit * 8;
+        }
+    }
+}
+
+    .recommendations__heading {
+        @extend %heading;
+        @extend %heading--2;
+        position: relative;
+        margin-top: $spacing-unit * 4;
+        text-align: center;
+
+        &:before {
+            position: absolute;
+            top: $spacing-unit * -2;
+            left: 50%;
+            width: $recommendations-heading-decoration-width;
+            height: $recommendations-heading-decoration-height;
+            background-color: $recommendations-heading-decoration-color;
+            transform: translateX(-50%);
+            content: '';
+        }
+    }
+
+    .recommendations__products {}

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

@@ -0,0 +1,93 @@
+/*------------------------------------*\
+    #RESULT-FILTERS
+\*------------------------------------*/
+
+$result-filters-section-max-width: 170px !default;
+$result-filters-border-color: $transparent !default;
+$result-filters-selected-background-color: $filter-selected-background-color !default;
+$result-filters-selected-border-color: $filter-selected-border-color !default;
+
+$result-filters-heading-color: $aside-heading-color !default;
+$result-filters-remove-icon-size: 10px !default;
+$result-filters-remove-icon-color: $filter-remove-icon-color !default;
+
+
+.result-filters {}
+
+.result-filters--color {}
+.result-filters--price {}
+.result-filters--category {}
+
+    .result-filters__title {
+        @extend %heading;
+        @extend %heading--5;
+        @extend %heading--upcase;
+        color: $result-filters-heading-color;
+    }
+
+    .result-filters__section {
+        margin-bottom: $vertical-margin;
+
+        @include respond-to($medium-breakpoint) {
+            max-width: $result-filters-section-max-width;
+        }
+    }
+
+        .result-filters__heading {
+            @extend %heading;
+            @extend %heading--5;
+            position: relative;
+            color: $result-filters-heading-color;
+
+            &:after {
+                position: absolute;
+                bottom: -4px;
+                left: 0;
+                width: 100%;
+                height: 1px;
+                background-color: $result-filters-heading-color;
+                content: '';
+            }
+        }
+
+        .result-filters__group {
+            @extend %list-reset;
+        }
+
+            .result-filters__filter {
+                margin-bottom: $spacing-unit;
+                border: 1px solid $result-filters-border-color;
+            }
+
+            .result-filters__filter--selected {
+                font-weight: bold;
+                background-color: $result-filters-selected-background-color;
+                border-color: $result-filters-selected-border-color;
+            }
+
+                .result-filters__link {
+                    display: block;
+                    padding: $spacing-unit;
+
+                    &:hover {
+                        text-decoration: none;
+                    }
+                }
+
+                .result-filters__link--swatch {}
+
+                    .result-filters__remove {}
+
+                        .result-filters__remove-icon {
+                            height: $result-filters-remove-icon-size;
+                            width: $result-filters-remove-icon-size;
+                            fill: $result-filters-remove-icon-color;
+                        }
+
+                    .result-filters__count {}
+
+
+                    .result-filters__remove,
+                    .result-filters__count {
+                        float: right;
+                    }

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

@@ -0,0 +1,37 @@
+/*------------------------------------*\
+    #SECONDARY-NAV
+\*------------------------------------*/
+
+$secondary-nav-heading-color: $aside-heading-color !default;
+
+.secondary-nav {
+    margin-top: $spacing-unit * 3;
+}
+
+    .secondary-nav__heading {
+        @extend %heading;
+        @extend %heading--5;
+        @extend %heading--upcase;
+        color: $secondary-nav-heading-color;
+    }
+
+    .secondary-nav__links {
+        @extend %list-reset;
+        margin-bottom: $vertical-margin;
+    }
+
+    .secondary-nav__item {}
+
+    .secondary-nav__item--has-children {}
+
+        .secondary-nav__link {
+            display: block;
+            padding: $spacing-unit;
+        }
+
+        .secondary-nav__link--selected {
+            font-weight: bold;
+        }
+
+
+        .secondary-nav__children {}

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

@@ -0,0 +1,56 @@
+/*------------------------------------*\
+    #SVG-ICON
+\*------------------------------------*/
+
+// TODO: v4 use explicit pixel values
+$svg-icon-size:              $spacing-unit * 3;
+$svg-icon-small-size:        $spacing-unit * 2;
+$svg-icon-large-size:        $spacing-unit * 4;
+$svg-icon-extra-large-size:  $spacing-unit * 6;
+
+
+.svg-icon {
+    display: inline-block;
+    width: $svg-icon-size;
+    height: $svg-icon-size;
+    vertical-align: middle;
+}
+
+/**
+ * Display modifiers
+ */
+.svg-icon--block {
+    display: block;
+}
+
+
+/**
+ * Size Modifiers
+ */
+.svg-icon--small {
+    width: $svg-icon-small-size;
+    height: $svg-icon-small-size;
+}
+
+.svg-icon--large {
+    width: $svg-icon-large-size;
+    height: $svg-icon-large-size;
+}
+
+.svg-icon--extra-large {
+    width: $svg-icon-extra-large-size;
+    height: $svg-icon-extra-large-size;
+}
+
+/**
+ * Color Modifiers
+ */
+.svg-icon--blue { fill: $blue; }
+.svg-icon--yellow { fill: $yellow; }
+.svg-icon--red { fill: $red; }
+.svg-icon--green { fill: $green; }
+.svg-icon--white { fill: $white; }
+.svg-icon--gray { fill: $gray; }
+.svg-icon--black { fill: $black; }
+.svg-icon--black-alpha-15 { fill: $black-alpha-15; }
+.svg-icon--black-alpha-50 { fill: $black-alpha-50; }

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

@@ -0,0 +1,75 @@
+/*------------------------------------*\
+    #TABLE
+\*------------------------------------*/
+
+$table-price-discount-color:  $red !default;
+$table-font: $secondary-font-family !default;
+$table-totals-border: 1px solid $table-totals-border-color !default;
+$table-totals-total-border-color: $table-totals-total-border-color !default;
+
+
+/**
+ * This component enhances the default styling for tables within
+ * `base/_tables.scss`.
+ *
+ * 1. handle `p` elements differently if found inside a table.
+ */
+
+.table {
+    width: 100%;
+    font-family: $table-font;
+
+    p { /* [1] */
+        margin: 0;
+
+        & + & {
+            margin-top: $spacing-unit;
+        }
+    }
+
+    th {
+        font-weight: bold;
+    }
+
+    td {
+        padding: $spacing-unit * 2 0;
+    }
+}
+
+.table--totals {
+    tr + tr {
+        border-top: $table-totals-border;
+    }
+
+    th {
+        font-weight: regular;
+    }
+
+    td {
+        text-align: right;
+    }
+
+    .table__total {
+        border-top-color: $table-totals-total-border-color;
+        border-top-width: 4px;
+    }
+}
+
+    .table__price-discount {
+        color: $table-price-discount-color;
+        white-space: nowrap;
+    }
+
+    .table__prices {
+        text-align: right;
+    }
+
+        .table__price {}
+
+            .table__price-label {}
+
+    .table__quantity {
+        text-align: center;
+    }
+
+    .table__total {}

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

@@ -0,0 +1,204 @@
+/*------------------------------------*\
+    #TAXONOMY-CONTENT-BLOCK
+\*------------------------------------*/
+
+$taxonomy-content-block-font: $secondary-font-family !default;
+$taxonomy-content-block-font-size: 14px !default;
+
+$taxonomy-content-block-footer-heading-decoration-height: 1px !default;
+$taxonomy-content-block-footer-heading-decoration-width: 30px !default;
+$taxonomy-content-block-footer-heading-decoration-color: $page-footer-heading-decoration-color !default;
+$taxonomy-content-block-footer-color: $page-footer-link-color !default;
+$taxonomy-content-block-footer-color-hover: $page-footer-link-color-hover !default;
+
+
+/**
+ * 1. Scoped styles for taxonomy content blocks in mobile navigation.
+ * 2. Scoped styles for taxonomy content blocks in page footer.
+ */
+
+.taxonomy-content-block {
+    margin: 0 auto;
+    padding: $spacing-unit * 5 0;
+    max-width: $x-wide-breakpoint;
+    font-size: $taxonomy-content-block-font-size;
+    font-family: $taxonomy-content-block-font;
+    text-align: left;
+
+    @include respond-to($wide-breakpoint) {
+        display: table;
+        width: 100%;
+    }
+
+    .mobile-nav & { /* [1] */
+        padding-top: 0;
+        padding-bottom: $spacing-unit * 2;
+    }
+
+    .page-footer & { /* [2] */
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+}
+
+.taxonomy-content-block--two-column {}
+.taxonomy-content-block--three-column {}
+
+
+    .taxonomy-content-block__container {
+        @include respond-to($wide-breakpoint) {
+            display: table-cell;
+            width: 50%;
+            vertical-align: top;
+        }
+
+        .taxonomy-content-block--two-column & {
+            @include respond-to($wide-breakpoint) {
+                width: 33.33%;
+            }
+
+            .page-footer & { /* [2] */
+                @include respond-to($medium-breakpoint) {
+                    width: 33.33%;
+                }
+            }
+        }
+
+        .taxonomy-content-block--three-column & {
+            @include respond-to($wide-breakpoint) {
+                width: 25%;
+            }
+
+            .page-footer & { /* [2] */
+                @include respond-to($medium-breakpoint) {
+                    width: 25%;
+                }
+            }
+        }
+
+        .mobile-nav & { /* [1] */
+            margin-bottom: $vertical-margin;
+        }
+
+        .page-footer & { /* [2] */
+            margin-bottom: $spacing-unit * 8;
+
+            @include respond-to($medium-breakpoint) {
+                display: inline-block;
+                margin-bottom: 0;
+                width: 50%;
+                vertical-align: top;
+            }
+        }
+    }
+
+    .taxonomy-content-block__container--without-image {
+        @include respond-to($medium-breakpoint) {
+            width: 100%;
+        }
+
+        .taxonomy-content-block--two-column & {
+            @include respond-to($wide-breakpoint) {
+                width: 50%;
+            }
+
+            .page-footer & {
+                @include respond-to($medium-breakpoint) {
+                    width: 50%;
+                }
+            }
+        }
+
+        .taxonomy-content-block--three-column & {
+            @include respond-to($wide-breakpoint) {
+                width: 33.33%;
+            }
+
+            .page-footer & {
+                @include respond-to($medium-breakpoint) {
+                    width: 33.33%;
+                }
+            }
+        }
+    }
+
+
+        .taxonomy-content-block__image-link {
+            padding: $spacing-unit * 2;
+        }
+
+            .taxonomy-content-block__image {}
+
+
+        .taxonomy-content-block__menu-heading {
+            @extend %heading;
+            @extend %heading--5;
+            display: block;
+            margin-bottom: $spacing-unit * 2;
+            margin-left: $spacing-unit * 10;
+
+            .mobile-nav & { /* [1] */
+                margin: $spacing-unit * 2;
+                margin-left: $spacing-unit * 3;
+            }
+
+            .page-footer & { /* [2] */
+                position: relative;
+                margin-left: 0;
+
+                &:after {
+                    position: absolute;
+                    bottom: 0;
+                    left: 0;
+                    width: $taxonomy-content-block-footer-heading-decoration-width;
+                    height: $taxonomy-content-block-footer-heading-decoration-height;
+                    background-color: $taxonomy-content-block-footer-heading-decoration-color;
+                    content: '';
+                }
+            }
+        }
+
+        .taxonomy-content-block__menu {
+            @extend %list-reset;
+            margin-left: $spacing-unit * 10;
+
+            .mobile-nav & { /* [1] */
+                margin-left: $spacing-unit * 3;
+            }
+
+            .page-footer & { /* [2] */
+                margin-left: 0;
+            }
+        }
+
+            .taxonomy-content-block__menu-item {
+                margin-bottom: $spacing-unit * 2;
+
+                .mobile-nav & { /* [1] */
+                    margin: $spacing-unit 0 ($spacing-unit * 4);
+                }
+
+                .page-footer & { /* [2] */
+                    margin-bottom: $spacing-unit;
+                }
+            }
+
+            .taxonomy-content-block__menu-item--start {
+                font-weight: bold;
+            }
+
+                .taxonomy-content-block__menu-link {
+                    .mobile-nav & { /* [1] */
+                        display: block;
+                        color: $mobile-nav-link-color;
+                        font-weight: normal;
+                    }
+
+                    .page-footer & {
+                        color: $taxonomy-content-block-footer-color;
+
+                        &:hover {
+                            color: $taxonomy-content-block-footer-color-hover;
+                        }
+                    }
+                }