workarea-storefront 3.4.12

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

@@ -0,0 +1,91 @@
+/*------------------------------------*\
+    #EMAIL-CONTAINER
+\*------------------------------------*/
+$email-container-main-bg-color: $white !default;
+
+.email-container {
+    margin: auto;
+    text-align: center;
+}
+
+.email-container--main {
+    & > tr > td {
+        background: $email-container-main-bg-color;
+        text-align: center;
+        vertical-align: top;
+        padding: $spacing-unit;
+    }
+}
+
+.email-header {
+    padding: ($spacing-unit * 2) 0;
+}
+
+.email-footer {
+    padding: ($spacing-unit * 4) $spacing-unit;
+    font-family: $font-family;
+}
+
+
+/*------------------------------------*\
+    #PREHEADER-TEXT
+\*------------------------------------*/
+.preheader-text {
+    display: none;
+    font-size: 1px;
+    line-height: 1px;
+    max-height: 0px;
+    max-width: 0px;
+    opacity: 0;
+    overflow: hidden;
+    mso-hide: all;
+    font-family: sans-serif;
+}
+
+
+/*------------------------------------*\
+    #LOGO
+\*------------------------------------*/
+.logo {
+    text-decoration: none;
+}
+
+    .logo__image {}
+
+
+/*------------------------------------*\
+    #PRODUCT-GRID
+\*------------------------------------*/
+.product-grid {
+    margin-bottom: $spacing-unit * 2;
+
+    & > tr > td {
+        vertical-align: top;
+    }
+}
+
+    .product-grid__product {
+        text-align: center;
+    }
+
+        .product-grid__image {
+            padding: 0 0 $spacing-unit;
+        }
+
+        .product-grid__info {
+            padding: 0 0 ($spacing-unit * 2);
+            font-size: $font-size - 2px;
+            font-family: $font-family;
+        }
+
+            .product-grid__link {
+                text-decoration: none;
+            }
+
+            .product-grid__name {
+                display: block;
+            }
+
+            .product-grid__price {
+                font-weight: bold;
+            }

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

@@ -0,0 +1,69 @@
+/*------------------------------------*\
+    #HELPERS
+\*------------------------------------*/
+
+/**
+ * Text alignment
+ */
+.align-left { text-align: left; }
+.align-center { text-align: center; }
+.align-right { text-align: right; }
+
+
+/**
+ * Responsive helpers
+ *
+ * Due to the way Premailer parses external CSS into inline CSS, we must be very
+ * forceful with our helpers. Because of this we must take a "mobile-last"
+ * approach, or else we'll get into an !important war.
+ *
+ * These class names are taken directly from the Cerberus template.
+ */
+@media screen and (max-width: $email-max-width) {
+    .email-container {
+        width: 100% !important;
+        margin: auto !important;
+    }
+
+    /* Forces elements to resize to the full width of their container. Useful
+    for resizing images beyond their max-width. */
+    .fluid {
+        max-width: 100% !important;
+        height: auto !important;
+        margin-left: auto !important;
+        margin-right: auto !important;
+    }
+
+    /* Forces table cells into full-width rows. */
+    .stack-column,
+    .stack-column-center {
+        display: block !important;
+        width: 100% !important;
+        max-width: 100% !important;
+        direction: ltr !important;
+    }
+
+    /* And center justify these ones. */
+    .stack-column-center {
+        text-align: center !important;
+    }
+
+    /* Generic utility class for centering. Useful for images, buttons, and
+    nested tables. */
+    .center-on-narrow {
+        text-align: center !important;
+        display: block !important;
+        margin-left: auto !important;
+        margin-right: auto !important;
+        float: none !important;
+    }
+
+    table.center-on-narrow {
+        display: inline-block !important;
+    }
+
+    /* Adjust typography on small screens to improve readability */
+    .email-container p {
+        font-size: $font-size + 2px !important;
+    }
+}

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

@@ -0,0 +1,22 @@
+/*------------------------------------*\
+    #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/global';
+@import '../settings/typography';
+
+
+/**
+ * Email-specific variables are defined separately.
+ */
+
+$email-max-width: 600px !default;
+$email-background-color: $light-gray !default;

data/app/assets/stylesheets/workarea/storefront/generic/_box_sizing.scss

@@ -0,0 +1,20 @@
+/*------------------------------------*\
+    #BOX-SIZING
+\*------------------------------------*/
+
+/**
+ * Set the global `box-sizing` state to `border-box`.
+ *
+ * css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
+ * paulirish.com/2012/box-sizing-border-box-ftw
+ */
+
+html {
+    box-sizing: border-box;
+}
+
+*,
+*:after,
+*:before {
+    box-sizing: inherit;
+}

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

@@ -0,0 +1,24 @@
+/*------------------------------------*\
+    #FONTS
+\*------------------------------------*/
+
+/**
+ * If your project requires a custom webfont we recommend loading it into the
+ * asset pipeline directly. This will ensure that Rails handles the caching of
+ * all of the assets used by the application in addition to being more stable
+ * than an asynchronous, 3rd party solution.
+ *
+ * Export your webfont into the following formats and save the files to
+ * `workarea/storefront/app/assets/fonts` before loading them in the following
+ * manner:
+ *
+ * @font-face {
+ *     font-family: 'MyWebfont';
+ *     src: font-url('workarea/storefront/my_webfont.eot'); // IE9 Compat Modes
+ *     src: font-url('workarea/storefront/my_webfont.eot?#iefix') format('embedded-opentype'), // IE6-IE8
+ *          font-url('workarea/storefront/my_webfont.woff2') format('woff2'), // Super Modern Browsers
+ *          font-url('workarea/storefront/my_webfont.woff') format('woff'), // Pretty Modern Browsers
+ *          font-url('workarea/storefront/my_webfont.ttf')  format('truetype'), // Safari, Android, iOS
+ *          font-url('workarea/storefront/my_webfont.svg#svgFontName') format('svg'); // Legacy iOS
+ * }
+ */

