Initial commit

resources/assets/images/favicon/browserconfig.xml

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>

resources/assets/images/favicon/manifest.json

@@ -0,0 +1,41 @@
+{
+ "name": "App",
+ "icons": [
+  {
+   "src": "\/android-icon-36x36.png",
+   "sizes": "36x36",
+   "type": "image\/png",
+   "density": "0.75"
+  },
+  {
+   "src": "\/android-icon-48x48.png",
+   "sizes": "48x48",
+   "type": "image\/png",
+   "density": "1.0"
+  },
+  {
+   "src": "\/android-icon-72x72.png",
+   "sizes": "72x72",
+   "type": "image\/png",
+   "density": "1.5"
+  },
+  {
+   "src": "\/android-icon-96x96.png",
+   "sizes": "96x96",
+   "type": "image\/png",
+   "density": "2.0"
+  },
+  {
+   "src": "\/android-icon-144x144.png",
+   "sizes": "144x144",
+   "type": "image\/png",
+   "density": "3.0"
+  },
+  {
+   "src": "\/android-icon-192x192.png",
+   "sizes": "192x192",
+   "type": "image\/png",
+   "density": "4.0"
+  }
+ ]
+}

resources/assets/js/route.js

@@ -0,0 +1,16 @@
+let routes = window.Laravel.routes
+module.exports = function () {
+    let args = Array.prototype.slice.call(arguments),
+        name = args.shift(),
+        prefixSlash =  routes[name] !== '/' ? '/':'';
+
+    if (routes[name] === undefined) {
+        console.error('Route not found ', name);
+        return;
+    }
+
+    return window.Laravel.baseUrl + prefixSlash  + routes[name]
+        .split('/')
+        .map(s => s[0] === '{' ? args.shift() : s)
+        .join('/');
+};

resources/assets/js/scripts.js

@@ -0,0 +1,41 @@
+$(function() {
+    $('.page-container').scrollbar().addClass('scrollbar-macosx');
+	$.fn.selectListTrigger = function(eventName) {
+        return this.each(function() {
+            var el = $(this).get(0);
+            triggerNativeEvent(el, eventName);
+        });
+    };
+
+    function triggerNativeEvent(el, eventName){
+		if (el.fireEvent) { // < IE9
+			(el.fireEvent('on' + eventName));
+		} else {
+			var evt = document.createEvent('Events');
+			evt.initEvent(eventName, true, false);
+			el.dispatchEvent(evt);
+		}
+	}
+	
+	$('[data-init-plugin="select2"]').on('select2:select', function (e) {
+		$(this).selectListTrigger('change');
+	});
+
+    $('body').on('click', '.requestModal', function () {
+        let type = $(this).attr('data-type');
+        if(type){ $(this).parents('.parentContainer').find('.modalContainer[data-type="'+type+'"]').modal('show'); }
+    });
+
+    if($('#maintenanceContainer').length >0 ){
+        VANTA.BIRDS({
+            el: "#maintenanceContainer",
+            backgroundColor: 0xf9f9f9,
+            wingSpan: 40.00,
+            separation: 100.00,
+            alignment: 100.00,
+            cohesion: 100.00,
+            quantity: 2.00
+        })
+    }
+
+});

resources/assets/sass/_color.scss

