Add argon template and authentication through the apollo client

README.md

@@ -0,0 +1,24 @@
+# socrates_app
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

apollo.config.js

@@ -0,0 +1,23 @@
+const path = require('path')
+
+// Load .env files
+const { loadEnv } = require('vue-cli-plugin-apollo/utils/load-env')
+const env = loadEnv([
+  path.resolve(__dirname, '.env'),
+  path.resolve(__dirname, '.env.local')
+])
+
+module.exports = {
+  client: {
+    service: env.VUE_APP_APOLLO_ENGINE_SERVICE,
+    includes: ['src/**/*.{js,jsx,ts,tsx,vue,gql}']
+  },
+  service: {
+    name: env.VUE_APP_APOLLO_ENGINE_SERVICE,
+    localSchemaFile: path.resolve(__dirname, './node_modules/.temp/graphql/schema.json')
+  },
+  engine: {
+    endpoint: process.env.APOLLO_ENGINE_API_ENDPOINT,
+    apiKey: env.VUE_APP_APOLLO_ENGINE_KEY
+  }
+}

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

dist_electron/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "diepo",
+  "version": "0.0.1",
+  "private": true,
+  "description": "Diepo is the front-end for desktop interfacing with Amaxa",
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "electron:build": "vue-cli-service electron:build",
+    "electron:serve": "vue-cli-service electron:serve",
+    "postinstall": "electron-builder install-app-deps",
+    "postuninstall": "electron-builder install-app-deps"
+  },
+  "main": "main.js",
+  "dependencies": {
+    "axios": "^0.19.2",
+    "bootstrap": "4.3.1",
+    "bootstrap-vue": "^2.12.0",
+    "chart.js": "^2.9.3",
+    "core-js": "^3.6.4",
+    "dotenv": "^8.2.0",
+    "nouislider": "^14.2.0",
+    "register-service-worker": "^1.7.1",
+    "vue": "^2.6.11",
+    "vue-apollo": "^3.0.0-beta.11",
+    "vue-chartjs": "^3.5.0",
+    "vue-clipboard2": "^0.3.1",
+    "vue-router": "^3.1.6",
+    "vue2-transitions": "^0.3.0",
+    "vuex": "^3.3.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.3.0",
+    "@vue/cli-plugin-eslint": "~4.3.0",
+    "@vue/cli-service": "~4.3.0",
+    "babel-eslint": "^10.1.0",
+    "electron": "^6.0.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "graphql-tag": "^2.9.0",
+    "node-sass": "^4.14.0",
+    "sass-loader": "^8.0.2",
+    "vue-cli-plugin-apollo": "~0.21.3",
+    "vue-cli-plugin-electron-builder": "~1.4.6",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {
+      "vue/no-unused-components": "off",
+      "vue/no-unused-vars": "off",
+      "no-unused-vars": "off"
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

package.json

@@ -0,0 +1,70 @@
+{
+  "name": "diepo",
+  "version": "0.0.1",
+  "private": true,
+  "description": "Diepo is the front-end for desktop interfacing with Amaxa",
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "electron:build": "vue-cli-service electron:build",
+    "electron:serve": "vue-cli-service electron:serve",
+    "postinstall": "electron-builder install-app-deps",
+    "postuninstall": "electron-builder install-app-deps"
+  },
+  "main": "main.js",
+  "dependencies": {
+    "axios": "^0.19.2",
+    "bootstrap": "4.3.1",
+    "bootstrap-vue": "^2.12.0",
+    "chart.js": "^2.9.3",
+    "core-js": "^3.6.4",
+    "nouislider": "^14.2.0",
+    "register-service-worker": "^1.7.1",
+    "vue": "^2.6.11",
+    "vue-apollo": "^3.0.0-beta.11",
+    "vue-chartjs": "^3.5.0",
+    "vue-clipboard2": "^0.3.1",
+    "vue-router": "^3.1.6",
+    "vue2-transitions": "^0.3.0",
+    "vuex": "^3.3.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.3.0",
+    "@vue/cli-plugin-eslint": "~4.3.0",
+    "@vue/cli-service": "~4.3.0",
+    "babel-eslint": "^10.1.0",
+    "electron": "^6.0.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "graphql-tag": "^2.9.0",
+    "node-sass": "^4.14.0",
+    "sass-loader": "^8.0.2",
+    "vue-cli-plugin-apollo": "~0.21.3",
+    "vue-cli-plugin-electron-builder": "~1.4.6",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {
+      "vue/no-unused-components": "off",
+      "vue/no-unused-vars": "off",
+      "no-unused-vars": "off"
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

src/App.vue

@@ -0,0 +1,6 @@
+<template>
+  <div id="app">
+    <notifications></notifications>
+    <router-view/>
+  </div>
+</template>

src/assets/scss/argon.scss

@@ -0,0 +1,72 @@
+/*!
+
+=========================================================
+* Vue Argon Dashboard - v1.0.0
+=========================================================
+
+* Product Page: https://www.creative-tim.com/product/argon-dashboard
+* Copyright 2019 Creative Tim (https://www.creative-tim.com)
+* Licensed under MIT (https://github.com/creativetimofficial/argon-dashboard/blob/master/LICENSE.md)
+
+* Coded by Creative Tim
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+*/
+
+// Core
+
+@import "custom/functions";
+@import "custom/variables";
+@import "custom/mixins";
+
+// Bootstrap (4.1.3) components
+
+@import "~bootstrap/scss/root";
+@import "~bootstrap/scss/reboot";
+@import "~bootstrap/scss/type";
+@import "~bootstrap/scss/images";
+@import "~bootstrap/scss/code";
+@import "~bootstrap/scss/grid";
+@import "~bootstrap/scss/tables";
+@import "~bootstrap/scss/forms";
+@import "~bootstrap/scss/buttons";
+@import "~bootstrap/scss/transitions";
+@import "~bootstrap/scss/dropdown";
+@import "~bootstrap/scss/button-group";
+@import "~bootstrap/scss/input-group";
+@import "~bootstrap/scss/custom-forms";
+@import "~bootstrap/scss/nav";
+@import "~bootstrap/scss/navbar";
+@import "~bootstrap/scss/card";
+@import "~bootstrap/scss/breadcrumb";
+@import "~bootstrap/scss/pagination";
+@import "~bootstrap/scss/badge";
+@import "~bootstrap/scss/jumbotron";
+@import "~bootstrap/scss/alert";
+@import "~bootstrap/scss/progress";
+@import "~bootstrap/scss/media";
+@import "~bootstrap/scss/list-group";
+@import "~bootstrap/scss/close";
+@import "~bootstrap/scss/modal";
+@import "~bootstrap/scss/tooltip";
+@import "~bootstrap/scss/popover";
+@import "~bootstrap/scss/carousel";
+@import "~bootstrap/scss/utilities";
+@import "~bootstrap/scss/print";
+
+// Argon utilities and components
+
+@import "custom/reboot";
+@import "custom/utilities";
+@import "custom/components";
+
+// Vendor (Plugins)
+
+@import "custom/vendors";
+
+@import "custom";
+
+

src/assets/scss/core/alerts/_alert-dismissible.scss

@@ -0,0 +1,39 @@
+//
+// Dismissible alert
+//
+
+.alert-dismissible {
+    .close {
+        top: 50%;
+        right: $alert-padding-x;
+        padding: 0;
+        transform: translateY(-50%);
+        color: rgba($white, .6);
+        opacity: 1;
+
+        &:hover,
+        &:focus {
+            color: rgba($white, .9);
+            opacity: 1 !important;
+        }
+
+        @include media-breakpoint-down(xs) {
+            top: 1rem;
+            right: .5rem;
+        }
+
+        &>span:not(.sr-only) {
+            font-size: 1.5rem;
+            background-color: transparent;
+            color: rgba($white, .6);
+        }
+
+        &:hover,
+        &:focus {
+            &>span:not(.sr-only) {
+                background-color: transparent;
+                color: rgba($white, .9);
+            }
+        }
+    }
+}

src/assets/scss/core/alerts/_alert.scss

@@ -0,0 +1,46 @@
+//
+// Alert
+//
+
+.alert {
+    font-size: $font-size-sm;
+}
+
+// Alert heading
+
+.alert-heading {
+    font-weight: $font-weight-bold;
+    font-size: $h4-font-size;
+    margin-top: .15rem;
+}
+
+
+// Alert icon
+.alert-icon {
+    font-size: 1.25rem;
+    margin-right: 1.25rem;
+    display: inline-block;
+    vertical-align: middle;
+
+    i.ni {
+        position: relative;
+        top: 1px;
+    }
+}
+
+
+// Alert text next to an alert icon
+.alert-text {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+
+// Alert links
+
+[class*="alert-"] {
+    .alert-link {
+        color: $white;
+        border-bottom: 1px dotted rgba($white, .5);
+    }
+}

src/assets/scss/core/avatars/_avatar-group.scss

@@ -0,0 +1,22 @@
+//
+// Avatar group
+//
+
+// General styles
+
+.avatar-group {
+	.avatar {
+		position: relative;
+		z-index: 2;
+		border: 2px solid $card-bg;
+
+		&:hover {
+			z-index: 3;
+		}
+	}
+
+	.avatar + .avatar {
+		margin-left: -1rem;
+
+	}
+}

src/assets/scss/core/avatars/_avatar.scss

@@ -0,0 +1,42 @@
+//
+// Avatar
+//
+
+// General styles
+
+.avatar {
+	color: $white;
+	background-color: $gray-500;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 1rem;
+	border-radius: 50%;
+	height: 48px;
+	width: 48px;
+
+    img {
+    	width: 100%;
+    	border-radius: 50%;
+    }
+
+    + .avatar-content {
+    	display: inline-block;
+    	margin-left: .75rem;
+    }
+}
+
+
+// Avatar size variations
+
+.avatar-lg {
+	width: 58px;
+	height: 58px;
+	font-size: $font-size-sm;
+}
+
+.avatar-sm {
+	width: 36px;
+	height: 36px;
+	font-size: $font-size-sm;
+}

src/assets/scss/core/badges/_badge-circle.scss

@@ -0,0 +1,17 @@
+//
+// Circle badge
+//
+
+
+// General styles
+
+.badge-circle {
+    text-align: center;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    width: 2rem;
+    height: 2rem;
+    font-size: .875rem;
+}

src/assets/scss/core/badges/_badge-dot.scss

@@ -0,0 +1,42 @@
+//
+// Dot badge
+//
+
+
+// General styles
+
+.badge-dot {
+    padding-left: 0;
+    padding-right: 0;
+    background: transparent;
+    font-weight: $font-weight-normal;
+    font-size: $font-size-sm;
+    text-transform: none;
+
+    strong {
+        color: $gray-800;
+    }
+
+    i {
+        display: inline-block;
+        vertical-align: middle;
+        width: .375rem;
+        height: .375rem;
+        border-radius: 50%;
+        margin-right: .375rem;
+    }
+
+    &.badge-md {
+        i {
+            width: .5rem;
+            height: .5rem;
+        }
+    }
+
+    &.badge-lg {
+        i {
+            width: .625rem;
+            height: .625rem;
+        }
+    }
+}

src/assets/scss/core/badges/_badge.scss

@@ -0,0 +1,55 @@
+//
+// Badge
+//
+
+
+// General styles
+
+.badge {
+    text-transform: $badge-text-transfom;
+
+    a {
+        color: $white;
+    }
+}
+
+
+// Size variations
+
+.badge-md {
+    padding: .65em 1em;
+}
+
+.badge-lg {
+    padding: .85em 1.375em;
+}
+
+
+// Multiple inline badges
+
+.badge-inline {
+    margin-right: .625rem;
+
+    + span {
+        top: 2px;
+        position: relative;
+
+        > a {
+            text-decoration: underline;
+        }
+    }
+}
+
+
+// Badge spacing inside a btn with some text
+
+.btn {
+    .badge {
+        &:not(:first-child) {
+            margin-left: .5rem;
+        }
+        &:not(:last-child) {
+            margin-right: .5rem;
+        }
+    }
+}

src/assets/scss/core/buttons/_button-brand.scss

@@ -0,0 +1,12 @@
+//
+// Brand buttons
+//
+
+
+// Color variations
+
+@each $color, $value in $brand-colors {
+    .btn-#{$color} {
+        @include button-variant($value, $value);
+    }
+}

src/assets/scss/core/buttons/_button-icon.scss

@@ -0,0 +1,92 @@
+//
+// Icon buttons
+//
+
+.btn-icon {
+    .btn-inner--icon {
+        img {
+            width: 20px;
+        }
+   }
+
+   .btn-inner--text:not(:first-child) {
+       margin-left: 0.75em;
+   }
+
+   .btn-inner--text:not(:last-child) {
+       margin-right: 0.75em;
+   }
+}
+
+
+// Button only with icon and NO text
+
+.btn-icon-only {
+    width: 2.375rem;
+    height: 2.375rem;
+    padding: 0;
+}
+
+a.btn-icon-only {
+    line-height: 2.5;
+}
+
+.btn-icon-only.btn-sm {
+    width: 2rem;
+    height: 2rem;
+}
+
+
+//
+// Clipboard button
+// dedicated element for copying icons
+//
+
+.btn-icon-clipboard {
+    margin: 0;
+    padding: 1.5rem;
+    font-size: $font-size-base;
+    font-weight: $font-weight-normal;
+    line-height: 1.25;
+    color: $gray-800;
+    background-color: $gray-100;
+    border-radius: $border-radius;
+    border: 0;
+    text-align: left;
+    font-family: inherit;
+    display: inline-block;
+    vertical-align: middle;
+    text-decoration: none;
+    -moz-appearance: none;
+    cursor: pointer;
+    width: 100%;
+    margin: .5rem 0;
+
+    &:hover {
+        background-color: $white;
+        box-shadow: rgba(0, 0, 0, .1) 0 0 0 1px, rgba(0, 0, 0, .1) 0 4px 16px;
+    }
+
+    > div {
+        align-items: center;
+        display: flex;
+    }
+
+    i {
+        box-sizing: content-box;
+        color: theme-color("primary");
+        vertical-align: middle;
+        font-size: 1.5rem;
+    }
+
+    span {
+        display: inline-block;
+        font-size: 0.875rem;
+        line-height: 1.5;
+        margin-left: 16px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        vertical-align: middle;
+    }
+}

src/assets/scss/core/buttons/_button.scss

@@ -0,0 +1,91 @@
+//
+// Icon buttons
+//
+
+// General styles
+
+.btn {
+   position: relative;
+   text-transform: $btn-text-transform;
+   transition: $transition-base;
+   letter-spacing: $btn-letter-spacing;
+   font-size: $input-btn-font-size;
+   will-change: transform;
+
+   &:hover {
+      @include box-shadow($btn-hover-box-shadow);
+      transform: translateY($btn-hover-translate-y);
+   }
+
+   &:not(:last-child) {
+      margin-right: .5rem;
+   }
+
+
+   // Icons
+
+   i:not(:first-child),
+   svg:not(:first-child) {
+      margin-left: .5rem;
+   }
+
+   i:not(:last-child),
+   svg:not(:last-child) {
+      margin-right: .5rem;
+   }
+}
+
+
+// Remove translateY and margin animation when btn is included in a btn-group or input-group
+
+.btn-group,
+.input-group {
+   .btn {
+      margin-right: 0;
+      transform: translateY(0);
+   }
+}
+
+
+// Size variations
+
+.btn-sm {
+   font-size: $input-btn-font-size-sm;
+}
+
+.btn-lg {
+   font-size: $input-btn-font-size-lg;
+}
+
+
+// Some quick fixes (to revise)
+
+// Fixes
+[class*="btn-outline-"] {
+   border-width: 1px;
+}
+
+.btn-outline-secondary {
+   color: darken(theme-color("secondary"), 50%);
+}
+
+.btn-inner--icon {
+   i:not(.fa) {
+      position: relative;
+      top: 2px;
+   }
+}
+
+.btn-link {
+   font-weight: $btn-font-weight;
+   box-shadow: none;
+
+   &:hover {
+      box-shadow: none;
+      transform: none;
+   }
+}
+
+.btn-neutral {
+   color: theme-color("primary");
+}

src/assets/scss/core/cards/_card-animations.scss

@@ -0,0 +1,10 @@
+//
+// Card with hover animations
+//
+
+.card-lift--hover {
+    &:hover {
+        transform: translateY(-20px);
+        @include transition($transition-base);
+    }
+}

src/assets/scss/core/cards/_card-blockquote.scss

@@ -0,0 +1,17 @@
+//
+// Card with blockquote
+//
+
+.card-blockquote {
+    padding: 2rem;
+    position: relative;
+
+    .svg-bg {
+        display: block;
+        width: 100%;
+        height: 95px;
+        position: absolute;
+        top: -94px;
+        left: 0;
+    }
+}

src/assets/scss/core/cards/_card-profile.scss

@@ -0,0 +1,49 @@
+//
+// Profile card
+//
+
+.card-profile-image {
+    position: relative;
+
+    img {
+        max-width: 180px;
+        border-radius: $border-radius;
+        @extend .shadow;
+        transform: translate(-50%,-30%);
+        position: absolute;
+        left: 50%;
+        transition: $transition-base;
+
+        &:hover {
+            transform: translate(-50%, -33%);
+        }
+    }
+}
+
+.card-profile-stats {
+    padding: 1rem 0;
+
+    > div {
+        text-align: center;
+        margin-right: 1rem;
+        padding: .875rem;
+
+        &:last-child {
+            margin-right: 0;
+        }
+
+        .heading {
+            font-size: 1.1rem;
+            font-weight: bold;
+            display: block;
+        }
+        .description {
+            font-size: .875rem;
+            color: $gray-500;
+        }
+    }
+}
+
+.card-profile-actions {
+    padding: .875rem;
+}

src/assets/scss/core/cards/_card-stats.scss

@@ -0,0 +1,16 @@
+//
+// Card stats
+//
+
+.card-stats {
+    .card-body {
+        padding: 1rem 1.5rem;
+    }
+
+    .card-status-bullet {
+        position: absolute;
+        top: 0;
+        right: 0;
+        transform: translate(50%, -50%);
+    }
+}

src/assets/scss/core/cards/_card.scss

@@ -0,0 +1,8 @@
+//
+// Card
+//
+
+
+.card-translucent {
+    background-color: rgba(18, 91, 152, 0.08);
+}

src/assets/scss/core/charts/_chart.scss

@@ -0,0 +1,69 @@
+//
+// Chart
+//
+
+.chart {
+    position: relative;
+    height: $chart-height;
+}
+
+
+// Size variations
+
+.chart-sm {
+    height: $chart-height-sm;
+}
+
+
+// Legend
+
+.chart-legend {
+    display: flex;
+    justify-content: center;
+    margin-top: $chart-legend-margin-top;
+    font-size: $chart-legend-font-size;
+    text-align: center;
+    color: $chart-legend-color;
+}
+
+.chart-legend-item {
+    display: inline-flex;
+    align-items: center;
+
+    + .chart-legend-item {
+        margin-left: 1rem;
+    }
+}
+
+.chart-legend-indicator {
+    display: inline-block;
+    width: 0.5rem;
+    height: 0.5rem;
+    margin-right: 0.375rem;
+    border-radius: 50%;
+}
+
+
+// Tooltip
+
+#chart-tooltip {
+    z-index: 0;
+
+    .arrow {
+        top: 100%;
+        left: 50%;
+        transform: translateX(-50%) translateX(-.5rem);
+    }
+}
+
+
+// Chart info overlay
+
+.chart-info-overlay {
+  position: absolute;
+  top: 0;
+  left: 5%;
+  max-width: 350px;
+  padding: 20px;
+  z-index: 1;
+}

src/assets/scss/core/close/_close.scss

@@ -0,0 +1,34 @@
+//
+// Close
+//
+
+.close {
+    @if $enable-transitions {
+        transition: $transition-base;
+    }
+    
+    &>span:not(.sr-only) {
+        background-color: $close-bg;
+        color: $close-color;
+        line-height: 17px;
+        height: 1.25rem;
+        width: 1.25rem;
+        border-radius: 50%;
+        font-size: 1.25rem;
+        display: block;
+        @if $enable-transitions {
+            transition: $transition-base;
+        }
+    }
+
+    &:hover,
+    &:focus {
+        background-color: $close-hover-bg;
+        color: $close-hover-color;
+        outline: none;
+
+        span:not(.sr-only) {
+            background-color: $close-hover-bg;
+        }
+    }
+}

src/assets/scss/core/custom-forms/_custom-checkbox.scss

@@ -0,0 +1,37 @@
+//
+// Custom checkbox
+//
+
+.custom-checkbox {
+    .custom-control-input ~ .custom-control-label {
+        cursor: pointer;
+        font-size: $font-size-sm;
+    }
+
+    .custom-control-input {
+        &:checked {
+            ~ .custom-control-label {
+                &::before {
+                    border-color: $custom-control-indicator-checked-border-color;
+                }
+                &::after {
+                    background-image: $custom-checkbox-indicator-icon-checked;
+                }
+            }
+        }
+
+        &:disabled {
+            ~ .custom-control-label {
+                &::before {
+                    border-color: $custom-control-indicator-disabled-bg;
+                }
+            }
+
+            &:checked {
+                &::before {
+                    border-color: $custom-control-indicator-checked-disabled-bg;
+                }
+            }
+        }
+    }
+}

src/assets/scss/core/custom-forms/_custom-control.scss

@@ -0,0 +1,51 @@
+//
+// Custom control
+// additional styles for custom checkboxes, radios and other
+//
+
+.custom-control-label {
+    // Background-color and (when enabled) gradient
+    &::before {
+        border: $custom-control-indicator-border-width solid $custom-control-indicator-border-color;
+        @if $enable-transitions {
+            transition: $input-transition;
+        }
+    }
+
+    span {
+        position: relative;
+        top: 2px;
+    }
+}
+
+.custom-control-label {
+    margin-bottom: 0;
+}
+
+
+// Alternative style
+
+.custom-control-alternative {
+    .custom-control-label {
+        // Background-color and (when enabled) gradient
+        &::before {
+            border: 0;
+            box-shadow: $input-alternative-box-shadow;
+        }
+    }
+
+    .custom-control-input {
+        &:checked {
+            ~ .custom-control-label {
+                &::before {
+                    box-shadow: $input-focus-alternative-box-shadow;
+                }
+            }
+        }
+
+        &:active~.custom-control-label::before,
+        &:focus~.custom-control-label::before {
+            box-shadow: $input-alternative-box-shadow;
+        }
+    }
+}

src/assets/scss/core/custom-forms/_custom-form.scss

@@ -0,0 +1,37 @@
+//
+// Custom checkbox
+//
+
+.custom-checkbox {
+    .custom-control-input ~ .custom-control-label {
+        cursor: pointer;
+        font-size: $font-size-sm;
+    }
+
+    .custom-control-input {
+        &:checked {
+            ~ .custom-control-label {
+                &::before {
+                    border-color: $custom-control-indicator-checked-border-color;
+                }
+                &::after {
+                    background-image: $custom-checkbox-indicator-icon-checked;
+                }
+            }
+        }
+
+        &:disabled {
+            ~ .custom-control-label {
+                &::before {
+                    border-color: $custom-control-indicator-disabled-bg;
+                }
+            }
+
+            &:checked {
+                &::before {
+                    border-color: $custom-control-indicator-checked-disabled-bg;
+                }
+            }
+        }
+    }
+}

src/assets/scss/core/custom-forms/_custom-radio.scss

@@ -0,0 +1,37 @@
+//
+// Custom radio
+//
+
+.custom-radio {
+    .custom-control-input ~ .custom-control-label {
+        cursor: pointer;
+        font-size: $font-size-sm;
+    }
+
+    .custom-control-input {
+        &:checked {
+            ~ .custom-control-label {
+                &::before {
+                    border-color: $custom-control-indicator-checked-border-color;
+                }
+                &::after {
+                    background-image: $custom-radio-indicator-icon-checked;
+                }
+            }
+        }
+
+        &:disabled {
+            ~ .custom-control-label {
+                &::before {
+                    border-color: $custom-control-indicator-disabled-bg;
+                }
+            }
+
+            &:checked {
+                &::before {
+                    border-color: $custom-control-indicator-checked-disabled-bg;
+                }
+            }
+        }
+    }
+}

src/assets/scss/core/custom-forms/_custom-toggle.scss

@@ -0,0 +1,66 @@
+//
+// Custom toggle
+//
+
+.custom-toggle {
+    position: relative;
+    display: inline-block;
+    width: $custom-toggle-width;
+    height: 1.5rem;
+
+    input {
+        display: none;
+
+        &:checked {
+             + .custom-toggle-slider {
+                border: $custom-control-indicator-border-width solid $custom-control-indicator-checked-border-color;
+
+                &:before {
+                    background: $custom-toggle-checked-bg;
+                    transform: translateX(1.625rem);
+                }
+            }
+        }
+
+        &:disabled {
+            + .custom-toggle-slider {
+                border: $custom-control-indicator-border-width solid $custom-control-indicator-disabled-bg;
+            }
+
+            &:checked {
+                + .custom-toggle-slider {
+                    border: $custom-control-indicator-border-width solid $custom-control-indicator-disabled-bg;
+
+                    &:before {
+                        background-color: lighten($custom-control-indicator-checked-bg, 10%);
+                    }
+                }
+            }
+        }
+    }
+}
+
+.custom-toggle-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: $custom-control-indicator-border-width solid $input-border-color;
+    border-radius: 34px !important;
+    background-color: transparent;
+
+
+    &:before {
+        position: absolute;
+        content: "";
+        height: 18px;
+        width: 18px;
+        left: 2px;
+        bottom: 2px;
+        border-radius: 50% !important;
+        background-color: $custom-toggle-slider-bg;
+        transition: $input-transition;
+    }
+}

src/assets/scss/core/dropdowns/_dropdown.scss

@@ -0,0 +1,79 @@
+//
+// Dropdown
+//
+
+// General styles
+
+.dropdown,
+.dropup,
+.dropright,
+.dropleft {
+    display: inline-block;
+}
+
+.dropdown-menu {
+    min-width: 12rem;
+
+    .dropdown-item {
+        padding: .5rem 1rem;
+        font-size: $font-size-sm;
+        > i,
+        > svg {
+            margin-right: 1rem;
+            font-size: 1rem;
+            vertical-align: -17%;
+        }
+    }
+}
+
+.dropdown-header {
+    padding-left: 1rem;
+    padding-right: 1rem;
+    color: $gray-100;
+    font-size: .625rem;
+    text-transform: uppercase;
+    font-weight: 700;
+}
+
+
+// Media components inside dropdown link
+
+.dropdown-menu {
+    a.media {
+
+        > div {
+            &:first-child {
+                line-height: 1;
+            }
+        }
+
+        p {
+            color: $gray-600;
+        }
+
+        &:hover {
+            .heading,
+            p {
+                color: theme-color("default") !important;
+            }
+        }
+    }
+}
+
+
+// Size variations
+
+.dropdown-menu-sm {
+    min-width: 100px;
+    border: $border-radius-lg;
+}
+
+.dropdown-menu-lg {
+    min-width: 260px;
+    border-radius: $border-radius-lg;
+}
+
+.dropdown-menu-xl {
+    min-width: 450px;
+    border-radius: $border-radius-lg;
+}

src/assets/scss/core/footers/_footer.scss

@@ -0,0 +1,98 @@
+//
+// Footer
+//
+
+
+// General styles
+
+.footer {
+    background: $footer-bg;
+    padding: $footer-padding-y $footer-padding-x;
+
+    .col-footer {
+        .heading {
+            color: $footer-heading-color;
+            letter-spacing: 0;
+            font-size: $footer-heading-font-size;
+            text-transform: uppercase;
+            font-weight: $font-weight-bold;
+            margin-bottom: 1rem;
+        }
+    }
+
+    .nav .nav-item .nav-link,
+    .footer-link {
+        color: $footer-link-color !important;
+
+        &:hover {
+            color: $footer-link-hover-color !important;
+        }
+    }
+
+    .list-unstyled li a {
+        display: inline-block;
+        padding: .125rem 0;
+        color: $footer-link-color;
+        font-size: $footer-link-font-size;
+
+        &:hover {
+            color: $footer-link-hover-color;
+        }
+    }
+
+    .copyright {
+        font-size: $font-size-sm;
+    }
+}
+
+
+// Dark footer
+
+.footer-dark {
+    .col-footer .heading {
+        color: $white;
+    }
+}
+
+
+// Footer nav used for copyright and some links, but not limited to this
+
+.nav-footer {
+    .nav-link {
+        font-size: $font-size-sm;
+    }
+
+    .nav-item:last-child {
+        .nav-link {
+            padding-right: 0;
+        }
+    }
+}
+
+
+// Footer with cards over
+
+.footer.has-cards {
+    overflow: hidden;
+    padding-top: 500px;
+    margin-top: -420px;
+    position: relative;
+    background: transparent;
+    pointer-events: none;
+
+    &:before {
+        content: "";
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 600px;
+        height: 2000px;
+        background: theme-color("secondary");
+        transform: skew(0,-8deg);
+    }
+
+    .container {
+        pointer-events: auto;
+        position: relative;
+    }
+}

src/assets/scss/core/forms/_form-validation.scss

@@ -0,0 +1,71 @@
+//
+// Form validation
+//
+
+// Validation
+
+.has-success,
+.has-danger {
+    position: relative;
+
+    &:after, {
+        width: 19px;
+        height: 19px;
+        line-height: 19px;
+        text-align: center;
+        font-family: 'NucleoIcons';
+        display: inline-block;
+        position: absolute;
+        right: 15px;
+        top: 2px;
+        transform: translateY(50%);
+        border-radius: 50%;
+        font-size: 9px;
+        opacity: 1;
+    }
+}
+
+.has-success {
+    &:after {
+        content: "\ea26";
+        color: daken($form-feedback-valid-color, 18%);
+        background-color: $form-feedback-valid-bg;
+    }
+    
+    .form-control {
+        background-color: $input-focus-bg;
+
+        &:focus {
+            border-color: $input-focus-border-color;
+        }
+
+
+        // Placeholder
+
+        &::placeholder {
+            color: $form-feedback-valid-color;
+        }
+    }
+}
+
+.has-danger {
+    &:after {
+        content: "\ea53";
+        color: daken($form-feedback-invalid-color, 18%);
+        background-color: $form-feedback-invalid-bg;
+    }
+
+    .form-control {
+        background-color: $input-focus-bg;
+
+        &:focus {
+            border-color: $input-focus-border-color;
+        }
+
+        // Placeholder
+
+        &::placeholder {
+            color: $form-feedback-invalid-color;
+        }
+    }
+}

src/assets/scss/core/forms/_form.scss

@@ -0,0 +1,78 @@
+//
+// Forms
+//
+
+
+// Labels
+
+.form-control-label {
+    color: $gray-700;
+    font-size: $font-size-sm;
+    font-weight: $font-weight-bold;
+}
+
+
+// Text inputs
+
+.form-control {
+    font-size: $input-btn-font-size;
+
+    &:focus {
+        &::placeholder {
+            color: $input-focus-placeholder-color;
+        }
+    }
+}
+
+
+// Textarea
+
+textarea[resize="none"] {
+    resize: none!important;
+}
+
+textarea[resize="both"] {
+    resize: both!important;
+}
+
+textarea[resize="vertical"] {
+    resize: vertical!important;
+}
+
+textarea[resize="horizontal"] {
+    resize: horizontal!important;
+}
+
+
+// Form input variations
+
+// Muted input
+
+.form-control-muted {
+    background-color: $input-muted-bg;
+    border-color: $input-muted-bg;
+    box-shadow: none;
+
+    &:focus {
+        background-color: $input-focus-muted-bg;
+    }
+}
+
+
+// Alternative input
+
+.form-control-alternative {
+    box-shadow: $input-alternative-box-shadow;
+    border: 0;
+    transition: box-shadow .15s ease;
+
+    &:focus {
+        box-shadow: $input-focus-alternative-box-shadow;
+    }
+}
+
+// Size variations: Fixes to the bootstrap defaults
+
+.form-control-lg {
+    font-size: $font-size-base;
+}

src/assets/scss/core/forms/_input-group.scss

@@ -0,0 +1,70 @@
+//
+// Input group
+//
+
+.input-group {
+	box-shadow: $input-box-shadow;
+	border-radius: $input-border-radius;
+	transition: $transition-base;
+
+	.form-control {
+		box-shadow: none;
+
+		&:not(:first-child) {
+		    border-left: 0;
+		    padding-left: 0;
+		}
+		&:not(:last-child) {
+			border-right: 0;
+			padding-right: 0;
+		}
+		&:focus {
+			box-shadow: none;
+		}
+	}
+}
+
+.input-group-text {
+    transition: $input-transition;
+}
+
+
+// Alternative input groups related to .form-control-alternative
+
+
+.input-group-alternative {
+    box-shadow: $input-alternative-box-shadow;
+    border: 0;
+    transition: box-shadow .15s ease;
+
+    .form-control,
+    .input-group-text {
+        border: 0;
+        box-shadow: none;
+    }
+}
+
+.focused {
+	.input-group-alternative {
+        box-shadow: $input-focus-alternative-box-shadow !important;
+    }
+}
+
+
+// .focus class is applied dinamycally from theme.js
+
+.focused {
+	.input-group {
+		box-shadow: $input-focus-box-shadow;
+	}
+
+	.input-group-text {
+	    color: $input-group-addon-focus-color;
+	    background-color: $input-group-addon-focus-bg;
+	    border-color: $input-group-addon-focus-border-color;
+	}
+
+	.form-control {
+		border-color: $input-group-addon-focus-border-color;
+	}
+}

src/assets/scss/core/headers/_header.scss

@@ -0,0 +1,7 @@
+//
+// Header
+//
+
+.header {
+    position: relative;
+}

src/assets/scss/core/icons/_icon-shape.scss

@@ -0,0 +1,42 @@
+//
+// Icon shape
+//
+
+
+.icon-shape {
+	padding: 12px;
+	text-align: center;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 50%;
+
+
+	i, svg {
+		font-size: 1.25rem;
+	}
+
+	&.icon-lg {
+		i, svg {
+			font-size: 1.625rem;
+		}
+	}
+
+	&.icon-sm {
+		i, svg {
+			font-size: .875rem;
+		}
+	}
+
+	svg {
+		width: 30px;
+		height: 30px;
+	}
+
+}
+
+@each $color, $value in $theme-colors {
+	.icon-shape-#{$color} {
+		@include icon-shape-variant(theme-color($color));
+	}
+}

src/assets/scss/core/icons/_icon.scss

@@ -0,0 +1,65 @@
+//
+// Icon
+//
+
+.icon {
+	width: $icon-size;
+	height: $icon-size;
+
+	i, svg {
+		font-size: $icon-size - .75;
+	}
+
+    + .icon-text {
+    	padding-left: 1rem;
+    	width: calc(100% - #{$icon-size} - 1);
+    }
+}
+
+
+// Extra large icons
+
+.icon-xl {
+	width: $icon-size-xl;
+	height: $icon-size-xl;
+
+	i, svg {
+		font-size: $icon-size-xl - .75;
+	}
+
+    + .icon-text {
+    	width: calc(100% - #{$icon-size-xl} - 1);
+    }
+}
+
+
+// Large icons
+
+.icon-lg {
+	width: $icon-size-lg;
+	height: $icon-size-lg;
+
+	i, svg {
+		font-size: $icon-size-lg - .75;
+	}
+
+    + .icon-text {
+    	width: calc(100% - #{$icon-size-lg} - 1);
+    }
+}
+
+
+// Small icon
+
+.icon-sm {
+	width: $icon-size-sm;
+	height: $icon-size-sm;
+
+	i, svg {
+		font-size: $icon-size-sm - .75;
+	}
+
+    + .icon-text {
+    	width: calc(100% - #{$icon-size-sm} - 1);
+    }
+}

src/assets/scss/core/list-groups/_list-group.scss

@@ -0,0 +1,46 @@
+//
+// List group
+//
+
+
+// Space list items
+
+.list-group-space {
+    .list-group-item {
+        margin-bottom: 1.5rem;
+        @include border-radius($list-group-border-radius);
+    }
+}
+
+
+// Extended list group components
+
+.list-group-img {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    vertical-align: top;
+    margin: -.1rem 1.2rem 0 -.2rem;
+}
+
+.list-group-content {
+    flex: 1;
+    min-width: 0;
+
+    > p {
+       color: $gray-500;
+       line-height: 1.5;
+       margin: .2rem 0 0;
+   }
+}
+
+.list-group-heading {
+    font-size: $font-size-base;
+    color: $gray-800;
+
+    > small {
+       float: right;
+       color: $gray-500;
+       font-weight: 500;
+   }
+}

src/assets/scss/core/maps/_map.scss

@@ -0,0 +1,10 @@
+//
+// Map
+//
+
+.map-canvas {
+    position: relative;
+    width: 100%;
+    height: $map-height;
+    border-radius: $border-radius;
+}

src/assets/scss/core/masks/_mask.scss

@@ -0,0 +1,12 @@
+//
+// Mask
+//
+
+.mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    @include transition($transition-base);
+}

src/assets/scss/core/mixins/_alert.scss

@@ -0,0 +1,13 @@
+@mixin alert-variant($background, $border, $color) {
+    color: color-yiq($background);
+    @include gradient-bg($background);
+    border-color: $border;
+
+    hr {
+        border-top-color: darken($border, 5%);
+    }
+
+    .alert-link {
+        color: darken($color, 10%);
+    }
+}

src/assets/scss/core/mixins/_background-variant.scss

@@ -0,0 +1,30 @@
+// Contextual backgrounds
+@mixin bg-variant($parent, $color) {
+    #{$parent} {
+        background-color: $color !important;
+    }
+    a#{$parent},
+    button#{$parent} {
+        @include hover-focus {
+            background-color: darken($color, 10%) !important;
+        }
+    }
+}
+
+@mixin bg-gradient-variant($parent, $color) {
+    #{$parent} {
+        background: linear-gradient(87deg, $color 0, adjust-hue($color, 25%) 100%) !important;
+    }
+}
+
+@mixin bg-translucent-variant($parent, $color) {
+    #{$parent} {
+        background-color: darken(rgba($color, $translucent-color-opacity), 7%) !important;
+    }
+    a#{$parent},
+    button#{$parent} {
+        @include hover-focus {
+            background-color: darken(rgba($color, $translucent-color-opacity), 12%) !important;
+        }
+    }
+}

src/assets/scss/core/mixins/_badge.scss

@@ -0,0 +1,12 @@
+@mixin badge-variant($bg) {
+	color: saturate(darken($bg, 10%), 10);
+    background-color: transparentize(lighten($bg, 25%), .5);
+
+  	&[href] {
+	    @include hover-focus {
+	        color: color-yiq($bg);
+	        text-decoration: none;
+	        background-color: darken($bg, 10%);
+	    }
+	}
+}

src/assets/scss/core/mixins/_buttons.scss

@@ -0,0 +1,105 @@
+@mixin button-variant($background, $border, $hover-background: darken($background, 0%), $hover-border: darken($border, 0%), $active-background: darken($background, 10%), $active-border: darken($border, 0%)) {
+    color: color-yiq($background);
+    @include gradient-bg($background);
+    border-color: $border;
+    @include box-shadow($btn-box-shadow);
+
+    @include hover {
+        color: color-yiq($hover-background);
+        @include gradient-bg($hover-background);
+        border-color: $hover-border;
+    }
+
+    &:focus,
+    &.focus {
+        // Avoid using mixin so we can pass custom focus shadow properly
+        @if $enable-shadows {
+            box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
+        }
+        @else {
+            box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
+        }
+    } // Disabled comes first so active can properly restyle
+    &.disabled,
+    &:disabled {
+        color: color-yiq($background);
+        background-color: $background;
+        border-color: $border;
+    }
+
+    &:not(:disabled):not(.disabled):active,
+    &:not(:disabled):not(.disabled).active,
+    .show>&.dropdown-toggle {
+        color: color-yiq($active-background);
+        background-color: $active-background;
+        @if $enable-gradients {
+            background-image: none; // Remove the gradient for the pressed/active state
+        }
+        border-color: $active-border;
+
+        &:focus {
+            // Avoid using mixin so we can pass custom focus shadow properly
+            @if $enable-shadows {
+                box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
+            }
+            @else {
+                box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
+            }
+        }
+    }
+}
+
+@mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
+    color: $color;
+    background-color: transparent;
+    background-image: none;
+    border-color: $color;
+
+    &:hover {
+        color: $color-hover;
+        background-color: $active-background;
+        border-color: $active-border;
+    }
+
+    &:focus,
+    &.focus {
+        box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
+    }
+
+    &.disabled,
+    &:disabled {
+        color: $color;
+        background-color: transparent;
+    }
+
+    &:not(:disabled):not(.disabled):active,
+    &:not(:disabled):not(.disabled).active,
+    .show>&.dropdown-toggle {
+        color: color-yiq($active-background);
+        background-color: $active-background;
+        border-color: $active-border;
+
+        &:focus {
+            // Avoid using mixin so we can pass custom focus shadow properly
+            @if $enable-shadows and $btn-active-box-shadow !=none {
+                box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5);
+            }
+            @else {
+                box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
+            }
+        }
+    }
+}
+
+// Button sizes
+@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
+    padding: $padding-y $padding-x;
+    font-size: $font-size;
+    line-height: $line-height; // Manually declare to provide an override to the browser default
+    @if $enable-rounded {
+        border-radius: $border-radius;
+    }
+    @else {
+        border-radius: 0;
+    }
+}

src/assets/scss/core/mixins/_forms.scss

@@ -0,0 +1,128 @@
+@mixin form-control-focus() {
+  &:focus {
+    color: $input-focus-color;
+    background-color: $input-focus-bg;
+    border-color: $input-focus-border-color;
+    outline: 0;
+    // Avoid using mixin so we can pass custom focus shadow properly
+    @if $enable-shadows {
+      box-shadow: $input-box-shadow, $input-focus-box-shadow;
+    } @else {
+      box-shadow: $input-focus-box-shadow;
+    }
+  }
+}
+
+
+@mixin form-validation-state($state, $color, $icon) {
+  .#{$state}-feedback {
+    display: none;
+    width: 100%;
+    margin-top: $form-feedback-margin-top;
+    font-size: $form-feedback-font-size;
+    color: $color;
+  }
+
+  .#{$state}-tooltip {
+    position: absolute;
+    top: 100%;
+    z-index: 5;
+    display: none;
+    max-width: 100%; // Contain to parent when possible
+    padding: .5rem;
+    margin-top: .1rem;
+    font-size: .875rem;
+    line-height: 1;
+    color: #fff;
+    background-color: rgba($color, .8);
+    border-radius: .2rem;
+  }
+
+  .form-control,
+  .custom-select {
+    .was-validated &:#{$state},
+    &.is-#{$state} {
+      border-color: $color;
+
+      &:focus {
+        border-color: $color;
+        //box-shadow: 0 1px $input-focus-width 0 rgba($color, .75);
+      }
+
+      ~ .#{$state}-feedback,
+      ~ .#{$state}-tooltip {
+        display: block;
+      }
+    }
+  }
+
+  .form-check-input {
+    .was-validated &:#{$state},
+    &.is-#{$state} {
+      ~ .form-check-label {
+        color: $color;
+      }
+
+      ~ .#{$state}-feedback,
+      ~ .#{$state}-tooltip {
+        display: block;
+      }
+    }
+  }
+
+  .custom-control-input {
+    .was-validated &:#{$state},
+    &.is-#{$state} {
+      ~ .custom-control-label {
+        color: $color;
+
+        &::before {
+          background-color: lighten($color, 25%);
+          border-color: lighten($color, 25%);
+        }
+      }
+
+      ~ .#{$state}-feedback,
+      ~ .#{$state}-tooltip {
+        display: block;
+      }
+
+      &:checked {
+        ~ .custom-control-label::before {
+          @include gradient-bg(lighten($color, 10%));
+          border-color: lighten($color, 25%);
+        }
+      }
+
+      &:focus {
+        ~ .custom-control-label::before {
+          box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25);
+        }
+      }
+    }
+  }
+
+  // custom file
+  .custom-file-input {
+    .was-validated &:#{$state},
+    &.is-#{$state} {
+      ~ .custom-file-label {
+        border-color: $color;
+
+        &::before { border-color: inherit; }
+      }
+
+      ~ .#{$state}-feedback,
+      ~ .#{$state}-tooltip {
+        display: block;
+      }
+
+      &:focus {
+        ~ .custom-file-label {
+          box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
+        }
+      }
+    }
+  }
+}
+

src/assets/scss/core/mixins/_icon.scss

@@ -0,0 +1,4 @@
+@mixin icon-shape-variant($color) {
+    color: saturate(darken($color, 10%), 10);
+    background-color: transparentize(lighten($color, 10%), .5);
+}

src/assets/scss/core/mixins/_modals.scss

@@ -0,0 +1,23 @@
+@mixin modal-variant($background) {
+	.modal-title {
+		color: color-yiq($background);
+	}
+	.modal-header,
+	.modal-footer {
+		border-color: rgba(color-yiq($background), .075);
+	}
+	.modal-content {
+		background-color: $background;
+		color: color-yiq($background);
+
+		.heading {
+			color: color-yiq($background);
+		}
+	}
+
+	.close { 
+    	&>span:not(.sr-only) {
+    		color: $white;
+    	}
+    }
+}

src/assets/scss/core/mixins/_popover.scss

@@ -0,0 +1,36 @@
+@mixin popover-variant($background) {
+
+	background-color: $background;
+
+	.popover-header {
+		background-color: $background;
+		color: color-yiq($background);
+	}
+
+	.popover-body {
+		color: color-yiq($background);
+	}
+	.popover-header{
+		border-color: rgba(color-yiq($background), .2);
+	}
+	&.bs-popover-top {
+		.arrow::after {
+			border-top-color: $background;
+		}
+	}
+	&.bs-popover-right {
+		.arrow::after {
+			border-right-color: $background;
+		}
+	}
+	&.bs-popover-bottom {
+		.arrow::after {
+			border-bottom-color: $background;
+		}
+	}
+	&.bs-popover-left {
+		.arrow::after {
+			border-left-color: $background;
+		}
+	}
+}

src/assets/scss/core/modals/_modal.scss

@@ -0,0 +1,25 @@
+//
+// Modal
+//
+
+
+// Fluid modal
+
+.modal-fluid {
+    .modal-dialog {
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+    .modal-content {
+        border-radius: 0;
+    }
+}
+
+
+// Background color variations
+
+@each $color, $value in $theme-colors {
+    .modal-#{$color} {
+        @include modal-variant($value);
+    }
+}

src/assets/scss/core/navbars/_navbar-collapse.scss

@@ -0,0 +1,125 @@
+//
+// Navabar collapse
+//
+
+// Collapse
+
+.navbar-collapse-header {
+    display: none;
+}
+
+@include media-breakpoint-down(sm) {
+    .navbar-nav {
+        .nav-link {
+            padding: .625rem 0;
+            color: theme-color("default") !important;
+        }
+
+        .dropdown-menu {
+            box-shadow: none;
+            min-width: auto;
+
+            .media {
+                svg {
+                    width: 30px;
+                }
+            }
+        }
+    }
+
+    .navbar-collapse {
+        width: calc(100% - 1.4rem);
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: 1050;
+        margin: .7rem;
+        overflow-y: auto;
+        height: auto !important;
+        opacity: 0;
+
+        .navbar-toggler {
+            width: 20px;
+            height: 20px;
+            position: relative;
+            cursor: pointer;
+            display: inline-block;
+            padding: 0;
+
+            span {
+                display: block;
+                position: absolute;
+                width: 100%;
+                height: 2px;
+                border-radius: 2px;
+                opacity: 1;
+                background: #283448;
+            }
+
+            :nth-child(1) {
+                transform: rotate(135deg);
+            }
+
+            :nth-child(2) {
+                transform: rotate(-135deg);
+            }
+        }
+
+        .navbar-collapse-header {
+            display: block;
+            padding-bottom: 1rem;
+            margin-bottom: 1rem;
+            border-bottom: 1px solid rgba(0, 0, 0, .1);
+        }
+
+        .collapse-brand {
+            img {
+                height: 36px;
+            }
+        }
+
+        .collapse-close {
+            text-align: right;
+        }
+    }
+
+    .navbar-collapse.collapsing,
+    .navbar-collapse.show {
+        padding: 1.5rem;
+        border-radius: $border-radius;
+        background: #FFF;
+        box-shadow: 0 50px 100px rgba(50,50,93,.1),0 15px 35px rgba(50,50,93,.15),0 5px 15px rgba(0,0,0,.1);
+        animation: show-navbar-collapse .2s ease forwards;
+    }
+
+    .navbar-collapse.collapsing-out {
+        animation: hide-navbar-collapse .2s ease forwards;
+    }
+}
+
+@keyframes show-navbar-collapse {
+    0% {
+        opacity: 0;
+        transform: scale(.95);
+        transform-origin: 100% 0;
+    }
+
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+@keyframes hide-navbar-collapse {
+    from {
+        opacity: 1;
+        transform: scale(1);
+        transform-origin: 100% 0;
+    }
+
+    to {
+        opacity: 0;
+        transform: scale(.95);
+    }
+}

src/assets/scss/core/navbars/_navbar-dropdown.scss

@@ -0,0 +1,101 @@
+// Dropdown menu
+
+@include media-breakpoint-up(md) {
+    .navbar {
+        .dropdown-menu {
+            opacity: 0;
+            pointer-events: none;
+            margin: 0;
+        }
+
+        .dropdown-menu-arrow {
+            &:before {
+                background: $dropdown-bg;
+                box-shadow: none;
+                content: '';
+                display: block;
+                height: 12px;
+                width: 12px;
+                left: 20px;
+                position: absolute;
+                bottom: 100%;
+                transform: rotate(-45deg) translateY(12px);
+                z-index: -5;
+                border-radius: 2px;
+            }
+        }
+
+        .dropdown-menu-right {
+            &:before {
+                right: 20px;
+                left: auto;
+            }
+        }
+
+        &:not(.navbar-nav-hover) {
+            .dropdown-menu {
+                &.show {
+                    opacity: 1;
+                    pointer-events: auto;
+                    animation: show-navbar-dropdown .25s ease forwards;
+                }
+
+                &.close {
+                    display: block;
+                    animation: hide-navbar-dropdown .15s ease backwards;
+                }
+            }
+        }
+
+        &.navbar-nav-hover {
+            .dropdown-menu {
+                opacity: 0;
+                display: block;
+                pointer-events: none;
+                transform: translate(0, 10px) perspective(200px) rotateX(-2deg);
+                transition: visibility 0.25s, opacity 0.25s, transform 0.25s;
+            }
+
+            .nav-item.dropdown:hover > .dropdown-menu {
+                display: block;
+                opacity: 1;
+                pointer-events: auto;
+                visibility: visible;
+                transform: translate(0, 0);
+                animation: none;
+            }
+        }
+
+        .dropdown-menu-inner {
+            position: relative;
+            padding: 1rem;
+        }
+
+
+        // Keyframes
+
+        @keyframes show-navbar-dropdown {
+            0% {
+                opacity: 0;
+                transform: translate(0, 10px) perspective(200px) rotateX(-2deg);
+                transition: visibility 0.25s, opacity 0.25s, transform 0.25s;
+            }
+
+            100% {
+                transform: translate(0, 0);
+                opacity: 1;
+            }
+        }
+
+        @keyframes hide-navbar-dropdown {
+            from {
+                opacity: 1;
+            }
+
+            to {
+                opacity: 0;
+                transform: translate(0, 10px);
+            }
+        }
+    }
+}

src/assets/scss/core/navbars/_navbar-search.scss

@@ -0,0 +1,69 @@
+//
+// Navbar search
+//
+
+.navbar-search {
+    .input-group {
+        border-radius: $navbar-search-border-radius;
+        border: $navbar-search-border-width solid;
+        background-color: transparent;
+
+        .input-group-text {
+            background-color: transparent;
+            padding-left: 1rem;
+        }
+    }
+
+    .form-control {
+        width: $navbar-search-width;
+        background-color: transparent;
+    }
+}
+
+.navbar-search-dark {
+    .input-group {
+        border-color: $navbar-search-dark-border-color;
+    }
+
+    .input-group-text {
+        color: $navbar-search-dark-color;
+    }
+
+    .form-control {
+        color: $navbar-search-dark-focus-color;
+
+        &::placeholder {
+            color: $navbar-search-dark-color;
+        }
+    }
+
+    .focused {
+        .input-group {
+            border-color: $navbar-search-dark-focus-border-color;
+        }
+    }
+}
+
+.navbar-search-light {
+    .input-group {
+        border-color: $navbar-search-light-border-color;
+    }
+
+    .input-group-text {
+        color: $navbar-search-light-color;
+    }
+
+    .form-control {
+        color: $navbar-search-light-focus-color;
+
+        &::placeholder {
+            color: $navbar-search-light-color;
+        }
+    }
+
+    .focused {
+        .input-group {
+            border-color: $navbar-search-light-focus-border-color;
+        }
+    }
+}

src/assets/scss/core/navbars/_navbar-vertical.scss

@@ -0,0 +1,286 @@
+//
+// Vertical navbar
+//
+
+
+// Vertical
+//
+// Creates a vertically aligned version of the navbar
+.navbar-vertical {
+    box-shadow: $navbar-vertical-box-shadow;
+    
+    .navbar {
+        border-width: 0 0 1px 0;
+        border-style: solid;
+    }
+
+
+    // Navbar light
+
+    .navbar-light {
+        background-color: $navbar-light-bg;
+        border-color: $navbar-light-border-color;
+    }
+
+
+    // Navbar brand
+
+    .navbar-brand {
+        margin-right: 0;
+    }
+
+    .navbar-brand-img,
+    .navbar-brand > img {
+        max-width: 100%;
+        max-height: 2rem;
+    }
+
+
+    // Navbar collapse
+
+    @include media-breakpoint-up(md) {
+        .navbar-collapse {
+            margin-left: -$navbar-padding-x;
+            margin-right: -$navbar-padding-x;
+            padding-left: $navbar-padding-x;
+            padding-right: $navbar-padding-x;
+
+            &:before {
+                content: '';
+                display: block;
+                margin: $navbar-padding-y (-$navbar-padding-x);
+            }
+        }
+    }
+
+
+
+    // Navbar navigaton
+
+    .navbar-nav {
+        margin-left: -$navbar-padding-x;
+        margin-right: -$navbar-padding-x;
+
+
+        // Navbar link
+
+        .nav-link {
+            padding-left: $navbar-padding-x;
+            padding-right: $navbar-padding-x;
+            font-size: $navbar-nav-link-font-size;
+
+            &.active {
+                position: relative;
+
+                &:before {
+                    content: '';
+                    position: absolute;
+                    left: 0;
+                    top: $nav-link-padding-y;
+                    bottom: $nav-link-padding-y;
+                    border-left: 2px solid $primary;
+                }
+            }
+
+
+            // Icon
+
+            > i {
+                min-width: $navbar-icon-min-width;
+                font-size: .9375rem;
+                line-height: ($font-size-base * $line-height-base);
+            }
+
+
+            // Dropdown
+
+            .dropdown-menu {
+                border: none;
+
+                .dropdown-menu {
+                    margin-left: $dropdown-item-padding-x / 2;
+                }
+            }
+        }
+    }
+
+
+    // Navbar navigation
+    .navbar-nav .nav-link {
+        display: flex;
+        align-items: center;
+    }
+
+    .navbar-nav .nav-link[data-toggle="collapse"] {
+        &:after {
+            display: inline-block;
+            font-style: normal;
+            font-variant: normal;
+            text-rendering: auto;
+            -webkit-font-smoothing: antialiased;
+            font-family: 'Font Awesome 5 Free';
+            font-weight: 700;
+            content: "\f105";
+            margin-left: auto;
+            color: $text-muted;
+            transition: $transition-base;
+        } // Expanded
+        &[aria-expanded="true"] {
+
+            &:after {
+                transform: rotate(90deg);
+            }
+        }
+    }
+
+    // Second level
+    .navbar-nav .nav .nav-link {
+        padding-left: $navbar-padding-x + $navbar-icon-min-width;
+    }
+
+    // Third level
+    .navbar-nav .nav .nav .nav-link {
+        padding-left: $navbar-padding-x * 1.5 + $navbar-icon-min-width;
+    }
+
+
+    // Navbar heading
+    .navbar-heading {
+        padding-top: $nav-link-padding-y;
+        padding-bottom: $nav-link-padding-y;
+        font-size: $font-size-xs;
+        text-transform: uppercase;
+        letter-spacing: .04em;
+    }
+
+
+    // Expanded navbar specific styles
+    &.navbar-expand {
+        @each $breakpoint,
+        $dimension in $grid-breakpoints {
+
+            &-#{$breakpoint} {
+                @include media-breakpoint-up(#{$breakpoint}) {
+                    display: block;
+                    position: fixed;
+                    top: 0;
+                    bottom: 0;
+                    width: 100%;
+                    max-width: $navbar-vertical-width;
+                    padding-left: $navbar-vertical-padding-x;
+                    padding-right: $navbar-vertical-padding-x;
+
+                    overflow-y: auto;
+
+                    // Container
+                    >[class*="container"] {
+                        flex-direction: column;
+                        align-items: stretch;
+                        min-height: 100%;
+                        padding-left: 0;
+                        padding-right: 0; // Target IE 10 & 11
+                        @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+                            min-height: none;
+                            height: 100%;
+                        }
+                    }
+
+
+                    // Fixes the vertical navbar to the left
+                    &.fixed-left {
+                        left: 0;
+                        border-width: 0 1px 0 0;
+                    }
+
+
+                    // Fixed the vertical navbar to the right
+                    &.fixed-right {
+                        right: 0;
+                        border-width: 0 0 0 1px;
+                    }
+
+
+                    // Navbar collapse
+                    .navbar-collapse {
+                        flex: 1;
+                        display: flex;
+                        flex-direction: column;
+                        align-items: stretch;
+                        margin-left: -$navbar-vertical-padding-x;
+                        margin-right: -$navbar-vertical-padding-x;
+                        padding-left: $navbar-vertical-padding-x;
+                        padding-right: $navbar-vertical-padding-x;
+
+                        > * {
+                            min-width: 100%;
+                        }
+                    }
+
+
+                    // Navbar navigation
+                    .navbar-nav {
+                        flex-direction: column;
+                        margin-left: -$navbar-vertical-padding-x;
+                        margin-right: -$navbar-vertical-padding-x;
+                    }
+
+                    .navbar-nav .nav-link {
+                        padding: $navbar-vertical-nav-link-padding-y $navbar-vertical-nav-link-padding-x;
+
+                        &.active {
+                            &:before {
+                                top: $nav-link-padding-y;
+                                bottom: $nav-link-padding-y;
+                                left: 0;
+                                right: auto;
+                                border-left: 2px solid $primary;
+                                border-bottom: 0;
+                            }
+                        }
+                    }
+
+
+                    // Second level
+                    .navbar-nav .nav .nav-link {
+                        padding-left: $navbar-vertical-padding-x + $navbar-icon-min-width;
+                    }
+
+
+                    // Third level
+                    .navbar-nav .nav .nav .nav-link {
+                        padding-left: $navbar-vertical-padding-x * 1.5 + $navbar-icon-min-width;
+                    }
+
+                    // Navbar brand
+                    .navbar-brand {
+                        display: block;
+                        text-align: center;
+                        padding-top: (2rem - $navbar-padding-y);
+                        padding-bottom: (2rem - $navbar-padding-y);
+                    }
+
+                    .navbar-brand-img {
+                        max-height: 2.5rem;
+                    }
+
+                    // Navbar user
+                    .navbar-user {
+                        margin-left: -$navbar-vertical-padding-x;
+                        margin-right: -$navbar-vertical-padding-x;
+                        padding-top: $spacer;
+                        padding-bottom: $spacer - $navbar-padding-y;
+                        padding-left: $navbar-vertical-padding-x;
+                        padding-right: $navbar-vertical-padding-x;
+                        border-top: 1px solid $border-color;
+
+                        // Dropup menu
+                        .dropup .dropdown-menu {
+                            left: 50%;
+                            transform: translateX(-50%);
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

src/assets/scss/core/navbars/_navbar.scss

@@ -0,0 +1,153 @@
+//
+// Navbar
+//
+
+
+// Navbar links
+
+.navbar-horizontal {
+    .navbar-nav {
+        .nav-link {
+            font-size: $navbar-nav-link-font-size;
+            font-weight: $navbar-nav-link-font-weight;
+            text-transform: $navbar-nav-link-text-transform;
+            letter-spacing: $navbar-nav-link-letter-spacing;
+            @include transition($navbar-transition);
+
+            .nav-link-inner--text {
+                margin-left: .25rem;
+            }
+        }
+    }
+
+
+    // Navbar brand (logo)
+
+    .navbar-brand {
+        font-size: $font-size-sm;
+        font-weight: 600;
+        text-transform: uppercase;
+        font-size: .875rem;
+        letter-spacing: .05px;
+
+        img {
+            height: 30px;
+        }
+    }
+
+    .navbar-dark {
+        .navbar-brand {
+            color: $white;
+        }
+    }
+
+    .navbar-light {
+        .navbar-brand {
+            color: $gray-800;
+        }
+    }
+
+    .navbar-nav {
+      .nav-item {
+        .media:not(:last-child){
+          margin-bottom: 1.5rem;
+        }
+      }
+    }
+
+    @include media-breakpoint-up(lg) {
+        .navbar-nav {
+            .nav-item {
+                margin-right: .5rem;
+
+                [data-toggle="dropdown"]::after {
+                    transition: $transition-base;
+                }
+
+                &.show {
+                    [data-toggle="dropdown"]::after {
+                        transform: rotate(180deg);
+                    }
+                }
+            }
+            .nav-link {
+                padding-top: $navbar-nav-link-padding-y;
+                padding-bottom: $navbar-nav-link-padding-y;
+                border-radius: $navbar-nav-link-border-radius;
+
+                i {
+                    margin-right: .625rem;
+                }
+            }
+
+            .nav-link-icon {
+                padding-left: .5rem !important;
+                padding-right: .5rem !important;
+                font-size: 1rem;
+                border-radius: $navbar-nav-link-border-radius;
+
+                i {
+                    margin-right: 0;
+                }
+            }
+        }
+    }
+
+
+    // Transparent navbar
+
+    .navbar-transparent {
+        position: absolute;
+        top: 0;
+        width: 100%;
+        z-index: 100;
+        background-color: transparent;
+        border: 0;
+        box-shadow: none;
+
+        .navbar-brand {
+            color: rgba(255, 255, 255, 1);
+        }
+
+        .navbar-toggler {
+            color: rgba(255, 255, 255, 1);
+        }
+
+        .navbar-toggler-icon {
+            background-image: $navbar-dark-toggler-icon-bg;
+        }
+    }
+
+    @include media-breakpoint-up(md) {
+        .navbar-transparent {
+            .navbar-nav {
+                .nav-link {
+                    color: $navbar-dark-color;
+
+                    @include hover-focus {
+                        color: $navbar-dark-hover-color;
+                    }
+
+                    &.disabled {
+                        color: $navbar-dark-disabled-color;
+                    }
+                }
+
+                .show > .nav-link,
+                .active > .nav-link,
+                .nav-link.show,
+                .nav-link.active {
+                    color: $navbar-dark-active-color;
+                }
+            }
+
+            .navbar-brand {
+                color: $navbar-dark-color;
+
+                @include hover-focus {
+                    color: $navbar-dark-color;
+                }
+            }
+        }
+    }
+}

src/assets/scss/core/navs/_nav-pills.scss

@@ -0,0 +1,66 @@
+//
+// Nav pills
+//
+
+
+// General styles
+
+.nav-pills {
+    .nav-item:not(:last-child) {
+        padding-right: $nav-pills-space-x;
+    }
+
+    .nav-link {
+    	padding: $nav-pills-padding-y $nav-pills-padding-x;
+        color: $nav-pills-link-color;
+        font-weight: 500;
+        font-size: $font-size-sm;
+        box-shadow: $nav-pills-box-shadow;
+        background-color: $nav-pills-bg;
+        transition: $transition-base;
+
+        &:hover {
+        	color: $nav-pills-link-hover-color;
+        }
+    }
+
+    .nav-link.active,
+    .show > .nav-link {
+        color: $nav-pills-link-active-color;
+        background-color: $nav-pills-link-active-bg;
+    }
+
+    @include media-breakpoint-down(xs) {
+        .nav-item {
+            margin-bottom: $spacer;
+        }
+    }
+}
+
+@include media-breakpoint-down(sm) {
+    .nav-pills:not(.nav-pills-circle) {
+        .nav-item {
+            padding-right: 0;
+        }
+    }
+}
+
+
+// Rounded circle nav pills
+
+.nav-pills-circle {
+    .nav-link {
+        text-align: center;
+        height: 60px;
+        width: 60px;
+        padding: 0;
+        line-height: 60px;
+        border-radius: 50%;
+    }
+
+    .nav-link-icon {
+        i, svg {
+            font-size: 1rem;
+        }
+    }
+}

src/assets/scss/core/navs/_nav.scss

@@ -0,0 +1,33 @@
+//
+// Nav
+//
+
+
+// Nav wrapper (container)
+
+// Nav wrapper
+.nav-wrapper {
+    padding: 1rem 0;
+    @include border-top-radius($card-border-radius);
+
+    + .card {
+        @include border-top-radius(0);
+        @include border-bottom-radius($card-border-radius);
+    }
+}
+
+
+// Nav links
+
+.nav-link {
+    color: $nav-link-color;
+
+    &:hover {
+        color: $nav-link-hover-color;
+    }
+
+    i.ni {
+        position: relative;
+        top: 2px;
+    }
+}

src/assets/scss/core/paginations/_pagination.scss

@@ -0,0 +1,48 @@
+//
+// Pagination
+//
+
+
+.page-item {
+    &.active .page-link {
+        box-shadow: $pagination-active-box-shadow;
+    }
+
+    .page-link,
+    span {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+        margin: 0 3px;
+        border-radius: 50% !important;
+        width: 36px;
+		height: 36px;
+		font-size: $font-size-sm;
+    }
+}
+
+
+// Size variations
+
+.pagination-lg {
+    .page-item {
+        .page-link,
+        span {
+            width: 46px;
+            height: 46px;
+            line-height: 46px;
+        }
+    }
+}
+
+.pagination-sm {
+    .page-item {
+        .page-link,
+        span {
+            width: 30px;
+            height: 30px;
+            line-height: 30px;
+        }
+    }
+}

src/assets/scss/core/popovers/_popover.scss

@@ -0,0 +1,21 @@
+//
+// Popover
+//
+
+
+.popover {
+    border: 0;
+}
+
+.popover-header {
+	font-weight: $font-weight-bold;
+}
+
+
+// Alternative colors
+
+@each $color, $value in $theme-colors {
+    .popover-#{$color} {
+        @include popover-variant($value);
+    }
+}

src/assets/scss/core/progresses/_progress.scss

@@ -0,0 +1,79 @@
+//
+// Progress
+//
+
+
+// Progress container
+
+.progress-wrapper {
+    position: relative;
+    padding-top: 1.5rem;
+}
+
+
+// General styles
+
+.progress {
+    height: 8px;
+    margin-bottom: $spacer;
+    overflow: hidden;
+    border-radius: $border-radius-sm;
+    background-color: $progress-bg;
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+
+    .sr-only {
+        width: auto;
+        height: 20px;
+        margin: 0 0 0 30px;
+        left: 0;
+        clip: auto;
+        line-height: 20px;
+        font-size: 13px;
+    }
+}
+
+
+// Progress inner elements
+
+.progress-heading {
+    font-size: 14px;
+    font-weight: 500;
+    margin: 0 0 2px;
+    padding: 0;
+}
+
+.progress-bar {
+    box-shadow: none;
+    border-radius: 0;
+    height: auto;
+}
+
+.progress-info{
+    margin-bottom: .5rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.progress-label {
+    span {
+        display: inline-block;
+        color: $primary;
+        font-size: .625rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        background: rgba($primary, .1);
+        padding: .25rem 1rem;
+        border-radius: 30px;
+    }
+}
+
+.progress-percentage {
+    text-align: right;
+    span {
+        display: inline-block;
+        color: $gray-600;
+        font-size: .875rem;
+        font-weight: 600;
+    }
+}

src/assets/scss/core/separators/_separator.scss

@@ -0,0 +1,54 @@
+//
+// Separator
+// add svg on top or bottom of a section for a more stylish visual
+//
+
+
+.separator {
+    position: absolute;
+    top: auto;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 150px;
+    transform: translateZ(0);
+    overflow: hidden;
+    pointer-events: none;
+
+    svg {
+        position: absolute;
+        pointer-events: none;
+    }
+}
+
+.separator-top {
+    top: 0;
+    bottom: auto;
+
+    svg {
+        top: 0;
+    }
+}
+
+.separator-bottom {
+    top: auto;
+    bottom: 0;
+
+    svg {
+        bottom: 0;
+    }
+}
+
+.separator-inverse {
+    transform: rotate(180deg);
+}
+
+// Styles
+
+.separator-skew {
+    height: 60px;
+
+    @include media-breakpoint-up(xl) {
+        height: 70px;
+    }
+}

src/assets/scss/core/tables/_table.scss

@@ -0,0 +1,118 @@
+//
+// Table
+//
+
+
+// General styles
+
+.table {
+    thead th {
+        padding-top: $table-head-spacer-y;
+        padding-bottom: $table-head-spacer-y;
+        font-size: $table-head-font-size;
+        text-transform: $table-head-text-transform;
+        letter-spacing: $table-head-letter-spacing;
+        border-bottom: $table-border-width solid $table-border-color;
+    }
+
+    th {
+        font-weight: $table-head-font-weight;
+    }
+
+    td {
+        .progress {
+            height: 3px;
+            width: 120px;
+            margin: 0;
+        }
+    }
+
+    td,
+    th {
+        font-size: $table-body-font-size;
+        white-space: nowrap;
+    }
+
+
+    // Vetical align table content
+
+    &.align-items-center {
+        td,
+        th {
+            vertical-align: middle;
+        }
+    }
+
+
+   // Styles for dark table
+
+   .thead-dark {
+        th {
+            background-color: $table-dark-head-bg;
+            color: $table-dark-head-color;
+        }
+    }
+
+
+    // Styles for light table
+
+    .thead-light {
+        th {
+            background-color: $table-head-bg;
+            color: $table-head-color;
+        }
+    }
+}
+
+
+// Add transition for hover state
+
+.table-hover {
+    tr {
+        @include transition($transition-base);
+    }
+}
+
+
+// Flush tables
+
+.table-flush {
+    td,
+    th {
+        border-left: 0;
+        border-right: 0;
+    }
+
+    tbody {
+        tr {
+            &:first-child {
+                td,
+                th {
+                    border-top: 0;
+                }
+            }
+
+            &:last-child {
+                td,
+                th {
+                    border-bottom: 0;
+                }
+            }
+        }
+    }
+}
+
+
+// Tables inside cards
+
+.card {
+    .table {
+        margin-bottom: 0;
+
+        td,
+        th {
+            padding-left: $card-spacer-x;
+            padding-right: $card-spacer-x;
+        }
+    }
+}

src/assets/scss/core/type/_article.scss

@@ -0,0 +1,22 @@
+//
+// Article
+// 
+
+article {
+	h4:not(:first-child),
+	h5:not(:first-child) {
+		margin-top: 3rem;
+	}
+
+	h4, h5 {
+		margin-bottom: 1.5rem;
+	}
+
+	figure {
+		margin: 3rem 0;
+	}
+
+	h5 + figure {
+		margin-top: 0;
+	}
+}

src/assets/scss/core/type/_display.scss

@@ -0,0 +1,14 @@
+//
+// Display
+//
+
+
+.display-1,
+.display-2,
+.display-3,
+.display-4 {
+	span {
+		display: block;
+		font-weight: $font-weight-light;
+	}
+}

src/assets/scss/core/type/_heading.scss

@@ -0,0 +1,52 @@
+//
+// Heading
+//
+
+
+// General styles
+
+.heading {
+	letter-spacing: $heading-letter-spacing;
+	font-size: $heading-font-size;
+	text-transform: $heading-text-transform;
+	font-weight: $heading-font-weight;
+}
+
+
+// Heading variations
+
+.heading-small {
+	padding-top: .25rem;
+	padding-bottom: .25rem;
+	font-size: .75rem;
+	text-transform: uppercase;
+	letter-spacing: .04em;
+}
+
+.heading-title {
+	letter-spacing: $heading-title-letter-spacing;
+	font-size: $heading-title-font-size;
+	font-weight: $heading-title-font-weight;
+	text-transform: $heading-title-text-transform;
+}
+
+.heading-section {
+	letter-spacing: $heading-section-letter-spacing;
+	font-size: $heading-section-font-size;
+	font-weight: $heading-section-font-weight;
+	text-transform: $heading-section-text-transform;
+
+	img {
+		display: block;
+		width: 72px;
+		height: 72px;
+		margin-bottom: 1.5rem;
+	}
+
+	&.text-center {
+		img {
+			margin-left: auto;
+			margin-right: auto;
+		}
+	}
+}

src/assets/scss/core/type/_type.scss

@@ -0,0 +1,27 @@
+//
+// Type
+//
+
+
+// Paragraphs
+
+p {
+	font-size: $paragraph-font-size;
+	font-weight: $paragraph-font-weight;
+	line-height: $paragraph-line-height;
+}
+
+.lead {
+	font-size: $lead-font-size;
+  	font-weight: $lead-font-weight;
+	line-height: $paragraph-line-height;
+	margin-top: 1.5rem;
+
+	+ .btn-wrapper {
+		margin-top: 3rem;
+	}
+}
+
+.description {
+	font-size: $font-size-sm;
+}

src/assets/scss/core/utilities/_backgrounds.scss

@@ -0,0 +1,51 @@
+//
+// Backgrounds
+//
+
+
+@each $color, $value in $colors {
+	@include bg-variant(".bg-#{$color}", $value);
+}
+
+@each $color, $value in $theme-colors {
+	@include bg-gradient-variant(".bg-gradient-#{$color}", $value);
+}
+
+@each $color, $value in $colors {
+	@include bg-gradient-variant(".bg-gradient-#{$color}", $value);
+}
+
+
+// Background colors with transparency
+
+@each $color, $value in $theme-colors {
+    @include bg-translucent-variant(".bg-translucent-#{$color}", $value);
+}
+
+
+// Sections backgrounds
+
+@each $color, $value in $section-colors {
+    @include bg-variant(".section-#{$color}", $value);
+}
+
+@each $color, $value in $theme-colors {
+    @include bg-gradient-variant(".bg-gradient-#{$color}", $value);
+}
+
+
+// Shape (svg) fill colors
+
+@each $color, $value in $theme-colors {
+    .fill-#{$color}  {
+        fill: $value;
+    }
+
+    .stroke-#{$color}  {
+        stroke: $value;
+    }
+}
+
+.fill-opacity-8 {
+	fill-opacity: .8;
+}

src/assets/scss/core/utilities/_blurable.scss

@@ -0,0 +1,37 @@
+//
+// Blurable
+// add a blue effect on hover on any element with .blur--hover class
+//
+
+.blur--hover {
+    position: relative;
+
+    .blur-item {
+        transition: 1s cubic-bezier(.19,1,.22,1);
+        will-change: transform;
+        filter: blur(0);
+        opacity: 1;
+    }
+
+    .blur-hidden {
+        position: absolute;
+        top: calc(50% + 7px);
+        left: 50%;
+        transform: translate(-50%, -50%);
+        opacity: 0;
+        transition: $transition-base;
+        z-index: 100;
+    }
+    &:hover {
+        .blur-item {
+            opacity: .8;
+            filter: blur(10px);
+            transform: scale(.95);
+            z-index: 1;
+        }
+        .blur-hidden {
+            opacity: 1;
+            top: 50%;
+        }
+    }
+}

src/assets/scss/core/utilities/_floating.scss

@@ -0,0 +1,64 @@
+//
+// Floating
+// floating animation utility class
+//
+
+
+.floating {
+	animation: floating 3s ease infinite;
+	will-change: transform;
+
+	&:hover {
+        animation-play-state: paused;
+    }
+}
+
+
+// Size variations
+
+.floating-lg {
+	animation: floating-lg 3s ease infinite;
+}
+
+.floating-sm {
+	animation: floating-sm 3s ease infinite;
+}
+
+
+// Keyframes
+
+@keyframes floating-lg {
+    0% {
+        transform: translateY(0px)
+    }
+    50% {
+        transform: translateY(15px)
+    }
+    100% {
+        transform: translateY(0px)
+    }
+}
+
+@keyframes floating {
+    0% {
+        transform: translateY(0px)
+    }
+    50% {
+        transform: translateY(10px)
+    }
+    100% {
+        transform: translateY(0px)
+    }
+}
+
+@keyframes floating-sm {
+    0% {
+        transform: translateY(0px)
+    }
+    50% {
+        transform: translateY(5px)
+    }
+    100% {
+        transform: translateY(0px)
+    }
+}

src/assets/scss/core/utilities/_helper.scss

@@ -0,0 +1,18 @@
+//
+// Helper
+// helper classes for different cases
+//
+
+
+// Clearfix for sections that use float property
+
+.floatfix {
+    &:before,
+    &:after {
+        content: '';
+        display: table;
+    }
+    &:after {
+        clear: both;
+    }
+}

src/assets/scss/core/utilities/_image.scss

@@ -0,0 +1,9 @@
+//
+// Image
+//
+
+.img-center {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}

src/assets/scss/core/utilities/_opacity.scss

@@ -0,0 +1,35 @@
+//
+// Opacity
+// modify the transparency of an element with this quick modifier classes
+//
+
+.opacity-1 {
+    opacity: .1 !important;
+}
+.opacity-2 {
+    opacity: .2 !important;
+}
+.opacity-3 {
+    opacity: .3 !important;
+}
+.opacity-4 {
+    opacity: .4 !important;
+}
+.opacity-5 {
+    opacity: .5 !important;
+}
+.opacity-6 {
+    opacity: .6 !important;
+}
+.opacity-7 {
+    opacity: .7 !important;
+}
+.opacity-8 {
+    opacity: .8 !important;
+}
+.opacity-8 {
+    opacity: .9 !important;
+}
+.opacity-10 {
+    opacity: 1 !important;
+}

src/assets/scss/core/utilities/_overflow.scss

@@ -0,0 +1,11 @@
+//
+// Overflow
+//
+
+.overflow-visible {
+    overflow: visible !important;
+}
+
+.overflow-hidden {
+    overflow: hidden !important;
+}

src/assets/scss/core/utilities/_position.scss

@@ -0,0 +1,25 @@
+//
+// Position
+// modifier classes to be applied on an abosolute positioned element
+// use it next to .position-absolute class
+//
+
+@each $size, $value in $spacers {
+	.top-#{$size} {
+		top: $value;
+	}
+	.right-#{$size} {
+		right: $value;
+	}
+	.bottom-#{$size} {
+		bottom: $value;
+	}
+	.left-#{$size} {
+		left: $value;
+	}
+}
+
+.center {
+	left: 50%;
+	transform: translateX(-50%);
+}

src/assets/scss/core/utilities/_shadows.scss

@@ -0,0 +1,28 @@
+//
+// Shadows
+//
+
+// General styles
+[class*="shadow"] {
+	@if $enable-transitions {
+        transition: $transition-base;
+    }
+}
+
+
+// Size variations
+.shadow-sm--hover:hover {
+	box-shadow: $box-shadow-sm !important;
+}
+
+.shadow--hover:hover {
+	box-shadow: $box-shadow !important;
+}
+
+.shadow-lg--hover:hover {
+	box-shadow: $box-shadow-lg !important;
+}
+
+.shadow-none--hover:hover {
+	box-shadow: none !important;
+}

src/assets/scss/core/utilities/_sizing.scss

@@ -0,0 +1,7 @@
+//
+// Height
+//
+
+.h-100vh {
+	height: 100vh !important;
+}

src/assets/scss/core/utilities/_spacing.scss

@@ -0,0 +1,107 @@
+//
+// Spacing
+//
+
+.row.row-grid > [class*="col-"] + [class*="col-"] {
+    margin-top: 3rem;
+}
+
+@include media-breakpoint-up(lg) {
+    .row.row-grid > [class*="col-lg-"] + [class*="col-lg-"] {
+        margin-top: 0;
+    }
+}
+@include media-breakpoint-up(md) {
+    .row.row-grid > [class*="col-md-"] + [class*="col-md-"] {
+        margin-top: 0;
+    }
+}
+@include media-breakpoint-up(sm) {
+    .row.row-grid > [class*="col-sm-"] + [class*="col-sm-"] {
+        margin-top: 0;
+    }
+}
+
+.row-grid + .row-grid {
+    margin-top: 3rem;
+}
+
+
+// Negative margins and paddings
+
+@media(min-width: 992px) {
+    [class*="mt--"],
+    [class*="mr--"],
+    [class*="mb--"],
+    [class*="ml--"] {
+        
+    }
+
+
+    // Large negative margins in pixels
+
+    .mt--100 {
+        margin-top: -100px !important;
+    }
+    .mr--100 {
+        margin-right: -100px !important;
+    }
+    .mb--100 {
+        margin-bottom: -100px !important;
+    }
+    .ml--100 {
+        margin-left: -100px !important;
+    }
+    .mt--150 {
+        margin-top: -150px !important;
+    }
+    .mb--150 {
+        margin-bottom: -150px !important;
+    }
+    .mt--200 {
+        margin-top: -200px !important;
+    }
+    .mb--200 {
+        margin-bottom: -200px !important;
+    }
+    .mt--300 {
+        margin-top: -300px !important;
+    }
+    .mb--300 {
+        margin-bottom: -300px !important;
+    }
+
+
+    // Large margins in pixels
+
+    .pt-100 {
+        padding-top: 100px !important;
+    }
+    .pb-100 {
+        padding-bottom: 100px !important;
+    }
+    .pt-150 {
+        padding-top: 150px !important;
+    }
+    .pb-150 {
+        padding-bottom: 150px !important;
+    }
+    .pt-200 {
+        padding-top: 200px !important;
+    }
+    .pb-200 {
+        padding-bottom: 200px !important;
+    }
+    .pt-250 {
+        padding-top: 250px !important;
+    }
+    .pb-250 {
+        padding-bottom: 250px !important;
+    }
+    .pt-300 {
+        padding-top: 300px!important;
+    }
+    .pb-300 {
+        padding-bottom: 300px!important;
+    }
+}

src/assets/scss/core/utilities/_text.scss

@@ -0,0 +1,49 @@
+// Weight and italics
+
+.font-weight-300 { font-weight: 300 !important; }
+.font-weight-400 { font-weight: 400 !important; }
+.font-weight-500 { font-weight: 500 !important; }
+.font-weight-600 { font-weight: 600 !important; }
+.font-weight-700 { font-weight: 700 !important; }
+.font-weight-800 { font-weight: 800 !important; }
+.font-weight-900 { font-weight: 900 !important; }
+
+
+// Text decorations
+
+.text-underline { text-decoration: underline; }
+.text-through { text-decoration: line-through; }
+
+
+// Text size
+
+.text-xs { font-size: $font-size-xs !important; }
+.text-sm { font-size: $font-size-sm !important; }
+.text-lg { font-size: $font-size-lg !important; }
+.text-xl { font-size: $font-size-xl !important; }
+
+
+// Line heights
+
+.lh-100 { line-height: 1; }
+.lh-110 { line-height: 1.1; }
+.lh-120 { line-height: 1.2; }
+.lh-130 { line-height: 1.3; }
+.lh-140 { line-height: 1.4; }
+.lh-150 { line-height: 1.5; }
+.lh-160 { line-height: 1.6; }
+.lh-170 { line-height: 1.7; }
+.lh-180 { line-height: 1.8; }
+
+
+// Letter spacings
+
+.ls-1 { letter-spacing: .0625rem; }
+.ls-15 { letter-spacing: .09375rem; }
+.ls-2 { letter-spacing: 0.125rem; }
+
+// Color variations
+
+@each $color, $value in $colors {
+	@include text-emphasis-variant(".text-#{$color}", $value);
+}

src/assets/scss/core/utilities/_transform.scss

@@ -0,0 +1,13 @@
+//
+// Tranform
+//
+
+
+@include media-breakpoint-up(lg) {
+	.transform-perspective-right {
+		transform: scale(1) perspective(1040px) rotateY(-11deg) rotateX(2deg) rotate(2deg);
+	}
+	.transform-perspective-left{
+		transform: scale(1) perspective(2000px) rotateY(11deg) rotateX(2deg) rotate(-2deg)
+	}
+}

src/assets/scss/core/vendors/_flatpickr.scss

@@ -0,0 +1,72 @@
+%active-day {
+  background: $datepicker-active-background;
+  color: $datepicker-active-color;
+  box-shadow: $datepicker-active-box-shadow;
+  border: none;
+}
+.flatpickr-calendar {
+  @include box-shadow($dropdown-box-shadow);
+  padding: $datepicker-dropdown-padding;
+  width: 347px;
+  color: $gray-700;
+
+  .flatpickr-weekday {
+    text-align: center;
+    font-size: $font-size-sm;
+    color: $gray-700;
+    font-weight: normal;
+  }
+  .flatpickr-day {
+    border: none;
+  }
+  .flatpickr-day:hover {
+    @extend %active-day;
+  }
+  .flatpickr-day.selected {
+    @extend %active-day;
+    &:hover {
+      @extend %active-day;
+    }
+  }
+
+  .flatpickr-day.today {
+    border: 1px solid $datepicker-active-background;
+    &:hover {
+      background: $datepicker-active-background;
+      color: $datepicker-active-color;
+    }
+  }
+  .flatpickr-day.inRange {
+    background: $datepicker-active-background !important;
+    color: $datepicker-active-color;
+    box-shadow: -5px 0 0 $datepicker-active-background, 5px 0 0 $datepicker-active-background;
+    border: none !important;
+  }
+
+  .flatpickr-day.startRange, .flatpickr-day.endRange {
+    background: $datepicker-active-background;
+  }
+
+  .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
+  .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
+  .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
+    box-shadow: -10px 0 0 $datepicker-active-background;
+  }
+
+  .flatpickr-months .flatpickr-prev-month:hover svg,
+  .flatpickr-months .flatpickr-next-month:hover svg{
+    fill: $datepicker-active-background;
+  }
+
+  .flatpickr-current-month span.cur-month,
+  .flatpickr-current-month input.cur-year{
+    padding: 0 10px;
+    color: $gray-700;
+    font-size: $font-size-sm;
+    font-weight: 500;
+    &:hover {
+      background: $gray-200;
+      border-radius: $datepicker-header-cell-border-radius;
+    }
+  }
+}

src/assets/scss/core/vendors/_headroom.scss

@@ -0,0 +1,25 @@
+//
+// Headroom
+//
+
+
+.headroom {
+    will-change: transform;
+    background-color: inherit;
+    @include transition($transition-base);
+}
+.headroom--pinned {
+	@extend .position-fixed;
+    transform: translateY(0%);
+}
+.headroom--unpinned {
+	@extend .position-fixed;
+    transform: translateY(-100%);
+}
+
+.headroom--not-top {
+	padding-top: .5rem;
+	padding-bottom: .5rem;
+    background-color: theme-color("default") !important;
+    box-shadow: 0 1px 10px rgba(130, 130, 134, 0.1);
+}

src/assets/scss/core/vendors/_nouislider.scss

@@ -0,0 +1,413 @@
+//
+// NoUi Slider
+//
+
+
+// Original styles
+
+.noUi-target,
+.noUi-target * {
+    -webkit-touch-callout: none;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-user-select: none;
+    touch-action: none;
+    user-select: none;
+    box-sizing: border-box;
+}
+
+.noUi-target {
+    position: relative;
+    direction: ltr;
+}
+
+.noUi-base,
+.noUi-connects {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    z-index: 1;
+}
+
+
+// Wrapper for all connect elements
+
+.noUi-connects {
+    overflow: hidden;
+    z-index: 0;
+}
+
+.noUi-connect,
+.noUi-origin {
+    will-change: transform;
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    transform-origin: 0 0;
+}
+
+
+html:not([dir="rtl"]) .noUi-horizontal .noUi-origin {
+    left: auto;
+    right: 0;
+}
+
+.noUi-vertical .noUi-origin {
+    width: 0;
+}
+
+.noUi-horizontal .noUi-origin {
+    height: 0;
+}
+
+.noUi-handle {
+    position: absolute;
+}
+
+.noUi-state-tap .noUi-connect,
+.noUi-state-tap .noUi-origin {
+    transition: transform .3s;
+}
+
+.noUi-state-drag * {
+    cursor: inherit !important;
+}
+
+.noUi-horizontal {
+    height: $noui-target-thickness;
+}
+
+.noUi-horizontal .noUi-handle {
+    width: 34px;
+    height: 28px;
+    left: -17px;
+    top: -6px;
+}
+
+.noUi-vertical {
+    width: $noui-target-thickness;
+}
+
+.noUi-vertical .noUi-handle {
+    width: 28px;
+    height: 34px;
+    left: -6px;
+    top: -17px;
+}
+
+html:not([dir="rtl"]) .noUi-horizontal .noUi-handle {
+    right: -17px;
+    left: auto;
+}
+
+.noUi-connects {
+    border-radius: 3px;
+}
+
+.noUi-connect {
+    background: $noui-slider-connect-bg;
+}
+
+.noUi-draggable {
+    cursor: ew-resize;
+}
+
+.noUi-vertical .noUi-draggable {
+    cursor: ns-resize;
+}
+
+.noUi-handle {
+    border: 1px solid #D9D9D9;
+    border-radius: 3px;
+    background: #FFF;
+    cursor: default;
+    box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;
+    outline: none;
+}
+
+.noUi-active {
+    outline: none;
+}
+
+
+/* Disabled state;
+ */
+
+[disabled] .noUi-connect {
+    background: #B8B8B8;
+}
+
+[disabled].noUi-target,
+[disabled].noUi-handle,
+[disabled] .noUi-handle {
+    cursor: not-allowed;
+}
+
+
+/* Base;
+ *
+ */
+
+.noUi-pips,
+.noUi-pips * {
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.noUi-pips {
+    position: absolute;
+    color: #999;
+}
+
+
+/* Values;
+ *
+ */
+
+.noUi-value {
+    position: absolute;
+    white-space: nowrap;
+    text-align: center;
+}
+
+.noUi-value-sub {
+    color: #ccc;
+    font-size: 10px;
+}
+
+
+/* Markings;
+ *
+ */
+
+.noUi-marker {
+    position: absolute;
+    background: #CCC;
+}
+
+.noUi-marker-sub {
+    background: #AAA;
+}
+
+.noUi-marker-large {
+    background: #AAA;
+}
+
+
+/* Horizontal layout;
+ *
+ */
+
+.noUi-pips-horizontal {
+    padding: 10px 0;
+    height: 80px;
+    top: 100%;
+    left: 0;
+    width: 100%;
+}
+
+.noUi-value-horizontal {
+    transform: translate(-50%, 50%);
+}
+
+.noUi-rtl .noUi-value-horizontal {
+    transform: translate(50%, 50%);
+}
+
+.noUi-marker-horizontal.noUi-marker {
+    margin-left: -1px;
+    width: 2px;
+    height: 5px;
+}
+
+.noUi-marker-horizontal.noUi-marker-sub {
+    height: 10px;
+}
+
+.noUi-marker-horizontal.noUi-marker-large {
+    height: 15px;
+}
+
+
+/* Vertical layout;
+ *
+ */
+
+.noUi-pips-vertical {
+    padding: 0 10px;
+    height: 100%;
+    top: 0;
+    left: 100%;
+}
+
+.noUi-value-vertical {
+    -webkit-transform: translate(0, -50%);
+    transform: translate(0, -50%, 0);
+    padding-left: 25px;
+}
+
+.noUi-rtl .noUi-value-vertical {
+    -webkit-transform: translate(0, 50%);
+    transform: translate(0, 50%);
+}
+
+.noUi-marker-vertical.noUi-marker {
+    width: 5px;
+    height: 2px;
+    margin-top: -1px;
+}
+
+.noUi-marker-vertical.noUi-marker-sub {
+    width: 10px;
+}
+
+.noUi-marker-vertical.noUi-marker-large {
+    width: 15px;
+}
+
+.noUi-tooltip {
+    display: block;
+    position: absolute;
+    border: 1px solid #D9D9D9;
+    border-radius: 3px;
+    background: #fff;
+    color: #000;
+    padding: 5px;
+    text-align: center;
+    white-space: nowrap;
+}
+
+.noUi-horizontal .noUi-tooltip {
+    -webkit-transform: translate(-50%, 0);
+    transform: translate(-50%, 0);
+    left: 50%;
+    bottom: 120%;
+}
+
+.noUi-vertical .noUi-tooltip {
+    -webkit-transform: translate(0, -50%);
+    transform: translate(0, -50%);
+    top: 50%;
+    right: 120%;
+}
+
+
+//  Custom styles
+
+.noUi-target {
+    background: $noui-target-bg;
+    border-radius: $noui-target-border-radius;
+    border: 0;
+    box-shadow: $noui-target-box-shadow;
+    margin: 15px 0;
+    cursor: pointer;
+}
+
+.noUi-horizontal {
+    height: $noui-target-thickness;
+}
+
+html:not([dir="rtl"]) .noUi-horizontal .noUi-handle {
+    right: -10px;
+}
+
+.noUi-vertical {
+    width: $noui-target-thickness;
+}
+
+.noUi-connect {
+    background: theme-color("primary");
+    box-shadow: none;
+}
+
+.noUi-handle {
+
+}
+
+.noUi-horizontal .noUi-handle,
+.noUi-vertical .noUi-handle {
+    top: -$noui-target-thickness;
+    width: $noui-handle-width;
+    height: $noui-handle-width;
+    border-radius: 100%;
+    box-shadow: none;
+    cursor: pointer;
+    background-color: $noui-handle-bg;
+    border: $noui-handle-border;
+    transition: box-shadow .15s, transform .15s;
+}
+
+.noUi-horizontal .noUi-handle.noUi-active,
+.noUi-vertical .noUi-handle.noUi-active {
+    box-shadow: 0px 0px 0px 2px rgba($noui-handle-bg, 1);
+}
+
+.input-slider--cyan .noUi-connect {
+    background: $cyan;
+}
+
+
+/* Disabled state */
+
+[disabled] .noUi-connect,
+[disabled].noUi-connect {
+    background: $noui-slider-connect-disabled-bg;
+}
+
+[disabled] .noUi-handle,
+[disabled].noUi-origin {
+    cursor: not-allowed;
+}
+
+/* Range slider value labels */
+
+.range-slider-value {
+    font-size: $font-size-xs;
+    font-weight: 500;
+    background-color: rgba($dark, .7);
+    color: color-yiq($dark);
+    border-radius: 10px;
+    padding: .4em .8em .3em .85em;
+}
+
+.range-slider-wrapper .upper-info {
+    font-weight: 400;
+    margin-bottom: 5px;
+}
+
+.input-slider-value-output {
+    background: #333;
+    color: #fff;
+    padding: 4px 8px;
+    position: relative;
+    top: 12px;
+    font-size: 11px;
+    border-radius: 2px;
+}
+
+.input-slider-value-output:after {
+    bottom: 100%;
+    left: 10px;
+    border: solid transparent;
+    content: " ";
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+    border-color: rgba(136, 183, 213, 0);
+    border-bottom-color: #333;
+    border-width: 4px;
+    margin-left: -4px;
+}
+
+.input-slider-value-output.left:after {
+    left: 10px;
+    right: auto;
+}
+
+.input-slider-value-output.right:after {
+    right: 10px;
+    left: auto;
+}

src/assets/scss/core/vendors/_scrollbar.scss

@@ -0,0 +1,35 @@
+//
+// Custom scrollbar
+//
+
+.scrollbar-inner {
+    height: 100%;
+
+    &:not(:hover) .scroll-element {
+        opacity: 0;
+    }
+
+    .scroll-element {
+        transition: opacity 300ms;
+        margin-right: 2px;
+
+        .scroll-bar,
+        .scroll-element_track {
+            transition: background-color 300ms;
+        }
+
+        .scroll-element_track {
+            background-color: transparent;
+        }
+    }
+
+    .scroll-element.scroll-y {
+        width: 3px;
+        right: 0;
+    }
+
+    .scroll-element.scroll-x {
+        height: 3px;
+        bottom: 0;
+    }
+}

src/assets/scss/custom.scss

@@ -0,0 +1,11 @@
+pre.cmd {
+  color: #ffffff;
+}
+
+.vue-terminal .terminal-window {
+  height: 500px;
+}
+
+.vue-terminal {
+  height: 500px;
+}

src/assets/scss/custom/_alert.scss

@@ -0,0 +1,6 @@
+//
+// Alert
+//
+
+@import "../core/alerts/alert";
+@import "../core/alerts/alert-dismissible";

src/assets/scss/custom/_avatar.scss

@@ -0,0 +1,6 @@
+//
+// Avatar
+//
+
+@import "../core/avatars/avatar";
+@import "../core/avatars/avatar-group";

src/assets/scss/custom/_badge.scss

@@ -0,0 +1,7 @@
+//
+// Badge
+//
+
+@import "../core/badges/badge";
+@import "../core/badges/badge-circle";
+@import "../core/badges/badge-dot";

src/assets/scss/custom/_buttons.scss

@@ -0,0 +1,7 @@
+//
+// Button
+//
+
+@import "../core/buttons/button";
+@import "../core/buttons/button-icon";
+@import "../core/buttons/button-brand";

src/assets/scss/custom/_card.scss

@@ -0,0 +1,9 @@
+//
+// Cards
+//
+
+@import "../core/cards/card";
+@import "../core/cards/card-profile";
+@import "../core/cards/card-blockquote";
+@import "../core/cards/card-animations";
+@import "../core/cards/card-stats";

src/assets/scss/custom/_chart.scss

@@ -0,0 +1,5 @@
+//
+// Chart
+//
+
+@import "../core/charts/chart";

src/assets/scss/custom/_close.scss

@@ -0,0 +1,5 @@
+//
+// Close
+//
+
+@import "../core/close/close"

src/assets/scss/custom/_components.scss

@@ -0,0 +1,31 @@
+//
+// Components
+//
+
+@import "custom/alert";
+@import "custom/avatar";
+@import "custom/badge";
+@import "custom/buttons";
+@import "custom/card";
+@import "custom/chart";
+@import "custom/close";
+@import "custom/content";
+@import "custom/custom-forms";
+@import "custom/dropdown";
+@import "custom/footer";
+@import "custom/forms";
+@import "custom/header";
+@import "custom/icons";
+@import "custom/input-group";
+@import "custom/list-group";
+@import "custom/map";
+@import "custom/mask";
+@import "custom/modal";
+@import "custom/nav";
+@import "custom/navbar";
+@import "custom/pagination";
+@import "custom/popover";
+@import "custom/progress";
+@import "custom/separator";
+@import "custom/tables";
+@import "custom/type";

src/assets/scss/custom/_content.scss

@@ -0,0 +1,47 @@
+.main-content {
+    position: relative;
+
+    // Navbar
+    .navbar-top {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        z-index: 1;
+        background-color: transparent;
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+    }
+
+    // Container
+    .container-fluid {
+        @include media-breakpoint-up(md) {
+            padding-left: ($main-content-padding-x + $grid-gutter-width / 2) !important;
+            padding-right: ($main-content-padding-x + $grid-gutter-width / 2) !important;
+        }
+    }
+}
+
+
+// Offsets the main content depending on the sidebar positioning
+
+.navbar-vertical.navbar-expand {
+
+    @each $breakpoint,
+    $dimension in $grid-breakpoints {
+
+        &-#{$breakpoint} {
+
+            @include media-breakpoint-up(#{$breakpoint}) {
+
+                // Left
+                &.fixed-left + .main-content {
+                    margin-left: $navbar-vertical-width;
+                } // Right
+                &.fixed-right + .main-content {
+                    margin-right: $navbar-vertical-width;
+                }
+            }
+        }
+    }
+}

src/assets/scss/custom/_custom-forms.scss

@@ -0,0 +1,9 @@
+//
+// Custom form
+//
+
+@import "../core/custom-forms/custom-form";
+@import "../core/custom-forms/custom-control";
+@import "../core/custom-forms/custom-checkbox";
+@import "../core/custom-forms/custom-radio";
+@import "../core/custom-forms/custom-toggle";

src/assets/scss/custom/_dropdown.scss

@@ -0,0 +1,5 @@
+//
+// Dropdown
+//
+
+@import "../core/dropdowns/dropdown";

src/assets/scss/custom/_footer.scss

@@ -0,0 +1,5 @@
+//
+// Footer
+//
+
+@import "../core/footers/footer";