dependencies update, new package

New navigation

.github/CODE_OF_CONDUCT.md

@@ -0,0 +1,10 @@
+# Tabler UI Community Conduct Guideline
+
+The following community guidelines are based on [The Ruby Community Conduct Guidelines](https://www.ruby-lang.org/en/conduct/).
+
+This document provides community guidelines for a respectful, productive, and collaborative place for any person who is willing to contribute to the Tabler project. It applies to all "collaborative space", which is defined as community communications channels (such as mailing lists, submitted patches, commit comments, etc.).
+
+- Participants will be tolerant of opposing views.
+- Participants must ensure that their language and actions are free of personal attacks and disparaging personal remarks.
+- When interpreting the words and actions of others, participants should always assume good intentions.
+- Behaviour which can be reasonably considered harassment will not be tolerated.

Gemfile

@@ -3,10 +3,11 @@ source "https://rubygems.org"
 gem "jekyll"
 
 group :jekyll_plugins do
-  gem "jekyll-random"
+	gem 'jekyll-toc'
-  gem "jekyll-tidy"
+	gem "jekyll-random"
-  gem "jekyll-timeago"
+	gem "jekyll-tidy"
-  gem 'jekyll-redirect-from'
+	gem "jekyll-timeago"
+	gem 'jekyll-redirect-from'
 end
 
 gem 'wdm', '>= 0.1.1' if Gem.win_platform?

_config.yml

@@ -1,7 +1,7 @@
 source: pages
 destination: tmp
 
-version: v1.0.0-alpha
+version: 1.0.0-alpha.3
 title: Tabler
 description: Premium and Open Source dashboard template with responsive and high quality UI.
 github_url: https://github.com/tabler/tabler
@@ -12,6 +12,7 @@ dark-theme: false
 
 plugins:
   - jekyll-random
+  - jekyll-toc
   - jekyll-tidy
   - jekyll-timeago
   - jekyll-redirect-from
@@ -20,8 +21,6 @@ tabler-plugins:
   - tabler-flags
   - tabler-payments
   - tabler-buttons
-  - tabler-dark
-  - tabler-rtl
 
 exclude:
   - .jekyll-cache
@@ -30,30 +29,28 @@ keep_files:
   - css/ui-kit.css
   - css/dark.css
   - css/rtl.css
-#- js/ui-kit.js
 
 markdown: kramdown
-highlighter: rouge
-
 kramdown:
+  input: GFM
   syntax_highlighter: rouge
-  syntax_highlighter_opts:
-    css_class: ''
-    span:
-      line_numbers: false
 
 jekyll_tidy:
   compress_html: false
   ignore_env: development
 
+toc:
+  min_level: 2
+  max_level: 2
+  list_class: list-unstyled
 
 collections:
   docs:
-    output: true
+    output: false
   changelog:
     output: false
   components:
-    output: true
+    output: false
 
 defaults:
   - scope:

build/scss-compile.js

@@ -15,7 +15,7 @@ const path = require('path'),
 
 const dir = BUNDLE ? 'dist' : 'tmp-dist';
 
-glob("scss/tabler*.scss", {}, function (er, files) {
+glob("scss/{tabler*,demo}.scss", {}, function (er, files) {
 	files.forEach(function (file) {
 		var basename = path.basename(file, '.scss');
 

js/tabler.js

@@ -2,7 +2,7 @@
 
 import {Dropdown, Tooltip, Popover} from 'bootstrap';
 import 'popper.js';
-// import {CountUp} from "countup.js";
+import {CountUp} from "countup.js";
 
 (function () {
 	/**
@@ -34,9 +34,10 @@ import 'popper.js';
 	/*
 	CountUp
 	*/
-	// let countupTriggerList = [].slice.call(document.querySelectorAll("[data-countup]"));
+	let countupTriggerList = [].slice.call(document.querySelectorAll("[data-countup]"));
-	// countupTriggerList.map(function (countupTriggerEl) {
+	countupTriggerList.map(function (countupTriggerEl) {
-	// 	let dataCountUp = JSON.parse(countupTriggerEl.getAttribute("data-countup"));
+		let dataCountUp;
-	// 	return (new CountUp(countupTriggerEl, parseFloat(countupTriggerEl.innerText), dataCountUp)).start();
+		if(countupTriggerEl.getAttribute("data-countup") != "") dataCountUp = JSON.parse(countupTriggerEl.getAttribute("data-countup"));
-	// });
+		return (new CountUp(countupTriggerEl, parseFloat(countupTriggerEl.innerText), dataCountUp)).start();
+	});
 })();

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tabler",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-alpha.3",
-  "version_short": "1.0.0-alpha.2",
+  "version_short": "1.0.0-alpha.3",
   "description": "Premium and Open Source dashboard template with responsive and high quality UI.",
   "scripts": {
     "start": "npm-run-all clean css-main js-compile-standalone --parallel browsersync watch",
@@ -74,15 +74,15 @@
   "main": "dist/js/tabler.js",
   "homepage": "https://tabler.io",
   "devDependencies": {
-    "@babel/preset-env": "7.8.3",
+    "@babel/preset-env": "7.8.4",
     "browser-sync": "2.26.7",
     "bundlesize": "0.18.0",
     "clean-css-cli": "4.3.0",
     "cross-env": "7.0.0",
     "eslint": "6.8.0",
     "eslint-config-xo": "0.27.2",
-    "eslint-plugin-import": "2.20.0",
+    "eslint-plugin-import": "2.20.1",
-    "eslint-plugin-unicorn": "15.0.1",
+    "eslint-plugin-unicorn": "16.0.0",
     "glob": "7.1.6",
     "http-server": "0.12.1",
     "icon-font-generator": "2.1.10",
@@ -91,7 +91,7 @@
     "nodemon": "2.0.2",
     "npm-run-all": "4.1.5",
     "postcss-cli": "7.1.0",
-    "rollup": "1.30.1",
+    "rollup": "1.31.0",
     "rollup-plugin-babel": "4.3.3",
     "rollup-plugin-babel-minify": "9.1.1",
     "rollup-plugin-commonjs": "10.1.0",
@@ -110,7 +110,7 @@
     "@fullcalendar/interaction": "4.3.0",
     "@fullcalendar/list": "4.3.0",
     "@fullcalendar/timegrid": "4.3.0",
-    "apexcharts": "3.15.3",
+    "apexcharts": "3.15.5",
     "autosize": "4.0.2",
     "bootstrap": "twbs/bootstrap#05fb3f2",
     "countup.js": "2.0.4",

pages/_data/colors.yml

@@ -74,7 +74,6 @@ orange-600: '#cc7522'
 orange-700: '#99581a'
 orange-800: '#663a11'
 orange-900: '#331d09'
-
 yellow: '#fab005'
 yellow-100: '#feefcd'
 yellow-200: '#fddf9b'
@@ -86,6 +85,17 @@ yellow-700: '#966a03'
 yellow-800: '#644602'
 yellow-900: '#322301'
 
+lime: '#94d82d'
+lime-100: '#eaf7d5'
+lime-200: '#d4efab'
+lime-300: '#bfe881'
+lime-400: '#a9e057'
+lime-500: '#94d82d'
+lime-600: '#76ad24'
+lime-700: '#59821b'
+lime-800: '#3b5612'
+lime-900: '#1e2b09'
+
 green: '#5eba00'
 green-100: '#dff1cc'
 green-200: '#bfe399'
@@ -97,17 +107,6 @@ green-700: '#387000'
 green-800: '#264a00'
 green-900: '#132500'
 
-lime: '#7bd235'
-lime-100: '#e5f6d7'
-lime-200: '#caedae'
-lime-300: '#b0e486'
-lime-400: '#95db5d'
-lime-500: '#7bd235'
-lime-600: '#62a82a'
-lime-700: '#4a7e20'
-lime-800: '#315415'
-lime-900: '#192a0b'
-
 teal: '#2bcbba'
 teal-100: '#d5f5f1'
 teal-200: '#aaeae3'
@@ -130,16 +129,16 @@ cyan-700: '#0e616e'
 cyan-800: '#09414a'
 cyan-900: '#052025'
 
-gray: '#cdd1d8'
+gray: '#cbcfd6'
 gray-100: '#f5f7fb'
 gray-200: '#f1f3f8'
 gray-300: '#e9ecf1'
 gray-400: '#dee1e7'
-gray-500: '#cdd1d8'
+gray-500: '#cbcfd6'
-gray-600: '#aeb3bc'
+gray-600: '#a8aeb7'
-gray-700: '#8b929e'
+gray-700: '#7a828f'
-gray-800: '#5f6877'
+gray-800: '#545d6d'
 gray-900: '#354052'
 
-border-color: '#dee1e7'
+border-color: 'rgba(126, 133, 144, 0.24)'
-text-muted: '#8b929e'
+text-muted: '#7e8590'

pages/_data/menu.yml

@@ -1,16 +1,17 @@
 home:
   url: index.html
-  title: Dashboard
+  title: Home
   icon: home
 
 forms:
   url: form-elements.html
-  title: Form elements
+  title: Forms
   icon: check-square
 
 base:
   title: Base
   icon: package
+  columns: 2
   children:
     blank:
       title: Starter page
@@ -92,16 +93,6 @@ base:
         maintenance:
           url: maintenance.html
           title: Maintenance page
-a:
-  title: A
-  icon: menu
-  children:
-    b:
-      title: B
-      children:
-        c:
-          title: C
-          url: tmp.html
 
 layouts:
   title: Layouts
@@ -125,9 +116,10 @@ extra:
       title: Search results
       url: search-results.html
 docs:
-  title: Documentation
+  title: Docs
   icon: file-text
   url: docs/index.html
+  columns: 3
   children:
     index: 
       title: Introduction

pages/_docs/form-elements.md

@@ -197,7 +197,7 @@ bootstrap-link: components/forms/
 {% example %}
 <div class="mb-2">
    <label class="form-label">Date of birth</label>
-   <div class="row row-xs">
+   <div class="row row-sm">
       <div class="col-5">
          <select name="user[month]" class="form-select">
             <option value="">Month</option>

pages/_includes/cards/credit-card.html

@@ -0,0 +1,47 @@
+<div class="card">
+	<div class="card-body">
+		<div class="mb-3">
+			<div class="form-label">Card number</div>
+			{% include ui/form/input-mask.html mask="0000 0000 0000 0000" visible=true %}
+		</div>
+
+		<div class="mb-3">
+			<div class="form-label">Card name</div>
+			<input type="text" class="form-control">
+		</div>
+
+		<div class="row">
+			<div class="col-8">
+				<div class="mb-3">
+					<label class="form-label">Expiration date</label>
+					<div class="row row-sm">
+						<div class="col">
+							<select class="form-select">
+								{% for month in (1..12) %}
+								<option value="{{ month }}">{{ month }}</option>
+								{% endfor %}
+							</select>
+						</div>
+						<div class="col">
+							<select class="form-select">
+								{% for year in (2020..2030) %}
+								<option value="{{ year }}">{{ year }}</option>
+								{% endfor %}
+							</select>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="col">
+				<div class="mb-3">
+					<div class="form-label">CVV</div>
+					<input type="number" class="form-control">
+				</div>
+			</div>
+		</div>
+
+		<div class="mt-2">
+			{% include ui/button.html text="Pay now" color="primary" block=true  %}
+		</div>
+	</div>
+</div>

pages/_includes/cards/feed-card.html

@@ -18,7 +18,7 @@
 		{% endif %}
 
 		{% if include.feed %}
-		<div class="row row-xs">
+		<div class="row row-sm">
 			{% if include.feed == 1 %}
 			<div class="col-6 mb-2">
 				<div class="media media-2x1 rounded">
@@ -61,7 +61,7 @@
 				<div class="media media-2x1 mb-2 rounded">
 					<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[7].file }})"></a>
 				</div>
-				<div class="row row-xs">
+				<div class="row row-sm">
 					<div class="col-6">
 						<div class="media rounded">
 							<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[8].file }})"></a>
@@ -109,7 +109,7 @@
 				</div>
 			</div>
 			<div class="col-6">
-				<div class="row row-xs">
+				<div class="row row-sm">
 					<div class="col-6">
 						<div class="media mb-2 rounded">
 							<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[16].file }})"></a>
