toolbox_esten 1.0.0

data/assets/javascripts/simpleTextfield/simpleTextfield.js

@@ -0,0 +1,94 @@
++function($) {
+	'use strict';
+
+	var Simpletextfield = function(element, options) {
+		this.init(element, options);
+	}
+
+	Simpletextfield.DEFAULTS = {
+  }
+
+	Simpletextfield.prototype.init = function(element, options) {
+    var $ele = $(element);
+    if($ele.parent().find(".simplelabel").length == 0) {
+      generateTemplate($ele);
+    }
+
+    var target = $ele.parent().find(".simplelabel");
+    var inactive_target = $ele.parent().find(".simplelabel:not('.focus')");
+
+    target.click(function() {
+      if(!$(this).hasClass("focus")) {
+        $ele.focus();
+        focus_In($ele, target);
+      }
+    });
+
+    $ele.on("focusin", function() {
+      focus_In($(this), target);
+    });
+
+    $ele.on("focusout", function() {
+      focus_Out($(this), target);
+    });
+
+    if($ele[0].localName == "textarea") {
+      var ta = $ele[0];
+
+      $(ta).keyup(function() {
+        autoHeight(this);
+      });
+    }
+	}
+
+  function generateTemplate(ele) {
+    var title = ele.data("title");
+    var tooltip = ele.data("tooltip-title");
+    if(tooltip) {
+      var template = '<span class="simplelabel simpletooltip" data-tooltip-title="'+tooltip+'">'+title+'</span>';
+    } else {
+      var template = '<span class="simplelabel">'+title+'</span>';
+    }
+    ele.after(template);
+  }
+
+  function focus_In(ele, target) {
+    target.addClass("focus");
+    ele.addClass("focus");
+  }
+
+  function focus_Out(ele, target) {
+    if(ele.val().length == 0) {
+      target.removeClass("focus filled");
+      ele.removeClass("focus");
+    } else {
+      target.addClass("filled").removeClass("focus");
+      ele.removeClass("focus");
+    }
+  }
+
+  function autoHeight(obj) {
+    $(obj).height(30);
+    $(obj).height(
+      obj.scrollHeight + parseFloat($(obj).css("borderTopWidth")) + parseFloat($(obj).css("borderBottomWidth"))
+    ); 
+  }
+
+	function Plugin(option) {
+    return this.each(function() {
+    	var $this   = $(this);
+      var options = $.extend({}, Simpletextfield.DEFAULTS, option);
+      new Simpletextfield(this, options);
+    });
+  }
+
+  var old = $.fn.simpletextfield;
+
+	$.fn.simpletextfield = Plugin;
+	$.fn.simpletextfield.Constructor = Simpletextfield;
+
+	$.fn.simpletextfield.noConflict = function() {
+    $.fn.simpletextfield = old;
+    return this;
+  }
+}(jQuery);

data/assets/javascripts/simpleTooltip/simpleTooltip.js

