active_frontend 9.1.1 → 10.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 7affb08bc0ee07375434c51ad3d80c086143e908
-  data.tar.gz: 513abd565168d1ba7b43703f641703caa80bc8ca
+  metadata.gz: 027e24230d769eb1a38a760a606bbdc00831ea46
+  data.tar.gz: 27b83455f4efe1120026039df98dbaa072604276
 SHA512:
-  metadata.gz: 5b76d2e29ef5ab8a035ecc8733d4fc79a2b9a9522ed5f0151b4bda0661a6bc698eb36277b1214a32b368e97229508b78b893110c3aba5f6059418e492984bf63
-  data.tar.gz: a5b821c3543f94b55514e8a42e8ebb5e51b31d78f6394995753679e1f4b27b52d21d91f36dd4c1e267c098e2989c0f5d237ede0fe188026654fec13e04ce73e5
+  metadata.gz: c214e5abe6781ccfc55858d0c828eb77ba1669a5cbd6e6aa7add0cc99e4971dba5c5d82a0723bbd9c095199e16cb4a1880ee31116627df4e308eb7236bf5b34f
+  data.tar.gz: 3c0aa9212d4018350f29ab3d52bd9c50af8bb082bf181dc077f872e2ebf2ee8b38b91bdfc43123fca272b753dcf90ceef595e6ee98b25d6ae5e4103baa649161

data/lib/active_frontend/version.rb

@@ -1,3 +1,3 @@
 module ActiveFrontend
-  VERSION = "9.1.1"
+  VERSION = "10.0.0"
 end

data/vendor/assets/javascripts/map.js

@@ -4,10 +4,12 @@
     module.exports = factory();
   }
   else if(typeof define === 'function' && define.amd) {
-    define('GMaps', [], factory);
+    define(['jquery', 'googlemaps!'], factory);
+  }
+  else {
+    root.GMaps = factory();
   }
 
