dependencies update, new package

remove unused files
Merge pull request #474 from tabler/dev-sidebar
2025-12-22 01:44:25 +04:00 · 2020-02-04 00:32:06 +01:00 · 2020-02-04 00:16:17 +01:00 · 2020-02-04 00:14:52 +01:00 · 2020-02-04 00:14:14 +01:00 · 2020-02-04 00:11:50 +01:00
116 changed files with 1125 additions and 1409 deletions
--- a/.github/CODE_OF_CONDUCT.md
+++ b/.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.
--- a/9
+++ b/9
@@ -3,10 +3,11 @@ source "https://rubygems.org"
 gem "jekyll"

 group :jekyll_plugins do
-  gem "jekyll-random"
-  gem "jekyll-tidy"
-  gem "jekyll-timeago"
-  gem 'jekyll-redirect-from'
+	gem 'jekyll-toc'
+	gem "jekyll-random"
+	gem "jekyll-tidy"
+	gem "jekyll-timeago"
+	gem 'jekyll-redirect-from'
 end

 gem 'wdm', '>= 0.1.1' if Gem.win_platform?
--- a/_config.yml
+++ b/_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:
--- a/build/scss-compile.js
+++ b/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');

--- a/js/tabler.js
+++ b/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]"));
-	// countupTriggerList.map(function (countupTriggerEl) {
-	// 	let dataCountUp = JSON.parse(countupTriggerEl.getAttribute("data-countup"));
-	// 	return (new CountUp(countupTriggerEl, parseFloat(countupTriggerEl.innerText), dataCountUp)).start();
-	// });
+	let countupTriggerList = [].slice.call(document.querySelectorAll("[data-countup]"));
+	countupTriggerList.map(function (countupTriggerEl) {
+		let dataCountUp;
+		if(countupTriggerEl.getAttribute("data-countup") != "") dataCountUp = JSON.parse(countupTriggerEl.getAttribute("data-countup"));
+		return (new CountUp(countupTriggerEl, parseFloat(countupTriggerEl.innerText), dataCountUp)).start();
+	});
 })();
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "tabler",
-  "version": "1.0.0-alpha.2",
-  "version_short": "1.0.0-alpha.2",
+  "version": "1.0.0-alpha.3",
+  "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-unicorn": "15.0.1",
+    "eslint-plugin-import": "2.20.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",
--- a/pages/_data/colors.yml
+++ b/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-600: '#aeb3bc'
-gray-700: '#8b929e'
-gray-800: '#5f6877'
+gray-500: '#cbcfd6'
+gray-600: '#a8aeb7'
+gray-700: '#7a828f'
+gray-800: '#545d6d'
 gray-900: '#354052'

-border-color: '#dee1e7'
-text-muted: '#8b929e'
+border-color: 'rgba(126, 133, 144, 0.24)'
+text-muted: '#7e8590'
--- a/pages/_data/menu.yml
+++ b/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
--- a/pages/_docs/form-elements.md
+++ b/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>
--- a/pages/_includes/cards/credit-card.html
+++ b/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>
--- a/pages/_includes/cards/feed-card.html
+++ b/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>
--- a/pages/_includes/cards/invoices.html
+++ b/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>
-						{% include ui/dropdown-menu.html %}
+						<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 right=true %}
 					</span>
 				</td>
 				<td>
--- a/pages/_includes/cards/table-users.html
+++ b/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="text-center"><i class="icon-settings"></i></th>
+				<th class="w-1p">Satisfaction</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>
--- a/pages/_includes/cards/timeline.html
+++ b/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>
--- a/pages/_includes/forms/form-elements-5.html
+++ b/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>
--- a/pages/_includes/layout/css.html
+++ b/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"/>
--- a/pages/_includes/layout/customize.html
+++ b/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 %}
--- a/pages/_includes/layout/debug.html
+++ b/pages/_includes/layout/debug.html
@@ -47,10 +47,6 @@
 		display: flex;
 	}