@@ -0,0 +1,166 @@
++function($) {
+	'use strict';
+
+	var Simpletooltip = function(element, options) {
+		this.init(element, options);
+	}
+
+	Simpletooltip.DEFAULTS = {
+		template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',
+		viewport: '.container',
+    maxwidth: false,
+		theme: {
+			background: '#000000', 
+			color: '#FFFFFF',
+      textshadow: 'none'
+		}
+	}
+
+	Simpletooltip.prototype.init = function(element, options) {
+		this.$element = $(element);
+		this.options = options;
+
+		this.$element.on('mouseenter', $.proxy(this.enter, this));
+		this.$element.on('mouseout', $.proxy(this.leave, this));
+	}
+
+	Simpletooltip.prototype.enter = function(obj) {
+		var $tip = this.tip();
+		var el = this.$element;
+		var viewport = this.options.viewport;
+
+		this.setContent($tip);
+
+		$tip.detach();
+		$(viewport).css("position", "relative");
+		$tip.appendTo(viewport);
+
+		var placement = el.data("placement");
+		var pos = this.getPosition(el);
+    var calculatedOffset = this.getCalculatedOffset(placement, pos);
+    // this.placeArrow(placement);
+
+		this.setCalculatedOffset(calculatedOffset);
+	}
+
+	Simpletooltip.prototype.leave = function(obj) {
+		var $tip = this.tip();
+		$tip.detach();
+	}
+
+	Simpletooltip.prototype.tip = function() {
+    if (!this.$tip) {
+      this.$tip = $(this.options.template)
+      if (this.$tip.length != 1) {
+        throw new Error(this.type + ' `template` option must consist of exactly 1 top-level element!')
+      }
+    }
+    return this.$tip;
+  }
+
+  Simpletooltip.prototype.setContent = function(tip) {
+  	var $tip = this.tip();
+  	var $background = this.options.theme.background;
+  	var $color = this.options.theme.color;
+    var $textshadow = this.options.theme.textshadow;
+    var $maxwidth = this.options.maxwidth;
+  	var $title = this.getTitle();
+  	$tip.css({
+  		'background': $background,
+  		'color': $color,
+      'text-shadow': $textshadow,
+      'max-width': $maxwidth
+  	});
+  	$tip.find('.tooltip-inner').empty().append($title);
+  }
+
+  Simpletooltip.prototype.getTitle = function() {
+    var $e = this.$element;
+
+    if($e.data("title")) {
+      return $e.data('title');
+    } else {
+      return $e.data('tooltip-title');
+    }
+  }
+
+  Simpletooltip.prototype.getPosition = function(element) {
+  	var pos = element.offset();
+		
+  	return pos;
+  }
+
+  Simpletooltip.prototype.getCalculatedOffset = function(placement, pos) {
+  	var $tip = this.tip();
+  	var el = this.$element;
+  	var tipWidth  = $tip[0].offsetWidth;
+    var tipHeight = $tip[0].offsetHeight;
+    var elWidth = el[0].offsetWidth;
+    var elHeight = el[0].offsetHeight;
+    var top, left, calculatedOffset;
+    
+  	if(placement == 'top') {
+  		top = pos.top - tipHeight - 3;
+  		left = pos.left - (tipWidth - elWidth) / 2;
+  	} else if(placement == 'bottom') {
+  		top = pos.top + elHeight + 3;
+  		left = pos.left - (tipWidth - elWidth) / 2;
+  	} else if(placement == 'left') {
+  		top = pos.top + (elHeight - tipHeight) / 2;
+  		left = pos.left - tipWidth - 3;
+  	} else {
+  		top = pos.top + (elHeight - tipHeight) / 2;
+  		left = pos.left + elWidth + 3;
+  	}
+
+  	calculatedOffset = {'top': top, 'left': left};
+  	
+  	return calculatedOffset;
+  }
+
+  // Simpletooltip.prototype.placeArrow = function(placement) {
+  // 	var $tip = this.tip();
+  // 	var $arrow = $tip.find(".tooltip-arrow");
+  // 	var $background = this.options.theme.background;
+
+  // 	if(placement == 'top') {
+  // 		$arrow.addClass('to_top');
+  // 		$arrow.css("border-top-color", $background);
+  // 	} else if(placement == 'bottom') {
+  // 		$arrow.addClass('to_bottom');
+  // 		$arrow.css("border-bottom-color", $background);
+  // 	} else if(placement == 'left') {
+  // 		$arrow.addClass('to_left');
+  // 		$arrow.css("border-left-color", $background);
+  // 	} else {
+  // 		$arrow.addClass('to_right');
+  // 		$arrow.css("border-right-color", $background);
+  // 	}
+  // }
+
+  Simpletooltip.prototype.setCalculatedOffset = function(calculatedOffset) {
+  	var $tip = this.tip();
+  	$($tip[0]).css({
+  		'top': calculatedOffset.top,
+  		'left': calculatedOffset.left
+  	});
+  }
+
+	function Plugin(option) {
+    return this.each(function() {
+    	var $this   = $(this);
+      var options = $.extend({}, Simpletooltip.DEFAULTS, option);
+      new Simpletooltip(this, options);
+    });
+  }
+
+  var old = $.fn.simpletooltip;
+
+	$.fn.simpletooltip = Plugin;
+	$.fn.simpletooltip.Constructor = Simpletooltip;
+
+	$.fn.simpletooltip.noConflict = function() {
+    $.fn.simpletooltip = old;
+    return this;
+  }
+}(jQuery);

data/assets/javascripts/simpleTooltip/simpleTooltip.min.js

