forever_style_guide 2.0.3 → 3.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 8011590899598c3d6f3630b4bcfb402425dbcfeb
-  data.tar.gz: a53a1cd5bee2a4d97b1d2e8e0467d4b6068c5c5f
+  metadata.gz: f050cd63739e7e81dbc5e04bad29c51caf224872
+  data.tar.gz: 8414b9ae7315b5574635b367951758ce309cc149
 SHA512:
-  metadata.gz: 4e8bf00b0543431b889514e1d78abf8539eac63115a7ce652db71eed1932c10306692a86111e02d4cdc0d3413c06000e48967a6ceb2a22fe361e749f30b2dc16
-  data.tar.gz: 090e6d267b697719efc83fcd8ffd8f9c24f8999183fa703c7fcefa216176742b710a9bf1a61909b08bd34bba0357b443e23e0c12f458a5e3c3e3641975c19473
+  metadata.gz: 847c64675e86d627ea593822ad9af82d7c21d15417b9a0b3a824752edd2c11c89d14dabac1e5125f50454705321a5ad9d2fffcb6c1746a15c9b0c3721a04c352
+  data.tar.gz: 33347853d1bb99e8adc7153fe184115dc43cbd011ba75947906c4cacb9fe47267d3819861bfd2beaa9ca8c4185c8f751550270486ed8be9b9851964d3fd83dd9

data/app/assets/javascripts/forever_style_guide/account-popover.js

@@ -106,29 +106,3 @@ $(function () {
     placement: 'bottom'
   })
 });
-
-// Compare height of viewport against height of header on popover expansion
-$(function () {
-  $('.account-popover-trigger').on('shown.bs.popover', function () {
-    var windowHeight = $(window).height();
-
-    $(function() {
-      var navHeight = ($('#header-is_fixed').outerHeight());
-      if (navHeight >= windowHeight) {
-        $('body').addClass('body-fixed');
-        $('#header-is_fixed').css('max-height', windowHeight);
-        $('#header-is_fixed').addClass('is_scrolling');
-      };
-    })
-  })
-  // unfix body on popover close
-  $('.account-popover-trigger').on('hidden.bs.popover', function () {
-    $('body').removeClass('body-fixed');
-    $('#header-is_fixed').removeClass('is_scrolling');
-  })
-
-  // hide account popover on toggle nav close
-  $('#header-is_fixed .navbar-collapse').on('hide.bs.collapse', function () {
-    $('.popover.account-popover').popover('hide');
-  })
-});

data/app/assets/javascripts/forever_style_guide/offcanvas.js

