workarea-nvy_theme 1.1.2

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

@@ -0,0 +1,55 @@
+/*------------------------------------*\
+    #INPUT-CHECKBOX
+\*------------------------------------*/
+
+$input-checkbox-size: 16px !default;
+$input-checkbox-color: $input-checkbox-color !default;
+$input-checkbox-border: 1px solid $input-checkbox-border-color !default;
+
+$input-checkbox-fill-color: $input-checkbox-fill-color !default;
+$input-checkbox-box-shadow: 0 0 0 0 $input-checkbox-fill-color inset !default;
+$input-checkbox-box-shadow-checked: 0 0 0 ($input-checkbox-size / 2) $input-checkbox-fill-color inset !default;
+$input-checkbox-easing-function: ease-in !default;
+
+/**
+ * 1. animating box-shadow isn't preferable but it's the best way to acheive this effect
+ */
+input[type='checkbox'] {
+    position: relative;
+    width: $input-checkbox-size;
+    height: $input-checkbox-size;
+    border: $input-checkbox-border;
+    box-shadow: $input-checkbox-box-shadow;
+    transition: box-shadow 0.15s $input-checkbox-easing-function; /* [1] */
+    vertical-align: middle;
+    appearance: none;
+
+    &:after {
+        @include center;
+        display: block;
+        color: $input-checkbox-color;
+        font-size: 13px;
+        text-align: center;
+        content: '✔';
+        opacity: 0;
+        transition: opacity 0.15s $input-checkbox-easing-function;
+    }
+
+    &:checked:after {
+        opacity: 1;
+    }
+
+    &:checked {
+        box-shadow: $input-checkbox-box-shadow-checked;
+    }
+
+    &.visually-hidden {
+        width: 0;
+        height: 0;
+        border: 0;
+
+        &:after {
+            display: none;
+        }
+    }
+}

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

@@ -0,0 +1,59 @@
+/*------------------------------------*\
+    #INPUT-RADIO
+\*------------------------------------*/
+
+$input-radio-size: 16px !default;
+$input-radio-inner-size: 8px !default;
+$input-radio-color: $input-radio-color !default;
+$input-radio-border: 1px solid $input-radio-border-color !default;
+
+$input-radio-fill-color: $input-radio-fill-color !default;
+$input-radio-box-shadow: 0 0 0 0 $input-radio-fill-color inset !default;
+$input-radio-box-shadow-checked: 0 0 0 ($input-radio-size / 2) $input-radio-fill-color inset !default;
+$input-radio-inner-bg-color: $input-radio-background-color !default;
+$input-radio-easing-function: cubic-bezier(0.75, 0.01, 0.48, 2);
+
+
+input[type='radio'] {
+    position: relative;
+    width: $input-radio-size;
+    height: $input-radio-size;
+    border: $input-radio-border;
+    border-radius: 50%;
+    box-shadow: $input-radio-box-shadow;
+    transition: box-shadow 0.15s $input-radio-easing-function; /* [1] */
+    appearance: none;
+    vertical-align: middle;
+
+    &:before {
+        @include center;
+        display: block;
+        width: $input-radio-inner-size;
+        height: $input-radio-inner-size;
+        text-align: center;
+        background-color: $input-radio-inner-bg-color;
+        border-radius: 50%;
+        opacity: 0;
+        content: '';
+        transform: translate(-50%, -50%);
+        transition: transform 0.15s $input-radio-easing-function, opacity 0.15s $input-radio-easing-function;
+    }
+
+    &:checked:before {
+        opacity: 1;
+    }
+
+    &:checked {
+        box-shadow: $input-radio-box-shadow-checked;
+    }
+
+    &.visually-hidden {
+        width: 0;
+        height: 0;
+        border: 0;
+
+        &:before {
+            display: none;
+        }
+    }
+}

data/app/assets/stylesheets/workarea/storefront/blog/components/_blog_entry.scss