@@ -0,0 +1,543 @@
+// Import the Compass Plugin
+//--------------------------------
+// Normal
+//--------------------------------
+@function blend-normal ($foreground, $background) {
+  $opacity: opacity($foreground);
+  $background-opacity: opacity($background);
+
+  // calculate opacity
+  $bm-red: red($foreground) * $opacity + red($background) * $background-opacity * (1 - $opacity);
+  $bm-green: green($foreground) * $opacity + green($background) * $background-opacity * (1 - $opacity);
+  $bm-blue: blue($foreground) * $opacity + blue($background) * $background-opacity * (1 - $opacity);
+  @return rgb($bm-red, $bm-green, $bm-blue);
+}
+
+//--------------------------------
+// Multiply
+//--------------------------------
+@function blend-multiply ($foreground, $background) {
+  $bm-red: red($background) * red($foreground) / 255;
+  $bm-green: green($background) * green($foreground) / 255;
+  $bm-blue: blue($background) * blue($foreground) / 255;
+
+  @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+
+//--------------------------------
+// Lighten
+//--------------------------------
+@function blend-lighten ($foreground, $background) {
+  $bm-red: blend-lighten-color(red($foreground), red($background));
+  $bm-green: blend-lighten-color(green($foreground), green($background));
+  $bm-blue: blend-lighten-color(blue($foreground), blue($background));
+
+  @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+
+@function blend-lighten-color($foreground, $background) {
+  @if $background > $foreground {
+    $foreground: $background;
+  }
+  @return $foreground;
+}
+
+//--------------------------------
+// Darken
+//--------------------------------
+@function blend-darken ($foreground, $background) {
+  $bm-red: blend-darken-color(red($foreground), red($background));
+  $bm-green: blend-darken-color(green($foreground), green($background));
+  $bm-blue: blend-darken-color(blue($foreground), blue($background));
+
+  @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+
+@function blend-darken-color($foreground, $background) {
+  @if $background < $foreground {
+    $foreground: $background;
+  }
+  @return $foreground;
+}
+
+//--------------------------------
+// Darker Color
+//--------------------------------
+@function blend-darkercolor ($foreground, $background) {
+  $bm-red: red($foreground);
+  $bm-green: green($foreground);
+  $bm-blue: blue($foreground);
+  $background-red: red($background);
+  $background-green: green($background);
+  $background-blue: blue($background);
+
+  @if $background-red * 0.3 + $background-green * 0.59 + $background-blue * 0.11 <= $bm-red * 0.3 + $bm-green * 0.59 + $bm-blue * 0.11 {
+    $bm-red: $background-red;
+    $bm-green: $background-green;
+    $bm-blue: $background-blue;
+  }
+  @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+
+//--------------------------------
+// Lighter Color
+//--------------------------------
+@function blend-lightercolor ($foreground, $background) {
+  $bm-red: red($foreground);
+  $bm-green: green($foreground);
+  $bm-blue: blue($foreground);
+  $background-red: red($background);
+  $background-green: green($background);
+  $background-blue: blue($background);
+
+  @if $background-red * 0.3 + $background-green * 0.59 + $background-blue * 0.11 > $bm-red * 0.3 + $bm-green * 0.59 + $bm-blue * 0.11 {
+    $bm-red: $background-red;
+    $bm-green: $background-green;
+    $bm-blue: $background-blue;
+  }
+  @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+
+//--------------------------------
+// Linear Dodge
+//--------------------------------
+@function blend-lineardodge ($foreground, $background) {
+  $bm-red: blend-lineardodge-color(red($foreground), red($background));
+  $bm-green: blend-lineardodge-color(green($foreground), green($background));
+  $bm-blue: blend-lineardodge-color(blue($foreground), blue($background));
+
+  @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+
+@function blend-lineardodge-color($foreground, $background) {
+  @if $background + $foreground > 255 {
+    $foreground: 255;
+  } @else {
+    $foreground: $background + $foreground;
+  }
+  @return $foreground;
+}
+
+//--------------------------------
+// Linear Burn
+//--------------------------------
+@function blend-linearburn ($foreground, $background) {
+  $bm-red: blend-linearburn-color(red($foreground), red($background));
+  $bm-green: blend-linearburn-color(green($foreground), green($background));
+  $bm-blue: blend-linearburn-color(blue($foreground), blue($background));
+
+  @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+
+@function blend-linearburn-color($foreground, $background) {
+  @if $background + $foreground < 255 {
+    $foreground: 0;
+  } @else {
+    $foreground: $background + $foreground - 255;
+  }
+  @return $foreground;
+}
+
+//--------------------------------
+// Difference
+//--------------------------------
+@function blend-difference ($foreground, $background) {
+  $bm-red: abs(red($background) - red($foreground));
+  $bm-green: abs(green($background) - green($foreground));
+  $bm-blue: abs(blue($background) - blue($foreground));
+
+  @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+
+//--------------------------------
+// Screen
+//--------------------------------
+@function blend-screen ($foreground, $background) {
+  $bm-red: blend-screen-color(red($foreground), red($background));
+  $bm-green: blend-screen-color(green($foreground), green($background));
+  $bm-blue: blend-screen-color(blue($foreground), blue($background));
+
+  @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+
+@function blend-screen-color($foreground, $background) {
+  @return (255 - ( ( (255 - $foreground) * (255 - $background)) / 256));
+}
+
+//--------------------------------
+// Exclusion
+//--------------------------------
+@function blend-exclusion ($foreground, $background) {
+  $bm-red: blend-exclusion-color(red($foreground), red($background));
+  $bm-green: blend-exclusion-color(green($foreground), green($background));
+  $bm-blue: blend-exclusion-color(blue($foreground), blue($background));
+
+  @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+
+@function blend-exclusion-color($foreground, $background) {
+  @return $background - ($background * (2 / 255) - 1) * $foreground;
+}
+
+//--------------------------------
+// Overlay
+//--------------------------------
+@function blend-overlay ($foreground, $background) {
+  $bm-red: blend-overlay-color(red($foreground), red($background));
+  $bm-green: blend-overlay-color(green($foreground), green($background));
+  $bm-blue: blend-overlay-color(blue($foreground), blue($background));
+
+  @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+
+@function blend-overlay-color($foreground, $background) {
+  @if $background <= 255 / 2 {
+    $foreground: (2 * $background * $foreground) / 255;
+  } @else {
+    $foreground: 255 - (255 - 2 * ($background - (255 / 2))) * (255 - $foreground) / 255;
+  }
+  @return $foreground;
+}
+
+//--------------------------------
+// Soft Light
+//--------------------------------
+@function blend-softlight ($foreground, $background) {
+  $bm-red: blend-softlight-color(red($foreground), red($background));
+  $bm-green: blend-softlight-color(green($foreground), green($background));
+  $bm-blue: blend-softlight-color(blue($foreground), blue($background));
+
+  @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+
+@function blend-softlight-color($foreground, $background) {
+  @if $background < 128 {
+    $foreground: (($foreground / 2) + 64) * $background * (2 / 255);
+  } @else {
+    $foreground: 255 - (191 - ($foreground / 2)) * (255 - $background) * (2 / 255);
+  }
+  @return $foreground;
+}
+
+//--------------------------------
+// Hard Light
+//--------------------------------
+@function blend-hardlight ($foreground, $background) {
+  $bm-red: blend-hardlight-color(red($foreground), red($background));
+  $bm-green: blend-hardlight-color(green($foreground), green($background));
+  $bm-blue: blend-hardlight-color(blue($foreground), blue($background));
+
+  @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+
+@function blend-hardlight-color($foreground, $background) {
+  $tmp-blend: $foreground;
+  @if $tmp-blend < 128 {
+    $foreground: $background * $tmp-blend * (2 / 255);
+  } @else {
+    $foreground: 255 - (255-$background) * (255-$tmp-blend) * (2 / 255);
+  }
+  @return $foreground;
+}
+
+//--------------------------------
+// Color Dodge
+//--------------------------------
+@function blend-colordodge ($foreground, $background) {
+  $bm-red: blend-colordodge-color(red($foreground), red($background));
+  $bm-green: blend-colordodge-color(green($foreground), green($background));
+  $bm-blue: blend-colordodge-color(blue($foreground), blue($background));
+
+  @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+
+@function blend-colordodge-color($foreground, $background) {
+  $tmp: $background * 256 / (255 - $foreground);
+  @if $tmp > 255 or $foreground == 255 {
+    $foreground: 255;
+  } @else {
+    $foreground: $tmp;
+  }
+  @return $foreground;
+}
+
+//--------------------------------
+// Color Burn
+//--------------------------------
+@function blend-colorburn ($foreground, $background) {
+  $bm-red: blend-colorburn-color(red($foreground), red($background));
+  $bm-green: blend-colorburn-color(green($foreground), green($background));
+  $bm-blue: blend-colorburn-color(blue($foreground), blue($background));
+
+  @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+
+@function blend-colorburn-color($foreground, $background) {
+  $tmp: (255 - ((255 - $background) * 255) / $foreground);
+
+  // TODO: hacked to replicate photoshop
+  @if $foreground == 0 {
+    $foreground: 255;
+  } @else if $tmp < 0 {
+    $foreground: 0;
+  } @else {
+    $foreground: $tmp;
+  }
+  @return $foreground;
+}
+
+//--------------------------------
+// Linear Light
+//--------------------------------
+@function blend-linearlight ($foreground, $background) {
+  $bm-red: blend-linearlight-color(red($foreground), red($background));
+  $bm-green: blend-linearlight-color(green($foreground), green($background));
+  $bm-blue: blend-linearlight-color(blue($foreground), blue($background));
+
+  @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+
+@function blend-linearlight-color($foreground, $background) {
+  @if $foreground < 128 {
+    $foreground: blend-linearburn-color($background, 2 * $foreground);
+  } @else {
+    $foreground: blend-lineardodge-color($background, 2 * ($foreground - 128));
+  }
+  @return $foreground;
+}
+
+//--------------------------------
+// Vivid Light
+//--------------------------------
+@function blend-vividlight ($foreground, $background) {
+  $bm-red: blend-vividlight-color(red($foreground), red($background));
+  $bm-green: blend-vividlight-color(green($foreground), green($background));
+  $bm-blue: blend-vividlight-color(blue($foreground), blue($background));
+
+  @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+
+@function blend-vividlight-color($foreground, $background) {
+  @if $foreground < 128 {
+    $foreground: blend-colorburn-color(2 * $foreground, $background);
+  } @else {
+    $foreground: blend-colordodge-color(2 * ($foreground - 128), $background);
+  }
+  @return $foreground;
+}
+
+//--------------------------------
+// Pin Light
+//--------------------------------
+@function blend-pinlight ($foreground, $background) {
+  $bm-red: blend-pinlight-color(red($foreground), red($background));
+  $bm-green: blend-pinlight-color(green($foreground), green($background));
+  $bm-blue: blend-pinlight-color(blue($foreground), blue($background));
+
+  @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+
+@function blend-pinlight-color($foreground, $background) {
+  @if $foreground < 128 {
+    $foreground: blend-darken-color($background, 2 * $foreground);
+  } @else {
+    $foreground: blend-lighten-color($background, 2 * ($foreground - 128));
+  }
+  @return $foreground;
+}
+
+//--------------------------------
+// Hard Mix
+//--------------------------------
+@function blend-hardmix ($foreground, $background) {
+  $bm-red: blend-hardmix-color(red($foreground), red($background));
+  $bm-green: blend-hardmix-color(green($foreground), green($background));
+  $bm-blue: blend-hardmix-color(blue($foreground), blue($background));
+
+  @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+
+@function blend-hardmix-color($foreground, $background) {
+  $tmp: blend-vividlight-color($foreground, $background);
+  @if $tmp < 128 {
+    $foreground: 0;
+  } @else {
+    $foreground: 255;
+  }
+  @return $foreground;
+}
+
+// Unique to Photoshop
+
+//--------------------------------
+// Color Blend
+//--------------------------------
+@function blend-colorblend ($foreground, $background) {
+  $foreground-hsv: color-to-hsv($foreground);
+  $background-hsv: color-to-hsv($background);
+
+  $bm-hsv: nth($foreground-hsv, 1), nth($foreground-hsv, 2), nth($background-hsv, 3);
+  $bm-color: hsv-to-color($bm-hsv);
+
+  @return blend-normal(rgba(red($bm-color), green($bm-color), blue($bm-color), opacity($foreground)), $background);
+}
+
+//--------------------------------
+// Dissolve
+//--------------------------------
+@function blend-dissolve ($foreground, $background) {
+  // The Dissolve blend mode acts on transparent and partially transparent pixels
+  // it treats transparency as a pixel pattern and applies a diffusion dither pattern.
+  // @see http://photoblogstop.com/photoshop/photoshop-blend-modes-explained
+  @return $foreground;
+}
+
+//--------------------------------
+// Divide
+//--------------------------------
+@function blend-divide ($foreground, $background) {
+  $bm-red: blend-divide-colors(red($foreground), red($background));
+  $bm-green: blend-divide-colors(green($foreground), green($background));
+  $bm-blue: blend-divide-colors(blue($foreground), blue($background));
+
+  @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+
+@function blend-divide-colors($foreground, $background) {
+  @return min((($background / 255) / ($foreground / 255)) * 255, 255);
+}
+
+//--------------------------------
+// Hue
+//--------------------------------
+@function blend-hue ($foreground, $background) {
+  $foreground-hsv: color-to-hsv($foreground);
+  $background-hsv: color-to-hsv($background);
+
+  $bm-hsv: nth($foreground-hsv, 1), nth($background-hsv, 2), nth($background-hsv, 3);
+  $bm-color: hsv-to-color($bm-hsv);
+
+  @return blend-normal(rgba(red($bm-color), green($bm-color), blue($bm-color), opacity($foreground)), $background);
+}
+
+//--------------------------------
+// Luminosity
+//--------------------------------
+@function blend-luminosity ($foreground, $background) {
+  $foreground-hsv: color-to-hsv($foreground);
+  $background-hsv: color-to-hsv($background);
+
+  $bm-hsv: nth($background-hsv, 1), nth($background-hsv, 2), nth($foreground-hsv, 3);
+  $bm-color: hsv-to-color($bm-hsv);
+
+  @return blend-normal(rgba(red($bm-color), green($bm-color), blue($bm-color), opacity($foreground)), $background);
+}
+
+//--------------------------------
+// Saturation
+//--------------------------------
+@function blend-saturation ($foreground, $background) {
+  $foreground-hsv: color-to-hsv($foreground);
+  $background-hsv: color-to-hsv($background);
+
+  $bm-hsv: nth($background-hsv, 1), nth($foreground-hsv, 2), nth($background-hsv, 3);
+  $bm-color: hsv-to-color($bm-hsv);
+
+  @return blend-normal(rgba(red($bm-color), green($bm-color), blue($bm-color), opacity($foreground)), $background);
+}
+
+//--------------------------------
+// Subtract
+//--------------------------------
+@function blend-subtract ($foreground, $background) {
+  $bm-red: max(red($background) - red($foreground), 0);
+  $bm-green: max(green($background) - green($foreground), 0);
+  $bm-blue: max(blue($background) - blue($foreground), 0);
+
+  @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+
+//--------------------------------
+// HSL and HSV
+//--------------------------------
+// @see https://gist.github.com/1069204
+@function hsv-to-hsl($h, $s: 0, $v: 0) {
+  @if type-of($h) == 'list' {
+    $v: nth($h, 3);
+    $s: nth($h, 2);
+    $h: nth($h, 1);
+  }
+
+  @if unit($h) == 'deg' {
+    $h: 3.1415 * 2 * ($h / 360deg);
+  }
+  @if unit($s) == '%' {
+    $s: 0 + ($s / 100%);
+  }
+  @if unit($v) == '%' {
+    $v: 0 + ($v / 100%);
+  }
+
+  $ss: $s * $v;
+  $ll: (2 - $s) * $v;
+
+  @if $ll <= 1 and $ll != 0 {
+    $ss: $ss / $ll;
+  } @else if ($ll == 2) {
+    $ss: 0;
+  } @else {
+    $ss: $ss / (2 - $ll);
+  }
+
+  $ll: $ll / 2;
+
+  @return 360deg * $h / (3.1415 * 2), percentage(max(0, min(1, $ss))), percentage(max(0, min(1, $ll)));
+}
+
+@function hsl-to-hsv($h, $ss: 0, $ll: 0) {
+  @if type-of($h) == 'list' {
+    $ll: nth($h, 3);
+    $ss: nth($h, 2);
+    $h: nth($h, 1);
+  } @else if type-of($h) == 'color' {
+    $ll: lightness($h);
+    $ss: saturation($h);
+    $h: hue($h);
+  }
+
+  @if unit($h) == 'deg' {
+    $h: 3.1415 * 2 * ($h / 360deg);
+  }
+  @if unit($ss) == '%' {
+    $ss: 0 + ($ss / 100%);
+  }
+  @if unit($ll) == '%' {
+    $ll: 0 + ($ll / 100%);
+  }
+
+  $ll: $ll * 2;
+
+  @if $ll <= 1 {
+    $ss: $ss * $ll;
+  } @else {
+    $ss: $ss * (2 - $ll);
+  }
+
+  $v: ($ll + $ss) / 2;
+  $s: if($ll + $ss == 0, 0, (2 * $ss) / ($ll + $ss));
+
+  @return 360deg * $h / (3.1415 * 2), percentage(max(0, min(1, $s))), percentage(max(0, min(1, $v)));
+}
+
+@function color-to-hsv($color) {
+  @return hsl-to-hsv($color);
+}
+
+@function hsv-to-color($h, $s: 0, $v: 0) {
+  $hsl: hsv-to-hsl($h, $s, $v);
+  @return hsl(nth($hsl, 1), nth($hsl, 2), nth($hsl, 3));
+}
+
+@function fade($color, $opacity) {
+  @return fade-in($color, $opacity/100%)
+}

resources/assets/sass/_mixins.scss

@@ -0,0 +1,903 @@
+@mixin clearfix() {
+  &:before,
+  &:after {
+    content: " "; /* 1 */
+    display: table; /* 2 */
+  }
+  &:after {
+    clear: both;
+  }
+}
+
+// Webkit-style focus
+@mixin tab-focus() {
+  // Default
+  outline: thin dotted #000;
+  outline-offset: -2px;
+}
+
+// Center-align a block level element
+@mixin center-block() {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+// Sizing shortcuts
+@mixin size($width, $height) {
+  width: $width;
+  height: $height;
+}
+
+@mixin square($size) {
+  @include size($size, $size);
+}
+
+@mixin flexbox() {
+  display: flex;
+}
+
+@mixin flex-inline() {
+  display: inline-flex;
+}
+
+@mixin align-items($argument) {
+  align-items: $argument;
+}
+
+@mixin flex-column {
+  flex-direction: column;
+}
+
+@mixin flex-row {
+  flex-direction: row;
+}
+
+// Placeholder text
+@mixin placeholder($color: $input-color-placeholder) {
+  &.placeholder {
+    color: $color;
+  }
+}
+
+// Placeholder text
+@mixin selected($color, $background) {
+  &::selection {
+    background: $background; /* Safari */
+    color: $color;
+  }
+}
+
+@mixin placeholder-height($height) {
+  &.placeholder {
+    line-height: $height;
+  }
+}
+
+// Text overflow
+// Requires inline-block or block for proper styling
+@mixin text-overflow() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// CSS image replacement
+@mixin text-hide() {
+  font: 0/0 a;
+  color: transparent;
+  text-shadow: none;
+  background-color: transparent;
+  border: 0;
+}
+
+@mixin invisible() {
+  visibility: hidden;
+}
+
+//Padding Helper Classes
+@mixin generate-paddings-options-prefix($prefix,$n, $j: 0) {
+  @if $j <= $n {
+    @for $i from $j through $n {
+      $step: $i*5;
+      .#{$prefix}-p-t-#{$step} {
+        margin-top: ($step*1px) !important;
+      }
+      .#{$prefix}-p-r-#{$step} {
+        margin-right: ($step*1px) !important;
+      }
+      .#{$prefix}-p-l-#{$step} {
+        margin-left: ($step*1px) !important;
+      }
+      .#{$prefix}-p-b-#{$step} {
+        margin-bottom: ($step*1px) !important;
+      }
+      //@include generate-margin-options($n, ($i + 1));
+    }
+  }
+}
+
+//Margins Helper Classes
+@mixin generate-margin-options-prefix($prefix,$n, $j: 0) {
+  @if $j <= $n {
+    @for $i from $j through $n {
+      $step: $i*5;
+      .#{$prefix}-m-t-#{$step} {
+        margin-top: ($step*1px) !important;
+      }
+      .#{$prefix}-m-r-#{$step} {
+        margin-right: ($step*1px) !important;
+      }
+      .#{$prefix}-m-l-#{$step} {
+        margin-left: ($step*1px) !important;
+      }
+      .#{$prefix}-m-b-#{$step} {
+        margin-bottom: ($step*1px) !important;
+      }
+      //@include generate-margin-options($n, ($i + 1));
+    }
+  }
+}
+
+// CSS3 PROPERTIES
+// --------------------------------------------------
+@mixin mask($arguments) {
+  mask: $arguments;
+}
+
+@mixin box_scale($scale) {
+  transform: scale($scale);
+}
+
+// Single side border-radius
+@mixin border-top-radius($radius) {
+  border-top-right-radius: $radius;
+  border-top-left-radius: $radius;
+}
+
+@mixin border-right-radius($radius) {
+  border-bottom-right-radius: $radius;
+  border-top-right-radius: $radius;
+}
+
+@mixin border-bottom-radius($radius) {
+  border-bottom-right-radius: $radius;
+  border-bottom-left-radius: $radius;
+}
+
+@mixin border-left-radius($radius) {
+  border-bottom-left-radius: $radius;
+  border-top-left-radius: $radius;
+}
+
+@mixin border-radius($radius) {
+  border-radius: $radius;
+}
+
+// Drop shadows
+@mixin box-shadow($shadow) {
+  box-shadow: $shadow;
+}
+
+@mixin animation($properties) {
+  animation: $properties;
+}
+
+// Transitions
+@mixin transition($transition) {
+  transition: $transition;
+}
+
+@mixin transition-property($transition-property) {
+  transition-property: $transition-property;
+}
+
+@mixin transition-delay($transition-delay) {
+  transition-delay: $transition-delay;
+}
+
+@mixin transition-duration($transition-duration) {
+  transition-duration: $transition-duration;
+}
+
+@mixin transition-transform($transition) {
+  transition: transform $transition;
+}
+
+// Transformations
+@mixin rotate($degrees) {
+  transform: rotate($degrees);
+}
+
+@mixin scale($ratio) {
+  transform: scale($ratio);
+}
+
+@mixin translate($x, $y) {
+  transform: translate($x, $y);
+}
+
+@mixin translateY($y) {
+  transform: translateY($y);
+}
+
+@mixin translateX($x) {
+  transform: translateX($x);
+}
+
+@mixin skew($x, $y) {
+  transform: skew($x, $y);
+}
+
+@mixin translate3d($x, $y, $z) {
+  transform: translate3d($x, $y, $z);
+}
+
+@mixin rotateX($degrees) {
+  transform: rotateX($degrees);
+}
+
+@mixin rotateY($degrees) {
+  transform: rotateY($degrees);
+}
+
+@mixin perspective($perspective) {
+  perspective: $perspective;
+}
+
+@mixin perspective-origin($perspective) {
+  perspective-origin: $perspective;
+}
+
+@mixin transform-origin($origin) {
+  transform-origin: $origin;
+}
+
+@mixin transform-style($style) {
+  transform-style: $style;
+}
+
+// Backface visibility
+// Prevent browsers from flickering when using CSS 3D transforms.
+// Default value is `visible`, but can be changed to `hidden`
+// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
+@mixin backface-visibility($visibility) {
+  backface-visibility: $visibility;
+}
+
+// Background clip
+@mixin background-clip($clip: border-box) {
+  background-clip: $clip;
+}
+
+// Box sizing
+@mixin box-sizing($boxmodel) {
+  box-sizing: $boxmodel;
+}
+
+// User select
+// For selecting text on the page
+@mixin user-select($select) {
+  user-select: $select;
+}
+
+// Resize anything
+@mixin resizable($direction) {
+  resize: $direction; // Options: horizontal, vertical, both
+  overflow: auto; // Safari fix
+}
+
+// CSS3 Content Columns
+@mixin content-columns($column-count, $column-gap: $grid-gutter-width) {
+  column-count: $column-count;
+  column-gap: $column-gap;
+}
+
+// Optional hyphenation
+@mixin hyphens($mode: auto) {
+  word-wrap: break-word;
+  hyphens: $mode;
+}
+
+// Opacity
+@mixin opacity($opacity) {
+  opacity: $opacity;
+  // IE8 filter
+  $opacity-ie: ($opacity * 100);
+  filter: alpha(opacity=$opacity-ie);
+}
+
+// GRADIENTS
+// --------------------------------------------------
+@mixin linear-gradient($from, $to) {
+  background: $to;
+  background: linear-gradient(to bottom, $from 0%, $to 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#{$from}, endColorstr=#{$to})
+}
+
+#gradient {
+  // Horizontal gradient, from left to right
+  //
+  // Creates two color stops, start and end, by specifying a color and position for each color stop.
+  // Color stops are not available in IE9 and below.
+  @mixin horizontal($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
+    // Standard, IE10
+    background: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent) repeat-x;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down
+  }
+  // Vertical gradient, from top to bottom
+  //
+  // Creates two color stops, start and end, by specifying a color and position for each color stop.
+  // Color stops are not available in IE9 and below.
+  @mixin vertical($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
+    // Standard, IE10
+    background: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent) repeat-x;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down
+  }
+  @mixin directional($start-color: #555, $end-color: #333, $deg: 45deg) {
+    // Standard, IE10
+    background: linear-gradient($deg, $start-color, $end-color) repeat-x;
+  }
+  @mixin horizontal-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
+    background: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color) no-repeat;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down, gets no color-stop at all for proper fallback
+  }
+  @mixin vertical-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
+    background: linear-gradient($start-color, $mid-color $color-stop, $end-color) no-repeat;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
+  }
+  @mixin radial($inner-color: #555, $outer-color: #333) {
+    background: radial-gradient(circle, $inner-color, $outer-color) no-repeat;
+  }
+  @mixin striped($color: rgba(255,255,255,.15), $angle: 45deg) {
+    background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
+  }
+}
+
+// Reset filters for IE
+//
+// When you need to remove a gradient background, do not forget to use this to reset
+// the IE filter for IE9 and below.
+@mixin reset-filter() {
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+}
+
+// Retina images
+//
+// Short retina mixin for setting background-image and -size
+@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
+  background-image: url("${file-1x}");
+  @media only screen and (min-device-pixel-ratio: 2),
+  only screen and (min-resolution: 192dpi),
+  only screen and (min-resolution: 2dppx) {
+    background-image: url("${file-2x}");
+    background-size: $width-1x $height-1x;
+  }
+}
+
+// Responsive image
+//
+// Keep images from scaling beyond the width of their parents.
+@mixin img-responsive($display: block) {
+  display: $display;
+  max-width: 100%; // Part 1: Set a maximum relative to the parent
+  height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
+}
+
+@mixin keyframe ($animation_name) {
+  @-webkit-keyframes #{$animation_name} {
+    @content;
+  }
+
+  @-moz-keyframes #{$animation_name} {
+    @content;
+  }
+
+  @-o-keyframes #{$animation_name} {
+    @content;
+  }
+
+  @keyframes #{$animation_name} {
+    @content;
+  }
+}
+
+// Import the Compass Plugin
+//--------------------------------
+// Normal
+//--------------------------------
+@function blend-normal ($foreground, $background) {
+  $opacity: opacity($foreground);
+  $background-opacity: opacity($background);
+  // calculate opacity
+  $bm-red: red($foreground) * $opacity + red($background) * $background-opacity * (1 - $opacity);
+  $bm-green: green($foreground) * $opacity + green($background) * $background-opacity * (1 - $opacity);
+  $bm-blue: blue($foreground) * $opacity + blue($background) * $background-opacity * (1 - $opacity);
+  @return rgb($bm-red, $bm-green, $bm-blue);
+}
+
+//--------------------------------
+// Multiply
+//--------------------------------
+@function blend-multiply ($foreground, $background) {
+  $bm-red: red($background) * red($foreground) / 255;
+  $bm-green: green($background) * green($foreground) / 255;
+  $bm-blue: blue($background) * blue($foreground) / 255;
+  @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+
+//--------------------------------
+// Lighten
+//--------------------------------
+@function blend-lighten ($foreground, $background) {
+  $bm-red: blend-lighten-color(red($foreground), red($background));
+  $bm-green: blend-lighten-color(green($foreground), green($background));
+  $bm-blue: blend-lighten-color(blue($foreground), blue($background));
+  @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+
+@function blend-lighten-color($foreground, $background) {
+  @if $background > $foreground {
+    $foreground: $background;
+  }
+  @return $foreground;
+}
+
+//--------------------------------
+// Darken
+//--------------------------------
+@function blend-darken ($foreground, $background) {
+  $bm-red: blend-darken-color(red($foreground), red($background));
+  $bm-green: blend-darken-color(green($foreground), green($background));
+  $bm-blue: blend-darken-color(blue($foreground), blue($background));
+  @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+
+@function blend-darken-color($foreground, $background) {
+  @if $background < $foreground {
+    $foreground: $background;
+  }
+  @return $foreground;
+}
+
+//--------------------------------
+// Darker Color
+//--------------------------------
+@function blend-darkercolor ($foreground, $background) {
+  $bm-red: red($foreground);
+  $bm-green: green($foreground);
+  $bm-blue: blue($foreground);
+  $background-red: red($background);
+  $background-green: green($background);
+  $background-blue: blue($background);
+  @if $background-red * 0.3 + $background-green * 0.59 + $background-blue * 0.11 <= $bm-red * 0.3 + $bm-green * 0.59 + $bm-blue * 0.11 {
+    $bm-red: $background-red;
+    $bm-green: $background-green;
+    $bm-blue: $background-blue;
+  }
+  @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+
+//--------------------------------
+// Lighter Color
+//--------------------------------
+@function blend-lightercolor ($foreground, $background) {
+  $bm-red: red($foreground);
+  $bm-green: green($foreground);
+  $bm-blue: blue($foreground);
+  $background-red: red($background);
+  $background-green: green($background);
+  $background-blue: blue($background);
+  @if $background-red * 0.3 + $background-green * 0.59 + $background-blue * 0.11 > $bm-red * 0.3 + $bm-green * 0.59 + $bm-blue * 0.11 {
+    $bm-red: $background-red;
+    $bm-green: $background-green;
+    $bm-blue: $background-blue;
+  }
+  @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+
+//--------------------------------
+// Linear Dodge
+//--------------------------------
+@function blend-lineardodge ($foreground, $background) {
+  $bm-red: blend-lineardodge-color(red($foreground), red($background));
+  $bm-green: blend-lineardodge-color(green($foreground), green($background));
+  $bm-blue: blend-lineardodge-color(blue($foreground), blue($background));
+  @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+
+@function blend-lineardodge-color($foreground, $background) {
+  @if $background + $foreground > 255 {
+    $foreground: 255;
+  } @else {
+    $foreground: $background + $foreground;
+  }
+  @return $foreground;
+}
+
+//--------------------------------
+// Linear Burn
+//--------------------------------
+@function blend-linearburn ($foreground, $background) {
+  $bm-red: blend-linearburn-color(red($foreground), red($background));
+  $bm-green: blend-linearburn-color(green($foreground), green($background));
+  $bm-blue: blend-linearburn-color(blue($foreground), blue($background));
+  @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+
+@function blend-linearburn-color($foreground, $background) {
+  @if $background + $foreground < 255 {
+    $foreground: 0;
+  } @else {
+    $foreground: $background + $foreground - 255;
+  }
+  @return $foreground;
+}
+
+//--------------------------------
+// Difference
+//--------------------------------
+@function blend-difference ($foreground, $background) {
+  $bm-red: abs(red($background) - red($foreground));
+  $bm-green: abs(green($background) - green($foreground));
+  $bm-blue: abs(blue($background) - blue($foreground));
+  @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+
+//--------------------------------
+// Screen
+//--------------------------------
+@function blend-screen ($foreground, $background) {
+  $bm-red: blend-screen-color(red($foreground), red($background));
+  $bm-green: blend-screen-color(green($foreground), green($background));
+  $bm-blue: blend-screen-color(blue($foreground), blue($background));
+  @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+
+@function blend-screen-color($foreground, $background) {
+  @return (255 - ( ( (255 - $foreground) * (255 - $background)) / 256));
+}
+
+//--------------------------------
+// Exclusion
+//--------------------------------
+@function blend-exclusion ($foreground, $background) {
+  $bm-red: blend-exclusion-color(red($foreground), red($background));
+  $bm-green: blend-exclusion-color(green($foreground), green($background));
+  $bm-blue: blend-exclusion-color(blue($foreground), blue($background));
+  @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+
+@function blend-exclusion-color($foreground, $background) {
+  @return $background - ($background * (2 / 255) - 1) * $foreground;
+}
+
+//--------------------------------
+// Overlay
+//--------------------------------
+@function blend-overlay ($foreground, $background) {
+  $bm-red: blend-overlay-color(red($foreground), red($background));
+  $bm-green: blend-overlay-color(green($foreground), green($background));
+  $bm-blue: blend-overlay-color(blue($foreground), blue($background));
+  @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+
+@function blend-overlay-color($foreground, $background) {
+  @if $background <= 255 / 2 {
+    $foreground: (2 * $background * $foreground) / 255;
+  } @else {
+    $foreground: 255 - (255 - 2 * ($background - (255 / 2))) * (255 - $foreground) / 255;
+  }
+  @return $foreground;
+}
+
+//--------------------------------
+// Soft Light
+//--------------------------------
+@function blend-softlight ($foreground, $background) {
+  $bm-red: blend-softlight-color(red($foreground), red($background));
+  $bm-green: blend-softlight-color(green($foreground), green($background));
+  $bm-blue: blend-softlight-color(blue($foreground), blue($background));
+  @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+
+@function blend-softlight-color($foreground, $background) {
+  @if $background < 128 {
+    $foreground: (($foreground / 2) + 64) * $background * (2 / 255);
+  } @else {
+    $foreground: 255 - (191 - ($foreground / 2)) * (255 - $background) * (2 / 255);
+  }
+  @return $foreground;
+}
+
+//--------------------------------
+// Hard Light
+//--------------------------------
+@function blend-hardlight ($foreground, $background) {
+  $bm-red: blend-hardlight-color(red($foreground), red($background));
+  $bm-green: blend-hardlight-color(green($foreground), green($background));
+  $bm-blue: blend-hardlight-color(blue($foreground), blue($background));
+  @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+
+@function blend-hardlight-color($foreground, $background) {
+  $tmp-blend: $foreground;
+  @if $tmp-blend < 128 {
+    $foreground: $background * $tmp-blend * (2 / 255);
+  } @else {
+    $foreground: 255 - (255-$background) * (255-$tmp-blend) * (2 / 255);
+  }
+  @return $foreground;
+}
+
+//--------------------------------
+// Color Dodge
+//--------------------------------
+@function blend-colordodge ($foreground, $background) {
+  $bm-red: blend-colordodge-color(red($foreground), red($background));
+  $bm-green: blend-colordodge-color(green($foreground), green($background));
+  $bm-blue: blend-colordodge-color(blue($foreground), blue($background));
+  @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+
+@function blend-colordodge-color($foreground, $background) {
+  $tmp: $background * 256 / (255 - $foreground);
+  @if $tmp > 255 or $foreground == 255 {
+    $foreground: 255;
+  } @else {
+    $foreground: $tmp;
+  }
+  @return $foreground;
+}
+
+//--------------------------------
+// Color Burn
+//--------------------------------
+@function blend-colorburn ($foreground, $background) {
+  $bm-red: blend-colorburn-color(red($foreground), red($background));
+  $bm-green: blend-colorburn-color(green($foreground), green($background));
+  $bm-blue: blend-colorburn-color(blue($foreground), blue($background));
+  @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+
+@function blend-colorburn-color($foreground, $background) {
+  $tmp: (255 - ((255 - $background) * 255) / $foreground);
+  // TODO: hacked to replicate photoshop
+  @if $foreground == 0 {
+    $foreground: 255;
+  } @else if $tmp < 0 {
+    $foreground: 0;
+  } @else {
+    $foreground: $tmp;
+  }
+  @return $foreground;
+}
+
+//--------------------------------
+// Linear Light
+//--------------------------------
+@function blend-linearlight ($foreground, $background) {
+  $bm-red: blend-linearlight-color(red($foreground), red($background));
+  $bm-green: blend-linearlight-color(green($foreground), green($background));
+  $bm-blue: blend-linearlight-color(blue($foreground), blue($background));
+  @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+
+@function blend-linearlight-color($foreground, $background) {
+  @if $foreground < 128 {
+    $foreground: blend-linearburn-color($background, 2 * $foreground);
+  } @else {
+    $foreground: blend-lineardodge-color($background, 2 * ($foreground - 128));
+  }
+  @return $foreground;
+}
+
+//--------------------------------
+// Vivid Light
+//--------------------------------
+@function blend-vividlight ($foreground, $background) {
+  $bm-red: blend-vividlight-color(red($foreground), red($background));
+  $bm-green: blend-vividlight-color(green($foreground), green($background));
+  $bm-blue: blend-vividlight-color(blue($foreground), blue($background));
+  @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+
+@function blend-vividlight-color($foreground, $background) {
+  @if $foreground < 128 {
+    $foreground: blend-colorburn-color(2 * $foreground, $background);
+  } @else {
+    $foreground: blend-colordodge-color(2 * ($foreground - 128), $background);
+  }
+  @return $foreground;
+}
+
+//--------------------------------
+// Pin Light
+//--------------------------------
+@function blend-pinlight ($foreground, $background) {
+  $bm-red: blend-pinlight-color(red($foreground), red($background));
+  $bm-green: blend-pinlight-color(green($foreground), green($background));
+  $bm-blue: blend-pinlight-color(blue($foreground), blue($background));
+  @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+
+@function blend-pinlight-color($foreground, $background) {
+  @if $foreground < 128 {
+    $foreground: blend-darken-color($background, 2 * $foreground);
+  } @else {
+    $foreground: blend-lighten-color($background, 2 * ($foreground - 128));
+  }
+  @return $foreground;
+}
+
+//--------------------------------
+// Hard Mix
+//--------------------------------
+@function blend-hardmix ($foreground, $background) {
+  $bm-red: blend-hardmix-color(red($foreground), red($background));
+  $bm-green: blend-hardmix-color(green($foreground), green($background));
+  $bm-blue: blend-hardmix-color(blue($foreground), blue($background));
+  @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+
+@function blend-hardmix-color($foreground, $background) {
+  $tmp: blend-vividlight-color($foreground, $background);
+  @if $tmp < 128 {
+    $foreground: 0;
+  } @else {
+    $foreground: 255;
+  }
+  @return $foreground;
+}
+
+// Unique to Photoshop
+//--------------------------------
+// Color Blend
+//--------------------------------
+@function blend-colorblend ($foreground, $background) {
+  $foreground-hsv: color-to-hsv($foreground);
+  $background-hsv: color-to-hsv($background);
+  $bm-hsv: nth($foreground-hsv, 1), nth($foreground-hsv, 2), nth($background-hsv, 3);
+  $bm-color: hsv-to-color($bm-hsv);
+  @return blend-normal(rgba(red($bm-color), green($bm-color), blue($bm-color), opacity($foreground)), $background);
+}
+
+//--------------------------------
+// Dissolve
+//--------------------------------
+@function blend-dissolve ($foreground, $background) {
+  // The Dissolve blend mode acts on transparent and partially transparent pixels
+  // it treats transparency as a pixel pattern and applies a diffusion dither pattern.
+  // @see http://photoblogstop.com/photoshop/photoshop-blend-modes-explained
+  @return $foreground;
+}
+
+//--------------------------------
+// Divide
+//--------------------------------
+@function blend-divide ($foreground, $background) {
+  $bm-red: blend-divide-colors(red($foreground), red($background));
+  $bm-green: blend-divide-colors(green($foreground), green($background));
+  $bm-blue: blend-divide-colors(blue($foreground), blue($background));
+  @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+
+@function blend-divide-colors($foreground, $background) {
+  @return min((($background / 255) / ($foreground / 255)) * 255, 255);
+}
+
+//--------------------------------
+// Hue
+//--------------------------------
+@function blend-hue ($foreground, $background) {
+  $foreground-hsv: color-to-hsv($foreground);
+  $background-hsv: color-to-hsv($background);
+  $bm-hsv: nth($foreground-hsv, 1), nth($background-hsv, 2), nth($background-hsv, 3);
+  $bm-color: hsv-to-color($bm-hsv);
+  @return blend-normal(rgba(red($bm-color), green($bm-color), blue($bm-color), opacity($foreground)), $background);
+}
+
+//--------------------------------
+// Luminosity
+//--------------------------------
+@function blend-luminosity ($foreground, $background) {
+  $foreground-hsv: color-to-hsv($foreground);
+  $background-hsv: color-to-hsv($background);
+  $bm-hsv: nth($background-hsv, 1), nth($background-hsv, 2), nth($foreground-hsv, 3);
+  $bm-color: hsv-to-color($bm-hsv);
+  @return blend-normal(rgba(red($bm-color), green($bm-color), blue($bm-color), opacity($foreground)), $background);
+}
+
+//--------------------------------
+// Saturation
+//--------------------------------
+@function blend-saturation ($foreground, $background) {
+  $foreground-hsv: color-to-hsv($foreground);
+  $background-hsv: color-to-hsv($background);
+  $bm-hsv: nth($background-hsv, 1), nth($foreground-hsv, 2), nth($background-hsv, 3);
+  $bm-color: hsv-to-color($bm-hsv);
+  @return blend-normal(rgba(red($bm-color), green($bm-color), blue($bm-color), opacity($foreground)), $background);
+}
+
+//--------------------------------
+// Subtract
+//--------------------------------
+@function blend-subtract ($foreground, $background) {
+  $bm-red: max(red($background) - red($foreground), 0);
+  $bm-green: max(green($background) - green($foreground), 0);
+  $bm-blue: max(blue($background) - blue($foreground), 0);
+  @return blend-normal(rgba($bm-red, $bm-green, $bm-blue, opacity($foreground)), $background);
+}
+
+//--------------------------------
+// HSL and HSV
+//--------------------------------
+// @see https://gist.github.com/1069204
+@function hsv-to-hsl($h, $s: 0, $v: 0) {
+  @if type-of($h) == 'list' {
+    $v: nth($h, 3);
+    $s: nth($h, 2);
+    $h: nth($h, 1);
+  }
+  @if unit($h) == 'deg' {
+    $h: 3.1415 * 2 * ($h / 360deg);
+  }
+  @if unit($s) == '%' {
+    $s: 0 + ($s / 100%);
+  }
+  @if unit($v) == '%' {
+    $v: 0 + ($v / 100%);
+  }
+  $ss: $s * $v;
+  $ll: (2 - $s) * $v;
+  @if $ll <= 1 and $ll != 0 {
+    $ss: $ss / $ll;
+  } @else if ($ll == 2) {
+    $ss: 0;
+  } @else {
+    $ss: $ss / (2 - $ll);
+  }
+  $ll: $ll / 2;
+  @return 360deg * $h / (3.1415 * 2), percentage(max(0, min(1, $ss))), percentage(max(0, min(1, $ll)));
+}
+
+@function hsl-to-hsv($h, $ss: 0, $ll: 0) {
+  @if type-of($h) == 'list' {
+    $ll: nth($h, 3);
+    $ss: nth($h, 2);
+    $h: nth($h, 1);
+  } @else if type-of($h) == 'color' {
+    $ll: lightness($h);
+    $ss: saturation($h);
+    $h: hue($h);
+  }
+  @if unit($h) == 'deg' {
+    $h: 3.1415 * 2 * ($h / 360deg);
+  }
+  @if unit($ss) == '%' {
+    $ss: 0 + ($ss / 100%);
+  }
+  @if unit($ll) == '%' {
+    $ll: 0 + ($ll / 100%);
+  }
+  $ll: $ll * 2;
+  @if $ll <= 1 {
+    $ss: $ss * $ll;
+  } @else {
+    $ss: $ss * (2 - $ll);
+  }
+  $v: ($ll + $ss) / 2;
+  $s: if($ll + $ss == 0, 0, (2 * $ss) / ($ll + $ss));
+  @return 360deg * $h / (3.1415 * 2), percentage(max(0, min(1, $s))), percentage(max(0, min(1, $v)));
+}
+
+@function color-to-hsv($color) {
+  @return hsl-to-hsv($color);
+}
+
+@function hsv-to-color($h, $s: 0, $v: 0) {
+  $hsl: hsv-to-hsl($h, $s, $v);
+  @return hsl(nth($hsl, 1), nth($hsl, 2), nth($hsl, 3));
+}
+
+

resources/assets/sass/_modules.scss

@@ -0,0 +1,96 @@
+// Structure
+// --------------------------------------------------
+
+//Z-indexes
+@import "modules/z_index";
+
+//Main Layout
+@import "modules/layout";
+
+//View
+@import "modules/view";
+
+//Chat
+@import "modules/chat";
+
+//Cards
+@import "modules/cards";
+
+//Typography
+@import "modules/typography";
+
+//Buttons
+@import "modules/buttons";
+
+//Alerts
+@import "modules/alerts";
+
+//Notification
+@import "modules/notifications";
+
+//Progress indicators
+@import "modules/progress_indicators";
+
+//Modals
+@import "modules/modals";
+
+//Tabs & Accordians
+@import "modules/tabs_accordian";
+
+//Sliders
+@import "modules/sliders";
+
+//Tree View
+@import "modules/treeview";
+
+//Nestables
+@import "modules/nestables";
+
+//Form Elements
+@import "modules/form_elements";
+
+//Tables
+@import "modules/tables";
+
+//Charts
+@import "modules/charts";
+
+//List
+@import "modules/list";
+
+//Social
+@import "modules/social";
+
+//Email
+@import "modules/email";
+
+//Calender
+@import "modules/calendar";
+
+//Login
+@import "modules/login";
+
+//Lock screen
+@import "modules/lock_screen";
+
+//Timeline
+@import "modules/timeline";
+
+//Gallery
+@import "modules/gallery";
+
+//Vector map
+@import "modules/vector_map";
+
+// Widgets
+@import "modules/widgets";
+
+//Misc
+@import "modules/misc";
+
+//Print
+@import "modules/print";
+
+//Print
+@import "modules/animation";
+

resources/assets/sass/_var.scss

@@ -0,0 +1,168 @@
+// Pages Default Theme
+// --------------------------------------------------
+// Copyright Reserved Revox - 2014
+// --------------------------------------------------
+
+$base-img-url: "../images" !default;
+$assets-url: "../../assets" !default;
+
+// Global Color
+// --------------------------------------------------
+// Base Grey Guided Color * change only $base-light
+// --------------------------------------------------
+
+//Base Grey Color
+$color-master: #3a3a3a !default;
+
+// Lighter Grey colors
+$color-master-light:mix($color-master, #fff, 16%) !default;
+$color-master-lighter:mix($color-master, #fff, 9.5%) !default;
+$color-master-lightest:mix($color-master, #fff, 3%) !default;
+
+// Darker Grey colors
+$color-master-dark:mix($color-master, #000, 45%) !default;
+$color-master-darker:mix($color-master, #000, 27%) !default;
+$color-master-darkest:mix($color-master, #000, 18%) !default;
+
+$color-white: #fff !default;
+$color-black: #000 !default;
+
+$color-success: #47b5ab !default;
+$color-complete : #69b6f3 !default;
+$color-primary: #ea336b !default;
+$color-warning: #f9dc6b !default;
+$color-danger: #ff3738 !default;
+$color-info: #4d6286 !default;
+
+$base-font-family: wf_segoe-ui_light,wf_segoe-ui_normal,"Helvetica Neue", Helvetica, Arial, sans-serif !default;
+
+// Menu Vars
+// --------------------------------------------------
+//Menu Animation Curve
+$menu-bezier:.05, .74, .27, .99 !default;
+$menu-icon-size:40px !default;
+$color-menu :#2a2e35 !default;
+$color-menu-dark :mix($color-menu, #000, 77%) !default;
+$color-menu-darker :mix($color-menu, #000, 90%) !default;
+
+//Generating Menu font color
+$menu-mix-temp : mix($color-menu, #fff, 92%) !default;
+$menu :blend-hardlight($menu-mix-temp,#fff) !default;
+$color-menu-light :$menu !default;
+//Menu Font Color
+$color-menu-link-hover:#fff !default;
+
+// Body
+// --------------------------------------------------
+$body-background: $color-master-lightest !default;
+$body-color: $color-master !default;
+$body-font-family : $base-font-family !default;
+$body-font-size : 13px !default;
+
+// Layout
+// --------------------------------------------------
+$layout-header-height:60px !default;
+$layout-mobile-header-height:48px !default;
+$layout-mobile-logo-scale:0.8 !default;
+$layout-sidepanel-width-collapsed : 70px !default;
+$layout-sidepanel-width:280px !default;
+$layout-sidepanel-pin-width:250px !default;
+$layout-right-quickview-width: 285px !default;
+$layout-user-profile-margin:25px !default;
+$layout-container-fixed-lg: 1700px !default;
+
+$layout-gutter-sm : 5px !default;
+
+//Horizontal Dropdown
+//---------------------------------------------------
+$navbar-width:45px;
+$menu-padding:25px;
+
+$header-lg-height:75px;
+$header-md-height:51px;
+$header-sm-height:50px;
+
+// Panels
+$panel-border-color: rgba(0, 0, 0, 0.07) !default;
+$panel-padding: 20px !default;
+$panel-heading-padding: $panel-padding $panel-padding 7px $panel-padding !default;
+$panel-heading-min-height: 48px !default;
+$panel-condensed-heading-padding: 13px 13px 0 13px !default;
+$panel-condensed-body-padding: 13px !default;
+$panel-condensed-heading-min-height: 48px !default;
+
+//Forms
+$form-group-height: 54px !default;
+$form-control-border-color: rgba($color-black, .07) !default;
+
+//Dashboard
+$dashboard-background : #f5f5f5 !default;
+
+//Mixing Color varriable for creating both light and dark colors
+$mix-percentage-dark: 81% !default;
+$mix-percentage-darker: 60% !default;
+$mix-percentage-light: 80% !default;
+$mix-percentage-lighter: 20% !default;
+
+//Lighter colors
+$color-success-light: mix($color-success, $color-white, $mix-percentage-light) !default;
+$color-success-lighter: mix($color-success, $color-white, $mix-percentage-lighter) !default;
+
+$color-complete-light: mix($color-complete, $color-white, $mix-percentage-light) !default;
+$color-complete-lighter: mix($color-complete, $color-white, $mix-percentage-lighter) !default;
+
+$color-primary-light: mix($color-primary, $color-white, $mix-percentage-light) !default;
+$color-primary-lighter: mix($color-primary, $color-white, $mix-percentage-lighter) !default;
+
+$color-warning-light: mix($color-warning, $color-white, $mix-percentage-light) !default;
+$color-warning-lighter: mix($color-warning, $color-white, $mix-percentage-lighter) !default;
+
+$color-danger-light: mix($color-danger, $color-white, $mix-percentage-light) !default;
+$color-danger-lighter: mix($color-danger, $color-white, $mix-percentage-lighter) !default;
+
+$color-info-light: mix($color-info, $color-white, $mix-percentage-light) !default;
+$color-info-lighter: mix($color-info, $color-white, $mix-percentage-lighter) !default;
+
+//Darker colors
+$color-success-dark: mix($color-success, $color-black, $mix-percentage-dark) !default;
+$color-success-darker: mix($color-success, $color-black, $mix-percentage-darker) !default;
+
+$color-complete-dark: mix($color-complete, $color-black, $mix-percentage-dark) !default;
+$color-complete-darker: mix($color-complete, $color-black, $mix-percentage-darker) !default;
+
+$color-primary-dark: mix($color-primary, $color-black, $mix-percentage-dark) !default;
+$color-primary-darker: mix($color-primary, $color-black, $mix-percentage-darker) !default;
+
+$color-warning-dark: mix($color-warning, $color-black, $mix-percentage-dark) !default;
+$color-warning-darker: mix($color-warning, $color-black, $mix-percentage-darker) !default;
+
+$color-danger-dark: mix($color-danger, $color-black, $mix-percentage-dark) !default;
+$color-danger-darker: mix($color-danger, $color-black, $mix-percentage-darker) !default;
+
+$color-info-dark: mix($color-info, $color-black, $mix-percentage-dark) !default;
+$color-info-darker: mix($color-info, $color-black, $mix-percentage-darker) !default;
+
+// Email colors
+// $sidebar-background-color : $color-menu-dark !default;
+$_sidebar-background-color: blend-multiply($color-menu-light, $color-menu-light);
+$sidebar-background-color : mix($_sidebar-background-color , #000, 80%);
+
+$secondary-sidebar-width : 250px;
+// Components
+// --------------------------------------------------
+//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
+
+//$padding-base-vertical:     6px !default;
+$padding-base-horizontal:   17px !default;
+
+// $padding-lg-vertical:    28px !default;
+$padding-lg-horizontal:  28px !default;
+
+// $padding-sm-vertical:    5px !default;
+$padding-sm-horizontal:  16px !default;
+
+$padding-sm-vertical: 2px !default;
+$padding-sm-horizontal: 16px !default;
+
+$padding-xs-vertical:       2px !default;
+$padding-xs-horizontal:     9px !default;

resources/assets/sass/main.scss

@@ -0,0 +1,40 @@
+/*------------------------------------------------------------------
+[Table of contents]
+
+1. Layouts
+2. Cards
+3. Typography
+4. Buttons
+5. Alerts
+6. Notifications
+7. Progress Indicators
+8. Modals
+9. Tabs & Accordians
+10. Form Elements
+11. Tables & Datatables
+12. Lists
+13. Misc
+14. Login
+15. Products
+16. Pricing Table
+17. Chat
+18. Email
+19. Drag & Drop
+20. Animation
+-------------------------------------------------------------------*/
+// Color functions
+@import "color";
+// Import Vars
+@import "var";
+// Mixins tools
+@import "mixins";
+// Includes of Modules
+@import "modules";
+// Responsive Util
+@import "responsive";
+
+
+
+
+
+

resources/assets/sass/modules/_alerts.scss

@@ -0,0 +1,93 @@
+
+/*------------------------------------------------------------------
+[7. Alerts]
+*/
+.alert {
+    background-image: none;
+    box-shadow: none;
+    text-shadow: none;
+    padding: 9px 19px 9px 15px;
+    border-radius: 3px;
+    font-size: 13px;
+    border-width:0;
+    @include transition(all 0.2s linear 0s);
+    &.bordered{
+        border-width: 1px;
+    }
+    .link {
+        color: #ce8f22;
+        font-weight: bold;
+    }
+    .alert-heading {
+        color: #ce8f22 !important;
+        margin-bottom: 5px;
+        font-weight: 600;
+    }
+    .btn-small {
+        position: relative;
+        top: -3.5px;
+    }
+    .button-set {
+        .btn {
+            position: relative;
+            top: 8px;
+        }
+    }
+    .close {
+        background: url("#{$base-img-url}/icons/noti-cross.png") no-repeat scroll 0 0 transparent;
+        background-position: -9px -10px;
+        width: 10px;
+        height: 9px;
+        position: relative;
+        opacity: 0.8;
+        top: 4.5px;
+        margin-left: 20px;
+        font-size: 0;
+        &:hover {
+            opacity: 1;
+        }
+    }
+    
+}
+
+/* Alert : Color Options
+------------------------------------
+*/
+.alert-danger, 
+.alert-error{
+    background-color: $color-danger-lighter;
+    color: $color-danger-darker;
+    border-color: $color-danger-darker;
+    .close {
+        background-position: -95px -10px !important;
+    }
+}
+.alert-warning{
+    background-color: $color-warning-lighter;
+    color: $color-warning-darker;
+    border-color: $color-warning-darker;
+}
+.alert-info{
+    background-color: $color-complete-lighter;
+    color: $color-complete-darker;
+    border-color: $color-complete-darker;
+    .close {
+        background-position: -67px -10px !important;
+    }
+}
+.alert-success{
+    background-color: $color-success-lighter;
+    color: $color-success-darker;
+    border-color: $color-success-darker;
+     .close {
+        background-position: -38px -10px !important;
+    }
+}
+.alert-default{
+    background-color: #fff;
+    color: $color-master;
+    border-color: $color-master-light;
+     .close {
+        background-position: -67px -10px !important;
+    }
+}

resources/assets/sass/modules/_animation.scss

@@ -0,0 +1,112 @@
+@include keyframe(slide-out-up) {
+  0% {
+    transform: translate(0,0);
+  }
+
+  100% {
+    transform: translate(0,-300%);
+  }
+}
+
+@include keyframe(slide-out-down) {
+  0% {
+    transform: translate(0,0);
+  }
+
+  100% {
+    transform: translate(0,300%);
+  }
+}
+
+@include keyframe(slide-out-left) {
+  0% {
+    transform: translate(0,0);
+  }
+
+  100% {
+    transform: translate(-300%,0);
+  }
+}
+
+@include keyframe(slide-out-right) {
+  0% {
+    transform: translate(0,0);
+  }
+
+  100% {
+    transform: translate(300%,0);
+  }
+}
+
+@include keyframe(slide-in-up) {
+  0% {
+    transform: translate(0,-100%);
+  }
+
+  100% {
+    transform: translate(0,0);
+  }
+}
+
+@include keyframe(slide-in-down) {
+  0% {
+    transform: translate(0,100%);
+  }
+
+  100% {
+    transform: translate(0,0);
+  }
+}
+
+@include keyframe(slide-in-left) {
+  0% {
+    transform: translate(-100%,0);
+  }
+
+  100% {
+    transform: translate(0,0);
+  }
+}
+
+@include keyframe(slide-in-right) {
+  0% {
+    transform: translate(100%,0);
+  }
+
+  100% {
+    transform: translate(0,0);
+  }
+}
+
+@include keyframe(fade-in) {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@include keyframe(fade-out) {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@each $type in ('in', 'out') {
+  @each $direction in ('up', 'down', 'left', 'right') {
+
+    .slide-#{$type}-#{$direction}{
+      @include animation(slide-#{$type}-#{$direction});
+    }
+  }
+}
+
+@each $type in ('in', 'out') {
+  .fade-#{$type} {
+    @include animation(fade-#{$type} ease-in);
+  }
+}

resources/assets/sass/modules/_buttons.scss

@@ -0,0 +1,642 @@
+/*------------------------------------------------------------------
+[6. Buttons]
+*/
+
+/*
+[Buttons Base Styles]
+*/
+
+// Mixins
+// --------------------------------------------------
+
+// Creates contextual buttons
+@mixin button($text-color, $background-color, $border-color) {
+    &,
+    &:focus{
+    color: $text-color;
+    background-color: $background-color;
+    border-color: $background-color;
+    }
+
+  &.active,
+  &:active,
+  &.active:focus,
+  &:active:focus,
+  &:active:hover,
+  .show .dropdown-toggle#{&} {
+    background-color: mix($background-color, $color-black, $mix-percentage-dark);
+    border-color: mix($background-color, $color-black, $mix-percentage-dark);
+    color:$text-color;
+  }
+  &.hover,
+  &:hover,
+  .show .dropdown-toggle#{&}
+  {
+    background-color: mix($background-color, $color-white, $mix-percentage-light);
+    border-color: mix($background-color, $color-white, $mix-percentage-light);
+    color: $text-color;
+  }
+    &.active:hover{
+    background: mix($background-color, #000, 86%) ;
+    border-color: mix($background-color, #000, 86%) ;
+    }
+
+      &.disabled,
+      &[disabled],
+      fieldset[disabled] & {
+        &,
+        &:hover,
+        &:focus,
+        &:active,
+        &.active {
+          background-color: $background-color;
+              border-color: $border-color;
+        }
+      }
+
+    .badge {
+        color: $background-color;
+        background-color: $text-color;
+    }
+}
+.btn {
+    font-family: Arial, sans-serif;
+    font-size: 14px;
+    font-weight: normal;
+    letter-spacing: 0.01em;
+    -webkit-font-smoothing:antialiased;
+    -webkit-text-size-adjust:100%;
+    -ms-text-size-adjust:100%;
+    -webkit-font-feature-settings: "kern" 1;
+    -moz-font-feature-settings: "kern" 1;
+    margin-bottom: 0;
+    border: 1px solid $color-master-lighter;
+    text-align: center;
+    vertical-align: middle;
+    cursor: pointer;
+    @include border-radius(3px);
+    background-image: none !important;
+    color: $color-master;
+    background-color:  $color-white ;
+    text-shadow: none;
+    box-shadow: none;
+    line-height: 21px;
+    position: relative;
+    transition: color 0.1s linear 0s,background-color 0.1s linear 0s,opacity 0.2s linear 0s !important;
+    padding: 6px $padding-base-horizontal;
+    &:hover{
+        background-color: #fafafa;
+        border: 1px solid fade-out($color-master,.73);
+        color: #333;
+    }
+    &.active{
+        border-color: $color-master-light;
+        background: #fff;
+        color: #333;
+    }
+    &:focus,
+    &:active:focus,
+    &.active:focus {
+        outline: none !important;
+        outline-style: none;
+        color: #333;
+    }
+    .caret {
+        margin-left: 3px;
+        &.single {
+            margin-left: 0px;
+        }
+    }
+    &:hover,
+    &:focus,
+    &:active,
+    &.active,
+    &.disabled,
+    &[disabled] {
+        box-shadow: none;
+    }
+}
+// Fix for chrome's button outline on focus
+button:focus{
+    outline: none !important;
+}
+/*
+Alternate buttons
+--------------------------------------------------
+*/
+
+.btn-primary {
+    @include button($color-white, $color-primary, $color-primary);
+}
+.btn-success {
+    @include button($color-white, $color-success, $color-success);
+}
+.btn-complete{
+    @include button($color-white, $color-complete, $color-complete);
+}
+.btn-info {
+    @include button($color-white, $color-info, $color-info);
+}
+.btn-warning {
+    @include button($color-white, $color-warning, $color-warning);
+}
+.btn-danger {
+    @include button($color-white, $color-danger, $color-danger);
+}
+.btn-default, .btn-default:focus{
+    color: #5e5e5e;
+    background-color: $color-white;
+    border-color: $color-master-lighter;
+}
+.btn-default {
+  &.active, &:active, &.active:focus, &:active:focus, &:active:hover{
+    background-color: $color-master-lighter;
+    border-color: $color-master-light;
+    color:$color-master-dark;
+  }
+  &.hover, &:hover{
+    background-color: $color-master-lightest;
+    border-color: fade-out($color-master,.73);
+    color: $color-master-darker;
+  }
+  &.active:hover{
+    background: mix($color-white, #000, 94%) ;
+  }
+}
+
+// Link button
+.btn-link{
+    color: #5e5e5e;
+    background-color: transparent;
+    border: none;
+    &:hover, &:focus, &:active, &.active, &.disabled, &[disabled] {
+        background-color: transparent;
+        border: none;
+        text-decoration: none;
+        outline: none;
+    }
+}
+//File Input Btn
+.btn-file {
+    position: relative;
+    overflow: hidden;
+}
+.btn-file input[type=file] {
+    position: absolute;
+    top: 0;
+    right: 0;
+    min-width: 100%;
+    min-height: 100%;
+    font-size: 100px;
+    text-align: right;
+    filter: alpha(opacity=0);
+    opacity: 0;
+    background: red;
+    cursor: inherit;
+    display: block;
+}
+/*
+Button Sizes
+--------------------------------------------------
+*/
+
+.btn-lg, .btn-group-lg > .btn{
+    padding-left: $padding-lg-horizontal;
+    padding-right: $padding-lg-horizontal;
+    line-height: 22px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+.btn-sm, .btn-group-sm > .btn{
+    padding-left: $padding-sm-horizontal;
+    padding-right: $padding-sm-horizontal;
+    font-size: 11.9px;
+    line-height: 20px;
+}
+.btn-xs, .btn-group-xs > .btn{
+    padding: $padding-xs-vertical $padding-xs-horizontal;
+    font-size: 10.5px;
+}
+.btn-cons {
+    margin-right: 5px;
+    min-width: 120px;
+}
+
+/*
+Rounded buttons
+--------------------------------------------------
+*/
+.btn-rounded{
+    border-radius: 100px !important;
+}
+
+/*
+ Dropdown menus
+--------------------------------------------------
+*/
+.show{
+    .btn-group#{&} .dropdown-toggle,
+    & .dropdown-toggle,
+    &.dropdown-default .dropdown-toggle{
+        box-shadow: none;
+    }
+
+}
+
+/* Pages default dropdown */
+.dropdown-default{
+    display: inline-block;
+    &.toggle-only{
+        padding-left: 9px;
+        padding-right: 9px;
+        &:after{
+            position: initial;
+        }
+    }
+    &.show{
+        & > .btn {
+            &.dropdown-toggle {
+                border-color: transparent !important;
+                background: transparent !important;
+                z-index: $zIndex-navbar - 9 !important;
+            }
+        }
+        .dropdown-menu {
+            opacity: 1;
+            transform: scale(1, 1);
+            z-index: $zIndex-dropdown;
+            .dropdown-item {
+                visibility: visible;
+            }
+        }
+        &.dropup {
+            & > .btn-primary + .dropdown-menu:after,
+            & > .btn-success + .dropdown-menu:after,
+            & > .btn-complete + .dropdown-menu:after,
+            & > .btn-warning + .dropdown-menu:after,
+            & > .btn-danger + .dropdown-menu:after,
+            & > .btn-info + .dropdown-menu:after{
+                top: auto;
+                bottom: 0;
+            }
+        }
+        & > .btn-primary + .dropdown-menu:after,
+        & > .btn-success + .dropdown-menu:after,
+        & > .btn-complete + .dropdown-menu:after,
+        & > .btn-warning + .dropdown-menu:after,
+        & > .btn-danger + .dropdown-menu:after,
+        & > .btn-info + .dropdown-menu:after{
+            top:0;
+            height: 42px;
+        }
+        & > .btn-primary + .dropdown-menu:after{
+            background-color: $color-primary;
+        }
+        & > .btn-success + .dropdown-menu:after{
+            background-color: $color-success;
+        }
+        & > .btn-complete + .dropdown-menu:after{
+            background-color: $color-complete;
+        }
+        & > .btn-warning + .dropdown-menu:after{
+            background-color: $color-warning;
+        }
+        & > .btn-danger + .dropdown-menu:after{
+            background-color: $color-danger;
+        }
+        & > .btn-info + .dropdown-menu:after{
+            background-color: $color-info;
+        }
+    }
+
+
+    &.dropup {
+        .btn.dropdown-toggle{
+            &.btn-lg{
+                & + .dropdown-menu{
+                    margin-bottom: -47px;
+                    padding-bottom: 49px;
+                    &:after{
+                           bottom: 49px;
+                    }
+                }
+            }
+            &.btn-sm{
+                & + .dropdown-menu{
+                    margin-bottom: -34px;
+                    padding-bottom: 36px;
+                    &:after{
+                           bottom: 36px;
+                    }
+                }
+            }
+            &.btn-xs{
+                & + .dropdown-menu{
+                    margin-bottom: -29px;
+                    padding-bottom: 31px;
+                    &:after{
+                           bottom: 31px;
+                    }
+                }
+            }
+        }
+        .dropdown-menu{
+            margin-bottom: -40px;
+            padding: 0 3px 44px 0 !important;
+            transform-origin: center bottom 0;
+            &:after{
+                bottom: 43px;
+                top: auto !important;
+            }
+        }
+    }
+    .btn.dropdown-toggle{
+        text-align: left;
+        padding-right: $padding-base-horizontal + 10px;
+        &.btn-lg{
+            padding-right: $padding-lg-horizontal + 14px;
+            &:after{
+                right: 26px;
+            }
+            & + .dropdown-menu{
+                margin-top: -47px;
+                padding-top: 49px;
+                &:after{
+                       top: 49px;
+                }
+            }
+        }
+        &.btn-sm{
+            padding-right: $padding-sm-horizontal + 10px;
+            &:after{
+                right: 16px;
+            }
+            & + .dropdown-menu{
+                margin-top: -34px;
+                padding-top: 36px;
+                &:after{
+                       top: 36px;
+                }
+            }
+        }
+        &.btn-xs{
+            padding-right: $padding-xs-horizontal + 12px;
+            &:after{
+                right: 8px;
+            }
+            & + .dropdown-menu{
+                margin-top: -29px;
+                padding-top: 31px;
+                &:after{
+                       top: 31px;
+                }
+            }
+        }
+        &:after{
+            position: absolute;
+            right: 15px;
+            top:50%;
+            margin-top: -2px;
+        }
+    }
+    .btn-rounded{
+        padding-left: 17px;
+        padding-right: 17px;
+    }
+    .btn-rounded + .dropdown-menu{
+        border-radius: 17px;
+    }
+    .dropdown-menu {
+        margin-top: -40px;
+        padding-top: 42px;
+        overflow: hidden;
+        backface-visibility: hidden;
+        display: block;
+        opacity: 0;
+        transform: scale(1, 0);
+        transform-origin: center top 0;
+        @include transition(all 170ms cubic-bezier(.05, .74, .27, .99) 0s);
+        z-index: -1;
+        &:after{
+            content: "";
+            position: absolute;
+            height: 1px;
+            left: 0;
+            top: 42px;
+            background: $color-master-light;
+            width: 100%;
+        }
+        .dropdown-item {
+            visibility: hidden;
+        }
+    }
+}
+
+.dropdown-toggle{
+    &:after{
+            position: absolute;
+            right: 15px;
+            top: 50%;
+            margin-top: -2px;
+    }
+}
+
+.dropdown-menu {
+    position: absolute;
+    display: none;
+    float: left;
+    list-style: none;
+    text-shadow: none;
+    @include box-shadow(0px 0px 5px fade-out($color-master, .8));
+    border: none;
+    border-radius: 3px;
+    font-size: 13px;
+    margin: 0;
+    background:$color-master-lightest;
+    min-width: 50px;
+    z-index: $zIndex-dropdown !important;
+    .divider {
+        background-color: $color-master-light;
+        height: 1px;
+        margin: 3px 0;
+        border-bottom: 0px;
+    }
+    & > .dropdown-item {
+        padding-left: 0px;
+        line-height: 35px;
+        color: $color-master;
+        padding: 0 20px;
+        border-radius: 3px;
+        display: block;
+        clear: both;
+        white-space: nowrap;
+        text-align:left;
+        &:hover, &:focus{
+            color: $color-master-darker;
+            text-decoration: none;
+        }
+        &:first-child{
+            padding-top: 9px;
+        }
+        &:last-child{
+            padding-bottom: 9px;
+        }
+        &.dropdown-header{
+            padding: 3px 20px;
+        }
+        &.active {
+            &,
+            &:hover,
+            &:focus{
+                color: $color-master-darker;
+                text-decoration: none;
+                background-color: $color-master-lighter;
+            }
+        }
+        &.disabled {
+            &,
+            &:hover,
+            &:focus{
+                color: lighten($color-master, 20%);
+            }
+            &:hover, &:focus{
+                text-decoration: none;
+                cursor: default;
+            }
+        }
+    }
+}
+
+.dropdown-backdrop{
+    z-index: $zIndex-dropdownMask;
+}
+/*
+Animated buttons
+--------------------------------------------------
+*/
+
+.btn-animated{
+        overflow: hidden;
+        @include backface-visibility(hidden);
+        @include transform-style(preserve-3d);
+    & > span {
+        display: inline-block;
+        width: 100%;
+        height: 100%;
+        @include backface-visibility(hidden);
+        @include transition(all 0.2s ease-in-out);
+        @include transform-style(preserve-3d);
+    }
+    &:before {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        font-size: 100%;
+        line-height: 2.5;
+        @include transition(all 0.2s ease-in-out);
+    }
+    &:after{
+        content: '';
+        position: absolute;
+        z-index: -1;
+        @include transition(all 0.2s ease-in-out);
+    }
+    &.from-top{
+        &:before{
+            left: 0;
+            top: -100%;
+        }
+        &:hover, &.show-icon{
+            &:before{
+            top: 0;
+            }
+            & > span{
+                @include translateY(300%);
+            }
+        }
+    }
+    &.from-left{
+        &:before{
+            left: -100%;
+            top: 0;
+        }
+        &:hover, &.show-icon{
+            &:before{
+            left: 0;
+            }
+            & > span{
+                @include translateX(200%);
+            }
+        }
+    }
+    &.fa{
+        &:before {
+            font-family: FontAwesome;
+        }
+    }
+   &.pg{
+        &:before {
+            font-family: "pages-icon";
+        }
+    }
+}
+
+/*
+Tag buttons
+--------------------------------------------------
+*/
+
+.btn-tag{
+    line-height: 17px;
+    border-radius: 17px 3px 3px 17px;
+    padding: 5px 19px;
+    &:hover, &.hover{
+        border-color:transparent;
+    }
+    &.btn-tag-light{
+        background: #fafdff;
+        color: #5b8ca5;
+        border:1px solid #cbe4f0;
+        &:hover{
+            background: #fff;
+        }
+    }
+    &.btn-tag-dark{
+        background: $color-master-light;
+        color:$color-master;
+        &:hover{
+            background: lighten($color-master-light, 2%);
+        }
+    }
+    &.btn-tag-rounded{
+        border-radius: 17px;
+    }
+}
+
+/*
+Misc buttons
+--------------------------------------------------
+*/
+.btn-toolbar .btn{
+    padding-left:14px;
+    padding-right: 14px;
+}
+
+.pager .disabled{
+    > button,
+    > button:hover,
+    > button:focus,
+    > span{
+        cursor: not-allowed;
+        opacity: .5;
+    }
+}
+
+.modal-content{
+    a.btn-primary:not([href]):not([tabindex]){
+        color: #fff;
+        &:hover, &:focus {
+            color: #fff;
+        }
+    }
+}

resources/assets/sass/modules/_calendar.scss

@@ -0,0 +1,719 @@
+/*------------------------------------------------------------------
+[21. Calendar App]
+*/
+
+$cell-height : 80;
+body.overflow-hidden{
+	overflow: hidden;
+}
+
+/*
+Calendar
+--------------------------------------------------
+Header / .calendar-header
+Years / .years .year
+Months / .months
+Weeks / .weeks-wrapper .week
+Grid / .calendar-container
+Events / .event-container
+*/
+.calendar{
+	height: 100%;
+	.drager{
+		overflow: hidden;
+		.scroll-element{
+			display: none;
+		}
+	}
+	&.month{
+		padding-left:5px;
+		.options .date{
+			margin-bottom: 22px;
+		}
+		.week-dragger{
+			display: none;
+		}
+		.calendar-container{
+			border-top: 1px solid $color-master-light;
+			padding-top: 0;
+			height:calc(100% - 169px);
+			.view .tble{
+				width: 100%;
+				.thead .tcell .weekday{
+					margin-left: 10px;
+				}
+			}
+		}
+	}
+	.calendar-header{
+			height: 43px;
+			background-color:$color-master-lightest;
+			line-height: 43px;
+			padding-left:60px;
+		& > .drager{
+			width:calc(100% - 141px);
+			border-right:1px solid rgba(0, 0, 0, 0.33);
+			line-height: 35px;
+		}
+		.years{
+			width: auto;
+			list-style: none;
+			white-space: nowrap;
+			margin-top: 5px;
+			.year{
+				display: inline-block;
+				width: 69px;
+				text-align: center;
+				white-space: nowrap;
+				font-family: "Segoe UI","Helvetica Neue", Helvetica, Arial, sans-serif;
+				& > a{
+					color: rgba(0, 0, 0, 0.5);
+					position: relative;
+					&.active{
+						color: #000;
+					}
+					&.has-event{
+						&:before{
+							position: absolute;
+							content: '\25CF';
+							width: 100%;
+							font-size: 8px;
+							line-height: 6px;
+							text-align: center;
+							color:  rgba(0, 0, 0, 0.44);
+						}
+					}
+				}
+			}
+		}
+	}
+	.options{
+		padding-left:60px;
+		margin-top: 15px;
+		.months{
+			width: auto;
+			white-space: nowrap;
+			height: 43px;
+			line-height: 43px;
+			.month{
+				min-width: 30px;
+				max-width: 100px;
+				padding: 0 10px;
+				display: inline-block;
+				& > a{
+					position: relative;
+					color: rgba(0, 0, 0, 0.28);
+					&:hover{
+						color: rgba(0, 0, 0, 0.33);
+					}
+					&.active{
+						color: rgba(0, 0, 0, 1);
+					}
+					&.has-event{
+						&:before{
+							position: absolute;
+							content: '\25CF';
+							top: -6px;
+							width: 100%;
+							font-size: 8px;
+							line-height: 6px;
+							text-align: center;
+							color:  rgba(0, 0, 0, 0.33);
+						}
+					}
+				}
+			}
+		}
+		.date{
+			margin-bottom: 20px;
+		}
+	}
+	.week-dragger{
+		border-bottom: 1px solid #e6e6e6;
+		margin-left:-20px;
+	}
+	.weeks-wrapper{
+		width: auto;
+		white-space: nowrap;
+		padding-left:10px;
+		padding-bottom: 12px;
+		margin-bottom: 5px;
+		margin-left: 20px;
+		.week{
+			display: inline-block;
+			position: relative;
+			padding-left:30px;
+			padding-right:30px;
+			&:first-child{
+				padding-left:4px;
+			}
+			&:last-child{
+				padding-left:0px;
+			}
+			&:before{
+				content: '';
+				position: absolute;
+				right:-20px;
+				bottom: 6px;
+				height: 20px;
+				width: 20px;
+				border-left:1px dotted rgba(0, 0, 0, 0.3);
+			}
+			&.active{
+				.day-wrapper .week-date{
+					.day{
+						& > a{
+						color: rgba(0, 0, 0, 0.6);	
+						}
+					}
+
+				}
+			}
+			.day-wrapper{
+				display: inline-block;
+				.week-date{
+					text-align: center;
+					width: 21px;
+					height: 21px;
+					margin: 6px;
+					border-radius:99px;
+					&.current-date{
+						background-color: $color-master-light;
+					}
+					&.active{
+						background-color: $color-success;
+						.day > a{
+							font-weight: bold;
+							opacity: 1;
+							color: #fff;
+						}
+					}
+					.day > a{
+						letter-spacing: -0.01em;
+					}
+				}
+				.week-day{
+					text-align: center;
+				}
+				.day{
+					display: inline-block;
+					text-align: center;
+					position: relative;
+					z-index: 10;
+					padding: 1px 0;
+					font-size: 12px;
+					color: rgba(0, 0, 0, 0.3);
+					& > a{
+						position: relative;
+						width: 100%;
+						display: block;
+						text-align: center;
+						color: rgba(0, 0, 0, 0.3);
+						opacity: 0.7;
+						font-weight: 600;
+						&.has-event{
+							&:before{
+								position: absolute;
+								content: '\25CF';
+								top: -10px;
+								width: 100%;
+								font-size: 8px;
+								line-height: 6px;
+								text-align: center;
+								color:$color-success;
+							}
+						}
+					}
+
+					&.week-header{
+						text-transform: uppercase;
+						text-align: center;
+						font-size: 10px;
+						letter-spacing: 0.06em;
+            			font-size: 10.5px;	
+					}
+				}
+			}
+		}
+	}
+	.calendar-container{
+		position: relative;
+		height: calc(100% - 200px);
+		padding-top: 10px;
+		.view{
+			&.month-view{
+				.tble .trow .tcell{
+					position: relative;
+					height: 20%;
+					clear: both;
+					.cell-inner{
+						.holder{
+						position: absolute;
+						top: 37px;
+						left: 0;
+						right: 0;
+						bottom: 0;
+						}
+					}
+					&.active{
+						background: #fff;
+						.cell-inner{
+							background-color: #fef8e7;
+						}
+					}
+					&.not{
+						background-color: $color-master-lightest;
+					}
+					&.drop-target{
+						.cell-inner{
+							background-color: $color-master-lightest;
+						}
+					}
+					.cell-inner:only-child, .cell-inner{
+						height: 100%;
+						border-bottom: 1px solid $color-master-light;
+						position: relative;
+					}
+					.month-date{
+						position: relative;
+						text-align: center;
+						margin-top: 10px;
+						margin-right: 6px;
+						width: 25px;
+						height: 25px;
+						padding-top: 2px;
+						margin: 6px;
+						float: right;
+						display: block;
+						z-index:1;
+						border-radius:99px;
+						&.current-date{
+							background-color: $color-master-light;
+						}
+						&.active{
+							background-color: $color-success;
+							font-weight: bold;
+							opacity: 1;
+							color: #fff;
+						}
+					}
+					.event-container{
+						height: 30px;
+						position: relative !important;
+						min-height: 30px !important;
+						.event-inner{
+						 	padding: 8px;
+						}
+					}
+				}
+				.ghost-element{
+					height: 30px;
+    				position: relative;
+    				width: 100%;
+				}
+				.grid .tble{
+					height: 100%;
+					width: 100%;	
+				}
+				.event-container .event-title{
+					font-size: 12px;
+				}
+			}
+			&.day-view .tble{
+				white-space: nowrap;
+				.thead{
+					white-space: nowrap;
+					overflow: hidden;
+					display: inline-block;
+				}
+				.tcell{
+					display: none;
+					max-width: 100%;
+					width: 100%;
+					&.active{
+						display: inline-block;
+					}		
+				}
+				.trow{
+					display: block;
+					height: 80px;
+					.tcell.active{
+						background-color:#fff;
+					}
+				}
+			}
+			width: 100%;
+			height: 100%;
+			white-space: nowrap;
+			-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;
+			//DEFAULT WEEKVIEW WITH 30 min Slot
+			.tble{
+				display: inline-table;
+				width: calc(100% - 50px);
+				vertical-align: top;
+				position: relative;
+				.thead{
+					display: table-row;
+					width: 100%;
+					background: #fff;
+					.tcell{
+						padding: 10px;
+						height: $cell-height/2 * 1px;
+						position: relative;
+						.weekday{
+							font-size: 12px;
+							display: inline-block;
+							color: rgba(0, 0, 0, 0.51);
+						}
+						.weekdate{
+							font-size: 14px;
+							display: inline-block;
+							margin-right:10px;
+							color: rgba(0, 0, 0, 0.77);
+						}
+						&.active{
+							.weekdate, .weekday{
+							color:rgba(0, 0, 0, 1);
+							}
+						}
+						&:before{
+							content: '';
+							border-bottom: 1px solid $color-master-light;
+							width: calc(100% - 18px);
+							position: absolute;
+							bottom: 0;
+						}
+						.event-bubble{
+							display: inline-block;
+							width: 8px;
+							height: 8px;
+							margin-left:5px;
+							float:right;
+							border-radius:30px;
+						}
+					}
+				}
+				.tcell{
+					display: table-cell;
+					height: $cell-height * 1px;
+					max-width: 14.2857%;
+					width: 14.2857%;
+				}
+				.trow{
+					display:table-row;
+					.tcell{
+						background: #fff;
+						padding: 0 10px;
+						.cell-inner{
+							height: $cell-height/2 * 1px;
+							position: relative;
+							&:first-child{
+								border-bottom: 1px dotted $color-master-light;
+							}
+							&:last-child{
+								border-bottom: 1px solid $color-master-light;
+							}
+							&:only-child{
+								height: 40px;
+								border-bottom: 0;
+							}
+						}
+						&.active{
+							background-color: #fef8e7;
+							& > *{
+								border-color: rgba(0, 0, 0, 0.1) !important;
+							}
+						}
+						&.disable{
+							background-color: $color-master-lightest;
+						}	
+					}
+				}
+				.loading{
+					left: 10px;
+				}
+			}
+		}
+		.loading{
+			position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			background-color: rgba(255, 255, 255, 0.5);
+			z-index: 100;
+		}
+		.pgn-wrapper{
+			position: absolute;
+		}
+		.even-holder{
+			position: absolute;
+			display: table;
+			width: calc(100% - 50px);
+			height: calc(100% - 25px);
+			.event-placeholder{
+				height: 100%;
+				width: 14.2857%;
+				display: table-cell;
+			}
+		}
+		.event-container{
+			width: 100%;
+			height: 40px;
+			position: absolute !important;
+			z-index: 10;
+			overflow: hidden;
+			margin-bottom: 5px;
+			min-height: 40px !important;
+			transition:width .16s ease;
+			.event-inner{
+				padding: 15px;
+				&:before{
+					position: absolute;
+					width: 8px;
+					height: 8px;
+					content: '';
+					background-color: rgba(255, 255, 255,0.8);
+					border-radius: 999px;
+					right:14px;
+					top: 11px;
+				}
+			}
+			.time-wrap{
+				line-height: 12px;
+				text-align:left;
+				color: rgba(0, 0, 0, 0.77);
+				overflow: hidden;
+    			text-overflow: ellipsis;
+			}
+			.event-start-time, .event-end-time{
+				font-size: 12px;
+				color: rgba(0, 0, 0, 0.44);
+			}
+			.event-title{
+				font-size: 14px;
+				line-height: 15px;
+				margin-bottom: 8px;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+			.resizable-handle{
+				position: absolute;
+				opacity: 1;
+				z-index: 3;
+				left: 0;
+				right: 0;
+				bottom: 0;
+				height: 8px;
+				overflow: hidden;
+				line-height: 8px;
+				font-size: 11px;
+				font-family: monospace;
+				text-align: center;
+				cursor: s-resize;
+				&:after {
+				content: "=";
+				color: rgba(0, 0, 0, 0.44);
+				}
+			}
+			&.dragging{
+				z-index: 100;
+			}
+		}
+		.grid{
+			display: block;
+			overflow: scroll;
+			height: calc(100% - 40px);
+			-webkit-overflow-scrolling: touch;
+			//Time Slots
+			&.slot-60{
+				.tble .trow .tcell .cell-inner{
+					height: $cell-height * 1px;
+					border-bottom: 1px solid $color-master-light;
+				}
+			}
+			&.slot-15{
+				.tble .trow .tcell {
+					height: 100/4 * 1px;
+					.cell-inner{
+						height: 100/4 * 1px;
+						border-bottom: 1px dotted $color-master-light;
+						&:last-child{
+							border-bottom: 1px solid $color-master-light;
+						}
+					}
+				}
+				.time-slot-wrapper .time-slot{
+					height: 100px;
+				}
+			}
+		}
+		.allday-cell{
+			height: $cell-height/2 * 1px;
+			display: inline-block;
+			width: 50px;
+			float:left;
+		}
+	}
+	.time-slot-wrapper{
+		display: inline-block;
+		width: 50px;
+		float:left;
+		height: 100%;
+		.time-slot{
+			display: block;
+			height: $cell-height*1px;
+			width: 100%;
+			background: #fff;
+			&:first-child{
+				span{
+					display: none;
+				}
+			}
+			& > span{
+				float:right;
+				font-size: 12px;
+				position: relative;
+				top: -15%;
+				color: rgba(0, 0, 0, 0.46);
+				font-weight: bold;
+				font-size: 11px;
+				letter-spacing: 0.06em;
+            	font-size: 10.5px;
+            	font-family: 'Montserrat';
+				right:5px;
+			}
+		}
+	}
+
+}
+.calendar-event{
+	width: 330px;
+	right:-330px;
+	.scrollable{
+		height: 100%;
+	}
+}
+.date-selector{
+	cursor: pointer;
+}
+
+/*
+Responsive Util
+*/
+@media (max-width: 991px) {
+.calendar{
+	background-color: #fff;
+	.calendar-header{
+		display: none;
+	}
+	.options{
+		margin-top:0;
+		padding-left:10px;
+		.months{
+			line-height: 21px;
+			padding-top: 14px;
+		}
+		.date{
+			margin-bottom: 10px;
+		}
+	}
+	.calendar-container {
+		height:100%;
+		.view.week-view .tble{
+			white-space: nowrap;
+			.thead{
+				white-space: nowrap;
+				overflow: hidden;
+				display: inline-block;
+			}
+			.tcell{
+				display: none;
+				max-width: 100%;
+				width: 100%;
+				&.active{
+					display: inline-block;
+					background-color:#fff;
+				}		
+			}
+			.trow{
+				display: block;
+				height: 80px;
+			}
+		}
+		.view.month-view {
+			.allday-cell{
+				display: none;
+			}
+			.grid .tble{
+			padding-left: 0;
+			}
+			.tble {
+				.thead .tcell{
+					padding: 3px;
+					padding-top: 10px;
+				}
+				.trow .tcell{
+					padding: 0 6px;
+				}
+			}
+			.tble .trow .tcell .event-container{
+				@include border-radius(99px);
+				position: absolute !important;
+				height: 16px !important;
+				width: 16px !important;
+				min-height: 16px !important;
+				margin: 0 auto;
+    			left: 0;
+    			right: 0;
+				.event-inner{
+					display: none;
+				}
+			}
+		}
+		&.month{
+			height: calc(100% - 101px);
+		}
+	}
+	.weeks-wrapper{
+		margin-bottom: 0;
+	}
+	&.month{
+		padding-left:0;
+		.calendar-container{
+			height: calc(100% - 108px);
+		}
+	}
+}
+.calendar-event{
+	width: 240px;
+	right:-240px;
+}
+.months-drager{
+	margin-left:16px;
+	margin-right:36px;
+	border-right:1px solid $color-master-light;
+	padding-top: 0;
+}
+.horizontal-app-menu {
+	.months-drager{
+		margin-left:0;
+		margin-right:0;
+		width: 100%;
+	}
+}
+}
+@media (max-width: 640px) {
+	.calendar.month .calendar-container .view .tble .thead .tcell {
+		text-align: center;
+		&:before{
+			width: 100%;
+		}
+		.weekday{
+			width: 11px;
+		    overflow: hidden;
+		    letter-spacing: 4px;
+		    font-weight: bold;
+		}
+	}
+}

resources/assets/sass/modules/_cards.scss

@@ -0,0 +1,410 @@
+/*------------------------------------------------------------------
+[4. Cards]
+*/
+
+.card{
+    @include box-shadow(none);
+    @include border-radius(1px);    
+    @include transition(all .2s ease);
+    position: relative;
+    background-color: #fff;
+    margin-bottom: 20px;
+    width: 100%;
+    .card-header{
+        background: transparent;
+        border-radius:0px;
+        border-bottom:0px;
+        padding: $panel-heading-padding;
+        position: relative;
+        z-index: 3;
+        min-height: 48px;
+        &.separator:after {
+                    content:"";
+                    height:1px;
+                    background:rgba(0,0,0,0.08);
+                    left:16px;
+                    right:16px;
+                    position:absolute;
+                    bottom:0;
+        }
+        & + .card-block{
+            padding-top: 0;
+        }
+        .card-title{
+            text-transform: uppercase;
+            display: inline-block;
+            letter-spacing: 0.06em;
+            font-size: 12px;
+            font-weight: 500;
+            margin: 0;
+            padding: 0;
+            line-height: normal;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            -webkit-text-stroke:0px;
+            filter: alpha(opacity=40);
+            @include transition(opacity .3s ease);
+            & + .card-block{
+
+            }
+        }
+        .card-controls{
+            float: right;
+            margin-top: -3px;
+            ul{
+                margin: 0;
+                padding: 0;
+                li{
+                    display: inline-block;
+                    list-style: none;
+                    line-height: 0;
+                }
+            }
+            &:after{
+                content:"";
+                  display:table;
+                  clear:both;
+            }
+        }
+        &.card-header-hover{
+            .card-title{
+                opacity: .4;
+            }
+            &:hover{
+                .card-title{
+                    opacity: 1;
+                }              
+            }
+        }
+    }
+    &.card-default{
+        border:1px solid $panel-border-color;
+        //Used for colored panels
+        & >.card-header{
+            color: #333;
+        }
+    }
+    &.card-bordered{
+        border:1px solid fade-out($color-master-light, .3);
+    }
+    &.card-borderless{
+        border:none;
+    }
+    &.card-condensed{
+        .card-header{
+            padding: $panel-condensed-heading-padding;
+            min-height: 30px;
+            .card-title{
+              opacity: .4;
+            }
+        }
+        .card-block{
+            padding: $panel-condensed-body-padding;
+        }
+    }
+    &.card-hover{
+        .card-header .card-title{
+            opacity: .4;
+        }
+        &:hover{
+            .card-header .card-title{
+                opacity: 1;
+            }
+        }
+    }
+    &.card-transparent{
+        background: transparent;
+        border:none;
+        @include box-shadow(none);
+        .card-block{
+            background: transparent;
+        }
+    }
+    &.full-height{
+        height: 100%;
+        .card-block{
+            height: auto;
+            width: 100%;
+            height: 100%;
+        }
+    }
+    &.card-featured {
+        @include box-shadow(-1px 1px 3px 0px rgba(121, 129, 135, 0.14));
+        width: calc(100% - 50px);
+        float: right;
+        .card-title {
+            h4 {
+                font-family: 'Montserrat';
+                font-size: 16px;
+                text-transform: uppercase;
+                color: $color-master-lighter;
+
+            }
+        }
+        .card-block {
+            h3 {
+                line-height: 34px;
+                font-size: 26px;
+            }
+        }
+        .footer {
+            .username {
+                line-height: 8px;
+                padding-top: 10px;
+                font-size: 16px;
+            }
+            .buttons {
+                li {
+                    display: inline;
+                    list-style: none;
+                    font-weight: bold;
+                    margin-left: 20px;
+                    &:first-child {
+                        margin-left: 0;
+                    }
+                }
+                .heart {
+                    color: $color-danger;
+
+                }
+                .comment {
+                    color: $color-master;
+                }
+            }
+        }
+        .ribbon {
+            width: 38px;
+            height: 38px;
+            margin-left: -39px;
+            float: left;
+            @include box-shadow( inset -3px 0px 3px 0px rgba(0,0,0,0.14) );
+            &.green {
+                background: $color-complete;
+
+            }
+            &.blue {
+                background: $color-success;
+
+            }
+        }
+    }
+    &.hover-fill:hover{
+        background:$color-master-lighter;
+    }
+    &.hover-stroke{
+        &:hover{
+            border:1px solid $color-master-light;
+        }
+    }
+    .card-block{
+        padding: $panel-padding;
+        //overflow-y: auto;
+        &.no-padding{ 
+            .row{ 
+                margin-left: 0; 
+                margin-right: 0; 
+            } 
+        } 
+        &.no-bottom-padding{
+            padding-bottom: 0;
+        }
+        &.no-top-padding{
+            padding-top: 0;
+        }
+        .title{
+            margin-top:0px;
+        }
+        &.scrollable{
+            margin-bottom: $panel-padding;
+        }
+    }
+}
+
+
+/* Portlets
+------------------------------------
+*/
+.card-progress{
+    background: rgba(255,255,255,.8);
+    bottom: 0;
+    left: 0;
+    position: absolute !important;
+    right: 0;
+    top: 0;
+    display: none;
+    z-index: 2;
+}
+.card-progress > .progress,
+.card-progress > .progress.progress-small{
+    height: 3px;
+}
+.card-progress > .progress-circle-indeterminate,
+.card-progress > .card-bar-indeterminate{
+    display: block;
+    left: 50%;
+    margin-left: -17px;
+    margin-top: -17px;
+    position: absolute;
+    top: 50%;
+}
+.card-progress > .progress-circle-indeterminate{
+    width: 35px;
+    height: 35px;
+}
+.card-maximized{
+    position: fixed !important;
+    left: $layout-sidepanel-width-collapsed;
+    top: $layout-header-height - 1px;
+    bottom: 0;
+    right: 0;
+    z-index: $zIndex-portlet;
+    margin: 0;
+}
+
+/* Pages notification holder */
+.card .pgn-wrapper{
+    position: absolute;
+    z-index: $zIndex-portlet + 2;
+}
+
+.card-header a:not(.btn){
+    color: $color-master !important;
+    opacity: .4;
+    &.card-refresh{
+        @include transition(opacity .3s ease);
+        &.refreshing{
+            opacity: 1;    
+        }
+        
+    }
+}
+.card-header {
+    .dropdown-menu {
+        margin-top: 5px;
+        .dropdown-item{
+            padding: 0 20px !important;
+            &:hover{
+                opacity: 1;
+                background-color: transparent;
+            }
+        }
+    }
+    a[data-toggle]:hover{
+        opacity: 1;
+    }
+}
+
+
+.card-icon{
+    -moz-osx-font-smoothing: grayscale;
+    font-family: "pages-icon";
+    font-style: normal;
+    font-variant: normal;
+    font-weight: normal;
+    line-height: 1;
+    text-transform: none;
+}
+.card-icon-close:before{
+    content: "\e60a";
+}
+.card-icon-maximize:before{
+    content: "\e634";
+}
+.card-icon-refresh:before{
+    content: "\e600";
+}
+.card-icon-collapse:before{
+    content: "\e62c";
+}
+
+.card-icon-settings:before{
+    content: "\e655";
+}
+.card-icon-refresh-lg-master,
+.card-icon-refresh-lg-white{
+    width: 15px;
+    height: 15px;
+    display: block;
+    background-size: cover;
+     @include transition(opacity .3s ease);
+    &.fade{
+        opacity: 0.1;
+    }
+}
+.card-icon-refresh-lg-master{
+    background-image:url('#{$base-img-url}/progress/progress-circle-lg-master-static.svg');
+}
+
+.card-icon-refresh-lg-white{
+    background-image:url('#{$base-img-url}/progress/progress-circle-lg-white-static.svg');
+}
+
+.card-icon-refresh-lg-master-animated,
+.card-icon-refresh-lg-white-animated{
+    width: 15px;
+    height: 15px;
+    display: block;
+    background-size: cover;
+    opacity: 0;
+    @include transition(opacity .3s ease);
+    &.active{
+        opacity: 1
+    }
+}
+.card-icon-refresh-lg-master-animated{
+    background-image:url('#{$base-img-url}/progress/progress-circle-lg-master.svg');
+}
+.card-icon-refresh-lg-white-animated{
+    background-image:url('#{$base-img-url}/progress/progress-circle-lg-white.svg');
+}
+
+
+/* For demo purpose only */
+.card-scroll{
+    height: 100px;
+}
+.sortable .card-header {
+    cursor: move;
+}
+/* To prevent lag while dragging */
+.ui-sortable-handle{
+    transition: max-height 0.3s ease 0s;
+}
+.sortable .grid .grid-title {
+    cursor: move;    
+}
+.ui-sortable {
+    min-height: 0px !important;
+}
+.ui-sortable-placeholder {
+    border: 1px dotted black;
+    visibility: visible !important;
+    height: 100% !important;
+    * {
+        visibility: hidden;
+    }
+}
+.sortable-box-placeholder {
+    background-color: $color-master-lighter;
+    border: 1px dashed $color-master-light;
+    display: block;
+    margin-top: 0px !important;
+    margin-bottom: 24px !important;
+    * {
+        visibility: hidden;
+    }
+}
+.sortable .card{
+    transition: none;
+}
+.sortable-column{
+    padding-bottom: 100px;
+}
+.demo-card-scrollable{
+   height:158px
+}
+
+
+.card-block {
+    padding: 15px;
+}

resources/assets/sass/modules/_charts.scss

@@ -0,0 +1,367 @@
+/*------------------------------------------------------------------
+[17. Charts]
+*/
+.line-chart{
+    .nvd3 line.nv-guideline{
+        /* Vertical bar on hover in interactive chart */
+        stroke-width:30px;
+        stroke-opacity:.04;
+        stroke : #000;
+    }
+    
+    .nvd3 .nv-groups path.nv-area{
+        /*  filled area */
+         fill-opacity : .1;
+    }
+    .nvd3 .nv-groups path.nv-line{
+        /*  Line */
+        stroke-opacity:.3;
+    }
+    .nvd3 .nv-axis line{
+        /*  grid lines */
+        stroke-opacity: .5;
+    }
+    
+    &[data-x-grid="false"]{
+        .nv-x .tick line { 
+            display: none; 
+        }  
+    } 
+    &[data-y-grid="false"]{
+        .nv-y .tick line { 
+            display: none; 
+        }  
+    } 
+    .domain{
+        /* domain */
+        opacity: 0;
+    }
+
+    &[data-points="true"]{
+        .nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point {
+            /* Toggle points */
+            fill-opacity: 1;
+            stroke-opacity: .5;
+        }
+    } 
+
+    .nvtooltip table td.legend-color-guide div{
+        border-radius: 100px;
+    }
+    thead .nv-pointer-events-none strong{
+         color: lighten($color-master,30%);
+    }
+    .nv-pointer-events-none{
+        
+        font-size: 12px;
+        
+        .value.nv-pointer-events-none{
+           font-weight: normal;
+           font-size: 11px;
+            color: lighten($color-master,30%);
+        }
+    }
+    .nvtooltip table{
+        margin: 12px 10px 14px 15px;
+    }
+    .nvtooltip.xy-tooltip.nv-pointer-events-none{
+        border-color : rgba(0, 0, 0, 0.12);
+        box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
+    }
+    
+     &[data-stroke-width="1"]{
+        .nvd3 .nv-groups path.nv-line{
+            /* Line widths */
+            stroke-width:1px;
+        }
+        .nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point{
+            /* Line widths */
+            stroke-width:2px;
+        }
+    }
+    &[data-stroke-width="2"]{
+        .nvd3 .nv-groups path.nv-line{
+            stroke-width:2px;
+        }
+        .nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point{
+            stroke-width:3px;
+        }
+    }
+    &[data-stroke-width="3"]{
+        .nvd3 .nv-groups path.nv-line{
+            stroke-width:3px;
+        }
+        .nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point{
+            stroke-width:4px;
+        }
+    }
+
+    .tick text,  .nvd3 .nv-axis .nv-axisMaxMin text{
+        fill: fade($color-master, 50%);
+        font-family: "Montserrat";
+        font-size: 11px;
+        text-transform: uppercase;
+        font-weight: normal;
+    }
+   
+
+    .nvd3.nv-scatter .nv-groups .nv-point.hover, 
+    .nvd3 .nv-groups .nv-point.hover{
+        fill: inherit !important;
+        stroke: inherit !important;
+    }
+}
+
+
+/* Line widths
+------------------------------------
+*/
+.nvd3 line.nv-guideline,
+.nvd3 .nv-groups path.nv-line,
+.nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point {
+    .line-chart[data-line-color="master"] &{
+        stroke: $color-master;
+    }
+    .line-chart[data-line-color="success"] &{
+        stroke: $color-success;
+    }
+    .line-chart[data-line-color="primary"] &{
+        stroke: $color-primary;
+    }
+    .line-chart[data-line-color="info"] &{
+        stroke: $color-info;
+    }
+    .line-chart[data-line-color="complete"] &{
+        stroke: $color-complete;
+    }
+    .line-chart[data-line-color="warning"] &{
+        stroke: $color-warning;
+    }
+    .line-chart[data-line-color="danger"] &{
+        stroke: $color-danger;
+    }
+    .line-chart[data-line-color="white"] &{
+        stroke: #fff;
+    }
+     .line-chart[data-line-color="black"] &{
+        stroke: #000;
+    }
+}
+
+
+/* Area Fill colors
+------------------------------------
+*/
+.nvd3 .nv-groups path.nv-area{
+    .line-chart[data-area-color="master"] &{
+        fill: $color-master;
+    }
+    .line-chart[data-area-color="success"] &{
+        fill: $color-success;
+    }
+    .line-chart[data-area-color="info"] &{
+        fill: $color-info;
+    }
+    .line-chart[data-area-color="complete"] &{
+        fill: $color-complete;
+    }
+    .line-chart[data-area-color="primary"] &{
+        fill: $color-primary;
+    }
+    .line-chart[data-area-color="warning"] &{
+        fill: $color-warning;
+    }
+    .line-chart[data-area-color="danger"] &{
+        fill: $color-danger;
+    }
+    .line-chart[data-area-color="white"] &{
+        fill: #fff;
+    }
+    .line-chart[data-area-color="black"] &{
+        fill: #000;
+    }
+} 
+
+/* Point fill colors
+------------------------------------
+*/
+ .nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point{
+    .line-chart[data-point-color="master"] &{
+        fill : $color-master;
+    }
+     .line-chart[data-point-color="success"] &{
+        fill : $color-success;
+    }
+     .line-chart[data-point-color="info"] &{
+        fill : $color-info;
+    }
+     .line-chart[data-point-color="complete"] &{
+        fill : $color-complete;
+    }
+     .line-chart[data-point-color="primary"] &{
+        fill : $color-primary;
+    }
+     .line-chart[data-point-color="warning"] &{
+        fill : $color-warning;
+    }
+     .line-chart[data-point-color="danger"] &{
+        fill : $color-danger;
+    }
+     .line-chart[data-point-color="white"] &{
+        fill : #fff;
+    }
+ }
+    
+#nvd3-line, 
+#nvd3-line2, 
+#nvd3-area{
+    svg{
+        height: 500px;
+    }
+}
+/* Rickshaw Charts
+------------------------------------
+*/
+.rickshaw-chart{
+    &.rickshaw_graph .detail{
+            padding-left: 15px;
+            transform: translateX(-15px);
+            width: 30px;
+            background: rgba(0,0,0,.04);
+            right: -15px;
+
+            .item, .x_label{
+                transform: translateX(15px);
+            }
+            &:after{
+                content: "";
+                width: 1px;
+                background: rgba(0,0,0,.2);
+                height: 100%;
+                display: block;
+            }
+        }
+        .y_grid .tick.major line{
+            stroke-dasharray: 3px, 5px;
+            opacity: .7;
+        }
+
+}
+
+.rickshaw-chart  {
+  &.rickshaw_graph {
+
+      .detail .x_label { display: none }
+        .detail .item { line-height: 1.4; padding: 0.5em }
+        .detail_swatch { float: right; display: inline-block; width: 10px; height: 10px; margin: 0 4px 0 0 }
+        .detail .date { font-size:11px; color: #a0a0a0; opacity: .5; }
+
+  }
+}
+
+#tab-rickshaw-realtime{
+    #rickshaw-realtime{
+        
+    }
+    #rickshaw-realtime_y_axis {
+        position: absolute;
+        top: 0;
+        background: rgba(255,255,255,.8);
+        bottom: 0;
+        width: 40px;
+        left: 0;
+        z-index: 1;
+        .rickshaw_graph .y_ticks path, .rickshaw_graph .x_ticks_d3 path{
+            fill: none;
+           stroke: none;
+        }
+        .rickshaw_graph .y_ticks text, .rickshaw_graph .x_ticks_d3 text{
+            opacity: 0.35;
+            font-family: 'Montserrat';
+            font-size: 11px;
+
+        }
+    }
+}
+
+#tab-rickshaw-bars{
+    #rickshaw-stacked-bars{
+    
+        &.rickshaw_graph .detail .dot{
+            border-radius: 50px;
+        }
+        &.rickshaw_graph .detail .x_label { display: none }
+        &.rickshaw_graph .detail .item { line-height: 1.4; padding: 0.5em }
+        .detail_swatch { float: right; display: inline-block; width: 10px; height: 10px; margin: 0 4px 0 0 }
+        &.rickshaw_graph .detail .date { font-size:11px; color: #a0a0a0; opacity: .5; }
+    }
+}
+
+#tab-rickshaw-slider{
+
+    #rickshaw-slider{
+        height:500px
+    }
+     .rickshaw_graph .x_grid_d3 .tick{
+    stroke-opacity: 0;
+  }
+  .rickshaw_graph .y_ticks path, .rickshaw_graph .x_ticks_d3 path{
+    stroke: none;
+  }
+  .rickshaw_graph .y_ticks text, .rickshaw_graph .x_ticks_d3 text{
+            font-size: 11px;
+        }
+  .rickshaw_range_slider_preview {
+    .frame{
+        opacity: 0;
+    }
+    .left_handle, .right_handle{
+        fill: #000;
+        fill-opacity: 0.1 !important;
+    }
+  }
+  .slider{
+    position: absolute;
+    top:0;
+    height:93px;
+    overflow: hidden;
+  }
+  .chart{
+    position: absolute;
+    bottom: 40px;
+    top: 150px;
+    left: 33px;
+    right: 0;
+    width: auto;
+    .x_tick.plain .title{
+       font-family: 'Montserrat';
+            font-size: 11px; 
+    }
+  }
+  .y_axis{
+    bottom: 0;
+    position: absolute;
+    top: 150px;
+    width: 40px;
+    left: -6px;
+  }
+
+  .rickshaw_graph .x_tick{
+    border-color: transparent;
+    .title{
+      bottom: -24px;
+      left: -15px;
+    }
+  }
+}
+
+.caret {
+    display: inline-block;
+    width: 0;
+    height: 0;
+    margin-left: 2px;
+    vertical-align: middle;
+    border-top: 0;
+    border-right: 4px solid transparent;
+    border-left: 4px solid transparent;
+}

resources/assets/sass/modules/_chat.scss

@@ -0,0 +1,81 @@
+/*------------------------------------------------------------------
+[3. Chat]
+*/
+
+/* Chat Components
+--------------------------------------------------
+*/
+
+$chat-list-height:60px;
+$alert-list-height:45px;
+.chat-view{
+	.chat-inner{
+		padding: 15px;
+		overflow-x: hidden;
+		height: calc(100% - 103px);
+	}
+	.message{
+		margin-bottom: 10px;
+		line-height: 30px;
+	}
+	.profile-img-wrapper{
+		height: 28px;
+		width: 28px;
+	}
+	.chat-bubble{
+		position:relative;
+		border-radius:12px;
+		padding: 4px 12px;
+		font-size: 14px;
+		line-height: 16px;
+		margin: 5px 0px 0 5px;
+		max-width: 60%;
+		white-space: normal;
+		& > p{
+			margin: 0;
+		}
+		&.from-me {
+			background:$color-complete-lighter;
+			color:$color-master-dark;
+			opacity: 0.8; 
+			float: right;
+			border: 1px solid rgba(0, 0, 0, 0.07);
+		}
+		&.from-them {
+			color:$color-master-dark;
+			opacity: 0.8; 
+			background:$color-master-lighter;
+			position:relative;
+			opacity: 0.8; 
+		  	float: left;
+		  	border: 1px solid mix($color-complete-darker, #fff, 7%);
+
+		}
+	}
+	.chat-input{
+		border: 0;
+		height: 45px;
+		&:focus,&:active{
+			background-color: #fff;
+		}
+	}
+	.user-controls{
+		padding-top:12px;
+	}
+}
+/* Chat User List
+--------------------------------------------------
+*/
+.chat-user-list{
+	& > a {
+		height: $chat-list-height;
+	}
+}
+/* Alert List
+--------------------------------------------------
+*/
+.alert-list{
+	& > a {
+		height: $alert-list-height;
+	}
+}

resources/assets/sass/modules/_email.scss

@@ -0,0 +1,150 @@
+/*------------------------------------------------------------------
+[20. Email App]
+*/
+
+
+/* Email Components 
+--------------------------------------------------
+*/
+.compose-wrapper{
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 50px;
+    background: $color-white;
+    border-top: 1px solid $color-master-lighter;
+    z-index: 101;
+    .compose-email{
+        font-size: 24px;
+    }
+}
+
+.email-composer{
+    margin-left: 250px;
+    position: relative;
+    overflow: auto;
+    height: 100%;
+    background: #fff;
+    .email-toolbar-wrapper .wysihtml5-toolbar{
+        background: $color-master-lighter;
+        border-bottom:1px solid $color-master-light;
+        position: relative;
+        border-top: none;
+    }
+    .email-body-wrapper{
+        border-bottom:1px solid $color-master-light;
+        margin-bottom: 20px;
+    }
+    .bootstrap-tagsinput{
+        margin: 0;
+        padding: 0;
+    }
+    & > .row{
+        margin-left: -30px;
+        margin-right: -30px;
+    }
+}
+
+.split-view .split-details .email-content-wrapper{
+    background: #fff;
+    height: 100%;
+    width: auto;
+    overflow: auto;
+    
+    .actions-wrapper{
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 50px;
+        z-index: $zIndex-navbar - 1;
+    }
+    .email-content{
+        margin:0 auto;
+        width: 600px;
+        display: block;
+        padding-top: 62px;
+        padding-bottom: 70px;
+        padding-left: 20px;
+        padding-right: 20px;
+        .email-content-header{
+            .sender{
+                .name{
+                    font-size: 15px;
+                    color: $color-info;
+                }
+                .datetime{
+                    color: $color-master;
+                    opacity: .45;
+                    font-family: arial;
+                }
+            }
+            .subject{
+                font-family: arial;
+                color: $color-info;
+                font-size:15.2px;
+                line-height: 17px;
+            }
+            .fromto{
+                .btn-xs{
+                    border-radius: 13px;
+                }
+            }
+        }
+        .email-content-body p{
+            line-height: 23px;
+            color: $body-color;
+            letter-spacing: 0.001em;
+        }
+        .email-reply{
+            min-height:200px;
+        }
+        .editor-wrapper{
+            border: 1px solid rgba(0,0,0,.05);
+            .wysihtml5-sandbox{
+                max-height: 150px;
+                min-height: 130px !important;
+                width: 100% !important;
+            }
+        }
+        
+    }
+}
+/* Email App Top Header 
+--------------------------------------------------
+*/
+.header-wrapper-email{
+    font-size: 14.92px;
+    .dropdown > .btn{
+        color:$color-complete;
+    }
+    .btn:hover{
+        text-decoration: none;
+    }
+}
+
+/* Responsive Handler : Email App 
+--------------------------------------------------
+*/
+
+
+
+@media (max-width: 1024px){
+    .email-composer{
+        margin-left: 0;
+    }
+}
+
+
+.email-composer{
+    .email-toolbar-wrapper{
+        .dropdown{
+            .dropdown-toggle{
+                &::after{
+                    display: none;
+                }
+            }
+        }
+    }
+}

resources/assets/sass/modules/_gallery.scss

@@ -0,0 +1,255 @@
+/*------------------------------------------------------------------
+[25. Gallery]
+*/
+
+.gallery {
+    margin: 70px auto 0 auto;
+}
+.gallery-item {
+    overflow: hidden;
+    cursor: default;
+    background-color: #000;
+    margin-bottom: 10px;
+    position: relative;
+    width: 280px;
+    height: 240px;
+    &:hover {
+        cursor: pointer;
+    }
+    &[data-width="1"] {
+        width: 280px;
+    }
+    &[data-width="2"] {
+        width: 570px;
+    }
+    &[data-height="1"] {
+        height: 240px;
+    }
+    &[data-height="2"] {
+        height: 490px;
+    }
+    & >img {
+        opacity: 1;
+        -webkit-transition: opacity 0.35s;
+        transition: opacity 0.35s;
+    }
+    & > .live-tile {
+        & img {
+            opacity: 1;
+            -webkit-transition: opacity 0.35s;
+            transition: opacity 0.35s;
+        }
+    }
+    .rating {
+        margin-top: -5px;
+        color: rgba(255, 255, 255, 0.3);
+        & > .rated {
+            color: rgba(255, 255, 255, 1);
+        }
+    }
+    .item-info {
+        -webkit-transform: translate3d(0, 40%, 0);
+        transform: translate3d(0, 40%, 0);
+        -webkit-transition: -webkit-transform 0.35s, color 0.35s;
+        transition: transform 0.35s, color 0.35s;
+        &.more-content {
+            -webkit-transform: translate3d(0, 32%, 0);
+            transform: translate3d(0, 32%, 0);
+        }
+    }
+    &:hover {
+        .item-info {
+            -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+        }
+        & >img {
+            opacity: 0.6;
+        }
+        & > .live-tile {
+            & img {
+                opacity: 0.6;
+            }
+        }
+    }
+    &:active {
+        .item-info {
+            -webkit-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+        }
+        & >img {
+            opacity: 0.6;
+        }
+    }
+}
+.item-details {
+    z-index: 1050;
+    .dialog__content {
+        width: 845px;
+        max-width: 845px;
+        padding: 0;
+        text-align: left;
+        border: 1px solid rgba(0, 0, 0, 0.8);
+        .dialog__overview {
+            height: 516px;
+            position: relative;
+            .buy-now {
+                position: absolute;
+                bottom: 20px;
+                right: 35px;
+            }
+            .item-slideshow .slide {
+                width: 516px;
+                height: 516px;
+                display: block;
+                overflow: hidden;
+            }
+        }
+        .dialog__footer {
+            height: 75px;
+            .price {
+                margin: 0;
+                padding: 0;
+                line-height: 75px;
+            }
+            .separator {
+                position: relative;
+            }
+            .separator:after {
+                content: "";
+                width: 1px;
+                background: rgba(255, 255, 255, .1);
+                position: absolute;
+                height: 27px;
+                right: 0;
+                top: 24px;
+            }
+            .recommended {
+                li {
+                    a {
+                        width: 56px;
+                        height: 56px;
+                        display: block;
+                    }
+                    overflow: hidden;
+                    img {
+                        width: 100%;
+                    }
+                }
+            }
+        }
+        .close {
+            top: 15px;
+            right: 15px;
+            z-index: 100;
+        }
+    }
+    .owl-nav {
+        left: 0;
+        position: absolute;
+        top: 50%;
+        width: 100%;
+        color: #fff;
+        opacity: .7;
+        font-size: 18px;
+        padding: 0 20px;
+        .owl-prev {
+            float: left;
+        }
+        .owl-next {
+            float: right;
+        }
+    }
+    .owl-dots {
+        bottom: 23px;
+        position: absolute;
+        right: 23px;
+        .owl-dot {
+            width: 10px;
+            height: 10px;
+            border-radius: 10px;
+            display: inline-block;
+            background: rgba(0, 0, 0, .3);
+            margin-left: 6px;
+            &.active {
+                background: #fff;
+            }
+        }
+    }
+}
+
+.gallery-filters{
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 70px;
+    top:-70px;
+}
+@media (max-width: 920px) {
+    .gallery-item.first{
+        display: none;
+    }
+}
+@media (max-width: 767px) {
+    .item-details {
+        .dialog__content {
+            height: 90%;
+            overflow-y: auto;
+            width: 400px;
+            max-width: 400px;
+            .container-fluid {
+                height: 100%;
+                padding-left: 30px;
+                padding-right: 30px;
+            }
+            .dialog__overview {
+                height: 100%;
+                margin-right: -30px;
+                margin-left: -30px;
+            }
+        }
+        .item-slideshow-wrapper {
+            height: 515px !important;
+        }
+        .item-description {
+            height: auto !important;
+            .buy-now {
+                position: static !important;
+                float: right;
+                margin-bottom: 20px;
+            }
+        }
+        .item-slideshow {
+            .owl-stage-outer, .owl-stage {
+                height: 100%;
+            }
+            .slide {
+                width: 100% !important;
+            }
+        }
+    }
+}
+
+@media (max-width: 420px) {
+    .gallery{
+        margin-top: 80px;
+    }
+    .gallery-filters{
+        top: -90px;
+    }
+    .item-details .dialog__content {
+        width: 100%;
+        max-width: 100%;
+    }
+}
+
+@media (max-width: 610px) {
+    .gallery-item, .gallery {
+        width: 100% !important;
+    }
+}
+@media (min-width: 768px) {
+    .item-details .dialog__content .container-fluid > .row {
+        margin-left: -30px;
+        margin-right: -30px;
+    }
+}

resources/assets/sass/modules/_list.scss

@@ -0,0 +1,210 @@
+/*------------------------------------------------------------------
+[18. List]
+*/
+.list-view-wrapper{
+	height: 100%;
+	overflow-x: hidden;
+	overflow-y: auto;
+	position: absolute;
+	width: 100%;
+    -webkit-overflow-scrolling: touch;
+}
+
+.list-view-container{
+    position: relative;
+    .list-quickscroll{
+        ul {
+            list-style: none;
+            margin: 0;
+            padding: 0;
+            position: absolute;
+            top:0;
+            right: 10px;
+            z-index: 120;
+            padding-top: 10px;
+            padding-bottom: 10px;
+            li a{
+                font-size: 0.7em;
+                vertical-align: baseline;
+            }
+        }
+
+    }
+}
+
+.list-view-group-container {
+	margin: 0;
+	min-height: 1px;
+	overflow: hidden;
+	padding: 26px 0 0 0;
+	position: relative;
+    &:last-child{
+        ul{
+            border: 0;
+        }
+    }
+}
+.list-view-group-header, .list-view-fake-header {
+	background: $color-master-lightest;
+	color: #232830;
+	font: normal 11px/14px 'Montserrat',Arial;
+    text-transform: uppercase;
+	margin: 0;
+	padding: 6px 0 5px 15px;
+	position: absolute;
+    z-index: 10;
+}
+.list-view-group-header {
+	bottom: auto;
+	min-height: 1px;
+	top: 0;
+	width: 100%;
+    border-top: 0;
+}
+.list-view-fake-header {
+	width: 100%;
+	z-index: 100;
+    font-size: 11px !important;
+    line-height: 14px !important;
+}
+
+.list-view-fake-header.list-view-hidden {
+	visibility: hidden;
+}
+.list-view-group-container.list-view-animated .list-view-group-header {
+	bottom: 0;
+	top: auto;
+}
+
+
+input.list-view-search{
+    font-size: 15px;
+    color: #232830;
+}
+
+.no-top-border{
+    .list-view-fake-header {
+        border-top: 0;
+    }
+}
+
+.list-view {
+    ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+    }
+    li{
+        padding-left:15px;
+        white-space: nowrap;
+        cursor: pointer;
+        width: 100%;
+        display: table;
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        &:hover {
+            background-color: $color-complete-lighter;
+        }
+        &.active{
+            background-color: $color-warning-lighter;
+        }
+        p{
+            margin: 0;
+            line-height: 19px;
+        }
+        & > a{
+            margin-right: 15px;
+            width: 100%;
+        }
+        & > *{
+            @include flexbox();
+            -webkit-box-orient: horizontal!important;
+            -webkit-box-direction: normal!important;
+            -webkit-flex-direction: row!important;
+            -ms-flex-direction: row!important;
+            flex-direction: row!important;
+            @include align-items(center);
+        }
+    }
+    &.boreded{
+        li{
+            & > a {
+                border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+            }
+            &:last-child > a{
+                border-bottom: 0;
+            }
+        }
+    }
+    
+}
+
+
+.list-view.boreded li + li {
+	border-top: 0;
+}
+
+[data-ios="true"] .list-view-group-header,
+[data-ios="true"] .list-view-fake-header {
+	width: 288px; /*scrollbars aren't visible in iOS devices, so make the headers wider */
+}
+
+//Bootstrap-List
+.list-group-item{
+    border: 1px solid $color-master-lighter;
+    &.active, &.active:hover, &.active:focus{
+        background-color:$color-success-light;
+        border-color:$color-success-light;
+    }
+}
+
+.list-group-item:first-child{
+    border-top-left-radius: 2px;
+    border-top-right-radius: 2px;
+}
+.list-group-item:last-child{
+  border-bottom-right-radius: 2px;
+  border-bottom-left-radius: 2px;
+}
+
+
+.list-inline {
+    >li{
+        display: inline-block;
+        padding-right: 5px;
+        padding-left: 5px;
+    }
+}
+
+
+.breadcrumb{
+    a, i, span, li{
+        color: #7b7d82;
+        font-weight: 300;
+        text-shadow: none; 
+    }
+}
+.breadcrumb {
+    li {
+        padding-left: 0px;
+        display: inline-block;
+        a{
+            &.active {
+                font-weight: 600;
+                color: #0090d9;
+            }
+        }
+        +li{
+            &::before{
+                padding: 0 5px;
+                color: #515050;
+                font-family: FontAwesome;
+                content: "\f105";
+                font-weight: bold;
+            }
+        }
+    }
+}

resources/assets/sass/modules/_lock_screen.scss

@@ -0,0 +1,92 @@
+/*------------------------------------------------------------------
+[23. Lock Screen]
+*/
+
+.lock-container{
+    margin-left: auto;
+    margin-right: auto;
+    width: 600px;
+}
+
+.lock-screen-wrapper {
+    .credentials {
+        margin-top: -84px;
+        position: absolute;
+        top: 50%;
+        .thumbnail-wrapper {
+            width: 53px;
+            height: 53px;
+        }
+        .logged {
+            opacity: .21;
+            margin-top: -5px !important;
+        }
+        .name {
+            opacity: .69;
+            margin-top: -5px !important;
+            font-size: 36px;
+            height: 45px;
+            overflow: hidden;
+        }
+    }
+    .terms-wrapper {
+        & > div {
+            display: table;
+        }
+        .terms {
+            display: table-cell;
+            vertical-align: middle;
+        }
+        .logo-terms {
+            width: 60px;
+            height: 60px;
+            border-radius: 15px;
+            text-align: center;
+            position: relative;
+            .brand {
+                left: 50%;
+                margin-left: -21px;
+                margin-top: -5px;
+                position: absolute;
+                top: 50%;
+            }
+        }
+    }
+}
+
+/* Responsive Handlers : Lockscreen 
+------------------------------------
+*/
+@media (max-width: 767px) {
+    .lock-container{
+        width: 80%;
+    }
+    .lock-screen-wrapper {
+        .credentials {
+            form {
+                margin-top: 15px;
+            }
+        }
+    }
+}
+
+@media (max-width: 480px) {
+
+    .lock-screen-wrapper {
+        .credentials {
+            margin: 0;
+            position: static;
+            margin-top: 100px;
+            width: 100%;
+            float: left;
+            clear: both;
+            & > div {
+                text-align: center;
+            }
+            .thumbnail-wrapper {
+                float: none;
+                margin: 0 auto;
+            }
+        }        
+    }
+}

resources/assets/sass/modules/_login.scss

@@ -0,0 +1,71 @@
+/*------------------------------------------------------------------
+[22. Login]
+*/
+
+.login-triangle {
+	display: inline-block;
+	position: absolute;
+	right: 0; top: 0;
+	width: 0;
+	height: 0;
+	border-style: solid;
+	border-width: 0 0 100vh 14rem;
+	border-color: transparent transparent #fff;
+	z-index: 10;
+}
+
+.login-wrapper{
+	height: 100%;
+	background-color: $color-primary;
+	& > * {
+		height: 100%;
+	}
+	.bg-pic{
+		position: absolute;
+		width: 100%;
+		overflow: hidden;
+		& > img{
+			height: 100%;
+			opacity: 0.6;
+		}
+	}
+	.login-container{
+		width: 496px;
+		display: block;
+		position: relative;
+		float:right;
+	}
+	.bg-caption{
+		width: 500px;
+	}
+}
+.register-container{
+	width: 550px;
+	margin: auto;
+	height: 100%;
+}
+
+
+/* Responsive handlers : Login
+------------------------------------
+*/
+
+@media (max-width: 768px) {
+	.login-wrapper{
+		.login-container{
+			width: 100%;
+		}
+	}
+	.register-container{
+		width: 100%;
+		padding: 15px;
+	}
+}
+
+@media only screen and (max-width : 321px) {
+	.login-wrapper{
+		.login-container{
+			width: 100%;
+		}
+	}
+}

resources/assets/sass/modules/_misc.scss

@@ -0,0 +1,718 @@
+/*------------------------------------------------------------------
+[28. Misc : Helper Classes]
+*/
+.custom{
+    height:150px;
+}
+
+.icon-list{
+  .fa-item{
+    display: block;
+    color: $color-master-darkest;
+    line-height: 32px;
+    height: 32px;
+    padding-left: 10px;
+    & > i{
+      width: 32px;
+      font-size: 14px;
+      display: inline-block;
+      text-align: right;
+      margin-right: 10px;
+    }
+  }
+}
+/* Thumbnail for icons and profile pics
+------------------------------------
+*/
+.thumbnail-wrapper{
+    display: inline-block;
+    overflow: hidden;
+    float:left;
+    &.circular{
+       @include border-radius(50%);
+    }
+    &.bordered{
+        border-width: 4px;
+        border-style:solid;
+        &.d16{
+            @include square(16+4*1px);
+              & > *{
+                line-height: 12px
+             }
+        }
+        &.d24{
+            @include square(24+4*1px);
+             & > *{
+                line-height: 24px
+             }
+        }
+        &.d32{
+            @include square(32+4*1px);
+             & > *{
+                line-height: 28px
+             }
+        }
+        &.d48{
+            @include square(48+4*1px);
+             & > *{
+                line-height: 44px
+             }
+        }
+    }
+    &.d16{
+        @include square(16px);
+         & > *{
+            line-height: 16px
+         }
+    }
+    &.d24{
+        @include square(24px);
+         & > *{
+            line-height: 24px
+         }
+    }
+    &.d32{
+        @include square(32px);
+         & > *{
+            line-height: 32px
+         }
+    }
+    &.d39{
+        @include square(39px);
+         & > *{
+            line-height: 39px
+         }
+    }
+    &.d48{
+        @include square(48px);
+         & > *{
+            line-height: 50px
+         }
+    }
+    & > *{
+        vertical-align: middle;
+        width: 100%;
+        height: 100%;
+        text-align: center;
+    }
+}
+
+/* Profile dropdown
+------------------------------------
+*/
+.profile-dropdown{
+  background: #fff;
+  padding: 0;
+  &:before {
+    position: absolute;
+    top: -7px;
+    right: 15px;
+    display: inline-block;
+    border-right: 7px solid transparent;
+    border-bottom: 7px solid #ccc;
+    border-left: 7px solid transparent;
+    border-bottom-color: rgba(0, 0, 0, 0.2);
+    content: '';
+  }
+
+  &:after {
+    position: absolute;
+    top: -6px;
+    right: 16px;
+    display: inline-block;
+    border-right: 6px solid transparent;
+    border-bottom: 6px solid #ffffff;
+    border-left: 6px solid transparent;
+    content: '';
+  }
+  & > a{
+    opacity: .5;
+    @include transition(opacity ease .3s);
+    padding-left:17px;
+    padding-right:37px;
+    min-width: 138px;
+    & > i {
+      margin-right:5px;
+    }
+    &:hover{
+      opacity: 1;
+    }
+    &:last-child{
+      margin-top: 11px;    
+      padding-bottom: 3px !important;
+      padding-top: 3px;
+    }
+  }
+}
+.profile-dropdown-toggle{
+  background: transparent;
+  border: none;
+}
+/* Scroll
+------------------------------------
+*/
+.scrollable {
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* Overides
+------------------------------------
+*/
+.no-padding {
+  padding: 0px !important;
+}
+
+.no-margin {
+  margin: 0px !important;
+}
+
+.no-overflow{
+  overflow: hidden !important;
+}
+
+.auto-overflow{
+  overflow: auto;
+}
+
+.center-margin{
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.inherit-size{
+  width:inherit;
+  height:inherit
+}
+.inherit-height{
+  height:inherit;
+}
+
+.image-responsive-height{
+  width: 100%;
+}
+.image-responsive-width{
+  height: 100%;
+}
+.overlayer {
+  position: absolute;
+  display: block;
+  z-index: 21;
+  &.fullwidth {
+      width: 100%;
+  }
+}
+.overlayer-wrapper {
+    position: relative;
+    display: block;
+    z-index: 10;
+}
+.overlay-fixed {
+    position: fixed !important;
+    top: auto !important;
+}
+.top-left {
+    position: absolute !important;
+    top: 0;
+    left: 0;
+}
+.top-right {
+    position: absolute !important;
+    top: 1px;
+    right: 0;
+}
+.bottom-left {
+    position: absolute !important;
+    bottom: 1px;
+    left: 0;
+}
+.bottom-right {
+    position: absolute !important;
+    bottom: 0;
+    right: 0;
+}
+.pull-bottom{
+  position: absolute !important;
+  bottom: 0;
+}
+
+.pull-up{
+  position:absolute !important;
+  top: 0;
+}
+
+.pull-center {
+    position: absolute;
+    left: 0;
+    right: 0;
+    width: 100%;
+    display: table;
+    z-index: 1;
+}
+
+.cursor{
+  cursor: pointer;
+}
+.scroll-x-hidden{
+  overflow-x: hidden !important;
+}
+
+/* Generic Padding Helpers
+------------------------------------
+*/
+
+@mixin generate-padding-options($n, $j:0){
+  @if $j <= $n {
+    @for $i from $j through $n {
+      $step : $i*5;
+
+      .p-t-#{$step} {
+        padding-top: ($step*1px) !important;
+      }
+      .p-r-#{$step} {
+        padding-right: ($step*1px) !important;
+      }
+       .p-l-#{$step} {
+        padding-left: ($step*1px) !important;
+      }
+       .p-b-#{$step} {
+        padding-bottom: ($step*1px) !important;
+      }
+      .padding-#{$step} {
+        padding: ($step*1px) !important;
+      }
+    }
+  }
+}
+
+@include generate-padding-options(10);
+
+/* Generic Margin Helpers
+------------------------------------
+ */
+@mixin generate-margin-options($n, $j: 0) {
+  @if $j <= $n {
+    @for $i from $j through $n {
+      $step : $i*5;
+      .m-t-#{$step} {
+        margin-top: ($step*1px);
+      }
+      .m-r-#{$step} {
+        margin-right: ($step*1px);
+      }
+      .m-l-#{$step} {
+        margin-left: ($step*1px);
+      }
+      .m-b-#{$step} {
+        margin-bottom: ($step*1px);
+      }
+    }
+  }
+}
+
+@include generate-margin-options(10);
+
+@mixin generate-font-size($n, $j: 0) {
+  @if $j <= $n {
+    @for $i from $j through $n {
+      $step : $i*1;
+      .fs-#{$step} {
+        font-size: ($step*1px) !important;
+      }
+    }
+  }
+}
+
+@include generate-font-size(100);
+
+@mixin generate-line-height($n, $j: 0) {
+  @if $j <= $n {
+    @for $i from $j through $n {
+      $step : $i*1;
+      .lh-#{$step} {
+        line-height: ($step*1px) !important;
+      }
+    }
+  }
+}
+
+@include generate-line-height(50);
+
+.full-height{
+  height: 100% !important;
+}
+.full-width{
+  width: 100%;
+}
+.hide {
+  display: none !important;
+}
+.inline{
+  display:inline-block !important;
+}
+.block{
+  display: block !important;
+}
+.b-blank{
+  border-color:#000;
+}
+
+/* Border Helpers
+------------------------------------
+*/
+.b-a,
+.b-r,
+.b-l,
+.b-t,
+.b-b{
+  border-style: solid;
+  border-width: 0;
+}
+
+.b-r{
+  border-right-width:1px;
+}
+.b-l{
+  border-left-width:1px;
+}
+.b-t{
+  border-top-width:1px;
+}
+.b-b{
+  border-bottom-width:1px;
+}
+.b-a{
+  border-width:1px;
+}
+
+.b-dashed{
+  border-style: dashed;
+}
+
+.b-thick{
+  border-width : 2px;
+}
+
+.b-transparent{
+  border-color:rgba(0, 0, 0, 0.4);
+}
+.b-transparent-white{
+  border-color:rgba(255, 255, 255, 0.3);
+}
+.b-grey{
+  border-color:$color-master-lighter !important;
+}
+.b-white{
+  border-color:#fff !important;
+}
+.b-primary{
+  border-color:$color-primary !important;
+}
+.b-complete{
+  border-color:$color-complete !important;
+}
+.b-success{
+  border-color:$color-success !important;
+}
+.b-info{
+  border-color:$color-info !important;
+}
+.b-danger{
+  border-color:$color-danger !important;
+}
+.b-warning{
+  border-color:$color-warning !important;
+}
+/* Border Radius
+------------------------------------
+*/
+.b-rad-none{
+  @include border-radius(0px);
+}
+.b-rad-sm{
+  @include border-radius(3px);
+}
+.b-rad-md{
+  @include border-radius(5px);
+}
+.b-rad-lg{
+  @include border-radius(7px);
+}
+.no-border{
+  border: none !important;
+}
+
+.no-shadow{
+  box-shadow: none !important;
+}
+/** Profile Wrappers **/
+.profile-img-wrapper{
+  display:inline-block;
+  float:left;
+  border-radius: 100px 100px 100px 100px;
+  display: inline-block;
+  height: 35px;
+  overflow: hidden;
+  width: 35px;
+ -webkit-flex: 1;
+  -moz-flex: 1;
+  flex: 1;
+}
+.profile-img-wrapper.big{
+    height: 68px;
+    width: 68px;
+}
+.profile-img-wrapper.with-left-space-custom{
+  margin-left:7px;
+}
+
+.absolute{
+  position: absolute;
+}
+
+.relative{
+  position: relative;
+}
+
+.flex-1{
+  -webkit-box-flex: 1;
+  -moz-box-flex: 1;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+[data-pages-bg-image]{
+  background-size: cover;
+}
+
+/* Demo Purposes */
+.icon-set-preview{
+  transition: opacity 0.1s linear;
+}
+#icon-list{
+  transition: all 0.1s ease-in-out;
+}
+.error-number{
+  font-size: 90px;
+  line-height: 90px;
+}
+.error-container-innner{
+    margin-left: auto;
+    margin-right: auto;
+    width: 360px;
+}
+.error-container{
+    margin-top: -100px;
+    margin-left: auto;
+    margin-right: auto;
+    width: 38%;
+}
+
+.visible-xlg {
+    display: none;
+}
+.hidden-xlg {
+    display: block;
+}
+
+// Dashboard widget heights
+
+.sm-gutter .row > [class^="col-"], .sm-gutter .row > [class*="col-"] {
+    padding-left: $layout-gutter-sm;
+    padding-right: $layout-gutter-sm;
+}
+.sm-gutter .row {
+    margin-left: -$layout-gutter-sm;
+    margin-right: -$layout-gutter-sm;
+}
+
+/* Aspect ratio */
+.ar-1-1,
+.ar-2-1,
+.ar-1-2,
+.ar-3-2,
+.ar-2-3{
+  .card{
+    margin: 0;
+  }
+}
+.ar-1-1{
+  position: relative;
+  width: 100%;   /* desired width */
+  overflow: hidden;
+  &:before{
+    content: "";
+    display: block;
+    padding-top: 100%;  /* initial ratio of 1:1*/
+  }
+  & > div{
+    position:  absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+}
+
+.ar-2-1{
+  position: relative;
+  width: 100%;   /* desired width */
+  overflow: hidden;
+  &:before{
+    content: "";
+    display: block;
+    padding-top: calc(50% - #{$layout-gutter-sm});  /* initial ratio of 1:1*/
+  }
+  & > div{
+    position:  absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+}
+
+.ar-1-2{
+  position: relative;
+  width: 100%;   /* desired width */
+  overflow: hidden;
+  &:before{
+    content: "";
+    display: block;
+    padding-top: calc(150% - #{$layout-gutter-sm});  /* initial ratio of 1:1*/
+  }
+  & > div{
+    position:  absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+}
+
+.ar-3-2{
+  position: relative;
+  width: 100%;   /* desired width */
+  overflow: hidden;
+  &:before{
+    content: "";
+    display: block;
+    padding-top: calc(75% - #{$layout-gutter-sm});  /* initial ratio of 1:1*/
+  }
+  & > div{
+    position:  absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+}
+
+.ar-2-3{
+  position: relative;
+  width: 100%;   /* desired width */
+  overflow: hidden;
+  &:before{
+    content: "";
+    display: block;
+    padding-top: calc(125% - #{$layout-gutter-sm});  /* initial ratio of 1:1*/
+  }
+  & > div{
+    position:  absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+}
+
+.v-align-bottom{
+  vertical-align: bottom !important;
+}
+.v-align-top{
+  vertical-align: top !important;
+}
+.v-align-middle{
+  vertical-align: middle !important;
+}
+/* vertical alignment styles */
+.col-top {
+    vertical-align:top !important;
+}
+.col-middle {
+    vertical-align:middle !important;
+}
+.col-bottom {
+    vertical-align:bottom !important;
+}
+
+/* columns of same height styles
+------------------------------------
+*/
+.container-xs-height {
+    display:table;
+    padding-left:0px;
+    padding-right:0px;
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: fixed;
+}
+.row-xs-height {
+    display:table-row;
+}
+.col-xs-height {
+    display:table-cell;
+    float:none;
+}
+@media (min-width: 768px) {
+    .container-sm-height {
+        display:table;
+        padding-left:0px;
+        padding-right:0px;
+        width: 100%;
+        border-collapse: collapse;
+        table-layout: fixed;
+    }
+    .row-sm-height {
+        // display:table-row;
+    }
+    .col-sm-height {
+        // display:table-cell !important;
+        // float:none !important;
+    }
+}
+@media (min-width: 992px) {
+    .container-md-height {
+        display:table;
+        padding-left:0px;
+        padding-right:0px;
+        width: 100%;
+        border-collapse: collapse;
+        table-layout: fixed;
+    }
+    .row-md-height {
+        display:table-row;
+    }
+    .col-md-height {
+        display:table-cell !important;
+        float:none !important;
+    }
+}
+@media (min-width: 1200px) {
+    .container-lg-height {
+        display:table;
+        padding-left:0px;
+        padding-right:0px;
+        width: 100%;
+        border-collapse: collapse;
+        table-layout: fixed;
+    }
+    .row-lg-height {
+        display:table-row;
+    }
+    .col-lg-height {
+        display:table-cell !important;
+        float:none !important;
+    }
+}

resources/assets/sass/modules/_modals.scss

@@ -0,0 +1,278 @@
+/*------------------------------------------------------------------
+[10. Modals]
+*/
+.modal{
+	.close {
+	    position: absolute;
+	    right: 25px;
+	    top: 15px;
+	}
+	.close:focus {
+		outline:0;
+	}
+	.modal-dialog{
+		transition: all .2s !important;
+	}
+    .modal-content{
+    	border: 1px solid #f2f6f7;
+    	border-radius:3px;
+    	box-shadow:none;
+    }
+	.modal-header {
+	    text-align: center;
+	    border-bottom: 0;
+	    padding: 25px 25px 0 25px;
+		position: relative;
+		flex-direction: column;
+		align-items: flex-start;
+	    p {
+	        color: #8b91a0;
+	    }
+	}
+	.modal-body {
+	    box-shadow: none;
+	    padding: 25px;
+	    padding-top: 0;
+	    white-space: normal;
+	}
+	.modal-footer {
+	    border-top: none;
+	    box-shadow: none;
+	    margin-top: 0;
+	    padding: 25px;
+	    padding-top: 0;
+	}
+	.drop-shadow{
+		box-shadow:0 0 9px rgba(191,191,191,.36) !important;
+	}
+	&.fade{
+		opacity: 1 !important;
+		&.stick-up{
+			.modal-dialog{
+				@include translate3d(0,-100%,0);
+				margin-top: -5px;
+			}
+			// &.in{
+			// 	.modal-dialog{
+			// 		@include translate3d(0,0,0);
+			// 	}	
+			// }
+			&.show{
+				.modal-dialog{
+					@include translate3d(0,0,0);
+				}	
+			}
+		}
+
+		&.slide-up{
+			height: 100%;
+		  	top: auto;
+
+			// &.in{
+	  // 			.modal-dialog{
+			// 		@include translate3d(0,0,0);
+			// 	}
+			// }
+			&.show{
+	  			.modal-dialog{
+					@include translate3d(0,0,0);
+				}
+			}
+			&.disable-scroll{
+				overflow: hidden;
+			}
+			.modal-dialog{
+				display: table;
+				height: 100%;
+				@include translate3d(0,75%,0);
+			}
+			.modal-content-wrapper{
+				display: table-cell;
+				vertical-align: middle;
+			}
+		}
+		&.center-scale{
+			.modal-dialog {
+				display: table;
+				height: 100%;
+			}
+			.modal-content{
+				display: table-cell;
+				vertical-align: middle;
+				border: 0;
+				background: transparent;
+				.modal-header{
+					border-bottom: 0px;
+				}
+			}
+			// &.in{
+	  // 			.modal-dialog{
+	  // 				opacity: 1;
+			// 		@include scale(1);
+			// 	}
+			// }
+			&.show{
+	  			.modal-dialog{
+	  				opacity: 1;
+					@include scale(1);
+				}
+			}
+			.modal-dialog{
+				opacity: 0;
+				@include scale(0.6);
+			}
+		}
+		&.fill-in{
+			background-color: rgba(255, 255, 255, 0);
+			@include transition(background-color .3s);
+			& > .close{
+				opacity: 0.6;
+				z-index: 9999;
+				& > i{
+					font-size: 16px;
+				}
+			}
+			.modal-dialog {
+				display: table;
+				height: 100%;
+			}
+			.modal-content{
+				display: table-cell;
+				vertical-align: middle;
+				border: 0;
+				background: transparent;
+				.modal-header{
+					border-bottom: 0px;
+				}
+			}
+			// &.in{
+			// 	background-color: rgba(255, 255, 255, 0.85);
+	  // 			.modal-dialog{
+	  // 				opacity: 1;
+			// 		@include scale(1);
+			// 	}
+			// }
+			&.show{
+				background-color: rgba(255, 255, 255, 0.85);
+	  			.modal-dialog{
+	  				opacity: 1;
+					@include scale(1);
+				}
+			}
+			.modal-dialog{
+				opacity: 0;
+				@include scale(0.6);
+			}
+		}
+		&.slide-right{
+			.close{
+				position: absolute;
+				top:0;
+				right: 0;
+				margin-right: 10px;
+				z-index: 10;
+			}
+			// &.in{
+	  // 			.modal-dialog{
+			// 		@include translate3d(0,0,0);
+			// 	}
+			// }
+			&.show{
+	  			.modal-dialog{
+					@include translate3d(0,0,0);
+				}
+			}
+			.modal-dialog{
+				position: absolute;
+				right: 0;
+				margin:0;
+				height: 100%;
+				@include translate3d(100%,0,0);
+				.modal-content-wrapper{
+					height: 100%;
+				}
+				.modal-content{
+					min-height: 100%;
+				}
+			}
+			.modal-content{
+				border-radius: 0px;
+			}
+		}
+	}
+}
+.fill-in-modal{
+	.modal-backdrop{
+		background-color: transparent;
+	}
+}
+.modal-backdrop{
+	opacity: 0;
+	  @include transition(opacity 0.2s linear);
+	// &.in{
+	// 	opacity: 0.30;
+	// }
+	&.show{
+		opacity: 0.30;
+	}
+}
+
+/* Responsive Handlers: Modals
+------------------------------------
+*/
+
+@media (min-width: 992px){
+	.modal-lg {
+		width: 900px;
+	}
+}
+
+@media (max-width: 768px){
+	.modal{
+		&.fill-in{
+			.modal-dialog {
+				width: calc(100% - 20px);
+			}
+		}
+		&.slide-up{
+			.modal-dialog {
+				width: calc(100% - 20px);
+			}
+		}
+	}
+}
+@media (min-width: 768px){
+	.modal{
+		&.stick-up{
+			.modal-dialog{
+			margin: -5px auto;
+			}
+		}
+		&.slide-up{
+			.modal-dialog {
+				margin: 0 auto;
+			}
+		}
+		&.fill-in{
+			.modal-dialog {
+				margin: 0 auto;
+			}
+		}
+		.modal-content{
+			box-shadow: none;
+		}
+		.modal-dialog {
+		    width: 600px;
+		}
+		.modal-sm {
+		    width: 300px;
+		}
+		.modal-sm {
+		    min-width: auto;
+		}
+	}
+}
+
+@media (min-width: 576px){
+	
+}

resources/assets/sass/modules/_nestables.scss

@@ -0,0 +1,84 @@
+/*------------------------------------------------------------------
+[14. Nesstables]
+*/
+
+.dd-handle{
+	border-color: fade-out($color-master-light, .3);
+	color:$color-master;
+	&:hover{
+		background-color: $color-master-lightest
+	}
+}
+
+.dark {
+	.dd-handle{
+	color:$color-master;
+	background: $color-master-lighter;
+		&:hover{
+			background-color: $color-master-lightest
+		}
+	}
+	.dd-placeholder{
+		background-color:$color-master-light;
+	}
+
+}
+
+.dd3-content{
+	background:#fff;
+	border-color: fade-out($color-master-light, .3);
+	color:$color-master;
+	&:hover{
+		background-color: $color-master-lightest
+	}
+}
+
+.dd3-handle{
+	background:transparent;
+	text-indent: 9999px;
+	&:before{
+		font-family: 'pages-icon';
+		color:$color-master;
+		content:"\e660";
+		font-size: 11px;
+		top: 5px;
+	}
+}
+
+.dd-placeholder{
+	background:$color-master-lighter;
+	border-color: fade-out($color-master, .65);
+}
+
+.dd-empty{
+	background-image:none;
+	background:$color-master-lighter;
+	border-color: fade-out($color-master, .5);
+}
+.dd-item > button{
+	font-size: 11px;
+	&:before{
+	font-family: 'pages-icon';
+	content: "\e63b";
+	}
+}
+.dd-item > button[data-action="collapse"]:before{
+	font-family: 'pages-icon';
+	content: "\e635";
+}
+
+
+
+/* Responsive Handlers : Nestables
+------------------------------------
+*/
+@media only screen and (min-width: 700px) { 
+	.dd {
+		width: 100%;
+	}
+	.nestable-lists{
+		.dd{
+			float: left;
+		}
+	}
+}

resources/assets/sass/modules/_notifications.scss

@@ -0,0 +1,675 @@
+/*------------------------------------------------------------------
+[8. Notifications]
+*/
+
+/* Badges
+--------------------------------------------------
+*/
+.badge {
+    text-shadow: none;
+    font-family: $base-font-family;
+    font-weight: 600;
+    background-color: $color-master-light;
+    font-size: 11px;
+    padding-left: 6px;
+    padding-right: 6px;
+    padding-bottom: 4px;
+    color: $color-master;
+    border-radius: 10px;
+}
+.badge-success {
+    background-color: $color-success;
+    color:  $color-white ;
+}
+.badge-warning {
+    background-color: $color-warning;
+    color:  $color-white ;
+}
+.badge-important {
+    background-color: $color-danger;
+    color:  $color-white ;
+}
+.badge-danger {
+    background-color: $color-danger;
+    color:  $color-white ;
+}
+.badge-info {
+    background-color: $color-info;
+    color:  $color-white ;
+}
+.badge-inverse {
+    background-color: $color-complete-darker;
+    color:  $color-white ;
+}
+.badge-white {
+    background-color:  $color-white ;
+    color: $color-master;
+}
+.badge-disable {
+    background-color: $color-master-dark;
+    color: $color-master;
+}
+
+/* Tool Tip
+--------------------------------------------------
+*/
+.tooltip-inner{
+    font-size: 12px;
+}
+
+/* Notification popup
+--------------------------------------------------
+*/
+.popover{
+    border: 1px solid rgba(0,0,0,.1);
+    box-shadow: 0 0 9px rgba(191, 191, 191, 0.36);
+    z-index: $zIndex-navbar - 10;
+}
+.notification-toggle{
+    top: 35px;
+    left: -26px;
+    padding: 0;
+    &:before{
+        border-bottom:0px !important;
+    }
+    &:after{
+        border-bottom:0px !important;
+    }
+}
+.notification-panel{
+    background-color: #fff;
+    border:1px solid $color-master-light;
+    .notification-body{
+        height: auto;
+        max-height: 350px;
+        position: relative;
+        overflow: hidden;
+        .notification-item{
+            position: relative;
+            margin-left: 25px;
+            background-color: #fff;
+            padding-right: 26px;
+            &.unread{
+                 .heading{
+                    opacity: 1;
+                }
+                .option{
+                background-color: $color-complete-lighter;
+                }
+                .option .mark{
+                    color:$color-complete-light;
+                }
+            }
+            .heading{
+                line-height: 43px;
+                margin-right: 5px;
+                background: #fff;
+                border-bottom: 1px solid $color-master-light;
+                position: relative;
+                float: left;
+                width: 100%;
+                font-size: 14px;
+                opacity: 0.7;
+                &:after{
+                    content:'';
+                    position: absolute;
+                    width: 5px;
+                    height: 100%;
+                    background-color: #fff;
+                    right: 0;
+                    top: 1px;
+
+                }
+                .thumbnail-wrapper {
+                    cursor: pointer;
+                    i{
+                    @include transition(all 0.12s linear);
+
+                    }
+                }
+                .time{
+                    font-size: 11px;
+                    margin-right: 8px;
+                }
+                &.open{
+                    display: block;
+                    .more-details{
+                        display: block;
+                    }
+                    .thumbnail-wrapper i{
+                        @include rotate(-90deg);
+                    }
+                }
+                .thumbnail-wrapper.d24{
+                    line-height: 20px;
+                }
+            }
+            .more-details{
+                display: none;
+                background-color: #fff;
+                width: 100%;
+                height: 100%;
+                clear: both;
+                position: relative;
+                .more-details-inner{    
+                    margin-left: 10px;
+                    padding-left: 28px;
+                    padding-top: 15px;
+                    margin-bottom: 20px;
+                    position: relative;
+                    border-left: 1px solid fade($color-master-light, 70%);
+                    &:after{
+                        width: 14px;
+                        height: 14px;
+                        position: absolute;
+                        content: '';
+                        background-color: #fff;
+                        left: -7px;
+                        top: 25px;
+                        border: 1px solid fade($color-master-light, 90%);
+                        @include border-radius(99px);
+                    }
+                    &:before{
+                        color:  mix($color-master, #fff, 40%);
+                        position: absolute;
+                        bottom: 0;
+                        left: -5px;
+                        content: ' \25CF';
+                        font-size: 13px;
+                        line-height: 5px;
+                        background-color: #fff;
+                        height: 9px;
+                    }
+                    .hint-text {
+                        opacity: .44;
+                    }
+                }
+
+            }
+            .option{
+                font-size: 10px;
+                position: absolute;
+                height: 44px;
+                width: 26px;
+                right: 0;
+                text-align: center;
+                vertical-align: middle;
+                line-height: 44px;
+                background-color: $color-master-lightest;
+                height: 100%;
+                .mark{
+                    background-color: transparent;
+                     color:  mix($color-master, #fff, 40%);
+                    &:before{
+                        content: ' \25CF';
+                        font-size: 12px;
+                    }
+                }
+            }
+            &:last-child{
+                .heading{
+                    border-bottom: 0px;
+                }
+            }
+        }
+    }
+    .notification-footer{
+        padding: 10px;
+        display: block;
+        border-top:1px solid $color-master-light;
+        a{
+            color: $color-master;
+            opacity: .54;
+            &:hover{
+                opacity: .74;
+            }
+        }
+    }
+}
+
+
+/* Simple alerts
+--------------------------------------------------
+*/
+.alerts-container{
+    position: fixed;
+    width: 350px;
+    right: 20px;
+    z-index: 999;
+    top: $layout-header-height + 20px;
+    &[data-placement$='-left']{
+        left: $layout-sidepanel-width-collapsed + 30px;
+        right: auto;
+    }
+    &[data-placement$='-right']{
+        right: 20px;
+        left: auto;
+    }
+    &[data-placement^='top-']{
+         top: $layout-header-height + 20px;
+        bottom: auto;
+    }
+    &[data-placement^='bottom-']{
+        top: auto;
+        bottom: 20px;
+    }
+
+    &[data-placement='bottom-right'], &[data-placement='bottom-left']{
+        .alert:last-child{
+            margin-bottom: 0;
+        }
+    }
+    .alert{
+        position: relative;
+        .close{
+            position: absolute;
+            right: 9px;
+            top: 15px;
+        }
+    }
+    
+}
+
+/* Pages Notifications plugin
+--------------------------------------------------
+*/
+body.menu-pin > .pgn-wrapper[data-position$='-left'],
+body.menu-pin > .pgn-wrapper[data-position="top"],
+body.menu-pin > .pgn-wrapper[data-position="bottom"]{
+    left: $layout-sidepanel-pin-width;
+}
+.pgn-wrapper {
+    position: fixed;
+    z-index: 1000;
+}
+.pgn-wrapper[data-position$='-left'] {
+    left: 30px;
+}
+.pgn-wrapper[data-position$='-right'] {
+    right: 20px;
+}
+.pgn-wrapper[data-position^='top-'] {
+    top: 20px;
+}
+.pgn-wrapper[data-position^='bottom-'] {
+    bottom: 20px;
+}
+.pgn-wrapper[data-position='top'] {
+    top: 0;
+    left: 0;
+    right: 0;
+}
+.pgn-wrapper[data-position='bottom'] {
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+.pgn {
+    position: relative;
+    margin: 10px;
+}
+.pgn .alert {
+    margin: 0;
+}
+
+/* Simple 
+------------------------------------
+*/
+
+.pgn-simple .alert {
+    padding-top: 13px;
+    padding-bottom: 13px;
+    max-width: 500px;
+    animation: fadeIn .3s cubic-bezier(.05, .74, .27, .99) forwards;
+    -webkit-animation: fadeIn .3s cubic-bezier(.05, .74, .27, .99) forwards;
+     max-height: 250px;
+    overflow: hidden;
+}
+/* Bar 
+------------------------------------
+*/
+
+.pgn-bar {
+    overflow: hidden;
+    margin: 0;
+}
+.pgn-bar .alert {
+    border-radius: 0;
+    padding-top: 13px;
+    padding-bottom: 13px;
+    max-height: 91px;
+}
+.pgn-wrapper[data-position='top'] .pgn-bar .alert {
+    animation: slideInFromTop .5s cubic-bezier(.05, .74, .27, .99) forwards;
+    -webkit-animation: slideInFromTop .5s cubic-bezier(.05, .74, .27, .99) forwards;
+    transform-origin: top left;
+    -webkit-transform-origin: top left;
+}
+.pgn-wrapper[data-position='bottom'] .pgn-bar .alert {
+    animation: slideInFromBottom .5s cubic-bezier(.05, .74, .27, .99) forwards;
+    -webkit-animation: slideInFromBottom .5s cubic-bezier(.05, .74, .27, .99) forwards;
+    transform-origin: bottom left;
+    -webkit-transform-origin: bottom left;
+}
+.pgn-bar .alert span {
+    opacity: 0;
+    animation: fadeIn .3s cubic-bezier(.05, .74, .27, .99) forwards;
+    -webkit-animation: fadeIn .3s cubic-bezier(.05, .74, .27, .99) forwards;
+}
+@keyframes slideInFromTop {
+    0% {
+        transform: translateY(-100%);
+    }
+    100% {
+        transform: translateY(0);
+    }
+}
+@-webkit-keyframes slideInFromTop {
+    0% {
+        -webkit-transform: translateY(-100%);
+    }
+    100% {
+        -webkit-transform: translateY(0);
+    }
+}
+@keyframes slideInFromBottom {
+    0% {
+        transform: translateY(100%);
+    }
+    100% {
+        transform: translateY(0);
+    }
+}
+@-webkit-keyframes slideInFromBottom {
+    0% {
+        -webkit-transform: translateY(100%);
+    }
+    100% {
+        -webkit-transform: translateY(0);
+    }
+}
+/* Circle 
+------------------------------------
+*/
+
+.pgn-circle .alert {
+    border-radius: 300px;
+    animation: fadeInCircle .3s ease forwards, resizeCircle .3s .4s cubic-bezier(0.25, 0.25, 0.4, 1.6) forwards;
+    -webkit-animation: fadeInCircle .3s ease forwards, resizeCircle .3s .4s cubic-bezier(0.25, 0.25, 0.4, 1.6) forwards;
+    height: 60px;
+    overflow: hidden;
+    padding: 6px 55px 6px 6px;
+    -webkit-transform: translateZ(0);
+    position: relative;
+}
+.pgn-wrapper[data-position$='-right'] .pgn-circle .alert {
+    float: right;
+}
+.pgn-wrapper[data-position$='-left'] .pgn-circle .alert {
+    float: left;
+}
+.pgn-circle .alert > div > div.pgn-thumbnail > div {
+    border-radius: 50%;
+    overflow: hidden;
+    width: 48px;
+    height: 48px;
+}
+.pgn-circle .alert > div > div.pgn-thumbnail > div > img {
+    width: 100%;
+    height: 100%;
+}
+.pgn-circle .alert > div > div.pgn-message > div {
+    opacity: 0;
+    height: 47px;
+    padding-left: 9px;
+    animation: fadeIn .3s .5s ease forwards;
+    -webkit-animation: fadeIn .3s .5s ease forwards;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    word-break: break-all;
+    word-wrap: break-word;
+    // -webkit-transform: translateZ(0);
+    // @include backface-visibility(hidden);
+
+}
+.pgn-circle .alert > div > div.pgn-message > div p:only-child{
+padding:12px 0;
+}
+.pgn-circle .alert .close {
+    margin-top: -12px;
+    position: absolute;
+    right: 18px;
+    top: 50%;
+    opacity: 0;
+    animation: fadeIn .3s .5s ease forwards;
+    -webkit-animation: fadeIn .3s .5s ease forwards;
+}
+.pgn-circle .alert p {
+    margin-bottom: 0;
+}
+.pgn-circle .alert > div {
+    display: table;
+    height: 100%;
+}
+.pgn-circle .alert > div > div {
+    display: table-cell;
+    vertical-align: middle;
+}
+@keyframes fadeInCircle {
+    0% {
+        opacity: 0;
+        width: 60px;
+    }
+    100% {
+        opacity: 1;
+        width: 60px;
+    }
+}
+@-webkit-keyframes fadeInCircle {
+    0% {
+        opacity: 0;
+        width: 60px;
+    }
+    100% {
+        opacity: 1;
+        width: 60px;
+    }
+}
+@keyframes resizeCircle {
+    0% {
+        width: 60px;
+    }
+    100% {
+        width: 300px;
+    }
+}
+@-webkit-keyframes resizeCircle {
+    0% {
+        width: 60px;
+    }
+    100% {
+        width: 300px;
+    }
+}
+
+/* Flip 
+------------------------------------
+*/
+
+.pgn-wrapper[data-position^='top-'] .pgn-flip {
+    top: -30px;
+}
+.pgn-wrapper[data-position^='bottom-'] .pgn-flip {
+    bottom: -30px;
+}
+.pgn-wrapper[data-position^='bottom-'] .pgn-flip .alert {
+    -webkit-transform-origin: 50% 100%;
+    transform-origin: 50% 100%;
+}
+.pgn-flip .alert {
+    -webkit-transform-origin: 50% 0%;
+    transform-origin: 50% 0%;
+    box-shadow: 0 6px 4px -3px rgba(0, 0, 0, 0.2);
+    -webkit-animation-name: flipInX;
+    animation-name: flipInX;
+    -webkit-animation-duration: 0.8s;
+    animation-duration: 0.8s;
+    border-radius: 0;
+    padding: 25px 35px;
+    max-width: 500px;
+    max-height: 250px;
+    overflow: hidden;
+}
+@-webkit-keyframes flipInX {
+    0% {
+        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
+        -webkit-transition-timing-function: ease-in;
+    }
+    40% {
+        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 20deg);
+        -webkit-transition-timing-function: ease-out;
+    }
+    60% {
+        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -10deg);
+        -webkit-transition-timing-function: ease-in;
+        opacity: 1;
+    }
+    80% {
+        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 5deg);
+        -webkit-transition-timing-function: ease-out;
+    }
+    100% {
+        -webkit-transform: perspective(400px);
+    }
+}
+@keyframes flipInX {
+    0% {
+        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
+        transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
+        -webkit-transition-timing-function: ease-in;
+        transition-timing-function: ease-in;
+    }
+    40% {
+        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 20deg);
+        transform: perspective(400px) rotate3d(1, 0, 0, 20deg);
+        -webkit-transition-timing-function: ease-out;
+        transition-timing-function: ease-out;
+    }
+    60% {
+        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -10deg);
+        transform: perspective(400px) rotate3d(1, 0, 0, -10deg);
+        -webkit-transition-timing-function: ease-in;
+        transition-timing-function: ease-in;
+        opacity: 1;
+    }
+    80% {
+        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 5deg);
+        transform: perspective(400px) rotate3d(1, 0, 0, 5deg);
+        -webkit-transition-timing-function: ease-out;
+        transition-timing-function: ease-out;
+    }
+    100% {
+        -webkit-transform: perspective(400px);
+        transform: perspective(400px);
+    }
+}
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+@-webkit-keyframes fadeIn {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+/* Pages Notification customizations */
+body > .pgn-wrapper[data-position="top"] {
+    top: $layout-header-height;
+    left: $layout-sidepanel-width-collapsed;
+}
+body > .pgn-wrapper[data-position="bottom"] {
+    left: $layout-sidepanel-width-collapsed;
+}
+
+body > .pgn-wrapper[data-position$='-left'] {
+    left: $layout-sidepanel-width-collapsed + 20px;
+    right: auto;
+}
+
+body > .pgn-wrapper[data-position^='top-'] {
+    top: $layout-header-height + 20px;
+    bottom: auto;
+}
+
+
+.pgn-circle .alert .close {
+    margin-top: -4px;
+    }
+body > .pgn-wrapper{
+    z-index: $zIndex-notifications;
+}
+
+@media (max-width: 979px) {
+    body > .pgn-wrapper[data-position="top"]{
+        left: 0;
+    }
+    body > .pgn-wrapper[data-position="bottom"] {
+        left: 0;
+    }
+}
+@media (max-width: 767px) {
+    body > .pgn-wrapper[data-position$='-left'], 
+    body > .pgn-wrapper[data-position$='-right'] {
+        left: 10px !important;
+        right: 10px !important;
+    }
+    body > .pgn-wrapper[data-position$='-right'] .alert,
+    body > .pgn-wrapper[data-position$='-left'] .alert{
+        max-width: 100%;
+            width: 100%;
+    }
+}
+
+
+/* Notifications demo
+--------------------------------------------------
+*/ 
+.notification-positions{
+    border-radius: 4px;
+    border:3px dashed $color-master-light;
+    height: 370px;
+    position: relative;
+    
+    & > div > .position:not(:only-child){
+        max-width: 50%;
+    }
+    .position{
+        padding: 15px;
+        img{
+            border:3px solid transparent;
+        }
+        &:hover{
+            cursor: pointer;
+        }
+        &.active img{
+            border-color:#0090d9;
+        }
+        &.pull-top, &.pull-bottom{
+                left: 0;
+                right: 0;
+
+            }
+            img{
+                width: 100%;
+            }
+    }  
+}

resources/assets/sass/modules/_print.scss

@@ -0,0 +1,32 @@
+/*------------------------------------------------------------------
+[29. Print]
+*/
+
+@media print{
+	.header, 
+	.page-sidebar, 
+	.quickview-wrapper, 
+	.overlay {
+		display: none;
+	}
+	.page-container{
+		padding-left: 0;
+	}
+	.page-content-wrapper {
+		.content{
+		border-top:0;
+			.card {
+				border: none;
+				.card-body{
+				padding: 0;
+				}
+			}
+		}
+	}
+	[class^='padding-'],
+	[class*='padding-'], 
+	.table tbody tr td{
+		padding: 10px;
+	}
+
+}

resources/assets/sass/modules/_progress_indicators.scss

@@ -0,0 +1,225 @@
+/*------------------------------------------------------------------
+[9. Progress Indicators]
+*/
+.progress {
+    height: 4px;
+    background-color: fade-out($color-master, .8);
+    background-image: none;
+    box-shadow: none;
+    border-radius: 0;
+
+    margin-bottom: 20px;
+    &.transparent {
+        background-color: rgba(0, 0, 0, 0.28);
+    }
+    &.progress-small {
+        height: 3px;
+    }
+}
+/* Circular Progress : indeterminate color
+------------------------------------
+*/
+.progress-bar-indeterminate{
+    background: url('#{$base-img-url}/progress/progress-bar-master.svg') no-repeat top left;
+    width: 100%;
+    height: 100%;
+    background-size: cover;
+    &.progress-bar-primary{
+        background-image: url('#{$base-img-url}/progress/progress-bar-primary.svg');
+         background-color: transparent;
+    }
+    &.progress-bar-complete{
+        background-image: url('#{$base-img-url}/progress/progress-bar-complete.svg');
+         background-color: transparent;
+    }
+    &.progress-bar-success{
+        background-image: url('#{$base-img-url}/progress/progress-bar-success.svg');
+         background-color: transparent;
+    }
+    &.progress-bar-info{
+        background-image: url('#{$base-img-url}/progress/progress-bar-info.svg');
+         background-color: transparent;
+    }
+    &.progress-bar-warning{
+        background-image: url('#{$base-img-url}/progress/progress-bar-warning.svg');
+         background-color: transparent;
+    }
+    &.progress-bar-danger{
+        background-image: url('#{$base-img-url}/progress/progress-bar-danger.svg');
+         background-color: transparent;
+    }
+    &.progress-bar-master{
+        background-image: url('#{$base-img-url}/progress/progress-bar-master.svg');
+         background-color: transparent;
+    }
+}
+/* Progress Bar
+------------------------------------
+*/
+.progress-bar {
+    box-shadow: none;
+    border-radius: 0;
+    background-color: $color-master;
+    background-image: none;
+    @include transition(all 1000ms cubic-bezier(0.785, 0.135, 0.150, 0.860));
+    -webkit-transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860);
+    -moz-transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860);
+    -ms-transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860);
+    -o-transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860);
+    transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860);
+}
+/* Progress Bar : Color Options
+------------------------------------
+*/
+.progress-bar-primary {
+    background-color: $color-primary;
+    background-image: none;
+}
+.progress-bar-complete {
+    background-color: $color-complete;
+    background-image: none;
+}
+.progress-bar-success {
+    background-color: $color-success;
+    background-image: none;
+}
+.progress-bar-info {
+    background-color: $color-info;
+    background-image: none;
+}
+.progress-bar-warning {
+    background-color: $color-warning;
+    background-image: none;
+}
+.progress-bar-danger {
+    background-color: $color-danger;
+    background-image: none;
+}
+.progress-bar-white {
+    background-color:  $color-white ;
+    background-image: none;
+}
+.progress-bar-black {
+    background-color: $color-black;
+    background-image: none;
+}
+.progress-info .bar, .progress .bar-info {
+    background-color: $color-info-darker;
+    background-image: none;
+}
+.progress-warning .bar, .progress .bar-warning {
+    background-color: $color-warning-darker;
+    background-image: none;
+}
+.progress-danger .bar, .progress .bar-danger {
+    background-color: $color-danger-darker;
+    background-image: none;
+}
+.progress-white .bar, .progress .bar-white {
+    background-color: $color-white;
+    background-image: none;
+}
+.progress-success.progress-striped .bar, .progress-striped .bar-success {
+    background-color: $color-success;
+}
+.progress-info.progress-striped .bar, .progress-striped .bar-info {
+    background-color: $color-info;
+}
+/* Circular Progress : indeterminate 
+------------------------------------
+*/
+.progress-circle-indeterminate{
+    background: url('#{$base-img-url}/progress/progress-circle-master.svg') no-repeat top left;
+    width: 50px;
+    height: 50px;
+    background-size: 100% auto;
+    margin: 0 auto;
+    &.progress-circle-warning{
+        background-image: url('#{$base-img-url}/progress/progress-circle-warning.svg');
+    }
+    &.progress-circle-danger{
+        background-image: url('#{$base-img-url}/progress/progress-circle-danger.svg');
+    }
+    &.progress-circle-info{
+        background-image: url('#{$base-img-url}/progress/progress-circle-info.svg');
+    }
+    &.progress-circle-primary{
+        background-image: url('#{$base-img-url}/progress/progress-circle-primary.svg');
+    }
+    &.progress-circle-success{
+        background-image: url('#{$base-img-url}/progress/progress-circle-success.svg');
+    }
+    &.progress-circle-complete{
+        background-image: url('#{$base-img-url}/progress/progress-circle-complete.svg');
+    }
+}
+/* Circular Progress 
+------------------------------------
+*/
+.progress-circle {
+    $size: 45px;
+    $border : 3px;
+    display: block;
+    height: $size;
+    margin: 0 auto;
+    position: relative;
+    width: $size;
+    -webkit-backface-visibility: hidden;
+    &.progress-circle-warning{
+        .pie .half-circle{
+            border-color: $color-warning;
+        }
+    }
+    &.progress-circle-danger{
+        .pie .half-circle{
+            border-color: $color-danger;
+        }
+    }
+    &.progress-circle-info{
+        .pie .half-circle{
+            border-color: $color-info;
+        }
+    }
+    &.progress-circle-primary{
+        .pie .half-circle{
+            border-color: $color-primary;
+        }
+    }
+    &.progress-circle-success{
+        .pie .half-circle{
+            border-color: $color-success;
+        }
+    }
+    &.progress-circle-complete{
+        .pie .half-circle{
+            border-color: $color-complete;
+        }
+    }
+    &.progress-circle-thick{
+        .pie .half-circle, .shadow{
+            border-width: 5px;
+        }
+    }
+    .pie {
+        clip: rect(0, $size, $size, $size / 2);
+        height: $size;
+        position: absolute;
+        width: $size;
+        .half-circle {
+            border: $border solid $color-master;
+            border-radius: 50%;
+            clip: rect(0, $size / 2, $size, 0);
+            height: $size;
+            position: absolute;
+            width: $size;
+
+        }
+    }
+    .shadow {
+            border: $border solid fade-out(#000, .9);
+            border-radius: 50%;
+            height: 100%;
+            width: 100%;
+    }
+
+}

resources/assets/sass/modules/_sliders.scss

@@ -0,0 +1,313 @@
+/*------------------------------------------------------------------
+[12. Sliders]
+*/
+
+$slider-background-color : mix($color-master, #fff, 12%);
+
+/* Ion Range Slider
+https://github.com/IonDen/ion.rangeSlider
+--------------------------------------------------
+*/
+.irs-line-mid, .irs-line-left, .irs-line-right, .irs-bar, .irs-bar-edge, .irs-slider{
+	background-image: none;	
+}
+.irs-bar{
+	background: $color-danger;
+}
+.irs-wrapper{
+	.irs-line{
+		background-color: $color-master-light;
+	}
+	.irs-line-mid, .irs-line-left, .irs-line-right, .irs-diapason, .irs-slider{
+		background: none;
+	}
+	.irs-diapason{
+		background-color:$color-danger;
+		@include transition(all 0.3s ease);
+
+	}
+	.irs-from, .irs-to, .irs-single{
+		background: $color-danger;
+	}
+	.irs-slider{
+		
+		&.from:before{
+			top: -2%;
+			left: 37%;
+			width: 16%;
+			height: 100%;
+			background: rgba(0,0,0,0.0);
+			background-color: $color-danger;
+		}	
+		&.to:before{
+			top: -2%;
+			left: 37%;
+			width: 16%;
+			height: 100%;
+			background: rgba(0,0,0,0.0);
+			background-color: $color-danger;
+		}
+		&.single:before{
+			top: -2%;
+			left: 37%;
+			width: 16%;
+			height: 100%;
+			background: rgba(0,0,0,0.0);
+			background-color: $color-danger;		
+		}
+	}
+	.irs-from:after, .irs-to:after, .irs-single:after{
+		border-top-color: $color-danger;
+	}
+	&.success{
+		.irs-diapason{
+			background-color:$color-success;
+		}
+		.irs-from, .irs-to, .irs-single{
+			background: $color-success;
+		}
+		.irs-slider{
+			&.from:before{
+				background-color: $color-success;
+			}	
+			&.to:before{
+				background-color: $color-success;
+			}
+			&.single:before{
+				background-color: $color-success;		
+			}
+		}
+		.irs-from:after, .irs-to:after, .irs-single:after{
+				border-top-color: $color-success;
+		}
+		// v.2.0.1
+		.irs-bar{
+			background-color: $color-success;
+		}
+	}
+	&.primary{
+		.irs-diapason{
+			background-color:$color-primary;
+		}
+		.irs-from, .irs-to, .irs-single{
+			background: $color-primary;
+		}
+		.irs-slider{
+			&.from:before{
+				background-color: $color-primary;
+			}	
+			&.to:before{
+				background-color: $color-primary;
+			}
+			&.single:before{
+				background-color: $color-primary;		
+			}
+		}
+		.irs-from:after, .irs-to:after, .irs-single:after{
+			border-top-color: $color-primary;
+		}
+		// v.2.0.1
+		.irs-bar{
+			background-color: $color-primary;
+		}
+	}
+	&.warning{
+		.irs-diapason{
+			background-color:$color-warning;
+		}
+		.irs-from, .irs-to, .irs-single{
+			background: $color-warning;
+		}
+		.irs-slider{
+			&.from:before{
+				background-color: $color-warning;
+			}	
+			&.to:before{
+				background-color: $color-warning;
+			}
+			&.single:before{
+				background-color: $color-warning;		
+			}
+		}
+		.irs-from:after, .irs-to:after, .irs-single:after{
+			border-top-color: $color-warning;
+		}
+		// v.2.0.1
+		.irs-bar{
+			background-color: $color-warning;
+		}
+	}
+	&.complete{
+		.irs-diapason{
+			background-color:$color-complete;
+		}
+		.irs-from, .irs-to, .irs-single{
+			background: $color-complete;
+		}
+		.irs-slider{
+			&.from:before{
+				background-color: $color-complete;
+			}	
+			&.to:before{
+				background-color: $color-complete;
+			}
+			&.single:before{
+				background-color: $color-complete;		
+			}
+		}
+		.irs-from:after, .irs-to:after, .irs-single:after{
+			border-top-color: $color-complete;
+		}
+		// v.2.0.1
+		.irs-bar{
+			background-color: $color-complete;
+		}
+	}
+	&.danger{
+		.irs-diapason{
+			background-color:$color-danger;
+		}
+		.irs-from, .irs-to, .irs-single{
+			background: $color-danger;
+		}
+		.irs-slider{
+			&.from:before{
+				background-color: $color-danger;
+			}	
+			&.to:before{
+				background-color: $color-danger;
+			}
+			&.single:before{
+				background-color: $color-danger;		
+			}
+		}
+		.irs-from:after, .irs-to:after, .irs-single:after{
+			border-top-color: $color-danger;
+		}
+		// v.2.0.1
+		.irs-bar{
+			background-color: $color-danger;
+		}
+	}
+}
+
+/* noUiSlider
+http://refreshless.com/nouislider/
+--------------------------------------------------
+*/
+.noUi-target{
+	border-radius:0px;
+	border: 0;
+	box-shadow: none;
+	&.bg-complete{
+		.noUi-connect{
+			background-color: $color-complete
+		}
+	}
+	&.bg-success{
+		.noUi-connect{
+			background-color: $color-success
+		}
+	}
+	&.bg-warning{
+		.noUi-connect{
+			background-color: $color-warning
+		}
+	}
+	&.bg-danger{
+		.noUi-connect{
+			background-color: $color-danger
+		}
+	}
+	&.bg-info{
+		.noUi-connect{
+			background-color: $color-info
+		}
+
+	}
+	&.bg-primary{
+		.noUi-connect{
+			background-color: $color-primary
+		}
+		
+	}
+	&.noUi-connect{
+		box-shadow: none;
+	}
+}
+.noUi-handle{
+	border-radius:999px;
+	box-shadow:none;
+	&:before, &:after{
+		display:none;
+	}
+}
+.noUi-horizontal {
+	height: 4px;
+	.noUi-handle{
+	width: 18px;
+	height: 18px;
+	left: -15px;
+	border: 1px solid mix($color-master, #fff, 23%);
+	top: -7px;
+	@include transition(all 0.2s ease);
+		&:hover{
+			border: 1px solid mix($color-master, #fff, 40%);
+		}
+		&:active{
+			@include scale(1.3);
+			border: 1px solid mix($color-master, #fff, 23%);
+		}
+		&:focus{
+			@include scale(1.3);
+			border: 1px solid mix($color-master, #fff, 23%);
+		}
+	}
+}
+.disable-hover-scale{
+	.noUi-handle{
+		&:active{
+			@include scale(1);
+		}
+		&:focus{
+			@include scale(1);
+		}		
+	}
+}
+.vertical-slider{
+	height: 150px;
+}
+.noUi-vertical {
+	width: 4px;
+	.noUi-handle{
+	width: 18px;
+	height: 18px;
+	border: 1px solid mix($color-master, #fff, 23%);
+	@include transition(all 0.2s ease);
+		&:hover{
+			border: 1px solid mix($color-master, #fff, 40%);
+		}
+		&:active{
+			@include scale(1.3);
+			border: 1px solid mix($color-master, #fff, 23%);
+		}
+		&:focus{
+			@include scale(1.3);
+			border: 1px solid mix($color-master, #fff, 23%);
+		}
+	}
+}
+.noUi-base{
+	padding: 5px 0;
+}
+.noUi-origin{
+	border-radius: 0px;
+	bottom: 5px;
+}
+.noUi-connect{
+	box-shadow:none;
+}
+.noUi-background{
+	background:$slider-background-color !important;
+	box-shadow: none;
+}

resources/assets/sass/modules/_social.scss

@@ -0,0 +1,450 @@
+/*------------------------------------------------------------------
+[19. Social App]
+*/
+
+.social-wrapper, 
+.social{
+    height: 100%;
+    width: 100%;
+}
+
+/* Cover 
+------------------------------------
+*/
+
+.social-wrapper .social .jumbotron{
+    height: 60vh;
+}
+.social-wrapper .social .cover-photo {
+    position: relative;
+    margin: 0 auto;
+    overflow-x: hidden;
+    &:before{
+        background-image: url("#{$base-img-url}/linear_gradient.png");
+        background-repeat: repeat-x;
+        bottom: 0;
+        content: " ";
+        height: 270px;
+        left: 0;
+        position: absolute;
+        right: 0;
+        z-index: 1;
+    }
+    .pull-bottom{
+        z-index: 2;
+    }
+}
+ .cover-img-container {
+    position: absolute;
+    overflow: hidden;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+}
+.cover-img-container .cover-img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    min-width: 100%;
+    min-height: 100%;
+}
+
+/* Feed 
+------------------------------------
+*/
+
+.social-user-profile{
+    width: 52px;
+    & > .thumbnail-wrapper{
+        float: none;
+    }
+}
+
+.social-wrapper .social .feed {
+    overflow-y: hidden;
+    width: 100%;
+   
+    & > .day {
+        white-space: normal;
+        display: block;
+        width: 100%;
+        margin: 0 auto;
+        
+        &:after {
+            feed:'';
+            display: block;
+            clear: both;
+        }
+        &:hover {
+            & > .timeline:after {
+                background: $color-complete;
+            }
+        }
+    }
+}
+
+/* Social Cards 
+------------------------------------
+*/
+
+.social-card {
+    padding-bottom: 0;
+    margin-bottom: 0;
+    background: #FFF;
+    float: left;
+    position: relative;
+    border-radius: 4px;
+    border-bottom-right-radius: 2px;
+    border-bottom-left-radius: 2px;
+    margin-bottom: 20px;
+    width: 300px;
+    border:1px solid $color-master-light;
+    .circle {
+        position: absolute;
+        right: 20px;
+        top: 20px;
+        display: block;
+        border-radius: 50%;
+        border:2px solid $color-master-lighter;
+        width: 9px;
+        height: 9px;
+        background: $color-info-light;
+        z-index: 1;
+        &:hover {
+            cursor: pointer;
+        }
+    }
+    &.full-width{
+        width: 100% !important
+    }
+    &.status {
+        background: $color-complete-lighter;
+        border-radius: 4px;
+        padding: 15px 25px;
+        @include box-sizing(border-box);
+        border:1px solid transparent;
+        &:hover,&.hover {
+            border-color: $color-info-lighter !important;
+        }
+        h5 {
+            font-size: 12px;
+            margin: 0;
+            .time {
+                color: #fff;
+            }
+        }
+        h2 {
+            color: $color-master-dark;
+            font-size: 25px;
+            line-height: 32px;
+            margin: 0;
+            font-weight: normal;
+        }
+        .reactions {
+            color: $color-master-lighter;
+            opacity: .45;
+            font-size: 12px;
+            padding: 0;
+            margin: 5px 0 0;
+            padding: 0;
+            li {
+                display: inline-block;
+                list-style: none;
+                padding: 0;
+            }
+        }
+        .circle {
+            width: 9px;
+            height: 9px;
+            border: none;
+            background: $color-complete;
+        }
+    }
+    .card-header, .card-footer {
+        background-color: $color-white;
+        @include transition(background .2s ease);
+    }
+    &.share {
+        .card-header {
+            padding: 15px 15px 12px;
+            border-bottom:1px solid $color-master-light;
+            border-top-right-radius: 2px;
+            border-top-left-radius: 2px;
+            &:hover {
+                background: $color-complete-lighter;
+                border-color:$color-complete-lighter;
+                cursor: pointer;
+                h6 {
+                    opacity: .6;
+                }
+            }
+            &.last{
+                border-bottom: none;
+            }
+            .user-pic {
+                float:left;
+                border-radius: 50%;
+                overflow: hidden;
+                margin-right: 10px;
+                & > img {
+                    width: 30px;
+                    height: 30px;
+                }
+            }
+            h5 {
+                font-weight: bold;
+                font-size: 14px;
+                margin: 0;
+                line-height: 22.7px;
+                font-family: arial;
+                letter-spacing: -0.006em;
+                margin-top: -3px;
+            }
+            h6 {
+                font-size: 12px;
+                margin: 0;
+                opacity: .45;
+                font-family: arial;
+                opacity: .45;
+            }
+        }
+        .card-description {
+            padding:12px 16px 11px;
+            font-size: 14px;
+            line-height: 21px;
+            margin: 0;
+            p {
+                margin-bottom: 4px;
+            }
+            &:hover {
+            }
+            .via {
+                opacity: .45;
+                display: block;
+                font-size: 12px;
+                font-family: arial;
+            }
+        }
+        .card-content{
+            position: relative;
+            .buttons{
+                left: 17px;
+                padding: 0;
+                position: absolute;
+                top: 10px;
+                li {
+                    display: inline-block;
+                    list-style: none;
+                    margin-right: 10px;
+                    a{
+                        color: #fff;
+                    }
+                }
+            }
+        }
+        .card-feed {
+            overflow: hidden;
+            position: relative;
+            max-height: 400px;
+            &:hover {
+                .buttons {
+                    opacity: 1;
+                }
+            }
+            .buttons {
+                position: absolute;
+                top: 5px;
+                right: 0;
+                opacity: 0;
+                li {
+                    display: inline-block;
+                    list-style: none;
+                    a {
+                        color: #fff;
+                        opacity: 0.8;
+                        padding: 5px;
+                    }
+                }
+            }
+            & > * {
+                max-width: 100%;
+            }
+        }
+        .card-footer {
+            padding: 14px 16px 11px;
+            font-size: 12px !important;
+            &:hover {
+                background: $color-complete-lighter;
+                cursor: pointer;
+                .reactions, .time {
+                    opacity: .8;
+                }
+            }
+            .time {
+                float: left;
+                opacity: .45;
+                font-family: arial;
+                margin-top: 1px;
+            }
+            .reactions {
+                float: right;
+                margin:0;
+                padding: 0;
+                opacity: .45;
+                li {
+                    display: inline-block;
+                    list-style: none;
+                    a {
+                        color: inherit;
+                    }
+                }
+            }
+        }
+        .card-description, .card-feed, .card-footer {
+            border-color: transparent;
+            border-style: solid;
+        }
+        .card-description {
+            border-width: 1px;
+        }
+        .card-feed {
+            border-width: 0 1px;
+            margin-top: -2px;
+        }
+        .card-footer {
+            border-width: 0 1px 1px 1px;
+        }
+        &.share-other {
+            .card-description {
+                padding-bottom: 0;
+            }
+            .card-footer {
+                padding-top: 0;
+                border-radius: 0;
+                &:hover {
+                    background: #fff;
+                }
+            }
+            .card-header {
+                border-top:1px solid $color-complete-lighter;
+            }
+            .circle {
+                background: $color-warning;
+            }
+        }
+    }
+    &.col1 {
+        width: 300px;
+    }
+    &.col2 {
+        width: 620px;
+    }
+    &.col3 {
+        width: 920px;
+    }
+    img {
+        width: 100%;
+    }
+}
+/* Step Form : Status */
+.simform{
+    margin-left: 0;
+    padding:0;
+    position: static;
+    margin-bottom: 20px;
+    .error-message{
+        padding-top: 29px !important;
+        padding-left: 22px;
+    }
+    .final-message, .error-message{
+        font-size: 15px;
+        opacity: 0.5;
+        display: none;
+        margin-top: 19px;
+        position: static;
+        text-align: left;
+        @include translate(0,0);
+    }
+    ol:before {
+        background: transparent;
+    }
+    .questions li{
+        overflow: hidden;
+        &.current{
+            position: relative;
+            input{
+                font-size:14px;
+                padding: 0 !important;
+                margin: 0 !important;
+            }
+        }
+        & > span{
+            width: 100%;
+            label{
+                font-size: 12px;
+                opacity: .55;
+                font-weight: 300;
+                @include transition(opacity .2s ease);
+            }
+        }
+    }
+    .questions input{
+        background: transparent !important;
+        height: 30px;
+    }
+    .questions .current input,
+    .no-js .questions input {
+        background: transparent;
+        border: none;
+    }
+    .controls {
+        position: absolute;
+        top:0;
+        left: 0;
+        width: 100%;
+        .next, .number{
+            display: none !important;
+        }
+    }
+    .progress{
+        &:before{
+            background:none;
+        }
+    }
+    .show{
+        display: block;
+    }
+}
+
+
+/* Responsive Handlers: Social App
+------------------------------------
+*/
+
+@media (min-width: 991px) and (max-width: 1070px) {
+    .day .card:first-child{
+        .col-md-4:first-child{
+            width: 100%;
+            margin-bottom: 20px;
+        }
+        .col-md-4:nth-child(2), .col-md-4:nth-child(3){
+            width: 50%;
+        }
+      
+    }
+}
+@media (max-width: 667px) {
+   .social-wrapper .social .feed {
+  
+    & > .day {
+        
+        & > .card{
+            width: 100% !important;
+        }
+    }
+}
+}

resources/assets/sass/modules/_tables.scss

@@ -0,0 +1,416 @@
+/*------------------------------------------------------------------
+[16. Tables and Datatables]
+*/
+
+/* Generic Tables 
+------------------------------------
+*/
+.table {
+    margin-bottom: 0;
+    margin-top: 5px;
+    thead {
+        tr {
+            th {
+                text-transform: uppercase;
+                font-weight: 500;
+                font-family:'Montserrat';
+                font-size: 10.5px;
+                letter-spacing: 0.06em;
+                padding-top: 14px;
+                padding-bottom: 14px;
+                vertical-align: middle;
+                border-bottom: 1px solid fade-out($color-master-light, .3);
+                color:fade-out($color-master-dark, .65);
+                border-top: none;
+                &[class*='sorting_'] {
+                    color:$color-master-dark;
+                }
+                &:first-child {
+                    padding-left: 18px !important;
+                }
+                .btn {
+                    margin-top: -20px;
+                    margin-bottom: -20px;
+                }
+            }
+        }
+    }
+    tbody {
+        tr {
+            td {
+                background: #fff;
+                border-bottom: 1px solid fade-out($color-master-light, .3);
+                border-top: 0px;
+                padding:20px;
+                font-size: 13.5px;
+                .btn-tag {
+                    background:fade-out($color-master-dark, .93);
+                    display: inline-block;
+                    margin: 5px;
+                    border-radius: 4px;
+                    padding: 5px;
+                    color: #62605a !important;
+                    &:hover {
+                        background:fade-out($color-master-dark, .85);
+                    }
+                }
+                &[class*='sorting_'] {
+                    color:#000;
+                }
+                .checkbox label::after{
+                    left: 0.5px;
+                }
+            }
+            &.selected td {
+                background: $color-warning-lighter;
+            }
+        }
+    }
+    &.table-hover {
+        tbody {
+            tr {
+                &:hover td {
+                    background: $color-complete-lighter !important;
+                }
+                &.selected:hover td{
+                    background: $color-warning-lighter !important;
+                }
+            }
+        }
+    }
+    &.table-striped {
+        tbody {
+            tr {
+                td {
+                    background: $body-background !important;
+                }
+                &:nth-child(2n+1) td {
+                    background: #fff !important;
+                }
+            }
+        }
+    }
+    &.table-borderless{
+         tbody {
+            tr {
+                td {
+                   border-top: 0;
+                }
+            }
+        }       
+    }
+    &.table-condensed {
+        table-layout: fixed;
+        thead {
+            tr {
+                th {
+                    padding-left: 20px;
+                    padding-right: 20px;
+                }
+            }
+        }
+        tbody {
+            tr {
+                td {
+                    padding-top: 12px;
+                    padding-bottom: 12px;
+                }
+            }
+        }
+        thead tr th, tbody tr td, tbody tr td * {
+            white-space: nowrap;
+            vertical-align: middle;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        &.table-detailed {
+            & > tbody > tr {
+                &.shown {
+                    & > td {
+                        background: $color-warning-lighter;
+                        &:first-child:before {
+                            @include rotate(90deg);
+                        }
+                    }
+                    & + tr {
+                        & > td {
+                            background: fade-out($body-background, .6);
+                            padding: 0px 40px;
+                            .table-inline{
+                                margin-top: 13px;
+                                margin-bottom: 13px;
+                                background: transparent;
+                                tr,td{
+                                background: transparent;
+                                font-weight: 600;
+                                }
+                            }
+                        }
+                    }
+                }
+                &.row-details{
+                     & > td {
+                        &:first-child:before {
+                            content: '';
+                            display: none;
+                        }
+                    }
+                }
+                & > td {
+                    &:hover {
+                        cursor: pointer;
+                    }
+                    &:first-child:before {
+                        content:"\f054";
+                        display: inline-block;
+                        margin-right: 8px;
+                        font-size: 8px;
+                        top: -1px;
+                        position: relative;
+                        font-family: 'FontAwesome';
+                        @include transition(all 0.12s linear);
+                    }
+                }
+            }
+            .table-inline {
+                td {
+                    border: none;
+                    text-align: left;
+                }
+            }
+        }
+    }
+    &.table-borderless{
+        & > tbody{
+            & > tr{
+                & > td{
+                    border-bottom: 0px;
+                }
+            }
+        }
+    }
+}
+.fht-table {
+    margin-bottom: 0 !important;
+}
+
+/* Data-tables 
+------------------------------------
+*/
+.table.dataTable.no-footer{
+    border: none;
+}
+.dataTables_scroll{
+    &:hover{
+        .dataTables_scrollBody:before{
+            content: "";
+            top: 0;
+            height: 0;
+        }
+    }
+}
+.dataTables_scrollBody {
+    overflow-y: auto;
+    border:none !important;
+    &:before {
+        content: "";
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 60px;
+        bottom: 0;
+        background: transparent;
+    }
+
+}
+.dataTables_wrapper .dataTables_paginate{
+    float:right;
+}
+.dataTables_wrapper .dataTables_paginate ul > li.disabled a{
+    opacity: .5;
+}
+.dataTables_wrapper .dataTables_paginate ul > li > a {
+    padding: 5px 10px;
+    color: $color-master;
+    opacity: .35;
+    @include transition(opacity .3s ease);
+    &:hover{
+        opacity: .65;
+    }
+}
+
+.dataTables_wrapper .dataTables_paginate ul > li.next > a,
+.dataTables_wrapper .dataTables_paginate ul > li.prev > a{
+    opacity: 1;
+} 
+.dataTables_wrapper .dataTables_paginate ul > li.disabled a{
+    opacity: .35;
+    &:hover{
+        opacity: .35;
+    }
+}
+.dataTables_wrapper .dataTables_info,
+.dataTables_wrapper .dataTables_paginate{
+    margin-top: 25px !important;
+}
+.dataTables_paginate.paging_bootstrap.pagination{
+    padding-top: 0;
+    padding-right:20px;
+}
+.dataTables_wrapper .dataTables_info{
+     clear: none;
+    font-size: 12px;
+    
+    padding: 0 33px;
+    color: $color-master;
+}
+.dataTables_wrapper .dataTables_paginate ul > li {
+    display: inline-block;
+    padding-left:0;
+    font-size: 11px;
+}
+.dataTables_scrollHeadInner{
+    padding-right:0 !important;
+}
+.export-options-container{
+    position: relative;
+}
+.dataTables_wrapper .dataTables_paginate ul > li.active > a{
+    font-weight: bold;
+    color: $color-master;
+    opacity: 1;
+}
+.export-options-container a{
+    color: inherit;
+    opacity: 1;
+}
+.exportOptions .DTTT.btn-group a{
+    display: block !important;
+}
+
+table.dataTable thead {
+    .sorting_asc:after{
+        background-image: url("#{$base-img-url}/icons/sort_asc.png");
+    }
+    .sorting_desc:after{
+        background-image: url("#{$base-img-url}/icons/sort_desc.png");
+    }
+    .sorting:after{
+        background-image: url("#{$base-img-url}/icons/sort_both.png");
+    }
+    .sorting_asc_disabled:after{
+        background-image: url("#{$base-img-url}/icons/sort_asc_disabled.png");
+    }
+    .sorting_desc_disabled:after{
+        background-image: url("#{$base-img-url}/icons/sort_desc_disabled.png");
+    }
+    
+}
+
+table.dataTable thead .sorting:after,
+table.dataTable thead .sorting_asc:after,
+table.dataTable thead .sorting_desc:after,
+table.dataTable thead .sorting_asc_disabled:after,
+table.dataTable thead .sorting_desc_disabled:after{
+    bottom: 12px;
+    content: "";
+    width: 19px;
+    height: 19px;
+    background-position: center center;
+    opacity: 1;
+}
+
+table.dataTable.table-condensed .sorting:after, 
+table.dataTable.table-condensed .sorting_asc:after, 
+table.dataTable.table-condensed .sorting_desc:after{
+    top: 12px;
+}
+
+/* Responsive Handlers : Tables */
+@media (max-width: 991px) {
+    .dataTables_wrapper .dataTables_info{
+        float: left;
+    }
+    .dataTables_paginate.paging_bootstrap.pagination{
+        float: right;
+    }
+
+}
+
+@media (max-width: 767px) {
+    .table-responsive{
+        border: 1px solid #ddd;
+    }
+}
+
+
+@media (max-width: 480px) {
+  .dataTables_wrapper .dataTables_info,
+     .dataTables_wrapper .dataTables_paginate{
+        float: none;
+        text-align: left;
+        clear: both;
+        display: block;
+    }
+}
+
+/* Demo classes */
+.demo-table-search{
+    thead th{
+        &:nth-child(1){
+            width: 20%;
+        }
+        &:nth-child(2){
+            width: 22%;
+        }
+        &:nth-child(3){
+            width: 24%;
+        }
+        &:nth-child(4){
+            width: 15%;
+        }
+        &:nth-child(5){
+            width: 19%;
+        }
+    }
+}
+
+.demo-table-dynamic {
+    thead th{
+        &:nth-child(1){
+            width: 25%;
+        }
+        &:nth-child(2){
+            width: 30%;
+        }
+        &:nth-child(3){
+            width: 20%;
+        }
+        &:nth-child(4){
+            width: 25%;
+        }
+    }
+}
+
+.table-invoice{
+    th{
+        border-top: 0;
+    }
+}
+
+.dataTables_wrapper{
+    .row{
+        width: 100%;
+        & > div {
+            display: flex;
+            justify-content: space-between;
+            width: 100%;
+            flex-direction: row-reverse;
+        }
+    }
+    &#tableWithDynamicRows_wrapper{
+        & > div {
+            width: 100%;
+        }
+    }
+}

resources/assets/sass/modules/_tabs_accordian.scss

@@ -0,0 +1,756 @@
+/*------------------------------------------------------------------
+[11. Tabs & Accordians]
+*/
+
+/* Tabs
+------------------------------------
+*/
+.nav-tabs {
+  position: relative;
+  & > li {
+    padding-left: 0;
+    padding-right: 0;
+    & > a.active {
+      &:hover,
+      &:focus {
+        border-color: $color-master-light;
+        color: $color-master;
+        background-color: $color-master-light;
+      }
+    }
+    & > a {
+      display: block;
+      border-radius: 0;
+      padding: 13px 20px;
+      margin-right:0;
+      font-weight: 500;
+      letter-spacing: 0.06em;
+      color: fade($color-master,
+      70%);
+      font-size: 10.5px;
+      min-width: 70px;
+      text-transform: uppercase;
+      border-color: transparent;
+      position: relative;
+      line-height: 1.7em;
+      &:hover,
+      &:focus {
+        background: transparent;
+        border-color: transparent;
+        color: $color-master;
+      }
+      .tab-icon {
+        margin-right:6px;
+      }
+    }
+  }
+  & ~ .tab-content {
+    overflow: hidden;
+    padding: 15px;
+    & > .tab-pane {
+      &.slide-left,
+      &.slide-right {
+        @include transition(all .3s ease);
+        &.sliding {
+          opacity: 0 !important;
+        }
+        &.active {
+          @include translate3d(0, 0, 0);
+          opacity: 1;
+        }
+      }
+      &.slide-left.sliding {
+        @include translate3d(10%, 0, 0);
+      }
+      &.slide-right.sliding {
+        @include translate3d(-10%, 0, 0);
+      }
+    }
+  }
+  // POSITIONG OPTIONS
+  &.nav-tabs-left,
+  &.nav-tabs-right {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    //Old Browsers
+    -webkit-flex-shrink: 0;
+    flex-shrink: 0;
+    &:after {
+      border-bottom: 0px;
+    }
+    & > li {
+      float: none;
+    }
+  }
+  &.nav-tabs-left {
+    float: left;
+    padding-right:0;
+    & ~ .tab-content {
+      border-left: 1px solid rgba(0, 0, 0, 0.1);
+      //IE10 Fix
+     -ms-flex: 1;
+    }
+  }
+  &.nav-tabs-right {
+    float: right;
+    padding-right: 0;
+    & ~ .tab-content {
+      border-right: 1px solid rgba(0, 0, 0, 0.1);
+      //IE10 Fix
+     -ms-flex: 1;
+    }
+  }
+}
+
+/* Tabs : Simple 
+------------------------------------
+*/
+.nav-tabs-plain {
+  & > li {
+    & > a{
+      opacity: 0.4;
+      &:after {
+        display: none !important;
+      }
+      &.active  {
+        opacity: 1;
+        font-weight: bold;
+        background-color: white !important;
+        color: $color-primary;
+        &:hover,
+        &:focus {
+          color: $color-primary;
+          background-color: white !important;
+          border-color: white !important;
+        }
+        &:after {
+          display: block !important;
+          left: 100% !important;
+          top: 50% !important;
+          border: solid transparent;
+          content: " ";
+          height: 0 !important;
+          pointer-events: none;
+          border-left-color: #ffffff;
+          border-width: 8px !important;
+          margin-top: -8px !important;
+          background-color: transparent !important;
+        }
+      }
+    }
+  }
+}
+.nav-tabs-simple {
+  border-bottom: 0px;
+  &:after {
+    content:'';
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    width: 100%;
+    position: absolute;
+    bottom: -1px;
+    z-index: 120;
+    left: 0;
+  }
+  & > li {
+    margin-bottom: 0;
+    & > a{
+      &:after {
+        position: absolute;
+        @include transition(all 0.1s linear 0s);
+        -webkit-backface-visibility: hidden;
+        width: 100%;
+        display: block;
+        background-color: $color-primary;
+        height: 0px;
+        content: '';
+        left: 0;
+        z-index: 125;
+        top: calc(100% - 1px);
+        &.nav-tabs-primary{
+          background-color: $color-primary;
+        }
+        &.nav-tabs-success{
+          background-color: $color-success;
+        }
+        &.nav-tabs-complete{
+          background-color: $color-complete;
+        }
+        &.nav-tabs-danger{
+          background-color: $color-danger;
+        }
+        &.nav-tabs-warning{
+          background-color: $color-warning;
+        }
+        &.nav-tabs-info{
+          background-color: $color-info;
+        }
+      }
+      &.active  {
+        &:hover,
+        &:focus {
+          background-color: transparent;
+          border-color: transparent;
+        }
+      }
+      &.active,
+      &:hover {
+        &:after {
+          height: 3px;
+        }
+      }
+    }
+  }
+  // POSITIONG OPTIONS
+  &.nav-tabs-left,
+  &.nav-tabs-right {
+    &:after {
+      border-bottom: 0px;
+    }
+    & > li {
+      & > a:after {
+        width: 0px;
+        height: 100%;
+        top: 0;
+        bottom: 0;
+        position: absolute;
+      }
+      & > a{
+        &.active,
+        &:hover{
+          &:after {
+            width: 3px;
+          }
+        }
+      }
+    }
+    & ~ .tab-content {
+    }
+  }
+  &.nav-tabs-left {
+    & > li > a:after {
+      right: 0;
+      left: auto;
+    }
+  }
+  &.nav-tabs-right {
+    & > li > a:after {
+      left: 0;
+    }
+  }
+}
+
+/* Tabs : Line Triangles
+------------------------------------
+*/
+
+.nav-tabs-linetriangle {
+  border-bottom: 0;
+  &:after {
+    content:'';
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    width: 100%;
+    position: absolute;
+    bottom: -1px;
+    z-index: 100;
+    left: 0;
+  }
+  & > li {
+    & > a{
+      &.active {
+        background: transparent;
+        box-shadow: none;
+        border-color: transparent;
+        &:hover,
+        &:focus,
+        &:active {
+          border-color: transparent;
+          background-color: transparent;
+        }
+        &:after,
+        &:before {
+          border: medium solid transparent;
+          content: "";
+          height: 0;
+          left: 50%;
+          pointer-events: none;
+          position: absolute;
+          width: 0;
+          z-index: 120;
+          top: 98%;
+        }
+        &:after {
+          border-top-color: $body-background;
+          border-width: 10px;
+          margin-left:-10px;
+        }
+        &:before {
+          border-top-color: rgba(0, 0, 0, 0.2);
+          border-width: 11px;
+          margin-left:-11px;
+        }
+      }
+      span {
+        font-size: 1em;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      &:hover,
+      &:focus {
+        overflow: visible;
+        @include transition( color 0.2s ease 0s);
+      }
+    }
+  }
+  & ~ .tab-content {
+    background: #fff;
+  }
+  // POSITIONG OPTIONS
+  &.nav-tabs-left {
+    &.nav-tabs {
+      &:after {
+        border-bottom: none;
+      }
+      & > li > a{
+        &.active {
+          &:before {
+            border-top: 11px solid transparent;
+            border-bottom: 11px solid transparent;
+            border-left: 11px solid rgba(0, 0, 0, 0.2);
+          }
+          &:after {
+            border-top: 10px solid transparent;
+            border-bottom: 10px solid transparent;
+            border-left: 10px solid $body-background;
+            margin-top: 1px;
+            margin-right:2px;
+          }
+          &:after,
+          &:before {
+            top: auto;
+            right: -22px;
+            left: auto;
+          }
+        }
+      }
+    }
+  }
+  &.nav-tabs-right {
+    &.nav-tabs {
+      &:after {
+        border-bottom: none;
+      }
+      & > li > a{
+          &.active {
+            &:before {
+              border-top: 11px solid transparent;
+              border-bottom: 11px solid transparent;
+              border-right: 11px solid rgba(0, 0, 0, 0.2);
+            }
+            &:after {
+              border-top: 10px solid transparent;
+              border-bottom: 10px solid transparent;
+              border-right: 10px solid $body-background;
+              margin-top: 1px;
+              margin-left:-9px;
+            }
+            &:after,
+            &:before {
+              top: auto;
+              left: -11px;
+              right: auto;
+            }
+        }
+      }
+    }
+  }
+}
+@media screen and (max-width:58em) {
+  .nav-tabs-linetriangle {
+    font-size: 0.6em;
+  }
+}
+
+/* Tabs : Fill-up 
+------------------------------------
+*/
+
+.nav-tabs-fillup {
+	&.nav-tabs-master {
+		& > li {
+			& > a {
+				&:after {
+					background: none repeat scroll 0 0 $color-master;
+					border: 1px solid $color-master;
+				}
+			}
+		}
+	}
+	&.nav-tabs-primary {
+		& > li {
+			& > a {
+				&:after {
+					background: none repeat scroll 0 0 $color-primary;
+					border: 1px solid $color-primary;
+				}
+			}
+		}
+	}
+	&.nav-tabs-success {
+		& > li {
+			& > a {
+				&:after {
+					background: none repeat scroll 0 0 $color-success;
+					border: 1px solid $color-success;
+				}
+			}
+		}
+	}
+	&.nav-tabs-complete {
+		& > li {
+			& > a {
+				&:after {
+					background: none repeat scroll 0 0 $color-complete;
+					border: 1px solid $color-complete;
+				}
+			}
+		}
+	}
+	&.nav-tabs-warning {
+		& > li {
+			& > a {
+				&:after {
+					background: none repeat scroll 0 0 $color-warning;
+					border: 1px solid $color-warning;
+				}
+			}
+		}
+	}
+	&.nav-tabs-danger {
+		& > li {
+			& > a {
+				&:after {
+					background: none repeat scroll 0 0 $color-danger;
+					border: 1px solid $color-danger;
+				}
+			}
+		}
+	}
+	&.nav-tabs-info {
+		& > li {
+			& > a {
+				&:after {
+					background: none repeat scroll 0 0 $color-info;
+					border: 1px solid $color-info;
+				}
+			}
+		}
+	}
+}
+
+.nav-tabs-fillup {
+  @include backface-visibility(hidden);
+  @include perspective(1000);
+  & > li {
+    overflow: hidden;
+    & > a {
+      @include backface-visibility(hidden);
+      @include transition(color 0.3s ease 0s);
+      background: transparent;
+      &:after {
+        @include backface-visibility(hidden);
+        background: none repeat scroll 0 0 $color-success;
+        border: 1px solid $color-success;
+        content: "";
+        height: calc(100% + 1px);
+        left: 0;
+        position: absolute;
+        top: 0;
+        -webkit-transform: translate3d(0,
+        100%,
+        0px);
+        transform: translate3d(0,
+        100%,
+        0px);
+        -webkit-transition: -webkit-transform 0.3s ease 0s;
+        transition: transform 0.3s ease 0s;
+        width: 100%;
+        z-index: -1;
+      }
+      span {
+        @include backface-visibility(hidden);
+        -webkit-transform: translate3d(0px, 5px, 0px);
+        transform: translate3d(0px, 5px, 0px);
+        -webkit-transition: -webkit-transform 0.5s ease 0s;
+        transition: transform 0.5s ease 0s;
+        display: block;
+        font-weight: 700;
+        line-height: 1.5;
+      }
+      &.active {
+        z-index: 100;
+        color: #fff;
+        &:hover,
+        &:focus {
+          border-color: transparent;
+          background: transparent;
+          color: #fff;
+        }
+        &:after {
+          @include translate3d(0px, 0px, 0px);
+        }
+        span {
+          @include translate3d(0px, -5px, 0px);
+        }
+      }
+    }
+  }
+  .icon:before {
+    @include translate3d(0px, 5px, 0px);
+    @include transition(transform 0.5s ease 0s);
+    display: block;
+    margin: 0;
+  }
+  & ~ .tab-content {
+    background: #fff;
+  }
+  // POSITIONG OPTIONS
+  &.nav-tabs-left,
+  &.nav-tabs-right {
+    border-bottom: none;
+    &:after {
+      border-bottom: none;
+    }
+    & > li {
+      & > a {
+        &:after {
+          width: calc(100% + 1px);
+          height: 100%;
+        }
+      }
+      &.active {
+        a{&:after {
+            @include translate3d(0px, 0px, 0px);
+          }
+        }
+      }
+    }
+  }
+  &.nav-tabs-left {
+    & > li {
+      & > a {
+        &:after {
+          @include translate3d(100%, 0, 0);
+        }
+        span {
+          @include translate3d(5px, 0, 0px);
+        }
+      }
+      &.active {
+        a{span {
+            @include translate3d(-5px, 0, 0px);
+          }
+        }
+        .icon:before {
+          @include translate3d(-5px, 0, 0px);
+        }
+      }
+    }
+  }
+  &.nav-tabs-right {
+    & > li {
+      & > a {
+        &:after {
+          @include translate3d(-100%, 0, 0);
+          left: -1px;
+        }
+        span {
+          @include translate3d(-5px, 0, 0px);
+        }
+      }
+      &.active {
+        a{span {
+            @include translate3d(5px, 0, 0px);
+          }
+        }
+        .icon:before {
+          @include translate3d(5px, 0, 0px);
+        }
+      }
+    }
+  }
+}
+
+.nav-tabs-header{
+  overflow: scroll;
+  width: 100%;
+  .nav-tabs{
+    width:auto;
+    white-space: nowrap;
+     & > li{
+        display:inline-block;
+        float: inherit;
+      }
+  }
+  &.nav-tabs-linetriangle{
+    height:54px;
+    overflow-y: hidden;
+    &:after{
+      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+      width: 100%;
+      position: relative;
+      bottom: 3px;
+      z-index: 120;    
+      content: "";
+      clear: both;    
+    }
+    &  ~ .tab-content{
+      position: relative;
+      top:-12px;
+    }
+  }
+}
+.nav-tabs-header ~ .tab-content{
+  overflow: hidden;
+  padding: 15px;
+}
+.nav-tab-dropdown .cs-select{
+  width: 100% !important;
+  max-width: 100%;
+  .cs-placeholder{
+    height: 48px;
+    padding: 12px 34px 15px 15px;
+    font-family: 'Montserrat';
+    font-weight: 500;
+    letter-spacing: 0.06em;
+    font-size: 10.5px;
+    text-transform: uppercase;
+  }
+  .cs-backdrop{
+    border:1px solid transparent;
+    border-bottom: 1px solid $form-control-border-color;
+  }
+}
+
+.nav-item {
+  .arrow_tab {
+    overflow: hidden;
+    background-color: $color-master-lighter;
+    opacity: 0.5;
+    border-color: $color-master-light;
+  }
+  .active {
+    .arrow_tab {
+      opacity: 1;
+      background-color: $color-white !important;
+      border-color: $color-white;
+    }
+  }
+}
+
+/* Panel Groups
+------------------------------------
+*/
+
+.card-group {
+  margin-bottom: 18px;
+  &.horizontal{
+    display: block;
+    .card+.card{
+      border-left:1px solid $panel-border-color;
+    }
+  }
+  .card-heading {
+    padding: 13px 18px 10px 22px;
+    &.collapsed {
+      background-color: #fff;
+    }
+    & + .card-collapse {
+      .card-body {
+        border: 0;
+      }
+    }
+    .card-title {
+      width: 100%;
+      & > a {
+        color: $color-master;
+        font-size: 13px;
+        font-weight: normal;
+        display: block;
+        opacity: 1;
+        &:hover {
+          color: $color-master !important;
+          &:after {
+            color: $color-master !important;
+          }
+        }
+        &:after {
+          font-family: 'FontAwesome';
+          content: "\f056";
+          position: absolute;
+          right:13px;
+          top: 36%;
+          color: $color-master;
+        }
+        &.collapsed {
+          color: fade($color-master,
+          70%);
+          opacity: 1;
+          &:after {
+            content: "\f055";
+            color: fade($color-master, 70%);
+          }
+        }
+      }
+    }
+  }
+  .card {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1 0 0;
+    -ms-flex: 1 0 0;
+    flex: 1 0 0;
+    & + .card {
+      margin-top: 2px;
+    }
+    .card-body {
+      height: auto;
+    }
+  }
+}
+.nav-pills {
+  > li {
+    &:first-child{
+      padding-left: 0;
+    }
+    // Links rendered as pills
+    padding-left: 0;
+    > a {
+      color: $color-master;
+    }
+    // Active state
+    &.active > a {
+      &,
+      &:hover,
+      &:focus {
+        color: $color-master;
+        background-color: $color-master-light;
+      }
+    }
+  }
+
+}
+@media (max-width:767px) {
+
+  .nav.nav-tabs.nav-stack-sm {
+    li {
+      float: none;
+    }
+    &.nav-tabs-linetriangle > li.active > a:after,
+    &.nav-tabs-linetriangle > li.active > a:before {
+      display: none;
+    }
+  }
+}

resources/assets/sass/modules/_timeline.scss

@@ -0,0 +1,521 @@
+/*------------------------------------------------------------------
+[24. Timeline]
+*/
+
+/*
+  Adapted from Vertical Timeline by Sebastiano Guerriero
+  http://codyhouse.co/gem/vertical-timeline/
+*/
+
+/* -------------------------------- 
+
+Modules - reusable parts of our design
+
+-------------------------------- */
+
+.timeline-container {
+    /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
+    
+    width: 90%;
+    max-width: 1170px;
+    margin: 0 auto;
+    &::after {
+        /* clearfix */
+        
+        content: '';
+        display: table;
+        clear: both;
+    }
+    &.top-circle{
+        &:before{
+            position: absolute;
+            width: 20px;
+            height: 20px;
+            @include border-radius(99px);
+            background-color: #fff;
+            z-index: 10;
+        }
+    }
+}
+/* -------------------------------- 
+
+Main components 
+
+-------------------------------- */
+
+.timeline {
+    position: relative;
+    padding: 3em 0 10em 0;
+    margin-top: 0;
+    margin-bottom: 0;
+    &::before {
+        /* this is the vertical line */
+        
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 18px;
+        height: 100%;
+        width: 2px;
+        background: #fff;
+    }
+}
+@media only screen and (min-width: 1170px) {
+    .timeline-container:not(.left) {
+        .timeline {
+            margin-bottom: 0;
+            &::before {
+                left: 50%;
+                margin-left: -2px;
+            }
+        }
+    }
+}
+.timeline-block {
+    position: relative;
+    margin: 2em 0;
+    &:after {
+        content: "";
+        display: table;
+        clear: both;
+    }
+    &:first-child {
+        margin-top: 0;
+    }
+    &:last-child {
+        margin-bottom: 0;
+    }
+}
+@media only screen and (min-width: 1170px) {
+    .timeline-container:not(.left) {
+        .timeline {
+            .timeline-block {
+                margin: 4em 0;
+                &:first-child {
+                    margin-top: 0;
+                }
+                &:last-child {
+                    margin-bottom: 0;
+                }
+            }
+        }
+    }
+}
+.timeline-point {
+    position: absolute;
+    top: 12px;
+    left: 0;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    text-align: center;
+    background: darken($color-master-light, 20%);
+    border: 2px solid #fff;
+    &.small {
+        height: 12px;
+        margin-left: 13px;
+        margin-top: 14px;
+        width: 12px;
+    }
+    i {
+        color: #fff;
+        font-size: 14px;
+        left: 50%;
+        margin-left: -7px;
+        margin-top: -7px;
+        position: absolute;
+        top: 50%;
+    }
+    &.primary {
+        background-color: $color-primary;
+    }
+    &.complete {
+        background-color: $color-complete;
+    }
+    &.success {
+        background-color: $color-success;
+    }
+    &.info {
+        background-color: $color-info;
+    }
+    &.danger {
+        background-color: $color-danger;
+    }
+    &.warning {
+        background-color: $color-warning;
+    }
+}
+@media only screen and (min-width: 1170px) {
+    .timeline-container:not(.left) {
+        .timeline {
+            .timeline-point {
+                left: 50%;
+                margin-left: -21px;
+                /* Force Hardware Acceleration in WebKit */
+                
+                -webkit-transform: translateZ(0);
+                -webkit-backface-visibility: hidden;
+                &.is-hidden {
+                    visibility: hidden;
+                }
+                &.small {
+                    margin-left: -7px;
+                }
+                &.bounce-in {
+                    visibility: visible;
+                    -webkit-animation: cd-bounce-1 0.6s;
+                    -moz-animation: cd-bounce-1 0.6s;
+                    animation: cd-bounce-1 0.6s;
+                }
+            }
+        }
+    }
+}
+@-webkit-keyframes cd-bounce-1 {
+    0% {
+        opacity: 0;
+        -webkit-transform: scale(0.5);
+    }
+    60% {
+        opacity: 1;
+        -webkit-transform: scale(1.2);
+    }
+    100% {
+        -webkit-transform: scale(1);
+    }
+}
+@-moz-keyframes cd-bounce-1 {
+    0% {
+        opacity: 0;
+        -moz-transform: scale(0.5);
+    }
+    60% {
+        opacity: 1;
+        -moz-transform: scale(1.2);
+    }
+    100% {
+        -moz-transform: scale(1);
+    }
+}
+@keyframes cd-bounce-1 {
+    0% {
+        opacity: 0;
+        -webkit-transform: scale(0.5);
+        -moz-transform: scale(0.5);
+        -ms-transform: scale(0.5);
+        -o-transform: scale(0.5);
+        transform: scale(0.5);
+    }
+    60% {
+        opacity: 1;
+        -webkit-transform: scale(1.2);
+        -moz-transform: scale(1.2);
+        -ms-transform: scale(1.2);
+        -o-transform: scale(1.2);
+        transform: scale(1.2);
+    }
+    100% {
+        -webkit-transform: scale(1);
+        -moz-transform: scale(1);
+        -ms-transform: scale(1);
+        -o-transform: scale(1);
+        transform: scale(1);
+    }
+}
+.timeline-content {
+    position: relative;
+    margin-left: 60px;
+    &:after {
+        content: "";
+        display: table;
+        clear: both;
+    }
+    .card {
+        margin-bottom: 0;
+    }
+    .event-date {
+        display: inline-block;
+        float: left;
+        padding: .8em 0;
+        opacity: .7;
+        clear: both;
+    }
+}
+@media (max-width: 480px) {
+    .timeline-container{
+        width: 94%;
+    }
+}
+@media only screen and (min-width: 768px) {} @media only screen and (min-width: 1170px) {
+    .timeline-container:not(.left) {
+        .timeline {
+            .timeline-content {
+                margin-left: 0;
+                width: 46%;
+                &::before {
+                    top: 24px;
+                    left: 100%;
+                    border-color: transparent;
+                    border-left-color: white;
+                }
+                &.is-hidden {
+                    visibility: hidden;
+                }
+                &.bounce-in {
+                    visibility: visible;
+                    -webkit-animation: cd-bounce-2 0.6s;
+                    -moz-animation: cd-bounce-2 0.6s;
+                    animation: cd-bounce-2 0.6s;
+                }
+                .event-date {
+                    position: absolute;
+                    width: 100%;
+                    left: 118%;
+                    top: -2px;
+                    font-size: 16px;
+                    font-size: 1rem;
+                    small {
+                        margin-top: 13px;
+                        display: block;
+                    }
+                    h6 + small {
+                        margin-top: 0;
+                    }
+                }
+            }
+            .timeline-block {
+                &:nth-child(odd) .timeline-content .card {
+                    float: right;
+                }
+                &:nth-child(even) {
+                    .timeline-content {
+                        float: right;
+                        &::before {
+                            top: 24px;
+                            left: auto;
+                            right: 100%;
+                            border-color: transparent;
+                            border-right-color: white;
+                        }
+                        .event-date {
+                            left: auto;
+                            right: 118%;
+                            text-align: right;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+@media only screen and (min-width: 1170px) {
+    /* inverse bounce effect on even content blocks */
+    
+    .timeline-container:not(.left) {
+        .timeline {
+            .timeline-block:nth-child(even) .timeline-content.bounce-in {
+                -webkit-animation: cd-bounce-2-inverse 0.6s;
+                -moz-animation: cd-bounce-2-inverse 0.6s;
+                animation: cd-bounce-2-inverse 0.6s;
+            }
+        }
+    }
+}
+@-webkit-keyframes cd-bounce-2 {
+    0% {
+        opacity: 0;
+        -webkit-transform: translateX(-100px);
+    }
+    60% {
+        opacity: 1;
+        -webkit-transform: translateX(20px);
+    }
+    100% {
+        -webkit-transform: translateX(0);
+    }
+}
+@-moz-keyframes cd-bounce-2 {
+    0% {
+        opacity: 0;
+        -moz-transform: translateX(-100px);
+    }
+    60% {
+        opacity: 1;
+        -moz-transform: translateX(20px);
+    }
+    100% {
+        -moz-transform: translateX(0);
+    }
+}
+@keyframes cd-bounce-2 {
+    0% {
+        opacity: 0;
+        -webkit-transform: translateX(-100px);
+        -moz-transform: translateX(-100px);
+        -ms-transform: translateX(-100px);
+        -o-transform: translateX(-100px);
+        transform: translateX(-100px);
+    }
+    60% {
+        opacity: 1;
+        -webkit-transform: translateX(20px);
+        -moz-transform: translateX(20px);
+        -ms-transform: translateX(20px);
+        -o-transform: translateX(20px);
+        transform: translateX(20px);
+    }
+    100% {
+        -webkit-transform: translateX(0);
+        -moz-transform: translateX(0);
+        -ms-transform: translateX(0);
+        -o-transform: translateX(0);
+        transform: translateX(0);
+    }
+}
+@-webkit-keyframes cd-bounce-2-inverse {
+    0% {
+        opacity: 0;
+        -webkit-transform: translateX(100px);
+    }
+    60% {
+        opacity: 1;
+        -webkit-transform: translateX(-20px);
+    }
+    100% {
+        -webkit-transform: translateX(0);
+    }
+}
+@-moz-keyframes cd-bounce-2-inverse {
+    0% {
+        opacity: 0;
+        -moz-transform: translateX(100px);
+    }
+    60% {
+        opacity: 1;
+        -moz-transform: translateX(-20px);
+    }
+    100% {
+        -moz-transform: translateX(0);
+    }
+}
+@keyframes cd-bounce-2-inverse {
+    0% {
+        opacity: 0;
+        -webkit-transform: translateX(100px);
+        -moz-transform: translateX(100px);
+        -ms-transform: translateX(100px);
+        -o-transform: translateX(100px);
+        transform: translateX(100px);
+    }
+    60% {
+        opacity: 1;
+        -webkit-transform: translateX(-20px);
+        -moz-transform: translateX(-20px);
+        -ms-transform: translateX(-20px);
+        -o-transform: translateX(-20px);
+        transform: translateX(-20px);
+    }
+    100% {
+        -webkit-transform: translateX(0);
+        -moz-transform: translateX(0);
+        -ms-transform: translateX(0);
+        -o-transform: translateX(0);
+        transform: translateX(0);
+    }
+}
+.timeline-container {
+    &.center {
+        .timeline {
+            // Split view
+            margin-top: 3em;
+            margin-bottom: 3em;
+            &::before {
+                left: 50%;
+                margin-left: -2px;
+            }
+            .timeline-point {
+                left: 50%;
+                margin-left: -21px;
+                /* Force Hardware Acceleration in WebKit */
+                
+                -webkit-transform: translateZ(0);
+                -webkit-backface-visibility: hidden;
+                &.is-hidden {
+                    visibility: hidden;
+                }
+                &.small {
+                    margin-left: -7px;
+                }
+                &.bounce-in {
+                    visibility: visible;
+                    -webkit-animation: cd-bounce-1 0.6s;
+                    -moz-animation: cd-bounce-1 0.6s;
+                    animation: cd-bounce-1 0.6s;
+                }
+            }
+            .timeline-content {
+                margin-left: 0;
+                width: 46%;
+                &::before {
+                    top: 24px;
+                    left: 100%;
+                    border-color: transparent;
+                    border-left-color: white;
+                }
+                &.is-hidden {
+                    visibility: hidden;
+                }
+                &.bounce-in {
+                    visibility: visible;
+                    -webkit-animation: cd-bounce-2 0.6s;
+                    -moz-animation: cd-bounce-2 0.6s;
+                    animation: cd-bounce-2 0.6s;
+                }
+                .event-date {
+                    position: absolute;
+                    width: 100%;
+                    left: 118%;
+                    top: -2px;
+                    font-size: 16px;
+                    font-size: 1rem;
+                    small {
+                        margin-top: 13px;
+                        display: block;
+                    }
+                    h6 + small {
+                        margin-top: 0;
+                    }
+                }
+            }
+            .timeline-block {
+                &:nth-child(odd) .timeline-content .card {
+                    float: right;
+                }
+                &:nth-child(even) {
+                    .timeline-content {
+                        float: right;
+                        &::before {
+                            top: 24px;
+                            left: auto;
+                            right: 100%;
+                            border-color: transparent;
+                            border-right-color: white;
+                        }
+                        .event-date {
+                            left: auto;
+                            right: 118%;
+                            text-align: right;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+@media only screen and (min-width: 1170px) {
+    .timeline-container.left{
+        width: 60%;
+        margin-left: 100px;
+    }
+}

resources/assets/sass/modules/_treeview.scss

@@ -0,0 +1,36 @@
+/*------------------------------------------------------------------
+[13. Treeview]
+*/
+
+span.dynatree-active a{
+	color:$color-master-dark !important; 
+	background-color: transparent !important;
+}
+
+span.dynatree-selected a{
+	color:$color-master-dark !important; 
+	font-style: normal;
+
+}
+ul.dynatree-container a:focus, span.dynatree-focused a:link{
+	background-color: transparent;
+}
+ul.dynatree-container{
+	background-color: transparent;
+	a:hover{
+		color: $color-master;
+		opacity: 0.7;
+		background-color: transparent;
+	}
+}
+
+ul.dynatree-container a{
+	color: $color-master;
+}
+
+span.dynatree-empty, span.dynatree-vline, span.dynatree-connector, span.dynatree-expander, span.dynatree-icon, span.dynatree-checkbox, span.dynatree-radio, span.dynatree-drag-helper-img, #dynatree-drop-marker{
+	height: 17px;
+	position: relative;
+	top: 3px;
+}
+

resources/assets/sass/modules/_typography.scss

@@ -0,0 +1,856 @@
+/*------------------------------------------------------------------
+[5. Typography]
+*/
+
+/* Standard elements
+--------------------------------------------------
+*/
+
+/* To Load Hinted Fonts for Windows */
+@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600');
+
+@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900');
+
+@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,500,600');
+
+html{
+    font-size: 100%;
+    -ms-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
+}
+body{
+    color: $color-master;
+    font-family: 'Open Sans', sans-serif !important;
+    font-size: 14px;
+    font-weight: normal;
+    letter-spacing: 0.01em;
+    -webkit-font-smoothing:antialiased;
+    -webkit-text-size-adjust:100%;
+    -ms-text-size-adjust:100%;
+    -webkit-font-feature-settings: "kern" 1;
+    -moz-font-feature-settings: "kern" 1;
+}
+/* Headings 
+------------------------------------
+*/
+h1, 
+h2, 
+h3, 
+h4, 
+h5, 
+h6 {
+    margin: 10px 0;
+    font-family: "Segoe UI","Helvetica Neue", Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing:antialiased;
+    -webkit-text-size-adjust:100%;
+    -ms-text-size-adjust:100%;
+    font-weight: 300;
+    color: $color-master-dark;
+}
+h1 {
+    font-size: 44px;
+    line-height: 55px;
+    letter-spacing: -0.08px;
+}
+h2 {
+    font-size: 31px;
+    line-height: 40px;
+}
+h3 {
+    font-size: 27px;
+    line-height: 35px;
+}
+h4 {
+    font-size: 22px;
+    line-height: 31.88px;
+}
+h5{
+    font-size: 18px;
+    line-height: 25.88px;
+}
+h3 small, 
+h4 small, 
+h5 small {
+    font-weight: 300;
+}
+h1.block, 
+h2.block, 
+h3.block, 
+h4.block, 
+h5.block, 
+h6.block {
+    padding-bottom: 10px;
+}
+/* Lins and Others
+------------------------------------
+*/
+a {
+    text-shadow: none !important;
+    color: $color-primary-dark;
+    transition: color 0.1s linear 0s,background-color 0.1s linear 0s,opacity 0.2s linear 0s !important;
+}
+a:focus, a:hover, a:active {
+    color: $color-primary;
+}
+a,a:focus, a:hover, a:active {
+    outline: 0 !important;
+    text-decoration: none;
+}
+a[ng-click] {
+    cursor: pointer;
+}
+br {
+   line-height: normal;
+   clear: both;
+}
+code{
+    color:$color-danger-dark;
+    background-color: $color-master-lighter;
+    &:hover {
+        background-color: $color-danger-lighter;
+    }
+}
+p {
+    display: block;
+    font-size: 14px;
+    font-weight: normal;
+    letter-spacing: 0.01em;
+    line-height: 22px;
+    margin: 0px 0px 10px 0px;
+    font-style: normal;
+    white-space: normal;
+}
+small, 
+.small{
+    line-height: 18px;
+    font-size: 85%;
+}
+label {
+    &.inline {
+        display: inline-block;
+        position: relative;
+        top: 0px;
+        font-size: 13px;
+    }
+}
+ul,ol {
+    margin-bottom: 10px;
+    & > li {
+        padding-left: 3px;
+        line-height: 24px;
+    }
+    &.lg-icon{
+        & > li {
+            font-size: 21px;
+            & span {
+                font-size: 14px;
+            }
+        }
+    }
+    &.no-style{
+        list-style: none;
+        padding-left: 5px;
+    }
+}
+address {
+    margin-bottom: 0px;
+    a{
+        color:$color-master;
+    }
+}
+blockquote {
+    padding: 0 0 0 18px;
+    border-left:0;
+    &:before{
+        content: '';
+        font-family: FontAwesome;
+        content: "\f10d";
+        margin-right: 13px;
+        float: left;
+    }
+    p {
+        font-size: 16px;
+    }
+    small {
+        line-height: 29px;
+        color: #8b91a0;
+        padding-left: 30px;
+        &:before {
+            content: "";
+        }
+    }
+    &.pull-right {
+        border-right:0;
+        &:before{
+            float: right;
+            content: '';
+            font-family: FontAwesome;
+            content: "\f10d";
+            margin-left: 13px;
+            margin-right: 0;
+        }
+        small {
+            padding-right: 30px;
+            &:after {
+                content: "";
+            }
+        }
+    }
+}
+hr{
+  border-color:$color-master-light;
+  &.double{
+    border-width:2px;
+  }
+  &.dotted{
+    border-style:dotted none none;
+  }
+}
+
+/* Font Sizes 
+------------------------------------
+*/
+
+.small-text {
+    font-size: 12px !important;
+}
+.normal-text {
+    font-size: 13px !important;
+}
+.large-text {
+    font-size: 15px !important;
+}
+
+/* Font Weights
+------------------------------------
+ */
+
+.normal {
+    font-weight: normal;
+}
+.semi-bold {
+    font-weight: 400 !important;
+}
+.bold {
+    font-weight: bold !important;
+}
+.light {
+    font-weight: 300 !important;
+}
+
+.lightest {
+    font-weight: 100 !important;
+}
+
+
+/* Misc 
+------------------------------------
+*/
+
+.logo {
+    margin: 18px 14px;
+}
+.all-caps {
+    text-transform: uppercase;
+}
+.muted {
+    color: lighten($color-master,50%);
+}
+.hint-text{
+    opacity: .7;
+}
+.no-decoration{
+    text-decoration:none !important;
+}
+/* Monochrome Colors
+------------------------------------
+ */
+
+.bg-master{
+    background-color: $color-master !important;
+}
+.bg-master-light{
+    background-color: $color-master-light !important;
+}
+.bg-master-lighter{
+    background-color: $color-master-lighter !important;
+}
+.bg-master-lightest{
+    background-color: $color-master-lightest !important;
+}
+.bg-master-dark{
+    background-color: $color-master-dark !important;
+}
+.bg-master-darker{
+    background-color: $color-master-darker !important;
+}
+.bg-master-darkest{
+    background-color: $color-master-darkest !important;
+}
+
+/* Contextual Colors
+------------------------------------
+*/
+
+/* Primary
+------------------------------------
+*/
+.bg-primary {
+    background-color: $color-primary !important;
+}
+.bg-primary-dark {
+    background-color: $color-primary-dark !important;
+}
+.bg-primary-darker {
+    background-color: $color-primary-darker !important;
+}
+.bg-primary-light {
+    background-color: $color-primary-light !important;
+}
+.bg-primary-lighter {
+    background-color: $color-primary-lighter !important;
+}
+
+/* Complete 
+------------------------------------
+*/
+.bg-complete {
+    background-color: $color-complete !important;
+}
+.bg-complete-dark {
+    background-color: $color-complete-dark !important;
+}
+.bg-complete-darker {
+    background-color: $color-complete-darker !important;
+}
+.bg-complete-light {
+    background-color: $color-complete-light !important;
+}
+.bg-complete-lighter {
+    background-color: $color-complete-lighter !important;
+}
+
+/* Success 
+------------------------------------
+*/
+.bg-success {
+    background-color: $color-success !important;
+}
+.bg-success-dark {
+    background-color: $color-success-dark !important;
+}
+.bg-success-darker {
+    background-color: $color-success-darker !important;
+}
+.bg-success-light {
+    background-color: $color-success-light !important;
+}
+.bg-success-lighter {
+    background-color: $color-success-lighter !important;
+}
+
+/* Info
+------------------------------------
+*/
+.bg-info{
+    background-color: $color-info !important;
+}
+.bg-info-dark{
+    background-color: $color-info-dark !important;
+}
+.bg-info-darker{
+    background-color: $color-info-darker !important;
+}
+.bg-info-light{
+    background-color: $color-info-light !important;
+}
+.bg-info-lighter{
+    background-color: $color-info-lighter !important;
+}
+
+/* Danger 
+------------------------------------
+*/
+.bg-danger {
+    background-color: $color-danger !important;;
+}
+.bg-danger-dark {
+    background-color: $color-danger-dark !important;
+}
+.bg-danger-darker {
+    background-color: $color-danger-darker !important;
+}
+.bg-danger-light {
+    background-color: $color-danger-light !important;
+}
+.bg-danger-lighter {
+    background-color: $color-danger-lighter !important;
+}
+
+/* Warning
+------------------------------------
+ */
+.bg-warning {
+    background-color: $color-warning !important;
+}
+.bg-warning-dark {
+    background-color: $color-warning-dark !important;
+}
+.bg-warning-darker {
+    background-color: $color-warning-darker !important;
+}
+.bg-warning-light {
+    background-color: $color-warning-light !important;
+}
+.bg-warning-lighter {
+    background-color: $color-warning-lighter !important;
+}
+
+/* More Color Options
+------------------------------------
+*/
+
+/* Menu 
+------------------------------------
+*/
+.bg-menu-dark{
+    background-color: $color-menu-dark;
+}
+.bg-menu{
+    background-color: $color-menu;
+}
+.bg-menu-light{
+    background-color: $color-menu-light;
+}
+
+/* Gradients
+------------------------------------
+*/
+.gradient-grey {
+    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 75%);
+    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 75%);
+}
+.gradient-black {
+    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 75%);
+    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 75%);
+}
+
+/* Other Colors
+------------------------------------
+*/
+.bg-white{
+    background-color: #fff;
+}
+.bg-transparent{
+    background-color: transparent !important;
+}
+
+/* Text Colors */
+.link{
+    opacity: .7;
+    &:hover{
+        opacity: 1;
+    }
+}
+.text-black {
+    color: $color-master-dark !important;
+}
+.hover-black {
+    color: $color-master-dark !important;
+}
+.text-white {
+    color: #fff !important;
+}
+.hover-white {
+    color: $color-white !important;
+}
+
+.text-master {
+    color: $color-master !important;
+}
+.text-master-dark {
+    color: $color-master-dark !important;
+}
+.text-master-darker {
+    color: $color-master-darker !important;
+}
+.text-master-light {
+    color: $color-master-light !important;
+}
+.text-master-lighter {
+    color: $color-master-lighter !important;
+}
+.hover-master {
+    color: $color-master !important;
+}
+
+.text-complete {
+    color: $color-complete !important;
+}
+.text-complete-dark {
+    color: $color-complete-dark !important;
+}
+.text-complete-darker {
+    color: $color-complete-darker !important;
+}
+.text-complete-light {
+    color: $color-complete-light !important;
+}
+.text-complete-lighter {
+    color: $color-complete-lighter !important;
+}
+.hover-complete {
+    color: $color-complete !important;
+}
+
+.text-success {
+    color: $color-success !important;
+}
+.text-success-dark {
+    color: $color-success-dark !important;
+}
+.text-success-darker {
+    color: $color-success-darker !important;
+}
+.text-success-light {
+    color: $color-success-light !important;
+}
+.text-success-lighter {
+    color: $color-success-lighter !important;
+}
+.hover-success {
+    color: $color-success !important;
+}
+
+.text-info {
+    color: $color-info !important;
+}
+.text-info-dark {
+    color: $color-info-dark !important;
+}
+.text-info-darker {
+    color: $color-info-darker !important;
+}
+.text-info-light {
+    color: $color-info-light !important;
+}
+.text-info-lighter {
+    color: $color-info-lighter !important;
+}
+.hover-warning {
+    color: $color-warning !important;
+}
+.hover-info {
+    color: $color-info !important;
+}
+
+.text-warning-dark {
+    color: $color-warning-dark !important;
+}
+.text-warning-darker {
+    color: $color-warning-darker !important;
+}
+.text-warning-light {
+    color: $color-warning-light !important;
+}
+.text-warning-lighter {
+    color: $color-warning-lighter !important;
+}
+.hover-warning {
+    color: $color-warning !important;
+}
+
+.text-danger {
+    color: $color-danger !important;
+}
+.text-danger-dark {
+    color: $color-danger-dark !important;
+}
+.text-danger-darker {
+    color: $color-danger-darker !important;
+}
+.text-danger-light {
+    color: $color-danger-light !important;
+}
+.text-danger-lighter {
+    color: $color-danger-lighter !important;
+}
+.hover-danger {
+    color: $color-danger !important;
+}
+
+.text-primary {
+    color: $color-primary !important;
+}
+.text-primary-dark {
+    color: $color-primary-dark !important;
+}
+.text-primary-darker {
+    color: $color-primary-darker !important;
+}
+.text-primary-light {
+    color: $color-primary-light !important;
+}
+.text-primary-lighter {
+    color: $color-primary-lighter !important;
+}
+.hover-primary {
+    color: $color-primary !important;
+}
+
+/* Text Aligngments
+------------------------------------
+*/
+
+.text-right {
+    text-align: right !important;
+}
+.text-left {
+    text-align: left !important;
+}
+.text-center {
+    text-align: center !important;
+}
+
+
+.text-underline {
+    text-decoration: underline !important;
+}
+
+.pointer {
+    cursor: pointer !important;
+}
+
+/* Labels
+------------------------------------
+*/
+
+.label {
+    padding: 3px 9px;
+    font-size: 11px;
+    line-height: 1;
+    text-shadow: none;
+    background-color: $color-master-light;
+    font-weight: 600;
+    color: $color-master;
+    border-radius: .25em;
+}
+.label-success {
+    background-color: $color-success;
+    color: #fff;
+}
+.label-warning{
+    background-color: $color-warning;
+    color: #fff;
+}
+.label-important, .label-danger {
+    background-color: $color-danger;
+    color: #fff;
+}
+.label-info{
+    background-color: $color-success;
+    color: #fff;
+}
+.label-inverse {
+    background-color: $color-complete-dark;
+    color: #fff;
+}
+.label-white {
+    background-color: #fff;
+    color: $color-master;
+}
+
+/* Line-heights
+------------------------------------
+*/
+.lh-normal{
+    line-height: normal;
+}
+
+/* Font Faces
+------------------------------------
+*/
+
+.font-arial{
+    font-family:  Arial, sans-serif !important;
+}
+.font-opensans{
+    font-family: 'Open Sans', sans-serif !important;
+}
+.font-montserrat{
+    font-family: 'Montserrat' !important;
+}
+
+.font-lato{
+    font-family: 'Lato', sans-serif !important;
+}
+
+.font-georgia{
+    font-family: Georgia !important;
+}
+.font-heading{
+    font-family: "Segoe UI","Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+/* Wells
+------------------------------------
+*/
+.well {
+    background-color: $color-master-light;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+    -webkit-box-shadow: none !important;
+    -moz-box-shadow: none !important;
+    box-shadow: none !important;
+    border: none;
+    background-image: none;
+    &.well-large {
+        padding: 24px;
+        width: auto;
+    }
+    &.well-small {
+        padding: 13px;
+        width: auto;
+    }
+    &.green {
+        background-color: $color-complete;
+        color:  $color-white ;
+        border: none;
+    }
+}
+.overflow-ellipsis{
+    text-overflow:ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+.jumbotron {
+    @include border-radius(0);
+    p{
+        font-size: 14px;
+        font-weight: normal;
+        margin-bottom: inherit;
+        &.small{
+            font-size: 85%;
+        }
+    }
+}
+
+
+/* Responsive Handlers : Typo
+------------------------------------
+*/
+
+@media (max-width: 1400px) { 
+
+    body, p{
+        font-size: 13px;
+        line-height: 20px;
+    }
+
+
+    h1 {
+        font-size: 33px;
+        line-height: 44px;
+        letter-spacing: -0.08px;
+    }
+    h2 {
+        font-size: 28px;
+        line-height: 40px;
+    }
+    h3 {
+        font-size: 24px;
+        line-height: 35.88px;
+    }
+    h4 {
+        font-size: 18px;
+        line-height: 33.88px;
+    }
+    h5{
+        font-size: 16px;
+        line-height: 25.88px;
+    }
+    small, .small{
+         font-size: 89%;
+         line-height: 17px;
+    }
+
+}
+
+
+/* For Windows : Fixes 
+------------------------------------
+*/
+.windows {
+    body, 
+    p{
+        font-size: 13px;
+        letter-spacing: normal;
+    }
+    h3{
+        font-size: 29px;
+        line-height: 33px;
+    }
+    h4{
+        font-size: 23px;
+        line-height: 32px;
+    }
+    h5{
+        font-size: 19px;
+        line-height: 28px;
+        font-weight: normal;
+    }
+    h1, 
+    h2, 
+    h3, 
+    h4, 
+    h5{
+        font-weight: 300;
+        letter-spacing: normal;
+
+    }
+
+    .jumbotron p{
+        font-size: 13px;
+        &.small{
+            font-size: 85%;
+        }
+    }
+    small, 
+    .small{
+        // font-size: 85%;
+        font-size: 89%;
+    }
+
+
+}
+
+.alert {
+    & > p, & > ul {
+        margin-bottom: 0;
+    }
+}
+.table{
+    & > tbody{
+        & > tr{
+            & > td, & > th{
+                line-height: 1.42857143;
+            }
+        }
+    }
+    & > tfoot{
+        & > tr{
+            & > td, & > th{
+                line-height: 1.42857143;
+            }
+        }
+    }
+    & > thead{
+        & > tr{
+            & > td, & > th{
+                line-height: 1.42857143;
+            }
+        }
+    }
+}

resources/assets/sass/modules/_vector_map.scss

@@ -0,0 +1,144 @@
+/*------------------------------------------------------------------
+[26. Vector Map : Mapplic Plugin] 
+*/
+
+.horizontal-app-menu{
+	.map-controls{
+		left: 0;
+	}
+}
+.mapplic-container {
+	width: 100%;
+	background-color: transparent;
+	.mapplic-fullscreen-button {
+		left: auto;
+		right: 154px;
+		bottom: 0;
+		top: auto;
+	}
+	.mapplic-clear-button {
+		visibility: hidden;
+	}
+}
+.mapplic-tooltip:before {
+	content: "Location";
+	font-size: 12px;
+	margin: 0;
+	line-height: normal;
+	opacity: .7;
+	color: $color-master;
+}
+.mapplic-tooltip-close {
+	opacity: .5;
+	background: none;
+	&:after {
+		content: "\e60a";
+		font-family: 'pages-icon';
+		font-size: 12px;
+		position: relative;
+		top: -2px;
+		color: $color-master;
+		opacity: .7;
+	}
+}
+.mapplic-tooltip-title {
+	display: none;
+}
+.mapplic-tooltip-content {
+	margin-top: 5px;
+}
+.mapplic-tooltip {
+	max-width: 150px;
+	padding: 10px 12px;
+	border-radius: 4px;
+}
+.mapplic-tooltip-description {
+	font-weight: bold;
+	color: $color-master;
+}
+.mapplic-tooltip-description strong {
+	color: $color-danger;
+	margin-right: 2px;
+}
+.map-controls {
+	position: absolute;
+	left: 50px;
+	top: 80px;
+	z-index: 1;
+}
+.mapplic-pin {
+	background-image: url('#{$assets-url}/img/maps/marker-master.svg');
+	background-size: contain;
+	&.pulse {
+		background-image: url('#{$assets-url}/img/maps/pulse-master.svg');
+		&.green {
+			background-image: url('#{$assets-url}/img/maps/pulse-success.svg');
+		}
+		&.blue {
+			background-image: url('#{$assets-url}/img/maps/pulse-complete.svg');
+		}
+		&.purple {
+			background-image: url('#{$assets-url}/img/maps/pulse-primary.svg');
+		}
+		&.yellow {
+			background-image: url('#{$assets-url}/img/maps/pulse-warning.svg');
+		}
+		&.red {
+			background-image: url('#{$assets-url}/img/maps/pulse-danger.svg');
+		}
+	}
+	&.pulse-alt {
+		background-image: url('#{$assets-url}/img/maps/pulse-alt-master.svg');
+		&.green {
+			background-image: url('#{$assets-url}/img/maps/pulse-alt-success.svg');
+		}
+		&.blue {
+			background-image: url('#{$assets-url}/img/maps/pulse-alt-complete.svg');
+		}
+		&.purple {
+			background-image: url('#{$assets-url}/img/maps/pulse-alt-primary.svg');
+		}
+		&.yellow {
+			background-image: url('#{$assets-url}/img/maps/pulse-alt-warning.svg');
+		}
+		&.red {
+			background-image: url('#{$assets-url}/img/maps/pulse-alt-danger.svg');
+		}
+	}
+	&.marker {
+		background-image: url('#{$assets-url}/img/maps/marker-master.svg');
+		&.green {
+			background-image: url('#{$assets-url}/img/maps/marker-success.svg');
+		}
+		&.blue {
+			background-image: url('#{$assets-url}/img/maps/marker-complete.svg');
+		}
+		&.purple {
+			background-image: url('#{$assets-url}/img/maps/marker-primary.svg');
+		}
+		&.yellow {
+			background-image: url('#{$assets-url}/img/maps/marker-warning.svg');
+		}
+		&.red {
+			background-image: url('#{$assets-url}/img/maps/marker-danger.svg');
+		}
+	}
+	&.marker-alt {
+		background-image: url('#{$assets-url}/img/maps/marker-alt-master.svg');
+		&.green {
+			background-image: url('#{$assets-url}/img/maps/marker-alt-success.svg');
+		}
+		&.blue {
+			background-image: url('#{$assets-url}/img/maps/marker-alt-complete.svg');
+		}
+		&.purple {
+			background-image: url('#{$assets-url}/img/maps/marker-alt-primary.svg');
+		}
+		&.yellow {
+			background-image: url('#{$assets-url}/img/maps/marker-alt-warning.svg');
+		}
+		&.red {
+			background-image: url('#{$assets-url}/img/maps/marker-alt-danger.svg');
+		}
+	}
+}

resources/assets/sass/modules/_view.scss

@@ -0,0 +1,116 @@
+/*------------------------------------------------------------------
+[2. View Ports]
+*/
+.view-port{
+	position: relative;
+	width: 100%;
+	height: 100%;
+	display: block;
+	white-space: nowrap;
+	overflow: hidden;
+	.navbar{
+		border-radius: 0;
+		padding-left: 0;
+		margin-bottom:0;
+		border-left: 0;
+		display: table;
+		width: 100%;
+		top: 0;
+		border-top: 0;
+		padding: 0;
+		border-bottom: 1px solid #e7e7e7;
+		.navbar-inner{
+			display: table-cell;
+			height: 50px;
+			vertical-align: middle;
+		}
+		.action{
+			position: absolute;
+			top:0;
+			line-height: 50px;
+			z-index: 1;
+			&.pull-right{
+				right: 0;
+			}
+		}
+		.view-heading{
+			font-size: 15px;
+			text-align: center;
+		}
+		& > p{
+			line-height: 12px;
+			font-size: 12px;
+			margin: 0;
+		}
+		&.navbar-sm{
+			min-height: 35px;
+			.navbar-inner{
+				height: 35px;
+			}
+			.action{
+				line-height: 35px;
+			}
+		}
+	}
+	.view{
+		display: inline-block;
+		width: 100%;
+		height: 100%;
+		vertical-align: top;
+		@include backface-visibility(hidden);
+		-webkit-perspective: 1000;
+		@include transition(all 0.4s ease);
+		&:first-child{
+			&:before{
+				position: absolute;
+				content: '';
+				width: 100%;
+				height: 100%;
+				background-color: #000;
+				opacity:0;
+				@include transition(opacity 0.2s linear);
+				z-index: -1
+			}
+		}
+		&:last-child{
+			margin-left: -4px
+		}
+		&:only-child{
+			margin: 0;
+		}
+	}
+	&.from-top{
+		& > .view{
+			&:last-child{
+				@include translate3d(-100%,0,0);
+			}
+		}
+	}
+	&.push{
+		& > .view{
+			&:first-child{
+				@include translate3d(-100%,0,0);
+			}
+			&:last-child{
+				@include translate3d(-100%,0,0);
+			}
+		}
+	}
+	&.push-parrallax{
+		& > .view{
+			&:first-child{
+				@include transition(all 400ms cubic-bezier(0.1,.7,.1,1));
+				@include translate3d(-25%,0,0);
+				&:before{
+					opacity:0;
+					z-index: 100;
+				}
+			}
+			&:last-child{
+				@include transition(all 400ms cubic-bezier(0.1,.7,.1,1));
+				@include translate3d(-100%,0,0);
+				box-shadow:0 0 9px rgba(191,191,191,.36);
+			}
+		}
+	}
+}

resources/assets/sass/modules/_widgets.scss

@@ -0,0 +1,472 @@
+/*------------------------------------------------------------------
+[27. Widgets]
+*/
+.widget {
+  position: relative;
+  & > div {
+    position: relative;
+    z-index: 1;
+  }
+  &:after {
+    background-size: cover;
+    content: " ";
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    position: absolute;
+    z-index: 0;
+    opacity: .69;
+  }
+}
+.widget-1 {
+  &:after {
+    background-image: url("#{$assets-url}/img/dashboard/pages_hero.jpg");
+    background-size: cover;
+    content: " ";
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    position: absolute;
+    z-index: 0;
+    opacity: .69;
+  }
+  &:before {
+    background-image: url('#{$base-img-url}/linear_gradient.png');
+    background-repeat: repeat-x;
+    content: " ";
+    left: 0;
+    right: 0;
+    height: 325px;
+    bottom: 0;
+    position: absolute;
+    z-index: 1;
+  }
+  & > .card-block {
+    // padding: 54px 37px 37px 37px;
+    .company:nth-child(2) > div {
+      display: table;
+      margin: 0 auto;
+      width: 127px;
+    }
+  }
+  & > .card-block > * {
+    z-index: 1;
+  }
+  & > .card-block > *:not(.pull-bottom) {
+    position: relative;
+  }
+  & > .card-block .pull-bottom {
+    padding: 0 49px 56px 42px;
+  }
+  span.label {
+    color: #fff;
+    background: rgba(255, 255, 255, .3);
+  }
+}
+.widget-2 {
+  &:after {
+    background-image: url("#{$assets-url}/img/social/person-cropped.jpg");
+  }
+}
+.widget-3 {
+  a{text-decoration: none;
+  }
+  .pg-map {
+    font-size: 30px;
+  }
+  .widget-3-fav {
+    background: rgba(0, 0, 0, 0.07);
+    vertical-align: middle;
+    padding: 6px 11px;
+    display: block;
+  }
+}
+
+.widget-4{
+  .row-sm-height:nth-child(1){
+    height:30px;
+  }
+  .row-sm-height:nth-child(2){
+    height:30px;
+  }
+}
+.widget-4-chart {
+  height: 100%;
+  width: 100%;
+  bottom: 0;
+  position: absolute;
+  right: 0;
+  &.line-chart .tick text,
+  .line-chart .nvd3 .nv-axis .nv-axisMaxMin text {
+    transform: translate(-10px, -32px);
+  }
+  .nvtooltip .nv-pointer-events-none {
+    thead {
+      display: none;
+    }
+    tbody {
+      .nv-pointer-events-none .key {
+        display: none;
+      }
+    }
+  }
+}
+.widget-5-chart-container {
+  overflow: hidden
+}
+.widget-5-chart {
+  height: auto;
+  width: auto;
+  bottom: 20px;
+  position: absolute;
+  right: 20px;
+  left: 20px;
+  top: 40px;
+}
+.widget-6 {
+  background: mix($color-master,
+  #fff,
+  69%);
+  .label {
+    background: rgba(0, 0, 0, .3);
+    color: rgba(255, 255, 255, .67);
+  }
+}
+.widget-7 {
+  .slide-back{
+    .row-sm-height:nth-child(1){
+      height: 60%;
+    }
+    .row-sm-height:nth-child(2){
+      height: 40%;
+    }
+  }
+}
+.widget-7-chart {
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  position: absolute;
+  &.line-chart[data-points="true"] .nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point {
+    stroke-opacity: 1;
+  }
+  .nvd3 circle.nv-point:nth-child(4) {
+    fill: $color-danger !important;
+    stroke: $color-danger !important;
+  }
+}
+.widget-8{
+  height:145px;
+  .row-xs-height:first-child{
+    height:41px
+  }
+}
+.widget-8-chart {
+  height: 100px;
+  width: 50%;
+  bottom: 0;
+  position: absolute;
+  right: 0;
+  .line-chart[data-points="true"] .nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point {
+    stroke-opacity: 0.3;
+  }
+  .line-chart .nvd3 .nv-groups path.nv-line {
+    stroke-opacity: 0.15;
+  }
+  .nvtooltip{
+    display: none;
+  }
+}
+
+.widget-9{
+  height:145px;
+  .row-xs-height:first-child{
+    height:26px;
+  }
+  .progress{
+    background:rgba(0,0,0,.1);
+  }
+}
+.widget-10{
+    height:145px;
+}
+.widget-11 {
+  sup {
+    margin-right: -4px;
+  }
+  .widget-11-table{
+    height:380px; 
+    tr td:first-child{
+      width: 40%;
+    }
+  }
+}
+.widget-11-2 {
+  sup {
+    margin-right: -4px;
+  }
+  .widget-11-2-table{
+    height:273px;
+  }
+}
+
+.widget-12 {
+  .list-inline {
+    a{padding: 3px 4px;
+      border-radius: 3px;
+      opacity: .7;
+    }
+    .active a {
+      opacity: 1;
+    }
+  }
+  .nvd3-line svg{
+    height:316px;
+  }
+  .company-stat-boxes  .close{
+    line-height:0;
+  }
+  .widget-12-search{
+    margin-top: -3px;
+  }
+}
+.widget-14 {
+    .row-xs-height:nth-child(1){
+        height: 30px
+    }
+    .row-xs-height:nth-child(2){
+        height: 120px
+    }
+    .row-xs-height:nth-child(3){
+        height: 297px
+    }
+}
+.widget-14-chart_y_axis {
+  position: absolute;
+  top: 0;
+  background: rgba(255,  255,  255, .8);
+  bottom: 0;
+  width: 35px;
+  left: 0;
+  z-index: 2;
+  .rickshaw_graph .y_ticks path,
+  .rickshaw_graph .x_ticks_d3 path {
+    fill: none;
+    stroke: none;
+  }
+  .rickshaw_graph .y_ticks text,
+  .rickshaw_graph .x_ticks_d3 text {
+    opacity: 0.35;
+    font-size: 11px;
+  }
+  .y_ticks.plain g:first-child {
+    opacity: 0 !important;
+  }
+}
+.widget-14-chart-legend .ui-sortable li {
+  padding-right: 0;
+  .action {
+    display: none;
+  }
+  &:last-child {
+    margin-top: 7px;
+  }
+}
+
+.widget-15{
+    #widget-15-tab-1 > div{
+        height:170px;
+    }
+}
+.widget-15-2{
+    height:469px;
+    #widget-15-2-tab-1 .full-width{
+        height:180px;
+    }
+}
+.widget-16-header .pull-left:last-child{
+    width:69%;
+}
+.widget-16-chart {
+    height:100px;
+  &.line-chart[data-stroke-width="2"] .nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point {
+    stroke-width: 2px;
+  }
+}
+
+.widget-17{
+    height:467px;
+    .widget-17-weather{
+        width:90%
+    }
+}
+.widget-18-post {
+    height:342px;
+  background: url('#{$assets-url}/img/social/quote.jpg');
+  background-position: center center;
+  background-size: cover
+}
+.widget-19-post {
+    height:237px;
+  background: #00A79A;
+  img {
+    top: 50%;
+    margin-top: -70px
+  }
+}
+.btn-circle-arrow {
+  border: 1px solid #fff;
+  border-radius: 100px;
+  position: relative;
+  width: 18px;
+  height: 18px;
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 4px;
+  i {
+    font-size: 11px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    margin-left: -5px;
+    margin-top: -4px;
+  }
+}
+
+/*** Large screens ***/
+@media only screen and (min-width:1824px) {
+  // Dashboard
+  .ar-3-2:before {
+    padding-top: calc(55% - 5px) !important;
+  }
+  .ar-2-3:before {
+    padding-top: calc(135% - 5px) !important;
+  }
+}
+@media (max-width:991px) {
+  .card {
+    height: auto !important;
+  }
+  .widget-8,
+  .widget-9,
+  .widget-10 {
+    height: 180px !important;
+  }
+}
+@media (max-width:480px) {
+  .widget-1-wrapper {
+    height: 340px;
+  }
+}
+
+
+/* WIDGET MANAGER */
+#widget-filter{
+  font-size: 18px;
+  &:focus{
+    background: none;
+    border: none;
+  }
+}
+#widgetDetails {
+  .progress-circle-indeterminate{
+    position: absolute;
+    left: 50%;
+    margin-left: -19px;
+    top: 50%;
+    margin-top: -19px;
+  }
+}
+.widgets-container {
+    margin: 0 auto;
+}
+#widget-preview{
+  display: block;
+  margin: 0 auto;
+}
+.widget-item {
+    overflow: hidden;
+    cursor: default;
+    background-color: #fff;
+    margin-bottom: 10px;
+    position: relative;
+    width: 280px;
+    height: 240px;
+    &:hover {
+        cursor: pointer;
+        &:before{
+          opacity: 0;
+        }
+        &:after{
+          opacity: .8;
+        }
+        .item-footer{
+          color: $color-primary !important;
+        }
+    }
+    &:before{
+      position: absolute;
+      content: "";
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      background-image: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.8) 70%);
+      transition: opacity .3s ease;
+      -webkit-transition: opacity .3s ease;
+      opacity: 1;
+    }
+    &:after{
+      position: absolute;
+      content: "";
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      background: #fff;
+      opacity: 0;
+      transition: opacity .3s ease;
+      -webkit-transition: opacity .3s ease;
+    }
+    &[data-width="1"] {
+        width: 280px;
+    }
+    &[data-width="2"] {
+        width: 570px;
+    }
+    &[data-height="1"] {
+        height: 240px;
+    }
+    &[data-height="2"] {
+        height: 490px;
+    }
+    .item-footer{
+      color: $color-master;
+      p.pull-left{
+        text-overflow: ellipsis;
+        width: 84%;
+        white-space: nowrap;
+        overflow: hidden;
+      }
+      .pull-right{
+        .fa-stack{
+          font-size:69%;
+        }
+      }
+    }
+}
+
+@media (max-width: 420px) {
+    .widgets-container{
+        margin-top: 80px;
+    }
+}
+
+@media (max-width: 610px) {
+    .widget-item, .widgets-container {
+        width: 100% !important;
+    }
+}

resources/assets/sass/modules/_z_index.scss

@@ -0,0 +1,24 @@
+// z-index scale
+$zIndex-1:   100;
+$zIndex-2:   200;
+$zIndex-3:   300;
+$zIndex-4:   400;
+$zIndex-5:   500;
+$zIndex-6:   600;
+$zIndex-7:   700;
+$zIndex-8:   800;
+$zIndex-9:   900;
+$zIndex-10: 1000;
+
+//TODO: add all components
+// z-index applications
+
+
+$zIndex-sidebar : $zIndex-10;
+$zIndex-tooltips : $zIndex-10;
+$zIndex-quickview: $zIndex-10;
+$zIndex-notifications : $zIndex-9;
+$zIndex-navbar : $zIndex-8;
+$zIndex-dropdown : $zIndex-7;
+$zIndex-dropdownMask : $zIndex-6;
+$zIndex-portlet : $zIndex-6;

resources/assets/vue/app.js

@@ -0,0 +1,70 @@
+
+/**
+ * First we will load all of this project's JavaScript dependencies which
+ * includes Vue and other libraries. It is a great starting point when
+ * building robust, powerful web applications using Vue and Laravel.
+ */
+
+import Vue from 'vue'
+import store from './vuex/store'
+import Avatar from 'vue-avatar';
+import Vuelidate from 'vuelidate'
+import request from './mixins/requestMixin'
+import crud from './mixins/crudMixin'
+
+Vue.use(Vuelidate);
+Vue.component('user-avatar', Avatar);
+
+window.EventBus  = new Vue();
+window.route = require('../js/route');
+
+let handleOutsideClick;
+
+Vue.directive('closable', {
+    bind (el, binding, vnode) {
+        handleOutsideClick = (e) => {
+            e.stopPropagation();
+            const { handler, exclude } = binding.value;
+
+            let clickedOnExcludedEl = false;
+            exclude.forEach(refName => {
+                if (!clickedOnExcludedEl) {
+                    const excludedEl = vnode.context.$refs[refName];
+                    clickedOnExcludedEl = excludedEl.contains(e.target)
+                }
+            });
+
+            if (!el.contains(e.target) && !clickedOnExcludedEl) {
+                vnode.context[handler]()
+            }
+        };
+        document.addEventListener('click', handleOutsideClick);
+        document.addEventListener('touchstart', handleOutsideClick)
+    },
+
+    unbind () {
+        document.removeEventListener('click', handleOutsideClick);
+        document.removeEventListener('touchstart', handleOutsideClick)
+    }
+})
+
+/**
+ * Next, we will create a fresh Vue application instance and attach it to
+ * the page. Then, you may begin adding components to this application
+ * or customize the JavaScript scaffolding to fit your unique needs.
+ */
+
+const files = require.context('./', true, /\.vue$/i)
+files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));
+
+Vue.mixin({
+    methods: {
+        route: route
+    },
+    mixins: [request, crud]
+});
+
+const app = new Vue({
+    el: '#app',
+    store
+});

resources/assets/vue/components/address/forms/AddressFormComponent.vue

@@ -0,0 +1,115 @@
+<template>
+    <div class="row p-t-25 text-left">
+        <div class="col">
+            <div class="row">
+                <div class="col">
+                    <div class="b-l b-success p-l-15 m-b-15" style="border-left-width: 3px;">
+                        <h6 class="bold all-caps no-margin text-success">New Address</h6>
+                        <div class="muted all-caps fs-12">Create A New Delivery Address</div>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col">
+                    <validation-wrapper-component :validator="$v.parameters.street_one">
+                        <label class="muted">Address Line 1</label>
+                        <input class="form-control" name="street_one" v-model="parameters.street_one">
+                    </validation-wrapper-component>
+                    <validation-wrapper-component :validator="$v.parameters.street_two">
+                        <label class="muted">Address Line 2</label>
+                        <input class="form-control" name="street_two" v-model="parameters.street_two">
+                    </validation-wrapper-component>
+                    <div class="row">
+                        <div class="col p-r-5">
+                            <validation-wrapper-component :validator="$v.parameters.city">
+                                <label class="muted">City</label>
+                                <input class="form-control" name="city" v-model="parameters.city">
+                            </validation-wrapper-component>
+                        </div>
+                        <div class="col p-l-5">
+                            <validation-wrapper-component :validator="$v.parameters.state">
+                                <label class="muted">State</label>
+                                <input class="form-control" name="State" v-model="parameters.state">
+                            </validation-wrapper-component>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col p-r-5">
+                            <validation-wrapper-component :validator="$v.parameters.post_code">
+                                <label class="muted">Post Code</label>
+                                <input class="form-control" name="post_code" v-model="parameters.post_code">
+                            </validation-wrapper-component>
+                        </div>
+                        <div class="col p-l-5">
+                            <validation-wrapper-component :validator="$v.parameters.country">
+                                <label class="muted">Country</label>
+                                <input class="form-control" name="country" v-model="parameters.country">
+                            </validation-wrapper-component>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row mb-3">
+                <div class="col">
+                    <div class="row">
+                        <div class="col text-right">
+                            <button type="button" class="btn btn-outline-dark float-left" @click="closeModal()">Cancel</button>
+                            <button type="button" class="btn btn-success" @click="submitForm()">Submit</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import { required } from "vuelidate/lib/validators";
+    export default {
+        props: {
+            id: {
+                type: Number,
+                required: true
+            }
+        },
+        watch: {
+            'id': function() {
+                this.parameters.company_id = this.id;
+            }
+        },
+        data() {
+			return {
+                parameters : {
+                    company_id: this.id,
+                    street_one: '',
+                    street_two: '',
+                    city: '',
+                    state: '',
+                    post_code: '',
+                    country: '',
+                    default: 1,
+                    billing: 1
+				}
+
+			}
+		},
+        validations: {
+            parameters: {
+                street_one: { required },
+                street_two: {},
+                city: { required },
+                state: { required },
+                post_code: { required },
+                country: { required }
+            }
+        },
+        methods:{
+            submitForm(){
+                this.submit((this.route('api.address.create')), 'post', 'address.form', true, true)
+            },
+            successHandler(){
+                this.crudSuccess();
+                EventBus.$emit('updateAddress')
+            }
+        }
+    }
+</script>

resources/assets/vue/components/authentication/forms/ForgetPasswordFormComponent.vue

@@ -0,0 +1,71 @@
+<template>
+    <div class="row">
+        <div class="col">
+            <div class="row m-r-0 m-l-0 m-b-20 animated fadeInUpBig fast" v-if="error">
+                <div class="col p-l-50">
+                    <small class="bold fs-10 text-danger">{{error}}</small>
+                </div>
+            </div>
+            <div class="row m-l-0 animated fadeInUpBig">
+                <div class="col b-t b-b b-grey animated" :class="[{'shake': $v.parameters.email.$error}]"  :style="[$v.parameters.email.$error ? {'border-bottom': 'solid 2px red !important'} : {}]">
+                    <div class="row align-items-center">
+                        <div class="col no-padding bg-white ">
+                            <div class="input-group transparent">
+                                <span class="input-group-addon no-border">
+                                    <i class="fa fa-envelope-o fa-fw p-l-15 p-t-20" style="padding-right: 18px;"></i>
+                                </span>
+                                <input v-model="parameters.email" placeholder="Email Address" class="form-control no-border bg-white p-t-35 p-b-35 p-l-0 p-r-0">
+                                <validation-error-component :validator="$v.parameters.email" class="absolute fs-12" style=" top: 10px; right: 15px; z-index: 99;"></validation-error-component>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row m-t-30 align-items-center">
+                <div class="col-auto animated fadeInLeftBig slower">
+                    <div class="b-t b-b b-r b-grey all-caps muted p-t-15 p-b-15 p-l-30 p-r-20 font-lato pointer fs-12" @click="$store.dispatch('toggleSection', {name: 'forgetPassword', status: false})" style="letter-spacing: 2px;"><i class="fa fa-angle-left" style="padding-right: 18px;"></i>Back to login</div>
+                </div>
+                <div class="col-auto ml-auto p-r-0 animated fadeInRightBig slow">
+                    <div class="bg-success all-caps text-white p-t-15 p-b-15 p-l-50 p-r-20 bold font-lato pointer fs-12" style="letter-spacing: 4px;" @click="submit(route('api.account.password.forget'), 'post', section, false , false)">Request Reset Link</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+
+    import { required, email } from "vuelidate/lib/validators";
+    import request from '../../../mixins/requestMixin'
+    export default {
+        props: {
+            section:{
+                type: String,
+                required: true
+            }
+        },
+        data() {
+            return {
+                error: '',
+                parameters: {
+                    email: ''
+                }
+            };
+        },
+        validations: {
+            parameters: {
+                email: { required, email }
+            }
+        },
+        methods:{
+            successHandler(){
+                this.$store.dispatch('toggleSection', {name: 'forgetPasswordSuccess', status: true})
+                this.$store.dispatch('passwordResetEmail', {email: this.parameters.email})
+            },
+            errorHandler(error){
+                this.error = error.message;
+            }
+        },
+        mixins: [request]
+    }
+
+</script>

resources/assets/vue/components/authentication/forms/LoginFormComponent.vue

@@ -0,0 +1,110 @@
+<template>
+    <div class="row">
+        <div class="col p-r-0">
+            <div class="row no-margin">
+                <div class="col">
+                    <div class="row m-b-20 animated fadeInUpBig fast" v-if="error">
+                        <div class="col p-l-50">
+                            <small class="bold fs-10 text-danger">{{error}}</small>
+                        </div>
+                    </div>
+                    <div class="row animated fadeInDownBig">
+                        <div class="col b-t b-b b-grey animated" :class="[{'shake': $v.parameters.email.$error}]" :style="[$v.parameters.email.$error ? {'border-bottom': 'solid 2px red !important'} : {}]">
+                            <div class="row align-items-center">
+                                <div class="col no-padding bg-white">
+                                    <div class="input-group transparent b-grey b-t">
+                                        <span class="input-group-addon no-border">
+                                            <i class="fa fa-user-o fa-fw p-l-15 p-t-20" style="padding-right: 18px;"></i>
+                                        </span>
+                                        <div class="form-control no-border bg-white p-t-25 p-b-35 p-l-0 p-r-0 text-muted fs-13 text-lowercase" style="cursor: default;">{{parameters.email}}</div>
+                                        <validation-error-component :validator="$v.parameters.email" class="absolute fs-12" style=" top: 10px; right: 15px; z-index: 99;"></validation-error-component>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row animated fadeInUpBig">
+                        <div class="col bg-white b-b b-grey animated" :class="[{'shake': $v.parameters.password.$error}]" :style="[$v.parameters.password.$error ? {'border-bottom': 'solid 2px red !important'} : {}]">
+                            <div class="row align-items-center">
+                                <div class="col no-padding bg-white">
+                                    <div class="input-group transparent b-grey b-b">
+                                        <span class="input-group-addon no-border">
+                                            <i class="fa fa-lock fa-fw p-l-15 p-t-20" style="padding-right: 18px;"></i>
+                                        </span>
+                                        <input type="password" v-model="parameters.password" placeholder="Password" class="form-control no-border bg-white p-t-35 p-b-35 p-l-0 p-r-0">
+                                        <validation-error-component :validator="$v.parameters.password" class="absolute fs-12" style=" top: 10px; right: 15px; z-index: 99;"></validation-error-component>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row m-t-30 align-items-center">
+                <div class="col-auto animated fadeInLeftBig slow">
+                    <div class="b-t b-b b-r b-primary bg-transparent all-caps text-primary p-t-15 p-b-15 p-l-50 p-r-50 bold font-lato pointer" style="letter-spacing: 8px;" @click="submit(route('api.account.authenticate.attempt'), 'post', section, false, false)">Login</div>
+                </div>
+                <div class="col animated fadeInRightBig slow">
+                    <small class="font-lato muted fs-10 pointer" @click="$store.dispatch('toggleSection', {name: 'forgetPassword', status: true})" style=" letter-spacing: 2px; ">Forgot Password ?</small>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import { required, email } from "vuelidate/lib/validators";
+    import request from '../../../mixins/requestMixin'
+
+    export default {
+        props: {
+            section:{
+                type: String,
+                required: true
+            },
+            email: {
+                type: String,
+                required: true
+            }
+        },
+        data() {
+            return {
+                error: '',
+                parameters: {
+                    email: this.email,
+                    password: ''
+                }
+            };
+        },
+        validations: {
+            parameters: {
+                email: { required, email },
+                password: { required }
+            }
+        },
+        watch: {
+            'email': function() {
+                this.parameters.email = this.email;
+            }
+        },
+        methods:{
+            successHandler(response){
+                localStorage.setItem('user-token', response.payload.access_token);
+                this.$store.dispatch('userAuthentication', {access_token: response.payload.access_token});
+
+                this.error = '';
+                this.$store.dispatch('toggleSection', {name: 'loginSuccess', status: true})
+                setTimeout(function(){
+                    window.location.href = response.payload.redirect_url;
+                }, 2000);
+            },
+            errorHandler(error){
+                this.$store.dispatch('userAuthentication', {access_token: ''});
+                localStorage.removeItem('user-token');
+
+                this.error = error.message;
+            }
+        },
+        mixins: [request]
+    }
+
+</script>

resources/assets/vue/components/authentication/forms/ResetPasswordFormComponent.vue

@@ -0,0 +1,103 @@
+<template>
+    <div class="row">
+        <div class="col p-r-0">
+            <div class="row no-margin">
+                <div class="col">
+                    <div class="row m-b-20 animated fadeInUpBig fast" v-if="error">
+                        <div class="col p-l-50">
+                            <small class="bold fs-10 text-danger" >{{error}}</small>
+                        </div>
+                    </div>
+                    <div class="row animated fadeInDownBig">
+                        <div class="col b-t b-b b-grey animated" :class="[{'shake': $v.parameters.password.$error}]"  :style="[$v.parameters.password.$error ? {'border-bottom': 'solid 2px red !important'} : {}]">
+                            <div class="row align-items-center">
+                                <div class="col no-padding bg-white ">
+                                    <div class="input-group transparent">
+                                        <span class="input-group-addon no-border">
+                                            <i class="fa fa-lock fa-fw p-l-15 p-t-20" style="padding-right: 18px;"></i>
+                                        </span>
+                                        <input v-model="parameters.password" placeholder="New Password" type="password" class="form-control no-border bg-white p-t-35 p-b-35 p-l-0 p-r-0">
+                                        <validation-error-component :validator="$v.parameters.password" class="absolute fs-12" style=" top: 10px; right: 15px; z-index: 99;"></validation-error-component>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row animated fadeInUpBig">
+                        <div class="col b-t b-b b-grey animated" :class="[{'shake': $v.parameters.confirmPassword.$error}]"  :style="[$v.parameters.confirmPassword.$error ? {'border-bottom': 'solid 2px red !important'} : {}]">
+                            <div class="row align-items-center">
+                                <div class="col no-padding bg-white ">
+                                    <div class="input-group transparent">
+                                        <span class="input-group-addon no-border">
+                                            <i class="fa fa-lock fa-fw p-l-15 p-t-20" style="padding-right: 18px;"></i>
+                                        </span>
+                                        <input v-model="parameters.confirmPassword" placeholder="Confirm Password" type="password" class="form-control no-border bg-white p-t-35 p-b-35 p-l-0 p-r-0">
+                                        <validation-error-component :validator="$v.parameters.confirmPassword" class="absolute fs-12" style=" top: 10px; right: 15px; z-index: 99;"></validation-error-component>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row m-t-30 align-items-center m-r-0">
+                <div class="col-auto animated fadeInLeftBig slower">
+                    <a :href="route('login')" @click="$store.dispatch('toggleLoading', {name: 'resetPasswordSection', status: true})">
+                        <div class="b-t b-b b-r b-grey all-caps muted p-t-15 p-b-15 p-l-30 p-r-20 font-lato pointer fs-12" style="letter-spacing: 2px;"><i class="fa fa-angle-left" style="padding-right: 18px;"></i>Go to login</div>
+                    </a>
+                </div>
+                <div class="col-auto ml-auto p-r-0 animated fadeInRightBig slow">
+                    <div class="bg-success all-caps text-white p-t-15 p-b-15 p-l-50 p-r-20 bold font-lato pointer fs-12" style="letter-spacing: 4px;" @click="submit(route('api.account.password.reset'), 'post', section, false , false)">Change Password</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+
+    import { required, minLength, sameAs } from "vuelidate/lib/validators";
+    import request from '../../../mixins/requestMixin'
+    export default {
+        props: {
+            section: {
+                type: String,
+                required: true
+            },
+            token: {
+                type: String,
+                required: true
+            }
+        },
+        data() {
+            return {
+                error: '',
+                parameters: {
+                    token: this.token,
+                    password: '',
+                    confirmPassword: ''
+                }
+            };
+        },
+        validations: {
+            parameters: {
+                password: {
+                    required,
+                    minLength: minLength(6)
+                },
+                confirmPassword: {
+                    sameAs: sameAs('password')
+                }
+            }
+        },
+        methods:{
+            successHandler(){
+                this.$store.dispatch('toggleSection', {name: 'resetPasswordSuccess', status: true});
+            },
+            errorHandler(error){
+                this.error = error.message;
+            }
+        },
+        mixins: [request]
+    }
+
+</script>

resources/assets/vue/components/authentication/sections/LoginSectionComponent.vue

@@ -0,0 +1,119 @@
+<template>
+    <div class="row">
+        <div class="col p-r-0">
+            <transition-component key="2" group enter-class="animated fadeInRightBig faster" leave-class="animated fadeOutUpBig" v-show="!$store.getters.isLoading('loginSection')">
+                <div class="row" key="1" v-show="!$store.getters.isShowing('loginForm') && !$store.getters.isShowing('registrationForm')">
+                    <div class="col p-r-0">
+                        <div class="row m-l-0">
+                            <div class="col p-l-50">
+                                <h5 class="font-lato light animated fadeInRightBig slow" style=" line-height: 50px; letter-spacing: 5px; ">Hi There!</h5>
+                            </div>
+                        </div>
+                        <div class="row  m-l-0 m-b-20  animated fadeInRightBig slow">
+                            <div class="col p-l-50">
+                                <p class="muted font-lato light lh-25" style="letter-spacing: 2px; ">Enter your email address to <b>register</b>/<b>login</b>.</p>
+                            </div>
+                        </div>
+                        <div class="row no-margin">
+                            <div class="col">
+                                <div class="row m-b-20 animated fadeInUpBig fast" v-if="error">
+                                    <div class="col p-l-50">
+                                        <small class="bold fs-10 text-danger">{{error}}</small>
+                                    </div>
+                                </div>
+                                <div class="row animated fadeInDownBig">
+                                    <div class="col b-t b-b b-grey animated" :class="[{'shake': $v.parameters.email.$error}]" :style="[$v.parameters.email.$error ? {'border-bottom': 'solid 2px red !important'} : {}]">
+                                        <div class="row align-items-center">
+                                            <div class="col no-padding bg-white">
+                                                <div class="input-group transparent b-grey b-t b-b">
+                                                    <span class="input-group-addon no-border">
+                                                        <i class="fa fa-user-o fa-fw p-l-15 p-t-20" style="padding-right: 18px;"></i>
+                                                    </span>
+                                                    <input placeholder="My Email Address" v-model="parameters.email" class="form-control no-border bg-white p-t-35 p-b-35 p-l-0 p-r-0">
+                                                    <validation-error-component :validator="$v.parameters.email" class="absolute fs-12" style=" top: 10px; right: 15px; z-index: 99;"></validation-error-component>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="row m-t-30 align-items-center">
+                            <div class="col-auto animated fadeInLeftBig slow">
+                                <div class="b-t b-b b-r b-primary bg-transparent all-caps text-primary p-t-15 p-b-15 p-l-50 p-r-50 bold font-lato pointer" style="letter-spacing: 8px;" @click="submit(route('api.account.authenticate.email.check'), 'post', section, false, false)">Next <i class="fa fa-chevron-right fs-13"></i></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="row" key="2" v-show="$store.getters.isShowing('loginForm')" >
+                    <div class="col all-caps">
+                        <div class="row  m-l-0">
+                            <div class="col p-l-50">
+                                <h5 class="font-lato light lh-40 animated fadeInLeftBig slow" style="letter-spacing: 5px; ">Welcome Back!</h5>
+                            </div>
+                        </div>
+                        <div class="row  m-l-0 m-b-20  animated fadeInRightBig slow">
+                            <div class="col p-l-50">
+                                <p class="muted font-lato light lh-25" style="letter-spacing: 2px; ">Looks like you already have an account with us.</p>
+                            </div>
+                        </div>
+                        <login-form-component section="loginSection" :email="parameters.email"></login-form-component>
+                    </div>
+                </div>
+                <div class="row" key="3" v-show="$store.getters.isShowing('registrationForm')" >
+                    <div class="col all-caps">
+                        <div class="row  m-l-0">
+                            <div class="col p-l-50">
+                                <h5 class="font-lato light lh-40 animated fadeInLeftBig slow" style="letter-spacing: 5px; ">Create Account</h5>
+                            </div>
+                        </div>
+                        <div class="row  m-l-0 m-b-20  animated fadeInRightBig slow">
+                            <div class="col p-l-50">
+                                <p class="muted font-lato light lh-25" style="letter-spacing: 2px; ">Looks like you are a new user.<br>Let's create a fresh new izyim profile for you.</p>
+                            </div>
+                        </div>
+                        <registration-form-component :email="parameters.email" section="loginSection"></registration-form-component>
+                    </div>
+                </div>
+            </transition-component>
+        </div>
+    </div>
+</template>
+<script>
+    import { required, email } from "vuelidate/lib/validators";
+    import request from '../../../mixins/requestMixin'
+    import RegistrationFormComponent from "../forms/RegistrationFormComponent";
+
+    export default {
+        components: {RegistrationFormComponent},
+        props: {
+            section:{
+                type: String,
+                required: true
+            }
+        },
+        data() {
+            return {
+                error: '',
+                parameters: {
+                    email: 'uldvstar@gmail.com'
+                }
+            };
+        },
+        validations: {
+            parameters: {
+                email: { required, email }
+            }
+        },
+        methods:{
+            successHandler(){
+                this.$store.dispatch('toggleSection', {name: 'loginForm', status: true})
+            },
+            errorHandler(){
+                this.$store.dispatch('toggleSection', {name: 'registrationForm', status: true})
+            }
+        },
+        mixins: [request]
+    }
+
+</script>