workarea-one_theme 1.3.0

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

@@ -0,0 +1,45 @@
+/*------------------------------------*\
+    #PRODUCT-PRICES
+\*------------------------------------*/
+
+$product-price-details-font-size: 20px !default;
+$product-price-original-font-size: 0.8em !default;
+$product-price-color: $font-color !default;
+$product-price-original-color: $primary-color !default;
+
+.product-prices {}
+
+.product-prices--summary {}
+
+.product-prices--details {
+    margin-bottom: $vertical-margin;
+    font-size: $product-price-details-font-size;
+    text-align: center;
+
+    @include respond-to($medium-breakpoint) {
+        text-align: left;
+    }
+}
+
+    .product-prices__price {
+        display: block;
+        margin: 0;
+        color: $product-price-color;
+        white-space: nowrap;
+
+        .product-prices--details & {
+            display: inline;
+            white-space: normal;
+        }
+    }
+
+    .product-prices__price--sale {}
+
+    .product-prices__price--original {
+        color: $product-price-original-color;
+        font-size: $product-price-original-font-size;
+
+        .product-prices--details & {
+            display: block;
+        }
+    }

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

@@ -0,0 +1,92 @@
+/*------------------------------------*\
+    #PRODUCT-SUMMARY
+\*------------------------------------*/
+
+$product-summary-width:            100% !default;
+$product-summary-small-width:      200px !default;
+$product-summary-background-color: $background-color-component !default;
+$product-summary-border:           1px solid $border-color !default;
+
+$product-summary-media-ratio:  2 / 3 !default;
+$product-summary-overlay-background-color: rgba($black, 0.06) !default;
+$product-summary-overlay-opacity: 1 !default;
+
+/**
+ * 1. sets positioning context for any absolutely positioned product summary
+ *    child elements
+ * 2. Element selector used as base does not currently have a class on this element
+ */
+
+.product-summary {
+    position: relative; /* [1] */
+    background-color: $product-summary-background-color;
+    border: $product-summary-border;
+}
+
+.product-summary--small {}
+
+    .product-summary__media {
+        margin: ($spacing-unit * 2) auto 0;
+        max-width: $product-summary-width;
+
+        .product-summary--small & {
+            max-width: $product-summary-small-width;
+        }
+    }
+
+        .product-summary__media-container {
+            margin: 0 auto;
+            padding: 0 $spacing-unit * 2;
+        }
+
+            .product-summary__media-link {
+                display: block;
+                padding: 0 0 ((1 / $product-summary-media-ratio) * 100%);
+                height: 0;
+            }
+
+                .product-summary__media-image {
+                    width: 100%;
+                }
+
+    .product-summary__info {
+        margin: 0 auto;
+        padding-bottom: $spacing-unit;
+        max-width: $product-summary-width;
+        text-align: center;
+
+        .product-summary--small & {
+            max-width: $product-summary-small-width;
+        }
+    }
+
+        .product-summary__name {
+            @extend %break-word;
+            @extend %truncate;
+            margin: 0;
+            font-weight: bold;
+
+            a { /* [2] */
+                color: $product-name-color;
+
+                &:hover {
+                    color: $product-name-color;
+                }
+            }
+        }
+
+    .product-summary__overlay {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        background-color: $product-summary-overlay-background-color;
+        pointer-events: none;
+        opacity: 0;
+        transition: opacity 0.15s ease-in;
+
+        .product-summary:hover & {
+            opacity: $product-summary-overlay-opacity;
+        }
+    }

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

@@ -0,0 +1,13 @@
+/*------------------------------------*\
+    #PROMO-CODE-ACCORDION
+\*------------------------------------*/
+
+
+.promo-code-accordion {}
+
+    .promo-code-accordion__heading {
+        @extend %heading;
+        @extend %heading--4;
+    }
+
+    .promo-code-accordion__content {}

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