-	.content-page {
-		padding-bottom: 2rem;
-	}
-
 	.debug a {
 		color: inherit;
 		margin-right: 1rem;
--- a/pages/_includes/layout/homepage.html
+++ b/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">

--- a/pages/_includes/layout/menu-aside.html
+++ b/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>
--- a/pages/_includes/layout/menu.html
+++ b/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>
--- a/pages/_includes/layout/navbar-logo.html
+++ b/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 %}">
-	<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-small{% if include.dark %}-white{% endif %}.svg" alt="{{ site.title }}" class="{{ prefix }}-brand-logo {{ prefix }}-brand-logo-sm">
+<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-large">
+	<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>
--- a/pages/_includes/layout/navbar-menu.html
+++ b/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>
--- a/pages/_includes/layout/navbar-primary.html
+++ b/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>
+
--- a/pages/_includes/layout/navbar-secondary.html
+++ b/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>
+
--- a/pages/_includes/layout/page-header-actions.html
+++ b/pages/_includes/layout/page-header-actions.html
--- a/pages/_includes/layout/page-header.html
+++ b/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>
--- a/pages/_includes/layout/sidebar.html
+++ b/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>
-
--- a/pages/_includes/layout/topnav.html
+++ b/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 %}
--- a/pages/_includes/parts/form/input-color.html
+++ b/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 %}">
--- a/pages/_includes/parts/form/input-icon-separated.html
+++ b/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>
--- a/pages/_includes/parts/form/input-image.html
+++ b/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 %}
--- a/pages/_includes/ui/dropdown-menu.html
+++ b/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.disabled %}<a class="dropdown-item disabled" href="#">{% if include.icons %}{% include ui/icon.html icon="user-x" %} {% endif %}Disabled 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" 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>
--- a/pages/_includes/ui/form/input-mask.html
+++ b/pages/_includes/ui/form/input-mask.html
@@ -4,16 +4,17 @@
 {% capture_once scripts %}
 <script>
 (function () {
-	const $elem = $('[data-mask]');
-
-	if ($elem) {
-		$elem.each(function () {
-			IMask($(this).get(0), {
-				mask: $(this).attr('data-mask'),
-				lazy: $(this).attr('data-mask-visible') === 'true',
-			});
-		});
-	}
+	/**
+	 * Input mask
+	 */
+	var maskElementList = [].slice.call(document.querySelectorAll('[data-mask]'))
+	maskElementList.map(function (maskEl) {
+		console.log('maskEl', maskEl);
+		return new IMask(maskEl, {
+			mask: maskEl.dataset.mask,
+			lazy: maskEl.dataset['mask-visible'] === 'true'
+		})
+	});
 })();
 </script>
 {% endcapture_once %}
--- a/pages/_includes/ui/sparkline.html
+++ b/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,
 		});
--- a/pages/_layouts/component.html
+++ b/pages/_layouts/component.html
@@ -1,7 +1,7 @@
 ---
 layout: default
 menu: components
-page-title: Tabler components
+page-header: Tabler components
 og-component: true
 ---

--- a/pages/_layouts/default.html
+++ b/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/sidebar.html %}
-	{% endif %}
+	{% include layout/navbar-primary.html %}
+	{% include layout/navbar-secondary.html %}

 	<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">
-			<main class="container{% if page.container-size %}-{{ page.container-size }}{% endif %} my-4 flex-fill">
-				{% 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>
+			{{ content }}
+		</main>
 	</div>
 </div>
--- a/pages/_layouts/docs.html
+++ b/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: "^/", "" %}
--- a/pages/_layouts/markdown.html
+++ b/pages/_layouts/markdown.html
@@ -2,12 +2,20 @@
 layout: default
 ---

-<div class="row row justify-content-center">
-	<div class="col-lg-10 col-xl-8">
-		<div class="card">
-			<div class="card-body p-md-7">
+<div class="row justify-content-center">
+	<div class="col-lg-10 col-xl-9">
+		<div class="card card-lg">
+			<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>
--- a/pages/_plugins/jekyll-example.rb
+++ b/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(/\n*<\/pre>/, "</code></pre>")
+  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></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

--- a/pages/all.html
+++ b/pages/all.html
@@ -1,6 +1,6 @@
 ---
 title: Index