@@ -140,7 +140,7 @@
 				</div>
 			</div>
 			<div class="col-6">
-				<div class="row row-xs">
+				<div class="row row-sm">
 					<div class="col-6">
 						<div class="media mb-2 rounded">
 							<a class="media-content" style="background-image: url({{ site.base }}/static/photos/{{ site.data.photos[21].file }})"></a>

pages/_includes/cards/invoices.html

@@ -5,7 +5,7 @@
 	<div class="card-body border-bottom py-3">
 
 		<div class="d-flex">
-			<div class="mb-0">
+			<div class="text-muted">
 				Show
 				<div class="mx-2 d-inline-block">
 					<input type="text" class="form-control form-control-sm" value="8" size="3">
@@ -13,7 +13,7 @@
 				entries
 			</div>
 
-			<div class="mb-0 ml-auto">
+			<div class="ml-auto text-muted">
 				Search:
 				<div class="ml-2 d-inline-block">
 					<input type="text" class="form-control form-control-sm">
@@ -63,8 +63,8 @@
 				<td class="text-right">
 					<button class="btn btn-secondary btn-sm align-text-top">Manage</button>
 					<span class="dropdown ml-1">
-						<button class="btn btn-secondary btn-sm dropdown-toggle align-text-top" data-toggle="dropdown">Actions</button>
+						<button class="btn btn-secondary btn-sm dropdown-toggle align-text-top" data-boundary="viewport" data-toggle="dropdown">Actions</button>
-						{% include ui/dropdown-menu.html %}
+						{% include ui/dropdown-menu.html right=true %}
 					</span>
 				</td>
 				<td>

pages/_includes/cards/table-users.html

@@ -7,8 +7,8 @@
 				<th>Usage</th>
 				<th class="text-center">Payment</th>
 				<th>Activity</th>
-				<th class="text-center">Satisfaction</th>
+				<th class="w-1p">Satisfaction</th>
-				<th class="text-center"><i class="icon-settings"></i></th>
+				<th class="w-1p"></th>
 			</tr>
 			</thead>
 			<tbody>
@@ -61,10 +61,10 @@
 				</td>
 				<td class="text-center">
 					<div class="dropdown">
-						<a class="btn-icon mx-2" data-toggle="dropdown">
+						<a href="#" class="text-secondary mx-2" data-boundary="viewport" data-toggle="dropdown">
 							{% include ui/icon.html icon="more-vertical" %}
 						</a>
-						{% include ui/dropdown-menu.html %}
+						{% include ui/dropdown-menu.html right=true %}
 					</div>
 				</td>
 			</tr>

pages/_includes/cards/timeline.html

@@ -54,7 +54,7 @@
 					<div class="list-timeline-time">3 days ago</div>
 					<p class="list-timeline-title">+2 New photos</p>
 					<div class="mt-3">
-						<div class="row row-xs">
+						<div class="row row-sm">
 							<div class="col-6">
 								<div class="media media-2x1 rounded">
 									<a class="media-content" style="background-image: url({% include ui/image.html id=6 %})"></a>

pages/_includes/forms/form-elements-5.html

@@ -41,7 +41,7 @@
 
 <div class="mb-3">
    <label class="form-label">Date of birth</label>
-   <div class="row row-xs">
+   <div class="row row-sm">
       <div class="col-5">
          <select name="user[month]" class="form-select">
             <option value="">Month</option>

pages/_includes/layout/css.html

@@ -14,3 +14,5 @@
 {% for plugin in site.tabler-plugins %}
 <link href="{{ site.base }}/{% if jekyll.environment == 'development' %}tmp-{% endif %}dist/css/{{ plugin }}{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet"/>
 {% endfor %}
+
+<link href="{{ site.base }}/{% if jekyll.environment == 'development' %}tmp-{% endif %}dist/css/demo{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet"/>

pages/_includes/layout/customize.html

@@ -0,0 +1,79 @@
+<div class="row row-cards">
+	<div class="col-12">
+		<div class="card">
+			<div class="card-body">
+				<div class="btn-list">
+					<a href="#" class="btn btn-secondary" data-theme-toggle="primary-vertical">Toggle sidebar</a>
+					<a href="#" class="btn btn-secondary" data-theme-toggle="primary-vertical-narrow">Sidebar narrow</a>
+					<a href="#" class="btn btn-secondary" data-theme-toggle="primary-right">Sidebar left/right</a>
+					<a href="#" class="btn btn-secondary" data-theme-toggle="primary-color">Sidebar color</a>
+					<a href="#" class="btn btn-secondary" data-theme-toggle="secondary-color">Secondary color</a>
+					<a href="#" class="btn btn-secondary" data-theme-toggle="secondary-visible">Toggle secondary</a>
+					<a href="#" class="btn btn-secondary" data-theme-toggle="dark-mode">Dark mode</a>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+
+{% capture_global scripts %}
+<script>
+	(function () {
+		var navbarPrimary = document.getElementById('navbar-primary'),
+			navbarSecondary = document.getElementById('navbar-secondary');
+
+		var events = {
+			'primary-vertical': function () {
+				navbarPrimary.classList.toggle('navbar-vertical');
+			},
+			'primary-right': function () {
+				navbarPrimary.classList.toggle('navbar-right');
+			},
+			'primary-vertical-narrow': function () {
+				navbarPrimary.classList.toggle('navbar-vertical-narrow');
+			},
+			'dark-mode': function () {
+				document.body.classList.toggle('theme-dark');
+			},
+			'primary-color': function () {
+				var classList = navbarPrimary.classList;
+
+				if (classList.contains('navbar-light')) {
+					classList.add('navbar-dark');
+					classList.remove('navbar-light');
+				} else {
+					classList.add('navbar-light');
+					classList.remove('navbar-dark');
+				}
+			},
+			'secondary-color': function () {
+				var classList = navbarSecondary.classList;
+
+				if (classList.contains('navbar-light')) {
+					classList.add('navbar-dark');
+					classList.remove('navbar-light');
+				} else {
+					classList.add('navbar-light');
+					classList.remove('navbar-dark');
+				}
+			},
+			'secondary-visible': function () {
+				navbarSecondary.classList.toggle('d-none');
+			},
+		};
+
+		for (var name in events) {
+			var event = events[name];
+
+			(function(event){
+				document.querySelector('[data-theme-toggle="' + name + '"]').addEventListener("click", function (e) {
+					event.call();
+					e.preventDefault();
+					return false;
+				});
+			})(event);
+		}
+
+	})();
+</script>
+{% endcapture_global %}

pages/_includes/layout/debug.html

@@ -47,10 +47,6 @@
 		display: flex;
 	}
 
