workarea-storefront 3.4.12

data/app/assets/stylesheets/workarea/storefront/settings/_colors.scss

@@ -0,0 +1,45 @@
+/*------------------------------------*\
+    #COLORS
+\*------------------------------------*/
+
+/**
+ * Color Variables
+ *
+ * These variables should always be aliased as Functional Variables, either at
+ * the bottom of this file, or at the top of the Component SCSS that they
+ * belong to. This method helps aid the quick reskinning of Components.
+ */
+
+$blue:                              #3366cc !default;
+$yellow:                            #fdcc5d !default;
+$red:                               #b50010 !default;
+$green:                             #19c06a !default;
+
+$white:                             #ffffff !default;
+$gray:                              #666666 !default;
+$light-gray:                        #dddddd !default;
+$black:                             #000000 !default;
+
+$black-alpha-15:                    rgba($black, 0.15) !default;
+$black-alpha-50:                    rgba($black, 0.50) !default;
+
+$white-alpha-50:                    rgba($white, 0.50) !default;
+
+$transparent:                       transparent !default;
+
+
+
+
+
+/**
+ * Global Functional Color Variables
+ */
+
+$font-color:        $black !default;
+$background-color:  $white !default;
+$highlight-color:   $yellow !default;
+$link-color:        $blue !default;
+
+$overlay-shadow-color:  $black-alpha-15 !default;
+
+$focus-ring-color:  $blue !default;

data/app/assets/stylesheets/workarea/storefront/settings/_global.scss

@@ -0,0 +1,25 @@
+/*------------------------------------*\
+    #GLOBAL
+\*------------------------------------*/
+
+/**
+ * Default global spacing units
+ */
+$spacing-unit:  8px !default;
+
+$vertical-margin:    $spacing-unit * 2 !default;
+$horizontal-margin:  $spacing-unit * 2 !default;
+
+
+/**
+ * These dialog dimensions allow for certain components to know their maximum
+ * possible width when being displayed within a dialog.
+ */
+$dialog-content-min-width:  300px !default;
+$dialog-content-max-width:  700px !default;
+
+
+/**
+ * Heights
+ */
+$global-admin-toolbar-height: 64px !default;

data/app/assets/stylesheets/workarea/storefront/settings/_grid.scss

@@ -0,0 +1,36 @@
+/*------------------------------------*\
+    #GRID
+\*------------------------------------*/
+
+/**
+ * We use the Avalanche CSS grid system to achieve layout. These settings
+ * override the default settings of the library. A list of all configurable
+ * settings can be found here: https://github.com/colourgarden/avalanche
+ */
+
+$av-gutter:  $spacing-unit;
+$av-widths:  (2, 3, 4, 5, 6);
+
+$av-breakpoint-class-chain:  '-at-';
+$av-width-class-style:       'percent';
+$av-width-class-namespace:   'grid__cell--';
+
+$av-enable-grid-right:   true;
+$av-enable-grid-flush:   true;
+$av-enable-grid-middle:  true;
+$av-enable-grid-auto:    true;
+$av-enable-grid-rev:     true;
+$av-enable-grid-center:  true;
+$av-enable-grid-large:   true;
+$av-enable-grid-bottom:  true;
+
+
+/**
+ * The following is required to ensure the grid's breakpoints stay up to date
+ * when changed in the project.
+ */
+$av-breakpoints: (
+    'medium':  "screen and (min-width: #{$medium-breakpoint})",
+    'wide':    "screen and (min-width: #{$wide-breakpoint})",
+    'x-wide':  "screen and (min-width: #{$x-wide-breakpoint})",
+);

data/app/assets/stylesheets/workarea/storefront/settings/_typography.scss

@@ -0,0 +1,18 @@
+/*------------------------------------*\
+    #FONTS
+\*------------------------------------*/
+
+/**
+ * Font stacks
+ */
+
+$font-family:               sans-serif !default;
+
+
+/**
+ * Text sizes
+ */
+
+$font-size:                 14px !default;
+$form-control-font-size:    16px !default;
+$line-height:               1.5 !default;

data/app/assets/stylesheets/workarea/storefront/settings/_z_indexes.scss

@@ -0,0 +1,29 @@
+/*------------------------------------*\
+        #Z-INDEXES
+\*------------------------------------*/
+
+/**
+ * z-index values ordered pertaining to their container.
+ *
+ * $components is the base level. Other containers require a position
+ * other than 'static'
+ *
+ * Based upon this article in Smashing Magazine
+ * https://www.smashingmagazine.com/2014/06/sassy-z-index-management-for-complex-layouts/
+ */
+
+$components: (
+    page-container,
+    back-to-top-button,
+    ui-autocomplete,
+    ui-dialog,
+    admin-toolbar,
+    page-messages,
+    mobile-nav,
+    mobile-filters-nav
+) !default;
+
+    $page-container: (
+        page-content,
+        page-header
+    ) !default;

