workarea-haven_theme 1.3.0

data/app/assets/stylesheets/jquery_ui/storefront/_ui_menu.scss

@@ -0,0 +1,133 @@
+/*------------------------------------*\
+    #UI-MENU
+\*------------------------------------*/
+
+$ui-menu-item-width: 25% !default;
+$ui-menu-item-max-width: 264px !default;
+$ui-menu-item-color: $search-item-color !default;
+$ui-menu-item-background-color: $search-item-background-color !default;
+$ui-menu-item-border-color: $search-item-border-color !default;
+$ui-menu-item-border: 2px solid $ui-menu-item-border-color !default;
+$ui-menu-item-selected-border-width: 2px;
+$ui-menu-item-selected-border-color: $highlight-color !default;
+$ui-menu-item-content-color: $search-item-content-result-color !default;
+$ui-menu-item-content-background-color: $search-item-content-result-background-color !default;
+
+$ui-menu-item-suggested-term-max-width: 264px !default;
+$ui-menu-item-suggested-term-icon-size: 16px !default;
+
+$ui-menu-heading-color: $search-color !default;
+
+
+/**
+ * 1. default menu item state
+ * 2. hovered menu item state
+ * 3. the displayed result image
+ * 4. menu headings
+ */
+
+.ui-menu {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+    .ui-menu-heading { /* [4] */
+        @extend %heading;
+        @extend %heading--5;
+        margin-bottom: 0;
+        padding: $spacing-unit;
+        width: 100%;
+        color: $ui-menu-heading-color;
+    }
+
+    .ui-menu-item { /* [1] */
+        @extend %clearfix;
+        display: inline-block;
+        position: relative;
+        margin: $spacing-unit;
+        width: $ui-menu-item-width;
+        max-width: $ui-menu-item-max-width;
+        color: $ui-menu-item-color;
+        background: $ui-menu-item-background-color;
+        vertical-align: top;
+        cursor: pointer;
+        flex: 1 0 45%;
+
+        @include respond-to($medium-breakpoint) {
+            flex: 1 0 20%;
+        }
+
+        &:hover { /* [2] */
+            border-color: $ui-menu-item-selected-border-color;
+        }
+
+        .ui-menu-item__image { /* [3] */
+            display: block;
+            margin: 0 auto $spacing-unit;
+            padding: $spacing-unit;
+        }
+
+        .ui-menu-item__text {
+            display: block;
+            padding: $spacing-unit;
+        }
+    }
+
+    .ui-menu-item--searches {
+        max-width: $ui-menu-item-suggested-term-max-width;
+
+        &:before {
+            @include svg($image: 'icons/search.svg', $width: $ui-menu-item-suggested-term-icon-size);
+            display: inline-block;
+            margin: $spacing-unit;
+            vertical-align: middle;
+            content: '';
+        }
+
+        .ui-menu-item-wrapper {
+            display: inline-block;
+        }
+    }
+
+    .ui-menu-item--products {
+        .ui-menu-item__text {
+            padding: $spacing-unit ($spacing-unit * 2) ($spacing-unit * 3);
+            border-top: $ui-menu-item-border;
+        }
+    }
+
+    .ui-menu-item--pages {
+        margin: 0;
+        color: $ui-menu-item-content-color;
+        background: $ui-menu-item-content-background-color;
+        flex: 1 0 100%;
+
+        .ui-menu-item__text {
+            border-top: 0;
+        }
+    }
+
+    .ui-menu-item-wrapper {
+        display: block;
+    }
+
+    .ui-state-active {
+        &:after {
+            display: block;
+            position: absolute;
+            bottom: ($spacing-unit * -1);
+            left: 0;
+            width: 100%;
+            height: $ui-menu-item-selected-border-width;
+            background-color: $ui-menu-item-selected-border-color;
+            content: '';
+        }
+
+        .ui-menu-item--pages & {
+            color: $ui-menu-item-selected-border-color;
+
+            &:after {
+                display: none;
+            }
+        }
+    }

data/app/assets/stylesheets/jquery_ui/storefront/_ui_state_focus.scss

@@ -0,0 +1,7 @@
+/*------------------------------------*\
+    #UI-STATE-FOCUS
+\*------------------------------------*/
+
+.ui-state-focus {
+    @include focus-ring;
+}

data/app/assets/stylesheets/jquery_ui/storefront/_ui_widget_overlay.scss

@@ -0,0 +1,15 @@
+/*------------------------------------*\
+    #UI-WIDGET-OVERLAY
+\*------------------------------------*/
+
+$ui-widget-overlay-background-color: $overlay-shadow-color !default;
+
+
+.ui-widget-overlay {
+    position: fixed;
+    top:    0;
+    right:  0;
+    bottom: 0;
+    left:   0;
+    background-color: $ui-widget-overlay-background-color;
+}

data/app/assets/stylesheets/workarea/product_badges/components/_badges.scss

@@ -0,0 +1,83 @@
+/*------------------------------------*\
+    #BADGES
+\*------------------------------------*/
+
+$badges-top-offset: 0 !default;
+$badges-product-detail-mobile-top-offset: 5em !default;
+$badges-left-offset: $spacing-unit * -0.5 !default;
+
+$badge-font-size: $font-size-tiny !default;
+$badge-font-size-medium: $font-size-small !default;
+$badge-color: $badge-color !default;
+$badge-background-color: $badge-background-color !default;
+$badge-new-background-color: $badge-new-background-color !default;
+$badge-sale-background-color: $badge-sale-background-color !default;
+$badge-best-seller-background-color: $badge-best-seller-background-color !default;
+
+$badge-shadow-size: $spacing-unit / 2;
+$badge-shadow-darken-amount: 20%;
+
+.badges {
+    position: absolute;
+    top: $badges-top-offset;
+    left: $badges-left-offset;
+    pointer-events: none;
+
+    .product-details & {
+        top: $badges-product-detail-mobile-top-offset;
+
+        @include respond-to($medium-breakpoint){
+            top: $badges-top-offset;
+        }
+    }
+}
+
+    .badges__badge {
+        position: relative;
+        margin-top: $spacing-unit;
+        padding: ($spacing-unit / 2) ($spacing-unit * 2);
+        color: $badge-color;
+        font-size: $badge-font-size;
+        text-transform: uppercase;
+        background-color: $badge-background-color;
+
+        @include respond-to($medium-breakpoint) {
+            font-size: $badge-font-size-medium;
+        }
+
+        &:before {
+            display: block;
+            position: absolute;
+            bottom: $badges-left-offset;
+            left: 0;
+            border-top: $badge-shadow-size solid darken($badge-background-color, $badge-shadow-darken-amount);
+            border-left: $badge-shadow-size solid $transparent;
+            content: '';
+        }
+    }
+
+    .badges__badge--new {
+        background-color: $badge-new-background-color;
+
+        &:before {
+            border-top-color: darken($badge-new-background-color, $badge-shadow-darken-amount);
+        }
+    }
+
+    .badges__badge--sale {
+        background-color: $badge-sale-background-color;
+
+        &:before {
+            border-top-color: darken($badge-sale-background-color, $badge-shadow-darken-amount);
+        }
+    }
+
+    .badges__badge--best-seller {
+        background-color: $badge-best-seller-background-color;
+
+        &:before {
+            border-top-color: darken($badge-best-seller-background-color, $badge-shadow-darken-amount);
+        }
+    }
+
+        .badges__badge-text {}

data/app/assets/stylesheets/workarea/product_grid_content/components/_product_grid_cell_content_block.scss

@@ -0,0 +1,32 @@
+/*------------------------------------*\
+    #PRODUCT-GRID-CELL-CONTENT-BLOCK
+\*------------------------------------*/
+
+.product-grid-cell-content-block {
+    position: relative;
+    margin-bottom: $spacing-unit;
+    height: 100%;
+    font-size: 1rem;
+    overflow: hidden;
+}
+
+    .product-grid-cell-content-block__background-link {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+    }
+
+    .product-grid-cell-content-block__content {
+        @include center;
+    }
+
+        .product-grid-cell-content-block__heading {}
+        .product-grid-cell-content-block__sub-heading {}
+        .product-grid-cell-content-block__action {}
+
+    .product-grid-cell-content-block__media-container {}
+    .product-grid-cell-content-block__media-container--maintain-aspect-ratio {}
+
+        .product-grid-cell-content-block__image {}

data/app/assets/stylesheets/workarea/storefront/base/_forms.scss

@@ -0,0 +1,224 @@
+/*------------------------------------*\
+    #FORMS
+\*------------------------------------*/
+
+// scss-lint:disable QualifyingElement
+
+$form-padding-right: 12px !default;
+$forms-color: $input-color !default;
+$forms-label-color: $label-color !default;
+$forms-bg-color: $input-background-color !default;
+$forms-disabled-color: $input-disabled-color !default;
+$forms-disabled-bg-color: $input-disabled-background-color !default;
+$forms-placeholder-color: $placeholder-color !default;
+$forms-border-color-error: $invalid-color !default;
+
+// Checkbox settings
+$checkbox-size: 16px !default;
+$checkbox-color: $input-checkbox-color !default;
+$checkbox-border: 1px solid $input-checkbox-border-color !default;
+
+$checkbox-fill-color: $input-checkbox-fill-color !default;
+$checkbox-box-shadow: 0 0 0 0 $checkbox-fill-color inset !default;
+$checkbox-box-shadow-checked: 0 0 0 ($checkbox-size / 2) $checkbox-fill-color inset !default;
+$checkbox-easing-function: ease-in !default;
+
+// Radio button settings
+$radio-button-size: 16px !default;
+$radio-button-inner-size: 4px !default;
+$radio-button-color: $input-radio-color !default;
+$radio-button-border: 1px solid $input-radio-border-color !default;
+
+$radio-button-fill-color: $input-radio-fill-color !default;
+$radio-button-box-shadow: 0 0 0 0 $radio-button-fill-color inset !default;
+$radio-button-box-shadow-checked: 0 0 0 ($radio-button-size / 2) $radio-button-fill-color inset !default;
+$radio-button-inner-bg-color: $input-radio-background-color !default;
+$radio-button-easing-function: cubic-bezier(0.75, 0.01, 0.48, 2);
+
+/**
+ * Provide default margins for form containment elements.
+ */
+fieldset, legend {
+    margin-bottom: $vertical-margin;
+}
+
+
+/**
+ * Set a larger default font size for basic form controls
+ * 1. For accessibility purposes, all input types are highlighted on focus.
+ */
+select,
+input, textarea {
+    padding: $spacing-unit;
+    padding-right: $form-padding-right;
+    color: $forms-color;
+    font-size: $form-control-font-size;
+    background-color: $forms-bg-color;
+    border: 0;
+
+    &:focus {
+        @include focus-ring; /* [1] */
+    }
+}
+
+label {
+    color: $forms-label-color;
+    font-size: $form-control-font-size;
+}
+
+
+/**
+ * Ensure select menus cannot exceed with width of their parents.
+ * We use a trick on mobile to let the select gracefully truncates
+ * his content.
+ *
+ * @url https://stackoverflow.com/a/10795269/1538101
+ */
+select {
+    width: 100%;
+    max-width: 100%;
+
+    @include respond-to($medium-breakpoint) {
+        width: auto;
+    }
+}
+
+
+/**
+ * Ensure text within in a `textarea` displays at the top of the element now
+ * that they can be wrapped within a `display: table-cell` element.
+ */
+textarea {
+    vertical-align: baseline;
+}
+
+
+/**
+ * Ensure form controls in OSX will look more consistent with other OSes that do
+ * not utilize sub-pixel anti-aliasing.
+ */
+select,
+button,
+input, textarea {
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing:  antialiased;
+}
+
+
+/**
+ * Show clear indication that a form control is not interactive by changing the
+ * cursor:
+ *
+ * 1. if the element itself is disabled or readonly
+ * 2. if the fieldset wrapping the element is disabled
+ */
+button,
+input, textarea,
+select, optgroup, option {
+    &[disabled], &[readonly], /* [1] */
+    fieldset[disabled] & { /* [2] */
+        color: $forms-disabled-color;
+        background-color: $forms-disabled-bg-color;
+        cursor: not-allowed;
+    }
+}
+
+
+/**
+ * Set default color for elements using `[placeholder]` attributes.
+ */
+::placeholder {
+    color: $forms-placeholder-color;
+}
+
+/**
+ * 1. animating box-shadow isn't preferable but it's the best way to acheive this effect
+ */
+input[type='checkbox'] {
+    position: relative;
+    width: $checkbox-size;
+    height: $checkbox-size;
+    border: $checkbox-border;
+    border-radius: 50%;
+    box-shadow: $checkbox-box-shadow;
+    transition: box-shadow 0.15s $checkbox-easing-function; /* [1] */
+    vertical-align: middle;
+    appearance: none;
+
+    &:after {
+        display: block;
+        position: absolute;
+        top: -50%;
+        width: $checkbox-size;
+        height: $checkbox-size / 2;
+        color: $checkbox-color;
+        text-align: center;
+        content: '✓';
+        opacity: 0;
+        transform: scale(0.2) translateY(50%);
+        transition: transform 0.15s $checkbox-easing-function, opacity 0.15s $checkbox-easing-function;
+    }
+
+    &:checked:after {
+        opacity: 1;
+        transform: scale(1) translate(-10%, 75%);
+    }
+
+    &:checked {
+        box-shadow: $checkbox-box-shadow-checked;
+    }
+
+    &.visually-hidden {
+        width: 0;
+        height: 0;
+        border: 0;
+
+        &:after {
+            display: none;
+        }
+    }
+}
+
+input[type='radio'] {
+    position: relative;
+    width: $radio-button-size;
+    height: $radio-button-size;
+    border: $radio-button-border;
+    border-radius: 50%;
+    box-shadow: $radio-button-box-shadow;
+    transition: box-shadow 0.15s $radio-button-easing-function; /* [1] */
+    appearance: none;
+    vertical-align: middle;
+
+    &:before {
+        @include center;
+        display: block;
+        width: $radio-button-inner-size;
+        height: $radio-button-inner-size;
+        text-align: center;
+        background-color: $radio-button-inner-bg-color;
+        border-radius: 50%;
+        opacity: 0;
+        content: '';
+        transform: translate(-50%, -50%);
+        transition: transform 0.15s $radio-button-easing-function, opacity 0.15s $radio-button-easing-function;
+    }
+
+    &:checked:before {
+        opacity: 1;
+    }
+
+    &:checked {
+        box-shadow: $radio-button-box-shadow-checked;
+    }
+
+    &.visually-hidden {
+        width: 0;
+        height: 0;
+        border: 0;
+
+        &:before {
+            display: none;
+        }
+    }
+}