@@ -0,0 +1,139 @@
+/*------------------------------------*\
+    #BLOG-ENTRY
+\*------------------------------------*/
+
+$blog-entry-metadata-font: $secondary-font-family !default;
+$blog-entry-comment-border-color: $blog-comment-border-color !default;
+
+
+.blog-entry {}
+
+    .blog-entry__label {
+        display: inline-block;
+        margin: 0 ($spacing-unit / 2) 0 0;
+    }
+
+    .blog-entry__title {}
+
+    .blog-entry__author {
+        display: inline-block;
+        margin: 0 $spacing-unit 0 0;
+        font-family: $blog-entry-metadata-font;
+        font-weight: bold;
+    }
+
+    .blog-entry__datetime {
+        display: inline-block;
+        font-family: $blog-entry-metadata-font;
+    }
+
+    .blog-entry__comment-count {
+        display: inline-block;
+        margin: 0 0 0 $spacing-unit;
+        font-family: $blog-entry-metadata-font;
+    }
+
+    .blog-entry__tags {
+        margin-bottom: $vertical-margin;
+        font-family: $blog-entry-metadata-font;
+    }
+
+        .blog-entry__tags-list {
+            @extend %inline-list;
+            display: inline-block;
+        }
+
+            .blog-entry__tags-list-item {
+                & + & {
+                    margin: 0 0 0 ($spacing-unit / 2);
+                }
+            }
+
+    .blog-entry__body {
+        margin-bottom: $vertical-margin;
+    }
+
+    .blog-entry__share {
+        margin-bottom: $vertical-margin;
+    }
+
+        .blog-entry__share-heading {}
+
+    /**
+     * Comments
+     *
+     * 1. Roughly matches height of write-comment-link for vertical alginment
+     */
+
+    .blog-entry__comments {}
+
+        .blog-entry__section {}
+
+        .blog-entry__comments-header {
+            @extend %clearfix;
+            text-align: center;
+
+            @include respond-to($medium-breakpoint) {
+                text-align: left;
+            }
+        }
+
+
+            .blog-entry__comments-heading {
+                @extend %heading;
+                @extend %heading--5;
+                line-height: 1.9; /* [1] */
+
+                @include respond-to($medium-breakpoint) {
+                    margin-bottom: 0;
+                    float: left;
+                }
+            }
+
+            .blog-entry__write-comment-link {
+                @include respond-to($medium-breakpoint) {
+                    margin-bottom: 0;
+                    float: right;
+                }
+            }
+
+        .blog-entry__comment-group {
+            @extend %list-reset;
+        }
+
+            .blog-entry__comment {
+                padding: ($spacing-unit * 2) $spacing-unit;
+
+                @include respond-to($medium-breakpoint) {
+                    padding: ($spacing-unit * 4) ($spacing-unit * 2);
+                }
+
+                & + & {
+                    border-top: 1px solid $blog-entry-comment-border-color;
+                }
+            }
+
+                .blog-entry__comment-item {
+                    margin: 0 0 ($spacing-unit / 2);
+                }
+
+                .blog-entry__comment-item--author {
+                    display: inline-block;
+                    margin-right: 1em;
+                    font-weight: bold;
+                }
+
+                .blog-entry__comment-item--datetime {
+                    display: inline-block;
+                }
+
+                .blog-entry__comment-item--body {
+                    margin: ($spacing-unit * 2) 0 0;
+                }
+
+        .blog-entry__comments-form {}
+
+            .blog-entry__comment-heading {
+                @extend %heading;
+                @extend %heading--5;
+            }

data/app/assets/stylesheets/workarea/storefront/blog/components/_blog_entry_summary.scss

@@ -0,0 +1,103 @@
+/*------------------------------------*\
+    #BLOG-ENTRY-SUMMARY
+\*------------------------------------*/
+
+$blog-entry-summary-font: $secondary-font-family !default;
+$blog-entry-summary-thumbnail-small-width:  160px !default;
+$blog-entry-summary-border-color: $blog-summary-border-color !default;
+
+
+.blog-entry-summary {}
+
+.blog-entry-summary--featured {}
+
+    .blog-entry-summary__title {}
+
+    .blog-entry-summary__banner-content {
+        margin-bottom: $vertical-margin;
+    }
+
+    .blog-entry-summary__entry-group {
+        .blog-index & {
+            margin: 0 $spacing-unit * 2;
+        }
+    }
+
+        .blog-entry-summary__entry {
+            @extend %clearfix;
+            margin: 0;
+            padding: ($spacing-unit * 2) $spacing-unit;
+
+            @include respond-to($medium-breakpoint) {
+                padding: ($spacing-unit * 4) ($spacing-unit * 2);
+            }
+
+            &:first-of-type {
+                padding-top: 0;
+            }
+
+            & + & {
+                border-top: 1px solid $blog-entry-summary-border-color;
+            }
+        }
+
+            .blog-entry-summary__entry-thumbnail {
+                margin-bottom: $vertical-margin;
+                text-align: center;
+
+                @include respond-to($medium-breakpoint) {
+                    margin: $spacing-unit ($spacing-unit * 2) $spacing-unit 0;
+                    width: $blog-entry-summary-thumbnail-small-width;
+                    float: left;
+                }
+            }
+
+            .blog-entry-summary__entry-label {
+                display: inline-block;
+                margin: 0 ($spacing-unit / 2) 0 0;
+            }
+
+            .blog-entry-summary__entry-title {
+                @extend %heading;
+                @extend %heading--5;
+                margin-bottom: $spacing-unit;
+            }
+
+            .blog-entry-summary__entry-author {
+                display: inline-block;
+                margin: 0 $spacing-unit 0 0;
+                font-family: $blog-entry-summary-font;
+                font-weight: bold;
+            }
+
+            .blog-entry-summary__entry-datetime {
+                display: inline-block;
+                margin: 0;
+                font-family: $blog-entry-summary-font;
+            }
+
+            .blog-entry-summary__entry-comment-count {
+                display: inline-block;
+                margin: 0;
+                font-family: $blog-entry-summary-font;
+            }
+
+            .blog-entry-summary__entry-tags {
+                margin-bottom: $vertical-margin;
+                font-family: $blog-entry-summary-font;
+            }
+
+                .blog-entry-summary__entry-tags-list {
+                    @extend %inline-list;
+                    display: inline-block;
+                }
+
+                    .blog-entry-summary__entry-tags-list-item {
+                        & + & {
+                            margin: 0 0 0 ($spacing-unit / 2);
+                        }
+                    }
+
+            .blog-entry-summary__content {
+                margin-bottom: $vertical-margin;
+            }

