workarea-haven_theme 1.3.0

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

@@ -0,0 +1,127 @@
+/*------------------------------------*\
+    #BLOG-ENTRY
+\*------------------------------------*/
+
+$blog-entry-author-color: $font-color-light !default;
+$blog-entry-datetime-color: $font-color-light !default;
+
+$blog-entry-comment-group-max-width: 66% !default;
+
+$blog-entry-tag-color: $blog-entry-tag-color !default;
+$blog-entry-tag-background-color: $blog-entry-tag-background-color !default;
+
+
+.blog-entry {}
+
+    .blog-entry__header {}
+
+        .blog-entry__title {
+            @extend %heading;
+            @extend %heading--3;
+            @extend %heading--upcase;
+            margin-top: $vertical-margin;
+            text-align: center;
+        }
+
+        .blog-entry__byline {
+            margin: 0 $spacing-unit 0 ($spacing-unit * 5);
+            color: $blog-entry-author-color;
+        }
+
+        .blog-entry__author {
+            display: inline-block;
+        }
+
+        .blog-entry__datetime {
+            display: inline-block;
+            margin-left: $spacing-unit;
+        }
+
+        .blog-entry__comment-count {
+            display: inline-block;
+            margin-left: $spacing-unit;
+        }
+
+        .blog-entry__tags {
+            margin: $vertical-margin 0;
+            text-align: center;
+        }
+
+            .blog-entry__tags-list {
+                @extend %inline-list;
+                display: inline-block;
+            }
+
+                .blog-entry__tags-list-item {
+                    padding: ($spacing-unit / 2) $spacing-unit;
+                    background-color: $blog-entry-tag-background-color;
+                    border-radius: 2px;
+
+                    & + & {
+                        margin: 0 0 0 ($spacing-unit / 2);
+                    }
+                }
+
+                    .blog-entry__tags-list-item-link {
+                        color: $blog-entry-tag-color;
+                    }
+
+    .blog-entry__body {
+        margin-bottom: $vertical-margin;
+        padding: 0 ($spacing-unit * 5);
+    }
+
+    /**
+     * Comments
+     */
+
+    .blog-entry__comments {}
+
+        .blog-entry__section {
+            margin: $spacing-unit * 5;
+        }
+
+        .blog-entry__comments-header {
+            @extend %clearfix;
+        }
+
+            .blog-entry__comments-heading {
+                @extend %heading;
+                @extend %heading--5;
+                @extend %heading--upcase;
+            }
+
+            .blog-entry__write-comment-link {}
+
+        .blog-entry__comment-group {
+            @extend %list-reset;
+
+            @include respond-to($medium-breakpoint) {
+                max-width: $blog-entry-comment-group-max-width;
+            }
+        }
+
+            .blog-entry__comment {
+                margin-bottom: $vertical-margin;
+                padding: $spacing-unit * 2;
+                background-color: $background-color-alternate;
+            }
+
+                .blog-entry__comment-item {
+                    display: inline-block;
+                    margin: 0;
+                }
+
+                .blog-entry__comment-item--author {}
+
+                .blog-entry__comment-item--datetime {
+                    margin-left: $spacing-unit;
+                }
+
+                .blog-entry__comment-item--body {
+                    display: block;
+                    margin: 0;
+                    margin-bottom: $vertical-margin;
+                }
+
+        .blog-entry__comments-form {}

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