-page-title: Index
+page-header: Index
 menu: index
 ---

--- a/pages/blog.html
+++ b/pages/blog.html
@@ -1,6 +1,6 @@
 ---
 title: Blog
-page-title: Blog
+page-header: Blog
 menu: extra.blog
 ---

--- a/pages/buttons.html
+++ b/pages/buttons.html
@@ -1,6 +1,6 @@
 ---
 title: Buttons
-page-title: Buttons
+page-header: Buttons
 done: true
 menu: base.buttons
 ---
--- a/pages/calendar.html
+++ b/pages/calendar.html
@@ -1,7 +1,7 @@
 ---
 title: Calendar
-page-title: Calendar
-page-title-actions: calendar
+page-header: Calendar
+page-header-actions: calendar
 menu: base.calendar
 ---

--- a/pages/cards.html
+++ b/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" %}
--- a/pages/carousel.html
+++ b/pages/carousel.html
@@ -1,6 +1,6 @@
 ---
 title: Carousel
-page-title: Carousel
+page-header: Carousel
 layout: default
 done: true
 menu: base.carousel
--- a/pages/changelog.html
+++ b/pages/changelog.html
@@ -1,6 +1,6 @@
 ---
 title: Changelog
-page-title: Changelog
+page-header: Changelog
 menu: changelog
 done: true
 ---
--- a/pages/charts-heatmap.html
+++ b/pages/charts-heatmap.html
@@ -1,6 +1,6 @@
 ---
 title: Heatmap Charts
-page-title: Heatmap Charts
+page-header: Heatmap Charts
 done: true
 ---

--- a/pages/charts.html
+++ b/pages/charts.html
@@ -1,6 +1,6 @@
 ---
 title: Charts
-page-title: Charts
+page-header: Charts
 menu: charts
 ---

--- a/pages/crypto-currencies.html
+++ b/pages/crypto-currencies.html
@@ -1,6 +1,6 @@
 ---
 title: Crypto currencies
-page-title: Crypto currencies
+page-header: Crypto currencies
 done: true
 ---

--- a/pages/dropdowns.html
+++ b/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" %}
--- a/pages/email.html
+++ b/pages/email.html
@@ -1,6 +1,6 @@
 ---
 title: Email
-page-title: Crypto currencies
+page-header: Crypto currencies
 ---

 <div class="row">
--- a/pages/flags.html
+++ b/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">
--- a/pages/form-elements.html
+++ b/pages/form-elements.html
@@ -1,6 +1,6 @@
 ---
 title: Form elements
-page-title: Form elements
+page-header: Form elements
 menu: forms
 ---

--- a/pages/gallery.html
+++ b/pages/gallery.html
@@ -1,8 +1,8 @@
 ---
 title: Gallery
-page-title: Gallery
-page-title-description: 1-12 of 241 photos
-page-title-actions: photos
+page-header: Gallery
+page-header-description: 1-12 of 241 photos
+page-header-actions: photos
 done: true
 menu: base.gallery
 ---
--- a/pages/homepage.html
+++ b/pages/homepage.html
@@ -1,7 +1,7 @@
 ---
 title: Homepage
-page-title: Homepage
-page-pretitle: Overview
+page-header: Homepage
+page-header-pretitle: Overview
 ---

 <div class="row">
--- a/pages/icons.html
+++ b/pages/icons.html
@@ -1,6 +1,6 @@
 ---
 title: Icons
-page-title: Icons
+page-header: Icons
 ---

 <div class="row">
--- a/pages/index.html
+++ b/pages/index.html
@@ -1,8 +1,8 @@
 ---
 title: Dashboard
-page-title: Dashboard
-page-pretitle: Overview
-page-title-actions: buttons
+page-header: Dashboard
+page-header-pretitle: Overview
+page-header-actions: buttons
 menu: home
 ---

--- a/pages/layout-dark-navigation.html
+++ b/pages/layout-dark-navigation.html
@@ -1,5 +1,5 @@
 ---
-page-title: Page Layouts
+page-header: Page Layouts
 menu: layouts
 topmenu-dark: true
 ---
--- a/pages/layout-dark-topnav.html
+++ b/pages/layout-dark-topnav.html
@@ -1,5 +1,5 @@
 ---
-page-title: Page Layouts
+page-header: Page Layouts
 menu: layouts
 topnav-dark: true
 ---
--- a/pages/layout-dark.html
+++ b/pages/layout-dark.html
@@ -1,5 +1,5 @@
 ---
-page-title: Page Layouts
+page-header: Page Layouts
 menu: layouts
 ---

--- a/pages/layout-sidebar-dark.html
+++ b/pages/layout-sidebar-dark.html
@@ -1,5 +1,5 @@
 ---
-page-title: Page Layouts
+page-header: Page Layouts
 menu: layouts
 sidebar: true
 sidebar-dark: true
--- a/pages/layout-sidebar-narrow.html
+++ b/pages/layout-sidebar-narrow.html
@@ -1,5 +1,5 @@
 ---
-page-title: Page Layouts
+page-header: Page Layouts
 menu: layouts
 sidebar: true
 sidebar-dark: true
--- a/pages/layout-sidebar-only.html
+++ b/pages/layout-sidebar-only.html
@@ -1,5 +1,5 @@
 ---
-page-title: Page Layouts
+page-header: Page Layouts
 menu: layouts
 sidebar: true
 hide-topnav: true
--- a/pages/layout-sidebar-right.html
+++ b/pages/layout-sidebar-right.html
@@ -1,5 +1,5 @@
 ---
-page-title: Page Layouts
+page-header: Page Layouts
 menu: layouts
 sidebar: true
 sidebar-right: true
--- a/pages/layout-sidebar.html
+++ b/pages/layout-sidebar.html
@@ -1,5 +1,5 @@
 ---
-page-title: Page Layouts
+page-header: Page Layouts
 menu: layouts
 sidebar: true
 ---
--- a/pages/layouts.html
+++ b/pages/layouts.html
@@ -1,5 +1,5 @@
 ---
-page-title: Page Layouts
+page-header: Page Layouts
 menu: layouts
 ---

--- a/pages/license.html
+++ b/pages/license.html
@@ -1,6 +1,6 @@
 ---
 tmp: true
-page-title: Tabler licence
+page-header: Tabler licence
 ---

 <div class="card">
--- a/pages/lists.html
+++ b/pages/lists.html
@@ -1,7 +1,7 @@
 ---
 menu: base.lists
 title: Lists
-page-title: Lists
+page-header: Lists
 ---

 <div class="row">
--- a/pages/lookup.html
+++ b/pages/lookup.html
@@ -1,6 +1,6 @@
 ---
 title: Lookup company
-page-title: Lookup company
+page-header: Lookup company
 layout: default
 ---

--- a/pages/maps.html
+++ b/pages/maps.html
@@ -1,6 +1,6 @@
 ---
 title: Maps
-page-title: Maps
+page-header: Maps
 ---

 <div class="row">
--- a/pages/markdown.md
+++ b/pages/markdown.md
@@ -1,6 +1,6 @@
 ---
 title: Markdown
-page-title: Markdown
+page-header: Markdown
 ---

 # Who's that then?
--- a/pages/music.html
+++ b/pages/music.html
@@ -1,6 +1,6 @@
 ---
 title: Music components
-page-title: Music components
+page-header: Music components
 menu: base.music
 ---

--- a/pages/pricing.html
+++ b/pages/pricing.html
@@ -1,6 +1,6 @@
 ---
 title: Pricing cards
-page-title: Pricing cards
+page-header: Pricing cards
 done: true
 ---

--- a/pages/profile.html
+++ b/pages/profile.html
@@ -1,6 +1,6 @@
 ---
 title: Profile
-page-title: Profile
+page-header: Profile
 menu: base.profile
 ---

--- a/pages/ribbons.html
+++ b/pages/ribbons.html
@@ -1,6 +1,6 @@
 ---
 title: Ribbons
-page-title: Ribbons
+page-header: Ribbons
 done: true
 ---

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

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

--- a/pages/snippets.html
+++ b/pages/snippets.html
@@ -1,7 +1,7 @@
 ---
 title: Snippets
-page-title: Snippets
-page-title-right: date
+page-header: Snippets
+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
-		subtitle="Sales" description="12 waiting payments" %}
+	<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" %}
 	</div>
-	<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" %}
+	<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" %}
 	</div>
-	<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" %}
+	<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" %}
 	</div>
-	<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" %}
+	<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" %}
 	</div>

-	<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" %}
+	<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" %}
 	</div>
-	<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" %}
+	<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" %}
 	</div>
-	<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" %}
+	<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" %}
 	</div>
-	<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" %}
+	<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" %}
 	</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" %}
--- a/pages/social.html
+++ b/pages/social.html
@@ -1,6 +1,6 @@
 ---
 title: Social elements
-page-title: Social elements
+page-header: Social elements
 done: true
 ---

--- a/pages/store.html
+++ b/pages/store.html
@@ -1,6 +1,6 @@
 ---
 title: Store
-page-title: Store
+page-header: Store
 ---


--- a/pages/tabs.html
+++ b/pages/tabs.html
@@ -1,6 +1,6 @@
 ---
 title: Tabs
-page-title: Tabs
+page-header: Tabs
 done: true
 ---

--- a/pages/tmp-dark.html
+++ b/pages/tmp-dark.html
@@ -1,5 +1,5 @@
 ---
-page-title: Dark
+page-header: Dark
 ---

 <div class="row row-md">
--- a/pages/tmp2.html
+++ b/pages/tmp2.html
@@ -1,6 +1,6 @@
 ---
 tmp: true
-page-title: Search results
+page-header: Search results
 ---


--- a/pages/typography.html
+++ b/pages/typography.html
@@ -1,6 +1,6 @@
 ---
 title: Typography
-page-title: Typography
+page-header: Typography
 done: true
 ---

--- a/pages/users.html
+++ b/pages/users.html
@@ -1,9 +1,9 @@
 ---
 layout: default
 title: Users list
-page-title: Users
-page-title-actions: users
-page-title-description: 1-18 of 413 people
+page-header: Users
+page-header-actions: users
+page-header-description: 1-18 of 413 people
 done: true
 menu: base.users
 ---
--- a/scss/_dark.scss
+++ b/scss/_dark.scss
@@ -1,62 +1,66 @@
 // stylelint-disable declaration-no-important