@@ -0,0 +1,68 @@
+/*------------------------------------*\
+    #PROPERTY
+\*------------------------------------*/
+
+$property-name-color: $label-color !default;
+$property-invalid-name-color: $input-invalid-color !default;
+$property-requirement-required-color: $input-required-color !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] */
+            vertical-align: top;
+        }
+    }
+}
+
+.property--invalid {}
+
+    /**
+     * 1. bottom padding matches default property bottom margin
+     */
+
+    .property__name {
+        display: block;
+        color: $property-name-color;
+        font-weight: bold;
+
+        .property--responsive & {
+            @include respond-to($medium-breakpoint) {
+                display: table-cell;
+                padding: $spacing-unit; /* [1] */
+                vertical-align: top;
+            }
+        }
+
+        .property--invalid & {
+            color: $property-invalid-name-color;
+        }
+    }
+
+        .property__text {}
+
+        .property__requirement {}
+
+        .property__requirement--optional {}
+
+        .property__requirement--required {
+            color: $property-requirement-required-color;
+        }

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

@@ -0,0 +1,77 @@
+/*------------------------------------*\
+    #QUANTITY-CONTROL
+\*------------------------------------*/
+
+$quantity-input-color: $font-color !default;
+$quantity-control-background-color: $background-color !default;
+$quantity-control-width-mobile: 50px !default;
+$quantity-control-width: 100px !default;
+
+$quantity-control-button-border: 1px solid $border-color !default;
+
+/**
+ * 1. Remove arrows from number field styles on non-mobile devices
+ * 2. Some margins are still there even though it's hidden
+ */
+
+.quantity-control {
+    position: relative;
+
+    /**
+     * Extend .value__error from _value.scss
+     */
+
+    .value__error {
+        position: absolute;
+        width: 300px;
+
+        .ui-dialog & {
+            width: 100px;
+        }
+    }
+}
+
+    .quantity-control__input {
+        padding: $spacing-unit;
+        width: $quantity-control-width-mobile;
+        color: $quantity-input-color;
+        text-align: center;
+        background-color: $quantity-control-background-color;
+
+        /* [1] */
+        @include respond-to($wide-breakpoint) {
+            width: $quantity-control-width;
+            appearance: textfield;
+
+            &::-webkit-outer-spin-button,
+            &::-webkit-inner-spin-button {
+                margin: 0; /* [2] */
+                appearance: none;
+            }
+        }
+    }
+
+    .quantity-control__button {
+        display: none;
+
+        @include respond-to($wide-breakpoint) {
+            @include center($to: vertical);
+            display: inline-block;
+            padding: $spacing-unit 12px;
+            height: 100%;
+            color: $quantity-input-color;
+            background: $transparent;
+            border: 0;
+            cursor: pointer;
+        }
+    }
+
+    .quantity-control__increment {
+        right: 0;
+        border-left: $quantity-control-button-border;
+    }
+
+    .quantity-control__decrement {
+        left: 0;
+        border-right: $quantity-control-button-border;
+    }

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

@@ -0,0 +1,57 @@
+/*------------------------------------*\
+    #RESULT-FILTERS
+\*------------------------------------*/
+
+$result-filters-color: $heading-color-secondary !default;
+$result-filters-background-color: $background-secondary-color !default;
+$result-filters-selected-color: $primary-color !default;
+
+.result-filters {
+    padding: $spacing-unit * 2;
+    width: 100%;
+    height: 100vh;
+    color: $result-filters-color;
+    background-color: $result-filters-background-color;
+    box-shadow: 2px 0 8px 0 $overlay-shadow-color;
+}
+
+.result-filters--color {}
+.result-filters--price {}
+.result-filters--category {}
+
+    /**
+     * 1. Element selector used because there is no class and this
+     * is preferable to overriding another view. Will create a ticket to
+     * add a class in base
+     */
+    .result-filters__section {
+        margin-bottom: $vertical-margin;
+
+        h2 { /* [1] */
+            @extend %heading;
+            @extend %heading--3;
+            @extend %heading--fancy;
+            color: $result-filters-color;
+        }
+    }
+
+        .result-filters__group {
+            @extend %list-reset;
+        }
+
+            .result-filters__filter {
+                a { /* [1] */
+                    @extend %link;
+                    @extend %link--secondary;
+                }
+            }
+
+            .result-filters__filter--selected {
+                font-weight: bold;
+            }
+
+                .result-filters__link {}
+
+                    .result-filters__remove {}
+
+                    .result-filters__count {}

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