data/app/assets/stylesheets/workarea/storefront/tools/_center.scss

@@ -0,0 +1,34 @@
+/*------------------------------------*\
+    #CENTER
+\*------------------------------------*/
+
+/// Center an element vertically and/or horizontally within a parent that is
+/// _relatively positioned._
+///
+/// @param {String} $to [both] - options are `vertical`, `horizontal`, or `both`
+///
+/// @example scss - Center mixin
+///     .block {
+///         position: relative;
+///         width: 100%;
+///     }
+///
+///         .block__element {
+///             @include center('horizontal');
+///             width: 50%;
+///         }
+@mixin center($to: both) {
+    position: absolute;
+
+    @if ($to == both) {
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    } @else if ($to == horizontal) {
+        left: 50%;
+        transform: translate(-50%, 0);
+    } @else if ($to == vertical) {
+        top: 50%;
+        transform: translate(0, -50%);
+    }
+}

data/app/assets/stylesheets/workarea/storefront/tools/_focus_ring.scss

@@ -0,0 +1,23 @@
+/*------------------------------------*\
+    #FOCUS-RING
+\*------------------------------------*/
+
+/// Provides a border and box-shadow for a focusable element. Useful when
+/// creating custom, non-standard form control UIs.
+///
+/// @param {Color} $color [$focus-ring-color] - the color of the applied border
+///
+/// @example scss - Focus Ring mixin
+///     $block-focus-border-color:  $blue;
+///
+///     .block {
+///         &:focus {
+///             @include focus-ring($block-focus-border-color);
+///         }
+///     }
+@mixin focus-ring($color: $focus-ring-color) {
+    border-color: $color;
+    box-shadow: 0 0 0 2px $color;
+    outline: none;
+    transition: border 0.1s, box-shadow 0.1s;
+}

data/app/assets/stylesheets/workarea/storefront/tools/_respond_to.scss

@@ -0,0 +1,31 @@
+/*------------------------------------*\
+    #RESPOND-TO
+\*------------------------------------*/
+
+/// A media query helper mixin which allows contextual control a block of CSS at
+/// a given breakpoint. Available breakpoints are defined in the application's
+/// configuration and are loaded via `settings/_breakpoints.scss.erb`.
+///
+/// @param {Width} $breakpoint - the breakpoint at which the content should
+///     respond
+///
+/// @example scss - Respond To mixin
+///     $medium-breakpoint:  760px;
+///     $wide-breakpoint:    960px;
+///
+///     .block {
+///         width: 100px;
+///
+///         @include respond-to($medium-breakpoint) {
+///             width: 200px;
+///         }
+///
+///         @include respond-to($wide-breakpoint) {
+///             width: 300px;
+///         }
+///     }
+@mixin respond-to($breakpoint) {
+    @media screen and (min-width: $breakpoint), print {
+        @content;
+    }
+}

data/app/assets/stylesheets/workarea/storefront/tools/_svg.scss

@@ -0,0 +1,29 @@
+/*------------------------------------*\
+    #SVG
+\*------------------------------------*/
+
+/// Adds supportive styles for incluing an SVG via CSS.
+///
+/// @param {Path} $image - the partial path of the image, relative to
+///     image directory and engine path's root
+/// @param {Dimension} $width - the width of the UI
+/// @param {Dimension} $height [nil] - the height of the UI, if `nil` `$height`
+///     will default to `$width`
+/// @param {Color} $bg-color [$tranparent]- the background color of the UI
+///
+/// @example scss - SVG mixin
+///     .block {
+///         @include svg(image.svg, 24px);
+///     }
+@mixin svg($image, $width, $height: nil, $bg-color: $transparent) {
+    @if ($height == nil) { $height: $width; }
+    display: block;
+    text-indent: 200%;
+    width: $width;
+    height: $height;
+    background: $bg-color;
+    white-space: nowrap;
+    background-image: image-url("workarea/storefront/#{$image}");
+    background-size: $width $height;
+    overflow: hidden;
+}

data/app/assets/stylesheets/workarea/storefront/trumps/_break_word.scss

@@ -0,0 +1,9 @@
+/*------------------------------------*\
+    #BREAK-WORD
+\*------------------------------------*/
+
+.break-word,
+%break-word {
+    word-break: break-word;
+    hyphens: auto;
+}