-  root.GMaps = factory();
 
 }(this, function() {
 
@@ -163,6 +165,10 @@ var GMaps = (function(global) {
     options.zoom = options.zoom || 15;
     options.mapType = options.mapType || 'roadmap';
 
+    var valueOrDefault = function(value, defaultValue) {
+      return value === undefined ? defaultValue : value;
+    };
+
     var self = this,
         i,
         events_that_hide_context_menu = [
@@ -176,18 +182,18 @@ var GMaps = (function(global) {
         markerClustererFunction = options.markerClusterer,
         mapType = google.maps.MapTypeId[options.mapType.toUpperCase()],
         map_center = new google.maps.LatLng(options.lat, options.lng),
-        zoomControl = options.zoomControl || true,
+        zoomControl = valueOrDefault(options.zoomControl, true),
         zoomControlOpt = options.zoomControlOpt || {
           style: 'DEFAULT',
           position: 'TOP_LEFT'
         },
         zoomControlStyle = zoomControlOpt.style || 'DEFAULT',
         zoomControlPosition = zoomControlOpt.position || 'TOP_LEFT',
-        panControl = options.panControl || true,
-        mapTypeControl = options.mapTypeControl || true,
-        scaleControl = options.scaleControl || true,
-        streetViewControl = options.streetViewControl || true,
-        overviewMapControl = overviewMapControl || true,
+        panControl = valueOrDefault(options.panControl, true),
+        mapTypeControl = valueOrDefault(options.mapTypeControl, true),
+        scaleControl = valueOrDefault(options.scaleControl, true),
+        streetViewControl = valueOrDefault(options.streetViewControl, true),
+        overviewMapControl = valueOrDefault(overviewMapControl, true),
         map_options = {},
         map_base_options = {
           zoom: this.zoom,
@@ -311,7 +317,7 @@ var GMaps = (function(global) {
       context_menu_element.style.left = left + "px";
       context_menu_element.style.top = top + "px";
 
-      context_menu_element.style.display = 'block';
+      // context_menu_element.style.display = 'block';
     };
 
     this.buildContextMenu = function(control, e) {
@@ -333,6 +339,12 @@ var GMaps = (function(global) {
       else {
         buildContextMenuHTML(control, e);
       }
+
+      var context_menu_element = getElementById('gmaps_context_menu');
+
+      setTimeout(function() {
+        context_menu_element.style.display = 'block';
+      }, 0);
     };
 
     this.setContextMenu = function(options) {
@@ -361,9 +373,11 @@ var GMaps = (function(global) {
       ul.style.padding = '8px';
       ul.style.boxShadow = '2px 2px 6px #ccc';
 
-      doc.body.appendChild(ul);
+      if (!getElementById('gmaps_context_menu')) {
+        doc.body.appendChild(ul);
+      }
 
-      var context_menu_element = getElementById('gmaps_context_menu')
+      var context_menu_element = getElementById('gmaps_context_menu');
 
       google.maps.event.addDomListener(context_menu_element, 'mouseout', function(ev) {
         if (!ev.relatedTarget || !this.contains(ev.relatedTarget)) {
@@ -519,6 +533,10 @@ GMaps.prototype.createControl = function(options) {
     control.id = options.id;
   }
 
+  if (options.title) {
+    control.title = options.title;
+  }
+
   if (options.classes) {
     control.className = options.classes;
   }

data/vendor/assets/javascripts/slider.js

@@ -271,6 +271,22 @@
 
     function createNewSlider(element, options) {
 
+      /*
+        The internal state object is used to store data about the current 'state' of slider.
+
+        This includes values such as the `value`, `enabled`, etc...
+      */
+      this._state = {
+        value: null,
+        enabled: null,
+        offset: null,
+        size: null,
+        percentage: null,
+        inDrag: null,
+        over: null
+      };
+
+
       if(typeof element === "string") {
         this.element = document.querySelector(element);
       } else if(element instanceof HTMLElement) {
@@ -535,9 +551,14 @@
 
       if (Array.isArray(this.options.value)) {
         this.options.range = true;
-      } else if (this.options.range) {
+        this._state.value = this.options.value;
+      }
+      else if (this.options.range) {
         // User wants a range, but value is not an array
-        this.options.value = [this.options.value, this.options.max];
+        this._state.value = [this.options.value, this.options.max];
+      }
+      else {
+        this._state.value = this.options.value;
       }
 
       this.trackLow = sliderTrackLow || this.trackLow;
@@ -574,9 +595,9 @@
         }
       }
 
-      this.offset = this._offset(this.sliderElem);
-      this.size = this.sliderElem[this.sizePos];
-      this.setValue(this.options.value);
+      this._state.offset = this._offset(this.sliderElem);
+      this._state.size = this.sliderElem[this.sizePos];
+      this.setValue(this._state.value);
 
       /******************************************
 
@@ -604,10 +625,12 @@
         this._addClass(this.tooltip, 'hide');
         this._addClass(this.tooltip_min, 'hide');
         this._addClass(this.tooltip_max, 'hide');
-      } else if(this.options.tooltip === 'always') {
+      }
+      else if(this.options.tooltip === 'always') {
         this._showTooltip();
         this._alwaysShowTooltip = true;
-      } else {
+      }
+      else {
         this.showTooltip = this._showTooltip.bind(this);
         this.hideTooltip = this._hideTooltip.bind(this);
 
@@ -675,19 +698,17 @@
         tooltip_position: null
       },
 
-      over: false,
-
-      inDrag: false,
-
       getElement: function() {
         return this.sliderElem;
       },
 
       getValue: function() {
         if (this.options.range) {
-          return this.options.value;
+          return this._state.value;
+        }
+        else {
+          return this._state.value[0];
         }
-        return this.options.value[0];
       },
 
       setValue: function(val, triggerSlideEvent, triggerChangeEvent) {
@@ -695,38 +716,39 @@
           val = 0;
         }
         var oldValue = this.getValue();
-        this.options.value = this._validateInputValue(val);
+        this._state.value = this._validateInputValue(val);
         var applyPrecision = this._applyPrecision.bind(this);
 
         if (this.options.range) {
-          this.options.value[0] = applyPrecision(this.options.value[0]);
-          this.options.value[1] = applyPrecision(this.options.value[1]);
+          this._state.value[0] = applyPrecision(this._state.value[0]);
+          this._state.value[1] = applyPrecision(this._state.value[1]);
 
-          this.options.value[0] = Math.max(this.options.min, Math.min(this.options.max, this.options.value[0]));
-          this.options.value[1] = Math.max(this.options.min, Math.min(this.options.max, this.options.value[1]));
-        } else {
-          this.options.value = applyPrecision(this.options.value);
-          this.options.value = [ Math.max(this.options.min, Math.min(this.options.max, this.options.value))];
+          this._state.value[0] = Math.max(this.options.min, Math.min(this.options.max, this._state.value[0]));
+          this._state.value[1] = Math.max(this.options.min, Math.min(this.options.max, this._state.value[1]));
+        }
+        else {
+          this._state.value = applyPrecision(this._state.value);
+          this._state.value = [ Math.max(this.options.min, Math.min(this.options.max, this._state.value))];
           this._addClass(this.handle2, 'hide');
           if (this.options.selection === 'after') {
-            this.options.value[1] = this.options.max;
+            this._state.value[1] = this.options.max;
           } else {
-            this.options.value[1] = this.options.min;
+            this._state.value[1] = this.options.min;
           }
         }
 
         if (this.options.max > this.options.min) {
-          this.percentage = [
-            this._toPercentage(this.options.value[0]),
-            this._toPercentage(this.options.value[1]),
+          this._state.percentage = [
+            this._toPercentage(this._state.value[0]),
+            this._toPercentage(this._state.value[1]),
             this.options.step * 100 / (this.options.max - this.options.min)
           ];
         } else {
-          this.percentage = [0, 0, 100];
+          this._state.percentage = [0, 0, 100];
         }
 
         this._layout();
-        var newValue = this.options.range ? this.options.value : this.options.value[0];
+        var newValue = this.options.range ? this._state.value : this._state.value[0];
 
         if(triggerSlideEvent === true) {
           this._trigger('slide', newValue);
@@ -765,7 +787,7 @@
       },
 
       disable: function() {
-        this.options.enabled = false;
+        this._state.enabled = false;
         this.handle1.removeAttribute("tabindex");
         this.handle2.removeAttribute("tabindex");
         this._addClass(this.sliderElem, 'slider-disabled');
@@ -775,7 +797,7 @@
       },
 
       enable: function() {
-        this.options.enabled = true;
+        this._state.enabled = true;
         this.handle1.setAttribute("tabindex", 0);
         this.handle2.setAttribute("tabindex", 0);
         this._removeClass(this.sliderElem, 'slider-disabled');
@@ -785,7 +807,7 @@
       },
 
       toggle: function() {
-        if(this.options.enabled) {
+        if(this._state.enabled) {
           this.disable();
         } else {
           this.enable();
@@ -794,7 +816,7 @@
       },
 
       isEnabled: function() {
-        return this.options.enabled;
+        return this._state.enabled;
       },
 
       on: function(evt, callback) {
@@ -892,31 +914,32 @@
       },
       _showTooltip: function() {
         if (this.options.tooltip_split === false ){
-                this._addClass(this.tooltip, 'in');
-                this.tooltip_min.style.display = 'none';
-                this.tooltip_max.style.display = 'none';
-            } else {
-                this._addClass(this.tooltip_min, 'in');
-                this._addClass(this.tooltip_max, 'in');
-                this.tooltip.style.display = 'none';
-            }
-        this.over = true;
+          this._addClass(this.tooltip, 'in');
+          this.tooltip_min.style.display = 'none';
+          this.tooltip_max.style.display = 'none';
+        } else {
+          this._addClass(this.tooltip_min, 'in');
+          this._addClass(this.tooltip_max, 'in');
+          this.tooltip.style.display = 'none';
+        }
+        this._state.over = true;
       },
       _hideTooltip: function() {
-        if (this.inDrag === false && this.alwaysShowTooltip !== true) {
+        if (this._state.inDrag === false && this.alwaysShowTooltip !== true) {
           this._removeClass(this.tooltip, 'in');
           this._removeClass(this.tooltip_min, 'in');
           this._removeClass(this.tooltip_max, 'in');
         }
-        this.over = false;
+        this._state.over = false;
       },
       _layout: function() {
         var positionPercentages;
 
         if(this.options.reversed) {
-          positionPercentages = [ 100 - this.percentage[0], this.options.range ? 100 - this.percentage[1] : this.percentage[1]];
-        } else {
-          positionPercentages = [ this.percentage[0], this.percentage[1] ];
+          positionPercentages = [ 100 - this._state.percentage[0], this.options.range ? 100 - this._state.percentage[1] : this._state.percentage[1]];
+        }
+        else {
+          positionPercentages = [ this._state.percentage[0], this._state.percentage[1] ];
         }
 
         this.handle1.style[this.stylePos] = positionPercentages[0]+'%';
@@ -929,7 +952,7 @@
 
           var styleSize = this.options.orientation === 'vertical' ? 'height' : 'width';
           var styleMargin = this.options.orientation === 'vertical' ? 'marginTop' : 'marginLeft';
-          var labelSize = this.size / (this.options.ticks.length - 1);
+          var labelSize = this._state.size / (this.options.ticks.length - 1);
 
           if (this.tickLabelContainer) {
             var extraMargin = 0;
@@ -988,7 +1011,8 @@
 
           this.trackHigh.style.bottom = '0';
           this.trackHigh.style.height = (100 - Math.min(positionPercentages[0], positionPercentages[1]) - Math.abs(positionPercentages[0] - positionPercentages[1])) +'%';
-        } else {
+        }
+        else {
           this.trackLow.style.left = '0';
           this.trackLow.style.width = Math.min(positionPercentages[0], positionPercentages[1]) +'%';
 
@@ -1015,7 +1039,7 @@
         var formattedTooltipVal;
 
         if (this.options.range) {
-          formattedTooltipVal = this.options.formatter(this.options.value);
+          formattedTooltipVal = this.options.formatter(this._state.value);
           this._setText(this.tooltipInner, formattedTooltipVal);
           this.tooltip.style[this.stylePos] = (positionPercentages[1] + positionPercentages[0])/2 + '%';
 
@@ -1031,10 +1055,10 @@
             this._css(this.tooltip, 'margin-left', -this.tooltip.offsetWidth / 2 + 'px');
           }
 
-          var innerTooltipMinText = this.options.formatter(this.options.value[0]);
+          var innerTooltipMinText = this.options.formatter(this._state.value[0]);
           this._setText(this.tooltipInner_min, innerTooltipMinText);
 
-          var innerTooltipMaxText = this.options.formatter(this.options.value[1]);
+          var innerTooltipMaxText = this.options.formatter(this._state.value[1]);
           this._setText(this.tooltipInner_max, innerTooltipMaxText);
 
           this.tooltip_min.style[this.stylePos] = positionPercentages[0] + '%';
@@ -1053,7 +1077,7 @@
             this._css(this.tooltip_max, 'margin-left', -this.tooltip_max.offsetWidth / 2 + 'px');
           }
         } else {
-          formattedTooltipVal = this.options.formatter(this.options.value[0]);
+          formattedTooltipVal = this.options.formatter(this._state.value[0]);
           this._setText(this.tooltipInner, formattedTooltipVal);
 
           this.tooltip.style[this.stylePos] = positionPercentages[0] + '%';
@@ -1072,24 +1096,24 @@
         }
       },
       _mousedown: function(ev) {
-        if(!this.options.enabled) {
+        if(!this._state.enabled) {
           return false;
         }
 
-        this.offset = this._offset(this.sliderElem);
-        this.size = this.sliderElem[this.sizePos];
+        this._state.offset = this._offset(this.sliderElem);
+        this._state.size = this.sliderElem[this.sizePos];
 
         var percentage = this._getPercentage(ev);
 
         if (this.options.range) {
-          var diff1 = Math.abs(this.percentage[0] - percentage);
-          var diff2 = Math.abs(this.percentage[1] - percentage);
-          this.dragged = (diff1 < diff2) ? 0 : 1;
+          var diff1 = Math.abs(this._state.percentage[0] - percentage);
+          var diff2 = Math.abs(this._state.percentage[1] - percentage);
+          this._state.dragged = (diff1 < diff2) ? 0 : 1;
         } else {
-          this.dragged = 0;
+          this._state.dragged = 0;
         }
 
-        this.percentage[this.dragged] = percentage;
+        this._state.percentage[this._state.dragged] = percentage;
         this._layout();
 
         if (this.touchCapable) {
@@ -1116,7 +1140,7 @@
         document.addEventListener("mousemove", this.mousemove, false);
         document.addEventListener("mouseup", this.mouseup, false);
 
-        this.inDrag = true;
+        this._state.inDrag = true;
         var newValue = this._calculateValue();
 
         this._trigger('slideStart', newValue);
@@ -1127,7 +1151,7 @@
         this._pauseEvent(ev);
 
         if (this.options.focus) {
-          this._triggerFocusOnHandle(this.dragged);
+          this._triggerFocusOnHandle(this._state.dragged);
         }
 
         return true;
@@ -1141,7 +1165,7 @@
         }
       },
       _keydown: function(handleIdx, ev) {
-        if(!this.options.enabled) {
+        if(!this._state.enabled) {
           return false;
         }
 
@@ -1170,10 +1194,10 @@
           }
         }
 
-        var val = this.options.value[handleIdx] + dir * this.options.step;
+        var val = this._state.value[handleIdx] + dir * this.options.step;
         if (this.options.range) {
-          val = [ (!handleIdx) ? val : this.options.value[0],
-                ( handleIdx) ? val : this.options.value[1]];
+          val = [ (!handleIdx) ? val : this._state.value[0],
+                ( handleIdx) ? val : this._state.value[1]];
         }
 
         this._trigger('slideStart', val);
@@ -1199,13 +1223,13 @@
           ev.returnValue=false;
       },
       _mousemove: function(ev) {
-        if(!this.options.enabled) {
+        if(!this._state.enabled) {
           return false;
         }
 
         var percentage = this._getPercentage(ev);
         this._adjustPercentageForRangeSliders(percentage);
-        this.percentage[this.dragged] =  percentage;
+        this._state.percentage[this._state.dragged] = percentage;
         this._layout();
 
         var val = this._calculateValue(true);
@@ -1218,17 +1242,17 @@
           var precision = this._getNumDigitsAfterDecimalPlace(percentage);
           precision = precision ? precision - 1 : 0;
           var percentageWithAdjustedPrecision = this._applyToFixedAndParseFloat(percentage, precision);
-          if (this.dragged === 0 && this._applyToFixedAndParseFloat(this.percentage[1], precision) < percentageWithAdjustedPrecision) {
-            this.percentage[0] = this.percentage[1];
-            this.dragged = 1;
-          } else if (this.dragged === 1 && this._applyToFixedAndParseFloat(this.percentage[0], precision) > percentageWithAdjustedPrecision) {
-            this.percentage[1] = this.percentage[0];
-            this.dragged = 0;
+          if (this._state.dragged === 0 && this._applyToFixedAndParseFloat(this._state.percentage[1], precision) < percentageWithAdjustedPrecision) {
+            this._state.percentage[0] = this._state.percentage[1];
+            this._state.dragged = 1;
+          } else if (this._state.dragged === 1 && this._applyToFixedAndParseFloat(this._state.percentage[0], precision) > percentageWithAdjustedPrecision) {
+            this._state.percentage[1] = this._state.percentage[0];
+            this._state.dragged = 0;
           }
         }
       },
       _mouseup: function() {
-        if(!this.options.enabled) {
+        if(!this._state.enabled) {
           return false;
         }
         if (this.touchCapable) {
@@ -1240,8 +1264,8 @@
                 document.removeEventListener("mousemove", this.mousemove, false);
                 document.removeEventListener("mouseup", this.mouseup, false);
 
-        this.inDrag = false;
-        if (this.over === false) {
+        this._state.inDrag = false;
+        if (this._state.over === false) {
           this._hideTooltip();
         }
         var val = this._calculateValue(true);
@@ -1256,16 +1280,16 @@
         var val;
         if (this.options.range) {
           val = [this.options.min,this.options.max];
-              if (this.percentage[0] !== 0){
-                  val[0] = this._toValue(this.percentage[0]);
+              if (this._state.percentage[0] !== 0){
+                  val[0] = this._toValue(this._state.percentage[0]);
                   val[0] = this._applyPrecision(val[0]);
               }
-              if (this.percentage[1] !== 100){
-                  val[1] = this._toValue(this.percentage[1]);
+              if (this._state.percentage[1] !== 100){
+                  val[1] = this._toValue(this._state.percentage[1]);
                   val[1] = this._applyPrecision(val[1]);
               }
         } else {
-                val = this._toValue(this.percentage[0]);
+                val = this._toValue(this._state.percentage[0]);
           val = parseFloat(val);
           val = this._applyPrecision(val);
         }
@@ -1308,11 +1332,11 @@
         }
 
         var eventPosition = ev[this.mousePos];
-        var sliderOffset = this.offset[this.stylePos];
+        var sliderOffset = this._state.offset[this.stylePos];
         var distanceToSlide = eventPosition - sliderOffset;
         // Calculate what percent of the length the slider handle has slid
-        var percentage = (distanceToSlide / this.size) * 100;
-        percentage = Math.round(percentage / this.percentage[2]) * this.percentage[2];
+        var percentage = (distanceToSlide / this._state.size) * 100;
+        percentage = Math.round(percentage / this._state.percentage[2]) * this._state.percentage[2];
         if (this.options.reversed) {
           percentage = 100 - percentage;
         }
@@ -1339,10 +1363,9 @@
         }
       },
       _setDataVal: function(val) {
-        var value = "value: '" + val + "'";
-        this.element.setAttribute('data', value);
+        this.element.setAttribute('data-value', val);
         this.element.setAttribute('value', val);
-                this.element.value = val;
+        this.element.value = val;
       },
       _trigger: function(evt, val) {
         val = (val || val === 0) ? val : undefined;
@@ -1442,10 +1465,10 @@
       _setTooltipPosition: function(){
         var tooltips = [this.tooltip, this.tooltip_min, this.tooltip_max];
         if (this.options.orientation === 'vertical'){
-          this.options.tooltip_position = this.options.tooltip_position || 'right';
-          var oppositeSide = this.options.tooltip_position === 'left' ? 'right' : 'left';
+          var tooltipPos = this.options.tooltip_position || 'right';
+          var oppositeSide = (tooltipPos === 'left') ? 'right' : 'left';
           tooltips.forEach(function(tooltip){
-            this._addClass(tooltip, this.options.tooltip_position);
+            this._addClass(tooltip, tooltipPos);
             tooltip.style[oppositeSide] = '100%';
           }.bind(this));
         } else if(this.options.tooltip_position === 'bottom') {

data/vendor/assets/stylesheets/_breadcrumb.scss

@@ -1,6 +1,7 @@
 /* Table of Contents
 ==================================================
-# Breadcrumb */
+# Breadcrumb
+# Breadcrumb Alternate */
 
 /* # Breadcrumb
 ================================================== */
@@ -17,9 +18,75 @@
 .breadcrumb > li > a { color: $color-black; }
 .breadcrumb > li > a:hover,
 .breadcrumb > li > a:active,
-.breadcrumb > li > a:focus { color: $color-primary; }
+.breadcrumb > li > a:focus,
+.breadcrumb > .active { color: $color-primary; }
 .breadcrumb > li > .divider {
   color: $color-black;
   padding: 0 5px;
 }
-.breadcrumb > .active { color: $color-primary; }
+
+/* # Breadcrumb Alternate
+================================================== */
+.breadcrumb-flow {
+  counter-reset: wizard;
+  list-style: none;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  position: relative;
+}
+.breadcrumb-flow > li {
+  float: left;
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 1px;
+  line-height: 16px;
+  position: relative;
+  text-align: center;
+  text-transform: uppercase;
+  width: 25%;
+}
+.breadcrumb-flow > li,
+.breadcrumb-flow > li > a { color: $color-black; }
+.breadcrumb-flow > li.active ~ li,
+.breadcrumb-flow > li.active ~ li > a { color: $color-haze-dark; }
+.breadcrumb-flow > li.active,
+.breadcrumb-flow > li > a:hover,
+.breadcrumb-flow > li > a:active,
+.breadcrumb-flow > li > a:focus,
+.breadcrumb-flow > li.active > a,
+.breadcrumb-flow > li.active ~ li > a:hover,
+.breadcrumb-flow > li.active ~ li > a:active,
+.breadcrumb-flow > li.active ~ li > a:focus { color: $color-primary; }
+.breadcrumb-flow > li:before {
+  background: $color-primary;
+  border: 5px solid $color-primary;
+  border-radius: 500px;
+  content: "";
+  counter-increment: wizard;
+  display: block;
+  height: 22px;
+  left: 50%;
+  margin: 0 0 10px -14px;
+  position: relative;
+  text-align: center;
+  width: 22px;
+  z-index: 1;
+}
+.breadcrumb-flow > li.active:before { background: $color-white; }
+.breadcrumb-flow > li.active ~ li:before {
+  background: $color-white;
+  border-color: $color-haze-light;
+}
+.breadcrumb-flow > li + li:after {
+  background: $color-primary;
+  content: "";
+  display: block;
+  height: 5px;
+  left: -50%;
+  position: absolute;
+  top: 14px;
+  width: 100%;
+  z-index: 0;
+}
+.breadcrumb-flow > li.active ~ li:after { background: $color-haze-light; }

data/vendor/assets/stylesheets/_button.scss

@@ -381,8 +381,8 @@ input.btn-block {
 /* # Links
 ================================================== */
 .btn-link {
-  background: transparent;
-  border-color: transparent;
+  background: $color-transparent;
+  border-color: $color-transparent;
   border-radius: 0;
   color: $color-gray;
   padding: 0;
@@ -395,8 +395,8 @@ input.btn-block {
 .btn-link[disabled]:hover,
 .btn-link[disabled]:active,
 .btn-link[disabled]:focus, {
-  background: transparent;
-  border-color: transparent;
+  background: $color-transparent;
+  border-color: $color-transparent;
   color: $color-black;
 }
 
@@ -440,7 +440,7 @@ input.btn-block {
 .btn-outline[disabled]:hover,
 .btn-outline[disabled]:active,
 .btn-outline[disabled]:focus {
-  background: transparent;
+  background: $color-transparent;
   color: $color-gray-dark;
 }
 .btn-outline:hover,

data/vendor/assets/stylesheets/_carousel.scss

@@ -115,7 +115,7 @@
   width: 4px;
 }
 .carousel-indicators > .active {
-  background: rgba(0,0,0,0);
+  background: $color-transparent;
   height: 8px;
   margin: 0 4px;
   width: 8px;
@@ -146,7 +146,7 @@
   border-color: $color-black-light;
 }
 .carousel-dark .carousel-indicators > .active,
-.carousel-primary .carousel-indicators > .active { background: rgba(0,0,0,0); }
+.carousel-primary .carousel-indicators > .active { background: $color-transparent; }
 .carousel-dark .carousel-indicators > .active { border-color: $color-primary; }
 .carousel-primary .carousel-indicators > .active { border-color: $color-primary; }
 

data/vendor/assets/stylesheets/_color.scss

@@ -4,6 +4,7 @@
 
 /* # Colors
 ================================================== */
+$color-transparent: rgba(0,0,0,0);
 $color-black: rgba(35,41,55,1);
 $color-black-dark: rgba(0,0,0,1);
 $color-black-light: rgba(55,61,75,1);

data/vendor/assets/stylesheets/_datepicker.scss

@@ -20,16 +20,16 @@
 }
 .datepicker:before {
   border-bottom: 7px solid $color-haze-dark;
-  border-right: 7px solid transparent;
-  border-left: 7px solid transparent;
+  border-right: 7px solid $color-transparent;
+  border-left: 7px solid $color-transparent;
   content: '';
   display: inline-block;
   position: absolute;
 }
 .datepicker:after {
   border-bottom: 6px solid $color-haze-dark;
-  border-right: 6px solid transparent;
-  border-left: 6px solid transparent;
+  border-right: 6px solid $color-transparent;
+  border-left: 6px solid $color-transparent;
   content: '';
   display: inline-block;
   position: absolute;
@@ -115,6 +115,6 @@
 .datepicker table td.day.disabled.active,
 .datepicker table td.day.disabled:active,
 .datepicker table td.day.disabled:focus {
-  background: transparent;
+  background: $color-transparent;
   cursor: not-allowed;
 }

data/vendor/assets/stylesheets/_dropdown.scss

@@ -86,8 +86,8 @@
 .dropdown-menu.dropdown-caret { top: calc(100% + 5px); }
 .dropdown-menu.dropdown-caret:before {
   border-bottom: 7px solid $color-haze-dark;
-  border-left: 7px solid transparent;
-  border-right: 7px solid transparent;
+  border-left: 7px solid $color-transparent;
+  border-right: 7px solid $color-transparent;
   content: "";
   display: inline-block;
   left: 9px;
@@ -96,8 +96,8 @@
 }
 .dropdown-menu.dropdown-caret:after {
   border-bottom: 6px solid $color-haze-dark;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
+  border-left: 6px solid $color-transparent;
+  border-right: 6px solid $color-transparent;
   content: "";
   display: inline-block;
   left: 10px;

data/vendor/assets/stylesheets/_form.scss

@@ -319,7 +319,7 @@ select.form-input-initial-width {
   top: 50%;
 }
 .form-select::before {
-  background: rgba(0,0,0,0);
+  background: $color-transparent;
   border: 1px solid $color-haze;
   border-left: 0;
   border-bottom-right-radius: 2px;

data/vendor/assets/stylesheets/_header.scss

@@ -91,7 +91,7 @@
 }
 .header-nav > li.lined > a {
   border-radius: 0 !important;
-  border-bottom: 3px solid transparent;
+  border-bottom: 3px solid $color-transparent;
   padding-bottom: 24px;
 }
 .header-nav > li.lined > a:hover,
@@ -125,7 +125,7 @@
   padding-right: 20px;
 }
 .header-nav-alt > li.inverse.outline > a {
-  background: transparent;
+  background: $color-transparent;
   color: $color-primary;
 }
 .header-nav-alt > li.inverse > a:hover,
@@ -177,7 +177,7 @@
 
 /* # Styles
 ================================================== */
-.header-borderless { border-bottom-color: transparent !important; }
+.header-borderless { border-bottom-color: $color-transparent !important; }
 
 /* # Sizes
 ================================================== */
@@ -190,8 +190,8 @@
   border-color: $color-black-dark;
 }
 .header-invisible {
-  background: rgba(0,0,0,0);
-  border-color: rgba(0,0,0,0);
+  background: $color-transparent;
+  border-color: $color-transparent;
 }
 .header-light {
   background: $color-haze-light;
@@ -235,7 +235,7 @@
   border-color: $color-white;
   color: $color-white;
 }
-.header-invisible .header-nav-alt > li.inverse.outline > a { background: transparent; }
+.header-invisible .header-nav-alt > li.inverse.outline > a { background: $color-transparent; }
 .header-invisible .header-nav-alt > li.inverse > a:hover,
 .header-invisible .header-nav-alt > li.inverse > a.active,
 .header-invisible .header-nav-alt > li.inverse > a:active,

data/vendor/assets/stylesheets/_label_and_badge.scss

@@ -153,7 +153,7 @@
 }
 .badge.badge-outline,
 .label.label-outline {
-  background: transparent;
+  background: $color-transparent;
   color: $color-haze;
 }
 .badge-black-light.badge-outline,

data/vendor/assets/stylesheets/_loader.scss

@@ -22,7 +22,7 @@
   width: 100%;
   z-index: 9999;
 }
-.loader-backdrop { background: transparent; }
+.loader-backdrop { background: $color-transparent; }
 .loader-bar { background: $color-primary; }
 .loader-peg {
   box-shadow: 0 0 10px $color-primary, 0 0 5px $color-primary;
@@ -47,7 +47,7 @@
 .loader-spinner-icon {
   -webkit-animation: loader-spinner 400ms linear infinite;
   animation: loader-spinner 400ms linear infinite;
-  border: solid 2px transparent;
+  border: solid 2px $color-transparent;
   border-left-color: $color-primary;
   border-top-color: $color-primary;
   border-radius: 500px;

data/vendor/assets/stylesheets/_nav_and_tab.scss

@@ -84,7 +84,7 @@
 .nav-tabs > li,
 .nav-pills > li { float: left; }
 .nav-tabs > li > a {
-  border-bottom: 3px solid transparent;
+  border-bottom: 3px solid $color-transparent;
   margin-right: 20px;
   padding-bottom: 10px;
 }
@@ -95,7 +95,7 @@
   border-bottom-color: $color-primary;
   color: $color-primary;
 }
-.nav-tabs .open a.dropdown-toggle { background: transparent; }
+.nav-tabs .open a.dropdown-toggle { background: $color-transparent; }
 .nav-pills > li > a {
   background: $color-haze-light;
   border-radius: 2px;

data/vendor/assets/stylesheets/_placeholder.scss

@@ -31,7 +31,7 @@
 /* # Size
 ================================================== */
 .placeholder-large > i {
-  background: transparent;
+  background: $color-transparent;
   color: $color-gray-dark;
   display: inline-block;
   font-size: 256px;

data/vendor/assets/stylesheets/_popover.scss

@@ -50,7 +50,7 @@
 }
 .popover .arrow,
 .popover .arrow:after {
-  border-color: transparent;
+  border-color: $color-transparent;
   border-style: solid;
   display: block;
   height: 0;

data/vendor/assets/stylesheets/_progress.scss

@@ -31,8 +31,8 @@
   width: 0;
 }
 .progress > .bar-striped {
-  background-image: -webkit-linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);
-  background-image: linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);
+  background-image: -webkit-linear-gradient(45deg, rgba(255,255,255,0.15) 25%, $color-transparent 25%, $color-transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, $color-transparent 75%, $color-transparent);
+  background-image: linear-gradient(45deg, rgba(255,255,255,0.15) 25%, $color-transparent 25%, $color-transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, $color-transparent 75%, $color-transparent);
   -webkit-background-size: 40px 40px;
   background-size: 40px 40px;
 }

data/vendor/assets/stylesheets/_reset.scss

@@ -83,8 +83,8 @@ body {
   height: 100%;
   -webkit-overflow-scrolling: touch;
   overflow-scrolling: touch;
-  -webkit-tap-highlight-color: rgba(0,0,0,0);
-  tap-highlight-color: rgba(0,0,0,0);
+  -webkit-tap-highlight-color: $color-transparent;
+  tap-highlight-color: $color-transparent;
   text-rendering: optimizeLegibility;
   -webkit-text-size-adjust: 100%;
   text-size-adjust: 100%;

data/vendor/assets/stylesheets/_slider.scss

@@ -119,7 +119,7 @@
 .slider-selection.tick-slider-selection,
 .slider.slider-disabled .slider-handle { background: $color-haze-dark; }
 .slider-track-low,
-.slider-track-high { background: transparent; }
+.slider-track-high { background: $color-transparent; }
 .slider.slider-disabled .slider-track,
 .slider.slider-disabled .slider-handle { cursor: not-allowed; }
 
@@ -141,7 +141,7 @@
 .slider-handle.custom,
 .slider-handle.triangle,
 .slider-tick.custom,
-.slider-tick.triangle { background: transparent none; }
+.slider-tick.triangle { background: $color-transparent none; }
 .slider-handle.custom::before,
 .slider-tick.custom::before {
   line-height: 16px;

data/vendor/assets/stylesheets/_spinner.scss

@@ -453,7 +453,7 @@
   -webkit-animation: spinnerCrescent 1.2s infinite linear;
   animation: spinnerCrescent 1.2s infinite linear;
   border-width: 9px;
-  border-right-color: transparent;
+  border-right-color: $color-transparent;
 }
 .spinner-cube-1,
 .spinner-cube-2,

data/vendor/assets/stylesheets/_table.scss

@@ -6,7 +6,7 @@
 /* # Table
 ================================================== */
 table {
-  background: transparent;
+  background: $color-transparent;
   border-collapse: collapse;
   border-spacing: 0;
   max-width: 100%;

data/vendor/assets/stylesheets/_timepicker.scss

@@ -18,16 +18,16 @@
 }
 .timepicker-widget.dropdown-menu:before {
   border-bottom: 7px solid $color-haze-dark;
-  border-right: 7px solid transparent;
-  border-left: 7px solid transparent;
+  border-right: 7px solid $color-transparent;
+  border-left: 7px solid $color-transparent;
   content: "";
   display: inline-block;
   position: absolute;
 }
 .timepicker-widget.dropdown-menu:after {
   border-bottom: 6px solid $color-haze-dark;
-  border-right: 6px solid transparent;
-  border-left: 6px solid transparent;
+  border-right: 6px solid $color-transparent;
+  border-left: 6px solid $color-transparent;
   content: "";
   display: inline-block;
   position: absolute;

data/vendor/assets/stylesheets/_toolbar.scss

@@ -24,7 +24,7 @@
   border-right: 0;
 }
 .toolbar > a {
-  background: transparent;
+  background: $color-transparent;
   box-sizing: border-box;
   color: $color-black-light;
   display: block;

data/vendor/assets/stylesheets/_tooltip.scss

@@ -54,7 +54,7 @@
   text-transform: none;
 }
 .tooltip-arrow {
-  border-color: transparent;
+  border-color: $color-transparent;
   border-style: solid;
   height: 0;
   position: absolute;

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: active_frontend
 version: !ruby/object:Gem::Version
-  version: 9.1.1
+  version: 10.0.0
 platform: ruby
 authors:
 - Juan Gomez
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2015-08-10 00:00:00.000000000 Z
+date: 2015-08-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler