Inital release

.babelrc

@@ -0,0 +1,10 @@
+{
+  "plugins": [
+    "transform-class-properties",
+    "transform-object-rest-spread"
+  ],
+  "presets": [
+    ["es2015", { "modules": false }],
+    "stage-0"
+  ]
+}

.editorconfig

@@ -0,0 +1,33 @@
+# -----------------------------
+# General
+# -----------------------------
+
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+# top-most EditorConfig file
+root = true
+
+
+
+# -----------------------------
+# All Files
+# -----------------------------
+
+[*]
+end_of_line = lf
+charset = utf-8
+insert_final_newline = true
+trim_trailing_whitespace = true
+indent_style = space
+indent_size = 2
+
+
+
+# -----------------------------
+# Markdown Files
+# -----------------------------
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc.yml

@@ -0,0 +1,66 @@
+---
+  extends:
+    airbnb-base
+
+  parser:
+    babel-eslint
+
+  settings:
+    ecmascript: 7
+
+  parserOptions:
+    ecmaFeatures:
+      modules: true
+      destructuring: true
+      experimentalObjectRestSpread: true
+      classes: true
+      forOf: true
+      blockBindings: true
+      arrowFunctions: true
+
+  env:
+    browser: true
+
+  rules:
+    # -------------
+    # General Rules
+    # -------------
+
+    arrow-body-style: 0
+    prefer-arrow-callback: 0
+    arrow-parens: 0
+    no-param-reassign: 0
+    no-new: 0
+    consistent-return: 0
+    key-spacing: 0
+    no-multi-spaces: 0
+    no-underscore-dangle: 0
+    one-var: 0
+    global-require: 0
+    class-methods-use-this: 0
+    comma-dangle: ["error", {
+      "arrays": "always-multiline",
+      "objects": "always-multiline",
+      "imports": "always-multiline",
+      "exports": "always-multiline",
+      "functions": "never"
+    }]
+    func-names: 0
+    function-paren-newline: 0
+    indent: 2
+    new-cap: 0
+    no-plusplus: 0
+    no-return-assign: 0
+    quote-props: 0
+    template-curly-spacing: 0
+    no-unused-expressions: 0
+
+
+    # ------------
+    # Import Rules
+    # ------------
+
+    import/extensions: 0
+    import/no-extraneous-dependencies: 0
+    import/no-unresolved: 0
+    import/prefer-default-export: 0

.gitattributes

@@ -0,0 +1,74 @@
+# -----------------------------
+# General
+# -----------------------------
+
+# AUTO-DETECT - Handle line endings automatically for files detected
+# as text and leave all files detected as binary untouched.
+# This will handle all files NOT defined below.
+
+* text=auto
+
+
+
+# -----------------------------
+# Source Code
+# -----------------------------
+
+*.css    text
+*.html   text
+*.js     text
+*.json   text
+*.scss   text
+
+
+
+# -----------------------------
+# Documentation
+# -----------------------------
+
+*.md         text
+CHANGELOG    text
+LICENSE      text
+
+
+
+# -----------------------------
+# Configs
+# -----------------------------
+
+.editorconfig  text
+.gitattributes text
+.gitconfig     text
+.gitignore     text
+.babelrc       text
+.stylelintrc   text
+.eslintrc      text
+.yarnclean     text
+*.yml          text
+browserlist    text
+yarn.lock      text
+
+
+
+# -----------------------------
+# Graphics
+# -----------------------------
+
+*.gif  binary
+*.ico  binary
+*.jpg  binary
+*.jpeg binary
+*.png  binary
+*.svg  text
+
+
+
+# -----------------------------
+# Fonts
+# -----------------------------
+
+*.ttf   binary
+*.eot   binary
+*.otf   binary
+*.woff  binary
+*.woff2 binary

.gitignore

@@ -0,0 +1,31 @@
+# ----------------------------
+# Generated Files & Folders
+# ----------------------------
+
+# [1] : Windows thumbnail cache files.
+# [2] : Folder config file.
+# [3] : Recycle Bin used on file shares.
+
+.idea
+.DS_Store
+.sass-cache
+Thumbs.db     # [1]
+ehthumbs.db   # [1]
+Desktop.ini   # [2]
+$RECYCLE.BIN  # [3]
+
+# ----------------------------
+# Packaging
+# ----------------------------
+
+logs
+*.log
+npm-debug.log*
+node_modules
+yarn.lock
+
+# ----------------------------
+# Project Folders
+# ----------------------------
+
+build/

.stylelintrc.yml

@@ -0,0 +1,7 @@
+---
+  extends: stylelint-config-standard
+  rules:
+    at-rule-no-unknown: null
+    at-rule-empty-line-before: null
+    selector-list-comma-newline-after: null
+    block-opening-brace-space-before: null

CHANGELOG.md

@@ -0,0 +1,5 @@
+### Changelog
+
+#### 1.0.0
+
+- Intial release

README.md

@@ -0,0 +1,145 @@
+# Adminator HTML5 Admin Template
+**Adminator** is a responsive Bootstrap 4 Admin Template. It provides you with a collection of ready to use code snippets and utilities, custom pages, a collection of applications and some useful widgets.
+
+### TOC
+- [Getting Started](#getting-started)
+  - [Prerequisites](#prerequisites)
+  - [Installing & Local Development](#installing-local-development)
+- [Files/Folder Structure](#filesfolder-structure)
+- [Deployment](#deployment)
+- [Built With](#built-with)
+- [Changelog](#changelog)
+- [Authors](#authors)
+- [License](#license)
+
+
+### Getting Started
+In order to run **Adminator** on your local machine all what you need to do is to have the prerequisites stated below installed on your machine and follow the installation steps down below.
+
+#### Prerequisites
+  - Node.js
+  - Yarn or NPM
+  - Git
+
+#### Installing & Local Development
+Start by typing the following commands in your terminal in order to get **Adminator** full package on your machine and starting a local development server with live reload feature.
+
+```
+> git clone [LINK HERE]
+> cd adminator
+> npm install
+> npm run dev
+```
+
+
+### Files/Folders Structure
+Here is a brief explanation of the template folder structure and some of its main files usage:
+
+```
+└── src                         # Contains all template source files.
+│   └── assets                  # Contains JS, CSS, images and icon fonts.
+│   │   └── scripts             # Contains all JavaScript files.
+│   │   │   └── charts          # Chart.js, Sparkline & Pie Chart plugins init.
+│   │   │   └── chat            # All chat app JS code.
+│   │   │   └── constants       # Template constant values like color values.
+│   │   │   └── datatable       # Date table plugin init.
+│   │   │   └── datepicker      # Bootstrap datepicker init.
+│   │   │   └── email           # All email app code.
+│   │   │   └── fullcalendar    # Fullcalendar plugin init.
+│   │   │   └── googleMaps      # Google maps API integration code.
+│   │   │   └── masonry         # Masonry layout code.
+│   │   │   └── popover         # Bootstrap popover plugin init.
+│   │   │   └── scrollbar       # Perfect scrollbar plugin init.
+│   │   │   └── search          # Topbar toggle search init.
+│   │   │   └── sidebar         # Sidebar JS code.
+│   │   │   └── skycons         # Animated icons plugin init.
+│   │   │   └── utils           # Basic utils used for proper rendering.
+│   │   │   └── vectorMaps      # Vector maps plugin init.
+│   │   │   └── index.js        # Indicator file.
+│   │   │
+│   │   └── static              # Contains the non-code files.
+│   │   │   └── fonts           # Contains icon fonts.
+│   │   │   └── images          # Contains all template images/svg.
+│   │   │
+│   │   └── styles              # Contains all SCSS files.
+│   │       └── spec            # Contains custom SCSS files.
+│   │       │   └── components  # Contains all template components.
+│   │       │   └── generic     # Contains basic scaffolding styles.
+│   │       │   └── screens     # Contains views specific styles.
+│   │       │   └── settings    # Contains all template variables.
+│   │       │   └── tools       # Contains all mixins.
+│   │       │   └── utils       # Contains helper classes.
+│   │       │   └── index.scss  # Indicator file.
+│   │       │
+│   │       └── vendor          # Contains all plugin files & custom styles.
+│   │       └── index.scss      # Indicator file.
+│   │
+│   └── *.html                  # All HTML pages files .
+└── webpack                     # Contains Webpack init code.
+│   └── plugins                 # Contains all Webpack plugins config.
+│   └── rules                   # Contains Loaders config code.
+│   └── config.js               # Contains Webpack config object.
+│   └── devServer.js            # Webpack dev server config code.
+│   └── manifest.js             # All build system constants.
+│
+└── .babelrc                    # Babel ES6 Transpiler.
+└── .editorconfig               # Keep same coding styles between code editors.
+└── .eslintrc.yml               # JavaScript Linting.
+└── .gitattributes              # Git Attributes.
+└── .gitignore                  # Ignored files in Git.
+└── .stylelintrc.yml            # SCSS/CSS Linting.
+└── browserslist                # Supported Browsers.
+└── CHANGELOG.md                # Versioning.
+└── package.json                # Package metadata.
+└── README.md                   # Manual file.
+└── webpack.config.js           # Webpack main config file.
+└── yarn.lock                   # Yarn metadata.
+```
+
+### Deployment
+In deployment process, you have two commands:
+
+1. Build command
+Used to generate the final result of compiling src files into build folder. This can e achieved by running the following command:
+```
+> npm run build
+```
+
+2. Preview command
+Used to create a local dev server in order to preview the final output of build process. This can be achieved by running the following command:
+```
+> npm run preview
+```
+
+### Built With
+- [Babel](https://babeljs.io/)
+- [Webpack](https://webpack.js.org/)
+- [Eslint](https://eslint.org/)
+- [Sass](http://sass-lang.com/)
+- [Postcss](http://postcss.org/)
+- [Stylelint](https://stylelint.io/)
+- [Bootstrap](http://getbootstrap.com/)
+- [Chart.js](http://www.chartjs.org/)
+- [Datatables](https://datatables.net/)
+- [Easy Pie Chart](http://rendro.github.io/easy-pie-chart/)
+- [Fullcalendar](https://fullcalendar.io/)
+- [Jquery](https://jquery.com/)
+- [Jquery Sparkline](https://omnipotent.net/jquery.sparkline/)
+- [Jvectormap](http://jvectormap.com/)
+- [Load Google Maps API](https://github.com/yuanqing/load-google-maps-api)
+- [Lodash](https://lodash.com/)
+- [Masonry](https://masonry.desandro.com/)
+- [Moment](https://momentjs.com/)
+- [Perfect Scrollbar](https://github.com/utatti/perfect-scrollbar)
+- [Skycons](https://darkskyapp.github.io/skycons/)
+- [Fontawesome](http://fontawesome.io/)
+- [Themify Icons](https://themify.me/themify-icons)
+- [Roboto Font](https://fonts.google.com/specimen/Roboto)
+- [Bootstrap Datepicker](https://bootstrap-datepicker.readthedocs.io/en/latest/)
+
+### Changelog
+#### V 1.0.0
+Initial Release
+### Authors
+[Colorlib](https://colorlib.com)
+### License

browserslist

@@ -0,0 +1 @@
+Last 3 versions

package.json

@@ -0,0 +1,68 @@
+{
+  "name": "adminator",
+  "version": "1.0.0",
+  "private": true,
+  "description": "HTML Admin Template",
+  "scripts": {
+    "start": "webpack-dev-server",
+    "dev": "webpack-dashboard -t 'Project' -- webpack-dev-server",
+    "clean": "shx rm -rf ./build",
+    "build": "npm run clean && cross-env NODE_ENV=\"production\" webpack",
+    "preview": "cross-env NODE_ENV=\"production\" webpack-dev-server",
+    "lint:js": "eslint ./src ./webpack ./*.js -f table --ext .js --ext .jsx",
+    "lint:scss": "stylelint ./src/**/*.scss --syntax scss",
+    "lint": "npm run lint:js && npm run lint:scss"
+  },
+  "devDependencies": {
+    "babel-core": "^6.26.0",
+    "babel-eslint": "^8.0.1",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-stage-0": "^6.24.1",
+    "babel-runtime": "^6.26.0",
+    "case-sensitive-paths-webpack-plugin": "^2.1.1",
+    "copy-webpack-plugin": "^4.2.0",
+    "cross-env": "^5.1.0",
+    "css-loader": "^0.28.7",
+    "eslint": "^4.9.0",
+    "eslint-config-airbnb-base": "^12.1.0",
+    "eslint-plugin-import": "2.7.0",
+    "extract-text-webpack-plugin": "^3.0.1",
+    "html-webpack-plugin": "^2.30.1",
+    "imagemin-webpack-plugin": "^1.5.2",
+    "node-sass": "^4.5.3",
+    "postcss-cssnext": "^3.0.2",
+    "postcss-loader": "^2.0.8",
+    "sass-loader": "^6.0.6",
+    "shx": "^0.2.2",
+    "style-loader": "^0.19.0",
+    "stylelint": "^8.2.0",
+    "stylelint-config-standard": "^17.0.0",
+    "webpack": "^3.8.1",
+    "webpack-dashboard": "^1.0.0",
+    "webpack-dev-server": "^2.9.3"
+  },
+  "dependencies": {
+    "babel-polyfill": "^6.26.0",
+    "bootstrap": "4.0.0-beta.2",
+    "bootstrap-datepicker": "^1.7.1",
+    "chart.js": "^2.7.1",
+    "datatables": "^1.10.13",
+    "easy-pie-chart": "^2.1.7",
+    "file-loader": "^1.1.5",
+    "fullcalendar": "^3.6.2",
+    "jquery": "^3.2.1",
+    "jquery-sparkline": "^2.4.0",
+    "jvectormap": "^2.0.4",
+    "load-google-maps-api": "^1.0.0",
+    "lodash": "^4.17.4",
+    "masonry-layout": "^4.2.0",
+    "moment": "^2.19.1",
+    "perfect-scrollbar": "^1.1.0",
+    "popper.js": "^1.12.6",
+    "skycons": "^1.0.0"
+  }
+}

src/404.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>404</title>
+  </head>
+  <body class="app">
+    <div class='pos-a t-0 l-0 bgc-white w-100 h-100 d-f fxd-r fxw-w ai-c jc-c pos-r p-30'>
+      <div class='mR-60'>
+        <img alt='#' src='assets/static/images/404.png' />
+      </div>
+
+      <div class='d-f jc-c fxd-c'>
+        <h1 class='mB-30 fw-900 lh-1 c-red-500' style="font-size: 60px;">404</h1>
+        <h3 class='mB-10 fsz-lg c-grey-900 tt-c'>Oops Page Not Found</h3>
+        <p class='mB-30 fsz-def c-grey-700'>The page you are looking for doesnot exist or has been moved.</p>
+        <div>
+          <a href='' type='primary' class='btn btn-primary'>Go to Home</a>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>

src/500.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>500</title>
+  </head>
+  <body class="app">
+    <div class='pos-a t-0 l-0 bgc-white w-100 h-100 d-f fxd-r fxw-w ai-c jc-c pos-r p-30'>
+      <div class='mR-60'>
+        <img alt='#' src='assets/static/images/500.png' />
+      </div>
+
+      <div class='d-f jc-c fxd-c'>
+        <h1 class='mB-30 fw-900 lh-1 c-red-500' style="font-size: 60px;">500</h1>
+        <h3 class='mB-10 fsz-lg c-grey-900 tt-c'>Internal server error</h3>
+        <p class='mB-30 fsz-def c-grey-700'>Something goes wrong with our servers, please try again later.</p>
+        <div>
+          <a href='' type='primary' class='btn btn-primary'>Go to Home</a>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>

src/assets/scripts/charts/chartJS/index.js

@@ -0,0 +1,147 @@
+import Chart from 'chart.js';
+import { COLORS } from '../../constants/colors';
+
+export default (function () {
+  // ------------------------------------------------------
+  // @Line Charts
+  // ------------------------------------------------------
+
+  const lineChartBox = document.getElementById('line-chart');
+
+  if (lineChartBox) {
+    const lineCtx = lineChartBox.getContext('2d');
+    lineChartBox.height = 80;
+
+    new Chart(lineCtx, {
+      type: 'line',
+      data: {
+        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+        datasets: [{
+          label                : 'Series A',
+          backgroundColor      : 'rgba(237, 231, 246, 0.5)',
+          borderColor          : COLORS['deep-purple-500'],
+          pointBackgroundColor : COLORS['deep-purple-700'],
+          borderWidth          : 2,
+          data                 : [60, 50, 70, 60, 50, 70, 60],
+        }, {
+          label                : 'Series B',
+          backgroundColor      : 'rgba(232, 245, 233, 0.5)',
+          borderColor          : COLORS['blue-500'],
+          pointBackgroundColor : COLORS['blue-700'],
+          borderWidth          : 2,
+          data                 : [70, 75, 85, 70, 75, 85, 70],
+        }],
+      },
+
+      options: {
+        legend: {
+          display: false,
+        },
+      },
+
+    });
+  }
+
+  // ------------------------------------------------------
+  // @Bar Charts
+  // ------------------------------------------------------
+
+  const barChartBox = document.getElementById('bar-chart');
+
+  if (barChartBox) {
+    const barCtx = barChartBox.getContext('2d');
+
+    new Chart(barCtx, {
+      type: 'bar',
+      data: {
+        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+        datasets: [{
+          label           : 'Dataset 1',
+          backgroundColor : COLORS['deep-purple-500'],
+          borderColor     : COLORS['deep-purple-800'],
+          borderWidth     : 1,
+          data            : [10, 50, 20, 40, 60, 30, 70],
+        }, {
+          label           : 'Dataset 2',
+          backgroundColor : COLORS['light-blue-500'],
+          borderColor     : COLORS['light-blue-800'],
+          borderWidth     : 1,
+          data            : [10, 50, 20, 40, 60, 30, 70],
+        }],
+      },
+
+      options: {
+        responsive: true,
+        legend: {
+          position: 'bottom',
+        },
+      },
+    });
+  }
+
+  // ------------------------------------------------------
+  // @Area Charts
+  // ------------------------------------------------------
+
+  const areaChartBox = document.getElementById('area-chart');
+
+  if (areaChartBox) {
+    const areaCtx = areaChartBox.getContext('2d');
+
+    new Chart(areaCtx, {
+      type: 'line',
+      data: {
+        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+        datasets: [{
+          backgroundColor : 'rgba(3, 169, 244, 0.5)',
+          borderColor     : COLORS['light-blue-800'],
+          data            : [10, 50, 20, 40, 60, 30, 70],
+          label           : 'Dataset',
+          fill            : 'start',
+        }],
+      },
+    });
+  }
+
+  // ------------------------------------------------------
+  // @Scatter Charts
+  // ------------------------------------------------------
+
+  const scatterChartBox = document.getElementById('scatter-chart');
+
+  if (scatterChartBox) {
+    const scatterCtx = scatterChartBox.getContext('2d');
+
+    Chart.Scatter(scatterCtx, {
+      data: {
+        datasets: [{
+          label           : 'My First dataset',
+          borderColor     : COLORS['red-500'],
+          backgroundColor : COLORS['red-500'],
+          data: [
+            { x: 10, y: 20 },
+            { x: 30, y: 40 },
+            { x: 50, y: 60 },
+            { x: 70, y: 80 },
+            { x: 90, y: 100 },
+            { x: 110, y: 120 },
+            { x: 130, y: 140 },
+          ],
+        }, {
+          label           : 'My Second dataset',
+          borderColor     : COLORS['green-500'],
+          backgroundColor : COLORS['green-500'],
+          data: [
+            { x: 150, y: 160 },
+            { x: 170, y: 180 },
+            { x: 190, y: 200 },
+            { x: 210, y: 220 },
+            { x: 230, y: 240 },
+            { x: 250, y: 260 },
+            { x: 270, y: 280 },
+          ],
+        }],
+      },
+    });
+  }
+}())

src/assets/scripts/charts/easyPieChart/index.js

@@ -0,0 +1,13 @@
+import * as $ from 'jquery';
+import 'easy-pie-chart/dist/jquery.easypiechart.min.js';
+
+export default (function () {
+  if ($('.easy-pie-chart').length > 0) {
+    $('.easy-pie-chart').easyPieChart({
+      onStep(from, to, percent) {
+        this.el.children[0].innerHTML = `${Math.round(percent)} %`;
+      },
+    });
+  }
+}())
+

src/assets/scripts/charts/index.js

@@ -0,0 +1,3 @@
+import './chartJS';
+import './easyPieChart';
+import './sparkline';

src/assets/scripts/charts/sparkline/index.js

@@ -0,0 +1,248 @@
+import * as $ from 'jquery';
+import 'jquery-sparkline';
+import { debounce } from 'lodash';
+import { COLORS } from '../../constants/colors';
+
+export default (function () {
+  // ------------------------------------------------------
+  // @Dashboard Sparklines
+  // ------------------------------------------------------
+
+  const drawSparklines = () => {
+    if ($('#sparklinedash').length > 0) {
+      $('#sparklinedash').sparkline([0, 5, 6, 10, 9, 12, 4, 9], {
+        type: 'bar',
+        height: '20',
+        barWidth: '3',
+        resize: true,
+        barSpacing: '3',
+        barColor: '#4caf50',
+      });
+    }
+
+    if ($('#sparklinedash2').length > 0) {
+      $('#sparklinedash2').sparkline([0, 5, 6, 10, 9, 12, 4, 9], {
+        type: 'bar',
+        height: '20',
+        barWidth: '3',
+        resize: true,
+        barSpacing: '3',
+        barColor: '#9675ce',
+      });
+    }
+
+    if ($('#sparklinedash3').length > 0) {
+      $('#sparklinedash3').sparkline([0, 5, 6, 10, 9, 12, 4, 9], {
+        type: 'bar',
+        height: '20',
+        barWidth: '3',
+        resize: true,
+        barSpacing: '3',
+        barColor: '#03a9f3',
+      });
+    }
+
+    if ($('#sparklinedash4').length > 0) {
+      $('#sparklinedash4').sparkline([0, 5, 6, 10, 9, 12, 4, 9], {
+        type: 'bar',
+        height: '20',
+        barWidth: '3',
+        resize: true,
+        barSpacing: '3',
+        barColor: '#f96262',
+      });
+    }
+  };
+
+  drawSparklines();
+
+  // Redraw sparklines on resize
+  $(window).resize(debounce(drawSparklines, 150));
+
+  // ------------------------------------------------------
+  // @Other Sparklines
+  // ------------------------------------------------------
+
+  $('#sparkline').sparkline(
+    [5, 6, 7, 9, 9, 5, 3, 2, 2, 4, 6, 7],
+    {
+      type: 'line',
+      resize: true,
+      height: '20',
+    }
+  );
+
+  $('#compositebar').sparkline(
+    'html',
+    {
+      type: 'bar',
+      resize: true,
+      barColor: '#aaf',
+      height: '20',
+    }
+  );
+
+  $('#compositebar').sparkline(
+    [4, 1, 5, 7, 9, 9, 8, 7, 6, 6, 4, 7, 8, 4, 3, 2, 2, 5, 6, 7],
+    {
+      composite: true,
+      fillColor: false,
+      lineColor: 'red',
+      resize: true,
+      height: '20',
+    }
+  );
+
+  $('#normalline').sparkline(
+    'html',
+    {
+      fillColor: false,
+      normalRangeMin: -1,
+      resize: true,
+      normalRangeMax: 8,
+      height: '20',
+    }
+  );
+
+  $('.sparktristate').sparkline(
+    'html',
+    {
+      type: 'tristate',
+      resize: true,
+      height: '20',
+    }
+  );
+
+  $('.sparktristatecols').sparkline(
+    'html',
+    {
+      type: 'tristate',
+      colorMap: {
+        '-2': '#fa7',
+        resize: true,
+        '2': '#44f',
+        height: '20',
+      },
+    }
+  );
+
+  const values    = [5, 4, 5, -2, 0, 3, -5, 6, 7, 9, 9, 5, -3, -2, 2, -4];
+  const valuesAlt = [1, 1, 0, 1, -1, -1, 1, -1, 0, 0, 1, 1];
+
+  $('.sparkline').sparkline(values, {
+    type: 'line',
+    barWidth: 4,
+    barSpacing: 5,
+    fillColor: '',
+    lineColor: COLORS['red-500'],
+    lineWidth: 2,
+    spotRadius: 3,
+    spotColor: COLORS['red-500'],
+    maxSpotColor: COLORS['red-500'],
+    minSpotColor: COLORS['red-500'],
+    highlightSpotColor: COLORS['red-500'],
+    highlightLineColor: '',
+    tooltipSuffix: ' Bzzt',
+    tooltipPrefix: 'Hello ',
+    width: 100,
+    height: undefined,
+    barColor: '9f0',
+    negBarColor: 'ff0',
+    stackedBarColor: ['ff0', '9f0', '999', 'f60'],
+    sliceColors: ['ff0', '9f0', '000', 'f60'],
+    offset: '30',
+    borderWidth: 1,
+    borderColor: '000',
+  });
+
+  $('.sparkbar').sparkline(values, {
+    type: 'bar',
+    barWidth: 4,
+    barSpacing: 1,
+    fillColor: '',
+    lineColor: COLORS['deep-purple-500'],
+    tooltipSuffix: 'Celsius',
+    width: 100,
+    barColor: '39f',
+    negBarColor: COLORS['deep-purple-500'],
+    stackedBarColor: ['ff0', '9f0', '999', 'f60'],
+    sliceColors: ['ff0', '9f0', '000', 'f60'],
+    offset: '30',
+    borderWidth: 1,
+    borderColor: '000',
+  });
+
+  $('.sparktri').sparkline(valuesAlt, {
+    type: 'tristate',
+    barWidth: 4,
+    barSpacing: 1,
+    fillColor: '',
+    lineColor: COLORS['light-blue-500'],
+    tooltipSuffix: 'Celsius',
+    width: 100,
+    barColor: COLORS['light-blue-500'],
+    posBarColor: COLORS['light-blue-500'],
+    negBarColor: 'f90',
+    zeroBarColor: '000',
+    stackedBarColor: ['ff0', '9f0', '999', 'f60'],
+    sliceColors: ['ff0', '9f0', '000', 'f60'],
+    offset: '30',
+    borderWidth: 1,
+    borderColor: '000',
+  });
+
+  $('.sparkdisc').sparkline(values, {
+    type: 'discrete',
+    barWidth: 4,
+    barSpacing: 5,
+    fillColor: '',
+    lineColor: '9f0',
+    tooltipSuffix: 'Celsius',
+    width: 100,
+    barColor: '9f0',
+
+    negBarColor: 'f90',
+
+    stackedBarColor: ['ff0', '9f0', '999', 'f60'],
+    sliceColors: ['ff0', '9f0', '000', 'f60'],
+    offset: '30',
+    borderWidth: 1,
+    borderColor: '000',
+  });
+
+  $('.sparkbull').sparkline(values, {
+    type: 'bullet',
+    barWidth: 4,
+    barSpacing: 5,
+    fillColor: '',
+    lineColor: COLORS['amber-500'],
+    tooltipSuffix: 'Celsius',
+    height: 'auto',
+    width: 'auto',
+    targetWidth: 'auto',
+    barColor: COLORS['amber-500'],
+    negBarColor: 'ff0',
+    stackedBarColor: ['ff0', '9f0', '999', 'f60'],
+    sliceColors: ['ff0', '9f0', '000', 'f60'],
+    offset: '30',
+    borderWidth: 1,
+    borderColor: '000',
+  });
+
+  $('.sparkbox').sparkline(values, {
+    type: 'box',
+    barWidth: 4,
+    barSpacing: 5,
+    fillColor: '',
+    lineColor: '9f0',
+    tooltipSuffix: 'Celsius',
+    width: 100,
+    barColor: '9f0',
+    negBarColor: 'ff0',
+    stackedBarColor: ['ff0', '9f0', '999', 'f60'],
+    sliceColors: ['ff0', '9f0', '000', 'f60'],
+    offset: '30',
+    borderWidth: 1,
+    borderColor: '000',
+  });
+}())

src/assets/scripts/chat/index.js

@@ -0,0 +1,8 @@
+import * as $ from 'jquery';
+
+export default (function () {
+  $('#chat-sidebar-toggle').on('click', e => {
+    $('#chat-sidebar').toggleClass('open');
+    e.preventDefault();
+  });
+}())

src/assets/scripts/constants/colors.js

@@ -0,0 +1,274 @@
+const COLORS = {
+  'white'                 : '#ffffff',
+  'red-50'                : '#ffebee',
+  'red-100'               : '#ffcdd2',
+  'red-200'               : '#ef9a9a',
+  'red-300'               : '#e57373',
+  'red-400'               : '#ef5350',
+  'red-500'               : '#f44336',
+  'red-600'               : '#e53935',
+  'red-700'               : '#d32f2f',
+  'red-800'               : '#c62828',
+  'red-900'               : '#b71c1c',
+  'red-a100'              : '#ff8a80',
+  'red-a200'              : '#ff5252',
+  'red-a400'              : '#ff1744',
+  'red-a700'              : '#d50000',
+  'pink-50'               : '#fce4ec',
+  'pink-100'              : '#f8bbd0',
+  'pink-200'              : '#f48fb1',
+  'pink-300'              : '#f06292',
+  'pink-400'              : '#ec407a',
+  'pink-500'              : '#e91e63',
+  'pink-600'              : '#d81b60',
+  'pink-700'              : '#c2185b',
+  'pink-800'              : '#ad1457',
+  'pink-900'              : '#880e4f',
+  'pink-a100'             : '#ff80ab',
+  'pink-a200'             : '#ff4081',
+  'pink-a400'             : '#f50057',
+  'pink-a700'             : '#c51162',
+  'purple-50'             : '#f3e5f5',
+  'purple-100'            : '#e1bee7',
+  'purple-200'            : '#ce93d8',
+  'purple-300'            : '#ba68c8',
+  'purple-400'            : '#ab47bc',
+  'purple-500'            : '#9c27b0',
+  'purple-600'            : '#8e24aa',
+  'purple-700'            : '#7b1fa2',
+  'purple-800'            : '#6a1b9a',
+  'purple-900'            : '#4a148c',
+  'purple-a100'           : '#ea80fc',
+  'purple-a200'           : '#e040fb',
+  'purple-a400'           : '#d500f9',
+  'purple-a700'           : '#aa00ff',
+  'deep-purple-50'        : '#ede7f6',
+  'deep-purple-100'       : '#d1c4e9',
+  'deep-purple-200'       : '#b39ddb',
+  'deep-purple-300'       : '#9575cd',
+  'deep-purple-400'       : '#7e57c2',
+  'deep-purple-500'       : '#673ab7',
+  'deep-purple-600'       : '#5e35b1',
+  'deep-purple-700'       : '#512da8',
+  'deep-purple-800'       : '#4527a0',
+  'deep-purple-900'       : '#311b92',
+  'deep-purple-a100'      : '#b388ff',
+  'deep-purple-a200'      : '#7c4dff',
+  'deep-purple-a400'      : '#651fff',
+  'deep-purple-a700'      : '#6200ea',
+  'indigo-50'             : '#e8eaf6',
+  'indigo-100'            : '#c5cae9',
+  'indigo-200'            : '#9fa8da',
+  'indigo-300'            : '#7986cb',
+  'indigo-400'            : '#5c6bc0',
+  'indigo-500'            : '#3f51b5',
+  'indigo-600'            : '#3949ab',
+  'indigo-700'            : '#303f9f',
+  'indigo-800'            : '#283593',
+  'indigo-900'            : '#1a237e',
+  'indigo-a100'           : '#8c9eff',
+  'indigo-a200'           : '#536dfe',
+  'indigo-a400'           : '#3d5afe',
+  'indigo-a700'           : '#304ffe',
+  'blue-50'               : '#e3f2fd',
+  'blue-100'              : '#bbdefb',
+  'blue-200'              : '#90caf9',
+  'blue-300'              : '#64b5f6',
+  'blue-400'              : '#42a5f5',
+  'blue-500'              : '#2196f3',
+  'blue-600'              : '#1e88e5',
+  'blue-700'              : '#1976d2',
+  'blue-800'              : '#1565c0',
+  'blue-900'              : '#0d47a1',
+  'blue-a100'             : '#82b1ff',
+  'blue-a200'             : '#448aff',
+  'blue-a400'             : '#2979ff',
+  'blue-a700'             : '#2962ff',
+  'light-blue-50'         : '#e1f5fe',
+  'light-blue-100'        : '#b3e5fc',
+  'light-blue-200'        : '#81d4fa',
+  'light-blue-300'        : '#4fc3f7',
+  'light-blue-400'        : '#29b6f6',
+  'light-blue-500'        : '#03a9f4',
+  'light-blue-600'        : '#039be5',
+  'light-blue-700'        : '#0288d1',
+  'light-blue-800'        : '#0277bd',
+  'light-blue-900'        : '#01579b',
+  'light-blue-a100'       : '#80d8ff',
+  'light-blue-a200'       : '#40c4ff',
+  'light-blue-a400'       : '#00b0ff',
+  'light-blue-a700'       : '#0091ea',
+  'cyan-50'               : '#e0f7fa',
+  'cyan-100'              : '#b2ebf2',
+  'cyan-200'              : '#80deea',
+  'cyan-300'              : '#4dd0e1',
+  'cyan-400'              : '#26c6da',
+  'cyan-500'              : '#00bcd4',
+  'cyan-600'              : '#00acc1',
+  'cyan-700'              : '#0097a7',
+  'cyan-800'              : '#00838f',
+  'cyan-900'              : '#006064',
+  'cyan-a100'             : '#84ffff',
+  'cyan-a200'             : '#18ffff',
+  'cyan-a400'             : '#00e5ff',
+  'cyan-a700'             : '#00b8d4',
+  'teal-50'               : '#e0f2f1',
+  'teal-100'              : '#b2dfdb',
+  'teal-200'              : '#80cbc4',
+  'teal-300'              : '#4db6ac',
+  'teal-400'              : '#26a69a',
+  'teal-500'              : '#009688',
+  'teal-600'              : '#00897b',
+  'teal-700'              : '#00796b',
+  'teal-800'              : '#00695c',
+  'teal-900'              : '#004d40',
+  'teal-a100'             : '#a7ffeb',
+  'teal-a200'             : '#64ffda',
+  'teal-a400'             : '#1de9b6',
+  'teal-a700'             : '#00bfa5',
+  'green-50'              : '#e8f5e9',
+  'green-100'             : '#c8e6c9',
+  'green-200'             : '#a5d6a7',
+  'green-300'             : '#81c784',
+  'green-400'             : '#66bb6a',
+  'green-500'             : '#4caf50',
+  'green-600'             : '#43a047',
+  'green-700'             : '#388e3c',
+  'green-800'             : '#2e7d32',
+  'green-900'             : '#1b5e20',
+  'green-a100'            : '#b9f6ca',
+  'green-a200'            : '#69f0ae',
+  'green-a400'            : '#00e676',
+  'green-a700'            : '#00c853',
+  'light-green-50'        : '#f1f8e9',
+  'light-green-100'       : '#dcedc8',
+  'light-green-200'       : '#c5e1a5',
+  'light-green-300'       : '#aed581',
+  'light-green-400'       : '#9ccc65',
+  'light-green-500'       : '#8bc34a',
+  'light-green-600'       : '#7cb342',
+  'light-green-700'       : '#689f38',
+  'light-green-800'       : '#558b2f',
+  'light-green-900'       : '#33691e',
+  'light-green-a100'      : '#ccff90',
+  'light-green-a200'      : '#b2ff59',
+  'light-green-a400'      : '#76ff03',
+  'light-green-a700'      : '#64dd17',
+  'lime-50'               : '#f9fbe7',
+  'lime-100'              : '#f0f4c3',
+  'lime-200'              : '#e6ee9c',
+  'lime-300'              : '#dce775',
+  'lime-400'              : '#d4e157',
+  'lime-500'              : '#cddc39',
+  'lime-600'              : '#c0ca33',
+  'lime-700'              : '#afb42b',
+  'lime-800'              : '#9e9d24',
+  'lime-900'              : '#827717',
+  'lime-a100'             : '#f4ff81',
+  'lime-a200'             : '#eeff41',
+  'lime-a400'             : '#c6ff00',
+  'lime-a700'             : '#aeea00',
+  'yellow-50'             : '#fffde7',
+  'yellow-100'            : '#fff9c4',
+  'yellow-200'            : '#fff59d',
+  'yellow-300'            : '#fff176',
+  'yellow-400'            : '#ffee58',
+  'yellow-500'            : '#ffeb3b',
+  'yellow-600'            : '#fdd835',
+  'yellow-700'            : '#fbc02d',
+  'yellow-800'            : '#f9a825',
+  'yellow-900'            : '#f57f17',
+  'yellow-a100'           : '#ffff8d',
+  'yellow-a200'           : '#ffff00',
+  'yellow-a400'           : '#ffea00',
+  'yellow-a700'           : '#ffd600',
+  'amber-50'              : '#fff8e1',
+  'amber-100'             : '#ffecb3',
+  'amber-200'             : '#ffe082',
+  'amber-300'             : '#ffd54f',
+  'amber-400'             : '#ffca28',
+  'amber-500'             : '#ffc107',
+  'amber-600'             : '#ffb300',
+  'amber-700'             : '#ffa000',
+  'amber-800'             : '#ff8f00',
+  'amber-900'             : '#ff6f00',
+  'amber-a100'            : '#ffe57f',
+  'amber-a200'            : '#ffd740',
+  'amber-a400'            : '#ffc400',
+  'amber-a700'            : '#ffab00',
+  'orange-50'             : '#fff3e0',
+  'orange-100'            : '#ffe0b2',
+  'orange-200'            : '#ffcc80',
+  'orange-300'            : '#ffb74d',
+  'orange-400'            : '#ffa726',
+  'orange-500'            : '#ff9800',
+  'orange-600'            : '#fb8c00',
+  'orange-700'            : '#f57c00',
+  'orange-800'            : '#ef6c00',
+  'orange-900'            : '#e65100',
+  'orange-a100'           : '#ffd180',
+  'orange-a200'           : '#ffab40',
+  'orange-a400'           : '#ff9100',
+  'orange-a700'           : '#ff6d00',
+  'deep-orange-50'        : '#fbe9e7',
+  'deep-orange-100'       : '#ffccbc',
+  'deep-orange-200'       : '#ffab91',
+  'deep-orange-300'       : '#ff8a65',
+  'deep-orange-400'       : '#ff7043',
+  'deep-orange-500'       : '#ff5722',
+  'deep-orange-600'       : '#f4511e',
+  'deep-orange-700'       : '#e64a19',
+  'deep-orange-800'       : '#d84315',
+  'deep-orange-900'       : '#bf360c',
+  'deep-orange-a100'      : '#ff9e80',
+  'deep-orange-a200'      : '#ff6e40',
+  'deep-orange-a400'      : '#ff3d00',
+  'deep-orange-a700'      : '#dd2c00',
+  'brown-50'              : '#efebe9',
+  'brown-100'             : '#d7ccc8',
+  'brown-200'             : '#bcaaa4',
+  'brown-300'             : '#a1887f',
+  'brown-400'             : '#8d6e63',
+  'brown-500'             : '#795548',
+  'brown-600'             : '#6d4c41',
+  'brown-700'             : '#5d4037',
+  'brown-800'             : '#4e342e',
+  'brown-900'             : '#3e2723',
+  'grey-50'               : '#fafafa',
+  'grey-100'              : '#f5f5f5',
+  'grey-200'              : '#eeeeee',
+  'grey-300'              : '#e0e0e0',
+  'grey-400'              : '#bdbdbd',
+  'grey-500'              : '#9e9e9e',
+  'grey-600'              : '#757575',
+  'grey-700'              : '#616161',
+  'grey-800'              : '#424242',
+  'grey-900'              : '#212121',
+  'blue-grey-50'          : '#eceff1',
+  'blue-grey-100'         : '#cfd8dc',
+  'blue-grey-200'         : '#b0bec5',
+  'blue-grey-300'         : '#90a4ae',
+  'blue-grey-400'         : '#78909c',
+  'blue-grey-500'         : '#607d8b',
+  'blue-grey-600'         : '#546e7a',
+  'blue-grey-700'         : '#455a64',
+  'blue-grey-800'         : '#37474f',
+  'blue-grey-900'         : '#263238',
+};
+
+const GREYS = {
+  'grey-100' : '#f9fafb',
+  'grey-200' : '#f2f3f5',
+  'grey-300' : '#e6eaf0',
+  'grey-400' : '#d3d9e3',
+  'grey-500' : '#b9c2d0',
+  'grey-600' : '#7c8695',
+  'grey-700' : '#72777a',
+  'grey-800' : '#565a5c',
+  'grey-900' : '#313435',
+};
+
+export {
+  COLORS,
+  GREYS,
+};

src/assets/scripts/datatable/index.js

@@ -0,0 +1,6 @@
+import * as $ from 'jquery';
+import 'datatables';
+
+export default (function () {
+  $('#dataTable').DataTable();
+}())

src/assets/scripts/datepicker/index.js

@@ -0,0 +1,8 @@
+import * as $ from 'jquery';
+import 'bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js';
+import 'bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css';
+
+export default (function () {
+  $('.start-date').datepicker();
+  $('.end-date').datepicker();
+}())

src/assets/scripts/email/index.js

@@ -0,0 +1,13 @@
+import * as $ from 'jquery';
+
+export default (function () {
+  $('.email-side-toggle').on('click', e => {
+    $('.email-app').toggleClass('side-active');
+    e.preventDefault();
+  });
+
+  $('.email-list-item, .back-to-mailbox').on('click', e => {
+    $('.email-content').toggleClass('open');
+    e.preventDefault();
+  });
+}())

src/assets/scripts/fullcalendar/index.js

@@ -0,0 +1,59 @@
+import * as $ from 'jquery';
+import 'fullcalendar/dist/fullcalendar.min.js';
+import 'fullcalendar/dist/fullcalendar.min.css';
+
+export default (function () {
+  const date = new Date();
+  const d    = date.getDate();
+  const m    = date.getMonth();
+  const y    = date.getFullYear();
+
+  const events = [{
+    title  : 'All Day Event',
+    start  : new Date(y, m, 1),
+    desc   : 'Meetings',
+    bullet : 'success',
+  }, {
+    title  : 'Long Event',
+    start  : new Date(y, m, d - 5),
+    end    : new Date(y, m, d - 2),
+    desc   : 'Hangouts',
+    bullet : 'success',
+  }, {
+    title  : 'Repeating Event',
+    start  : new Date(y, m, d - 3, 16, 0),
+    allDay : false,
+    desc   : 'Product Checkup',
+    bullet : 'warning',
+  }, {
+    title  : 'Repeating Event',
+    start  : new Date(y, m, d + 4, 16, 0),
+    allDay : false,
+    desc   : 'Conference',
+    bullet : 'danger',
+  }, {
+    title  : 'Birthday Party',
+    start  : new Date(y, m, d + 1, 19, 0),
+    end    : new Date(y, m, d + 1, 22, 30),
+    allDay : false,
+    desc   : 'Gathering',
+  }, {
+    title  : 'Click for Google',
+    start  : new Date(y, m, 28),
+    end    : new Date(y, m, 29),
+    url    : 'http ://google.com/',
+    desc   : 'Google',
+    bullet : 'success',
+  }];
+
+  $('#full-calendar').fullCalendar({
+    events,
+    height   : 800,
+    editable : true,
+    header: {
+      left   : 'month,agendaWeek,agendaDay',
+      center : 'title',
+      right  : 'today prev,next',
+    },
+  });
+}())

src/assets/scripts/googleMaps/index.js

@@ -0,0 +1,78 @@
+import * as $ from 'jquery';
+import loadGoogleMapsAPI  from 'load-google-maps-api';
+
+export default (function () {
+  if ($('#google-map').length > 0) {
+    loadGoogleMapsAPI({
+      key: 'AIzaSyDW8td30_gj6sGXjiMU0ALeMu1SDEwUnEA',
+    }).then(() => {
+      const latitude  = 26.8206;
+      const longitude = 30.8025;
+      const mapZoom   = 5;
+      const { google }    = window;
+
+      const mapOptions = {
+        center    : new google.maps.LatLng(latitude, longitude),
+        zoom      : mapZoom,
+        mapTypeId : google.maps.MapTypeId.ROADMAP,
+        styles: [{
+          'featureType': 'landscape',
+          'stylers': [
+            { 'hue'        : '#FFBB00' },
+            { 'saturation' : 43.400000000000006 },
+            { 'lightness'  : 37.599999999999994 },
+            { 'gamma'      : 1 },
+          ],
+        }, {
+          'featureType': 'road.highway',
+          'stylers': [
+            { 'hue'        : '#FFC200' },
+            { 'saturation' : -61.8 },
+            { 'lightness'  : 45.599999999999994 },
+            { 'gamma'      : 1 },
+          ],
+        }, {
+          'featureType': 'road.arterial',
+          'stylers': [
+            { 'hue'        : '#FF0300' },
+            { 'saturation' : -100 },
+            { 'lightness'  : 51.19999999999999 },
+            { 'gamma'      : 1 },
+          ],
+        }, {
+          'featureType': 'road.local',
+          'stylers': [
+            { 'hue'        : '#FF0300' },
+            { 'saturation' : -100 },
+            { 'lightness'  : 52 },
+            { 'gamma'      : 1 },
+          ],
+        }, {
+          'featureType': 'water',
+          'stylers': [
+            { 'hue'        : '#0078FF' },
+            { 'saturation' : -13.200000000000003 },
+            { 'lightness'  : 2.4000000000000057 },
+            { 'gamma'      : 1 },
+          ],
+        }, {
+          'featureType': 'poi',
+          'stylers': [
+            { 'hue'        : '#00FF6A' },
+            { 'saturation' : -1.0989010989011234 },
+            { 'lightness'  : 11.200000000000017 },
+            { 'gamma'      : 1 },
+          ],
+        }],
+      };
+
+      const map = new google.maps.Map(document.getElementById('google-map'), mapOptions);
+
+      new google.maps.Marker({
+        map,
+        position : new google.maps.LatLng(latitude, longitude),
+        visible  : true,
+      });
+    });
+  }
+}())

src/assets/scripts/index.js

@@ -0,0 +1,17 @@
+import 'assets/styles/index.scss';
+
+import './masonry';
+import './charts';
+import './popover';
+import './scrollbar';
+import './search';
+import './sidebar';
+import './skycons';
+import './vectorMaps';
+import './chat';
+import './datatable';
+import './datepicker';
+import './email';
+import './fullcalendar';
+import './googleMaps';
+import './utils';

src/assets/scripts/masonry/index.js

@@ -0,0 +1,14 @@
+import * as $ from 'jquery';
+import Masonry from 'masonry-layout';
+
+export default (function () {
+  window.addEventListener('load', () => {
+    if ($('.masonry').length > 0) {
+      new Masonry('.masonry', {
+        itemSelector: '.masonry-item',
+        columnWidth: '.masonry-sizer',
+        percentPosition: true,
+      });
+    }
+  });
+}());

src/assets/scripts/popover/index.js

@@ -0,0 +1,16 @@
+import * as $ from 'jquery';
+import 'bootstrap';
+
+export default (function () {
+  // ------------------------------------------------------
+  // @Popover
+  // ------------------------------------------------------
+
+  $('[data-toggle="popover"]').popover();
+
+  // ------------------------------------------------------
+  // @Tooltips
+  // ------------------------------------------------------
+
+  $('[data-toggle="tooltip"]').tooltip();
+}());

src/assets/scripts/scrollbar/index.js

@@ -0,0 +1,11 @@
+import * as $ from 'jquery';
+import PerfectScrollbar from 'perfect-scrollbar';
+
+export default (function () {
+  const scrollables = $('.scrollable');
+  if (scrollables.length > 0) {
+    scrollables.each((index, el) => {
+      new PerfectScrollbar(el);
+    });
+  }
+}());

src/assets/scripts/search/index.js

@@ -0,0 +1,9 @@
+import * as $ from 'jquery';
+
+export default (function () {
+  $('.search-toggle').on('click', e => {
+    $('.search-box, .search-input').toggleClass('active');
+    $('.search-input input').focus();
+    e.preventDefault();
+  });
+}());

src/assets/scripts/sidebar/index.js

@@ -0,0 +1,76 @@
+import * as $ from 'jquery';
+
+export default (function () {
+  // Sidebar links
+  $('.sidebar .sidebar-menu li a').on('click', function () {
+    const $this = $(this);
+
+    if ($this.parent().hasClass('open')) {
+      $this
+        .parent()
+        .children('.dropdown-menu')
+        .slideUp(200, () => {
+          $this.parent().removeClass('open');
+        });
+    } else {
+      $this
+        .parent()
+        .parent()
+        .children('li.open')
+        .children('.dropdown-menu')
+        .slideUp(200);
+
+      $this
+        .parent()
+        .parent()
+        .children('li.open')
+        .children('a')
+        .removeClass('open');
+
+      $this
+        .parent()
+        .parent()
+        .children('li.open')
+        .removeClass('open');
+
+      $this
+        .parent()
+        .children('.dropdown-menu')
+        .slideDown(200, () => {
+          $this.parent().addClass('open');
+        });
+    }
+  });
+
+  // Sidebar Activity Class
+  const sidebarLinks = $('.sidebar').find('.sidebar-link');
+
+  sidebarLinks
+    .each((index, el) => {
+      $(el).removeClass('active');
+    })
+    .filter(function () {
+      const href = $(this).attr('href');
+      const pattern = href[0] === '/' ? href.substr(1) : href;
+      return pattern === (window.location.pathname).substr(1);
+    })
+    .addClass('active');
+
+  // ٍSidebar Toggle
+  $('.sidebar-toggle').on('click', e => {
+    $('.app').toggleClass('is-collapsed');
+    e.preventDefault();
+  });
+
+  /**
+   * Wait untill sidebar fully toggled (animated in/out)
+   * then trigger window resize event in order to recalculate
+   * masonry layout widths and gutters.
+   */
+  $('#sidebar-toggle').click(e => {
+    e.preventDefault();
+    setTimeout(() => {
+      window.dispatchEvent(window.EVENT);
+    }, 300);
+  });
+}());

src/assets/scripts/skycons/index.js

@@ -0,0 +1,33 @@
+import SkyconsInit from 'skycons';
+
+const Skycons = SkyconsInit(window);
+
+export default (function () {
+  const icons = new Skycons({ 'color': '#ff6849' });
+  const list  = [
+    'clear-day',
+    'clear-night',
+    'partly-cloudy-day',
+    'partly-cloudy-night',
+    'cloudy',
+    'rain',
+    'sleet',
+    'snow',
+    'wind',
+    'fog',
+  ];
+  let i = list.length;
+
+  while (i--) {
+    const
+      weatherType = list[i],
+      elements    = document.getElementsByClassName(weatherType);
+    let j = elements.length;
+
+    while (j--) {
+      icons.set(elements[j], weatherType);
+    }
+  }
+
+  icons.play();
+}());

src/assets/scripts/utils/index.js

@@ -0,0 +1,43 @@
+import * as $ from 'jquery';
+
+export default (function () {
+  // ------------------------------------------------------
+  // @Window Resize
+  // ------------------------------------------------------
+
+  /**
+   * NOTE: Register resize event for Masonry layout
+   */
+  const EVENT = document.createEvent('UIEvents');
+  window.EVENT = EVENT;
+  EVENT.initUIEvent('resize', true, false, window, 0);
+
+
+  window.addEventListener('load', () => {
+    /**
+     * Trigger window resize event after page load
+     * for recalculation of masonry layout.
+     */
+    window.dispatchEvent(EVENT);
+  });
+
+  // ------------------------------------------------------
+  // @External Links
+  // ------------------------------------------------------
+
+  // Open external links in new window
+  $('a')
+    .filter('[href^="http"], [href^="//"]')
+    .not(`[href*="${window.location.host}"`)
+    .attr('rel', 'noopener noreferrer')
+    .attr('target', '_blank');
+
+  // ------------------------------------------------------
+  // @Resize Trigger
+  // ------------------------------------------------------
+
+  // Trigger resize on any element click
+  document.addEventListener('click', () => {
+    window.dispatchEvent(window.EVENT);
+  });
+}());

src/assets/scripts/vectorMaps/index.js

@@ -0,0 +1,94 @@
+import * as $ from 'jquery';
+import 'jvectormap';
+import 'jvectormap/jquery-jvectormap.css';
+import './jquery-jvectormap-world-mill.js';
+import { debounce } from 'lodash';
+
+export default (function () {
+  const vectorMapInit = () => {
+    if ($('#world-map-marker').length > 0) {
+      // This is a hack, as the .empty() did not do the work
+      $('#vmap').remove();
+
+      // we recreate (after removing it) the container div, to reset all the data of the map
+      $('#world-map-marker').append(`
+        <div
+          id="vmap"
+          style="
+            height: 490px;
+            position: relative;
+            overflow: hidden;
+            background-color: transparent;
+          "
+        >
+        </div>
+      `);
+
+      $('#vmap').vectorMap({
+        map: 'world_mill',
+        backgroundColor: '#fff',
+        borderColor: '#fff',
+        borderOpacity: 0.25,
+        borderWidth: 0,
+        color: '#e6e6e6',
+        regionStyle : {
+          initial : {
+            fill : '#e4ecef',
+          },
+        },
+
+        markerStyle: {
+          initial: {
+            r: 7,
+            'fill': '#fff',
+            'fill-opacity':1,
+            'stroke': '#000',
+            'stroke-width' : 2,
+            'stroke-opacity': 0.4,
+          },
+        },
+
+        markers : [{
+          latLng : [21.00, 78.00],
+          name : 'INDIA : 350',
+        }, {
+          latLng : [-33.00, 151.00],
+          name : 'Australia : 250',
+        }, {
+          latLng : [36.77, -119.41],
+          name : 'USA : 250',
+        }, {
+          latLng : [55.37, -3.41],
+          name : 'UK   : 250',
+        }, {
+          latLng : [25.20, 55.27],
+          name : 'UAE : 250',
+        }],
+        series: {
+          regions: [{
+            values: {
+              'US': 298,
+              'SA': 200,
+              'AU': 760,
+              'IN': 200,
+              'GB': 120,
+            },
+            scale: ['#03a9f3', '#02a7f1'],
+            normalizeFunction: 'polynomial',
+          }],
+        },
+        hoverOpacity: null,
+        normalizeFunction: 'linear',
+        zoomOnScroll: false,
+        scaleColors: ['#b6d6ff', '#005ace'],
+        selectedColor: '#c9dfaf',
+        selectedRegions: [],
+        enableZoom: false,
+        hoverColor: '#fff',
+      });
+    }
+  };
+
+  vectorMapInit();
+  $(window).resize(debounce(vectorMapInit, 150));
+})();

src/assets/static/images/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3388.25 3014.2"><title>react-1</title><circle cx="1694.17" cy="1504.25" r="302.6" fill="#fff"/><path d="M1806.5,1191.9c406.2,0,783.6,58.3,1068.1,156.2,342.8,118,553.6,296.9,553.6,458.9,0,168.8-223.4,358.9-591.5,480.8-278.3,92.2-644.6,140.4-1030.2,140.4-395.4,0-769.7-45.2-1051.2-141.4C399.2,2165.1,184.7,1972.6,184.7,1807c0-160.7,201.3-338.2,539.3-456,285.6-99.5,672.3-159.1,1082.5-159.1Z" transform="translate(-112.33 -302.85)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="144.75"/><path d="M1271,1501.3c202.9-351.9,442-649.7,669-847.2,273.5-238,533.8-331.2,674.1-250.3,146.2,84.3,199.3,372.8,121,752.7-59.2,287.2-200.4,628.5-393.1,962.6-197.5,342.5-423.7,644.2-647.6,840-283.3,247.7-557.3,337.3-700.7,254.6-139.2-80.3-192.4-343.3-125.7-695,56.4-297.4,198-662.1,403-1017.4Z" transform="translate(-112.33 -302.85)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="144.75"/><path d="M1271.5,2119.8C1068,1768.2,929.4,1412.4,871.6,1117.1c-69.6-355.8-20.4-627.9,119.8-709,146.1-84.6,422.5,13.5,712.5,271,219.3,194.7,444.4,487.5,637.6,821.3,198.1,342.2,346.6,688.8,404.3,980.5,73.1,369.2,13.9,651.3-129.4,734.2-139.1,80.5-393.5-4.7-664.9-238.2-229.2-197.3-474.5-502.1-680-857.1Z" transform="translate(-112.33 -302.85)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="144.75"/></svg>

src/assets/styles/index.scss

@@ -0,0 +1,6 @@
+@import 'spec/settings/index';
+@import 'spec/tools/index';
+@import "~bootstrap/scss/bootstrap";
+@import 'spec/index';
+@import 'vendor/index';
+

src/assets/styles/spec/components/easyPieChart.scss

@@ -0,0 +1,11 @@
+.easy-pie-chart {
+  position: relative;
+
+  span {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    line-height: 0;
+  }
+}

src/assets/styles/spec/components/footer.scss

@@ -0,0 +1,4 @@
+footer {
+  z-index: 1;
+  position: relative;
+}

src/assets/styles/spec/components/forms.scss

@@ -0,0 +1,257 @@
+.checkbox label {
+  display: inline-block;
+  vertical-align: middle;
+  position: relative;
+  padding-left: 17px;
+  margin-bottom: 0;
+}
+
+.checkbox label::before {
+  content: "";
+  display: inline-block;
+  position: absolute;
+  width: 17px;
+  height: 17px;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: -12px;
+  border: 1px solid $grey-300;
+  border-radius: 3px;
+  background-color: $md-white;
+  -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
+  -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
+  transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
+}
+
+.checkbox label::after {
+  display: inline-block;
+  position: absolute;
+  width: 17px;
+  height: 17px;
+  text-align: center;
+  font-size: 10px !important;
+  line-height: 17px;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: -12px;
+  color: $grey-500;
+}
+
+.checkbox input[type="checkbox"] {
+  opacity: 0;
+  z-index: 1;
+}
+
+.checkbox input[type="checkbox"]:focus + label::before {
+  outline: thin dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+
+.checkbox input[type="checkbox"]:checked + label::after {
+  font-family: 'FontAwesome';
+  content: "\f00c";
+  font-size: 13px;
+}
+
+.checkbox input[type="checkbox"]:disabled + label {
+  opacity: 0.65;
+}
+
+.checkbox input[type="checkbox"]:disabled + label::before {
+  background-color: $grey-400;
+  cursor: not-allowed;
+}
+
+.checkbox.checkbox-circle label::before {
+  border-radius: 50%;
+}
+
+.checkbox.checkbox-inline {
+  margin-top: 0;
+}
+
+.checkbox-primary input[type="checkbox"]:checked + label::before {
+  background-color: $default-primary;
+  border-color: $default-primary;
+}
+
+.checkbox-primary input[type="checkbox"]:checked + label::after {
+  color: #fff;
+}
+
+.checkbox-danger input[type="checkbox"]:checked + label::before {
+  background-color: $default-danger;
+  border-color: $default-danger;
+}
+
+.checkbox-danger input[type="checkbox"]:checked + label::after {
+  color: $md-white;
+}
+
+.checkbox-info input[type="checkbox"]:checked + label::before {
+  background-color: $default-info;
+  border-color: $default-info;
+}
+
+.checkbox-info input[type="checkbox"]:checked + label::after {
+  color: $md-white;
+}
+
+.checkbox-warning input[type="checkbox"]:checked + label::before {
+  background-color: $default-warning;
+  border-color: $default-warning;
+}
+
+.checkbox-warning input[type="checkbox"]:checked + label::after {
+  color: $md-white;
+}
+
+.checkbox-success input[type="checkbox"]:checked + label::before {
+  background-color: $default-success;
+  border-color: $default-success;
+}
+
+.checkbox-success input[type="checkbox"]:checked + label::after {
+  color: $md-white;
+}
+
+.radio {
+  padding-left: 20px;
+}
+
+.radio label {
+  display: inline-block;
+  vertical-align: middle;
+  position: relative;
+  padding-left: 5px;
+}
+
+.radio label::before {
+  content: "";
+  display: inline-block;
+  position: absolute;
+  width: 17px;
+  height: 17px;
+  left: 0;
+  margin-left: -20px;
+  border: 1px solid #cccccc;
+  border-radius: 50%;
+  background-color: #fff;
+  -webkit-transition: border 0.15s ease-in-out;
+  -o-transition: border 0.15s ease-in-out;
+  transition: border 0.15s ease-in-out;
+}
+
+.radio label::after {
+  display: inline-block;
+  position: absolute;
+  content: " ";
+  width: 11px;
+  height: 11px;
+  left: 3px;
+  top: 3px;
+  margin-left: -20px;
+  border-radius: 50%;
+  background-color: #555555;
+  -webkit-transform: scale(0, 0);
+  -ms-transform: scale(0, 0);
+  -o-transform: scale(0, 0);
+  transform: scale(0, 0);
+  -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
+  -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
+  -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
+  transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
+}
+
+.radio input[type="radio"] {
+  opacity: 0;
+  z-index: 1;
+}
+
+.radio input[type="radio"]:focus + label::before {
+  outline: thin dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+
+.radio input[type="radio"]:checked + label::after {
+  -webkit-transform: scale(1, 1);
+  -ms-transform: scale(1, 1);
+  -o-transform: scale(1, 1);
+  transform: scale(1, 1);
+}
+
+.radio input[type="radio"]:disabled + label {
+  opacity: 0.65;
+}
+
+.radio input[type="radio"]:disabled + label::before {
+  cursor: not-allowed;
+}
+
+.radio.radio-inline {
+  margin-top: 0;
+}
+
+.radio-primary input[type="radio"] + label::after {
+  background-color: #428bca;
+}
+
+.radio-primary input[type="radio"]:checked + label::before {
+  border-color: #428bca;
+}
+
+.radio-primary input[type="radio"]:checked + label::after {
+  background-color: #428bca;
+}
+
+.radio-danger input[type="radio"] + label::after {
+  background-color: #d9534f;
+}
+
+.radio-danger input[type="radio"]:checked + label::before {
+  border-color: #d9534f;
+}
+
+.radio-danger input[type="radio"]:checked + label::after {
+  background-color: #d9534f;
+}
+
+.radio-info input[type="radio"] + label::after {
+  background-color: #5bc0de;
+}
+
+.radio-info input[type="radio"]:checked + label::before {
+  border-color: #5bc0de;
+}
+
+.radio-info input[type="radio"]:checked + label::after {
+  background-color: #5bc0de;
+}
+
+.radio-warning input[type="radio"] + label::after {
+  background-color: #f0ad4e;
+}
+
+.radio-warning input[type="radio"]:checked + label::before {
+  border-color: #f0ad4e;
+}
+
+.radio-warning input[type="radio"]:checked + label::after {
+  background-color: #f0ad4e;
+}
+
+.radio-success input[type="radio"] + label::after {
+  background-color: #5cb85c;
+}
+
+.radio-success input[type="radio"]:checked + label::before {
+  border-color: #5cb85c;
+}
+
+.radio-success input[type="radio"]:checked + label::after {
+  background-color: #5cb85c;
+}

src/assets/styles/spec/components/index.scss

@@ -0,0 +1,9 @@
+@import 'sidebar';
+@import 'topbar';
+@import 'pageContainer';
+@import 'progressBar';
+@import 'easyPieChart';
+@import 'forms';
+@import 'masonry';
+@import 'loader';
+@import 'footer';

src/assets/styles/spec/components/loader.scss

@@ -0,0 +1,43 @@
+#loader {
+  transition: all 0.3s ease-in-out;
+  opacity: 1;
+  visibility: visible;
+}
+
+#loader.fadeOut {
+  opacity: 0;
+  visibility: hidden;
+}
+
+
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  position: absolute;
+  top: calc(50% - 20px);
+  left: calc(50% - 20px);
+  background-color: #333;
+  border-radius: 100%;
+  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
+  animation: sk-scaleout 1.0s infinite ease-in-out;
+}
+
+@-webkit-keyframes sk-scaleout {
+  0% { -webkit-transform: scale(0) }
+  100% {
+    -webkit-transform: scale(1.0);
+    opacity: 0;
+  }
+}
+
+@keyframes sk-scaleout {
+  0% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  } 100% {
+    -webkit-transform: scale(1.0);
+    transform: scale(1.0);
+    opacity: 0;
+  }
+}

src/assets/styles/spec/components/masonry.scss

@@ -0,0 +1 @@
+

src/assets/styles/spec/components/pageContainer.scss

@@ -0,0 +1,96 @@
+// ---------------------------------------------------------
+// @TOC
+// ---------------------------------------------------------
+
+// + @Page Container
+// + @Main Content
+// + @Full Container
+// + @Collapsed State
+
+// ---------------------------------------------------------
+// @Page Container
+// ---------------------------------------------------------
+
+.page-container {
+  min-height: 100vh;
+  padding-left: $offscreen-size;
+  transition: all 0.2s ease;
+
+  @include between($breakpoint-md, $breakpoint-xl) {
+    padding-left: $collapsed-size;
+  }
+
+  @include to($breakpoint-md) {
+    padding-left: 0;
+  }
+}
+
+// ---------------------------------------------------------
+// @Main Content
+// ---------------------------------------------------------
+
+.main-content {
+  padding: 85px 20px 20px;
+  min-height: calc(100vh - 61px);
+
+  @include to($breakpoint-md) {
+    padding: 85px 5px 5px;
+  }
+}
+
+.remain-height {
+  height: calc(100vh - 126px);
+}
+
+// ---------------------------------------------------------
+// @Full Container
+// ---------------------------------------------------------
+
+.full-container {
+  left: $offscreen-size;
+  min-height: calc(100vh - #{$header-height});
+  position: absolute;
+  right: 0;
+  top: $header-height;
+  transition: all 0.2s ease;
+
+  @include between($breakpoint-md, $breakpoint-xl) {
+    left: 0;
+    padding-left: $collapsed-size;
+  }
+
+  @include to($breakpoint-md) {
+    left: 0;
+  }
+}
+
+// ---------------------------------------------------------
+// @Collapsed State
+// ---------------------------------------------------------
+
+.is-collapsed {
+  .page-container {
+    padding-left: $collapsed-size;
+
+    @include to($breakpoint-md) {
+      padding-left: 0;
+    }
+
+    @include between($breakpoint-md, $breakpoint-xl) {
+      padding-left: $offscreen-size;
+    }
+  }
+
+  .full-container {
+    left: $collapsed-size;
+
+    @include to($breakpoint-md) {
+      left: 0;
+    }
+
+    @include between($breakpoint-md, $breakpoint-xl) {
+      left: $offscreen-size;
+      padding-left: 0;
+    }
+  }
+}

src/assets/styles/spec/components/progressBar.scss

@@ -0,0 +1,6 @@
+.progress {
+  height: 4px;
+  background-color: #eaeef3;
+  border-radius: 4px;
+  margin-bottom: 10px;
+}

src/assets/styles/spec/components/sidebar.scss

@@ -0,0 +1,448 @@
+// ---------------------------------------------------------
+// @TOC
+// ---------------------------------------------------------
+
+// + @Sidebar
+// + @Sidebar Inner
+// + @Sidebar Header
+// + @Sidebar Menu
+// + @Sidebar Collapsed
+
+// ---------------------------------------------------------
+// @Sidebar
+// ---------------------------------------------------------
+
+.sidebar {
+  background-color: $default-white;
+  bottom: 0;
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  transition: all 0.2s ease;
+  width: $offscreen-size;
+  z-index: 1000;
+
+  ul {
+    list-style-type: none;
+  }
+
+  @include between($breakpoint-md, $breakpoint-xl) {
+    width: $collapsed-size;
+
+    .sidebar-inner {
+      .sidebar-logo {
+        border-bottom: 1px solid transparent;
+        padding: 0;
+
+        a {
+          .logo {
+            background-position: center center;
+            width: $collapsed-size;
+          }
+        }
+      }
+
+      .sidebar-menu {
+        overflow-x: hidden;
+
+        > li {
+          > a {
+            .title {
+              display: none;
+            }
+          }
+        }
+
+        li {
+          &.dropdown {
+            .arrow {
+              opacity: 0;
+            }
+
+            &.open {
+              ul.dropdown-menu {
+                display: none !important;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    &:hover {
+      width: $offscreen-size;
+
+      .sidebar-inner {
+        .sidebar-logo {
+          border-bottom: 1px solid $border-color;
+          padding: 0 20px;
+        }
+
+        .sidebar-menu {
+          > li {
+            > a {
+              .title {
+                display: inline-block;
+              }
+            }
+          }
+
+          li {
+            &.dropdown {
+              .arrow {
+                opacity: 1;
+              }
+            }
+
+            &.open {
+              > ul.dropdown-menu {
+                display: block !important;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  @include to($breakpoint-md) {
+    left: -$offscreen-size;
+    width: calc(#{$offscreen-size} - 30px);
+  }
+}
+
+// ---------------------------------------------------------
+// @Sidebar Inner
+// ---------------------------------------------------------
+
+.sidebar-inner {
+  position: relative;
+  height: 100%;
+}
+
+// ---------------------------------------------------------
+// @Sidebar Header
+// ---------------------------------------------------------
+
+.sidebar-logo {
+  border-bottom: 1px solid $border-color;
+  border-right: 1px solid $border-color;
+  line-height: 0;
+  padding: 0 20px;
+  transition: all 0.2s ease;
+
+  a {
+    display: inline-block;
+    width: 100%;
+
+    .logo {
+      background-position: center left;
+      background-repeat: no-repeat;
+      display: inline-block;
+      min-height: calc(#{$header-height} - 1px);
+      width: 100%;
+      width: 70px;
+    }
+
+    .logo-text {
+      color: $grey-900;
+    }
+  }
+
+  .mobile-toggle {
+    display: none;
+    float: right;
+    font-size: 18px;
+    line-height: calc(#{$header-height} - 1px);
+
+    a {
+      color: $default-text-color;
+    }
+
+    @include to($breakpoint-md) {
+      display: inline-block;
+    }
+
+    @include between($breakpoint-md, $breakpoint-xl) {
+      display: none;
+    }
+  }
+}
+
+// ---------------------------------------------------------
+// @Sidebar Menu
+// ---------------------------------------------------------
+
+.sidebar-menu {
+  @include clearfix;
+  border-right: 1px solid $border-color;
+  height: calc(100vh - #{$header-height});
+  list-style: none;
+  margin: 0;
+  overflow: auto;
+  padding: 0;
+  position: relative;
+
+  .dropdown-toggle::after {
+    display: none;
+  }
+
+  .sidebar-link {
+    &.active::before {
+      background: $md-blue-500;
+      border-radius: 50%;
+      content: '';
+      display: block;
+      height: 8px;
+      left: -4px;
+      position: absolute;
+      top: calc(50% - 4px);
+      width: 8px;
+    }
+  }
+
+  li {
+    position: relative;
+
+    &.dropdown {
+      .arrow {
+        font-size: 10px;
+        line-height: 40px;
+        position: absolute;
+        right: 30px;
+        transition: all 0.05s ease-in;
+
+        @include to($breakpoint-md) {
+          right: 25px;
+        }
+      }
+
+      &.open {
+        > a {
+          color: $default-dark;
+
+          .icon-holder {
+            color: $default-info;
+          }
+
+          > .arrow {
+            transform: rotate(90deg);
+          }
+        }
+
+        > .dropdown-menu {
+          display: block;
+
+          .dropdown-menu {
+            padding-left: 20px;
+          }
+
+          .arrow {
+            line-height: 25px;
+          }
+        }
+      }
+    }
+
+    a {
+      color: $default-text-color;
+      transition: all 0.3s ease;
+
+      &:hover,
+      &:focus {
+        color: $default-dark;
+        text-decoration: none;
+
+        .icon-holder {
+          color: $default-info;
+        }
+      }
+    }
+  }
+
+  > li {
+    &.dropdown {
+      ul {
+        &.dropdown-menu {
+          background-color: transparent;
+          border-radius: 0;
+          border: 0;
+          box-shadow: none;
+          float: none;
+          padding-left: 50px;
+          padding-top: 0;
+          position: relative;
+          width: 100%;
+
+          > li {
+            > a {
+              display: block;
+              padding: 10px 15px;
+
+              &:hover,
+              &:focus {
+                background-color: transparent;
+                color: $default-dark;
+              }
+            }
+
+            &.active {
+              a {
+                color: $default-dark;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    > a {
+      display: block;
+      font-size: 15px;
+      font-weight: 500;
+      padding: 5px 15px;
+      position: relative;
+      white-space: nowrap;
+
+      .icon-holder {
+        border-radius: 6px;
+        display: inline-block;
+        font-size: 17px;
+        height: 35px;
+        left: 0;
+        line-height: 35px;
+        margin-right: 14px;
+        position: relative;
+        text-align: center;
+        transition: all 0.3s ease;
+        width: 35px;
+      }
+    }
+  }
+}
+
+// ---------------------------------------------------------
+// @Sidebar Collapsed
+// ---------------------------------------------------------
+
+.is-collapsed {
+  .sidebar {
+    @include from($breakpoint-xl) {
+      width: $collapsed-size;
+
+      .sidebar-inner {
+        .sidebar-logo {
+          border-bottom: 1px solid transparent;
+          padding: 0;
+        }
+
+        .sidebar-menu {
+          overflow-x: hidden;
+
+          > li {
+            > a {
+              .title {
+                display: none;
+              }
+            }
+          }
+
+          li {
+            &.dropdown {
+              .arrow {
+                opacity: 0;
+              }
+
+              &.open {
+                ul.dropdown-menu {
+                  display: none !important;
+                }
+              }
+            }
+          }
+        }
+      }
+
+      &:hover {
+        width: $offscreen-size;
+
+        .sidebar-inner {
+          .sidebar-logo {
+            border-bottom: 1px solid $border-color;
+            padding: 0 20px;
+          }
+
+          .sidebar-menu {
+            > li {
+              > a {
+                .title {
+                  display: inline-block;
+                }
+              }
+            }
+
+            li {
+              &.dropdown {
+                .arrow {
+                  opacity: 1;
+                }
+              }
+
+              &.open {
+                > ul.dropdown-menu {
+                  display: block !important;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    @include between($breakpoint-md, $breakpoint-xl) {
+      width: $offscreen-size;
+
+      .sidebar-inner {
+        .sidebar-logo {
+          border-bottom: 1px solid $border-color;
+          padding: 0 20px;
+
+          > a {
+            .logo {
+              background-position: center left;
+              width: 150px;
+            }
+          }
+        }
+
+        .sidebar-menu {
+          > li {
+            > a {
+              .title {
+                display: inline-block;
+              }
+            }
+          }
+
+          li {
+            &.dropdown {
+              .arrow {
+                opacity: 1;
+              }
+            }
+
+            &.open {
+              > ul.dropdown-menu {
+                display: block !important;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    @include to($breakpoint-md) {
+      left: 0;
+    }
+  }
+}

src/assets/styles/spec/components/topbar.scss

@@ -0,0 +1,206 @@
+// ---------------------------------------------------------
+// @TOC
+
+// + @Topbar
+// + @Collapsed State
+
+// ---------------------------------------------------------
+// @Topbar
+// ---------------------------------------------------------
+
+.header {
+  background-color: $default-white;
+  border-bottom: 1px solid $border-color;
+  display: block;
+  height: $header-height;
+  margin-bottom: 0;
+  padding: 0;
+  position: fixed;
+  transition: all 0.2s ease;
+  width: calc(100% - #{$offscreen-size});
+  z-index: 800;
+
+  @include to($breakpoint-md) {
+    width: 100%;
+  }
+
+  @include between($breakpoint-md, $breakpoint-xl) {
+    width: calc(100% - #{$collapsed-size});
+  }
+
+  .header-container {
+    @include clearfix;
+
+    .nav-left,
+    .nav-right {
+      list-style: none;
+      margin-bottom: 0;
+      padding-left: 0;
+      position: relative;
+
+      > li {
+        float: left;
+
+        > a {
+          color: $default-text-color;
+          display: block;
+          line-height: $header-height;
+          min-height: $header-height;
+          padding: 0 15px;
+          transition: all 0.2s ease-in-out;
+
+          i {
+            font-size: 17px;
+          }
+
+          &:hover,
+          &:focus {
+            color: $default-dark;
+            text-decoration: none;
+          }
+
+          @include to($breakpoint-md) {
+            padding: 0 15px;
+          }
+        }
+      }
+
+      .notifications {
+        position: relative;
+
+        .counter {
+          background-color: $default-danger;
+          border-radius: 50px;
+          color: $default-white;
+          font-size: 10px;
+          line-height: 1;
+          padding: 3px 5.5px;
+          position: absolute;
+          right: 6px;
+          top: 12px;
+        }
+
+        .dropdown-menu {
+          min-width: 350px;
+          padding: 0;
+
+          @include to($breakpoint-sm) {
+            max-width: 300px;
+          }
+        }
+      }
+    }
+
+    .dropdown-menu {
+      display: block;
+      margin: 0;
+      transform-origin: top right;
+      transform: scale(0, 0);
+      transition: transform 0.15s ease-out;
+
+      .divider {
+        border-bottom: 1px solid $border-color;
+        height: 1px;
+        overflow: hidden;
+      }
+
+      > li {
+        > a {
+          transition: all 0.2s ease-out;
+        }
+      }
+    }
+
+    .show {
+      .dropdown-menu {
+        transform: scale(1, 1);
+      }
+    }
+
+    .nav-left {
+      float: left;
+      margin-left: 15px;
+    }
+
+    .nav-right {
+      float: right;
+
+      .dropdown-menu {
+        left: auto;
+        right: 0;
+
+        > li {
+          width: 100%;
+
+          > a {
+            line-height: 1.5;
+            min-height: auto;
+            padding: 10px 15px;
+          }
+        }
+      }
+    }
+  }
+
+  .search-box {
+    .search-icon-close {
+      display: none;
+    }
+
+    &.active {
+      .search-icon {
+        display: none;
+      }
+
+      .search-icon-close {
+        display: inline-block;
+      }
+    }
+  }
+
+  .search-input {
+    display: none;
+
+    &.active {
+      display: inline-block;
+    }
+
+    input {
+      background-color: transparent;
+      border: 0;
+      box-shadow: none;
+      font-size: 18px;
+      height: 40px;
+      margin-top: 12px;
+      outline: none;
+      padding: 5px;
+
+      @include to($breakpoint-sm) {
+        width: 85px;
+      }
+
+      @include placeholder {
+        color: lighten($default-text-color, 20%);
+        font-style: italic;
+      }
+    }
+  }
+}
+
+// ---------------------------------------------------------
+// @Collapsed State
+// ---------------------------------------------------------
+
+.is-collapsed {
+  .header {
+    width: calc(100% - #{$collapsed-size});
+
+    @include to($breakpoint-md) {
+      width: 100%;
+    }
+
+    @include between($breakpoint-md, $breakpoint-xl) {
+      width: calc(100% - #{$offscreen-size});
+    }
+  }
+}

src/assets/styles/spec/generic/base.scss

@@ -0,0 +1,79 @@
+html, html a, body {
+  -webkit-font-smoothing: antialiased;
+}
+
+a {
+  transition: all 0.3s ease-in-out;
+}
+
+body {
+  font-family: $font-primary;
+  font-size: 14px;
+  color: $default-text-color;
+  line-height: 1.5;
+  letter-spacing: 0.2px;
+  overflow-x: hidden;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: $font-secondary;
+  letter-spacing: 0.5px;
+  line-height: 1.5;
+
+  a {
+    font-family: $font-secondary;
+  }
+
+  small {
+    font-weight: 300;
+    color: lighten($default-dark, 5%);
+  }
+}
+
+p {
+  font-family: $font-primary;
+  line-height: 1.9;
+}
+
+.lead {
+  font-size: 18px;
+}
+
+ul {
+  margin-bottom: 0;
+}
+
+a {
+  color: $default-info;
+
+  &:hover,
+  &:focus {
+    text-decoration: none;
+    color: darken($default-info, 10%);
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &.text-gray {
+    &:hover,
+    &:focus,
+    &.active {
+      color: $default-dark !important;
+    }
+  }
+}
+
+:focus {
+  outline: none;
+}
+
+hr {
+  border-top: 1px solid $border-color;
+}

src/assets/styles/spec/generic/index.scss

@@ -0,0 +1 @@
+@import 'base';

src/assets/styles/spec/index.scss

@@ -0,0 +1,4 @@
+@import 'generic/index';
+@import 'components/index';
+@import 'screens/index';
+@import 'utils/index';

src/assets/styles/spec/screens/chat.scss

@@ -0,0 +1,19 @@
+#chat-sidebar {
+  width: 250px;
+  height: calc(100vh - #{$header-height} - 60px);
+  overflow: auto;
+
+  @include to($breakpoint-md) {
+    transition: all 0.3s ease-in-out;
+    margin-left: -250px;
+
+    &.open {
+      margin-left: 0;
+    }
+  }
+}
+
+#chat-box {
+  height: calc(100vh - #{$header-height} - 60px);
+  overflow: auto;
+}

src/assets/styles/spec/screens/email.scss

@@ -0,0 +1,104 @@
+.email-app {
+  .email-side-nav {
+    background: $default-white;
+    position: fixed;
+    border-right: 1px solid $border-color;
+    float: left;
+    width: 250px;
+    transition: all 0.3s ease-in-out;
+
+    @include to($breakpoint-md) {
+      z-index: 1;
+      left: -250px;
+    }
+  }
+
+  .email-wrapper {
+    margin: 0;
+    padding: 0;
+    overflow: auto;
+    min-height: 100%;
+    transition: all 0.3s ease-in-out;
+
+    @include to($breakpoint-md) {
+      position: absolute;
+      left: 0;
+      width: 100%;
+      overflow-x: hidden;
+    }
+
+    @include from($breakpoint-md) {
+      margin-left: 250px;
+    }
+
+    .email-list {
+      position: relative;
+      padding: 0;
+      width: 100%;
+      overflow-y: hidden;
+      background-color: $default-white;
+      height: calc(100vh - #{$header-height});
+
+      @include to($breakpoint-md) {
+        max-height: calc(100vh - 65px);
+      }
+
+      @include from($breakpoint-md) {
+        width: 40%;
+        border-right: 1px solid $border-color;
+        float: left;
+      }
+    }
+
+    .email-content {
+      float: left;
+      width: 60%;
+      position: relative;
+      padding: 0;
+      background-color: $default-white;
+      // min-height: calc(100vh - #{$header-height});
+
+      &.no-inbox-view {
+        width: 100%;
+      }
+
+      @include to($breakpoint-md) {
+        position: absolute;
+        top: 0;
+        left: 100%;
+        width: 100%;
+        height: 100%;
+        transition: all 0.3s ease-in-out;
+        max-height: calc(100vh - #{$header-height});
+        overflow-y: scroll;
+
+        &.open {
+          left: 0;
+        }
+      }
+    }
+
+      .email-compose {
+        position: relative;
+      .email-compose-body {
+        padding: 30px 20px;
+
+      }
+      }
+    }
+
+
+    &.side-active {
+      .email-side-nav {
+        @include to($breakpoint-md) {
+          left: 0;
+        }
+      }
+
+      .email-wrapper {
+        @include to($breakpoint-md) {
+          left: 250px;
+        }
+      }
+    }
+}

src/assets/styles/spec/screens/index.scss

@@ -0,0 +1,2 @@
+@import 'chat';
+@import 'email';

src/assets/styles/spec/settings/baseColors.scss

@@ -0,0 +1,100 @@
+// ---------------------------------------------------------
+// @TOC
+// ---------------------------------------------------------
+
+// + @Greyscale Colors
+// + @Bootstrap Color System
+// + @Default Colors
+// + @Inverted Colors
+// + @Others
+// + @Header Themes
+// + @Social Networks Colors
+
+// ---------------------------------------------------------
+// @Greyscale Colors
+// ---------------------------------------------------------
+
+// Colors below are ordered from lightest to darkest
+
+$grey-100             : #f9fafb;
+$grey-200             : #f2f3f5;
+$grey-300             : #e6eaf0;
+$grey-400             : #d3d9e3;
+$grey-500             : #b9c2d0;
+$grey-600             : #7c8695;
+$grey-700             : #72777a;
+$grey-800             : #565a5c;
+$grey-900             : #313435;
+
+$grey-colors-alt: (
+  grey-100 : #f9fafb,
+  grey-200 : #f2f3f5,
+  grey-300 : #e6eaf0,
+  grey-400 : #d3d9e3,
+  grey-500 : #b9c2d0,
+  grey-600 : #7c8695,
+  grey-700 : #72777a,
+  grey-800 : #565a5c,
+  grey-900 : #313435,
+);
+
+// ---------------------------------------------------------
+// @Bootstrap Color System
+// ---------------------------------------------------------
+
+$blue   : $md-blue-500;
+$indigo : $md-indigo-500;
+$purple : $md-purple-500;
+$pink   : $md-pink-500;
+$red    : $md-red-500;
+$orange : $md-orange-500;
+$yellow : $md-yellow-500;
+$green  : $md-green-500;
+$teal   : $md-teal-500;
+$cyan   : $md-cyan-500;
+
+// ---------------------------------------------------------
+// @Default Colors
+// ---------------------------------------------------------
+
+$default-danger       : #ff3c7e;
+$default-dark         : #313435;
+$default-grey         : #565a5c;
+$default-info         : #0f9aee;
+$default-primary      : #7774e7;
+$default-success      : #37c936;
+$default-text-color   : #72777a;
+$default-warning      : #fc0;
+$default-white        : #fff;
+
+// ---------------------------------------------------------
+// @Inverted Colors
+// ---------------------------------------------------------
+
+$inverse-danger       : lighten($default-danger, 35%);
+$inverse-info         : lighten($default-info, 45%);
+$inverse-primary      : lighten($default-primary, 30%);
+$inverse-success      : lighten($default-success, 45%);
+$inverse-warning      : lighten($default-warning, 45%);
+
+// ---------------------------------------------------------
+// @Others
+// ---------------------------------------------------------
+
+$border-color         : #e6ecf5;
+$collapsed-size       : 70px;
+$header-height        : 65px;
+$offscreen-size       : 280px;
+$side-nav-dark        : #313644;
+$side-nav-dark-border : rgba(120, 130, 140, 0.3);
+$side-nav-dark-font   : #99abb4;
+
+// ---------------------------------------------------------
+// @Header Themes
+// ---------------------------------------------------------
+
+$theme-danger         : #f53f61;
+$theme-dark           : lighten($side-nav-dark, 10%);
+$theme-info           : $default-info;
+$theme-primary        : $default-primary;
+$theme-success        : desaturate($default-success, 5%);

src/assets/styles/spec/settings/borders.scss

@@ -0,0 +1,6 @@
+// ---------------------------------------------------------
+// @Borders
+// ---------------------------------------------------------
+
+$border-width: 1px;
+$border-color: rgba(0, 0, 0, 0.0625);

src/assets/styles/spec/settings/breakpoints.scss

@@ -0,0 +1,26 @@
+// ---------------------------------------------------------
+// @Breakpoints
+// ---------------------------------------------------------
+
+$breakpoint-xl : 1440px;
+$breakpoint-lg : 1200px;
+$breakpoint-md : 992px;
+$breakpoint-sm : 768px;
+$breakpoint-xs : 0;
+
+$breakpoints: (
+  "xl\\+" "screen and (min-width: #{$breakpoint-xl})",
+  "lg\\+" "screen and (min-width: #{$breakpoint-lg})",
+  "md\\+" "screen and (min-width: #{$breakpoint-md})",
+  "sm\\+" "screen and (min-width: #{$breakpoint-sm})",
+  "xs\\+" "screen and (min-width: #{$breakpoint-xs})",
+
+  "xl-" "screen and (max-width: #{$breakpoint-xl - 1px})",
+  "lg-" "screen and (max-width: #{$breakpoint-lg - 1px})",
+  "md-" "screen and (max-width: #{$breakpoint-md - 1px})",
+  "sm-" "screen and (max-width: #{$breakpoint-sm - 1px})",
+
+  "lg" "screen and (min-width: #{$breakpoint-lg - 1px}) and (max-width: #{$breakpoint-xl - 1px})",
+  "md" "screen and (min-width: #{$breakpoint-md - 1px}) and (max-width: #{$breakpoint-lg - 1px})",
+  "sm" "screen and (min-width: #{$breakpoint-sm - 1px}) and (max-width: #{$breakpoint-md - 1px})",
+);

src/assets/styles/spec/settings/fonts.scss

@@ -0,0 +1,4 @@
+$font-primary:
+  Roboto, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+$font-secondary: $font-primary;
+$font-size-base:              0.875rem;

src/assets/styles/spec/settings/index.scss

@@ -0,0 +1,6 @@
+@import 'breakpoints';
+@import 'fonts';
+@import 'brandColors';
+@import 'materialColors';
+@import 'baseColors';
+@import 'borders';

src/assets/styles/spec/settings/materialColors.scss

@@ -0,0 +1,550 @@
+$md-red-50                : #ffebee;
+$md-red-100               : #ffcdd2;
+$md-red-200               : #ef9a9a;
+$md-red-300               : #e57373;
+$md-red-400               : #ef5350;
+$md-red-500               : #f44336;
+$md-red-600               : #e53935;
+$md-red-700               : #d32f2f;
+$md-red-800               : #c62828;
+$md-red-900               : #b71c1c;
+$md-red-a100              : #ff8a80;
+$md-red-a200              : #ff5252;
+$md-red-a400              : #ff1744;
+$md-red-a700              : #d50000;
+
+$md-pink-50               : #fce4ec;
+$md-pink-100              : #f8bbd0;
+$md-pink-200              : #f48fb1;
+$md-pink-300              : #f06292;
+$md-pink-400              : #ec407a;
+$md-pink-500              : #e91e63;
+$md-pink-600              : #d81b60;
+$md-pink-700              : #c2185b;
+$md-pink-800              : #ad1457;
+$md-pink-900              : #880e4f;
+$md-pink-a100             : #ff80ab;
+$md-pink-a200             : #ff4081;
+$md-pink-a400             : #f50057;
+$md-pink-a700             : #c51162;
+
+$md-purple-50             : #f3e5f5;
+$md-purple-100            : #e1bee7;
+$md-purple-200            : #ce93d8;
+$md-purple-300            : #ba68c8;
+$md-purple-400            : #ab47bc;
+$md-purple-500            : #9c27b0;
+$md-purple-600            : #8e24aa;
+$md-purple-700            : #7b1fa2;
+$md-purple-800            : #6a1b9a;
+$md-purple-900            : #4a148c;
+$md-purple-a100           : #ea80fc;
+$md-purple-a200           : #e040fb;
+$md-purple-a400           : #d500f9;
+$md-purple-a700           : #aa00ff;
+
+$md-deep-purple-50        : #ede7f6;
+$md-deep-purple-100       : #d1c4e9;
+$md-deep-purple-200       : #b39ddb;
+$md-deep-purple-300       : #9575cd;
+$md-deep-purple-400       : #7e57c2;
+$md-deep-purple-500       : #673ab7;
+$md-deep-purple-600       : #5e35b1;
+$md-deep-purple-700       : #512da8;
+$md-deep-purple-800       : #4527a0;
+$md-deep-purple-900       : #311b92;
+$md-deep-purple-a100      : #b388ff;
+$md-deep-purple-a200      : #7c4dff;
+$md-deep-purple-a400      : #651fff;
+$md-deep-purple-a700      : #6200ea;
+
+$md-indigo-50             : #e8eaf6;
+$md-indigo-100            : #c5cae9;
+$md-indigo-200            : #9fa8da;
+$md-indigo-300            : #7986cb;
+$md-indigo-400            : #5c6bc0;
+$md-indigo-500            : #3f51b5;
+$md-indigo-600            : #3949ab;
+$md-indigo-700            : #303f9f;
+$md-indigo-800            : #283593;
+$md-indigo-900            : #1a237e;
+$md-indigo-a100           : #8c9eff;
+$md-indigo-a200           : #536dfe;
+$md-indigo-a400           : #3d5afe;
+$md-indigo-a700           : #304ffe;
+
+$md-blue-50               : #e3f2fd;
+$md-blue-100              : #bbdefb;
+$md-blue-200              : #90caf9;
+$md-blue-300              : #64b5f6;
+$md-blue-400              : #42a5f5;
+$md-blue-500              : #2196f3;
+$md-blue-600              : #1e88e5;
+$md-blue-700              : #1976d2;
+$md-blue-800              : #1565c0;
+$md-blue-900              : #0d47a1;
+$md-blue-a100             : #82b1ff;
+$md-blue-a200             : #448aff;
+$md-blue-a400             : #2979ff;
+$md-blue-a700             : #2962ff;
+
+$md-light-blue-50         : #e1f5fe;
+$md-light-blue-100        : #b3e5fc;
+$md-light-blue-200        : #81d4fa;
+$md-light-blue-300        : #4fc3f7;
+$md-light-blue-400        : #29b6f6;
+$md-light-blue-500        : #03a9f4;
+$md-light-blue-600        : #039be5;
+$md-light-blue-700        : #0288d1;
+$md-light-blue-800        : #0277bd;
+$md-light-blue-900        : #01579b;
+$md-light-blue-a100       : #80d8ff;
+$md-light-blue-a200       : #40c4ff;
+$md-light-blue-a400       : #00b0ff;
+$md-light-blue-a700       : #0091ea;
+
+$md-cyan-50               : #e0f7fa;
+$md-cyan-100              : #b2ebf2;
+$md-cyan-200              : #80deea;
+$md-cyan-300              : #4dd0e1;
+$md-cyan-400              : #26c6da;
+$md-cyan-500              : #00bcd4;
+$md-cyan-600              : #00acc1;
+$md-cyan-700              : #0097a7;
+$md-cyan-800              : #00838f;
+$md-cyan-900              : #006064;
+$md-cyan-a100             : #84ffff;
+$md-cyan-a200             : #18ffff;
+$md-cyan-a400             : #00e5ff;
+$md-cyan-a700             : #00b8d4;
+
+$md-teal-50               : #e0f2f1;
+$md-teal-100              : #b2dfdb;
+$md-teal-200              : #80cbc4;
+$md-teal-300              : #4db6ac;
+$md-teal-400              : #26a69a;
+$md-teal-500              : #009688;
+$md-teal-600              : #00897b;
+$md-teal-700              : #00796b;
+$md-teal-800              : #00695c;
+$md-teal-900              : #004d40;
+$md-teal-a100             : #a7ffeb;
+$md-teal-a200             : #64ffda;
+$md-teal-a400             : #1de9b6;
+$md-teal-a700             : #00bfa5;
+
+$md-green-50              : #e8f5e9;
+$md-green-100             : #c8e6c9;
+$md-green-200             : #a5d6a7;
+$md-green-300             : #81c784;
+$md-green-400             : #66bb6a;
+$md-green-500             : #4caf50;
+$md-green-600             : #43a047;
+$md-green-700             : #388e3c;
+$md-green-800             : #2e7d32;
+$md-green-900             : #1b5e20;
+$md-green-a100            : #b9f6ca;
+$md-green-a200            : #69f0ae;
+$md-green-a400            : #00e676;
+$md-green-a700            : #00c853;
+
+$md-light-green-50        : #f1f8e9;
+$md-light-green-100       : #dcedc8;
+$md-light-green-200       : #c5e1a5;
+$md-light-green-300       : #aed581;
+$md-light-green-400       : #9ccc65;
+$md-light-green-500       : #8bc34a;
+$md-light-green-600       : #7cb342;
+$md-light-green-700       : #689f38;
+$md-light-green-800       : #558b2f;
+$md-light-green-900       : #33691e;
+$md-light-green-a100      : #ccff90;
+$md-light-green-a200      : #b2ff59;
+$md-light-green-a400      : #76ff03;
+$md-light-green-a700      : #64dd17;
+
+$md-lime-50               : #f9fbe7;
+$md-lime-100              : #f0f4c3;
+$md-lime-200              : #e6ee9c;
+$md-lime-300              : #dce775;
+$md-lime-400              : #d4e157;
+$md-lime-500              : #cddc39;
+$md-lime-600              : #c0ca33;
+$md-lime-700              : #afb42b;
+$md-lime-800              : #9e9d24;
+$md-lime-900              : #827717;
+$md-lime-a100             : #f4ff81;
+$md-lime-a200             : #eeff41;
+$md-lime-a400             : #c6ff00;
+$md-lime-a700             : #aeea00;
+
+$md-yellow-50             : #fffde7;
+$md-yellow-100            : #fff9c4;
+$md-yellow-200            : #fff59d;
+$md-yellow-300            : #fff176;
+$md-yellow-400            : #ffee58;
+$md-yellow-500            : #ffeb3b;
+$md-yellow-600            : #fdd835;
+$md-yellow-700            : #fbc02d;
+$md-yellow-800            : #f9a825;
+$md-yellow-900            : #f57f17;
+$md-yellow-a100           : #ffff8d;
+$md-yellow-a200           : #ffff00;
+$md-yellow-a400           : #ffea00;
+$md-yellow-a700           : #ffd600;
+
+$md-amber-50              : #fff8e1;
+$md-amber-100             : #ffecb3;
+$md-amber-200             : #ffe082;
+$md-amber-300             : #ffd54f;
+$md-amber-400             : #ffca28;
+$md-amber-500             : #ffc107;
+$md-amber-600             : #ffb300;
+$md-amber-700             : #ffa000;
+$md-amber-800             : #ff8f00;
+$md-amber-900             : #ff6f00;
+$md-amber-a100            : #ffe57f;
+$md-amber-a200            : #ffd740;
+$md-amber-a400            : #ffc400;
+$md-amber-a700            : #ffab00;
+
+$md-orange-50             : #fff3e0;
+$md-orange-100            : #ffe0b2;
+$md-orange-200            : #ffcc80;
+$md-orange-300            : #ffb74d;
+$md-orange-400            : #ffa726;
+$md-orange-500            : #ff9800;
+$md-orange-600            : #fb8c00;
+$md-orange-700            : #f57c00;
+$md-orange-800            : #ef6c00;
+$md-orange-900            : #e65100;
+$md-orange-a100           : #ffd180;
+$md-orange-a200           : #ffab40;
+$md-orange-a400           : #ff9100;
+$md-orange-a700           : #ff6d00;
+
+$md-deep-orange-50        : #fbe9e7;
+$md-deep-orange-100       : #ffccbc;
+$md-deep-orange-200       : #ffab91;
+$md-deep-orange-300       : #ff8a65;
+$md-deep-orange-400       : #ff7043;
+$md-deep-orange-500       : #ff5722;
+$md-deep-orange-600       : #f4511e;
+$md-deep-orange-700       : #e64a19;
+$md-deep-orange-800       : #d84315;
+$md-deep-orange-900       : #bf360c;
+$md-deep-orange-a100      : #ff9e80;
+$md-deep-orange-a200      : #ff6e40;
+$md-deep-orange-a400      : #ff3d00;
+$md-deep-orange-a700      : #dd2c00;
+
+$md-brown-50              : #efebe9;
+$md-brown-100             : #d7ccc8;
+$md-brown-200             : #bcaaa4;
+$md-brown-300             : #a1887f;
+$md-brown-400             : #8d6e63;
+$md-brown-500             : #795548;
+$md-brown-600             : #6d4c41;
+$md-brown-700             : #5d4037;
+$md-brown-800             : #4e342e;
+$md-brown-900             : #3e2723;
+
+$md-grey-50               : #fafafa;
+$md-grey-100              : #f5f5f5;
+$md-grey-200              : #eeeeee;
+$md-grey-300              : #e0e0e0;
+$md-grey-400              : #bdbdbd;
+$md-grey-500              : #9e9e9e;
+$md-grey-600              : #757575;
+$md-grey-700              : #616161;
+$md-grey-800              : #424242;
+$md-grey-900              : #212121;
+
+$md-blue-grey-50          : #eceff1;
+$md-blue-grey-100         : #cfd8dc;
+$md-blue-grey-200         : #b0bec5;
+$md-blue-grey-300         : #90a4ae;
+$md-blue-grey-400         : #78909c;
+$md-blue-grey-500         : #607d8b;
+$md-blue-grey-600         : #546e7a;
+$md-blue-grey-700         : #455a64;
+$md-blue-grey-800         : #37474f;
+$md-blue-grey-900         : #263238;
+
+$md-dark-text-primary     : rgba(0, 0, 0, 0.87);
+$md-dark-text-secondary   : rgba(0, 0, 0, 0.54);
+$md-dark-text-disabled    : rgba(0, 0, 0, 0.38);
+$md-dark-text-dividers    : rgba(0, 0, 0, 0.12);
+
+$md-light-text-primary    : rgba(255, 255, 255, 1);
+$md-light-text-secondary  : rgba(255, 255, 255, 0.7);
+$md-light-text-disabled   : rgba(255, 255, 255, 0.5);
+$md-light-text-dividers   : rgba(255, 255, 255, 0.12);
+
+$md-dark-icons-active     : rgba(0, 0, 0, 0.54);
+$md-dark-icons-inactive   : rgba(0, 0, 0, 0.38);
+
+$md-light-icons-active    : rgba(255, 255, 255, 1);
+$md-light-icons-inactive  : rgba(255, 255, 255, 0.5);
+
+$md-white                 : #ffffff;
+
+$md-black                 : #000000;
+
+$md-colors: (
+  white                 : #ffffff,
+  red-50                : #ffebee,
+  red-100               : #ffcdd2,
+  red-200               : #ef9a9a,
+  red-300               : #e57373,
+  red-400               : #ef5350,
+  red-500               : #f44336,
+  red-600               : #e53935,
+  red-700               : #d32f2f,
+  red-800               : #c62828,
+  red-900               : #b71c1c,
+  red-a100              : #ff8a80,
+  red-a200              : #ff5252,
+  red-a400              : #ff1744,
+  red-a700              : #d50000,
+  pink-50               : #fce4ec,
+  pink-100              : #f8bbd0,
+  pink-200              : #f48fb1,
+  pink-300              : #f06292,
+  pink-400              : #ec407a,
+  pink-500              : #e91e63,
+  pink-600              : #d81b60,
+  pink-700              : #c2185b,
+  pink-800              : #ad1457,
+  pink-900              : #880e4f,
+  pink-a100             : #ff80ab,
+  pink-a200             : #ff4081,
+  pink-a400             : #f50057,
+  pink-a700             : #c51162,
+  purple-50             : #f3e5f5,
+  purple-100            : #e1bee7,
+  purple-200            : #ce93d8,
+  purple-300            : #ba68c8,
+  purple-400            : #ab47bc,
+  purple-500            : #9c27b0,
+  purple-600            : #8e24aa,
+  purple-700            : #7b1fa2,
+  purple-800            : #6a1b9a,
+  purple-900            : #4a148c,
+  purple-a100           : #ea80fc,
+  purple-a200           : #e040fb,
+  purple-a400           : #d500f9,
+  purple-a700           : #aa00ff,
+  deep-purple-50        : #ede7f6,
+  deep-purple-100       : #d1c4e9,
+  deep-purple-200       : #b39ddb,
+  deep-purple-300       : #9575cd,
+  deep-purple-400       : #7e57c2,
+  deep-purple-500       : #673ab7,
+  deep-purple-600       : #5e35b1,
+  deep-purple-700       : #512da8,
+  deep-purple-800       : #4527a0,
+  deep-purple-900       : #311b92,
+  deep-purple-a100      : #b388ff,
+  deep-purple-a200      : #7c4dff,
+  deep-purple-a400      : #651fff,
+  deep-purple-a700      : #6200ea,
+  indigo-50             : #e8eaf6,
+  indigo-100            : #c5cae9,
+  indigo-200            : #9fa8da,
+  indigo-300            : #7986cb,
+  indigo-400            : #5c6bc0,
+  indigo-500            : #3f51b5,
+  indigo-600            : #3949ab,
+  indigo-700            : #303f9f,
+  indigo-800            : #283593,
+  indigo-900            : #1a237e,
+  indigo-a100           : #8c9eff,
+  indigo-a200           : #536dfe,
+  indigo-a400           : #3d5afe,
+  indigo-a700           : #304ffe,
+  blue-50               : #e3f2fd,
+  blue-100              : #bbdefb,
+  blue-200              : #90caf9,
+  blue-300              : #64b5f6,
+  blue-400              : #42a5f5,
+  blue-500              : #2196f3,
+  blue-600              : #1e88e5,
+  blue-700              : #1976d2,
+  blue-800              : #1565c0,
+  blue-900              : #0d47a1,
+  blue-a100             : #82b1ff,
+  blue-a200             : #448aff,
+  blue-a400             : #2979ff,
+  blue-a700             : #2962ff,
+  light-blue-50         : #e1f5fe,
+  light-blue-100        : #b3e5fc,
+  light-blue-200        : #81d4fa,
+  light-blue-300        : #4fc3f7,
+  light-blue-400        : #29b6f6,
+  light-blue-500        : #03a9f4,
+  light-blue-600        : #039be5,
+  light-blue-700        : #0288d1,
+  light-blue-800        : #0277bd,
+  light-blue-900        : #01579b,
+  light-blue-a100       : #80d8ff,
+  light-blue-a200       : #40c4ff,
+  light-blue-a400       : #00b0ff,
+  light-blue-a700       : #0091ea,
+  cyan-50               : #e0f7fa,
+  cyan-100              : #b2ebf2,
+  cyan-200              : #80deea,
+  cyan-300              : #4dd0e1,
+  cyan-400              : #26c6da,
+  cyan-500              : #00bcd4,
+  cyan-600              : #00acc1,
+  cyan-700              : #0097a7,
+  cyan-800              : #00838f,
+  cyan-900              : #006064,
+  cyan-a100             : #84ffff,
+  cyan-a200             : #18ffff,
+  cyan-a400             : #00e5ff,
+  cyan-a700             : #00b8d4,
+  teal-50               : #e0f2f1,
+  teal-100              : #b2dfdb,
+  teal-200              : #80cbc4,
+  teal-300              : #4db6ac,
+  teal-400              : #26a69a,
+  teal-500              : #009688,
+  teal-600              : #00897b,
+  teal-700              : #00796b,
+  teal-800              : #00695c,
+  teal-900              : #004d40,
+  teal-a100             : #a7ffeb,
+  teal-a200             : #64ffda,
+  teal-a400             : #1de9b6,
+  teal-a700             : #00bfa5,
+  green-50              : #e8f5e9,
+  green-100             : #c8e6c9,
+  green-200             : #a5d6a7,
+  green-300             : #81c784,
+  green-400             : #66bb6a,
+  green-500             : #4caf50,
+  green-600             : #43a047,
+  green-700             : #388e3c,
+  green-800             : #2e7d32,
+  green-900             : #1b5e20,
+  green-a100            : #b9f6ca,
+  green-a200            : #69f0ae,
+  green-a400            : #00e676,
+  green-a700            : #00c853,
+  light-green-50        : #f1f8e9,
+  light-green-100       : #dcedc8,
+  light-green-200       : #c5e1a5,
+  light-green-300       : #aed581,
+  light-green-400       : #9ccc65,
+  light-green-500       : #8bc34a,
+  light-green-600       : #7cb342,
+  light-green-700       : #689f38,
+  light-green-800       : #558b2f,
+  light-green-900       : #33691e,
+  light-green-a100      : #ccff90,
+  light-green-a200      : #b2ff59,
+  light-green-a400      : #76ff03,
+  light-green-a700      : #64dd17,
+  lime-50               : #f9fbe7,
+  lime-100              : #f0f4c3,
+  lime-200              : #e6ee9c,
+  lime-300              : #dce775,
+  lime-400              : #d4e157,
+  lime-500              : #cddc39,
+  lime-600              : #c0ca33,
+  lime-700              : #afb42b,
+  lime-800              : #9e9d24,
+  lime-900              : #827717,
+  lime-a100             : #f4ff81,
+  lime-a200             : #eeff41,
+  lime-a400             : #c6ff00,
+  lime-a700             : #aeea00,
+  yellow-50             : #fffde7,
+  yellow-100            : #fff9c4,
+  yellow-200            : #fff59d,
+  yellow-300            : #fff176,
+  yellow-400            : #ffee58,
+  yellow-500            : #ffeb3b,
+  yellow-600            : #fdd835,
+  yellow-700            : #fbc02d,
+  yellow-800            : #f9a825,
+  yellow-900            : #f57f17,
+  yellow-a100           : #ffff8d,
+  yellow-a200           : #ffff00,
+  yellow-a400           : #ffea00,
+  yellow-a700           : #ffd600,
+  amber-50              : #fff8e1,
+  amber-100             : #ffecb3,
+  amber-200             : #ffe082,
+  amber-300             : #ffd54f,
+  amber-400             : #ffca28,
+  amber-500             : #ffc107,
+  amber-600             : #ffb300,
+  amber-700             : #ffa000,
+  amber-800             : #ff8f00,
+  amber-900             : #ff6f00,
+  amber-a100            : #ffe57f,
+  amber-a200            : #ffd740,
+  amber-a400            : #ffc400,
+  amber-a700            : #ffab00,
+  orange-50             : #fff3e0,
+  orange-100            : #ffe0b2,
+  orange-200            : #ffcc80,
+  orange-300            : #ffb74d,
+  orange-400            : #ffa726,
+  orange-500            : #ff9800,
+  orange-600            : #fb8c00,
+  orange-700            : #f57c00,
+  orange-800            : #ef6c00,
+  orange-900            : #e65100,
+  orange-a100           : #ffd180,
+  orange-a200           : #ffab40,
+  orange-a400           : #ff9100,
+  orange-a700           : #ff6d00,
+  deep-orange-50        : #fbe9e7,
+  deep-orange-100       : #ffccbc,
+  deep-orange-200       : #ffab91,
+  deep-orange-300       : #ff8a65,
+  deep-orange-400       : #ff7043,
+  deep-orange-500       : #ff5722,
+  deep-orange-600       : #f4511e,
+  deep-orange-700       : #e64a19,
+  deep-orange-800       : #d84315,
+  deep-orange-900       : #bf360c,
+  deep-orange-a100      : #ff9e80,
+  deep-orange-a200      : #ff6e40,
+  deep-orange-a400      : #ff3d00,
+  deep-orange-a700      : #dd2c00,
+  brown-50              : #efebe9,
+  brown-100             : #d7ccc8,
+  brown-200             : #bcaaa4,
+  brown-300             : #a1887f,
+  brown-400             : #8d6e63,
+  brown-500             : #795548,
+  brown-600             : #6d4c41,
+  brown-700             : #5d4037,
+  brown-800             : #4e342e,
+  brown-900             : #3e2723,
+  grey-50               : #fafafa,
+  grey-100              : #f5f5f5,
+  grey-200              : #eeeeee,
+  grey-300              : #e0e0e0,
+  grey-400              : #bdbdbd,
+  grey-500              : #9e9e9e,
+  grey-600              : #757575,
+  grey-700              : #616161,
+  grey-800              : #424242,
+  grey-900              : #212121,
+  blue-grey-50          : #eceff1,
+  blue-grey-100         : #cfd8dc,
+  blue-grey-200         : #b0bec5,
+  blue-grey-300         : #90a4ae,
+  blue-grey-400         : #78909c,
+  blue-grey-500         : #607d8b,
+  blue-grey-600         : #546e7a,
+  blue-grey-700         : #455a64,
+  blue-grey-800         : #37474f,
+  blue-grey-900         : #263238,
+) !global;

src/assets/styles/spec/tools/index.scss

@@ -0,0 +1 @@
+@import 'mixins/index';

src/assets/styles/spec/tools/mixins/clearfix.scss

@@ -0,0 +1,15 @@
+//----------------------------------------------------------
+// @Clearfix
+//----------------------------------------------------------
+
+@mixin clearfix {
+  &::before,
+  &::after {
+    content: ' ';
+    display: table;
+  }
+
+  &::after {
+    clear: both;
+  }
+}

src/assets/styles/spec/tools/mixins/index.scss

@@ -0,0 +1,3 @@
+@import 'placeholder';
+@import 'clearfix';
+@import 'mediaQueriesRanges';

src/assets/styles/spec/tools/mixins/mediaQueriesRanges.scss

@@ -0,0 +1,58 @@
+// ---------------------------------------------------------
+// @TOC
+// ---------------------------------------------------------
+
+// + @General Media Query
+// + @All Above Media Query
+// + @All Under Media Query
+// + @Between Two Devices Media Query
+
+// ---------------------------------------------------------
+// @General Media Query Mixin
+// ---------------------------------------------------------
+
+// Mixin used for custom rules that don't follow
+// any of the following premade media queries.
+
+@mixin mq($condition) {
+  @media #{$condition} {
+    @content;
+  }
+}
+
+// ---------------------------------------------------------
+// @All Above Media Query Mixin
+// ---------------------------------------------------------
+
+// Mixin used to match certain breakpoint
+// and all devices above it.
+
+@mixin from($breakpoint) {
+  @media screen and (min-width: $breakpoint){
+    @content;
+  }
+}
+
+// ---------------------------------------------------------
+// @All Under Media Query Mixin
+// ---------------------------------------------------------
+
+// Mixin used to match all devices under certain breakpoint.
+
+@mixin to($breakpoint) {
+  @media screen and (max-width: $breakpoint - 1px) {
+    @content;
+  }
+}
+
+// ---------------------------------------------------------
+// @Between Two Devices Media Query Mixin
+// ---------------------------------------------------------
+
+// Mixin used to match the devices between 2 breakpoints.
+
+@mixin between($start, $end){
+  @media screen and (min-width: $start) and (max-width: $end - 1px) {
+    @content;
+  }
+}

src/assets/styles/spec/tools/mixins/placeholder.scss

@@ -0,0 +1,10 @@
+//----------------------------------------------------------
+// @Placeholder
+//----------------------------------------------------------
+
+@mixin placeholder {
+  &::-webkit-input-placeholder { @content; }
+  &:-moz-placeholder { @content; }
+  &::-moz-placeholder { @content; }
+  &:-ms-input-placeholder { @content; }
+}

src/assets/styles/spec/utils/colors.scss

@@ -0,0 +1,30 @@
+// ---------------------------------------------------------
+// @TOC
+// ---------------------------------------------------------
+
+// + @Material Color
+// + @Grey Colors
+
+// ---------------------------------------------------------
+// @Material Color
+// ---------------------------------------------------------
+
+@each $item, $color in $md-colors {
+  .c-#{$item},     .cH-#{$item}:hover      { color: $color !important; }
+  .bgc-#{$item},   .bgcH-#{$item}:hover    { background-color: $color !important; }
+  .bdc-#{$item},   .bdcH-#{$item}:hover    { border-color: $color !important; }
+  .fill-#{$item},  .fillH-#{$item}:hover   { fill: $color !important; }
+  .str-#{$item},   .strH-#{$item}:hover    { stroke: $color !important; }
+}
+
+// ---------------------------------------------------------
+// @Grey Colors
+// ---------------------------------------------------------
+
+@each $item, $color in $grey-colors-alt {
+  .c-#{$item},     .cH-#{$item}:hover      { color: $color !important; }
+  .bgc-#{$item},   .bgcH-#{$item}:hover    { background-color: $color !important; }
+  .bdc-#{$item},   .bdcH-#{$item}:hover    { border-color: $color !important; }
+  .fill-#{$item},  .fillH-#{$item}:hover   { fill: $color !important; }
+  .str-#{$item},   .strH-#{$item}:hover    { stroke: $color !important; }
+}

src/assets/styles/spec/utils/index.scss

@@ -0,0 +1,2 @@
+@import 'layout/index';
+@import 'colors';

src/assets/styles/spec/utils/layout/helpers/border.scss

@@ -0,0 +1,75 @@
+// ---------------------------------------------------------
+// @TOC
+// ---------------------------------------------------------
+
+// + @Quick Border Helpers
+// + @Border Width
+// + @Border Radius
+// + @Border Style
+
+// ---------------------------------------------------------
+// @Quick Border Helpers
+// ---------------------------------------------------------
+
+.bd  { border: #{$border-width} solid #{$border-color} !important; }
+.bdT { border-top: #{$border-width} solid #{$border-color} !important; }
+.bdR { border-right: #{$border-width} solid #{$border-color} !important; }
+.bdB { border-bottom: #{$border-width} solid #{$border-color} !important; }
+.bdL { border-left: #{$border-width} solid #{$border-color} !important; }
+
+// ---------------------------------------------------------
+// @Border Width
+// ---------------------------------------------------------
+
+@for $i from 0 through 5 {
+  .bdw-#{$i}  { border-width: #{$i}px !important; }
+  .bdwT-#{$i} { border-top-width: #{$i}px !important; }
+  .bdwR-#{$i} { border-right-width: #{$i}px !important; }
+  .bdwB-#{$i} { border-bottom-width: #{$i}px !important; }
+  .bdwL-#{$i} { border-left-width: #{$i}px !important; }
+}
+
+// ---------------------------------------------------------
+// @Border Radius
+// ---------------------------------------------------------
+
+@for $i from 0 to 5 {
+  .bdrs-#{$i} { border-radius: #{$i}px !important; }
+
+  .bdrsT-#{$i} {
+    border-top-left-radius: #{$i}px !important;
+    border-top-right-radius: #{$i}px !important;
+  }
+
+  .bdrsR-#{$i} {
+    border-top-right-radius: #{$i}px !important;
+    border-bottom-right-radius: #{$i}px !important;
+  }
+
+  .bdrsB-#{$i} {
+    border-bottom-left-radius: #{$i}px !important;
+    border-bottom-right-radius: #{$i}px !important;
+  }
+
+  .bdrsL-#{$i} {
+    border-top-left-radius: #{$i}px !important;
+    border-bottom-left-radius: #{$i}px !important;
+  }
+}
+
+.bdrs-50p  { border-radius: 50% !important; }
+.bdrs-10em { border-radius: 10em !important; }
+
+// ---------------------------------------------------------
+// @Border Style
+// ---------------------------------------------------------
+
+.bds-n  { border-style: none !important; }
+.bds-s  { border-style: solid !important; }
+.bds-dt { border-style: dotted !important; }
+.bds-ds { border-style: dashed !important; }
+.bds-db { border-style: double !important; }
+.bds-g  { border-style: groove !important; }
+.bds-r  { border-style: ridge !important; }
+.bds-i  { border-style: inset !important; }
+.bds-o  { border-style: outset !important; }

src/assets/styles/spec/utils/layout/helpers/flex.scss

@@ -0,0 +1,218 @@
+// ---------------------------------------------------------
+// @TOC
+// ---------------------------------------------------------
+
+// + @Variables
+// + @Flex Wrap
+// + @Flex Direction
+// + @Flex
+// + @Flex Basis
+// + @Flex Grow
+// + @Flex Shrink
+// + @Flex Order
+
+// ---------------------------------------------------------
+// @Variables
+// ---------------------------------------------------------
+
+$responsive: true;
+
+// ---------------------------------------------------------
+// @Display
+// ---------------------------------------------------------
+
+.d-f     { display: flex; }
+.d-if    { display: inline-flex; }
+
+@if ($responsive == true) {
+  @include generateResponsive() {
+    .d-f\@#{$breakpointAlias}     { display: flex; }
+    .d-if\@#{$breakpointAlias}    { display: inline-flex; }
+  }
+}
+
+// ---------------------------------------------------------
+// @Flex Wrap
+// ---------------------------------------------------------
+
+.fxw-w   { flex-wrap: wrap; }
+.fxw-wr  { flex-wrap: wrap-reverse; }
+.fxw-nw  { flex-wrap: nowrap; }
+
+@if ($responsive == true) {
+  @include generateResponsive() {
+    .fxw-w\@#{$breakpointAlias}   { flex-wrap: wrap; }
+    .fxw-wr\@#{$breakpointAlias}  { flex-wrap: wrap-reverse; }
+    .fxw-nw\@#{$breakpointAlias}  { flex-wrap: nowrap; }
+  }
+}
+
+// ---------------------------------------------------------
+// @Flex Direction
+// ---------------------------------------------------------
+
+.fxd-c   { flex-direction: column; }
+.fxd-cr  { flex-direction: column-reverse; }
+.fxd-r   { flex-direction: row; }
+.fxd-rr  { flex-direction: row-reverse; }
+
+@if ($responsive == true) {
+  @include generateResponsive() {
+    .fxd-c\@#{$breakpointAlias}   { flex-direction: column; }
+    .fxd-cr\@#{$breakpointAlias}  { flex-direction: column-reverse; }
+    .fxd-r\@#{$breakpointAlias}   { flex-direction: row; }
+    .fxd-rr\@#{$breakpointAlias}  { flex-direction: row-reverse; }
+  }
+}
+
+// ---------------------------------------------------------
+// @Align Items
+// ---------------------------------------------------------
+
+.ai-fs   { align-items: flex-start; }
+.ai-fe   { align-items: flex-end; }
+.ai-c    { align-items: center; }
+.ai-b    { align-items: baseline; }
+.ai-s    { align-items: stretch; }
+
+@if ($responsive == true) {
+  @include generateResponsive() {
+    .ai-fs\@#{$breakpointAlias}   { align-items: flex-start; }
+    .ai-fe\@#{$breakpointAlias}   { align-items: flex-end; }
+    .ai-c\@#{$breakpointAlias}    { align-items: center; }
+    .ai-b\@#{$breakpointAlias}    { align-items: baseline; }
+    .ai-s\@#{$breakpointAlias}    { align-items: stretch; }
+  }
+}
+
+// ---------------------------------------------------------
+// @Align Self
+// ---------------------------------------------------------
+
+.as-fs   { align-self: flex-start; }
+.as-fe   { align-self: flex-end; }
+.as-c    { align-self: center; }
+.as-b    { align-self: baseline; }
+.as-s    { align-self: stretch; }
+
+@if ($responsive == true) {
+  @include generateResponsive() {
+    .as-fs\@#{$breakpointAlias}   { align-self: flex-start; }
+    .as-fe\@#{$breakpointAlias}   { align-self: flex-end; }
+    .as-c\@#{$breakpointAlias}    { align-self: center; }
+    .as-b\@#{$breakpointAlias}    { align-self: baseline; }
+    .as-s\@#{$breakpointAlias}    { align-self: stretch; }
+  }
+}
+
+// ---------------------------------------------------------
+// @Align Content
+// ---------------------------------------------------------
+
+.ac-fs   { align-content: flex-start; }
+.ac-fe   { align-content: flex-end; }
+.ac-c    { align-content: center; }
+.ac-s    { align-content: stretch; }
+.ac-sb   { align-content: space-between; }
+.ac-sa   { align-content: space-around; }
+
+@if ($responsive == true) {
+  @include generateResponsive() {
+    .ac-fs\@#{$breakpointAlias}   { align-content: flex-start; }
+    .ac-fe\@#{$breakpointAlias}   { align-content: flex-end; }
+    .ac-c\@#{$breakpointAlias}    { align-content: center; }
+    .ac-s\@#{$breakpointAlias}    { align-content: stretch; }
+    .ac-sb\@#{$breakpointAlias}   { align-content: space-between; }
+    .ac-sa\@#{$breakpointAlias}   { align-content: space-around; }
+  }
+}
+
+// ---------------------------------------------------------
+// @Justify Content
+// ---------------------------------------------------------
+
+.jc-fs   { justify-content: flex-start; }
+.jc-fe   { justify-content: flex-end; }
+.jc-c    { justify-content: center; }
+.jc-sb   { justify-content: space-between; }
+.jc-sa   { justify-content: space-around; }
+
+@if ($responsive == true) {
+  @include generateResponsive() {
+    .jc-fs\@#{$breakpointAlias}   { justify-content: flex-start; }
+    .jc-fe\@#{$breakpointAlias}   { justify-content: flex-end; }
+    .jc-c\@#{$breakpointAlias}    { justify-content: center; }
+    .jc-sb\@#{$breakpointAlias}   { justify-content: space-between; }
+    .jc-sa\@#{$breakpointAlias}   { justify-content: space-around; }
+  }
+}
+
+// ---------------------------------------------------------
+// @Flex
+// ---------------------------------------------------------
+
+.fx-n    { flex: none; }
+.fx-1    { flex: 1; }
+
+@if ($responsive == true) {
+  @include generateResponsive() {
+    .fx-n\@#{$breakpointAlias}    { flex: none; }
+    .fx-1\@#{$breakpointAlias}    { flex: 1; }
+  }
+}
+
+// ---------------------------------------------------------
+// @Flex Basis
+// ---------------------------------------------------------
+
+.fxb-a   { flex-basis: auto; }
+.fxb-0   { flex-basis: 0; }
+
+@if ($responsive == true) {
+  @include generateResponsive() {
+    .fxb-a\@#{$breakpointAlias}   { flex-basis: auto; }
+    .fxb-0\@#{$breakpointAlias}   { flex-basis: 0; }
+  }
+}
+
+// ---------------------------------------------------------
+// @Flex Grow
+// ---------------------------------------------------------
+
+.fxg-1   { flex-grow: 1; }
+.fxg-0   { flex-grow: 0; }
+
+@if ($responsive == true) {
+  @include generateResponsive() {
+    .fxg-1\@#{$breakpointAlias}   { flex-grow: 1; }
+    .fxg-0\@#{$breakpointAlias}   { flex-grow: 0; }
+  }
+}
+
+// ---------------------------------------------------------
+// @Flex Shrink
+// ---------------------------------------------------------
+
+.fxs-1   { flex-shrink: 1; }
+.fxs-0   { flex-shrink: 0; }
+
+@if ($responsive == true) {
+  @include generateResponsive() {
+    .fxs-1\@#{$breakpointAlias}   { flex-shrink: 1; }
+    .fxs-0\@#{$breakpointAlias}   { flex-shrink: 0; }
+  }
+}
+
+// ---------------------------------------------------------
+// @Flex Order
+// ---------------------------------------------------------
+
+@for $i from 0 through 12 {
+  .ord-#{$i} { order: $i; }
+
+  @if ($responsive == true) {
+    @include generateResponsive() {
+      .ord-#{$i}\@#{$breakpointAlias} { order: $i; }
+    }
+  }
+}

src/assets/styles/spec/utils/layout/helpers/index.scss

@@ -0,0 +1,11 @@
+@import 'flex';
+@import 'layout';
+@import 'lists';
+@import 'margin';
+@import 'objects';
+@import 'padding';
+@import 'positions';
+@import 'sizes';
+@import 'typography';
+@import 'border';
+@import 'pseudo';

src/assets/styles/spec/utils/layout/helpers/layout.scss

@@ -0,0 +1,135 @@
+// ---------------------------------------------------------
+// @TOC
+// ---------------------------------------------------------
+
+// + @Variables
+// + @Display
+// + @Overflow
+// + @Float
+// + @Vertical Align
+// + @Position
+// + @Z-Index
+
+// ---------------------------------------------------------
+// @Variables
+// ---------------------------------------------------------
+
+$responsive: true;
+
+// ---------------------------------------------------------
+// @Display
+// ---------------------------------------------------------
+
+.d-b          { display: block !important; }
+.d-ib         { display: inline-block !important; }
+.d-i          { display: inline !important; }
+.d-tb         { display: table !important; }
+.d-tbc        { display: table-cell !important; }
+.d-n          { display: none !important; }
+
+@if ($responsive == true) {
+  @include generateResponsive() {
+    .d-b\@#{$breakpointAlias}      { display: block !important; }
+    .d-ib\@#{$breakpointAlias}     { display: inline-block !important; }
+    .d-i\@#{$breakpointAlias}      { display: inline !important; }
+    .d-tb\@#{$breakpointAlias}     { display: table !important; }
+    .d-tbc\@#{$breakpointAlias}    { display: table-cell !important; }
+    .d-n\@#{$breakpointAlias}      { display: none !important; }
+  }
+}
+
+// ---------------------------------------------------------
+// @Overflow
+// ---------------------------------------------------------
+
+.ov-h         { overflow: hidden !important; }
+.ov-a         { overflow: auto !important; }
+.ov-s         { overflow: scroll !important; }
+
+.ovY-h        { overflow-y: hidden !important; }
+.ovX-h        { overflow-x: hidden !important; }
+.ovY-a        { overflow-y: auto !important; }
+.ovX-a        { overflow-x: auto !important; }
+.ovY-s        { overflow-y: scroll !important; }
+.ovX-s        { overflow-x: scroll !important; }
+
+@if ($responsive == true) {
+  @include generateResponsive() {
+    .ov-h\@#{$breakpointAlias}     { overflow: hidden !important; }
+    .ov-a\@#{$breakpointAlias}     { overflow: auto !important; }
+    .ov-s\@#{$breakpointAlias}     { overflow: scroll !important; }
+
+    .ovY-h\@#{$breakpointAlias}    { overflow-y: hidden !important; }
+    .ovX-h\@#{$breakpointAlias}    { overflow-x: hidden !important; }
+    .ovY-a\@#{$breakpointAlias}    { overflow-y: auto !important; }
+    .ovX-a\@#{$breakpointAlias}    { overflow-x: auto !important; }
+    .ovY-s\@#{$breakpointAlias}    { overflow-y: scroll !important; }
+    .ovX-s\@#{$breakpointAlias}    { overflow-x: scroll !important; }
+  }
+}
+
+// ---------------------------------------------------------
+// @Float
+// ---------------------------------------------------------
+
+.fl-l         { float: left !important; }
+.fl-r         { float: right !important; }
+.fl-n         { float: none !important; }
+
+@if ($responsive == true) {
+  @include generateResponsive() {
+    .fl-l\@#{$breakpointAlias}     { float: left !important; }
+    .fl-r\@#{$breakpointAlias}     { float: right !important; }
+    .fl-n\@#{$breakpointAlias}     { float: none !important; }
+  }
+}
+
+// ---------------------------------------------------------
+// @Vertical Align
+// ---------------------------------------------------------
+
+.va-t         { vertical-align: top !important; }
+.va-m         { vertical-align: middle !important; }
+.va-b         { vertical-align: bottom !important; }
+
+@if ($responsive == true) {
+  @include generateResponsive() {
+    .va-t\@#{$breakpointAlias}     { vertical-align: top !important; }
+    .va-m\@#{$breakpointAlias}     { vertical-align: middle !important; }
+    .va-b\@#{$breakpointAlias}     { vertical-align: bottom !important; }
+  }
+}
+
+// ---------------------------------------------------------
+// @Position
+// ---------------------------------------------------------
+
+.pos-s        { position: static !important; }
+.pos-st       { position: sticky !important; }
+.pos-r        { position: relative !important; }
+.pos-a        { position: absolute !important; }
+.pos-f        { position: fixed !important; }
+
+@if ($responsive == true) {
+  @include generateResponsive() {
+    .pos-s\@#{$breakpointAlias}    { position: static !important; }
+    .pos-st\@#{$breakpointAlias}   { position: sticky !important; }
+    .pos-r\@#{$breakpointAlias}    { position: relative !important; }
+    .pos-a\@#{$breakpointAlias}    { position: absolute !important; }
+    .pos-f\@#{$breakpointAlias}    { position: fixed !important; }
+  }
+}
+
+// ---------------------------------------------------------
+// @Z-Index
+// ---------------------------------------------------------
+
+@for $i from 0 through 9 {
+  .z-#{$i} { z-index: ($i * 1000) !important; }
+
+  @if ($responsive == true) {
+    @include generateResponsive() {
+      .z-#{$i}\@#{$breakpointAlias} { z-index: ($i * 1000) !important; }
+    }
+  }
+}

src/assets/styles/spec/utils/layout/helpers/lists.scss

@@ -0,0 +1,23 @@
+// ---------------------------------------------------------
+// @TOC
+// ---------------------------------------------------------
+
+// + @List Style Position
+// + @List Style Type
+
+// ---------------------------------------------------------
+// @List Style Position
+// ---------------------------------------------------------
+
+.lisp-i { list-style-position: inside; }
+.lisp-o { list-style-position: outside; }
+
+// ---------------------------------------------------------
+// @List Style Type
+// ---------------------------------------------------------
+
+.lis-n  { list-style: none; }
+.list-c { list-style-type: circle; }
+.list-s { list-style-type: square; }
+.list-u { list-style-type: upper-roman; }
+.list-l { list-style-type: lower-alpha; }

src/assets/styles/spec/utils/layout/helpers/margin.scss

@@ -0,0 +1,264 @@
+// ---------------------------------------------------------
+// @TOC
+// ---------------------------------------------------------
+
+// + @Variables
+// + @Margin (0 > 4 Step 1)
+// + @Margin (5 > 35 Step 5)
+// + @Margin (40 > 160 Step 10)
+// + @Margin Auto
+
+// ---------------------------------------------------------
+// @Variables
+// ---------------------------------------------------------
+
+$responsive: true;
+
+// ---------------------------------------------------------
+// @Padding (0 > 4 Step 1)
+// ---------------------------------------------------------
+
+@for $i from 0 through 4 {
+  .m-#{$i}  { margin: #{$i}px !important; }
+  .mT-#{$i} { margin-top: #{$i}px !important; }
+  .mR-#{$i} { margin-right: #{$i}px !important; }
+  .mB-#{$i} { margin-bottom: #{$i}px !important; }
+  .mL-#{$i} { margin-left: #{$i}px !important; }
+
+  .mY-#{$i} {
+    margin-top: #{$i}px !important;
+    margin-bottom: #{$i}px !important;
+  }
+
+  .mX-#{$i} {
+    margin-left: #{$i}px !important;
+    margin-right: #{$i}px !important;
+  }
+
+  .m-nv-#{$i}  { margin: -#{$i}px !important; }
+  .mT-nv-#{$i} { margin-top: -#{$i}px !important; }
+  .mR-nv-#{$i} { margin-right: -#{$i}px !important; }
+  .mB-nv-#{$i} { margin-bottom:- #{$i}px !important; }
+  .mL-nv-#{$i} { margin-left: -#{$i}px !important; }
+
+  .mY-nv-#{$i} {
+    margin-top: -#{$i}px !important;
+    margin-bottom: -#{$i}px !important;
+  }
+
+  .mX-nv-#{$i} {
+    margin-left: -#{$i}px !important;
+    margin-right: -#{$i}px !important;
+  }
+
+  @if ($responsive == true) {
+    @include generateResponsive() {
+      .m-#{$i}\@#{$breakpointAlias}  { margin: #{$i}px !important; }
+      .mT-#{$i}\@#{$breakpointAlias} { margin-top: #{$i}px !important; }
+      .mR-#{$i}\@#{$breakpointAlias} { margin-right: #{$i}px !important; }
+      .mB-#{$i}\@#{$breakpointAlias} { margin-bottom: #{$i}px !important; }
+      .mL-#{$i}\@#{$breakpointAlias} { margin-left: #{$i}px !important; }
+
+      .mY-#{$i}\@#{$breakpointAlias} {
+        margin-top: #{$i}px !important;
+        margin-bottom: #{$i}px !important;
+      }
+
+      .mX-#{$i}\@#{$breakpointAlias} {
+        margin-left: #{$i}px !important;
+        margin-right: #{$i}px !important;
+      }
+
+      .m-nv-#{$i}\@#{$breakpointAlias}  { margin: -#{$i}px !important; }
+      .mT-nv-#{$i}\@#{$breakpointAlias} { margin-top: -#{$i}px !important; }
+      .mR-nv-#{$i}\@#{$breakpointAlias} { margin-right: -#{$i}px !important; }
+      .mB-nv-#{$i}\@#{$breakpointAlias} { margin-bottom: -#{$i}px !important; }
+      .mL-nv-#{$i}\@#{$breakpointAlias} { margin-left: -#{$i}px !important; }
+
+      .mY-nv-#{$i}\@#{$breakpointAlias} {
+        margin-top: -#{$i}px !important;
+        margin-bottom: -#{$i}px !important;
+      }
+
+      .mX-nv-#{$i}\@#{$breakpointAlias} {
+        margin-left: -#{$i}px !important;
+        margin-right: -#{$i}px !important;
+      }
+    }
+  }
+}
+
+// ---------------------------------------------------------
+// @Padding (5 > 35 Step 5)
+// ---------------------------------------------------------
+
+@for $i from 5 through 35 {
+  @if $i % 5 == 0 {
+    .m-#{$i}  { margin: #{$i}px !important; }
+    .mT-#{$i} { margin-top: #{$i}px !important; }
+    .mR-#{$i} { margin-right: #{$i}px !important; }
+    .mB-#{$i} { margin-bottom: #{$i}px !important; }
+    .mL-#{$i} { margin-left: #{$i}px !important; }
+
+    .mY-#{$i} {
+      margin-top: #{$i}px !important;
+      margin-bottom: #{$i}px !important;
+    }
+
+    .mX-#{$i} {
+      margin-left: #{$i}px !important;
+      margin-right: #{$i}px !important;
+    }
+
+    .m-nv-#{$i}  { margin: -#{$i}px !important; }
+    .mT-nv-#{$i} { margin-top: -#{$i}px !important; }
+    .mR-nv-#{$i} { margin-right: -#{$i}px !important; }
+    .mB-nv-#{$i} { margin-bottom: -#{$i}px !important; }
+    .mL-nv-#{$i} { margin-left: -#{$i}px !important; }
+
+    .mY-nv-#{$i} {
+      margin-top: -#{$i}px !important;
+      margin-bottom: -#{$i}px !important;
+    }
+
+    .mX-nv-#{$i} {
+      margin-left: -#{$i}px !important;
+      margin-right: -#{$i}px !important;
+    }
+
+    @if ($responsive == true) {
+      @include generateResponsive() {
+        .m-#{$i}\@#{$breakpointAlias}  { margin: #{$i}px !important; }
+        .mT-#{$i}\@#{$breakpointAlias} { margin-top: #{$i}px !important; }
+        .mR-#{$i}\@#{$breakpointAlias} { margin-right: #{$i}px !important; }
+        .mB-#{$i}\@#{$breakpointAlias} { margin-bottom: #{$i}px !important; }
+        .mL-#{$i}\@#{$breakpointAlias} { margin-left: #{$i}px !important; }
+
+        .mY-#{$i}\@#{$breakpointAlias} {
+          margin-top: #{$i}px !important;
+          margin-bottom: #{$i}px !important;
+        }
+
+        .mX-#{$i}\@#{$breakpointAlias} {
+          margin-left: #{$i}px !important;
+          margin-right: #{$i}px !important;
+        }
+
+        .m-nv-#{$i}\@#{$breakpointAlias}  { margin: -#{$i}px !important; }
+        .mT-nv-#{$i}\@#{$breakpointAlias} { margin-top: -#{$i}px !important; }
+        .mR-nv-#{$i}\@#{$breakpointAlias} { margin-right: -#{$i}px !important; }
+        .mB-nv-#{$i}\@#{$breakpointAlias} { margin-bottom: -#{$i}px !important; }
+        .mL-nv-#{$i}\@#{$breakpointAlias} { margin-left: -#{$i}px !important; }
+
+        .mY-nv-#{$i}\@#{$breakpointAlias} {
+          margin-top: -#{$i}px !important;
+          margin-bottom: -#{$i}px !important;
+        }
+
+        .mX-nv-#{$i}\@#{$breakpointAlias} {
+          margin-left: -#{$i}px !important;
+          margin-right: -#{$i}px !important;
+        }
+      }
+    }
+  }
+}
+
+// ---------------------------------------------------------
+// @Padding (40 > 160 Step 10)
+// ---------------------------------------------------------
+
+@for $i from 40 through 160 {
+  @if $i % 10 == 0 {
+
+    .m-#{$i}  { margin: #{$i}px !important; }
+    .mT-#{$i} { margin-top: #{$i}px !important; }
+    .mR-#{$i} { margin-right: #{$i}px !important; }
+    .mB-#{$i} { margin-bottom: #{$i}px !important; }
+    .mL-#{$i} { margin-left: #{$i}px !important; }
+
+    .mY-#{$i} {
+      margin-top: #{$i}px !important;
+      margin-bottom: #{$i}px !important;
+    }
+
+    .mX-#{$i} {
+      margin-left: #{$i}px !important;
+      margin-right: #{$i}px !important;
+    }
+
+    .m-nv-#{$i}  { margin: -#{$i}px !important; }
+    .mT-nv-#{$i} { margin-top: -#{$i}px !important; }
+    .mR-nv-#{$i} { margin-right: -#{$i}px !important; }
+    .mB-nv-#{$i} { margin-bottom: -#{$i}px !important; }
+    .mL-nv-#{$i} { margin-left: -#{$i}px !important; }
+
+    .mY-nv-#{$i} {
+      margin-top: -#{$i}px !important;
+      margin-bottom: -#{$i}px !important;
+    }
+
+    .mX-nv-#{$i} {
+      margin-left: -#{$i}px !important;
+      margin-right: -#{$i}px !important;
+    }
+
+    @if ($responsive == true) {
+      @include generateResponsive() {
+        .m-#{$i}\@#{$breakpointAlias}  { margin: #{$i}px !important; }
+        .mT-#{$i}\@#{$breakpointAlias} { margin-top: #{$i}px !important; }
+        .mR-#{$i}\@#{$breakpointAlias} { margin-right: #{$i}px !important; }
+        .mB-#{$i}\@#{$breakpointAlias} { margin-bottom: #{$i}px !important; }
+        .mL-#{$i}\@#{$breakpointAlias} { margin-left: #{$i}px !important; }
+
+        .mY-#{$i}\@#{$breakpointAlias} {
+          margin-top: #{$i}px !important;
+          margin-bottom: #{$i}px !important;
+        }
+
+        .mX-#{$i}\@#{$breakpointAlias} {
+          margin-left: #{$i}px !important;
+          margin-right: #{$i}px !important;
+        }
+
+        .m-nv-#{$i}\@#{$breakpointAlias}  { margin: -#{$i}px !important; }
+        .mT-nv-#{$i}\@#{$breakpointAlias} { margin-top: -#{$i}px !important; }
+        .mR-nv-#{$i}\@#{$breakpointAlias} { margin-right: -#{$i}px !important; }
+        .mB-nv-#{$i}\@#{$breakpointAlias} { margin-bottom: -#{$i}px !important; }
+        .mL-nv-#{$i}\@#{$breakpointAlias} { margin-left: -#{$i}px !important; }
+
+        .mY-nv-#{$i}\@#{$breakpointAlias} {
+          margin-top: -#{$i}px !important;
+          margin-bottom: -#{$i}px !important;
+        }
+
+        .mX-nv-#{$i}\@#{$breakpointAlias} {
+          margin-left: -#{$i}px !important;
+          margin-right: -#{$i}px !important;
+        }
+      }
+    }
+  }
+}
+
+// ---------------------------------------------------------
+// @Padding Auto
+// ---------------------------------------------------------
+
+.m-a  { margin: auto !important; }
+.mX-a { margin-left: auto !important; margin-right: auto !important; }
+.mT-a { margin-top: auto !important; }
+.mR-a { margin-right: auto !important; }
+.mB-a { margin-bottom: auto !important; }
+.mL-a { margin-left: auto !important; }
+
+@if ($responsive == true) {
+  @include generateResponsive() {
+    .m-a\@#{$breakpointAlias}  { margin: auto !important; }
+    .mX-a\@#{$breakpointAlias} { margin-left: auto !important; margin-right: auto !important; }
+    .mT-a\@#{$breakpointAlias} { margin-top: auto !important; }
+    .mR-a\@#{$breakpointAlias} { margin-right: auto !important; }
+    .mB-a\@#{$breakpointAlias} { margin-bottom: auto !important; }
+    .mL-a\@#{$breakpointAlias} { margin-left: auto !important; }
+  }
+}

src/assets/styles/spec/utils/layout/helpers/objects.scss

@@ -0,0 +1,91 @@
+// ---------------------------------------------------------
+// @TOC
+// ---------------------------------------------------------
+
+// + @Background Size
+// + @Background Position
+// + @Background Repeat
+// + @Object Fit
+// + @Resize
+// + @Opacity
+// + @Cursor
+// + @Visibility
+
+// ---------------------------------------------------------
+// @Background Size
+// ---------------------------------------------------------
+
+.bgsz-cv   { background-size: cover; }
+.bgsz-ct   { background-size: contain; }
+.bgsz-full { background-size: 100% 100%; }
+
+// ---------------------------------------------------------
+// @Background Position
+// ---------------------------------------------------------
+
+.bgpX-c    { background-position-x: center; }
+.bgpX-t    { background-position-x: top; }
+.bgpX-r    { background-position-x: right; }
+.bgpX-l    { background-position-x: left; }
+.bgpX-b    { background-position-x: bottom; }
+.bgpY-c    { background-position-y: center; }
+.bgpY-t    { background-position-y: top; }
+.bgpY-r    { background-position-y: right; }
+.bgpY-l    { background-position-y: left; }
+.bgpY-b    { background-position-y: bottom; }
+
+// ---------------------------------------------------------
+// @Background Repeat
+// ---------------------------------------------------------
+
+.bgr-n     { background-repeat: no-repeat; }
+.bgr-y     { background-repeat: repeat-y; }
+.bgr-x     { background-repeat: repeat-x; }
+
+// ---------------------------------------------------------
+// @Object Fit
+// ---------------------------------------------------------
+
+.of-ct     { object-fit: contain; }
+.of-cv     { object-fit: cover; }
+.of-f      { object-fit: fill; }
+.of-n      { object-fit: none; }
+.of-sd     { object-fit: scale-down; }
+
+// ---------------------------------------------------------
+// @Resize
+// ---------------------------------------------------------
+
+.rsz-v     { resize: vertical; }
+.rsz-h     { resize: horizontal; }
+
+// ---------------------------------------------------------
+// @Opacity
+// ---------------------------------------------------------
+
+.op-0      { opacity: 0; }
+.op-10p    { opacity: 0.1; }
+.op-20p    { opacity: 0.2; }
+.op-30p    { opacity: 0.3; }
+.op-40p    { opacity: 0.4; }
+.op-50p    { opacity: 0.5; }
+.op-60p    { opacity: 0.6; }
+.op-70p    { opacity: 0.7; }
+.op-80p    { opacity: 0.8; }
+.op-90p    { opacity: 0.9; }
+.op-100p   { opacity: 1; }
+
+// ---------------------------------------------------------
+// @Cursor
+// ---------------------------------------------------------
+
+.cur-na    { cursor: not-allowed; }
+.cur-p     { cursor: pointer; }
+.cur-a     { cursor: auto; }
+
+// ---------------------------------------------------------
+// @Visibility
+// ---------------------------------------------------------
+
+.vis-v     { visibility: visible; }
+.vis-h     { visibility: hidden; }

src/assets/styles/spec/utils/layout/helpers/padding.scss

@@ -0,0 +1,145 @@
+// ---------------------------------------------------------
+// @TOC
+// ---------------------------------------------------------
+
+// + @Variables
+// + @Padding (0 > 4 Step 1)
+// + @Padding (5 > 35 Step 5)
+// + @Padding (40 > 160 Step 10)
+// + @Padding Auto
+
+// ---------------------------------------------------------
+// @Variables
+// ---------------------------------------------------------
+
+$responsive: true;
+
+// ---------------------------------------------------------
+// @Padding (0 > 4 Step 1)
+// ---------------------------------------------------------
+
+@for $i from 0 through 4 {
+  .p-#{$i}  { padding: #{$i}px !important; }
+  .pT-#{$i} { padding-top: #{$i}px !important; }
+  .pR-#{$i} { padding-right: #{$i}px !important; }
+  .pB-#{$i} { padding-bottom: #{$i}px !important; }
+  .pL-#{$i} { padding-left: #{$i}px !important; }
+
+  .pY-#{$i} {
+    padding-top: #{$i}px !important;
+    padding-bottom: #{$i}px !important;
+  }
+
+  .pX-#{$i} {
+    padding-left: #{$i}px !important;
+    padding-right: #{$i}px !important;
+  }
+
+  @if ($responsive == true) {
+    @include generateResponsive() {
+      .p-#{$i}\@#{$breakpointAlias}  { padding: #{$i}px !important; }
+      .pT-#{$i}\@#{$breakpointAlias} { padding-top: #{$i}px !important; }
+      .pR-#{$i}\@#{$breakpointAlias} { padding-right: #{$i}px !important; }
+      .pB-#{$i}\@#{$breakpointAlias} { padding-bottom: #{$i}px !important; }
+      .pL-#{$i}\@#{$breakpointAlias} { padding-left: #{$i}px !important; }
+
+      .pY-#{$i}\@#{$breakpointAlias} {
+        padding-top: #{$i}px !important;
+        padding-bottom: #{$i}px !important;
+      }
+
+      .pX-#{$i}\@#{$breakpointAlias} {
+        padding-left: #{$i}px !important;
+        padding-right: #{$i}px !important;
+      }
+    }
+  }
+}
+
+// ---------------------------------------------------------
+// @Padding (5 > 35 Step 5)
+// ---------------------------------------------------------
+
+@for $i from 5 through 35 {
+  @if $i % 5 == 0 {
+    .p-#{$i}  { padding: #{$i}px !important; }
+    .pT-#{$i} { padding-top: #{$i}px !important; }
+    .pR-#{$i} { padding-right: #{$i}px !important; }
+    .pB-#{$i} { padding-bottom: #{$i}px !important; }
+    .pL-#{$i} { padding-left: #{$i}px !important; }
+
+    .pY-#{$i} {
+      padding-top: #{$i}px !important;
+      padding-bottom: #{$i}px !important;
+    }
+
+    .pX-#{$i} {
+      padding-left: #{$i}px !important;
+      padding-right: #{$i}px !important;
+    }
+
+    @if ($responsive == true) {
+      @include generateResponsive() {
+        .p-#{$i}\@#{$breakpointAlias}  { padding: #{$i}px !important; }
+        .pT-#{$i}\@#{$breakpointAlias} { padding-top: #{$i}px !important; }
+        .pR-#{$i}\@#{$breakpointAlias} { padding-right: #{$i}px !important; }
+        .pB-#{$i}\@#{$breakpointAlias} { padding-bottom: #{$i}px !important; }
+        .pL-#{$i}\@#{$breakpointAlias} { padding-left: #{$i}px !important; }
+
+        .pY-#{$i}\@#{$breakpointAlias} {
+          padding-top: #{$i}px !important;
+          padding-bottom: #{$i}px !important;
+        }
+
+        .pX-#{$i}\@#{$breakpointAlias} {
+          padding-left: #{$i}px !important;
+          padding-right: #{$i}px !important;
+        }
+      }
+    }
+  }
+}
+
+// ---------------------------------------------------------
+// @Padding (40 > 160 Step 10)
+// ---------------------------------------------------------
+
+@for $i from 40 through 160 {
+  @if $i % 10 == 0 {
+    .p-#{$i}  { padding: #{$i}px !important; }
+    .pT-#{$i} { padding-top: #{$i}px !important; }
+    .pR-#{$i} { padding-right: #{$i}px !important; }
+    .pB-#{$i} { padding-bottom: #{$i}px !important; }
+    .pL-#{$i} { padding-left: #{$i}px !important; }
+
+    .pY-#{$i} {
+      padding-top: #{$i}px !important;
+      padding-bottom: #{$i}px !important;
+    }
+
+    .pX-#{$i} {
+      padding-left: #{$i}px !important;
+      padding-right: #{$i}px !important;
+    }
+
+    @if ($responsive == true) {
+      @include generateResponsive() {
+        .p-#{$i}\@#{$breakpointAlias}  { padding: #{$i}px !important; }
+        .pT-#{$i}\@#{$breakpointAlias} { padding-top: #{$i}px !important; }
+        .pR-#{$i}\@#{$breakpointAlias} { padding-right: #{$i}px !important; }
+        .pB-#{$i}\@#{$breakpointAlias} { padding-bottom: #{$i}px !important; }
+        .pL-#{$i}\@#{$breakpointAlias} { padding-left: #{$i}px !important; }
+
+        .pY-#{$i}\@#{$breakpointAlias} {
+          padding-top: #{$i}px !important;
+          padding-bottom: #{$i}px !important;
+        }
+
+        .pX-#{$i}\@#{$breakpointAlias} {
+          padding-left: #{$i}px !important;
+          padding-right: #{$i}px !important;
+        }
+      }
+    }
+  }
+}

src/assets/styles/spec/utils/layout/helpers/positions.scss

@@ -0,0 +1,116 @@
+// ---------------------------------------------------------
+// @TOC
+// ---------------------------------------------------------
+
+// + @Variables
+// + @Position (0 > 4 Step 1)
+// + @Position (5 > 35 Step 5)
+// + @Position (40 > 160 Step 10)
+
+// ---------------------------------------------------------
+// @Variables
+// ---------------------------------------------------------
+
+$responsive: true;
+
+// ---------------------------------------------------------
+// @Position (0 > 4 Step 1)
+// ---------------------------------------------------------
+
+@for $i from 0 through 4 {
+  .t-#{$i} { top: #{$i}px; }
+  .r-#{$i} { right: #{$i}px; }
+  .b-#{$i} { bottom: #{$i}px; }
+  .l-#{$i} { left: #{$i}px; }
+
+  @if ($responsive == true) {
+    @include generateResponsive() {
+      .t-#{$i}\@#{$breakpointAlias} { top: #{$i}px; }
+      .r-#{$i}\@#{$breakpointAlias} { right: #{$i}px; }
+      .b-#{$i}\@#{$breakpointAlias} { bottom: #{$i}px; }
+      .l-#{$i}\@#{$breakpointAlias} { left: #{$i}px; }
+    }
+  }
+}
+
+// ---------------------------------------------------------
+// @Position (5 > 35 Step 5)
+// ---------------------------------------------------------
+
+@for $i from 5 through 35 {
+  @if $i % 5 == 0 {
+    .t-#{$i} { top: #{$i}px; }
+    .r-#{$i} { right: #{$i}px; }
+    .b-#{$i} { bottom: #{$i}px; }
+    .l-#{$i} { left: #{$i}px; }
+
+    @if ($responsive == true) {
+      @include generateResponsive() {
+        .t-#{$i}\@#{$breakpointAlias} { top: #{$i}px; }
+        .r-#{$i}\@#{$breakpointAlias} { right: #{$i}px; }
+        .b-#{$i}\@#{$breakpointAlias} { bottom: #{$i}px; }
+        .l-#{$i}\@#{$breakpointAlias} { left: #{$i}px; }
+      }
+    }
+  }
+}
+
+// ---------------------------------------------------------
+// @Position (40 > 160 Step 10)
+// ---------------------------------------------------------
+
+@for $i from 40 through 160 {
+  @if $i % 10 == 0 {
+    .t-#{$i} { top: #{$i}px; }
+    .r-#{$i} { right: #{$i}px; }
+    .b-#{$i} { bottom: #{$i}px; }
+    .l-#{$i} { left: #{$i}px; }
+
+    @if ($responsive == true) {
+      @include generateResponsive() {
+        .t-#{$i}\@#{$breakpointAlias} { top: #{$i}px; }
+        .r-#{$i}\@#{$breakpointAlias} { right: #{$i}px; }
+        .b-#{$i}\@#{$breakpointAlias} { bottom: #{$i}px; }
+        .l-#{$i}\@#{$breakpointAlias} { left: #{$i}px; }
+      }
+    }
+  }
+}
+
+// ---------------------------------------------------------
+// @Position (50%)
+// ---------------------------------------------------------
+
+.tl-50p {
+  top: 50%;
+  left: 50%;
+}
+
+.tr-50p {
+  top: 50%;
+  right: 50%;
+}
+
+.t-50p { top: 50%; }
+.r-50p { right: 50%; }
+.b-50p { bottom: 50%; }
+.l-50p { left: 50%; }
+
+@if ($responsive == true) {
+  @include generateResponsive() {
+    .tl-50p\@#{$breakpointAlias} {
+      top: 50%;
+      left: 50%;
+    }
+
+    .tr-50p\@#{$breakpointAlias} {
+      top: 50%;
+      right: 50%;
+    }
+
+    .t-50p\@#{$breakpointAlias} { top: 50%; }
+    .r-50p\@#{$breakpointAlias} { right: 50%; }
+    .b-50p\@#{$breakpointAlias} { bottom: 50%; }
+    .l-50p\@#{$breakpointAlias} { left: 50%; }
+  }
+}

src/assets/styles/spec/utils/layout/helpers/pseudo.scss

@@ -0,0 +1,6 @@
+// ---------------------------------------------------------
+// @Pseudo Elements
+// ---------------------------------------------------------
+
+.no-after::after   { display: none !important; }
+.no-before::before { display: none !important; }

src/assets/styles/spec/utils/layout/helpers/sizes.scss

@@ -0,0 +1,155 @@
+// ---------------------------------------------------------
+// @TOC
+// ---------------------------------------------------------
+
+// + @Variables
+// + @Fixed Width
+// + @Relative Width
+// + @Fixed Height
+// + @Max Size
+
+// ---------------------------------------------------------
+// @Variables
+// ---------------------------------------------------------
+
+$responsive: true;
+
+// ---------------------------------------------------------
+// @Fixed Width
+// ---------------------------------------------------------
+
+.w-1\/4r, .sz-1\/4r    { width: 0.25rem; }
+.w-1\/2r, .sz-1\/2r    { width: 0.5rem; }
+.w-3\/4r, .sz-3\/4r    { width: 0.75rem; }
+.w-1r, .sz-1r          { width: 1rem; }
+.w-3\/2r, .sz-3\/2r    { width: 1.5rem; }
+.w-2r, .sz-2r          { width: 2rem; }
+.w-5\/2r, .sz-5\/2r    { width: 2.5rem; }
+.w-3r, .sz-3r          { width: 3rem; }
+.w-7\/2r, .sz-7\/2r    { width: 3.5rem; }
+.w-4r, .sz-4r          { width: 4rem; }
+.w-9\/2r, .sz-9\/2r    { width: 4.5rem; }
+.w-5r, .sz-5r          { width: 5rem; }
+.w-11\/2r, .sz-11\/2r  { width: 5.5rem; }
+.w-6r, .sz-6r          { width: 6rem; }
+
+@if ($responsive == true) {
+  @include generateResponsive() {
+    .w-1\/4r\@#{$breakpointAlias}, .sz-1\/4r\@#{$breakpointAlias}    { width: 0.25rem; }
+    .w-1\/2r\@#{$breakpointAlias}, .sz-1\/2r\@#{$breakpointAlias}    { width: 0.5rem; }
+    .w-3\/4r\@#{$breakpointAlias}, .sz-3\/4r\@#{$breakpointAlias}    { width: 0.75rem; }
+    .w-1r\@#{$breakpointAlias}, .sz-1r\@#{$breakpointAlias}          { width: 1rem; }
+    .w-3\/2r\@#{$breakpointAlias}, .sz-3\/2r\@#{$breakpointAlias}    { width: 1.5rem; }
+    .w-2r\@#{$breakpointAlias}, .sz-2r\@#{$breakpointAlias}          { width: 2rem; }
+    .w-5\/2r\@#{$breakpointAlias}, .sz-5\/2r\@#{$breakpointAlias}    { width: 2.5rem; }
+    .w-3r\@#{$breakpointAlias}, .sz-3r\@#{$breakpointAlias}          { width: 3rem; }
+    .w-7\/2r\@#{$breakpointAlias}, .sz-7\/2r\@#{$breakpointAlias}    { width: 3.5rem; }
+    .w-4r\@#{$breakpointAlias}, .sz-4r\@#{$breakpointAlias}          { width: 4rem; }
+    .w-9\/2r\@#{$breakpointAlias}, .sz-9\/2r\@#{$breakpointAlias}    { width: 4.5rem; }
+    .w-5r\@#{$breakpointAlias}, .sz-5r\@#{$breakpointAlias}          { width: 5rem; }
+    .w-11\/2r\@#{$breakpointAlias}, .sz-11\/2r\@#{$breakpointAlias}  { width: 5.5rem; }
+    .w-6r\@#{$breakpointAlias}, .sz-6r\@#{$breakpointAlias}          { width: 6rem; }
+  }
+}
+
+// ---------------------------------------------------------
+// @Relative Width
+// ---------------------------------------------------------
+
+.w-0     { width: 0px; }
+.w-10p   { width: 10%; }
+.w-20p   { width: 20%; }
+.w-30p   { width: 30%; }
+.w-40p   { width: 40%; }
+.w-50p   { width: 50%; }
+.w-60p   { width: 60%; }
+.w-70p   { width: 70%; }
+.w-80p   { width: 80%; }
+.w-90p   { width: 90%; }
+.w-100p  { width: 100%; }
+.w-1px   { width: 1px; }
+.w-a     { width: auto; }
+
+@if ($responsive == true) {
+  @include generateResponsive() {
+    .w-0\@#{$breakpointAlias}     { width: 0px; }
+    .w-10p\@#{$breakpointAlias}   { width: 10%; }
+    .w-20p\@#{$breakpointAlias}   { width: 20%; }
+    .w-30p\@#{$breakpointAlias}   { width: 30%; }
+    .w-40p\@#{$breakpointAlias}   { width: 40%; }
+    .w-50p\@#{$breakpointAlias}   { width: 50%; }
+    .w-60p\@#{$breakpointAlias}   { width: 60%; }
+    .w-70p\@#{$breakpointAlias}   { width: 70%; }
+    .w-80p\@#{$breakpointAlias}   { width: 80%; }
+    .w-90p\@#{$breakpointAlias}   { width: 90%; }
+    .w-100p\@#{$breakpointAlias}  { width: 100%; }
+    .w-1px\@#{$breakpointAlias}   { width: 1px; }
+    .w-a\@#{$breakpointAlias}     { width: auto; }
+  }
+}
+
+// ---------------------------------------------------------
+// @Fixed Height
+// ---------------------------------------------------------
+
+.h-1\/4r, .sz-1\/4r    { height: 0.25rem; }
+.h-1\/2r, .sz-1\/2r    { height: 0.5rem; }
+.h-3\/4r, .sz-3\/4r    { height: 0.75rem; }
+.h-1r, .sz-1r          { height: 1rem; }
+.h-3\/2r, .sz-3\/2r    { height: 1.5rem; }
+.h-2r, .sz-2r          { height: 2rem; }
+.h-5\/2r, .sz-5\/2r    { height: 2.5rem; }
+.h-3r, .sz-3r          { height: 3rem; }
+.h-7\/2r, .sz-7\/2r    { height: 3.5rem; }
+.h-4r, .sz-4r          { height: 4rem; }
+.h-9\/2r, .sz-9\/2r    { height: 4.5rem; }
+.h-5r, .sz-5r          { height: 5rem; }
+.h-11\/2r, .sz-11\/2r  { height: 5.5rem; }
+.h-6r, .sz-6r          { height: 6rem; }
+
+@if ($responsive == true) {
+  @include generateResponsive() {
+    .h-1\/4r\@#{$breakpointAlias}, .sz-1\/4r\@#{$breakpointAlias}    { height: 0.25rem; }
+    .h-1\/2r\@#{$breakpointAlias}, .sz-1\/2r\@#{$breakpointAlias}    { height: 0.5rem; }
+    .h-3\/4r\@#{$breakpointAlias}, .sz-3\/4r\@#{$breakpointAlias}    { height: 0.75rem; }
+    .h-1r\@#{$breakpointAlias}, .sz-1r\@#{$breakpointAlias}          { height: 1rem; }
+    .h-3\/2r\@#{$breakpointAlias}, .sz-3\/2r\@#{$breakpointAlias}    { height: 1.5rem; }
+    .h-2r\@#{$breakpointAlias}, .sz-2r\@#{$breakpointAlias}          { height: 2rem; }
+    .h-5\/2r\@#{$breakpointAlias}, .sz-5\/2r\@#{$breakpointAlias}    { height: 2.5rem; }
+    .h-3r\@#{$breakpointAlias}, .sz-3r\@#{$breakpointAlias}          { height: 3rem; }
+    .h-7\/2r\@#{$breakpointAlias}, .sz-7\/2r\@#{$breakpointAlias}    { height: 3.5rem; }
+    .h-4r\@#{$breakpointAlias}, .sz-4r\@#{$breakpointAlias}          { height: 4rem; }
+    .h-9\/2r\@#{$breakpointAlias}, .sz-9\/2r\@#{$breakpointAlias}    { height: 4.5rem; }
+    .h-5r\@#{$breakpointAlias}, .sz-5r\@#{$breakpointAlias}          { height: 5rem; }
+    .h-11\/2r\@#{$breakpointAlias}, .sz-11\/2r\@#{$breakpointAlias}  { height: 5.5rem; }
+    .h-6r\@#{$breakpointAlias}, .sz-6r\@#{$breakpointAlias}          { height: 6rem; }
+  }
+}
+
+.h-0     { height: 0; }
+.h-auto  { height: auto; }
+.h-100p  { height: 100%; }
+.h-100vh { height: 100vh; }
+
+@if ($responsive == true) {
+  @include generateResponsive() {
+    .h-0\@#{$breakpointAlias}     { height: 0; }
+    .h-auto\@#{$breakpointAlias}  { height: auto; }
+    .h-100p\@#{$breakpointAlias}  { height: 100%; }
+    .h-100vh\@#{$breakpointAlias} { height: 100vh; }
+  }
+}
+
+// ---------------------------------------------------------
+// @Max Size
+// ---------------------------------------------------------
+
+.mw-100p { max-width: 100%; }
+.mh-100p { max-height: 100%; }
+
+@if ($responsive == true) {
+  @include generateResponsive() {
+    .mw-100p\@#{$breakpointAlias} { max-width: 100%; }
+    .mh-100p\@#{$breakpointAlias} { max-height: 100%; }
+  }
+}

src/assets/styles/spec/utils/layout/helpers/typography.scss

@@ -0,0 +1,126 @@
+
+// ---------------------------------------------------------
+// @TOC
+// ---------------------------------------------------------
+
+// + @Variables
+// + @Text Align
+// + @Text Transform
+// + @Font Style
+// + @Text Decoration
+// + @White Space
+// + @Word Break
+// + @Word Wrap
+// + @Text Overflow
+// + @Font Size
+// + @Font Weight
+// + @Line Height
+
+// ---------------------------------------------------------
+// @Variables
+// ---------------------------------------------------------
+
+$responsive: true;
+
+// ---------------------------------------------------------
+// @Text Align
+// ---------------------------------------------------------
+
+.ta-c { text-align: center !important; }
+.ta-l { text-align: left !important; }
+.ta-r { text-align: right !important; }
+
+@if ($responsive == true) {
+  @include generateResponsive() {
+    .ta-c\@#{$breakpointAlias} { text-align: center !important; }
+    .ta-l\@#{$breakpointAlias} { text-align: left !important; }
+    .ta-r\@#{$breakpointAlias} { text-align: right !important; }
+  }
+}
+
+// ---------------------------------------------------------
+// @Text Transform
+// ---------------------------------------------------------
+
+.tt-n { text-transform: none !important; }
+.tt-u { text-transform: uppercase !important; }
+.tt-l { text-transform: lowercase !important; }
+.tt-c { text-transform: capitalize !important; }
+
+// ---------------------------------------------------------
+// @Font Style
+// ---------------------------------------------------------
+
+.fs-i { font-style: italic !important; }
+.fs-o { font-style: oblique !important; }
+
+// ---------------------------------------------------------
+// @Text Decoration
+// ---------------------------------------------------------
+
+.td-n { text-decoration: none !important; }
+.td-o { text-decoration: overline !important; }
+.td-lt { text-decoration: line-through !important; }
+.td-u { text-decoration: underline !important; }
+
+// ---------------------------------------------------------
+// @White Space
+// ---------------------------------------------------------
+
+.whs-nw { white-space: nowrap !important; }
+.whs-p { white-space: pre !important; }
+.whs-n { white-space: normal !important; }
+
+// ---------------------------------------------------------
+// @Word Break
+// ---------------------------------------------------------
+
+.wob-n { word-break: normal !important; }
+.wob-ba { word-break: break-all !important; }
+.wob-k { word-break: keep-all !important; }
+
+// ---------------------------------------------------------
+// @Word Wrap
+// ---------------------------------------------------------
+
+.wow-bw { word-wrap: break-word !important; }
+.wow-n { word-wrap: normal !important; }
+
+// ---------------------------------------------------------
+// @Text Overflow
+// ---------------------------------------------------------
+
+.tov-e { text-overflow: ellipsis !important; }
+
+// ---------------------------------------------------------
+// @Font Size
+// ---------------------------------------------------------
+
+.fsz-xs   { font-size: 0.75rem !important; }
+.fsz-sm   { font-size: 0.87rem !important; }
+.fsz-def  { font-size: 1rem !important; }
+.fsz-md   { font-size: 1.15rem !important; }
+.fsz-lg   { font-size: 1.4rem !important; }
+.fsz-xl   { font-size: 1.7rem !important; }
+
+// ---------------------------------------------------------
+// @Font Weight
+// ---------------------------------------------------------
+
+.fw-100 { font-weight: 100 !important; }
+.fw-200 { font-weight: 200 !important; }
+.fw-300 { font-weight: 300 !important; }
+.fw-400 { font-weight: 400 !important; }
+.fw-500 { font-weight: 500 !important; }
+.fw-600 { font-weight: 600 !important; }
+.fw-700 { font-weight: 700 !important; }
+.fw-800 { font-weight: 800 !important; }
+.fw-900 { font-weight: 900 !important; }
+
+// ---------------------------------------------------------
+// @Line Height
+// ---------------------------------------------------------
+
+.lh-0    { line-height: 0 !important; }
+.lh-1    { line-height: 1 !important; }
+.lh-3\/2 { line-height: 1.5 !important; }

src/assets/styles/spec/utils/layout/index.scss

@@ -0,0 +1,3 @@
+@import 'mixins/index';
+@import 'utils/index';
+@import 'helpers/index';

src/assets/styles/spec/utils/layout/mixins/generateResponsive.scss

@@ -0,0 +1,19 @@
+// ---------------------------------------------------------
+// @Responsive Suffix Generator
+// ---------------------------------------------------------
+
+// Mixin used to generate responsive suffixes for classes (i.e. m-10@sm+).
+
+
+@mixin generateResponsive() {
+  @each $breakpoint in $breakpoints {
+    $breakpointAlias     : nth($breakpoint, 1) !global;
+    $breakpointCondition : nth($breakpoint, 2);
+
+    @include mediaQueryCondition($breakpointAlias) {
+      @content;
+    }
+
+    $breakpointAlias: null !global;
+  }
+}

src/assets/styles/spec/utils/layout/mixins/index.scss

@@ -0,0 +1,2 @@
+@import 'mediaQueryCondition';
+@import 'generateResponsive';

src/assets/styles/spec/utils/layout/mixins/mediaQueryCondition.scss

@@ -0,0 +1,26 @@
+// ---------------------------------------------------------
+// @Media Queries Generator
+// ---------------------------------------------------------
+
+// Mixin used to generate responsive versions of css rules.
+
+@mixin mediaQueryCondition($mq) {
+  $breakpointFound: false;
+
+  @each $breakpoint in $breakpoints {
+    $alias: nth($breakpoint, 1);
+    $condition: nth($breakpoint, 2);
+
+    @if $mq == $alias and $condition {
+      $breakpointFound: true;
+
+      @media #{$condition} {
+        @content;
+      }
+    }
+  }
+
+  @if $breakpointFound == false {
+    @warn "Oops! Breakpoint ‘#{$mq}’ does not exist \:";
+  }
+}