data/app/assets/stylesheets/workarea/storefront/trumps/_clearfix.scss

@@ -0,0 +1,13 @@
+/*------------------------------------*\
+    #CLEARFIX
+\*------------------------------------*/
+
+.clearfix,
+%clearfix {
+    &:after {
+        display: table;
+        clear: both;
+        border-spacing: 0;
+        content: '';
+    }
+}

data/app/assets/stylesheets/workarea/storefront/trumps/_hidden.scss

@@ -0,0 +1,71 @@
+/*------------------------------------*\
+    #HIDDEN
+\*------------------------------------*/
+
+/**
+ * Hide a block-level element.
+ */
+.hidden,
+%hidden {
+    display: none;
+}
+
+
+/**
+ * Hide a block-level element for greater-than or equal-to the breakpoint.
+ */
+.hidden--for-medium,
+%hidden--for-medium {
+    display: block;
+
+    @include respond-to($medium-breakpoint) {
+        display: none;
+    }
+}
+
+.hidden--for-wide,
+%hidden--for-wide {
+    display: block;
+
+    @include respond-to($wide-breakpoint) {
+        display: none;
+    }
+}
+
+
+/**
+ * Hide a block-level element for the breakpoint.
+ */
+.hidden--for-small-only,
+%hidden--for-small-only {
+    @include respond-to($medium-breakpoint) {
+        display: block;
+    }
+}
+
+.hidden--for-medium-only,
+%hidden--for-medium-only {
+    display: block;
+
+    @include respond-to($medium-breakpoint) {
+        display: none;
+    }
+
+    @include respond-to($wide-breakpoint) {
+        display: block;
+    }
+}
+
+.hidden--for-wide-only,
+%hidden--for-wide-only {
+    display: block;
+
+    @include respond-to($wide-breakpoint) {
+        display: none;
+    }
+
+    @include respond-to($x-wide-breakpoint) {
+        display: block;
+    }
+}
+

data/app/assets/stylesheets/workarea/storefront/trumps/_hidden_if_js_enabled.scss

@@ -0,0 +1,10 @@
+/*------------------------------------*\
+    #HIDDEN-IF-JS-ENABLED
+\*------------------------------------*/
+
+.hidden-if-js-enabled,
+%hidden-if-js-enabled {
+    .js & {
+        display: none;
+    }
+}

data/app/assets/stylesheets/workarea/storefront/trumps/_image_replacement.scss

@@ -0,0 +1,11 @@
+/*------------------------------------*\
+    #IMAGE-REPLACEMENT
+\*------------------------------------*/
+
+.image-replacement,
+%image-replacement {
+    display: block;
+    text-indent: 200%;
+    white-space: nowrap;
+    overflow: hidden;
+}

data/app/assets/stylesheets/workarea/storefront/trumps/_truncate.scss

@@ -0,0 +1,10 @@
+/*------------------------------------*\
+    #TRUNCATE
+\*------------------------------------*/
+
+.truncate,
+%truncate {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}

data/app/assets/stylesheets/workarea/storefront/trumps/_visible.scss

@@ -0,0 +1,70 @@
+/*------------------------------------*\
+    #VISIBLE
+\*------------------------------------*/
+
+/**
+ * Reveal a block-level element.
+ */
+.visible,
+%visible {
+    display: block;
+}
+
+
+/**
+ * Reveal a block-level element for greater-than or equal-to the breakpoint.
+ */
+.visible--for-medium,
+%visible--for-medium {
+    display: none;
+
+    @include respond-to($medium-breakpoint) {
+        display: block;
+    }
+}
+
+.visible--for-wide,
+%visible--for-wide {
+    display: none;
+
+    @include respond-to($wide-breakpoint) {
+        display: block;
+    }
+}
+
+
+/**
+ * Reveal a block-level element for the breakpoint.
+ */
+.visible--for-small-only,
+%visible--for-small-only {
+    @include respond-to($medium-breakpoint) {
+        display: none;
+    }
+}
+
+.visible--for-medium-only,
+%visible--for-medium-only {
+    display: none;
+
+    @include respond-to($medium-breakpoint) {
+        display: block;
+    }
+
+    @include respond-to($wide-breakpoint) {
+        display: none;
+    }
+}
+
+.visible--for-wide-only,
+%visible--for-wide-only {
+    display: none;
+
+    @include respond-to($wide-breakpoint) {
+        display: block;
+    }
+
+    @include respond-to($x-wide-breakpoint) {
+        display: none;
+    }
+}