@@ -0,0 +1,68 @@
+/*------------------------------------*\
+    #SELECT-MENU
+\*------------------------------------*/
+
+$select-menu-border-color: $border-color !default;
+$select-menu-hover-border-color:   $input-hover-border-color !default;
+$select-menu-border-radius: $border-radius !default;
+$select-menu-arrow-size: 10px !default;
+$select-menu-arrow-color: $input-color !default;
+$select-menu-color: $input-color !default;
+$select-menu-bg-color: $input-background-color !default;
+$select-menu-arrow-bg-color: $input-background-color !default;
+$select-menu-arrow-width: $spacing-unit * 5 !default;
+$select-menu-invalid-border-color: $input-invalid-color !default;
+
+
+/**
+ * 1. Positioning context for before pseudo element
+ */
+.select-menu {
+    position: relative; /* [1] */
+
+    &:before {
+        @include center($to: vertical);
+        right: 1px;
+        bottom: 0;
+        padding-top: $spacing-unit / 2;
+        width: $select-menu-arrow-width;
+        color: $select-menu-arrow-color;
+        font-size: $select-menu-arrow-size;
+        text-align: center;
+        background-color: $select-menu-arrow-bg-color;
+        border-left: 1px solid $border-color;
+        content: '▼';
+        pointer-events: none;
+    }
+
+    /**
+     * 1. Prevent chrome applying yellow background on autofill.
+     */
+    select:-webkit-autofill {
+        box-shadow: 0 0 0 30px $select-menu-arrow-bg-color inset; /* [1] */
+    }
+
+    select {
+        padding: $spacing-unit;
+        padding-right: ($spacing-unit * 2) + $select-menu-arrow-width;
+        width: 100%;
+        color: $select-menu-color;
+        background-color: $select-menu-bg-color;
+        border: 1px solid $select-menu-border-color;
+        border-radius: $select-menu-border-radius;
+        appearance: none;
+
+        &::-ms-expand {
+            display: none;
+        }
+
+        &.jquery-validation-error,
+        .property--invalid & {
+            border-color: $select-menu-invalid-border-color;
+        }
+
+        &:hover {
+            border-color: $select-menu-hover-border-color;
+        }
+    }
+}

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

@@ -0,0 +1,78 @@
+/*------------------------------------*\
+    #SVG-ICON
+\*------------------------------------*/
+
+$svg-icon-size:               $spacing-unit * 3 !default;
+$svg-icon-tiny-size:          $spacing-unit !default;
+$svg-icon-small-size:         $spacing-unit * 2 !default;
+$svg-icon-large-size:         $spacing-unit * 4 !default;
+$svg-icon-extra-large-size:   $spacing-unit * 6 !default;
+$svg-icon-theme-header-color: $header-icon-color !default;
+$svg-icon-theme-header-color-hover: $header-icon-color-hover !default;
+
+
+.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--tiny {
+    width: $svg-icon-tiny-size;
+    height: $svg-icon-tiny-size;
+}
+
+.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;
+}
+
+.svg-icon--theme-header {
+    fill: $svg-icon-theme-header-color;
+
+    &:hover {
+        fill: $svg-icon-theme-header-color-hover;
+    }
+}
+
+.svg-icon--hover-primary-color {
+    &:hover {
+        fill: $primary-color;
+    }
+}
+
+/**
+ * Color Modifiers
+ */
+.svg-icon--link-color { fill: $link-color; }
+.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; }