-	.content-page {
-		padding-bottom: 2rem;
-	}
-
 	.debug a {
 		color: inherit;
 		margin-right: 1rem;

pages/_includes/layout/homepage.html

@@ -1,3 +1,5 @@
+{% include layout/customize.html %}
+
 <div class="row row-deck row-cards">
 	<div class="col-sm-6 col-lg-3">
 		{% include cards/charts/sales.html %}
@@ -27,7 +29,7 @@
 	</div>
 
 	<div class="col-lg-6">
-		<div class="row row-cards">
+		<div class="row row-cards roe-deck">
 			<div class="col-sm-6">
 				{% include cards/project-summary.html stage-color="red" %}
 			</div>
@@ -35,13 +37,13 @@
 				{% include cards/project-summary.html title="UI Redesign" date="11 Nov 2019" stage="Final review" avatar-limit=3 avatar-offset=9 project-color="green" value=80 percentage-color="green" %}
 			</div>
 
-			<div class="col-6 col-sm-4">
+			<div class="col-sm-4">
 				{% include cards/small-stats-3.html number=43 title="New Tickets" percentage=6 %}
 			</div>
-			<div class="col-6 col-sm-4">
+			<div class="col-sm-4">
 				{% include cards/small-stats-3.html number=95 number-prefix="$" title="Daily Earnings" percentage=-2 %}
 			</div>
-			<div class="col-6 col-sm-4">
+			<div class="col-sm-4">
 				{% include cards/small-stats-3.html number=7 title="New Replies" percentage=9 %}
 			</div>
 		</div>
@@ -58,7 +60,7 @@
 		{% include cards/small-stats.html color="green" icon="shopping-cart" count="78" subtitle="Orders" description="32 shipped" %}
 	</div>
 	<div class="col-sm-6 col-xl-3">
-		{% include cards/small-stats.html chart-position="left" chart-type="donut" chart-data="56/100" chart-label="56%" color="red" count="1352" subtitle="Members" description="163 registered today" %}
+		{% include cards/small-stats.html chart-position="left" chart-type="pie" chart-data="56/100" chart-label="56%" color="red" count="1352" subtitle="Members" description="163 registered today" %}
 	</div>
 	<div class="col-sm-6 col-xl-3">
 		{% include cards/small-stats.html color="yellow" chart-type="pie" chart-data="22/100" color="yellow" count="132" subtitle="Comments" description="16 waiting" %}
@@ -66,7 +68,7 @@
 
 </div>
 
-{% include layout/page-title.html title="Invoices" %}
+{% include layout/page-header.html title="Invoices" %}
 
 <div class="row row-deck row-cards">
 

pages/_includes/layout/menu-aside.html

@@ -1,64 +0,0 @@
-{% assign current-page = page.menu | default: layout.menu | split: '.' %}
-
-<ul class="sidebar-nav">
-	<li class="sidebar-nav-title">Navigation</li>
-	{% for level-1 in site.data.menu %}
-	<li class="sidebar-nav-item">
-
-		<a {% unless level-1[1].children %}href="{{ site.base }}/{{ level-1[1].url }}"{% endunless %} class="sidebar-nav-link{% if level-1[0] == current-page[0] and current-page.size == 1 %} active{% endif %}" {% if level-1[1].children %}data-toggle="collapse" data-target="#sidebar-menu-{{ level-1[0] }}"{% if level-1[0] == current-page[0] %} aria-expanded="true"{% endif %}{% endif %}>
-			{% if level-1[1].icon %}
-				{% assign icon = level-1[1].icon %}
-				{% include ui/icon.html icon=icon class="nav-icon" %}
-			{% endif %}
-
-			<span class="nav-text">{{ level-1[1].title }}</span>
-
-			{% if level-1[1].badge %}
-			{% assign badge = level-1[1].badge %}
-			{% assign badge-color = level-1[1].badge-color | default: "green" %}
-			{% include ui/badge.html text=badge color=badge-color %}
-			{% endif %}
-
-			{% if level-1[1].children %}
-			<span class="sidebar-nav-arrow"></span>
-			{% endif %}
-		</a>
-
-		{% if level-1[1].children %}
-		<ul class="sidebar-subnav collapse{% if level-1[0] == current-page[0] %} show{% endif %}" id="sidebar-menu-{{ level-1[0] }}">
-			{% for level-2 in level-1[1].children %}
-			<li class="sidebar-nav-item">
-				<a {% unless level-2[1].children %} href="{{ site.base }}/{{ level-2[1].url }}"{% endunless %} class="sidebar-nav-link{% if level-1[0] == current-page[0] and level-2[0] == current-page[1] and current-page.size == 2 %} active{% endif %}" {% if level-2[1].children %}data-toggle="collapse" data-target="#sidebar-menu-{{ level-2[0] }}"{% if level-1[0] == current-page[0] and level-2[0] == current-page[1] %} aria-expanded="true"{% endif %}{% endif %}>
-					<span>{{ level-2[1].title }}</span>
-					{% if level-2[1].badge %}
-					{% assign badge = level-2[1].badge %}
-					{% include ui/badge.html text=badge color="green" %}
-					{% endif %}
-
-					{% if level-2[1].children %}
-					<span class="sidebar-nav-arrow"></span>
-					{% endif %}
-				</a>
-
-				{% if level-2[1].children %}
-				<ul class="sidebar-subnav collapse{% if level-1[0] == current-page[0] and level-2[0] == current-page[1] %} show{% endif %}" id="sidebar-menu-{{ level-2[0] }}">
-					{% for level-3 in level-2[1].children %}
-					<li class="sidebar-nav-item">
-						<a href="{{ site.base }}/{{ level-3[1].url }}" class="sidebar-nav-link{% if level-1[0] == current-page[0] and level-2[0] == current-page[1] and level-3[0] == current-page[2] and current-page.size == 3 %} active{% endif %}">
-							<span>{{ level-3[1].title }}</span>
-							{% if level-3[1].badge %}
-							{% assign badge = level-3[1].badge %}
-							{% include ui/badge.html text=badge color="green" %}
-							{% endif %}
-						</a>
-					</li>
-					{% endfor %}
-				</ul>
-				{% endif %}
-			</li>
-			{% endfor %}
-		</ul>
-		{% endif %}
-	</li>
-	{% endfor %}
-</ul>

pages/_includes/layout/menu.html

@@ -1,51 +0,0 @@
-{% assign current-page = page.menu | default: layout.menu | split: '.' %}
-<ul class="navbar-nav flex-wrap flex-fill{% if include.class %} {{ include.class }}{% endif %}">
-	{% for level-1 in site.data.menu %}
-	{% assign icon = level-1[1].icon %}
-
-	<li class="nav-item{% if level-1[0] == current-page[0] %} active{% endif %}{% if level-1[1].children %} dropdown{% endif %}">
-		<a class="nav-link{% if level-1[1].children %} dropdown-toggle{% endif %}" {% if level-1[1].children %}href="#navbar-{{ level-1[0] }}" data-toggle="dropdown" role="button"
-			aria-expanded="{% if level-1[0] == current-page[0] %}true{% else %}false{% endif %}" {% elsif level-1[1].toggle
-			%}href="{{ level-1[1].url }}" data-toggle="{{ level-1[1].toggle }}" {% else
-			%}href="{{ site.base }}/{{ level-1[1].url }}" {% endif %}>
-			<span class="nav-icon">
-				{% include ui/icon.html icon=icon  %}
-			</span>
-
-			{{ level-1[1].title }}
-
-			{% if level-1[1].badge %}
-			{% assign badge = level-1[1].badge %}
-			{% assign badge-color = level-1[1].badge-color | default: "green" %}
-			{% include ui/badge.html text=badge color=badge-color class="ml-2" %}
-			{% endif %}
-		</a>
-
-		{% if level-1[1].children %}
-		<ul class="dropdown-menu">
-			{% for level-2 in level-1[1].children %}
-			<li {% if level-2[1].children %}class="dropright"{% endif %}>
-				<a class="dropdown-item{% if level-2[1].children %} dropdown-toggle{% endif %}{% if level-1[0] == current-page[0] and level-2[0] == current-page[1] and current-page.size == 2 %} active{% endif %}" {% if level-2[1].children %}href="#sidebar-{{ level-2[0] }}" data-toggle="dropdown" role="button" aria-expanded="false" {% else %}href="{{ site.base }}/{{ level-2[1].url }}" {% endif %}>
-					{{ level-2[1].title }}
-
-					{% if level-2[1].badge %}
-					{% assign badge = level-2[1].badge %}
-					{% assign badge-color = level-2[1].badge-color | default: "green" %}
-					{% include ui/badge.html text=badge color=badge-color class="ml-auto" %}
-					{% endif %}
-				</a>
-
-				{% if level-2[1].children %}
-				<div class="dropdown-menu">
-					{% for level-3 in level-2[1].children %}
-					<a href="{{ site.base }}/{{ level-3[1].url }}" class="dropdown-item">{{ level-3[1].title }}</a>
-					{% endfor %}
-				</div>
-				{% endif %}
-			</li>
-			{% endfor %}
-		</ul>
-		{% endif %}
-	</li>
-	{% endfor %}
-</ul>

pages/_includes/layout/navbar-logo.html

@@ -1,6 +1,6 @@
 {% assign prefix = include.prefix | default: 'navbar' %}
 
-<a href="{{ site.base }}" class="{{ prefix }}-brand{% if include.class %} {{ include.class }}{% endif %}">
+<a href="{{ site.base }}" class="{{ prefix }}-brand {{ prefix }}-brand-autodark{% if include.class %} {{ include.class }}{% endif %}">
-	<img src="{{ site.base }}/static/logo{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="{{ prefix }}-brand-logo {{ prefix }}-brand-logo-lg">
+	<img src="{{ site.base }}/static/logo{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="{{ prefix }}-brand-logo {{ prefix }}-brand-logo-large">
-	<img src="{{ site.base }}/static/logo-small{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="{{ prefix }}-brand-logo {{ prefix }}-brand-logo-sm">
+	<img src="{{ site.base }}/static/logo-small{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="{{ prefix }}-brand-logo {{ prefix }}-brand-logo-small">
 </a>

pages/_includes/layout/navbar-menu.html

@@ -0,0 +1,41 @@
+{% assign current-page = page.menu | default: layout.menu | split: '.' %}
+
+<ul class="navbar-nav">
+	{% for level-1 in site.data.menu %}
+		{% assign icon = level-1[1].icon %}
+		<li class="nav-item{% if level-1[0] == current-page[0] %} active{% endif %}">
+			<a class="nav-link{% if level-1[1].children %} dropdown-toggle{% endif %}" {% if level-1[1].children %}href="#navbar-{{ level-1[0] }}" data-toggle="dropdown" role="button"
+			   aria-expanded="{% if level-1[0] == current-page[0] %}true{% else %}false{% endif %}" {% else %}href="{{ site.base }}/{{ level-1[1].url }}" {% endif %}>
+				<span class="nav-link-icon">{% include ui/icon.html icon=icon %}</span>
+				<span class="nav-link-title">{{ level-1[1].title }}</span>
+			</a>
+
+			{% if level-1[1].children %}
+			<ul class="dropdown-menu dropdown-menu-arrow{% if level-1[1].right %} dropdown-menu-right{% endif %}{% if level-1[1].columns %} dropdown-menu-columns  dropdown-menu-columns-{{ level-1[1].columns }}{% endif %}">
+				{% for level-2 in level-1[1].children %}
+				<li {% if level-2[1].children %}class="dropright"{% endif %}>
+					<a class="dropdown-item{% if level-2[1].children %} dropdown-toggle{% endif %}{% if level-1[0] == current-page[0] and level-2[0] == current-page[1] and current-page.size == 2 %} active{% endif %}" {% if level-2[1].children %}href="#sidebar-{{ level-2[0] }}" data-toggle="dropdown" role="button" aria-expanded="false" {% else %}href="{{ site.base }}/{{ level-2[1].url }}" {% endif %}>
+						{{ level-2[1].title }}
+					</a>
+
+					{% if level-2[1].children %}
+					<div class="dropdown-menu">
+						{% for level-3 in level-2[1].children %}
+						<a href="{{ site.base }}/{{ level-3[1].url }}" class="dropdown-item">{{ level-3[1].title }}</a>
+						{% endfor %}
+					</div>
+					{% endif %}
+				</li>
+				{% endfor %}
+			</ul>
+			{% endif %}
+		</li>
+	{% endfor %}
+
+	<li class="nav-item d-none-navbar-vertical" title="Soon" data-toggle="tooltip">
+		<a href="#" class="nav-link disabled">
+			<span class="nav-link-icon">{% include ui/icon.html icon="sliders" %}</span>
+			<span class="nav-link-title">Customize</span>
+		</a>
+	</li>
+</ul>

pages/_includes/layout/navbar-primary.html

@@ -0,0 +1,19 @@
+{% assign breakpoint = 'lg' %}
+<nav class="navbar navbar-expand-{{ breakpoint }} navbar-dark navbar-primary" id="navbar-primary">
+	<div class="container">
+		{% include layout/navbar-logo.html class="d-none-navbar-horizontal" %}
+
+		<div class="navbar-collapse collapse">
+			<h6 class="navbar-heading">Navigation</h6>
+			{% include layout/navbar-menu.html %}
+
+			<h6 class="navbar-heading mt-4">Tools</h6>
+
+			<div class="navbar-side d-none-navbar-vertical-narrow">
+				{% include layout/navbar-search.html %}
+				{% include ui/button.html text="Customize" icon="sliders" color="primary" block=true class="d-none-navbar-horizontal" %}
+			</div>
+		</div>
+	</div>
+</nav>
+

pages/_includes/layout/navbar-secondary.html

@@ -0,0 +1,18 @@
+<nav class="navbar navbar-light navbar-secondary navbar-expand" id="navbar-secondary">
+	<div class="container">
+		{% include layout/navbar-logo.html class="d-none-navbar-vertical" %}
+
+		<ul class="navbar-nav ml-auto">
+			<li class="nav-item">
+				<a class="nav-link" href="#">Link</a>
+			</li>
+			<li class="nav-item dropdown">
+				<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+					Dropdown
+				</a>
+				{% include ui/dropdown-menu.html right=true icons=true separated=true arrow=true %}
+			</li>
+		</ul>
+	</div>
+</nav>
+

pages/_includes/layout/page-header.html

@@ -1,5 +1,5 @@
 <!-- Page title -->
-<div class="page-title-box">
+<div class="page-header">
 
 	<div class="row align-items-center">
 		<div class="col-auto">
@@ -21,7 +21,7 @@
 		{% endif %}
 
 		{% if include.actions %}
-			{% include layout/page-title-actions.html actions=include.actions %}
+			{% include layout/page-header-actions.html actions=include.actions %}
 		{% endif %}
 	</div>
 </div>

pages/_includes/layout/sidebar.html

@@ -1,27 +0,0 @@
-<aside class="sidebar{% if page.sidebar-dark %} sidebar-dark{% endif %}{% if page.sidebar-narrow %} sidebar-narrow{% endif %}{% if page.sidebar-right %} sidebar-right{% endif %}">
-	<!-- Sidebar logo -->
-	{% include layout/navbar-logo.html prefix="sidebar" %}
-
-	<div class="sidebar-content">
-		<div>
-			<!-- Sidebar menu -->
-			{% include layout/menu-aside.html %}
-
-			<div class="hide-sidebar-narrow">
-				<hr>
-
-				<div class="text-muted">
-					<div class="mb-2">
-						<strong>160MB</strong> from <strong>2GB</strong> used.
-					</div>
-					{% include ui/progress.html percentage=30 size="sm" %}
-				</div>
-			</div>
-		</div>
-
-		<div class="mt-auto hide-sidebar-narrow pt-3">
-			{% include ui/button.html text="Logout" color="primary" icon="log-out" block=true %}
-		</div>
-	</div>
-</aside>
-

pages/_includes/layout/topnav.html

@@ -1,77 +0,0 @@
-{% assign person-id = include.person-id | default: 12 | minus: 1 %}
-{% assign person = site.data.people[person-id] %}
-
-{% assign dark = page.topnav-dark %}
-{% assign fixed = page.topnav-fixed %}
-{% assign breakpoint = 'lg' %}
-
-{% unless page.hide-topnav %}
-<header class="navbar-wrap navbar-expand-lg flex-column{% if fixed %} fixed-top{% endif %}">
-	<div class="navbar navbar-border {% if page.topnav-dark %}navbar-dark bg-dark text-white{% else %}navbar-light bg-white{% endif %}">
-		<div class="container{% if include.topnav-fluid %}-fluid{% endif %}">
-
-			<button class="navbar-toggler mr-auto {% if page.sidebar %}hide-sidebar-visible{% else %}d-{{ breakpoint }}-none{% endif %}" type="button" data-toggle="collapse" data-target="#nav-main-menu" aria-expanded="false" aria-label="Toggle menu">
-				<span class="navbar-toggler-icon"></span>
-			</button>
-
-			<a href="{{ site.base }}" class="navbar-brand hide-sidebar-visible m-0">
-				<img src="{{ site.base }}/static/logo{% if dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="navbar-brand-logo">
-			</a>
-
-			{% comment %}
-			{% if page.sidebar %}
-			{% include layout/navbar-search.html class="mr-4" %}
-			{% endif %}
-			{% endcomment %}
-
-			<ul class="nav navbar-menu align-items-center ml-auto">
-				<li class="nav-item d-none d-lg-flex mr-3">
-					{% include ui/button.html href=site.github_url text="Source code" icon="brand/github" external=true %}
-				</li>
-
-				<li class="nav-item dropdown">
-					<a href="#" data-toggle="dropdown" class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-reset ml-2" aria-label="Show personal menu">
-						{% include ui/avatar.html src=person.photo size="sm" %}
-						<span class="ml-2 d-none d-lg-block lh-1">
-							{{ person.full_name }}
-							<span class="text-muted d-block mt-1 text-h6">Administrator</span>
-						</span>
-					</a>
-					<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-						<a class="dropdown-item" href="#">
-							{% include ui/icon.html icon="user" class="dropdown-icon" %} Profile
-						</a>
-						<a class="dropdown-item" href="#">
-							{% include ui/icon.html icon="settings" class="dropdown-icon" %} Settings
-						</a>
-						<a class="dropdown-item" href="#">
-							{% include ui/icon.html icon="mail" class="dropdown-icon" %} Inbox
-							<span class="badge bg-primary ml-auto">6</span>
-						</a>
-						<a class="dropdown-item" href="#">
-							{% include ui/icon.html icon="send" class="dropdown-icon" %} Message
-						</a>
-						<div class="dropdown-divider"></div>
-						<a class="dropdown-item" href="#">
-							{% include ui/icon.html icon="help-circle" class="dropdown-icon" %} Need help?
-						</a>
-						<a class="dropdown-item" href="#">
-							{% include ui/icon.html icon="log-out" class="dropdown-icon" %} Sign out
-						</a>
-					</div>
-				</li>
-			</ul>
-		</div>
-	</div>
-
-	{% unless page.sidebar %}
-	<div class="navbar navbar-border collapse navbar-collapse navbar-collapse-absolute {% if page.topmenu-dark %}navbar-dark bg-dark text-white{% else %}navbar-light bg-white{% endif %}" id="nav-main-menu">
-		<div class="container{% if include.topnav-fluid %}-fluid{% endif %}">
-				{% include layout/menu.html top=true %}
-				{% include layout/navbar-search.html %}
-		</div>
-	</div>
-	{% endunless %}
-
-</header>
-{% endunless %}

pages/_includes/parts/form/input-color.html

@@ -5,7 +5,7 @@
 
 <div class="mb-3">
 	<label class="form-label">Color Input</label>
-	<div class="row row-xs">
+	<div class="row row-sm">
 		{% for color in colors %}
 		<div class="col-auto">
 			<label class="form-colorinput{% if color == 'white' %} form-colorinput-light{% endif %}">

pages/_includes/parts/form/input-icon-separated.html

@@ -1,6 +1,6 @@
 <div class="mb-3">
 	<label class="form-label">Separated inputs</label>
-	<div class="row row-xs">
+	<div class="row row-sm">
 		<div class="col">
 			<input type="text" class="form-control" placeholder="Search for…">
 		</div>

pages/_includes/parts/form/input-image.html

@@ -1,7 +1,7 @@
 {% assign limit = include.limit | default: 9 %}
 <div class="mb-3">
 	<label class="form-label">Image Check</label>
-	<div class="row row-xs">
+	<div class="row row-sm">
 		{% assign photos = site.data.photos | where: 'horizontal', true %}
 
 		{% for photo in photos limit: limit %}

pages/_includes/ui/dropdown-menu.html

@@ -8,18 +8,18 @@
    {% else %}
       {% if include.header %}<span class="dropdown-header">Dropdown header</span>{% endif %}
       <a class="dropdown-item" href="#">
-         {% if include.icons %}{% include ui/icon.html icon="settings" %} {% endif %}
+         {% if include.icons %}{% include ui/icon.html icon="settings" class="dropdown-item-icon" %} {% endif %}
          Action
          {% if include.badge %}<span class="badge bg-primary ml-auto">12</span>{% endif %}
       </a>
       <a class="dropdown-item" href="#">
-         {% if include.icons %}{% include ui/icon.html icon="edit" %} {% endif %}Another action
+         {% if include.icons %}{% include ui/icon.html icon="edit" class="dropdown-item-icon" %} {% endif %}Another action
       </a>
-      {% if include.active %}<a class="dropdown-item active" href="#">{% if include.icons %}{% include ui/icon.html icon="activity" %} {% endif %}Active action</a>{% endif %}
+      {% if include.active %}<a class="dropdown-item active" href="#">{% if include.icons %}{% include ui/icon.html icon="activity" class="dropdown-item-icon" %} {% endif %}Active action</a>{% endif %}
-      {% if include.disabled %}<a class="dropdown-item disabled" href="#">{% if include.icons %}{% include ui/icon.html icon="user-x" %} {% endif %}Disabled action</a>{% endif %}
+      {% if include.disabled %}<a class="dropdown-item disabled" href="#">{% if include.icons %}{% include ui/icon.html icon="user-x" class="dropdown-item-icon" %} {% endif %}Disabled action</a>{% endif %}
       {% if include.separated %}
       <div class="dropdown-divider"></div>
-      <a class="dropdown-item" href="#">{% if include.icons %}{% include ui/icon.html icon="plus" class="dropdown-icon" %} {% endif %}Separated link</a>
+      <a class="dropdown-item" href="#">{% if include.icons %}{% include ui/icon.html icon="plus" class="dropdown-icon" class="dropdown-item-icon" %} {% endif %}Separated link</a>
       {% endif %}
    {% endif %}
 </div>

pages/_includes/ui/form/input-mask.html

@@ -4,16 +4,17 @@
 {% capture_once scripts %}
 <script>
 (function () {
-	const $elem = $('[data-mask]');
+	/**
-
+	 * Input mask
-	if ($elem) {
+	 */
-		$elem.each(function () {
+	var maskElementList = [].slice.call(document.querySelectorAll('[data-mask]'))
-			IMask($(this).get(0), {
+	maskElementList.map(function (maskEl) {
-				mask: $(this).attr('data-mask'),
+		console.log('maskEl', maskEl);
-				lazy: $(this).attr('data-mask-visible') === 'true',
+		return new IMask(maskEl, {
-			});
+			mask: maskEl.dataset.mask,
-		});
+			lazy: maskEl.dataset['mask-visible'] === 'true'
-	}
+		})
+	});
 })();
 </script>
 {% endcapture_once %}