@@ -0,0 +1 @@
++function(t){"use strict";function o(o){return this.each(function(){var i=(t(this),t.extend({},e.DEFAULTS,o));new e(this,i)})}var e=function(t,o){this.init(t,o)};e.DEFAULTS={template:'<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',viewport:".container",theme:{background:"#000000",color:"#FFFFFF"}},e.prototype.init=function(o,e){this.$element=t(o),this.options=e,this.$element.on("mouseenter",t.proxy(this.enter,this)),this.$element.on("mouseout",t.proxy(this.leave,this))},e.prototype.enter=function(o){var e=this.tip(),i=this.$element,s=this.options.viewport;this.setContent(e),e.detach(),t(s).css("position","relative"),e.appendTo(s);var n=i.data("placement"),r=this.getPosition(i),p=this.getCalculatedOffset(n,r);this.placeArrow(n),this.setCalculatedOffset(p)},e.prototype.leave=function(t){var o=this.tip();o.detach()},e.prototype.tip=function(){if(!this.$tip&&(this.$tip=t(this.options.template),1!=this.$tip.length))throw new Error(this.type+" `template` option must consist of exactly 1 top-level element!");return this.$tip},e.prototype.setContent=function(t){var o=this.tip(),e=this.options.theme.background,i=this.options.theme.color,s=this.getTitle();o.css({background:e,color:i}),o.find(".tooltip-inner").empty().append(s)},e.prototype.getTitle=function(){var t=this.$element;return t.attr("title")},e.prototype.getPosition=function(t){var o=t.offset();return o},e.prototype.getCalculatedOffset=function(t,o){var e,i,s,n=this.tip(),r=this.$element,p=n[0].offsetWidth,l=n[0].offsetHeight,a=r[0].offsetWidth,f=r[0].offsetHeight;return"top"==t?(e=o.top-l-5,i=o.left-(p-a)/2):"bottom"==t?(e=o.top+f+5,i=o.left-(p-a)/2):"left"==t?(e=o.top+(f-l)/2,i=o.left-p-5):(e=o.top+(f-l)/2,i=o.left+a+5),s={top:e,left:i}},e.prototype.placeArrow=function(t){var o=this.tip(),e=o.find(".tooltip-arrow"),i=this.options.theme.background;"top"==t?(e.addClass("to_top"),e.css("border-top-color",i)):"bottom"==t?(e.addClass("to_bottom"),e.css("border-bottom-color",i)):"left"==t?(e.addClass("to_left"),e.css("border-left-color",i)):(e.addClass("to_right"),e.css("border-right-color",i))},e.prototype.setCalculatedOffset=function(o){var e=this.tip();t(e[0]).css({top:o.top,left:o.left})};var i=t.fn.simpletooltip;t.fn.simpletooltip=o,t.fn.simpletooltip.Constructor=e,t.fn.simpletooltip.noConflict=function(){return t.fn.simpletooltip=i,this}}(jQuery);

data/assets/stylesheets/_jquery_ui.scss

@@ -0,0 +1 @@
+@import "jquery_ui/uidialog";

data/assets/stylesheets/_simpleloader.scss

@@ -0,0 +1,2 @@
+@import "simpleLoader/keyframes";
+@import "simpleLoader/simpleLoader";

data/assets/stylesheets/_simpleselection.scss

@@ -0,0 +1 @@
+@import "simpleSelection/simpleSelection";

data/assets/stylesheets/_simpletextfield.scss

@@ -0,0 +1 @@
+@import "simpleTextfield/simpleTextfield";

data/assets/stylesheets/_simpletooltip.scss

@@ -0,0 +1 @@
+@import "simpleTooltip/simpleTooltip";

data/assets/stylesheets/_toolbox_esten.scss

@@ -0,0 +1,18 @@
+@import "toolbox_esten/mixins";
+@import "toolbox_esten/variables";
+@import "toolbox_esten/reset";
+@import "toolbox_esten/base";
+@import "toolbox_esten/grid";
+@import "toolbox_esten/helper";
+@import "toolbox_esten/flex";
+
+@import "toolbox_esten/top_bar";
+@import "toolbox_esten/buttons";
+@import "toolbox_esten/textfield";
+@import "toolbox_esten/section";
+@import "toolbox_esten/form";
+@import "toolbox_esten/detail";
+@import "toolbox_esten/tables";
+@import "toolbox_esten/tabs";
+@import "toolbox_esten/datatables";
+@import "toolbox_esten/notification";

data/assets/stylesheets/jquery_ui/uidialog.scss

