workarea-one_theme 1.3.0

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

@@ -0,0 +1,173 @@
+/*------------------------------------*\
+    #TAXONOMY-CONTENT-BLOCK
+\*------------------------------------*/
+
+$taxonomy-content-block-bg-color: $background-color-component !default;
+
+$taxonomy-content-block-link-color: $primary-nav-dropdown-links !default;
+$taxonomy-content-block-link-hover-color: $link-color !default;
+$taxonomy-content-block-mobile-link-color: $mobile-nav-links !default;
+$taxonomy-content-block-footer-link-color: $footer-text !default;
+
+$taxonomy-content-block-menu-item-border-mobile: 1px solid $border-color !default;
+
+/**
+ * 1. Behind everything else within the component
+ */
+.taxonomy-content-block {
+    @include respond-to($medium-breakpoint) {
+        display: table;
+        width: 100%;
+    }
+
+    .primary-nav &:before {
+        position: absolute;
+        left: 50%;
+        z-index: -1; /* [1] */
+        width: 101vw;
+        height: 100%;
+        background: $taxonomy-content-block-bg-color;
+        box-shadow: 0 2px 8px $overlay-shadow-color;
+        transform: translate(-50%, 0);
+        content: '';
+    }
+
+    .mobile-nav &:before {
+        display: none;
+    }
+}
+
+.taxonomy-content-block--two-column {}
+.taxonomy-content-block--three-column {}
+
+
+    .taxonomy-content-block__container {
+        @include respond-to($medium-breakpoint) {
+            display: table-cell;
+            padding: $spacing-unit * 4 0;
+            width: 50%;
+            vertical-align: top;
+        }
+
+        .primary-nav__content & {
+            padding-left: $spacing-unit * 2;
+        }
+
+        .taxonomy-content-block--two-column & {
+            @include respond-to($medium-breakpoint) {
+                width: 33.33%;
+            }
+        }
+
+        .taxonomy-content-block--three-column & {
+            @include respond-to($medium-breakpoint) {
+                width: 25%;
+            }
+        }
+
+        .taxonomy-content-block--with-products & {
+            @include respond-to($medium-breakpoint) {
+                padding-top: $spacing-unit * 4;
+                width: 25%;
+            }
+        }
+
+        .page-footer & {
+            margin-bottom: $spacing-unit * 4;
+
+            @include respond-to($medium-breakpoint) {
+                padding-top: 0;
+            }
+        }
+    }
+
+    .taxonomy-content-block__container--without-image {
+        @include respond-to($medium-breakpoint) {
+            width: 100%;
+        }
+
+        .taxonomy-content-block--two-column & {
+            @include respond-to($medium-breakpoint) {
+                width: 50%;
+            }
+        }
+
+        .taxonomy-content-block--three-column & {
+            @include respond-to($medium-breakpoint) {
+                width: 33.33%;
+            }
+        }
+    }
+
+
+        .taxonomy-content-block__image-link {}
+
+            .taxonomy-content-block__image {}
+
+
+        .taxonomy-content-block__menu-heading {
+            font-weight: bold;
+
+            .page-footer & {
+                @extend %heading--3;
+                @extend %heading--fancy;
+            }
+
+            .mobile-nav & {
+                @extend %heading--3;
+                @extend %heading--fancy;
+                display: block;
+                padding: $spacing-unit;
+                text-align: center;
+            }
+        }
+
+        .taxonomy-content-block__menu {
+            @extend %list-reset;
+        }
+
+            .taxonomy-content-block__menu-item {
+                padding-top: $spacing-unit;
+
+                .mobile-nav & {
+                    padding-top: 0;
+                }
+            }
+
+            .taxonomy-content-block__menu-item--start {
+                font-weight: bold;
+            }
+
+                .taxonomy-content-block__menu-link {
+                    .primary-nav__content & {
+                        color: $taxonomy-content-block-link-color;
+
+                        &:hover {
+                            color: $taxonomy-content-block-link-hover-color;
+                        }
+                    }
+
+                    .mobile-nav & {
+                        display: block;
+                        padding: $spacing-unit * 2;
+                        color: $taxonomy-content-block-mobile-link-color;
+                        border-bottom: $taxonomy-content-block-menu-item-border-mobile;
+                    }
+
+                    .page-footer & {
+                        color: $taxonomy-content-block-footer-link-color;
+                        opacity: 0.6;
+                        transition: opacity 0.15s ease-in;
+
+                        &:hover {
+                            opacity: 1;
+                        }
+                    }
+                }
+
+        .taxonomy-content-block__products {
+            @include respond-to($medium-breakpoint) {
+                display: table-cell;
+                width: 75%;
+            }
+        }

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