-@mixin dark-mode {
-  &,
-  .modal-content,
-  .dropdown-menu,
-  .example-bg {
-    color: $dark-body-color;
-    background: $dark-body-bg;
+$dark-text: $light;
+
+@include dark-mode {
+  & {
+    color: $dark-text;
+    background: $dark-darken;
  }

  .card,
-  .sidebar,
-  .topbar {
-    color: inherit;
+  .navbar-light {
    background: $dark;
+    color: inherit;
  }

-  .text-body {
-    color: #afbdd1 !important;
-  }
-
-  .avatar-list-stacked .avatar {
-    box-shadow: 0 0 0 2px #222226;
-  }
-
-  .navbar-brand-logo {
-    filter: brightness(0) invert(1);
-  }
-
-  .form-fieldset {
+  .card {
    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) {
-    background: transparent;
-    border-color: $dark-border-color;
-    color: inherit;
+  .form-file-text,
+  .form-control,
+  .flatpickr-input.flatpickr-input,
+  .form-selectgroup-check,
+  .form-imagecheck-figure:before {
+    background-color: $dark-darken;
+    color: $dark-text;
  }

-  .input-group-text {
-    border-color: $dark-border-color;
+  .input-group-flat .input-group-text {
+    background-color: $dark-darken;
  }

-  .brand-logo {
-    filter: brightness(0) invert(1);
+  .navbar {
+    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;
-  }
-}
--- a/scss/_tabler-core.scss
+++ b/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";
--- a/scss/_variables.scss
+++ b/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-600: mix($light, $dark, 63%) !default;
-$gray-700: mix($light, $dark, 45%) !default;
-$gray-800: mix($light, $dark, 22%) !default;
+$gray-500: mix($light, $dark, 78%) !default;
+$gray-600: mix($light, $dark, 60%) !default;
+$gray-700: mix($light, $dark, 36%) !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;
-$border-color: rgba(mix($body-color, #fff, 64%), .24) !default;
+$text-muted-opacity: .64 !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;
--- a/scss/demo.scss
+++ b/scss/demo.scss
@@ -0,0 +1,3 @@
+@import "config";
+@import "demo/highlight";
+@import "demo/examples";
--- a/scss/demo/_examples.scss
+++ b/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 {
--- a/scss/demo/_highlight.scss
+++ b/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; }
+}
--- a/scss/layout/_core.scss
+++ b/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;
--- a/scss/layout/_layout.scss
+++ b/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;
-}
--- a/scss/layout/_navbar.scss
+++ b/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 {
-    min-height: $navbar-height;
+  .dropdown-menu {
+    margin-top: -4px;
+    margin-right: -7px;
+  }
+}

-    &.fixed-top {
-      + .content-page {
-        padding-top: $navbar-height;
-      }
+/*
+Vertical narrow navbar
+ */
+@mixin navbar-vertical-narrow {
+  width: $sidenav-width-narrow;
+  overflow: visible;

-      + .navbar:not(.fixed-top) {
-        margin-top: $navbar-height;
-      }
+  .d-none-navbar-vertical-narrow,
+  ~ * .d-none-navbar-vertical-narrow {
+    display: none;
+  }

-      + .navbar.fixed-top {
-        top: $navbar-height;
+  .navbar-nav {
+    margin-top: 0;
+  }

-        + .content-page {
-          padding-top: $navbar-height * 2;
+  .nav-link {
+    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) {
-    padding-left: $cards-grid-gap / 2;
-    padding-right: $cards-grid-gap / 2;
+  .navbar-side {
+    margin-left: 0;
+    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 {
-    @at-root .navbar-expand-#{$breakpoint} & {
-      position: absolute;
-      background: inherit;
-      z-index: $zindex-sticky;
-      left: 0;
-      right: 0;
+/*
+All navbars
+ */
+.navbar {
+  padding-top: 0;
+  padding-bottom: 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 {
-  border: 0;
-  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-brand {
+  padding: 0; //todo: move to varaibles
 }

-
-.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 {
-  margin-right: -($navbar-nav-link-padding-x);
-  margin-left: -($navbar-nav-link-padding-x);
+.navbar-brand-logo-small {
+  display: none;
+}

-  .nav-link {
-    padding-left: $navbar-nav-link-padding-x;
-    padding-right: $navbar-nav-link-padding-x;
-  }
+/**
+Navbar colors
+ */
+.navbar {
+  box-shadow: 0 0 0 1px $border-color;

-  @each $breakpoint, $width in $grid-breakpoints {
-    @at-root .navbar-expand-#{$breakpoint} & {
-      @include media-breakpoint-up($breakpoint) {
-        .nav-item:hover,
-        .dropright:hover {
-          > .dropdown-menu {
-            display: block;
-          }
-        }
+  .navbar-nav {
+    .nav-link {
+      color: inherit;
+      opacity: $text-muted-opacity;
+
+      &:hover {
+        color: inherit;
+        opacity: 1;
      }

-      @include media-breakpoint-down($breakpoint) {
-        .dropdown-menu {
-          box-shadow: none;
-          border: 0;
-          padding: 0;
-        }
-
-        .dropdown-item {
-          padding-left: add($navbar-nav-link-padding-x, 19px);
-          padding-right: 0;
-        }
+      &.disabled {
+        color: inherit;
+        opacity: $text-muted-opacity / 3;
      }
    }
+
+    .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 {
-    .dropdown,
-    .dropright {
-      .dropdown-toggle:after {
-        margin-left: auto;
+  .navbar-brand-autodark {
+    @include autodark-image;
+  }
+
+  .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;
-  line-height: 1;
-}
-
+/**
+Navbar secondary
+ */
+.navbar-secondary {
+  order: -1;
+}
--- a/scss/layout/_page.scss
+++ b/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;
--- a/scss/layout/_sidenav.scss
+++ b/scss/layout/_sidenav.scss
--- a/scss/mixins/_functions.scss
+++ b/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);
+}
--- a/scss/mixins/_mixins.scss
+++ b/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 &,
-  .theme-dark & {
-    @content;
-  }
+
+@mixin autodark-image {
+  filter: brightness(0) invert(1);
 }
+
+@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
+      }
+    }
+  }
+}
--- a/scss/tabler-dark.scss
+++ b/scss/tabler-dark.scss
@@ -1,2 +0,0 @@
-@import "config";
-@import "dark";
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
codecalm	ca79aa3087	dependencies update, new package	2020-02-04 00:32:06 +01:00
codecalm	2b4d3fbd55	remove unused files	2020-02-04 00:16:17 +01:00
Paweł Kuna	0f8f8c7c3d	Merge pull request #474 from tabler/dev-sidebar New navigation	2020-02-04 00:14:52 +01:00
codecalm	da9dbdf5b7	Merge branches 'dev' and 'dev-sidebar' of https://github.com/tabler/tabler into dev-sidebar Conflicts: pages/_includes/cards/table-users.html	2020-02-04 00:14:14 +01:00
codecalm	66fafcd1ab	navbar menu	2020-02-04 00:11:50 +01:00
codecalm	b0f182f0fe	dark mode improvements	2020-02-03 23:33:25 +01:00
codecalm	d560945dff	removed unused files, dark mode fix	2020-02-03 22:58:49 +01:00
codecalm	b51518c9c3	layout cleanup, removed unused files	2020-02-03 22:56:27 +01:00
codecalm	0b991a07f3	dark mode improvements, next fixes	2020-02-03 22:52:05 +01:00
codecalm	cdd37a4b57	tabler dark mode, sidebar improvements, huge layout fixes	2020-02-03 22:08:06 +01:00
codecalm	c966e3fbd8	secondary dropdown menu	2020-02-03 01:22:36 +01:00
codecalm	faef16ccea	navbar hidden in mobile, secondary menu	2020-02-03 01:16:29 +01:00
codecalm	af19fe5584	secondary navigation utilities	2020-02-03 01:05:57 +01:00
codecalm	5f43fabb7f	sidebar dropdown	2020-02-03 00:54:36 +01:00
codecalm	24f90220a7	narrov sidebar fix	2020-02-02 23:37:25 +01:00
Paweł Kuna	075242d126	Fix users and invoices table jumping (#473 ) Fix users and invoices table jumping	2020-02-02 23:10:14 +01:00
codecalm	dca00ea501	navigation components	2020-02-02 23:05:51 +01:00
codecalm	3738f63d8d	demo stylesheet, md fixes	2020-02-02 16:48:59 +01:00
codecalm	71ac502a45	markdown fixes, code highlight fix	2020-02-02 16:21:56 +01:00
codecalm	9e9f866aee	markdown fixes, docs styling	2020-02-02 15:05:55 +01:00
Alex	e2ccff30cf	Fix table jumping	2020-02-02 16:01:51 +08:00
Alex Safian	b145a3d7be	Merge pull request #3 from tabler/dev Update repository	2020-02-02 13:50:42 +08:00
codecalm	b402764696	d-none class fix	2020-02-01 23:40:22 +01:00
codecalm	1f3c088e79	media functions, navbar utilities	2020-02-01 23:38:42 +01:00
codecalm	5c181d858c	layout rebuild	2020-02-01 21:56:24 +01:00
codecalm	a1207b7608	Merge remote-tracking branch 'origin/dev' into dev	2020-02-01 19:30:21 +01:00
codecalm	33eac63eb6	credit card element, input mask remove jquery, grid fixes	2020-02-01 19:30:16 +01:00
Dawid Harat	ac225344e5	countup fix	2020-01-31 19:07:12 +01:00
Paweł Kuna	95e222ca9f	Fixed for smaller viewport (#471 ) Fixed for smaller viewport	2020-01-31 10:36:41 +01:00
kicaj	1e1e2ca183	Fixed for smaller viewport	2020-01-31 08:37:48 +01:00