@@ -0,0 +1,166 @@
+/*------------------------------------*\
+    #BLOG-ENTRY-SUMMARY
+\*------------------------------------*/
+
+$blog-entry-summary-per-row: 3 !default;
+$blog-entry-summary-per-row-content-block: 4 !default;
+$blog-entry-summary-entry-width: 100% / $blog-entry-summary-per-row !default;
+$blog-entry-summary-entry-width-content-block: 100% / $blog-entry-summary-per-row-content-block !default;
+$blog-entry-summary-entry-border: 1px solid $border-color !default;
+$blog-entry-summary-entry-title-color: $heading-color !default;
+$blog-entry-summary-by-line-color: $font-color-light !default;
+
+$blog-entry-summary-thumbnail-placeholder-ratio: 2 / 1 !default;
+$blog-entry-summary-thumbnail-placeholder-text-color: $font-color-inverted !default;
+$blog-entry-summary-thumbnail-placeholder-background-color: $primary-color !default;
+
+$blog-entry-summary-tags-border-radius: 2px !default;
+$blog-entry-summary-tag-color: $font-color-inverted !default;
+$blog-entry-summary-tag-background-color: $primary-color !default;
+
+$blog-entry-summary-comment-count-background-color: $background-color-alternate !default;
+
+
+/**
+ * 1. calc used to account for left + right margins in flex grid
+ */
+.blog-entry-summary {}
+
+.blog-entry-summary--featured {}
+
+    .blog-entry-summary__title {
+        @extend %heading;
+        @extend %heading--4;
+        @extend %heading--upcase;
+        padding: ($spacing-unit * 2) 0 $spacing-unit;
+        text-align: center;
+
+        @include respond-to($medium-breakpoint) {
+            text-align: left;
+        }
+    }
+
+    .blog-entry-summary__banner-content {
+        margin-bottom: $vertical-margin;
+    }
+
+    .blog-entry-summary__entry-group {
+        display: flex;
+        flex-wrap: wrap;
+    }
+
+        .blog-entry-summary__entry {
+            @extend %clearfix;
+            position: relative;
+            margin: $spacing-unit;
+            max-width: calc(#{$blog-entry-summary-entry-width} - (#{$spacing-unit} * 2)); /* [1] */
+            border: $blog-entry-summary-entry-border;
+            flex-grow: 1;
+
+            .featured-entry-content-block & {
+                max-width: calc(#{$blog-entry-summary-entry-width-content-block} - (#{$spacing-unit} * 2)); /* [1] */
+            }
+        }
+
+        .blog-entry-summary__entry--featured {
+            max-width: calc((#{$blog-entry-summary-entry-width} * 2) - (#{$spacing-unit} * 2));  /* [1] */
+            flex-grow: 2;
+        }
+
+            .blog-entry-summary__entry-thumbnail {
+                text-align: center;
+            }
+
+            .blog-entry-summary__entry-thumbnail--placeholder {
+                position: relative;
+                padding: 0 0 ((1 / $blog-entry-summary-thumbnail-placeholder-ratio) * 100%);
+                background-color: $blog-entry-summary-thumbnail-placeholder-background-color;
+            }
+
+                .blog-entry-summary__thumbnail-placeholder-text {
+                    @include center;
+                    padding: 0 $spacing-unit;
+                    width: 80%;
+                    color: $blog-entry-summary-thumbnail-placeholder-text-color;
+                    font-size: $font-size;
+                    font-weight: $font-weight-regular;
+                }
+
+            .blog-entry-summary__entry-label {
+                display: inline-block;
+                margin: 0 ($spacing-unit / 2) 0 0;
+            }
+
+            .blog-entry-summary__entry-title {
+                margin-bottom: 0;
+                padding: 0 $spacing-unit;
+                font-size: $font-size;
+                font-weight: $font-weight-regular;
+            }
+
+                .blog-entry-summary__entry-title-link {
+                    color: $blog-entry-summary-entry-title-color;
+                    font-size: $font-size;
+                }
+
+            .blog-entry-summary__entry-by-line {
+                padding: 0 $spacing-unit;
+                color: $blog-entry-summary-by-line-color;
+                font-size: $font-size-small;
+            }
+
+                .blog-entry-summary__entry-author {
+                    display: inline-block;
+                    margin: 0 $spacing-unit 0 0;
+                }
+
+                .blog-entry-summary__entry-datetime {
+                    display: inline-block;
+                }
+
+            .blog-entry-summary__entry-tags {
+                margin: $vertical-margin 0 $spacing-unit;
+                text-align: center;
+            }
+
+                .blog-entry-summary__entry-tags-list {
+                    @extend %inline-list;
+                    display: inline-block;
+                }
+
+                    .blog-entry-summary__entry-tags-list-item {
+                        margin-bottom: $spacing-unit;
+                        padding: ($spacing-unit / 2) $spacing-unit;
+                        background-color: $blog-entry-summary-tag-background-color;
+                        border-radius: $blog-entry-summary-tags-border-radius;
+
+                        & + & {
+                            margin: 0 0 $spacing-unit ($spacing-unit / 2);
+                        }
+                    }
+
+                        .blog-entry-summary__entry-tags-list-item-link {
+                            color: $blog-entry-summary-tag-color;
+                        }
+
+            .blog-entry-summary__content {
+                margin-bottom: $spacing-unit * 6;
+                padding: 0 $spacing-unit;
+                font-size: $font-size-small;
+                line-height: $line-height-large;
+            }
+
+                .blog-entry-summary__content-read-more {
+                    white-space: nowrap;
+                }
+
+                .blog-entry-summary__entry-comment-count {
+                    display: block;
+                    position: absolute;
+                    right: 0;
+                    bottom: 0;
+                    left: 0;
+                    margin: 0;
+                    padding: $spacing-unit;
+                    background-color: $blog-entry-summary-comment-count-background-color;
+                }

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

@@ -0,0 +1,25 @@
+/*------------------------------------*\
+    #BLOG-INDEX
+\*------------------------------------*/
+
+.blog-index {}
+
+    .blog-index__title {
+        @extend %heading;
+        @extend %heading--3;
+        text-align: center;
+    }
+
+    .blog-index__blog {
+        margin-bottom: $spacing-unit * 4;
+    }
+
+        .blog-index__blog-title {
+            @extend %heading;
+            @extend %heading--4;
+            @extend %heading--upcase;
+        }
+
+            .blog-index__blog-title-link {
+                font-size: inherit;
+            }

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

@@ -0,0 +1,9 @@
+/*------------------------------------*\
+    #FEATURED-ENTRY-CONTENT-BLOCK
+\*------------------------------------*/
+
+.featured-entry-content-block {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+}

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

@@ -0,0 +1,50 @@
+/*------------------------------------*\
+    #ACCOUNT-MENU
+\*------------------------------------*/
+
+$account-menu-width: 240px !default;
+$account-menu-background-color: $utility-nav-background-color !default;
+$account-menu-heading-color: $utility-nav-heading-color !default;
+$account-menu-item-list-background-color: $background-color !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;
+    width: $account-menu-width;
+    background-color: $account-menu-background-color;
+    transform: translateY(-200%); /* [1] */
+    transition: transform $transition-time ease-in;
+}
+
+.account-menu--open {
+    transform: translateY($page-header-height);
+
+    @include respond-to($page-header-breakpoint) {
+        transform: translateY($page-header-height-medium);
+    }
+}
+
+    .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;
+        }
+
+        .account-menu__logout-link {}
+
+        .account-menu__locale {}

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

@@ -0,0 +1,51 @@
+/*------------------------------------*\
+    #ADD-TO-CART
+\*------------------------------------*/
+
+$add-to-cart-recommendations-height: 466px !default;
+$add-to-cart-recommendations-min-width: 280px !default;
+
+.add-to-cart {
+    width: 100%;
+}
+
+.add-to-cart--with-aside {}
+
+    .add-to-cart__items {
+        padding: $spacing-unit * 3;
+
+        .add-to-cart--with-aside & {
+            display: inline-block;
+            vertical-align: top;
+
+            @include respond-to($medium-breakpoint) {
+                width: 60%;
+            }
+        }
+    }
+
+    .add-to-cart__info {
+        margin-top: $spacing-unit * 3;
+        padding: ($spacing-unit * 3) 0;
+        border-top: 1px solid $border-color;
+    }
+
+        .add-to-cart__cart-count {}
+        .add-to-cart__discount-messaging {}
+
+        .add-to-cart__actions {
+            margin-top: $spacing-unit * 3;
+        }
+
+    .add-to-cart__recommendations {
+        display: none;
+        width: 40%;
+        height: $add-to-cart-recommendations-height;
+        min-width: $add-to-cart-recommendations-min-width;
+        vertical-align: top;
+        overflow-y: scroll;
+
+        @include respond-to($medium-breakpoint) {
+            display: inline-block;
+        }
+    }

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

@@ -0,0 +1,30 @@
+/*------------------------------------*\
+    #BACK-TO-TOP-BUTTON
+\*------------------------------------*/
+
+$back-to-top-button-size: 60px !default;
+$back-to-top-button-top-padding: 12px !default;
+
+.back-to-top-button {
+    position: fixed;
+    right: $spacing-unit * 4;
+    bottom: 0;
+    z-index: index($components, back-to-top-button);
+    padding-top: $back-to-top-button-top-padding;
+    width: $back-to-top-button-size;
+    height: $back-to-top-button-size;
+    opacity: 0;
+    transform: translateY(100%);
+    transition: opacity $transition-time ease-out;
+
+    &:before {
+        display: block;
+        text-align: center;
+        content: '▲';
+    }
+}
+
+.back-to-top-button--visible {
+    opacity: 1;
+    transform: translateY(-150%);
+}