data/app/assets/stylesheets/workarea/storefront/blog/components/_featured_entry_content_block.scss

@@ -0,0 +1,22 @@
+/*------------------------------------*\
+    #FEATURED-ENTRY-CONTENT-BLOCK
+\*------------------------------------*/
+
+.featured-entry-content-block {}
+
+    .featured-entry-content-block__banner {}
+
+        .featured-entry-content-block__image {}
+
+    .featured-entry-content-block__content {}
+
+        .featured-entry-content-block__category-tag {}
+        
+        .featured-entry-content-block__heading {}
+
+        .featured-entry-content-block__byline {}
+
+        .featured-entry-content-block__body {}
+
+        .featured-entry-content-block__read-more {}
+

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

@@ -0,0 +1,62 @@
+/*------------------------------------*\
+    #ACCOUNT-MENU
+\*------------------------------------*/
+
+$account-menu-width: 240px !default;
+$account-menu-background-color: $utility-nav-background-color !default;
+$account-menu-box-shadow: 0 2px 5px 0 $black-alpha-15 !default;
+$account-menu-heading-color: $utility-nav-heading-color !default;
+$account-menu-item-list-background-color: $background-color !default;
+$account-menu-offset: 80px !default;
+$account-menu-offset-wide: 100px !default;
+
+
+/**
+ * 1. -200% to prevent account menu being visible if a user 'flicks' the browser up
+ */
+.account-menu {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: index($components, account-menu);
+    padding: ($spacing-unit * 2) ($spacing-unit * 3);
+    width: $account-menu-width;
+    text-align: left;
+    background-color: $account-menu-background-color;
+    box-shadow: $account-menu-box-shadow;
+    opacity: 0;
+    transform: translateY(-200%); /* [1] */
+    transition: opacity $transition-time ease-out;
+
+    @include respond-to($x-wide-breakpoint) {
+        left: 75%;
+    }
+}
+
+.account-menu--open {
+    transform: translateY($account-menu-offset);
+    opacity: 1;
+    transition-timing-function: ease-out;
+
+    @include respond-to($wide-breakpoint) {
+        transform: translateY($account-menu-offset-wide);
+    }
+}
+
+    .account-menu__heading {
+        margin-bottom: $spacing-unit;
+        color: $account-menu-heading-color;
+    }
+
+    .account-menu__items {
+        @extend %list-reset;
+        background-color: $account-menu-item-list-background-color;
+    }
+
+        .account-menu__item {
+            padding: ($spacing-unit * 2) 0;
+        }
+
+        .account-menu__logout-link {}
+
+        .account-menu__locale {}

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

@@ -0,0 +1,22 @@
+/*------------------------------------*\
+    #BACK-TO-TOP-BUTTON
+\*------------------------------------*/
+
+.back-to-top-button {
+    position: fixed;
+    right: $spacing-unit * 4;
+    bottom: 0;
+    z-index: index($components, back-to-top-button);
+    padding: 11px 20px;
+    transform: translateY(100%);
+
+    &:before {
+        display: block;
+        text-align: center;
+        content: '▲';
+    }
+}
+
+.back-to-top-button--visible {
+    transform: translateY(-150%);
+}