pages/_includes/ui/sparkline.html

@@ -19,7 +19,7 @@
 			height: 40,
 			stroke: "{{ color | tabler_color }}",
 			strokeWidth: 2,
-			fill: {% if type == 'pie' %}["{{ color | default: 'blue' | tabler_color }}", "{{ 'gray-200' | tabler_color }}"]{% elsif type == 'bar' %}["{{ color | tabler_color }}"]{% else %}"transparent"{% endif %},
+			fill: {% if type == 'pie' %}["{{ color | default: 'blue' | tabler_color }}", "{{ 'border-color' | tabler_color }}"]{% elsif type == 'bar' %}["{{ color | tabler_color }}"]{% else %}"transparent"{% endif %},
 			padding: .2,
 			innerRadius: 17,
 		});

pages/_layouts/component.html

@@ -1,7 +1,7 @@
 ---
 layout: default
 menu: components
-page-title: Tabler components
+page-header: Tabler components
 og-component: true
 ---
 

pages/_layouts/default.html

@@ -2,24 +2,19 @@
 layout: base
 ---
 
-{% assign page-title = page.page-title | default: layout.page-title %}
+{% assign page-header = page.page-header | default: layout.page-header %}
 
 <div class="page">
-	{% if page.sidebar %}
+	{% include layout/navbar-primary.html %}
-		{% include layout/sidebar.html %}
+	{% include layout/navbar-secondary.html %}
-	{% endif %}
 
 	<div class="content">
-		{% include layout/topnav.html %}
+		<main class="container">
+			{% if page-header %}
+				{% include layout/page-header.html title=page-header description=page.page-header-description actions=page.page-header-actions pretitle=page.page-header-pretitle %}
+			{% endif %}
 
-		<div class="content-page">
+			{{ content }}
-			<main class="container{% if page.container-size %}-{{ page.container-size }}{% endif %} my-4 flex-fill">
+		</main>
-				{% if page-title %}
-					{% include layout/page-title.html title=page-title description=page.page-title-description actions=page.page-title-actions pretitle=page.page-pretitle %}
-				{% endif %}
-
-				{{ content }}
-			</main>
-		</div>
 	</div>
 </div>

pages/_layouts/docs.html

@@ -2,7 +2,7 @@
 layout: default
 menu: docs
 title: Documentation
-page-title: Documentation
+page-header: Documentation
 ---
 
 {% assign current-url = page.url | replace_regex: "^/", "" %}

pages/_layouts/markdown.html

@@ -2,12 +2,20 @@
 layout: default
 ---
 
-<div class="row row justify-content-center">
+<div class="row justify-content-center">
-	<div class="col-lg-10 col-xl-8">
+	<div class="col-lg-10 col-xl-9">
-		<div class="card">
+		<div class="card card-lg">
-			<div class="card-body p-md-7">
+			<div class="card-body markdown">
 				{{ content }}
 			</div>
 		</div>
 	</div>
+	{% if page.toc %}
+	<div class="d-none d-xl-block col-xl-3">
+		<div class="sticky-top py-4">
+			<h5 class="subheader">On this page</h5>
+			{{ content | toc_only }}
+		</div>
+	</div>
+	{% endif %}
 </div>

pages/_plugins/jekyll-example.rb

@@ -19,8 +19,8 @@ def render_rouge(code, lang, dark = false)
 end
 
 def add_code_tag(code, lang)
-  code = code.sub(/<pre>\n*/, '<pre><code class="language-' + lang.to_s.gsub("+", "-") + '" data-lang="' + lang.to_s + '">')
+  code = code.sub(/<pre>\n*/, '<div class="example-code language-' + lang.to_s.gsub("+", "-") + '" data-lang="' + lang.to_s + '"><pre class="highlight"><code>')
-  code = code.sub(/\n*<\/pre>/, "</code></pre>")
+  code = code.sub(/\n*<\/pre>/, "</code></pre></div>")
 
   code.strip
 end
@@ -74,7 +74,7 @@ Valid syntax: example <lang> [id=foo]
                  render_rouge(code, @lang, @options[:linenos])
                end
 
-      rendered_output = example(code) + "<div class=\"highlight\">#{add_code_tag(output, @lang)}</div>"
+      rendered_output = example(code) + add_code_tag(output, @lang)
       prefix + rendered_output + suffix
     end
 

pages/all.html

@@ -1,6 +1,6 @@
 ---
 title: Index
-page-title: Index
+page-header: Index
 menu: index
 ---
 

pages/blog.html

@@ -1,6 +1,6 @@
 ---
 title: Blog
-page-title: Blog
+page-header: Blog
 menu: extra.blog
 ---
 

pages/buttons.html

@@ -1,6 +1,6 @@
 ---
 title: Buttons
-page-title: Buttons
+page-header: Buttons
 done: true
 menu: base.buttons
 ---

pages/calendar.html

@@ -1,7 +1,7 @@
 ---
 title: Calendar
-page-title: Calendar
+page-header: Calendar
-page-title-actions: calendar
+page-header-actions: calendar
 menu: base.calendar
 ---
 

pages/cards.html

@@ -1,6 +1,6 @@
 ---
 title: Cards
-page-title: Cards
+page-header: Cards
 menu: base.cards
 ---
 
@@ -32,6 +32,7 @@ menu: base.cards
             {% include cards/card.html status-bottom="success" title="Card with bottom status" %}
             {% include cards/card.html status-left="primary" title="Card with side status" %}
             {% include cards/card.html class="card-stacked" title="Stacked card" %}
+	         {% include cards/credit-card.html %}
          </div>
          <div class="col-xl-6">
             {% include cards/card.html title="Card title" subtitle="Card subtitle" %}

pages/carousel.html

@@ -1,6 +1,6 @@
 ---
 title: Carousel
-page-title: Carousel
+page-header: Carousel
 layout: default
 done: true
 menu: base.carousel

pages/changelog.html

@@ -1,6 +1,6 @@
 ---
 title: Changelog
-page-title: Changelog
+page-header: Changelog
 menu: changelog
 done: true
 ---

pages/charts-heatmap.html

@@ -1,6 +1,6 @@
 ---
 title: Heatmap Charts
-page-title: Heatmap Charts
+page-header: Heatmap Charts
 done: true
 ---
 

pages/charts.html

@@ -1,6 +1,6 @@
 ---
 title: Charts
-page-title: Charts
+page-header: Charts
 menu: charts
 ---
 

pages/crypto-currencies.html

@@ -1,6 +1,6 @@
 ---
 title: Crypto currencies
-page-title: Crypto currencies
+page-header: Crypto currencies
 done: true
 ---
 

pages/dropdowns.html

@@ -1,6 +1,6 @@
 ---
 title: Dropdowns
-page-title: Dropdowns
+page-header: Dropdowns
 ---
 
 {% include ui/dropdown-menu.html show=true class="mr-3 mb-3 align-top" %}

pages/email.html

@@ -1,6 +1,6 @@
 ---
 title: Email
-page-title: Crypto currencies
+page-header: Crypto currencies
 ---
 
 <div class="row">

pages/flags.html

@@ -1,6 +1,6 @@
 ---
 title: Flags
-page-title: Flags
+page-header: Flags
 done: true
 ---
 <div class="d-flex flex-row flex-wrap">

pages/form-elements.html

@@ -1,6 +1,6 @@
 ---
 title: Form elements
-page-title: Form elements
+page-header: Form elements
 menu: forms
 ---
 

pages/gallery.html

@@ -1,8 +1,8 @@
 ---
 title: Gallery
-page-title: Gallery
+page-header: Gallery
-page-title-description: 1-12 of 241 photos
+page-header-description: 1-12 of 241 photos
-page-title-actions: photos
+page-header-actions: photos
 done: true
 menu: base.gallery
 ---

pages/homepage.html

@@ -1,7 +1,7 @@
 ---
 title: Homepage
-page-title: Homepage
+page-header: Homepage
-page-pretitle: Overview
+page-header-pretitle: Overview
 ---
 
 <div class="row">

pages/icons.html

@@ -1,6 +1,6 @@
 ---
 title: Icons
-page-title: Icons
+page-header: Icons
 ---
 
 <div class="row">

pages/index.html

@@ -1,8 +1,8 @@
 ---
 title: Dashboard
-page-title: Dashboard
+page-header: Dashboard
-page-pretitle: Overview
+page-header-pretitle: Overview
-page-title-actions: buttons
+page-header-actions: buttons
 menu: home
 ---
 

pages/layout-dark-navigation.html

@@ -1,5 +1,5 @@
 ---
-page-title: Page Layouts
+page-header: Page Layouts
 menu: layouts
 topmenu-dark: true
 ---

pages/layout-dark-topnav.html

@@ -1,5 +1,5 @@
 ---
-page-title: Page Layouts
+page-header: Page Layouts
 menu: layouts
 topnav-dark: true
 ---

pages/layout-dark.html

@@ -1,5 +1,5 @@
 ---
-page-title: Page Layouts
+page-header: Page Layouts
 menu: layouts
 ---
 

pages/layout-sidebar-dark.html

@@ -1,5 +1,5 @@
 ---
-page-title: Page Layouts
+page-header: Page Layouts
 menu: layouts
 sidebar: true
 sidebar-dark: true

pages/layout-sidebar-narrow.html

@@ -1,5 +1,5 @@
 ---
-page-title: Page Layouts
+page-header: Page Layouts
 menu: layouts
 sidebar: true
 sidebar-dark: true

pages/layout-sidebar-only.html

@@ -1,5 +1,5 @@
 ---
-page-title: Page Layouts
+page-header: Page Layouts
 menu: layouts
 sidebar: true
 hide-topnav: true

pages/layout-sidebar-right.html

@@ -1,5 +1,5 @@
 ---
-page-title: Page Layouts
+page-header: Page Layouts
 menu: layouts
 sidebar: true
 sidebar-right: true

pages/layout-sidebar.html

@@ -1,5 +1,5 @@
 ---
-page-title: Page Layouts
+page-header: Page Layouts
 menu: layouts
 sidebar: true
 ---

pages/layouts.html

@@ -1,5 +1,5 @@
 ---
-page-title: Page Layouts
+page-header: Page Layouts
 menu: layouts
 ---
 

pages/license.html

@@ -1,6 +1,6 @@
 ---
 tmp: true
-page-title: Tabler licence
+page-header: Tabler licence
 ---
 
 <div class="card">

pages/lists.html

@@ -1,7 +1,7 @@
 ---
 menu: base.lists
 title: Lists
-page-title: Lists
+page-header: Lists
 ---
 
 <div class="row">

pages/lookup.html

@@ -1,6 +1,6 @@
 ---
 title: Lookup company
-page-title: Lookup company
+page-header: Lookup company
 layout: default
 ---
 

pages/maps.html

@@ -1,6 +1,6 @@
 ---
 title: Maps
-page-title: Maps
+page-header: Maps
 ---
 
 <div class="row">

pages/markdown.md

@@ -1,6 +1,6 @@
 ---
 title: Markdown
-page-title: Markdown
+page-header: Markdown
 ---
 
 # Who's that then?

pages/music.html

@@ -1,6 +1,6 @@
 ---
 title: Music components
-page-title: Music components
+page-header: Music components
 menu: base.music
 ---
 

pages/pricing.html

@@ -1,6 +1,6 @@
 ---
 title: Pricing cards
-page-title: Pricing cards
+page-header: Pricing cards
 done: true
 ---
 

pages/profile.html

@@ -1,6 +1,6 @@
 ---
 title: Profile
-page-title: Profile
+page-header: Profile
 menu: base.profile
 ---
 

pages/ribbons.html

@@ -1,6 +1,6 @@
 ---
 title: Ribbons
-page-title: Ribbons
+page-header: Ribbons
 done: true
 ---
 

pages/rtl.html

@@ -1,7 +1,7 @@
 ---
 rtl: true
 title: RTL mode
-page-title: RTL mode
+page-header: RTL mode
 menu: pages.rtl
 ---
 

pages/search-results.html

@@ -1,6 +1,6 @@
 ---
-page-title: Search results
+page-header: Search results
-page-title-description: About 2,410 result (0.19 seconds)
+page-header-description: About 2,410 result (0.19 seconds)
 menu: extra.search-results
 ---
 

pages/snippets.html

@@ -1,7 +1,7 @@
 ---
 title: Snippets
-page-title: Snippets
+page-header: Snippets
-page-title-right: date
+page-header-actions: date
 menu: extra.snippets
 ---
 
@@ -28,33 +28,24 @@ menu: extra.snippets
 	<div class="col-xl-6">
 		{% include cards/subscribe.html person-id=2 %}
 	</div>
-	<div class="col-md-6 col-xl-3">{% include cards/small-stats.html icon="dollar-sign" color="blue" count=132
+	<div class="col-md-6 col-xl-3">{% include cards/small-stats.html icon="dollar-sign" color="blue" count=132 subtitle="Sales" description="12 waiting payments" %}
-		subtitle="Sales" description="12 waiting payments" %}
 	</div>
-	<div class="col-md-6 col-xl-3">{% include cards/small-stats.html icon="shopping-bag" color="green" count=78
+	<div class="col-md-6 col-xl-3">{% include cards/small-stats.html icon="shopping-bag" color="green" count=78 subtitle="Orders" description="32 shipped" %}
-		subtitle="Orders" description="32 shipped" %}
 	</div>
-	<div class="col-md-6 col-xl-3">{% include cards/small-stats.html icon="users" color="red" count=1352
+	<div class="col-md-6 col-xl-3">{% include cards/small-stats.html icon="users" color="red" count=1352 subtitle="Members" description="163 registered today" %}
-		subtitle="Members" description="163 registered today" %}
 	</div>
-	<div class="col-md-6 col-xl-3">{% include cards/small-stats.html icon="message-square" color="yellow" count=132
+	<div class="col-md-6 col-xl-3">{% include cards/small-stats.html icon="message-square" color="yellow" count=132 subtitle="Comments" description="16 waitings" %}
-		subtitle="Comments" description="16 waitings" %}
 	</div>
 
-	<div class="col-md-6 col-xl-3">{% include cards/small-stats.html chart-position="left" chart-type="pie"
+	<div class="col-md-6 col-xl-3">{% include cards/small-stats.html chart-position="left" chart-type="pie" chart-data="56/100" color="blue" count=132 subtitle="Sales" description="12 waiting payments" %}
-		chart-data="56/100" color="blue" count=132 subtitle="Sales" description="12 waiting payments" %}
 	</div>
-	<div class="col-md-6 col-xl-3">{% include cards/small-stats.html chart-position="left" chart-type="pie"
+	<div class="col-md-6 col-xl-3">{% include cards/small-stats.html chart-position="left" chart-type="pie" chart-data="56/100" color="green" count=78 subtitle="Orders" description="32 shipped" %}
-		chart-data="56/100" color="green" count=78 subtitle="Orders" description="32 shipped" %}
 	</div>
-	<div class="col-md-6 col-xl-3">{% include cards/small-stats.html chart-position="left" chart-type="pie"
+	<div class="col-md-6 col-xl-3">{% include cards/small-stats.html chart-position="left" chart-type="pie" chart-data="56/100" color="red" count=1352 subtitle="Members" description="163 registered today" %}
-		chart-data="56/100" color="red" count=1352 subtitle="Members" description="163 registered today" %}
 	</div>
-	<div class="col-md-6 col-xl-3">{% include cards/small-stats.html chart-position="left" chart-type="pie"
+	<div class="col-md-6 col-xl-3">{% include cards/small-stats.html chart-position="left" chart-type="pie" chart-data="56/100" color="yellow" count=132 subtitle="Comments" description="16 waitings" %}
-		chart-data="56/100" color="yellow" count=132 subtitle="Comments" description="16 waitings" %}
 	</div>
 
-
 	<div class="col-md-6 col-lg-4">
 		{% include cards/small-stats.html chart-type="line" chart-data="20,0,40,30,40,30,80,60" %}
 		{% include cards/small-stats.html chart-type="bar" chart-data="20,40,30,10,40,60,80,70" color="red" icon="heart" %}

pages/social.html

@@ -1,6 +1,6 @@
 ---
 title: Social elements
-page-title: Social elements
+page-header: Social elements
 done: true
 ---
 

pages/store.html

@@ -1,6 +1,6 @@
 ---
 title: Store
-page-title: Store
+page-header: Store
 ---
 
 

pages/tabs.html

@@ -1,6 +1,6 @@
 ---
 title: Tabs
-page-title: Tabs
+page-header: Tabs
 done: true
 ---
 

pages/tmp-dark.html

@@ -1,5 +1,5 @@
 ---
-page-title: Dark
+page-header: Dark
 ---
 
 <div class="row row-md">

pages/tmp2.html

@@ -1,6 +1,6 @@
 ---
 tmp: true
-page-title: Search results
+page-header: Search results
 ---
 
 

pages/typography.html

@@ -1,6 +1,6 @@
 ---
 title: Typography
-page-title: Typography
+page-header: Typography
 done: true
 ---
 

pages/users.html

@@ -1,9 +1,9 @@
 ---
 layout: default
 title: Users list
-page-title: Users
+page-header: Users
-page-title-actions: users
+page-header-actions: users
-page-title-description: 1-18 of 413 people
+page-header-description: 1-18 of 413 people
 done: true
 menu: base.users
 ---

scss/_dark.scss

@@ -1,62 +1,66 @@
 // stylelint-disable declaration-no-important
 
-@mixin dark-mode {
+$dark-text: $light;
-  &,
+
-  .modal-content,
+@include dark-mode {
-  .dropdown-menu,
+  & {
-  .example-bg {
+    color: $dark-text;
-    color: $dark-body-color;
+    background: $dark-darken;
-    background: $dark-body-bg;
   }
 
   .card,
-  .sidebar,
+  .navbar-light {
-  .topbar {
-    color: inherit;
     background: $dark;
+    color: inherit;
   }
 
-  .text-body {
+  .card {
-    color: #afbdd1 !important;
-  }
-
-  .avatar-list-stacked .avatar {
-    box-shadow: 0 0 0 2px #222226;
-  }
-
-  .navbar-brand-logo {
-    filter: brightness(0) invert(1);
-  }
-
-  .form-fieldset {
     border-color: transparent;
   }
 
-  .form-control,
+  .btn-secondary,
+  .form-file-button {
+    @include button-variant($dark-lighten, $border-color, $dark-text, rgba($dark, 0), $border-color, $dark-text);
+    background-image: none;
+  }
+
+  .form-check-input:not(:checked),
   .form-select,
-  .form-check-input:not(:checked) {
+  .form-file-text,
-    background: transparent;
+  .form-control,
-    border-color: $dark-border-color;
+  .flatpickr-input.flatpickr-input,
-    color: inherit;
+  .form-selectgroup-check,
+  .form-imagecheck-figure:before {
+    background-color: $dark-darken;
+    color: $dark-text;
   }
 
-  .input-group-text {
+  .input-group-flat .input-group-text {
-    border-color: $dark-border-color;
+    background-color: $dark-darken;
   }
 
-  .brand-logo {
+  .navbar {
-    filter: brightness(0) invert(1);
+    box-shadow: 0 0 0 1px $dark-darken;
+  }
+
+  .avatar {
+    background-color: $dark-lighten;
+  }
+
+  .avatar-list-stacked .avatar {
+    box-shadow: 0 0 0 2px $dark;
+  }
+
+  .apexcharts-text {
+    fill: $dark-text;
+  }
+
+  .apexcharts-legend-text {
+    color: inherit !important;
+  }
+
+  .navbar-brand-autodark {
+    @include autodark-image;
   }
 }
 
-@media not print {
-  .theme-dark {
-    @include dark-mode;
-  }
-}
-
-@media not print and (prefers-color-scheme: dark) {
-  .auto-theme-dark {
-    @include dark-mode;
-  }
-}

scss/_tabler-core.scss

@@ -4,9 +4,7 @@
 @import "fonts/webfonts";
 
 @import "layout/core";
-@import "layout/layout";
 @import "layout/navbar";
-@import "layout/sidenav";
 @import "layout/page";
 
 @import "ui/alerts";
@@ -20,7 +18,6 @@
 @import "ui/dropdowns";
 @import "ui/empty";
 @import "ui/grid";
-@import "ui/highlight";
 @import "ui/icons";
 @import "ui/forms";
 @import "ui/forms/form-icon";
@@ -45,12 +42,10 @@
 @import "ui/tables";
 @import "ui/toasts";
 @import "ui/toolbar";
-@import "ui/typo";
+@import "ui/type";
+@import "ui/markdown";
 @import "ui/charts";
 
-@import "ui/examples";
-
-@import "utils/border";
 @import "utils/background";
 @import "utils/colors";
 @import "utils/scroll";
@@ -58,6 +53,5 @@
 @import "utils/opacity";
 @import "utils/shadow";
 
-@import "rtl";
+@import "dark";
-
 @import "debug";

scss/_variables.scss

@@ -5,6 +5,7 @@ $assets-base: ".." !default;
 $google-font: "Source Sans Pro" !default;
 
 $font-family-sans-serif: $google-font, -apple-system, blinkmacsystemfont, segoe ui, helvetica, arial, sans-serif, apple color emoji, segoe ui emoji, segoe ui symbol !default;
+$font-family-monospace: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
 $font-family-serif: "Georgia", "Times New Roman", times, serif !default;
 
 // EXTERNAL FONTS
@@ -14,23 +15,26 @@ $icon-fonts: () !default;
 $theme-color-interval: 10% !default;
 
 $light: #f5f7fb !default;
-$dark: #303645 !default;
+$dark: #354052 !default;
+
+$dark-darken: darken($dark, 3%) !default;
+$dark-lighten: lighten($dark, 3%) !default;
 
 $light-black: rgba($dark, .24) !default;
 $light-mix: rgba(mix($light, $dark, 64%), .24) !default;
 $light-white: rgba($light, .24) !default;
 
 $min-black: rgba($dark, .032) !default;
-$min-white: rgba($light, .032) !default;
+$min-white: rgba(mix($light, $dark, 48%), .1) !default;
 
 $gray-100: $light !default;
 $gray-200: mix($light, $dark, 98%) !default;
 $gray-300: mix($light, $dark, 94%) !default;
 $gray-400: mix($light, $dark, 88%) !default;
-$gray-500: mix($light, $dark, 79%) !default;
+$gray-500: mix($light, $dark, 78%) !default;
-$gray-600: mix($light, $dark, 63%) !default;
+$gray-600: mix($light, $dark, 60%) !default;
-$gray-700: mix($light, $dark, 45%) !default;
+$gray-700: mix($light, $dark, 36%) !default;
-$gray-800: mix($light, $dark, 22%) !default;
+$gray-800: mix($light, $dark, 16%) !default;
 $gray-900: $dark !default;
 
 $blue: #206bc4 !default;
@@ -51,16 +55,13 @@ $white: #ffffff !default;
 $body-bg: $light !default;
 $body-color: $dark !default;
 
-$text-muted: mix($body-color, #fff, 64%) !default;
+$text-muted-opacity: .64 !default;
-$border-color: rgba(mix($body-color, #fff, 64%), .24) !default;
+$text-muted: mix($body-color, #ffffff, $text-muted-opacity * 100%) !default;
+$border-color: rgba($text-muted, .24) !default;
 
-$hover-bg: $light-white !default;
+$hover-bg: $light !default;
 $active-bg: rgba($blue, .06) !default;
 
-$dark-body-bg: #222935 !default;
-$dark-body-color: #afbdd1 !default;
-$dark-border-color: rgba($dark-body-color, .4) !default;
-
 $primary: $blue !default;
 $secondary: $text-muted !default;
 $success: $green !default;
@@ -131,7 +132,7 @@ $headings-font-weight: $font-weight-bold !default;
 $small-font-size: 87.5% !default;
 
 $h1-font-size: (26em / 15) !default;
-$h2-font-size: (23em / 15) !default;
+$h2-font-size: (22em / 15) !default;
 $h3-font-size: (18em / 15) !default;
 $h4-font-size: (15em / 15) !default;
 $h5-font-size: (13em / 15) !default;
@@ -139,7 +140,7 @@ $h6-font-size: (11em / 15) !default;
 
 $blockquote-font-size: $h4-font-size !default;
 
-$code-font-size: 80% !default;
+$code-font-size: $h6-font-size !default;
 $code-color: $primary !default;
 
 $lead-font-size: $h4-font-size !default;
@@ -206,6 +207,18 @@ $embed-responsive-aspect-ratios: (
   )
 ) !default;
 
+//sidenav
+$sidenav-width: 15.625rem !default;
+$sidenav-width-narrow: 4rem !default;
+$sidenav-bg: $white !default;
+$sidenav-border-color: $border-color !default;
+$sidenav-dark-bg: $dark !default;
+$sidenav-dark-color: $white !default;
+$sidenav-padding: 1rem !default;
+$sidenav-breakpoint-show: 'sm' !default;
+$sidenav-breakpoint-folded: 'lg' !default;
+$sidenav-active-accent-color: $primary !default;
+
 //alerts
 $alert-link-font-weight: $font-weight-bold !default;
 $alert-bg-level: -8 !default;
@@ -336,10 +349,15 @@ $popover-border-color: $border-color !default;
 
 $navbar-padding-y: .75rem !default;
 $navbar-nav-link-padding-x: .75rem !default;
-$navbar-light-color: $text-muted !default;
+
+$navbar-light-color: rgba($body-color, .64) !default;
 $navbar-light-active-color: $primary !default;
 $navbar-light-hover-color: $body-color !default;
 
+$navbar-dark-color: rgba($white, .64) !default;
+$navbar-dark-active-color: $white !default;
+$navbar-dark-hover-color: $white !default;
+
 //pagination
 $pagination-border-width: 0 !default;
 $pagination-padding-y: .25rem !default;
@@ -411,6 +429,8 @@ $form-select-indicator-color: opacify($border-color, .24) !default;
 
 $form-switch-width: 1.75rem !default;
 $form-switch-padding-left: $form-switch-width + .5rem !default;
+$form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$border-color}'/></svg>") !default;
+
 
 $form-range-track-height: .25rem !default;
 $form-range-track-bg: $light-mix !default;
@@ -442,3 +462,5 @@ $enable-social-colors: true !default;
 $enable-ghost-buttons: true !default;
 $enable-extra-colors: true !default;
 $enable-gradients: false !default;
+$enable-navbar-vertical: true !default;
+$enable-dark-mode: true !default;

scss/demo.scss

@@ -0,0 +1,3 @@
+@import "config";
+@import "demo/highlight";
+@import "demo/examples";

scss/demo/_examples.scss

@@ -6,13 +6,17 @@
 }
 
 .example-bg {
-  background: $min-black;
+  background: $body-bg;
 }
 
-.example + .highlight {
+.example-code {
   margin-top: 0;
   border-top: none;
-  border-radius: 0 0 3px 3px;
+
+  pre {
+    margin: 0;
+    border-radius: 0 0 3px 3px;
+  }
 }
 
 .example-column {

scss/demo/_highlight.scss

@@ -0,0 +1,30 @@
+$code-green: #b5f4a5;
+$code-yellow: #ffe484;
+$code-purple: #d9a9ff;
+$code-red: #ff8383;
+$code-blue: #93ddfd;
+$code-white: #ffffff;
+$code-gray: #a0aec0;
+
+pre.highlight,
+.highlight pre {
+  max-height: 40rem;
+  margin: 1.5rem 0;
+  overflow: auto;
+  font-size: $code-font-size;
+  background: $dark;
+  border-radius: $border-radius;
+  color: #ffffff;
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+  @include scrollbar(true);
+}
+
+.highlight {
+  .c, .c1 { color: $code-gray; }
+  .na, .nx, .nl, .language-css & .na, .language-scss & .na { color: $code-yellow; }
+  .s, .dl, .s1, .s2, .mh { color: $code-green; }
+  .mi, .language-js & .nb, .nc, .nd, .nt { color: $code-blue; }
+  .language-html & .nt, .nb { color: $code-red; }
+  .k, .kd, .nv, .n { color: $code-purple; }
+}

scss/layout/_core.scss

@@ -1,12 +1,11 @@
 // stylelint-disable property-no-vendor-prefix
 html {
-  height: 100%;
   font-size: 16px;
+  scroll-behavior: smooth;
 }
 
 body {
-  min-height: 100%;
+  overflow-y: scroll;
-  //overflow-y: scroll;
   letter-spacing: $body-letter-spacing;
   touch-action: manipulation;
   text-rendering: optimizeLegibility;

scss/layout/_layout.scss

@@ -1,393 +0,0 @@
-//sidenav
-$sidenav-width: 16rem;
-$sidenav-width-narrow: 4rem;
-$sidenav-bg: $white;
-$sidenav-border-color: $border-color;
-$sidenav-dark-bg: $dark;
-$sidenav-padding: 1.25rem;
-$sidenav-breakpoint-show: 'sm';
-$sidenav-breakpoint-folded: 'lg';
-$sidenav-folded-item-height: 3.5rem;
-
-@mixin sidebar-narrow {
-  width: $sidenav-width-narrow;
-
-  .sidebar-brand {
-    width: 100%;
-  }
-
-  .sidebar-brand-logo {
-    &-sm {
-      display: inline-block;
-    }
-
-    &-lg {
-      display: none;
-    }
-  }
-
-  .sidebar-content {
-    padding: 0;
-    overflow: visible;
-  }
-
-  .sidebar-nav {
-    margin: 0;
-
-    > .sidebar-nav-item {
-      position: relative;
-      white-space: nowrap;
-
-      &:hover {
-        background: $primary;
-        width: $sidenav-width;
-
-        > .sidebar-nav-link {
-          color: #ffffff;
-
-          > span {
-            display: block;
-          }
-
-          .icon {
-            margin-right: add(1rem, $sidenav-padding);
-          }
-        }
-
-        .sidebar-subnav {
-          display: block;
-
-          .sidebar-nav-link {
-            padding-left: $sidenav-padding;
-          }
-        }
-      }
-
-      > .sidebar-nav-link {
-        min-height: $sidenav-folded-item-height;
-        padding: 0 1rem !important;
-        position: relative;
-
-        .icon {
-          margin: 0;
-          width: 2rem;
-          height: 1.125rem;
-        }
-
-        > span {
-          display: none;
-        }
-
-        .badge {
-          display: block;
-          position: absolute;
-          left: 2.5rem;
-          top: 1rem;
-
-          text-indent: -99999px;
-          width: $badge-empty-size;
-          height: $badge-empty-size;
-          padding: 0;
-        }
-      }
-    }
-  }
-
-  .sidebar-subnav {
-    display: none;
-    position: absolute;
-    top: $sidenav-folded-item-height;
-    left: $sidenav-width-narrow;
-    right: 0;
-    padding: .5rem 0;
-    background: $dark;
-    box-shadow: -6px 0px 16px -10px rgba(0, 0, 0, 0.2), $box-shadow;
-  }
-
-  .sidebar-nav-arrow {
-    display: none !important;
-  }
-
-  .sidebar-nav-title {
-    display: none;
-  }
-
-  + .content {
-    margin-left: $sidenav-width-narrow;
-
-    .navbar.fixed-top {
-      left: $sidenav-width-narrow;
-    }
-  }
-
-  &.sidebar-right {
-    + .content {
-      margin-left: 0;
-      margin-right: $sidenav-width-narrow;
-
-      .navbar.fixed-top {
-        left: 0;
-        right: $sidenav-width-narrow;
-      }
-    }
-  }
-
-  .hide-sidebar-narrow {
-    display: none !important
-  }
-}
-
-@mixin sidebar-visible {
-  display: flex;
-  
-  + .content .navbar.fixed-top {
-    left: $sidenav-width;
-  }
-
-  .hide-sidebar-visible,
-  + .content .hide-sidebar-visible {
-    display: none !important;
-  }
-}
-
-/**
-Wrapper
- */
-.page {
-  height: 100%;
-  overflow: hidden;
-  width: 100%;
-}
-
-/**
-Content
- */
-.content {
-  overflow: hidden;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-
-  .sidebar + & {
-    margin-left: $sidenav-width;
-
-    @if $sidenav-breakpoint-folded {
-      @include media-breakpoint-down($sidenav-breakpoint-folded) {
-        margin-left: $sidenav-width-narrow;
-      }
-    }
-
-    @include media-breakpoint-down($sidenav-breakpoint-show) {
-      margin-left: 0;
-      padding-left: 0;
-      padding-right: 0;
-    }
-  }
-}
-
-.content-page {
-  flex: 1;
-  display: flex;
-
-  //@include media-breakpoint-up($cards-grid-breakpoint) {
-  //  padding-left: $cards-grid-gap / 2;
-  //  padding-right: $cards-grid-gap / 2;
-  //}
-
-  @media print {
-    padding-top: 0 !important;
-  }
-}
-
-/**
-Sidebar
- */
-.sidebar {
-  width: $sidenav-width;
-  position: fixed;
-  z-index: $zindex-fixed;
-  padding: 0;
-  background: $sidenav-bg;
-  box-shadow: inset -1px 0 $sidenav-border-color;
-  top: 0;
-  bottom: 0;
-  display: none;
-  flex-direction: column;
-  
-  @include media-breakpoint-up($sidenav-breakpoint-show) {
-    @include sidebar-visible;
-  }
-  
-  @if $sidenav-breakpoint-folded {
-    @include media-breakpoint-between($sidenav-breakpoint-show, $sidenav-breakpoint-folded) {
-      @include sidebar-narrow;
-    }
-  }
-}
-
-.sidebar-brand {
-  display: block;
-  text-align: center;
-
-  line-height: $navbar-height;
-  width: $sidenav-width;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-.sidebar-brand-logo {
-  height: 2rem;
-
-  &-sm {
-    display: none;
-  }
-}
-
-.sidebar-content {
-  padding: $sidenav-padding;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow-y: scroll;
-  @include scrollbar;
-
-  .sidebar-brand + & {
-    margin-top: $navbar-height;
-  }
-}
-
-/**
-Sidebar menu
- */
-.sidebar-nav {
-  margin: (-$sidenav-padding) (-$sidenav-padding) $sidenav-padding;
-  padding: 0;
-  list-style: none;
-  user-select: none;
-  color: $text-muted;
-
-  ul {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-}
-
-.sidebar-nav-link {
-  padding: .5rem $sidenav-padding;
-  transition: .3s color, .3s background-color;
-  color: inherit;
-  display: flex;
-  align-items: center;
-
-  .sidebar-nav-item .sidebar-nav-item & {
-    padding-left: add(1.5rem, $sidenav-padding);
-  }
-
-  .sidebar-nav-item .sidebar-nav-item .sidebar-nav-item & {
-    padding-left: add(3rem, $sidenav-padding);
-  }
-
-  &:hover {
-    background-color: rgba(#fff, .02);
-    text-decoration: none;
-    color: $body-color !important;
-    cursor: pointer !important;
-  }
-
-  &.active {
-    opacity: 1;
-    color: $body-color !important;
-    box-shadow: inset 3px 0 $primary;
-    background-color: rgba(#fff, .01);
-  }
-
-  .icon {
-    width: 1rem;
-    margin-right: .5rem;
-  }
-
-  .badge {
-    margin-left: auto;
-  }
-}
-
-.sidebar-nav-arrow {
-  display: block;
-
-  margin-left: auto;
-  @include caret(right);
-
-  &:after {
-    transition: .3s transform;
-  }
-
-  .sidebar-nav-link[aria-expanded="true"] &:after {
-    transform: rotate(-45deg);
-  }
-}
-
-.sidebar-subnav {
-}
-
-.sidebar-nav-title {
-  @include subheader(false);
-  color: inherit;
-  opacity: .8;
-  padding: $sidenav-padding $sidenav-padding .5rem;
-
-  &:not(:first-child) {
-    margin-top: .5rem;
-  }
-}
-
-/**
-Sidebar dark
- */
-.sidebar-dark {
-  background: $sidenav-dark-bg;
-  color: $text-muted;
-  box-shadow: none;
-
-  .sidebar-brand {
-    filter: brightness(0) invert(1);
-  }
-
-  .sidebar-nav-link {
-    &:hover,
-    &.active {
-      color: $white !important;
-    }
-  }
-
-  .sidebar-content {
-    @include scrollbar(true);
-  }
-}
-
-/**
-Right sidebar
- */
-.sidebar-right {
-  left: auto;
-  right: 0;
-  box-shadow: inset 1px 0 $sidenav-border-color;
-
-  + .content {
-    margin-left: 0;
-    margin-right: $sidenav-width;
-
-    .navbar.fixed-top {
-      left: 0;
-      right: $sidenav-width;
-    }
-  }
-}
-
-/**
-Folded sidebar
- */
-.sidebar-narrow {
-  @include sidebar-narrow;
-}

scss/layout/_navbar.scss

@@ -1,180 +1,417 @@
 /*
-Navbar
+Horizontal navbar
  */
-.navbar {
+@mixin navbar-horizontal {
+  .d-none-navbar-horizontal,
+  ~ * .d-none-navbar-vertical-narrow {
+    display: none;
+  }
 
-  &, .navbar-dark {
+  .dropdown-menu {
-    min-height: $navbar-height;
+    margin-top: -4px;
+    margin-right: -7px;
+  }
+}
 
-    &.fixed-top {
+/*
-      + .content-page {
+Vertical narrow navbar
-        padding-top: $navbar-height;
+ */
-      }
+@mixin navbar-vertical-narrow {
+  width: $sidenav-width-narrow;
+  overflow: visible;
 
-      + .navbar:not(.fixed-top) {
+  .d-none-navbar-vertical-narrow,
-        margin-top: $navbar-height;
+  ~ * .d-none-navbar-vertical-narrow {
-      }
+    display: none;
+  }
 
-      + .navbar.fixed-top {
+  .navbar-nav {
-        top: $navbar-height;
+    margin-top: 0;
+  }
 
-        + .content-page {
+  .nav-link {
-          padding-top: $navbar-height * 2;
+    height: 3rem; //todo: to variable
+  }
+
+  .nav-link-title,
+  .navbar-heading {
+    display: none;
+  }
+
+  .nav-link-icon {
+    margin: 0 auto;
+    font-size: 1.125rem;
+    width: 1.125rem;
+    height: 1.125rem;
+  }
+
+  .navbar-brand-logo-large {
+    display: none;
+  }
+
+  .navbar-brand-logo-small {
+    display: inline-block;
+  }
+
+  ~ .navbar,
+  ~ .content {
+    margin-left: $sidenav-width-narrow;
+  }
+
+  .dropdown-toggle:after {
+    content: none;
+  }
+
+  .dropdown-menu {
+    left: 100%;
+    top: 0;
+    margin: 0 0 0 -4px;
+
+    &:before,
+    &:after {
+      content: none;
+    }
+
+    &.dropdown-menu-right {
+      top: auto;
+      bottom: 0;
+      right: auto;
+    }
+  }
+
+  &.navbar-right {
+    ~ .navbar,
+    ~ .content {
+      margin-left: 0;
+      margin-right: $sidenav-width-narrow;
+    }
+
+    .dropdown-menu {
+      margin: 0 -4px 0 0;
+      left: auto;
+      right: 100%;
+    }
+  }
+}
+
+/*
+Vertical navbar
+ */
+@mixin navbar-vertical {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: $sidenav-width;
+  z-index: $zindex-fixed;
+  min-height: auto;
+  align-items: start;
+  overflow: auto;
+
+  > [class*="container"] {
+    flex-direction: column;
+    align-items: stretch;
+    padding-left: 0;
+    padding-right: 0;
+    min-height: 100%;
+  }
+
+  ~ .navbar,
+  ~ .content {
+    margin-left: $sidenav-width;
+  }
+
+  .d-none-navbar-vertical,
+  ~ * .d-none-navbar-vertical {
+    display: none;
+  }
+
+  .navbar-brand {
+    display: flex;
+    width: 100%;
+    margin: 0;
+    text-align: center;
+    height: $navbar-height;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .navbar-heading {
+    @include subheader();
+    display: block;
+    margin-bottom: .5rem;
+  }
+
+  .navbar-collapse {
+    flex-direction: column;
+    text-align: left;
+    align-items: normal;
+
+    padding: $sidenav-padding $sidenav-padding;
+  }
+
+  .navbar-nav {
+    flex-direction: column;
+    margin-left: -($sidenav-padding);
+    margin-right: -($sidenav-padding);
+
+    .nav-link {
+      min-height: 0;
+      padding-left: $sidenav-padding;
+      padding-right: $sidenav-padding;
+    }
+
+    .nav-item {
+      &.active {
+        font-weight: 600;
+
+        &:before {
+          left: 0;
+          right: auto;
+          top: 0;
+          bottom: 0;
+          height: auto;
+          width: 2px;
         }
       }
     }
   }
 
-  @include media-breakpoint-up($cards-grid-breakpoint) {
+  .navbar-side {
-    padding-left: $cards-grid-gap / 2;
+    margin-left: 0;
-    padding-right: $cards-grid-gap / 2;
+    margin-top: auto;
+    padding-left: 0;
+    padding-top: $sidenav-padding;
+
+    > * {
+      margin-left: 0;
+      margin-top: 1rem;
+    }
+  }
+
+  &.navbar-right {
+    left: auto;
+    right: 0;
+
+    ~ .navbar,
+    ~ .content {
+      margin-left: 0;
+      margin-right: $sidenav-width;
+    }
+  }
+
+  &:not(.navbar-vertical-narrow) {
+    .d-none-navbar-vertical-wide,
+    ~ * .d-none-navbar-vertical-wide {
+      display: none;
+    }
+
+    .dropdown-menu {
+      position: static;
+      background: inherit;
+      border: 0;
+      box-shadow: none;
+      padding: 0;
+      margin: 0;
+      color: inherit;
+      columns: 1;
+
+      &:before,
+      &:after {
+        content: none;
+      }
+    }
+
+    .dropdown-item {
+      padding-left: add($sidenav-padding, 1.5rem);
+      opacity: $text-muted-opacity;
+
+      &:hover {
+        background: transparent;
+        color: inherit;
+        opacity: 1;
+      }
+    }
+
+    .dropdown-toggle:after {
+      margin-left: auto;
+    }
+  }
+
+  &.navbar-vertical-narrow {
+    @include navbar-vertical-narrow;
   }
 }
 
-.navbar-collapse-absolute {
+/*
-  @each $breakpoint, $width in $grid-breakpoints {
+All navbars
-    @at-root .navbar-expand-#{$breakpoint} & {
+ */
-      position: absolute;
+.navbar {
-      background: inherit;
+  padding-top: 0;
-      z-index: $zindex-sticky;
+  padding-bottom: 0;
-      left: 0;
-      right: 0;
 
+  @media print {
+    display: none;
+    margin: 0 !important;
+  }
+
+  .nav-link {
+    min-height: $navbar-height;
+  }
+
+  .nav-link-icon {
+    font-size: 1rem;
+    width: 1rem;
+    height: 1rem;
+    display: block;
+    margin-right: .5rem;
+    line-height: .99;
+  }
+}
+
+.navbar-expand {
+  @each $breakpoint, $breakpoint-max-width in $grid-breakpoints {
+    &-#{$breakpoint} {
       @include media-breakpoint-up($breakpoint) {
-        position: static;
+        min-height: $navbar-height;
+
+        .navbar-nav {
+          margin-left: (-$navbar-nav-link-padding-x);
+
+          .nav-item {
+            position: relative;
+
+            &.active {
+              &:before {
+                content: '';
+                position: absolute;
+                bottom: -1px;
+                left: $navbar-nav-link-padding-x;
+                right: $navbar-nav-link-padding-x;
+                height: 1px;
+                background: $sidenav-active-accent-color;
+              }
+            }
+          }
+        }
       }
     }
   }
 }
 
+.navbar-side {
+  margin-left: auto;
+  padding-left: 1.5rem;
+
+  > * {
+    margin-left: 1rem;
+  }
+}
+
+.navbar-heading {
+  display: none;
+}
+
 /**
-navbar toggler
+Navbar brand
  */
-.navbar-toggler {
+.navbar-brand {
-  border: 0;
+  padding: 0; //todo: move to varaibles
-  font-size: $navbar-toggler-font-size;
-  width: add($navbar-toggler-size, $navbar-toggler-padding-x * 2);
-  height: add($navbar-toggler-size, $navbar-toggler-padding-y * 2);
-  margin: $navbar-toggler-margin;
-  position: relative;
 }
 
-
-.navbar-toggler-icon {
-  $time: $navbar-toggler-transform-time / 2;
-
-  background-image: none !important;
-  position: absolute;
-  width: $navbar-toggler-size;
-  height: $navbar-toggler-item-height;
-  border-radius: 3px;
-
-  left: 50%;
-  top: 50%;
-  margin-left: -($navbar-toggler-size / 2);
-  margin-top: -($navbar-toggler-item-height / 2);
-
-  background: currentColor;
-  transform-origin: center;
-  transition: transform $time, top $time $time, bottom $time $time;
-
-  &:before,
-  &:after {
-    content: '';
-    background: inherit;
-    position: absolute;
-    height: inherit;
-    width: inherit;
-    left: 0;
-    border-radius: inherit;
-    transition: inherit;
-  }
-
-  &:before {
-    top: $navbar-toggler-item-spacing;
-  }
-
-  &:after {
-    bottom: $navbar-toggler-item-spacing;
-  }
-
-  .navbar-toggler[aria-expanded="true"] & {
-    transform: rotate(45deg);
-    transition: top $time, bottom $time, transform $time $time, opacity $time;
-
-    &:before {
-      top: 0;
-      transform: rotate(-90deg);
-    }
-
-    &:after {
-      bottom: 0;
-      opacity: 0;
-    }
-  }
-}
-
-/**
-navbar with border
-*/
-.navbar-border {
-  box-shadow: inset 0 -1px 0 0px $navbar-border-color;
-}
-
-/**
-Navbar logo
- */
 .navbar-brand-logo {
   height: 2rem;
 }
 
-.navbar-nav {
+.navbar-brand-logo-small {
-  margin-right: -($navbar-nav-link-padding-x);
+  display: none;
-  margin-left: -($navbar-nav-link-padding-x);
+}
 
-  .nav-link {
+/**
-    padding-left: $navbar-nav-link-padding-x;
+Navbar colors
-    padding-right: $navbar-nav-link-padding-x;
+ */
-  }
+.navbar {
+  box-shadow: 0 0 0 1px $border-color;
 
-  @each $breakpoint, $width in $grid-breakpoints {
+  .navbar-nav {
-    @at-root .navbar-expand-#{$breakpoint} & {
+    .nav-link {
-      @include media-breakpoint-up($breakpoint) {
+      color: inherit;
-        .nav-item:hover,
+      opacity: $text-muted-opacity;
-        .dropright:hover {
+
-          > .dropdown-menu {
+      &:hover {
-            display: block;
+        color: inherit;
-          }
+        opacity: 1;
-        }
       }
 
-      @include media-breakpoint-down($breakpoint) {
+      &.disabled {
-        .dropdown-menu {
+        color: inherit;
-          box-shadow: none;
+        opacity: $text-muted-opacity / 3;
-          border: 0;
-          padding: 0;
-        }
-
-        .dropdown-item {
-          padding-left: add($navbar-nav-link-padding-x, 19px);
-          padding-right: 0;
-        }
       }
     }
+
+    .show > .nav-link,
+    .active > .nav-link,
+    .nav-link.show,
+    .nav-link.active {
+      color: inherit;
+      opacity: 1;
+    }
+  }
+}
+
+.navbar-light {
+  background: $white;
+  @include scrollbar;
+}
+
+.navbar-dark {
+  background: $sidenav-dark-bg;
+  color: $sidenav-dark-color;
+  box-shadow: 0 0 0 1px $dark-darken;
+  @include scrollbar(true);
+
+  .text-muted {
+    color: inherit !important;
+    opacity: $text-muted-opacity;
   }
 
-  .dropdown-menu {
+  .navbar-brand-autodark {
-    .dropdown,
+    @include autodark-image;
-    .dropright {
+  }
-      .dropdown-toggle:after {
+
-        margin-left: auto;
+  .form-control {
+    border-color: transparent;
+    background: $dark-lighten;
+    color: $white;
+  }
+}
+
+/**
+Navbar vertical
+ */
+@if $enable-navbar-vertical {
+  .navbar:not(.navbar-vertical) {
+    @include navbar-horizontal;
+  }
+
+  .navbar-vertical {
+    @each $breakpoint, $breakpoint-max-width in $grid-breakpoints {
+      &.navbar-expand-#{$breakpoint} {
+        @include media-breakpoint-up($breakpoint) {
+          @include navbar-vertical;
+        }
+
+        @include media-breakpoint-down-than($breakpoint) {
+          @include navbar-horizontal;
+        }
       }
     }
   }
 }
 
-.navbar-brand {
+/**
-  padding: 0;
+Navbar secondary
-  line-height: 1;
+ */
-}
+.navbar-secondary {
-
+  order: -1;
+}

scss/layout/_page.scss

@@ -1,4 +1,24 @@
-.page-title-box {
+.page {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.content {
+  padding-top: 1.25rem;
+  padding-bottom: 1.25rem;
+
+  @include media-breakpoint-up(xl) {
+    padding-left: .5rem;
+    padding-right: .5rem;
+  }
+
+  @media print {
+    margin: 0 !important;
+  }
+}
+
+.page-header {
   display: flex;
   align-items: center;
   min-height: 2.25rem;

scss/mixins/_functions.scss

@@ -18,3 +18,29 @@
 
   @return $string;
 }
+
+@mixin media-breakpoint-down-than($name, $breakpoints: $grid-breakpoints) {
+  $prev: breakpoint-prev($name);
+
+  @if $prev == null {
+    @content;
+  } @else {
+    $max: breakpoint-max($prev, $breakpoints);
+
+    @if $max {
+      @media (max-width: $max) {
+        @content;
+      }
+    } @else {
+      @content;
+    }
+  }
+}
+
+@function breakpoint-prev($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
+  $n: index($breakpoint-names, $name);
+  @if not $n {
+    @error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
+  }
+  @return if($n > 1, nth($breakpoint-names, $n - 1), null);
+}

scss/mixins/_mixins.scss

@@ -26,6 +26,10 @@
     }
   }
 
+  &::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
   &:hover::-webkit-scrollbar-thumb {
     background: $gray-500;
 
@@ -37,9 +41,23 @@
   }
 }
 
-@mixin dark {
+
-  .bg-dark &,
+@mixin autodark-image {
-  .theme-dark & {
+  filter: brightness(0) invert(1);
-    @content;
-  }
 }
+
+@mixin dark-mode {
+  @if $enable-dark-mode {
+    @media not print {
+      .theme-dark {
+        @content
+      }
+    }
+
+    @media not print and (prefers-color-scheme: dark) {
+      .theme-dark-auto {
+        @content
+      }
+    }
+  }
+}

scss/tabler-dark.scss

@@ -1,2 +0,0 @@
-@import "config";
-@import "dark";