@@ -0,0 +1,213 @@
+// https://github.com/iamphill/Bootstrap-Offcanvas
+$(document).on('ready page:load', function() {
+  (function() {
+    var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
+
+    (function($, window) {
+      var Offcanvas, OffcanvasDropdown, OffcanvasTouch, transformCheck;
+      OffcanvasDropdown = (function() {
+        function OffcanvasDropdown(element) {
+          this.element = element;
+          this._clickEvent = __bind(this._clickEvent, this);
+          this.element = $(this.element);
+          this.nav = this.element.closest(".nav");
+          this.dropdown = this.element.parent().find(".dropdown-menu");
+          this.element.on('click', this._clickEvent);
+        }
+      })();
+
+      window.Offcanvas = Offcanvas = (function() {
+        function Offcanvas(element) {
+          var t, target;
+          this.element = element;
+          this.bodyOverflow = __bind(this.bodyOverflow, this);
+          this._sendEventsAfter = __bind(this._sendEventsAfter, this);
+          this._sendEventsBefore = __bind(this._sendEventsBefore, this);
+          this._documentClicked = __bind(this._documentClicked, this);
+          this._close = __bind(this._close, this);
+          this._open = __bind(this._open, this);
+          this._clicked = __bind(this._clicked, this);
+          this._navbarHeight = __bind(this._navbarHeight, this);
+          target = this.element.attr('data-target') ? this.element.attr('data-target') : false;
+          if (target) {
+            this.target = $(target);
+            if (this.target.length && !this.target.hasClass('js-offcanvas-done')) {
+              this.element.addClass('js-offcanvas-has-events');
+              this.location = this.target.hasClass("navbar-offcanvas-right") ? "right" : "left";
+              this.target.addClass(transform ? "offcanvas-transform js-offcanvas-done" : "offcanvas-position js-offcanvas-done");
+              this.target.data('offcanvas', this);
+              this.element.on("click", this._clicked);
+              this.target.on('transitionend', (function(_this) {
+                return function() {
+                  if (_this.target.is(':not(.in)')) {
+                    return _this.target.height('');
+                  }
+                };
+              })(this));
+              $(document).on("click", this._documentClicked);
+              if (this.target.hasClass('navbar-offcanvas-touch')) {
+                t = new OffcanvasTouch(this.element, this.target, this.location, this);
+              }
+              this.target.find(".dropdown-toggle").each(function() {
+                var d;
+              });
+              this.target.on('offcanvas.toggle', (function(_this) {
+                return function(e) {
+                  return _this._clicked(e);
+                };
+              })(this));
+              this.target.on('offcanvas.close', (function(_this) {
+                return function(e) {
+                  return _this._close(e);
+                };
+              })(this));
+              this.target.on('offcanvas.open', (function(_this) {
+                return function(e) {
+                  return _this._open(e);
+                };
+              })(this));
+            }
+          } else {
+            console.warn('Offcanvas: `data-target` attribute must be present.');
+          }
+        }
+
+        Offcanvas.prototype._navbarHeight = function() {
+          if (this.target.is('.in')) {
+            return this.target.height($(window).outerHeight());
+          }
+        };
+
+        Offcanvas.prototype._clicked = function(e) {
+          e.preventDefault();
+          this._sendEventsBefore();
+          $(".navbar-offcanvas").not(this.target).trigger('offcanvas.close');
+          this.target.toggleClass('in');
+          this.element.toggleClass('is-open');
+          this._navbarHeight();
+          return this.bodyOverflow();
+        };
+
+        Offcanvas.prototype._open = function(e) {
+          e.preventDefault();
+          if (this.target.is('.in')) {
+            return;
+          }
+          this._sendEventsBefore();
+          this.target.addClass('in');
+          this.element.addClass('is-open');
+          this._navbarHeight();
+          return this.bodyOverflow();
+        };
+
+        Offcanvas.prototype._close = function(e) {
+          e.preventDefault();
+          if (this.target.is(':not(.in)')) {
+            return;
+          }
+          this._sendEventsBefore();
+          this.target.removeClass('in');
+          this.element.removeClass('is-open');
+          this._navbarHeight();
+          return this.bodyOverflow();
+        };
+
+        Offcanvas.prototype._documentClicked = function(e) {
+          var clickedEl;
+          clickedEl = $(e.target);
+          if (!clickedEl.hasClass('offcanvas-toggle') && clickedEl.parents('.offcanvas-toggle').length === 0 && clickedEl.parents('.navbar-offcanvas').length === 0 && !clickedEl.hasClass('navbar-offcanvas')) {
+            if (this.target.hasClass('in')) {
+              e.preventDefault();
+              this._sendEventsBefore();
+              this.target.removeClass('in');
+              this.element.removeClass('is-open');
+              this._navbarHeight();
+              return this.bodyOverflow();
+            }
+          }
+        };
+
+        Offcanvas.prototype._sendEventsBefore = function() {
+          if (this.target.hasClass('in')) {
+            return this.target.trigger('show.bs.offcanvas');
+          } else {
+            return this.target.trigger('hide.bs.offcanvas');
+          }
+        };
+
+        Offcanvas.prototype._sendEventsAfter = function() {
+          if (this.target.hasClass('in')) {
+            return this.target.trigger('shown.bs.offcanvas');
+          } else {
+            return this.target.trigger('hidden.bs.offcanvas');
+          }
+        };
+
+        Offcanvas.prototype.bodyOverflow = function() {
+          if (this.target.is('.in')) {
+            $('body').addClass('offcanvas-stop-scrolling');
+          } else {
+            $('body').removeClass('offcanvas-stop-scrolling');
+          }
+          return this._sendEventsAfter();
+        };
+
+        return Offcanvas;
+
+      })();
+      transformCheck = (function(_this) {
+        return function() {
+          var asSupport, el, regex, translate3D;
+          el = document.createElement('div');
+          translate3D = "translate3d(0px, 0px, 0px)";
+          regex = /translate3d\(0px, 0px, 0px\)/g;
+          el.style.cssText = "-webkit-transform: " + translate3D + "; -moz-transform: " + translate3D + "; -o-transform: " + translate3D + "; transform: " + translate3D;
+          asSupport = el.style.cssText.match(regex);
+          return _this.transform = asSupport.length != null;
+        };
+      })(this);
+      return $(function() {
+        transformCheck();
+        $('[data-toggle="offcanvas"]').each(function() {
+          var oc;
+          return oc = new Offcanvas($(this));
+        });
+        $(window).on('resize', function() {
+          return $('.navbar-offcanvas.in').each(function() {
+            return $(this).height('').removeClass('in');
+          });
+        });
+        return $('.offcanvas-toggle').each(function() {
+          return $(this).on('click', function(e) {
+            var el, selector;
+            if (!$(this).hasClass('js-offcanvas-has-events')) {
+              selector = $(this).attr('data-target');
+              el = $(selector);
+              if (el) {
+                el.height('');
+                el.removeClass('in');
+                return $('body').css({
+                  overflow: '',
+                  position: ''
+                });
+              }
+            }
+          });
+        });
+      });
+    })(window.jQuery, window);
+  }).call(this);
+
+  $('#js-close-main-nav').on('click', function () {
+    $('#js-main-nav-offcanvas').toggleClass('in');
+  });
+
+  $('.navbar-offcanvas .dropdown').on('click', function () {
+    if ($(this).hasClass('open')) {
+      $('.navbar-account-signed_out_btn').addClass('is_fixed_bottom');
+    }
+    else {
+      $('.navbar-account-signed_out_btn').removeClass('is_fixed_bottom');
+    }
+  });
+})