@@ -0,0 +1,39 @@
+.ui-dialog {
+  @include border-radius(0);
+  @include box-shadow(0 1px 10px $grey_500);
+  position: absolute;
+  background: #FFFFFF;
+  outline: 0;
+  .ui-dialog-titlebar { display: none; }
+  .ui-dialog-content {
+    @include font(14px, 400);
+    @include border-radius(0);
+    padding: 16px 24px;
+    line-height: 30px;
+    color: $grey_600;
+    overflow: auto;
+    outline: 0;
+    p { margin: 4px 0; }
+    b {
+      color: $blue_500;
+      &.alert { color: $deep_orange_400; }
+    }
+    .dialog-title {
+      @include font(20px, 500);
+      line-height: 30px;
+      color: $grey_500;
+    }
+    .form-body { padding: 0; }
+  }
+  .ui-dialog-buttonpane {
+    min-height: 30px;
+    padding: 16px 24px;
+  }
+}
+.ui-widget-overlay {
+  @include size(100%, 100%);
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: rgba(255,255,255,.7);
+}

data/assets/stylesheets/simpleLoader/keyframes.scss

@@ -0,0 +1,325 @@
+/* ==================== Keyframes ==================== */
+/* ---------- Horizon Ball ---------- */
+@-webkit-keyframes horizon-ball {
+	0%, 80% {
+		@include opacity(100);
+		@include transform(scale(1));
+	}
+	40% {
+		@include opacity(70);
+		@include transform(scale(0.1));
+	}
+}
+@keyframes horizon-ball {
+	0%, 80% {
+		@include opacity(100);
+		@include transform(scale(1));
+	}
+	40% {
+		@include opacity(70);
+		@include transform(scale(0.1));
+	}
+}
+/* ---------- END Horizon Ball ---------- */
+
+/* ---------- Grid Ball ---------- */
+@-webkit-keyframes grid-ball {
+	0%, 100% {
+		@include opacity(100);
+		@include transform(scale(1));
+	}
+	50% {
+		@include opacity(70);
+		@include transform(scale(0.5));
+	}
+}
+@keyframes grid-ball {
+	0%, 100% {
+		@include opacity(100);
+		@include transform(scale(1));
+	}
+	50% {
+		@include opacity(70);
+		@include transform(scale(0.5));
+	}
+}
+/* ---------- END Grid Ball ---------- */
+
+/* ---------- Rotate Circle ---------- */
+@-webkit-keyframes rotate-circle {
+	0% { @include transform(scale(1) rotate(0deg)); }
+	50% { @include transform(scale(1.3) rotate(180deg)); }
+	100% { @include transform(scale(1) rotate(360deg)); }
+}
+@keyframes rotate-circle {
+	0% { @include transform(scale(1) rotate(0deg)); }
+	50% { @include transform(scale(1.3) rotate(180deg)); }
+	100% { @include transform(scale(1) rotate(360deg)); }
+}
+/* ---------- END Rotate Circle ---------- */
+
+/* ---------- Rotate Clip Ball ---------- */
+@-webkit-keyframes rotate-clip-ball {
+	30% { @include transform(scale(0.3)); }
+	100% { @include transform(scale(1)); }
+}
+@keyframes rotate-clip-ball {
+	30% { @include transform(scale(0.3)); }
+	100% { @include transform(scale(1)); }
+}
+/* ---------- END Rotate Clip Ball ---------- */
+
+/* ---------- Square Spin ---------- */
+@-webkit-keyframes square-spin {
+	25% { @include transform(perspective(100px) rotateX(180deg) rotateY(0)); }
+	50% { @include transform(perspective(100px) rotateX(180deg) rotateY(180deg)); }
+	75% { @include transform(perspective(100px) rotateX(0) rotateY(180deg)); }
+	100% { @include transform(perspective(100px) rotateX(0) rotateY(0)); }
+}
+@keyframes square-spin {
+	25% { @include transform(perspective(100px) rotateX(180deg) rotateY(0)); }
+	50% { @include transform(perspective(100px) rotateX(180deg) rotateY(180deg)); }
+	75% { @include transform(perspective(100px) rotateX(0) rotateY(180deg)); }
+	100% { @include transform(perspective(100px) rotateX(0) rotateY(0)); }
+}
+/* ---------- END Square Spin ---------- */
+
+/* ---------- Rotate Clip Circle ---------- */
+@-webkit-keyframes rotate-clip-circle {
+	0% { @include transform(scale(1) rotate(0deg)); }
+	50% { @include transform(scale(1.3) rotate(180deg)); }
+	100% { @include transform(scale(1) rotate(360deg)); }
+}
+@keyframes rotate-clip-circle {
+	0% { @include transform(scale(1) rotate(0deg)); }
+	50% { @include transform(scale(1.3) rotate(180deg)); }
+	100% { @include transform(scale(1) rotate(360deg)); }
+}
+/* ---------- END Rotate Clip Circle ---------- */
+
+/* ---------- Rise Ball ---------- */
+@-webkit-keyframes rise-ball-odd {
+	0%, 100% { @include transform(scale(0.3) translate(0)); }
+	25% { @include transform(scale(1) translate(0, 20px)); }
+	75% { @include transform(scale(1) translate(0, -20px)); }
+}
+@keyframes rise-ball-odd {
+	0%, 100% { @include transform(scale(0.3) translate(0)); }
+	25% { @include transform(scale(1) translate(0, 20px)); }
+	75% { @include transform(scale(1) translate(0, -20px)); }
+}
+@-webkit-keyframes rise-ball-even {
+	0%, 100% { @include transform(scale(1) translate(0)); }
+	25% { @include transform(scale(1) translate(0, -20px)); }
+	50% { @include transform(scale(0.3) translate(0)); }
+	75% { @include transform(scale(1) translate(0, 20px)); }
+}
+@keyframes rise-ball-even {
+	0%, 100% { @include transform(scale(1) translate(0)); }
+	25% { @include transform(scale(1) translate(0, -20px)); }
+	50% { @include transform(scale(0.3) translate(0)); }
+	75% { @include transform(scale(1) translate(0, 20px)); }
+}
+/* ---------- END Rise Ball ---------- */
+
+/* ---------- Rotate Ball ---------- */
+@-webkit-keyframes rotate-ball {
+	0% { @include transform(scale(1) rotate(0deg)); }
+	50% { @include transform(scale(0.6) rotate(180deg)); }
+	100% { @include transform(scale(1) rotate(360deg)); }
+}
+@keyframes rotate-ball {
+	0% { @include transform(scale(1) rotate(0deg)); }
+	50% { @include transform(scale(0.6) rotate(180deg)); }
+	100% { @include transform(scale(1) rotate(360deg)); }
+}
+/* ---------- END Rotate Ball ---------- */
+
+/* ---------- Transition Cube ---------- */
+@-webkit-keyframes transition-cube {
+	0% { @include transform(translate(0, 0) rotate(0deg) scale(1)); }
+	25% { @include transform(translate(50px, 0) rotate(-90deg) scale(0.3)); }
+	50% { @include transform(translate(50px, 50px) rotate(180deg) scale(1)); }
+	75% { @include transform(translate(0, 50px) rotate(90deg) scale(0.3)); }
+}
+@keyframes transition-cube {
+	0% { @include transform(translate(0, 0) rotate(0deg) scale(1)); }
+	25% { @include transform(translate(50px, 0) rotate(-90deg) scale(0.3)); }
+	50% { @include transform(translate(50px, 50px) rotate(180deg) scale(1)); }
+	75% { @include transform(translate(0, 50px) rotate(90deg) scale(0.3)); }
+}
+/* ---------- END Transition Cube ---------- */
+
+/* ---------- Transition Ball ---------- */
+@-webkit-keyframes transition-ball {
+	0% { @include transform(translate(0)); }
+	33% { @include transform(translate(-15px, -30px)); }
+	66% { @include transform(translate(15px, -30px)); }
+}
+@keyframes transition-ball {
+	0% { @include transform(translate(0)); }
+	33% { @include transform(translate(-15px, -30px)); }
+	66% { @include transform(translate(15px, -30px)); }
+}
+@-webkit-keyframes transition-ball-opposite {
+	0% { @include transform(translate(0)); }
+	33% { @include transform(translate(15px, 30px)); }
+	66% { @include transform(translate(-15px, 30px)); }
+}
+@keyframes transition-ball-opposite {
+	0% { @include transform(translate(0)); }
+	33% { @include transform(translate(15px, 30px)); }
+	66% { @include transform(translate(-15px, 30px)); }
+}
+/* ---------- END Transition Ball ---------- */
+
+/* ---------- Transition Ball Reflect ---------- */
+@-webkit-keyframes transition-ball-reflect {
+	0%, 50% { @include transform(translate(0)); }
+	17%, 84% { @include transform(translate(-15px, -30px)); }
+	34%, 67% { @include transform(translate(15px, -30px)); }
+}
+@keyframes transition-ball-reflect {
+	0%, 50% { @include transform(translate(0)); }
+	17%, 84% { @include transform(translate(-15px, -30px)); }
+	34%, 67% { @include transform(translate(15px, -30px)); }
+}
+@-webkit-keyframes transition-ball-reflect-opposite {
+	0%, 50% { @include transform(translate(0)); }
+	17%, 84% { @include transform(translate(15px, 30px)); }
+	34%, 67% { @include transform(translate(-15px, 30px)); }
+}
+@keyframes transition-ball-reflect-opposite {
+	0%, 50% { @include transform(translate(0)); }
+	17%, 84% { @include transform(translate(15px, 30px)); }
+	34%, 67% { @include transform(translate(-15px, 30px)); }
+}
+/* ---------- END Transition Ball Reflect ---------- */
+
+/* ---------- Transition Ball Triangle ---------- */
+@-webkit-keyframes transition-ball-triangle-path1 {
+	0% { @include transform(translate(0)); }
+	33% { @include transform(translate(40px, 60px)); }
+	66% { @include transform(translate(-40px, 60px)); }
+}
+@keyframes transition-ball-triangle-path1 {
+	0% { @include transform(translate(0)); }
+	33% { @include transform(translate(40px, 60px)); }
+	66% { @include transform(translate(-40px, 60px)); }
+}
+@-webkit-keyframes transition-ball-triangle-path2 {
+	0% { @include transform(translate(0)); }
+	33% { @include transform(translate(40px, -60px)); }
+	66% { @include transform(translate(80px, 0)); }
+}
+@keyframes transition-ball-triangle-path2 {
+	0% { @include transform(translate(0)); }
+	33% { @include transform(translate(40px, -60px)); }
+	66% { @include transform(translate(80px, 0)); }
+}
+@-webkit-keyframes transition-ball-triangle-path3 {
+	0% { @include transform(translate(0)); }
+	33% { @include transform(translate(-80px, 0)); }
+	66% { @include transform(translate(-40px, -60px)); }
+}
+@keyframes transition-ball-triangle-path3 {
+	0% { @include transform(translate(0)); }
+	33% { @include transform(translate(-80px, 0)); }
+	66% { @include transform(translate(-40px, -60px)); }
+}
+/* ---------- END Transition Ball Triangle ---------- */
+
+/* ---------- Scale Ball ---------- */
+@-webkit-keyframes scale-ball {
+	0% {
+		@include opacity(100);
+		@include transform(scale(0.1));
+	}
+	100% {
+		@include opacity(0);
+		@include transform(scale(1));
+	}
+}
+@keyframes scale-ball {
+	0% {
+		@include opacity(100);
+		@include transform(scale(0.1));
+	}
+	100% {
+		@include opacity(0);
+		@include transform(scale(1));
+	}
+}
+/* ---------- END Scale Ball ---------- */
+
+/* ---------- Scale Ball Multiple ---------- */
+@-webkit-keyframes scale-ball-multiple {
+	0% {
+		@include opacity(0);
+		@include transform(scale(0));
+	}
+	5%{ @include opacity(100); }
+	100% {
+		@include opacity(0);
+		@include transform(scale(1));
+	}
+}
+@keyframes scale-ball-multiple {
+	0% {
+		@include opacity(0);
+		@include transform(scale(0));
+	}
+	5%{ @include opacity(100); }
+	100% {
+		@include opacity(0);
+		@include transform(scale(1));
+	}
+}
+/* ---------- END Scale Ball Multiple ---------- */
+
+/* ---------- Spin Ball ---------- */
+@-webkit-keyframes spin-ball {
+	50% {
+		@include opacity(30);
+		@include transform(scale(0.4));
+	}
+	100% {
+		@include opacity(100);
+		@include transform(scale(1));
+	}
+}
+@keyframes spin-ball {
+	50% {
+		@include opacity(30);
+		@include transform(scale(0.4));
+	}
+	100% {
+		@include opacity(100);
+		@include transform(scale(1));
+	}
+}
+/* ---------- END Spin Ball ---------- */
+
+/* ---------- Spin Line ---------- */
+@-webkit-keyframes spin-line {
+	50% { @include opacity(30); }
+	100% { @include opacity(100); }
+}
+@keyframes spin-line {
+	50% { @include opacity(30); }
+	100% { @include opacity(100); }
+}
+/* ---------- END Spin Line ---------- */
+
+/* ---------- Time Loader ---------- */
+@-webkit-keyframes time-loader {
+  0% { @include transform(rotate(0deg)); }
+  100% { @include transform(rotate(360deg));
+  }
+}
+@keyframes time-loader {
+  0% { @include transform(rotate(0deg)); }
+  100% { @include transform(rotate(360deg)); }
+}
+/* ---------- END Time Loader ---------- */
+/* ==================== END Keyframes ==================== */