@@ -0,0 +1,57 @@
+/*------------------------------------*\
+    #TEXT-BOX
+\*------------------------------------*/
+
+$text-box-border-color:       $border-color !default;
+$text-box-hover-border-color: $input-hover-border-color !default;
+$text-box-border:             1px solid $text-box-border-color !default;
+$text-box-border-radius:      $border-radius !default;
+
+$text-box-color:              $input-color !default;
+
+$text-box-secondary-color: $input-secondary-color !default;
+$text-box-secondary-bg-color: $input-secondary-bg-color !default;
+
+$text-box-width:              100% !default;
+$text-box-x-small-width:       62px !default;
+$text-box-small-width:         96px !default;
+$text-box-wide-width:         256px !default;
+$text-box-multi-line-height:  168px !default;
+
+$text-box-invalid-border-color: $input-invalid-color !default;
+
+.text-box {
+    padding: $spacing-unit;
+    width: $text-box-width;
+    color: $text-box-color;
+    border: $text-box-border;
+    border-radius: $text-box-border-radius;
+
+    &:focus {
+        @include focus-ring;
+    }
+
+    &:hover {
+        border-color: $text-box-hover-border-color;
+    }
+
+    .property--invalid & {
+        border-color: $text-box-invalid-border-color;
+    }
+}
+
+.text-box--x-small    { width:  $text-box-x-small-width;     }
+.text-box--small      { width:  $text-box-small-width;       }
+.text-box--wide       { width:  $text-box-wide-width;        }
+.text-box--multi-line { height: $text-box-multi-line-height; }
+
+.text-box--secondary {
+    color: $text-box-secondary-color;
+    background-color: $text-box-secondary-bg-color;
+    border: 0;
+    border-radius: 0;
+
+    &::placeholder {
+        color: $text-box-secondary-color;
+    }
+}

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

@@ -0,0 +1,19 @@
+/*------------------------------------*\
+    #TEXT-BUTTON
+\*------------------------------------*/
+
+$text-button-color:     $link-color !default;
+$text-button-font-size: 13px !default;
+
+
+.text-button {
+    @extend %button-reset;
+    color: $text-button-color;
+    font-size: $text-button-font-size;
+    text-decoration: none;
+    cursor: pointer;
+
+    &:hover {
+        text-decoration: underline;
+    }
+}

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

@@ -0,0 +1,49 @@
+/*------------------------------------*\
+    #UTILITY-NAV
+\*------------------------------------*/
+
+$utility-nav-bg-color: $utility-nav-background-color !default;
+$utility-nav-top-offset: 53px !default;
+$utility-nav-top-offset-medium: 73px !default;
+$utility-nav-width: 160px !default;
+
+
+/**
+ * 1. Element selector used because this is a commonly used append point,
+ * we want to reliably taget all links that are appended via plugins without
+ * having to override an unknown number of views
+ */
+.utility-nav {
+    position: absolute;
+    top: $utility-nav-top-offset;
+    right: 0;
+    left: 0;
+    z-index: index($page-header, utility-nav);
+    padding: $spacing-unit;
+    background-color: $utility-nav-bg-color;
+    box-shadow: 0 2px 8px $overlay-shadow-color;
+    opacity: 0;
+    transform: translateY(-66%);
+    pointer-events: none;
+    transition: opacity 0.15s ease-in, transform 0.15s ease-in;
+
+    @include respond-to($medium-breakpoint) {
+        top: $utility-nav-top-offset-medium;
+        left: 80%;
+        width: $utility-nav-width;
+    }
+}
+
+.utility-nav--is-open {
+    display: block;
+    opacity: 1;
+    transform: translateY(0);
+    pointer-events: auto;
+}
+
+    .utility-nav__link {
+        @extend %link;
+        @extend %link--secondary;
+        display: block;
+        padding: $spacing-unit;
+    }

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

@@ -0,0 +1,51 @@
+/*------------------------------------*\
+    #VALUE
+\*------------------------------------*/
+
+$value-error-color:  $input-invalid-color !default;
+
+
+/**
+ * 1. for use with `p` tags
+ */
+
+.value {
+    margin: 0; /* [1] */
+
+    .button-property & {
+        display: inline-block;
+        margin-right: $spacing-unit;
+        vertical-align: middle;
+    }
+}
+
+    .value__note {
+        display: block;
+    }
+
+    .value__note--inline {
+        display: inline-block;
+    }
+
+
+    /**
+     * 1. focus ring matches error color
+     * 2. when specifically applied to a `.text-box` component
+     */
+
+    .value__error {
+        display: block;
+        color: $value-error-color;
+
+        &:focus {
+            @include focus-ring($value-error-color); /* [1] */
+        }
+
+        &.text-box {/* [2] */
+            border-color: $value-error-color;
+        }
+
+        .button-property & {
+            display: inline-block;
+        }
+    }

data/app/assets/stylesheets/workarea/storefront/email/_settings.scss

@@ -0,0 +1,23 @@
+/*------------------------------------*\
+    #SETTINGS
+\*------------------------------------*/
+
+/**
+ * In this file you can override a variables !default value before it is
+ * imported, effectively adjusting the theme of the site for the site's emails.
+ */
+
+$font-size: 16px !default;
+
+@import '../settings/colors';
+@import '../settings/font_families';
+@import '../settings/typography';
+@import '../settings/global';
+
+
+/**
+ * Email-specific variables are defined separately.
+ */
+
+$email-max-width: 600px !default;
+$email-background-color: $light-gray !default;

data/app/assets/stylesheets/workarea/storefront/generic/_fonts.scss.erb

@@ -0,0 +1,11 @@
+/*------------------------------------*\
+    #FONTS
+\*------------------------------------*/
+
+// scss-lint:disable VariableForProperty
+
+<% primary_font_face_path = "\'workarea/storefront/theme_config/fonts/#{Workarea.config.theme[:primary_font_family].downcase}\';" %>
+<% secondary_font_face_path = "\'workarea/storefront/theme_config/fonts/#{Workarea.config.theme[:secondary_font_family].downcase}\';" %>
+
+<%= "@import #{primary_font_face_path}" %>
+<%= "@import #{secondary_font_face_path}" %>

data/app/assets/stylesheets/workarea/storefront/objects/_content_wrapper.scss

@@ -0,0 +1,23 @@
+/*------------------------------------*\
+    #CONTENT-WRAPPER
+\*------------------------------------*/
+
+/**
+ * Wraps a portion of a page's content to center the content at a given width.
+ * This is useful for full-bleed sites where some internal content should be
+ * full width unless the viewport is very wide.
+ */
+
+$content-wrapper-padding:  0 ($spacing-unit * 2) !default;
+$content-wrapper-padding-medium:  0 $spacing-unit !default;
+
+.content-wrapper,
+%content-wrapper {
+    margin:  0 auto;
+    padding: $content-wrapper-padding;
+    max-width: $x-wide-breakpoint;
+
+    @include respond-to($medium-breakpoint) {
+        padding: $content-wrapper-padding-medium;
+    }
+}

data/app/assets/stylesheets/workarea/storefront/product_quickview/components/_quickview_button.scss

@@ -0,0 +1,33 @@
+/*------------------------------------*\
+    #QUICKVIEW-BUTTON
+\*------------------------------------*/
+
+// scss-lint:disable ImportantRule
+
+$quickview-button-top-offset:  45% !default;
+
+/**
+ * 1. disable quickview buttons for touch devices
+ */
+.quickview-button {
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transform: translate(-50%, 150%);
+    transition: transform 0.15s ease-in;
+
+    .product-summary:hover & {
+        @include respond-to($medium-breakpoint) {
+            @include center;
+            display: block;
+            position: absolute;
+            top: $quickview-button-top-offset;
+            white-space: nowrap;
+            opacity: 1;
+            visibility: visible;
+            pointer-events: auto;
+        }
+
+        .touch & { display: none !important; } /* [1] */
+    }
+}