data/app/assets/stylesheets/forever_style_guide/base/_bootstrap_reset.scss

@@ -1,3 +1,5 @@
+$header_height: 50px;
+
 html, body {
   width: 100%;
   font-family: $font-face-regular;
@@ -5,6 +7,9 @@ html, body {
   overflow-y: auto;
 }
 
+.style-guide {
+  padding-top: $header_height;
+}
 .nav-pills > li > a {
   border-radius: 0;
 }

data/app/assets/stylesheets/forever_style_guide/globals/_breakpoints.scss

@@ -45,6 +45,6 @@ $screen-xl-max:              ($screen-xxl-min - 1) !global;
 
 
 //** Point at which the navbar becomes uncollapsed.
-$grid-float-breakpoint: $screen-md !global;
+$grid-float-breakpoint: 920px!global;
 //** Point at which the navbar begins collapsing.
 $grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !global;

data/app/assets/stylesheets/forever_style_guide/globals/_effects.scss

@@ -18,6 +18,12 @@
   transition: $transition-properties;
 }
 
+@mixin transform($transform-properties...) {
+  -ms-transform: $transform-properties; /* IE 9 */
+  -webkit-transform: $transform-properties; /* Chrome, Safari, Opera */
+  transform: $transform-properties;
+}
+
 @mixin hero-gradient($opacity, $distance_as_percent) {
   &:before {
     content: " ";

data/app/assets/stylesheets/forever_style_guide/globals/_mixins.scss

@@ -1,3 +1,6 @@
+$header_active_border_height: 2px;
+$color-nav-hover: color('secondary');
+
 @mixin clearfix {
   zoom: 1;
   &:before,

data/app/assets/stylesheets/forever_style_guide/modules/_all.scss

@@ -1,29 +1,29 @@
-@import "nav";
-@import "nav-fixed";
-@import "navbar";
-@import "promo_banner";
-@import "signin";
-@import "footer";
-@import "button";
-@import "list";
-@import "list-toggle";
-@import "input_groups";
 @import "avatar";
-@import "fa-feature_bullet";
-@import "popover";
-@import "switch";
-@import "select";
+@import "button";
 @import "checkbox";
+@import "dropdown-menu";
+@import "fa-feature_bullet";
+@import "footer";
 @import "hero";
 @import "hero-block";
-@import "hero-product";
 @import "hero-blur";
+@import "hero-product";
+@import "hero_simple";
+@import "input_groups";
+@import "list";
+@import "list-toggle";
+@import "nav";
+@import "nav-dropdowns";
+@import "nav-dropdowns-account";
+@import "nav-dropdowns-ambassador";
+@import "nav-fixed";
+@import "nav-icons";
+@import "nav-item-list";
+@import "nav-offcanvas";
+@import "popover";
 @import "progress";
-@import "dropdown-menu";
-@import "dropdown-menu-nav";
-@import "dropdown-menu-product";
-@import "dropdown-menu-product-main";
-@import "dropdown-menu-more";
-@import "account-popover";
+@import "promo_banner";
+@import "select";
 @import "shame";
-@import "hero_simple";
+@import "signin";
+@import "switch";

data/app/assets/stylesheets/forever_style_guide/modules/_button.scss

@@ -54,13 +54,8 @@
   @each $id, $color in $core_colors {
     @at-root #{&}.btn-#{$id} {
       @include btn-color(#{$id});
-
       &.btn-inverse {
         @include btn-color(#{$id}, true);
-
-        &.btn-inverse-hero {
-          border-color: color('white');
-        }
       }
     }
   }

data/app/assets/stylesheets/forever_style_guide/modules/_nav-dropdowns-account.scss

@@ -0,0 +1,58 @@
+.dropdown-menu-account {
+  width: 100%;
+  right: 0;
+  border-bottom-right-radius: $border-radius-large;
+  border-bottom-left-radius: $border-radius-large;
+
+  .progress {
+    margin-bottom: 10px;
+  }
+  @media (max-width: $grid-float-breakpoint) {
+    @include nav-border(bottom);
+  }
+  @media (min-width: $grid-float-breakpoint) {
+    width: $nav-icon-width * 4;
+  }
+}
+.dropdown-menu-account-item {
+  display: block;
+  overflow: hidden;
+
+  @media (min-width: $grid-float-breakpoint) {
+    padding-top: 5px;
+    padding-bottom: 5px;
+  }
+}
+.dropdown-menu-account-divider {
+  margin-top: 5px;
+  margin-bottom: 10px;
+  @include nav-border(bottom);
+
+  @media (max-width: $grid-float-breakpoint) {
+    border-color: color('gray-600');
+  }
+}
+.dropdown-menu-account-user {
+  overflow: hidden;
+}
+.dropdown-menu-account-user-intro {
+  margin-top: $padding-small-vertical;
+  margin-bottom: 0;
+  font-size: $font-size-100;
+}
+.dropdown-menu-account-avatar {
+  margin-right: 10px;
+  border: 0;
+  box-shadow: none;
+
+  @media (max-width: $grid-float-breakpoint) {
+    height: 40px; // avatar-xs
+    width: 40px;
+    margin-top: $padding-small-vertical;
+  }
+}
+.dropdown-menu-account-storage {
+  @media (max-width: $grid-float-breakpoint) {
+    font-size: $font-size-default;
+  }
+}

data/app/assets/stylesheets/forever_style_guide/modules/_nav-dropdowns-ambassador.scss

@@ -0,0 +1,93 @@
+.dropdown-ambassador {
+  .dropdown-toggle {
+    padding: 0 10px;
+
+    @media (max-width: $grid-float-breakpoint) {
+      padding: 0 0 0 $offcanvas-padding !important; // overriding .navbar .nav.navbar-nav > li > a
+    }
+  }
+  .fa-chevron-down {
+    position: relative;
+    margin-left: 10px;
+    top: -10px;
+
+    @media (max-width: $grid-float-breakpoint) {
+      top: $offcanvas-padding;
+    }
+  }
+  &:last-child {
+    @media (max-width: $grid-float-breakpoint) {
+      @include nav-border(bottom);
+      border-color: color('gray-600');
+    }
+  }
+  .dropdown-ambassador-container {
+    @media (max-width: $grid-float-breakpoint) {
+      width: $offcanvas-width - $offcanvas-padding;
+      padding-left: 15px;
+    }
+  }
+  .dropdown-menu-nav {
+    @media (max-width: $grid-float-breakpoint) {
+      box-shadow: none;
+    }
+  }
+  .btn.btn-ambassador.btn-lg {
+    //preferring redunant button styling to redundant mobile markup for this one instance
+    @media (max-width: $grid-float-breakpoint) {
+      display: block;
+      height: $btn-size;
+      padding: $padding-default-vertical $btn-padding-default-horizontal;
+      font-size: $font-size-300;
+      line-height: 1.3;
+    }
+  }
+}
+.dropdown-ambassador-intro_text {
+  position: relative;
+
+  @media (min-width: $grid-float-breakpoint) {
+    top: 5px;
+  }
+}
+.dropdown-ambassador-primary_text {
+  margin-right: 10px;
+}
+.dropdown-ambassador-edit_btn {
+  display: block;
+  margin-top: -30px;
+}
+.dropdown-ambassador-basic_info {
+  overflow: hidden;
+
+  .dropdown-ambassador-name{
+    margin-top: 2px;
+    margin-bottom: 0;
+    font-size: $font-size-500;
+  }
+  .dropdown-ambassador-rank {
+    margin-bottom: 0;
+  }
+  .dropdown-ambassador-city {
+    margin-top: -5px;
+  }
+}
+.dropdown-ambassador-contact_btn {
+  max-width: $offcanvas-width;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  @media (min-width: $grid-float-breakpoint) and (max-width: $screen-md-max) {
+    max-width: 180px;
+  }
+
+  &:hover,
+  &:active,
+  &:focus {
+    color: color('secondary')!important;
+    text-decoration: underline!important;
+  }
+  .btn-action-icon {
+    margin-right: 8px;
+  }
+}