data/app/assets/stylesheets/workarea/storefront/generic/_reset.scss

@@ -0,0 +1,37 @@
+/*------------------------------------*\
+    #RESET
+\*------------------------------------*/
+
+/**
+ * Remove browser default margins from various elements
+ */
+h1, h2, h3, h4, h5, h6,
+p, blockquote, pre,
+dl, dd, ol, ul,
+form, fieldset, legend,
+figure, caption,
+table, th, td,
+hr {
+    margin: 0;
+}
+
+
+/**
+ * Remove special-browser treatment certain form controls
+ * See: http://stackoverflow.com/questions/7599533/ios-forces-rounded-corners-and-glare-on-inputs
+ */
+button,
+html [type='button'],
+[type='reset'], [type='submit'],
+textarea, input:not([type=radio]):not([type=checkbox]) {
+    -webkit-appearance: none;
+}
+
+
+/**
+ * Remove clear buttons on inputs in IE.
+ * See: http://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx
+ */
+input::-ms-clear {
+    display: none;
+}

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

@@ -0,0 +1,17 @@
+/*------------------------------------*\
+    #BUTTON-RESET
+\*------------------------------------*/
+
+%button-reset,
+.button-reset {
+    margin:  0;
+    padding: 0;
+    color: inherit;
+    font: inherit;
+    line-height: normal;
+    background: none;
+    border: 0;
+    border-radius: 0;
+    overflow: visible;
+    user-select: none;
+}

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

@@ -0,0 +1,93 @@
+/*------------------------------------*\
+    #CONTENT-PREVIEW-VISIBILITY
+\*------------------------------------*/
+
+/**
+ * This object is irregular, in the sense that it assists the Admin during
+ * content previewing. It's intention is to show a visably disabled state for
+ * hidden blocks in the Admin.
+ */
+
+$content-preview-visibility-hidden-text-color:  $red !default;
+$content-preview-visibility-hidden-bg-color:    rgba($white, 0.75) !default;
+
+
+/**
+ * 1. important used in order to ensure the block is always visible in the admin
+ */
+@mixin content-preview-visibility-state($toggle: on) {
+    display: block !important; /* [1] */
+
+    @if ($toggle == 'on') {
+        position: relative;
+
+        &::before {
+            display: block;
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            z-index: 1;
+            background: $content-preview-visibility-hidden-bg-color;
+            content: '';
+        }
+
+        &::after {
+            @include center;
+            display: block;
+            z-index: 2;
+            color: $content-preview-visibility-hidden-text-color;
+            font-weight: bold;
+            content: attr(data-hidden-block-css-content);
+        }
+    } @else {
+        position: initial;
+
+        &::before, &::after {
+            display: none;
+        }
+    }
+}
+
+
+/**
+ * Content blocks are technically hidden, by default.
+ */
+.content-preview-visibility {
+
+    .content-block--hidden-for-small {
+        @include content-preview-visibility-state(on);
+
+        @include respond-to($medium-breakpoint) {
+            @include content-preview-visibility-state(off);
+        }
+    }
+
+    .content-block--hidden-for-medium {
+        @include respond-to($medium-breakpoint) {
+            @include content-preview-visibility-state(on);
+        }
+
+        @include respond-to($wide-breakpoint) {
+            @include content-preview-visibility-state(off);
+        }
+    }
+
+    .content-block--hidden-for-wide {
+        @include respond-to($wide-breakpoint) {
+            @include content-preview-visibility-state(on);
+        }
+
+        @include respond-to($x-wide-breakpoint) {
+            @include content-preview-visibility-state(off);
+        }
+    }
+
+    .content-block--hidden-for-x-wide {
+        @include respond-to($x-wide-breakpoint) {
+            @include content-preview-visibility-state(on);
+        }
+    }
+
+}

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

@@ -0,0 +1,18 @@
+/*------------------------------------*\
+    #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 !default;
+
+.content-wrapper,
+%content-wrapper {
+    margin:  0 auto;
+    padding: $content-wrapper-padding;
+    max-width: $x-wide-breakpoint;
+}

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

@@ -0,0 +1,14 @@
+/*------------------------------------*\
+    #INLINE-LIST
+\*------------------------------------*/
+
+%inline-list,
+.inline-list {
+    margin:  0;
+    padding: 0;
+    list-style: none;
+
+    > li {
+        display: inline-block;
+    }
+}

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

@@ -0,0 +1,10 @@
+/*------------------------------------*\
+    #LIST-RESET
+\*------------------------------------*/
+
+%list-reset,
+.list-reset {
+    margin:  0;
+    padding: 0;
+    list-style: none;
+}

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

@@ -0,0 +1,10 @@
+/*------------------------------------*\
+    #TEXT-FIELD-RESET
+\*------------------------------------*/
+
+%text-field-reset,
+.text-field-reset {
+    padding: 0;
+    background: none;
+    border: 0;
+}

data/app/assets/stylesheets/workarea/storefront/settings/_breakpoints.scss.erb

@@ -0,0 +1,8 @@
+/*------------------------------------*\
+    #BREAKPOINTS
+\*------------------------------------*/
+
+// Breakpoints are configured in core/lib/workarea/configuration.rb
+<% Workarea.config.storefront_break_points.each do |name, size| %>
+    <%= "$#{name.to_s.dasherize}-breakpoint: #{size}px !default;" %>
+<% end %>