Release 1.0.0-alpha.12

# Conflicts:
#	src/pages/_includes/ui/icon.html

.bundlewatch.config.json

@@ -0,0 +1,36 @@
+{
+  "files": [
+    {
+      "path": "./dist/css/tabler.css",
+      "maxSize": "55 kB"
+    },
+    {
+      "path": "./dist/css/tabler.min.css",
+      "maxSize": "45 kB"
+    },
+    {
+      "path": "./dist/css/tabler-flags.css",
+      "maxSize": "2 kB"
+    },
+    {
+      "path": "./dist/css/tabler-flags.min.css",
+      "maxSize": "2 kB"
+    },
+    {
+      "path": "./dist/css/tabler-payments.css",
+      "maxSize": "2 kB"
+    },
+    {
+      "path": "./dist/css/tabler-payments.min.css",
+      "maxSize": "2 kB"
+    },
+    {
+      "path": "./dist/js/tabler.js",
+      "maxSize": "2 kB"
+    },
+    {
+      "path": "./dist/js/tabler.min.js",
+      "maxSize": "1.5 kB"
+    }
+  ]
+}

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,30 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: "[BUG] "
+labels: bug
+assignees: ''
+
+---
+
+**Describe the bug**
+
+A clear and concise description of what the bug is.
+
+**Device**
+
+ - Browser [e.g. Chrome ver.22, Safari ver.10]
+ - OS: [e.g. Windows 10]
+ - Screen size [e.g. 800x600]
+
+**To reproduce**
+
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '...'
+3. Scroll down to '...'
+4. See error
+
+**Screenshots**
+
+If applicable, add screenshots to help explain this problem.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,17 @@
+---
+name: Feature request
+about: Suggest an idea for Tabler
+title: "[FEATURE] "
+labels: enhancement
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Example: I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.

.gitignore

@@ -4,11 +4,13 @@ node_modules/
 .jekyll-metadata
 .jekyll-cache
 /tmp/
+/.tmp/
 /tmp-dist/
 /yarn.lock
 .DS_Store
 /_site/
 /.cache/
+.sass-cache/
 
 .vscode/
 
@@ -19,3 +21,6 @@ node_modules/
 /svg-tmp/
 /components/
 /percy.sh
+/Gemfile.lock
+/package-lock.json
+/src/pages/playground.html

.percy.yml

@@ -0,0 +1,3 @@
+version: 1
+snapshot:
+  widths: [1440]

Gemfile

@@ -1,9 +1,8 @@
 source "https://rubygems.org"
 
-gem "jekyll", "~> 4.0"
+gem "jekyll", "4.1.1"
 
 group :jekyll_plugins do
-	gem 'jekyll-toc'
 	gem "jekyll-random"
 	gem "jekyll-tidy"
 	gem "jekyll-timeago"

Gemfile.lock

@@ -1,89 +0,0 @@
-GEM
-  remote: https://rubygems.org/
-  specs:
-    addressable (2.7.0)
-      public_suffix (>= 2.0.2, < 5.0)
-    colorator (1.1.0)
-    concurrent-ruby (1.1.6)
-    em-websocket (0.5.1)
-      eventmachine (>= 0.12.9)
-      http_parser.rb (~> 0.6.0)
-    eventmachine (1.2.7)
-    ffi (1.12.2)
-    forwardable-extended (2.6.0)
-    htmlbeautifier (1.3.1)
-    htmlcompressor (0.4.0)
-    http_parser.rb (0.6.0)
-    i18n (1.8.2)
-      concurrent-ruby (~> 1.0)
-    jekyll (4.0.0)
-      addressable (~> 2.4)
-      colorator (~> 1.0)
-      em-websocket (~> 0.5)
-      i18n (>= 0.9.5, < 2)
-      jekyll-sass-converter (~> 2.0)
-      jekyll-watch (~> 2.0)
-      kramdown (~> 2.1)
-      kramdown-parser-gfm (~> 1.0)
-      liquid (~> 4.0)
-      mercenary (~> 0.3.3)
-      pathutil (~> 0.9)
-      rouge (~> 3.0)
-      safe_yaml (~> 1.0)
-      terminal-table (~> 1.8)
-    jekyll-random (0.1)
-      jekyll (>= 3.3, < 5.0)
-    jekyll-redirect-from (0.16.0)
-      jekyll (>= 3.3, < 5.0)
-    jekyll-sass-converter (2.1.0)
-      sassc (> 2.0.1, < 3.0)
-    jekyll-tidy (0.2.2)
-      htmlbeautifier
-      htmlcompressor
-      jekyll
-    jekyll-timeago (0.13.1)
-      mini_i18n (>= 0.8.0)
-    jekyll-toc (0.13.1)
-      jekyll (>= 3.7)
-      nokogiri (~> 1.9)
-    jekyll-watch (2.2.1)
-      listen (~> 3.0)
-    kramdown (2.1.0)
-    kramdown-parser-gfm (1.1.0)
-      kramdown (~> 2.0)
-    liquid (4.0.3)
-    listen (3.2.1)
-      rb-fsevent (~> 0.10, >= 0.10.3)
-      rb-inotify (~> 0.9, >= 0.9.10)
-    mercenary (0.3.6)
-    mini_i18n (0.8.0)
-    mini_portile2 (2.4.0)
-    nokogiri (1.10.9)
-      mini_portile2 (~> 2.4.0)
-    pathutil (0.16.2)
-      forwardable-extended (~> 2.6)
-    public_suffix (4.0.3)
-    rb-fsevent (0.10.3)
-    rb-inotify (0.10.1)
-      ffi (~> 1.0)
-    rouge (3.17.0)
-    safe_yaml (1.0.5)
-    sassc (2.2.1)
-      ffi (~> 1.9)
-    terminal-table (1.8.0)
-      unicode-display_width (~> 1.1, >= 1.1.1)
-    unicode-display_width (1.7.0)
-
-PLATFORMS
-  ruby
-
-DEPENDENCIES
-  jekyll (~> 4.0)
-  jekyll-random
-  jekyll-redirect-from
-  jekyll-tidy
-  jekyll-timeago
-  jekyll-toc
-
-BUNDLED WITH
-   1.17.3

README.md

@@ -2,17 +2,14 @@
 
 A premium and open source dashboard template with a responsive and high-quality UI.
 
-<strong><a href="https://preview-dev.tabler.io">View Demo</a> | <a href="https://github.com/tabler/tabler-react">View React Version</a> | <a href="https://github.com/tabler/tabler/archive/master.zip">Download ZIP</a> | <a href="https://join.slack.com/t/tabler-ui/shared_invite/enQtMzQxMTYxODk5NDYwLWU4Y2FiNWYxN2UyNWUzOTBjNmU0ZGM2ZDViMjQzMWMyZWM0ZDFkMGRhZGFiYzFhZjM1NmIxOGQ2ZDUwZjlhMTU">Join us on Slack</a></strong>
+<a href="https://preview-dev.tabler.io">View Demo</a> | <a href="https://github.com/tabler/tabler-react">View React Version</a> | <a href="https://github.com/tabler/tabler/archive/master.zip">Download ZIP</a>
 
-![Tabler preview](/static/tabler-preview.png?raw=true)
+![Tabler preview](/src/static/tabler-preview.png?raw=true)
 
 
 ## Status
 
-<a href="https://www.npmjs.com/package/tabler"><a href="#backers" alt="sponsors on Open Collective"><img src="https://opencollective.com/tabler/backers/badge.svg"/></a> <a href="#sponsors" alt="Sponsors on Open Collective"><img src="https://opencollective.com/tabler/sponsors/badge.svg"/></a> <img src="https://img.shields.io/npm/dt/tabler.svg" alt="Total Downloads"></a> <a href="https://github.com/tabler/tabler/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tabler.svg" alt="License"></a> <a href="https://github.com/tabler/tabler/releases"><img src="https://img.shields.io/npm/v/tabler.svg" alt="Latest Release"></a>
+<a href="#backers" alt="Backers Open Collective"><img src="https://opencollective.com/tabler/backers/badge.svg"/></a> <a href="#sponsors" alt="Sponsors on Open Collective"><img src="https://opencollective.com/tabler/sponsors/badge.svg"/></a> <a href="https://www.npmjs.com/package/tabler"><img src="https://img.shields.io/npm/dt/tabler.svg" alt="Total Downloads"></a> <a href="https://github.com/tabler/tabler/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tabler.svg" alt="License"></a> <a href="https://github.com/tabler/tabler/releases"><img src="https://img.shields.io/npm/v/tabler.svg" alt="Latest Release"></a>
-
-[![Backers on Open Collective](https://opencollective.com/tabler/backers/badge.svg)](#backers)
- [![Sponsors on Open Collective](https://opencollective.com/tabler/sponsors/badge.svg)](#sponsors)
 
 
 ## Features

_config-demo.yml

@@ -1 +0,0 @@
-preview: true

_config.yml

@@ -1,11 +1,22 @@
-source: pages
+source: src/pages
 destination: tmp
 
-version: 1.0.0-alpha.6
+keep_files:
+  - css
+  - js
+  - img
+  - dist
+  - static
+  - playground.html
+
+use-iconfont: false
+
 title: Tabler
 description: Premium and Open Source dashboard template with responsive and high quality UI.
-github_url: https://github.com/tabler/tabler
+homepage: https://tabler.io
-sponsor_url: https://github.com/sponsors/codecalm
+github-url: https://github.com/tabler/tabler
+changelog-url: https://github.com/tabler/tabler/releases
+sponsor-url: https://github.com/sponsors/codecalm
 
 mapbox_key: pk.eyJ1IjoiY29kZWNhbG0iLCJhIjoiSzRiOVJvQSJ9.BUVkTT6IYs83xSUs4H7bjQ
 
@@ -15,7 +26,6 @@ layout-dark: false
 
 plugins:
   - jekyll-random
-  - jekyll-toc
   - jekyll-tidy
   - jekyll-timeago
   - jekyll-redirect-from
@@ -23,15 +33,10 @@ plugins:
 tabler-plugins:
   - tabler-flags
   - tabler-payments
-  - tabler-buttons
 
 exclude:
   - .jekyll-cache
-
+  - redirects.json
-keep_files:
-  - css/ui-kit.css
-  - css/dark.css
-  - css/rtl.css
 
 markdown: kramdown
 kramdown:
@@ -42,18 +47,9 @@ jekyll_tidy:
   compress_html: false
   ignore_env: development
 
-toc:
-  min_level: 2
-  max_level: 3
-  list_class: list-unstyled
-
 collections:
   docs:
     output: true
-#  changelog:
-#    output: false
-#  components:
-#    output: true
 
 defaults:
   - scope:
@@ -70,12 +66,6 @@ defaults:
       type: "docs"
     values:
       layout: docs
-      toc: true
-#  - scope:
-#      type: "components"
-#    values:
-#      layout: component
-
 
 colors:
   blue:
@@ -114,9 +104,6 @@ colors:
   cyan:
     hex: '#17a2b8'
     title: Cyan
-  gray:
-    hex: '#868e96'
-    title: Gray
 
 colors-extra:
   white:
@@ -125,6 +112,9 @@ colors-extra:
   dark:
     hex: '#303645'
     title: Dark
+  gray:
+    hex: '#868e96'
+    title: Gray
 
 variants:
   - name: success
@@ -161,9 +151,6 @@ button-variants:
   dark:
     class: dark
     title: Dark
-  link:
-    class: link
-    title: Link
 
 button-states:
   - class:
@@ -175,47 +162,47 @@ button-states:
 
 socials:
   facebook:
-    icon: brand/facebook
+    icon: brand-facebook
     title: Facebook
   twitter:
-    icon: brand/twitter
+    icon: brand-twitter
     title: Twitter
   google:
-    icon: brand/google
+    icon: brand-google
     title: Google
   youtube:
-    icon: brand/youtube
+    icon: brand-youtube
     title: Youtube
   vimeo:
-    icon: brand/vimeo
+    icon: brand-vimeo
     title: Vimeo
   dribbble:
-    icon: brand/dribbble
+    icon: brand-dribbble
     title: Dribbble
   github:
-    icon: brand/github
+    icon: brand-github
     title: Github
   instagram:
-    icon: brand/instagram
+    icon: brand-instagram
     title: Instagram
   pinterest:
-    icon: brand/pinterest
+    icon: brand-pinterest
     title: Pinterest
   vk:
-    icon: brand/vk
+    icon: brand-vk
     title: VK
   rss:
-    icon: brand/rss
+    icon: rss
     title: RSS
   flickr:
-    icon: brand/flickr
+    icon: brand-flickr
     title: Flickr
   bitbucket:
-    icon: brand/bitbucket
+    icon: brand-bitbucket
     title: Bitbucker
   tabler:
-    icon: brand/tabler
+    icon: brand-tabler
     title: Tabler
 
-months_short: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+months-short: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
-months_long: ['January', 'Febuary', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+months-long: ['January', 'Febuary', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

build/banner.js

@@ -1,14 +0,0 @@
-'use strict';
-
-const pkg = require('../package.json'),
-	year = new Date().getFullYear();
-
-function getBanner(pluginFilename) {
-	return `/*!
-  * Tabler${pluginFilename ? ` ${pluginFilename}` : ''} v${pkg.version} (${pkg.homepage})
-  * Copyright 2018-${year} ${pkg.author}
-  * Licensed under ${pkg.license} (https://github.com/tabler/tabler/blob/master/LICENSE)
-  */`;
-}
-
-module.exports = getBanner;

build/browsersync.js

@@ -1,30 +0,0 @@
-const bs = require('browser-sync').create();
-
-bs.init({
-	watch: true,
-	server: {
-		routes: {
-			'/': 'tmp',
-			'/dist': 'tmp-dist',
-			'/libs': 'static/libs',
-			'/tmp-dist/img': 'img',
-			'/static': 'static',
-			'/node_modules': 'node_modules',
-		},
-	},
-	files: ['tmp/**/*', 'tmp-dist/css/*.css', 'tmp-dist/js/*.js', 'tmp-dist/img/*.svg'],
-	watchOptions: {
-		ignoreInitial: true,
-	},
-	reloadDelay: 1000,
-	notify: false,
-	open: false,
-	snippetOptions: {
-		rule: {
-			match: /<\/head>/i,
-			fn: function (snippet, match) {
-				return snippet + match;
-			}
-		}
-	}
-});

build/capture-components.sh

@@ -1,11 +0,0 @@
-rm -rf ../static/img/components/*
-
-for file in ../pages/_components/*.html; do
-  file="$(basename -- $file)"
-  file="${file%.html}"
-  url="http://localhost:3001/components/$file.html"
-  echo $url
-
-  capture-website $url --element="#component-wrapper" --scale-factor=2 >../static/img/components/$file.png
-  convert ../static/img/components/$file.png -gravity Center -crop 1648x824-0-0! -background "#F5F7FB" -flatten +repage -resize 1280x640 ../static/img/components/$file.png
-done

build/change-version.js

@@ -1,110 +0,0 @@
-#!/usr/bin/env node
-
-const fs = require('fs');
-const path = require('path');
-const sh = require('shelljs');
-
-sh.config.fatal = true;
-
-// Blame TC39... https://github.com/benjamingr/RegExp.escape/issues/37
-function regExpQuote(string) {
-	return string.replace(/[$()*+-.?[\\\]^{|}]/g, '\\$&')
-}
-
-function regExpQuoteReplacement(string) {
-	return string.replace(/\$/g, '$$')
-}
-
-const DRY_RUN = false;
-
-function walkAsync(directory, excludedDirectories, fileCallback, errback) {
-	if (excludedDirectories.has(path.parse(directory).base)) {
-		return
-	}
-
-	fs.readdir(directory, (err, names) => {
-		if (err) {
-			errback(err);
-			return
-		}
-
-		names.forEach(name => {
-			const filepath = path.join(directory, name);
-			fs.lstat(filepath, (err, stats) => {
-				if (err) {
-					process.nextTick(errback, err);
-					return
-				}
-
-				if (stats.isDirectory()) {
-					process.nextTick(walkAsync, filepath, excludedDirectories, fileCallback, errback)
-				} else if (stats.isFile()) {
-					process.nextTick(fileCallback, filepath)
-				}
-			})
-		})
-	})
-}
-
-function replaceRecursively(directory, excludedDirectories, allowedExtensions, original, replacement) {
-	original = new RegExp(regExpQuote(original), 'g');
-	replacement = regExpQuoteReplacement(replacement);
-	const updateFile = DRY_RUN ?
-		filepath => {
-			if (allowedExtensions.has(path.parse(filepath).ext)) {
-				console.log(`FILE: ${filepath}`)
-			} else {
-				console.log(`EXCLUDED:${filepath}`)
-			}
-		} :
-		filepath => {
-			if (allowedExtensions.has(path.parse(filepath).ext)) {
-				sh.sed('-i', original, replacement, filepath)
-			}
-		};
-
-	walkAsync(directory, excludedDirectories, updateFile, err => {
-		console.error('ERROR while traversing directory!:');
-		console.error(err);
-		process.exit(1)
-	})
-}
-
-function main(args) {
-	if (args.length !== 2) {
-		console.error('USAGE: change-version old_version new_version');
-		console.error('Got arguments:', args);
-		process.exit(1);
-	}
-
-	const oldVersion = args[0];
-	const newVersion = args[1];
-	const EXCLUDED_DIRS = new Set([
-		'.git',
-		'_gh_pages',
-		'node_modules',
-		'vendor',
-		'demo',
-		'dist',
-		'pages/.jekyll-cache',
-		'.cache',
-		'.idea'
-	]);
-
-	const INCLUDED_EXTENSIONS = new Set([
-		// This extension whitelist is how we avoid modifying binary files
-		'',
-		'.css',
-		'.html',
-		'.js',
-		'.json',
-		'.md',
-		'.scss',
-		'.txt',
-		'.yml'
-	]);
-
-	replaceRecursively('.', EXCLUDED_DIRS, INCLUDED_EXTENSIONS, oldVersion, newVersion)
-}
-
-main(process.argv.slice(2));

build/copy-libs.js

@@ -1,35 +0,0 @@
-if (!Array.prototype.flat) {
-	Object.defineProperty(Array.prototype, 'flat', {
-		value: function (depth = 1) {
-			return this.reduce(function (flat, toFlatten) {
-				return flat.concat((Array.isArray(toFlatten) && (depth > 1)) ? toFlatten.flat(depth - 1) : toFlatten);
-			}, []);
-		}
-	});
-}
-
-
-const all_libs = require('../pages/_data/libs'),
-	path = require('path'),
-	{ exec } = require('child_process');
-
-let files = [];
-
-Object.keys(all_libs.js).forEach(function (lib) {
-	files.push(Array.isArray(all_libs.js[lib]) ? all_libs.js[lib] : [all_libs.js[lib]]);
-});
-
-Object.keys(all_libs.css).forEach(function (lib) {
-	files.push(Array.isArray(all_libs.css[lib]) ? all_libs.css[lib] : [all_libs.css[lib]]);
-});
-
-files = files.flat();
-
-files.forEach(function (file) {
-	if(! file.match(/^https?/)) {
-		let dirname = path.dirname(file).replace('@', '');
-		let cmd = `mkdir -p "dist/libs/${dirname}" && cp -r node_modules/${file} dist/libs/${file.replace('@', '')}`;
-
-		exec(cmd)
-	}
-});

build/postcss.config.js

@@ -1,15 +0,0 @@
-'use strict';
-
-module.exports = ctx => ({
-	map: {
-		inline: false,
-		annotation: true,
-		sourcesContent: true
-	},
-	plugins: {
-		autoprefixer: {
-			cascade: false,
-			grid: "autoplace"
-		}
-	}
-});

build/rollup.config.js

@@ -1,44 +0,0 @@
-'use strict';
-
-const BUNDLE = process.env.BUNDLE === 'true';
-const dir = BUNDLE ? 'dist' : 'tmp-dist';
-
-import path from 'path';
-import babel from 'rollup-plugin-babel';
-import resolve from 'rollup-plugin-node-resolve';
-import minify from 'rollup-plugin-babel-minify';
-import commonjs from 'rollup-plugin-commonjs';
-
-const fileDest = 'tabler',
-	banner = require('./banner');
-
-let plugins = [
-	resolve(),
-	commonjs()
-];
-
-if (BUNDLE) {
-	plugins = plugins.concat([
-		babel({
-			exclude: 'node_modules/**'
-		}),
-		minify({
-			comments: false
-		})
-	]);
-}
-
-
-module.exports = {
-	context: "window",
-	input: {
-		tabler: path.resolve(__dirname, '../js/tabler.js'),
-	},
-	output: {
-		banner,
-		dir: path.resolve(__dirname, `../${dir}/js/`),
-		entryFileNames: BUNDLE ? '[name].min.js' : '[name].js',
-		format: 'cjs'
-	},
-	plugins,
-};

build/scss-compile.js

@@ -1,43 +0,0 @@
-const BUNDLE = process.env.BUNDLE === 'true';
-
-const path = require('path'),
-	glob = require("glob"),
-	fs = require("fs"),
-	sass = require("node-sass"),
-	packageImporter = require('node-sass-package-importer');
-
-const dir = BUNDLE ? 'dist' : 'tmp-dist';
-
-glob("scss/{tabler*,demo}.scss", {}, function (er, files) {
-	files.forEach(function (file) {
-		var basename = path.basename(file, '.scss');
-
-		sass.render(
-			{
-				file: file,
-				outFile: `${dir}/css/${basename}.css`,
-				sourceMap: true,
-				sourceMapContents: true,
-				precision: 7,
-				importer: packageImporter()
-			},
-			(error, result) => {
-				if (!error) {
-					fs.writeFile(`${dir}/css/${basename}.css`, result.css, error => {
-						if (error) {
-							console.log(error);
-						}
-					});
-
-					fs.writeFile(`${dir}/css/${basename}.css.map`, result.map, error => {
-						if (error) {
-							console.log(error);
-						}
-					});
-				} else {
-					throw error;
-				}
-			}
-		);
-	});
-});

build/unused-files.js

@@ -1,26 +0,0 @@
-#!/usr/bin/env node
-
-const glob = require("glob"),
-	fs = require("fs");
-
-let foundFiles = [];
-
-glob.sync("pages/**/*.{html,md}").forEach(function (file) {
-	let fileContent = fs.readFileSync(file);
-
-	fileContent.toString().replace(/\{% include(_cached)? ([a-z0-9\/_-]+\.html)/g, function (f, c, filename) {
-		filename = 'pages/_includes/' + filename;
-
-		if (!foundFiles.includes(filename)) {
-			foundFiles.push(filename);
-		}
-	});
-});
-
-let includeFiles = glob.sync("pages/_includes/**/*.html");
-
-includeFiles.forEach(function (file) {
-	if (!foundFiles.includes(file)) {
-		console.log('file', file);
-	}
-});

demo/400.html

@@ -1,84 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.5
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
--->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <title>Page 400 - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
-    <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
-    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css" rel="stylesheet"/>
-    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
-    <style>
-      body {
-      	display: none;
-      }
-    </style>
-  </head>
-  <body class="antialiased border-top-wide border-primary d-flex flex-column">
-    <div class="flex-fill d-flex align-items-center justify-content-center">
-      <div class="container-tight py-6">
-        <div class="empty">
-          <div class="empty-icon">
-            <div class="display-4">400</div>
-          </div>
-          <p class="empty-title h3">Oops… You just found an error page</p>
-          <p class="empty-subtitle text-muted">
-            We are sorry but your request contains bad syntax and cannot be fulfilled
-          </p>
-          <div class="empty-action">
-            <a href="./." class="btn btn-primary">
-              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                <path stroke="none" d="M0 0h24v24H0z"/>
-                <line x1="5" y1="12" x2="19" y2="12" />
-                <line x1="5" y1="12" x2="11" y2="18" />
-                <line x1="5" y1="12" x2="11" y2="6" />
-              </svg>
-              Take me home
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- Libs JS -->
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
-    <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      document.body.style.display = "block"
-    </script>
-  </body>
-</html>

demo/401.html

@@ -1,84 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.5
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
--->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <title>Page 401 - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
-    <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
-    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css" rel="stylesheet"/>
-    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
-    <style>
-      body {
-      	display: none;
-      }
-    </style>
-  </head>
-  <body class="antialiased border-top-wide border-primary d-flex flex-column">
-    <div class="flex-fill d-flex align-items-center justify-content-center">
-      <div class="container-tight py-6">
-        <div class="empty">
-          <div class="empty-icon">
-            <div class="display-4">401</div>
-          </div>
-          <p class="empty-title h3">Oops… You just found an error page</p>
-          <p class="empty-subtitle text-muted">
-            We are sorry but you are not authorized to access this page
-          </p>
-          <div class="empty-action">
-            <a href="./." class="btn btn-primary">
-              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                <path stroke="none" d="M0 0h24v24H0z"/>
-                <line x1="5" y1="12" x2="19" y2="12" />
-                <line x1="5" y1="12" x2="11" y2="18" />
-                <line x1="5" y1="12" x2="11" y2="6" />
-              </svg>
-              Take me home
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- Libs JS -->
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
-    <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      document.body.style.display = "block"
-    </script>
-  </body>
-</html>

demo/403.html

@@ -1,84 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.5
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
--->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <title>Page 403 - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
-    <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
-    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css" rel="stylesheet"/>
-    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
-    <style>
-      body {
-      	display: none;
-      }
-    </style>
-  </head>
-  <body class="antialiased border-top-wide border-primary d-flex flex-column">
-    <div class="flex-fill d-flex align-items-center justify-content-center">
-      <div class="container-tight py-6">
-        <div class="empty">
-          <div class="empty-icon">
-            <div class="display-4">403</div>
-          </div>
-          <p class="empty-title h3">Oops… You just found an error page</p>
-          <p class="empty-subtitle text-muted">
-            We are sorry but you do not have permission to access this page
-          </p>
-          <div class="empty-action">
-            <a href="./." class="btn btn-primary">
-              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                <path stroke="none" d="M0 0h24v24H0z"/>
-                <line x1="5" y1="12" x2="19" y2="12" />
-                <line x1="5" y1="12" x2="11" y2="18" />
-                <line x1="5" y1="12" x2="11" y2="6" />
-              </svg>
-              Take me home
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- Libs JS -->
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
-    <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      document.body.style.display = "block"
-    </script>
-  </body>
-</html>

demo/503.html

@@ -1,84 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.5
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
--->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <title>Page 503 - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
-    <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
-    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css" rel="stylesheet"/>
-    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
-    <style>
-      body {
-      	display: none;
-      }
-    </style>
-  </head>
-  <body class="antialiased border-top-wide border-primary d-flex flex-column">
-    <div class="flex-fill d-flex align-items-center justify-content-center">
-      <div class="container-tight py-6">
-        <div class="empty">
-          <div class="empty-icon">
-            <div class="display-4">503</div>
-          </div>
-          <p class="empty-title h3">Oops… You just found an error page</p>
-          <p class="empty-subtitle text-muted">
-            We are sorry but our service is currently not available
-          </p>
-          <div class="empty-action">
-            <a href="./." class="btn btn-primary">
-              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                <path stroke="none" d="M0 0h24v24H0z"/>
-                <line x1="5" y1="12" x2="19" y2="12" />
-                <line x1="5" y1="12" x2="11" y2="18" />
-                <line x1="5" y1="12" x2="11" y2="6" />
-              </svg>
-              Take me home
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- Libs JS -->
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
-    <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      document.body.style.display = "block"
-    </script>
-  </body>
-</html>

demo/activity.html

@@ -0,0 +1,718 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-alpha.12
+* @link https://tabler.io
+* Copyright 2018-2020 The Tabler Authors
+* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>Activity - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
+    <!-- CSS files -->
+    <link href="./dist/css/tabler.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
+    <style>
+      body {
+      	display: none;
+      }
+    </style>
+  </head>
+  <body class="antialiased">
+    <div class="page">
+      <header class="navbar navbar-expand-md navbar-light d-print-none">
+        <div class="container-xl">
+          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3">
+            <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
+          </a>
+          <div class="navbar-nav flex-row order-md-last">
+            <div class="nav-item dropdown d-none d-md-flex mr-3">
+              <a href="#" class="nav-link px-0" data-toggle="dropdown" tabindex="-1">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
+                <span class="badge bg-red"></span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
+                <div class="card">
+                  <div class="card-body">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="nav-item dropdown">
+              <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
+                <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
+                <div class="d-none d-xl-block pl-2">
+                  <div>Paweł Kuna</div>
+                  <div class="mt-1 small text-muted">UI Designer</div>
+                </div>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a href="#" class="dropdown-item">Set status</a>
+                <a href="#" class="dropdown-item">Profile & account</a>
+                <a href="#" class="dropdown-item">Feedback</a>
+                <div class="dropdown-divider"></div>
+                <a href="#" class="dropdown-item">Settings</a>
+                <a href="#" class="dropdown-item">Logout</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+      <div class="navbar-expand-md">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar navbar-light">
+            <div class="container-xl">
+              <ul class="navbar-nav">
+                <li class="nav-item">
+                  <a class="nav-link" href="./index.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Home
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      User Interface
+                    </span>
+                  </a>
+                  <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
+                    <li >
+                      <a class="dropdown-item" href="./empty.html" >
+                        Empty page
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./blank.html" >
+                        Blank page
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./buttons.html" >
+                        Buttons
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./cards-masonry.html" >
+                        Cards Masonry
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./dropdowns.html" >
+                        Dropdowns
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./icons.html" >
+                        Icons
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./modals.html" >
+                        Modals
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./maps.html" >
+                        Maps
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./maps-vector.html" >
+                        Vector maps
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./navigation.html" >
+                        Navigation
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts-heatmap.html" >
+                        Charts heatmap
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./skeleton.html" >
+                        Skeleton
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./tabs.html" >
+                        Tabs
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./tables.html" >
+                        Tables
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./calendar.html" >
+                        Calendar
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./typography.html" >
+                        Typography
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./markdown.html" >
+                        Markdown
+                      </a>
+                    </li>
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
+                      </a>
+                      <div class="dropdown-menu">
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
+                    </li>
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
+                      </a>
+                      <div class="dropdown-menu">
+                        <a href="./error-404.html" class="dropdown-item">404 page</a>
+                        <a href="./error-500.html" class="dropdown-item">500 page</a>
+                        <a href="./error-maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./form-elements.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Form elements
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Extra
+                    </span>
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="./invoice.html" >
+                        Invoice
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./blog.html" >
+                        Blog cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./search-results.html" >
+                        Search results
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./pricing.html" >
+                        Pricing cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./users.html" >
+                        Users
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./gallery.html" >
+                        Gallery
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./license.html" >
+                        License
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./profile.html" >
+                        Profile
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./music.html" >
+                        Music
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./welcome.html" >
+                        Welcome
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Layout
+                    </span>
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="./layout-horizontal.html" >
+                        Horizontal
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-vertical.html" >
+                        Vertical
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-vertical-right.html" >
+                        Right vertical
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-condensed.html" >
+                        Condensed
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-condensed-dark.html" >
+                        Condensed dark
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-combo.html" >
+                        Combined
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-navbar-dark.html" >
+                        Navbar dark
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-navbar-overlap.html" >
+                        Navbar overlap
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-dark.html" >
+                        Dark mode
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-rtl.html" >
+                        RTL mode
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-fluid.html" >
+                        Fluid
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-fluid-vertical.html" >
+                        Fluid vertical
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./docs/index.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Documentation
+                    </span>
+                  </a>
+                </li>
+              </ul>
+              <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="content">
+        <div class="container-xl">
+          <!-- Page title -->
+          <div class="page-header d-print-none">
+            <div class="row align-items-center">
+              <div class="col">
+                <h2 class="page-title">
+                  Activity
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-6">
+              <div class="card">
+                <div class="card-body">
+                  <div class="divide-y-4">
+                    <div>
+                      <div class="row">
+                        <div class="col-auto">
+                          <span class="avatar">JL</span>
+                        </div>
+                        <div class="col">
+                          <div class="text-truncate">
+                            <strong>Jeffie Lewzey</strong> commented on your <strong>"I'm not a witch."</strong> post.
+                          </div>
+                          <div class="text-muted">yesterday</div>
+                        </div>
+                        <div class="col-auto align-self-center">
+                          <div class="badge bg-primary"></div>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <div class="row">
+                        <div class="col-auto">
+                          <span class="avatar" style="background-image: url(./static/avatars/002m.jpg)"></span>
+                        </div>
+                        <div class="col">
+                          <div class="text-truncate">
+                            It's <strong>Mallory Hulme</strong>'s birthday. Wish him well!
+                          </div>
+                          <div class="text-muted">2 days ago</div>
+                        </div>
+                        <div class="col-auto align-self-center">
+                          <div class="badge bg-primary"></div>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <div class="row">
+                        <div class="col-auto">
+                          <span class="avatar" style="background-image: url(./static/avatars/003m.jpg)"></span>
+                        </div>
+                        <div class="col">
+                          <div class="text-truncate">
+                            <strong>Dunn Slane</strong> posted <strong>"Well, what do you want?"</strong>.
+                          </div>
+                          <div class="text-muted">today</div>
+                        </div>
+                        <div class="col-auto align-self-center">
+                          <div class="badge bg-primary"></div>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <div class="row">
+                        <div class="col-auto">
+                          <span class="avatar" style="background-image: url(./static/avatars/000f.jpg)"></span>
+                        </div>
+                        <div class="col">
+                          <div class="text-truncate">
+                            <strong>Emmy Levet</strong> created a new project <strong>Morning alarm clock</strong>.
+                          </div>
+                          <div class="text-muted">4 days ago</div>
+                        </div>
+                        <div class="col-auto align-self-center">
+                          <div class="badge bg-primary"></div>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <div class="row">
+                        <div class="col-auto">
+                          <span class="avatar" style="background-image: url(./static/avatars/001f.jpg)"></span>
+                        </div>
+                        <div class="col">
+                          <div class="text-truncate">
+                            <strong>Maryjo Lebarree</strong> liked your photo.
+                          </div>
+                          <div class="text-muted">2 days ago</div>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <div class="row">
+                        <div class="col-auto">
+                          <span class="avatar">EP</span>
+                        </div>
+                        <div class="col">
+                          <div class="text-truncate">
+                            <strong>Egan Poetz</strong> registered new client as <strong>Trilia</strong>.
+                          </div>
+                          <div class="text-muted">yesterday</div>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <div class="row">
+                        <div class="col-auto">
+                          <span class="avatar" style="background-image: url(./static/avatars/002f.jpg)"></span>
+                        </div>
+                        <div class="col">
+                          <div class="text-truncate">
+                            <strong>Kellie Skingley</strong> closed a new deal on project <strong>Pen Pineapple Apple Pen</strong>.
+                          </div>
+                          <div class="text-muted">2 days ago</div>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <div class="row">
+                        <div class="col-auto">
+                          <span class="avatar" style="background-image: url(./static/avatars/003f.jpg)"></span>
+                        </div>
+                        <div class="col">
+                          <div class="text-truncate">
+                            <strong>Christabel Charlwood</strong> created a new project for <strong>Wikibox</strong>.
+                          </div>
+                          <div class="text-muted">4 days ago</div>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <div class="row">
+                        <div class="col-auto">
+                          <span class="avatar">HS</span>
+                        </div>
+                        <div class="col">
+                          <div class="text-truncate">
+                            <strong>Haskel Shelper</strong> change status of <strong>Tabler Icons</strong> from <strong>open</strong> to <strong>closed</strong>.
+                          </div>
+                          <div class="text-muted">today</div>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <div class="row">
+                        <div class="col-auto">
+                          <span class="avatar" style="background-image: url(./static/avatars/006m.jpg)"></span>
+                        </div>
+                        <div class="col">
+                          <div class="text-truncate">
+                            <strong>Lorry Mion</strong> liked <strong>Tabler UI Kit</strong>.
+                          </div>
+                          <div class="text-muted">yesterday</div>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <div class="row">
+                        <div class="col-auto">
+                          <span class="avatar" style="background-image: url(./static/avatars/004f.jpg)"></span>
+                        </div>
+                        <div class="col">
+                          <div class="text-truncate">
+                            <strong>Leesa Beaty</strong> posted new video.
+                          </div>
+                          <div class="text-muted">2 days ago</div>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <div class="row">
+                        <div class="col-auto">
+                          <span class="avatar" style="background-image: url(./static/avatars/007m.jpg)"></span>
+                        </div>
+                        <div class="col">
+                          <div class="text-truncate">
+                            <strong>Perren Keemar</strong> and 3 others followed you.
+                          </div>
+                          <div class="text-muted">2 days ago</div>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <div class="row">
+                        <div class="col-auto">
+                          <span class="avatar">SA</span>
+                        </div>
+                        <div class="col">
+                          <div class="text-truncate">
+                            <strong>Sunny Airey</strong> upload 3 new photos to category <strong>Inspirations</strong>.
+                          </div>
+                          <div class="text-muted">2 days ago</div>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <div class="row">
+                        <div class="col-auto">
+                          <span class="avatar" style="background-image: url(./static/avatars/009m.jpg)"></span>
+                        </div>
+                        <div class="col">
+                          <div class="text-truncate">
+                            <strong>Geoffry Flaunders</strong> made a <strong>$10</strong> donation.
+                          </div>
+                          <div class="text-muted">2 days ago</div>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <div class="row">
+                        <div class="col-auto">
+                          <span class="avatar" style="background-image: url(./static/avatars/010m.jpg)"></span>
+                        </div>
+                        <div class="col">
+                          <div class="text-truncate">
+                            <strong>Thatcher Keel</strong> created a profile.
+                          </div>
+                          <div class="text-muted">3 days ago</div>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <div class="row">
+                        <div class="col-auto">
+                          <span class="avatar" style="background-image: url(./static/avatars/005f.jpg)"></span>
+                        </div>
+                        <div class="col">
+                          <div class="text-truncate">
+                            <strong>Dyann Escala</strong> hosted the event <strong>Tabler UI Birthday</strong>.
+                          </div>
+                          <div class="text-muted">4 days ago</div>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <div class="row">
+                        <div class="col-auto">
+                          <span class="avatar" style="background-image: url(./static/avatars/006f.jpg)"></span>
+                        </div>
+                        <div class="col">
+                          <div class="text-truncate">
+                            <strong>Avivah Mugleston</strong> mentioned you on <strong>Best of 2020</strong>.
+                          </div>
+                          <div class="text-muted">2 days ago</div>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <div class="row">
+                        <div class="col-auto">
+                          <span class="avatar">AA</span>
+                        </div>
+                        <div class="col">
+                          <div class="text-truncate">
+                            <strong>Arlie Armstead</strong> sent a Review Request to <strong>Amanda Blake</strong>.
+                          </div>
+                          <div class="text-muted">2 days ago</div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-6">
+              <div class="card">
+                <div class="card-body">
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <footer class="footer footer-transparent d-print-none">
+          <div class="container">
+            <div class="row text-center align-items-center flex-row-reverse">
+              <div class="col-lg-auto ml-lg-auto">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li>
+                  <li class="list-inline-item"><a href="./faq.html" class="link-secondary">FAQ</a></li>
+                  <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
+                </ul>
+              </div>
+              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item">
+                    Copyright © 2020
+                    <a href="." class="link-secondary">Tabler</a>.
+                    All rights reserved.
+                  </li>
+                  <li class="list-inline-item">
+                    <a href="./changelog.html" class="link-secondary">v1.0.0-alpha.12</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js"></script>
+    <script>
+      document.body.style.display = "block"
+    </script>
+  </body>
+</html>

demo/blank.html

@@ -1,11 +1,11 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.5
+* @version 1.0.0-alpha.12
-* @link https://github.com/tabler/tabler
+* @link https://tabler.io
-* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Copyright 2018-2020 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
   <head>
@@ -24,22 +24,10 @@
     <meta name="robots" content="noindex,nofollow,noarchive"/>
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
-    <!-- Libs CSS -->
+    <!-- CSS files -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
-    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
-    <!-- Tabler Core -->
     <link href="./dist/css/tabler.min.css" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
     <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
     <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css" rel="stylesheet"/>
     <link href="./dist/css/demo.min.css" rel="stylesheet"/>
     <style>
       body {
@@ -49,22 +37,18 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <header class="navbar navbar-expand-md navbar-light">
+      <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
           <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
             <span class="navbar-toggler-icon"></span>
           </button>
           <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-image">
+            <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
           </a>
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item dropdown d-none d-md-flex mr-3">
               <a href="#" class="nav-link px-0" data-toggle="dropdown" tabindex="-1">
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
-                  <path stroke="none" d="M0 0h24v24H0z"/>
-                  <path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" />
-                  <path d="M9 17v1a3 3 0 0 0 6 0v-1" />
-                </svg>
                 <span class="badge bg-red"></span>
               </a>
               <div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
@@ -77,54 +61,32 @@
             </div>
             <div class="nav-item dropdown">
               <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
+                <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
                 <div class="d-none d-xl-block pl-2">
                   <div>Paweł Kuna</div>
                   <div class="mt-1 small text-muted">UI Designer</div>
                 </div>
               </a>
-              <div class="dropdown-menu dropdown-menu-right">
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
+                <a href="#" class="dropdown-item">Set status</a>
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <a href="#" class="dropdown-item">Profile & account</a>
-                    <path stroke="none" d="M0 0h24v24H0z"/>
+                <a href="#" class="dropdown-item">Feedback</a>
-                    <path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-                    <circle cx="12" cy="12" r="3" />
-                  </svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                    <path stroke="none" d="M0 0h24v24H0z"/>
-                    <path d="M9 7 h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" />
-                    <path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" />
-                    <line x1="16" y1="5" x2="19" y2="8" />
-                  </svg>
-                  Another action
-                </a>
                 <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <a href="#" class="dropdown-item">Settings</a>
-                    <path stroke="none" d="M0 0h24v24H0z"/>
+                <a href="#" class="dropdown-item">Logout</a>
-                    <line x1="12" y1="5" x2="12" y2="19" />
-                    <line x1="5" y1="12" x2="19" y2="12" />
-                  </svg>
-                  Separated link</a>
               </div>
             </div>
           </div>
         </div>
       </header>
       <div class="navbar-expand-md">
-        <div class="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar navbar-light">
             <div class="container-xl">
               <ul class="navbar-nav">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="5 12 3 12 12 3 21 12 19 12" />
-                      <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
-                      <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Home
@@ -133,14 +95,7 @@
                 </li>
                 <li class="nav-item active dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" />
-                      <line x1="12" y1="12" x2="20" y2="7.5" />
-                      <line x1="12" y1="12" x2="12" y2="21" />
-                      <line x1="12" y1="12" x2="4" y2="7.5" />
-                      <line x1="16" y1="5.25" x2="8" y2="9.75" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       User Interface
@@ -167,11 +122,21 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./cards-masonry.html" >
+                        Cards Masonry
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./dropdowns.html" >
                         Dropdowns
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./icons.html" >
+                        Icons
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./modals.html" >
                         Modals
@@ -197,6 +162,26 @@
                         Charts
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts-heatmap.html" >
+                        Charts heatmap
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./skeleton.html" >
+                        Skeleton
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./tabs.html" >
+                        Tabs
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./tables.html" >
                         Tables
@@ -217,6 +202,16 @@
                         Lists
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./typography.html" >
+                        Typography
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./markdown.html" >
+                        Markdown
+                      </a>
+                    </li>
                     <li class="dropright">
                       <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
                         Authentication
@@ -233,24 +228,16 @@
                         Error pages
                       </a>
                       <div class="dropdown-menu">
-                      <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./error-404.html" class="dropdown-item">404 page</a>
-                      <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./error-500.html" class="dropdown-item">500 page</a>
-                      <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./error-maintenance.html" class="dropdown-item">Maintenance page</a>
-                      <a href="./404.html" class="dropdown-item">404 page</a>
-                      <a href="./500.html" class="dropdown-item">500 page</a>
-                      <a href="./503.html" class="dropdown-item">503 page</a>
-                      <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
                       </div>
                     </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="9 11 12 14 20 6" />
-                      <path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Form elements
@@ -259,10 +246,7 @@
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Extra
@@ -304,6 +288,11 @@
                         Gallery
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./license.html" >
+                        License
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./profile.html" >
                         Profile
@@ -314,17 +303,16 @@
                         Music
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./welcome.html" >
+                        Welcome
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <rect x="4" y="4" width="6" height="5" rx="2" />
-                      <rect x="4" y="13" width="6" height="7" rx="2" />
-                      <rect x="14" y="4" width="6" height="7" rx="2" />
-                      <rect x="14" y="15" width="6" height="5" rx="2" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Layout
@@ -366,11 +354,21 @@
                         Navbar dark
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-navbar-overlap.html" >
+                        Navbar overlap
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./layout-dark.html" >
                         Dark mode
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-rtl.html" >
+                        RTL mode
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./layout-fluid.html" >
                         Fluid
@@ -383,199 +381,21 @@
                     </li>
                   </ul>
                 </li>
-              <li class="nav-item dropdown">
+                <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link" href="./docs/index.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="14 3 14 8 19 8" />
-                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
-                      <line x1="9" y1="9" x2="10" y2="9" />
-                      <line x1="9" y1="13" x2="15" y2="13" />
-                      <line x1="9" y1="17" x2="15" y2="17" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
-                    Docs
+                      Documentation
                     </span>
                   </a>
-                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-3">
-                  <li >
-                    <a class="dropdown-item" href="./docs/index.html" >
-                      Introduction
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/alerts.html" >
-                      Alerts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/autosize.html" >
-                      Autosize
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/avatars.html" >
-                      Avatars
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/badges.html" >
-                      Badges
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/breadcrumb.html" >
-                      Breadcrumb
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/buttons.html" >
-                      Buttons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/cards.html" >
-                      Cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/carousel.html" >
-                      Carousel
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/colors.html" >
-                      Colors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/countup.html" >
-                      Countup
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/cursors.html" >
-                      Cursors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/charts.html" >
-                      Charts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/dropdowns.html" >
-                      Dropdowns
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/divider.html" >
-                      Divider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/empty.html" >
-                      Empty states
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/flags.html" >
-                      Flags
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/form-elements.html" >
-                      Form elements
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/form-helpers.html" >
-                      Form helpers
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/input-mask.html" >
-                      Form input mask
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/modals.html" >
-                      Modals
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/progress.html" >
-                      Progress
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/payments.html" >
-                      Payments
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/range-slider.html" >
-                      Range slider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/ribbons.html" >
-                      Ribbons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/spinners.html" >
-                      Spinners
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/steps.html" >
-                      Steps
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/tables.html" >
-                      Tables
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/tabs.html" >
-                      Tabs
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/timelines.html" >
-                      Timelines
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/toasts.html" >
-                      Toasts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/tooltips.html" >
-                      Tooltips
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/typography.html" >
-                      Typography
-                    </a>
-                  </li>
-                </ul>
                 </li>
               </ul>
               <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <circle cx="10" cy="10" r="7" />
-                      <line x1="21" y1="21" x2="15" y2="15" />
-                    </svg>
                     </span>
                     <input type="text" class="form-control" placeholder="Search…">
                   </div>
@@ -584,29 +404,25 @@
             </div>
           </div>
         </div>
+      </div>
       <div class="content">
         <div class="container-xl d-flex flex-column justify-content-center">
           <div class="empty">
-            <div class="empty-icon">
+            <div class="empty-img"><img src="./static/illustrations/undraw_printing_invoices_5r4r.svg" height="128"  alt="">
-              <img src="./static/illustrations/undraw_printing_invoices_5r4r.svg" class="h-8 mb-4" alt="">
             </div>
-            <p class="empty-title h3">No results found</p>
+            <p class="empty-title">No results found</p>
             <p class="empty-subtitle text-muted">
               Try adjusting your search or filter to find what you're looking for.
             </p>
             <div class="empty-action">
               <a href="./." class="btn btn-primary">
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
-                  <path stroke="none" d="M0 0h24v24H0z"/>
-                  <line x1="12" y1="5" x2="12" y2="19" />
-                  <line x1="5" y1="12" x2="19" y2="12" />
-                </svg>
                 Add your first client
               </a>
             </div>
           </div>
         </div>
-        <footer class="footer footer-transparent">
+        <footer class="footer footer-transparent d-print-none">
           <div class="container">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ml-lg-auto">
@@ -617,9 +433,16 @@
                 </ul>
               </div>
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item">
                     Copyright © 2020
                     <a href="." class="link-secondary">Tabler</a>.
                     All rights reserved.
+                  </li>
+                  <li class="list-inline-item">
+                    <a href="./changelog.html" class="link-secondary">v1.0.0-alpha.12</a>
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
@@ -628,7 +451,6 @@
     </div>
     <!-- Libs JS -->
     <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
     <script>

demo/blog.html

@@ -1,906 +0,0 @@
-<!doctype html>
-<!--
-* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.5
-* @link https://github.com/tabler/tabler
-* Copyright 2018-2019 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
--->
-<html lang="en">
-  <head>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <title>Blog - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
-    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
-    <meta name="msapplication-TileColor" content="#206bc4"/>
-    <meta name="theme-color" content="#206bc4"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="HandheldFriendly" content="True"/>
-    <meta name="MobileOptimized" content="320"/>
-    <meta name="robots" content="noindex,nofollow,noarchive"/>
-    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
-    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
-    <!-- Libs CSS -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
-    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
-    <!-- Tabler Core -->
-    <link href="./dist/css/tabler.min.css" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
-    <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css" rel="stylesheet"/>
-    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
-    <style>
-      body {
-      	display: none;
-      }
-    </style>
-  </head>
-  <body class="antialiased">
-    <div class="page">
-      <header class="navbar navbar-expand-md navbar-light">
-        <div class="container-xl">
-          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
-            <span class="navbar-toggler-icon"></span>
-          </button>
-          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-image">
-          </a>
-          <div class="navbar-nav flex-row order-md-last">
-            <div class="nav-item dropdown d-none d-md-flex mr-3">
-              <a href="#" class="nav-link px-0" data-toggle="dropdown" tabindex="-1">
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                  <path stroke="none" d="M0 0h24v24H0z"/>
-                  <path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" />
-                  <path d="M9 17v1a3 3 0 0 0 6 0v-1" />
-                </svg>
-                <span class="badge bg-red"></span>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
-                <div class="card">
-                  <div class="card-body">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="nav-item dropdown">
-              <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                <div class="d-none d-xl-block pl-2">
-                  <div>Paweł Kuna</div>
-                  <div class="mt-1 small text-muted">UI Designer</div>
-                </div>
-              </a>
-              <div class="dropdown-menu dropdown-menu-right">
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                    <path stroke="none" d="M0 0h24v24H0z"/>
-                    <path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-                    <circle cx="12" cy="12" r="3" />
-                  </svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                    <path stroke="none" d="M0 0h24v24H0z"/>
-                    <path d="M9 7 h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" />
-                    <path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" />
-                    <line x1="16" y1="5" x2="19" y2="8" />
-                  </svg>
-                  Another action
-                </a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                    <path stroke="none" d="M0 0h24v24H0z"/>
-                    <line x1="12" y1="5" x2="12" y2="19" />
-                    <line x1="5" y1="12" x2="19" y2="12" />
-                  </svg>
-                  Separated link</a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </header>
-      <div class="navbar-expand-md">
-        <div class="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
-          <div class="container-xl">
-            <ul class="navbar-nav">
-              <li class="nav-item">
-                <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="5 12 3 12 12 3 21 12 19 12" />
-                      <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
-                      <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
-                    </svg>
-                  </span>
-                  <span class="nav-link-title">
-                    Home
-                  </span>
-                </a>
-              </li>
-              <li class="nav-item dropdown">
-                <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" />
-                      <line x1="12" y1="12" x2="20" y2="7.5" />
-                      <line x1="12" y1="12" x2="12" y2="21" />
-                      <line x1="12" y1="12" x2="4" y2="7.5" />
-                      <line x1="16" y1="5.25" x2="8" y2="9.75" />
-                    </svg>
-                  </span>
-                  <span class="nav-link-title">
-                    User Interface
-                  </span>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
-                  <li >
-                    <a class="dropdown-item" href="./empty.html" >
-                      Empty page
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./blank.html" >
-                      Blank page
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./buttons.html" >
-                      Buttons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./cards.html" >
-                      Cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./dropdowns.html" >
-                      Dropdowns
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./modals.html" >
-                      Modals
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./maps.html" >
-                      Maps
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./maps-vector.html" >
-                      Vector maps
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./navigation.html" >
-                      Navigation
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./charts.html" >
-                      Charts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./tables.html" >
-                      Tables
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./calendar.html" >
-                      Calendar
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./carousel.html" >
-                      Carousel
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./lists.html" >
-                      Lists
-                    </a>
-                  </li>
-                  <li class="dropright">
-                    <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
-                      Authentication
-                    </a>
-                    <div class="dropdown-menu">
-                      <a href="./sign-in.html" class="dropdown-item">Sign in</a>
-                      <a href="./sign-up.html" class="dropdown-item">Sign up</a>
-                      <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
-                      <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
-                    </div>
-                  </li>
-                  <li class="dropright">
-                    <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
-                      Error pages
-                    </a>
-                    <div class="dropdown-menu">
-                      <a href="./400.html" class="dropdown-item">400 page</a>
-                      <a href="./401.html" class="dropdown-item">401 page</a>
-                      <a href="./403.html" class="dropdown-item">403 page</a>
-                      <a href="./404.html" class="dropdown-item">404 page</a>
-                      <a href="./500.html" class="dropdown-item">500 page</a>
-                      <a href="./503.html" class="dropdown-item">503 page</a>
-                      <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
-                    </div>
-                  </li>
-                </ul>
-              </li>
-              <li class="nav-item">
-                <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="9 11 12 14 20 6" />
-                      <path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" />
-                    </svg>
-                  </span>
-                  <span class="nav-link-title">
-                    Form elements
-                  </span>
-                </a>
-              </li>
-              <li class="nav-item active dropdown">
-                <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
-                    </svg>
-                  </span>
-                  <span class="nav-link-title">
-                    Extra
-                  </span>
-                </a>
-                <ul class="dropdown-menu">
-                  <li >
-                    <a class="dropdown-item" href="./invoice.html" >
-                      Invoice
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item active" href="./blog.html" >
-                      Blog cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./snippets.html" >
-                      Snippets
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./search-results.html" >
-                      Search results
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./pricing.html" >
-                      Pricing cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./users.html" >
-                      Users
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./gallery.html" >
-                      Gallery
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./profile.html" >
-                      Profile
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./music.html" >
-                      Music
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <li class="nav-item dropdown">
-                <a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <rect x="4" y="4" width="6" height="5" rx="2" />
-                      <rect x="4" y="13" width="6" height="7" rx="2" />
-                      <rect x="14" y="4" width="6" height="7" rx="2" />
-                      <rect x="14" y="15" width="6" height="5" rx="2" />
-                    </svg>
-                  </span>
-                  <span class="nav-link-title">
-                    Layout
-                  </span>
-                </a>
-                <ul class="dropdown-menu">
-                  <li >
-                    <a class="dropdown-item" href="./layout-horizontal.html" >
-                      Horizontal
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./layout-vertical.html" >
-                      Vertical
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./layout-vertical-right.html" >
-                      Right vertical
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./layout-condensed.html" >
-                      Condensed
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./layout-condensed-dark.html" >
-                      Condensed dark
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./layout-combo.html" >
-                      Combined
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./layout-navbar-dark.html" >
-                      Navbar dark
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./layout-dark.html" >
-                      Dark mode
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./layout-fluid.html" >
-                      Fluid
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./layout-fluid-vertical.html" >
-                      Fluid vertical
-                    </a>
-                  </li>
-                </ul>
-              </li>
-              <li class="nav-item dropdown">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="14 3 14 8 19 8" />
-                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
-                      <line x1="9" y1="9" x2="10" y2="9" />
-                      <line x1="9" y1="13" x2="15" y2="13" />
-                      <line x1="9" y1="17" x2="15" y2="17" />
-                    </svg>
-                  </span>
-                  <span class="nav-link-title">
-                    Docs
-                  </span>
-                </a>
-                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-3">
-                  <li >
-                    <a class="dropdown-item" href="./docs/index.html" >
-                      Introduction
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/alerts.html" >
-                      Alerts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/autosize.html" >
-                      Autosize
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/avatars.html" >
-                      Avatars
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/badges.html" >
-                      Badges
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/breadcrumb.html" >
-                      Breadcrumb
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/buttons.html" >
-                      Buttons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/cards.html" >
-                      Cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/carousel.html" >
-                      Carousel
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/colors.html" >
-                      Colors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/countup.html" >
-                      Countup
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/cursors.html" >
-                      Cursors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/charts.html" >
-                      Charts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/dropdowns.html" >
-                      Dropdowns
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/divider.html" >
-                      Divider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/empty.html" >
-                      Empty states
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/flags.html" >
-                      Flags
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/form-elements.html" >
-                      Form elements
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/form-helpers.html" >
-                      Form helpers
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/input-mask.html" >
-                      Form input mask
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/modals.html" >
-                      Modals
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/progress.html" >
-                      Progress
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/payments.html" >
-                      Payments
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/range-slider.html" >
-                      Range slider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/ribbons.html" >
-                      Ribbons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/spinners.html" >
-                      Spinners
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/steps.html" >
-                      Steps
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/tables.html" >
-                      Tables
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/tabs.html" >
-                      Tabs
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/timelines.html" >
-                      Timelines
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/toasts.html" >
-                      Toasts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/tooltips.html" >
-                      Tooltips
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/typography.html" >
-                      Typography
-                    </a>
-                  </li>
-                </ul>
-              </li>
-            </ul>
-            <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
-              <form action="." method="get">
-                <div class="input-icon">
-                  <span class="input-icon-addon">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <circle cx="10" cy="10" r="7" />
-                      <line x1="21" y1="21" x2="15" y2="15" />
-                    </svg>
-                  </span>
-                  <input type="text" class="form-control" placeholder="Search…">
-                </div>
-              </form>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="content">
-        <div class="container-xl">
-          <!-- Page title -->
-          <div class="page-header">
-            <div class="row align-items-center">
-              <div class="col-auto">
-                <h2 class="page-title">
-                  Blog
-                </h2>
-              </div>
-            </div>
-          </div>
-          <div class="row row-deck">
-            <div class="col-sm-6 col-xl-4">
-              <div class="card d-flex flex-column">
-                <a href="#">
-                  <img class="card-img-top" src="./static/photos//9f36332564ca271d.jpg" alt="And this isn&#39;t my nose. This is a false one.">
-                </a>
-                <div class="card-body d-flex flex-column">
-                  <h3 class="card-title"><a href="#">And this isn't my nose. This is a false one.</a></h3>
-                  <div class="text-muted">Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migr...</div>
-                  <div class="d-flex align-items-center pt-5 mt-auto">
-                    <span class="avatar avatar-md" style="background-image: url(./static/avatars/002m.jpg)"></span>
-                    <div class="ml-3">
-                      <a href="./profile.html" class="text-body">Dunn Slane</a>
-                      <small class="d-block text-muted">3 days ago</small>
-                    </div>
-                    <div class="ml-auto">
-                      <a href="#" class="icon d-none d-md-inline-block ml-3 text-red">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                          <path stroke="none" d="M0 0h24v24H0z"/>
-                          <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
-                        </svg>
-                      </a>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="col-sm-6 col-xl-4">
-              <div class="card d-flex flex-column">
-                <a href="#">
-                  <img class="card-img-top" src="./static/photos//35b88fc04a518c1b.jpg" alt="Well, I didn&#39;t vote for you.">
-                </a>
-                <div class="card-body d-flex flex-column">
-                  <h3 class="card-title"><a href="#">Well, I didn't vote for you.</a></h3>
-                  <div class="text-muted">Well, we did do the nose. Why? Shut up! Will you shut up?! You don't frighten us, English pig-dog...</div>
-                  <div class="d-flex align-items-center pt-5 mt-auto">
-                    <span class="avatar avatar-md" style="background-image: url(./static/avatars/003m.jpg)"></span>
-                    <div class="ml-3">
-                      <a href="./profile.html" class="text-body">Emmy Levet</a>
-                      <small class="d-block text-muted">3 days ago</small>
-                    </div>
-                    <div class="ml-auto">
-                      <a href="#" class="icon d-none d-md-inline-block ml-3 text-red">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                          <path stroke="none" d="M0 0h24v24H0z"/>
-                          <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
-                        </svg>
-                      </a>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="col-sm-6 col-xl-4">
-              <div class="card d-flex flex-column">
-                <a href="#">
-                  <img class="card-img-top" src="./static/photos//36e273986ed577b8.jpg" alt="How do you know she is a witch?">
-                </a>
-                <div class="card-body d-flex flex-column">
-                  <h3 class="card-title"><a href="#">How do you know she is a witch?</a></h3>
-                  <div class="text-muted">Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a wart. You ...</div>
-                  <div class="d-flex align-items-center pt-5 mt-auto">
-                    <span class="avatar avatar-md" style="background-image: url(./static/avatars/000f.jpg)"></span>
-                    <div class="ml-3">
-                      <a href="./profile.html" class="text-body">Maryjo Lebarree</a>
-                      <small class="d-block text-muted">3 days ago</small>
-                    </div>
-                    <div class="ml-auto">
-                      <a href="#" class="icon d-none d-md-inline-block ml-3 text-red">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                          <path stroke="none" d="M0 0h24v24H0z"/>
-                          <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
-                        </svg>
-                      </a>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="col-sm-6 col-xl-4">
-              <div class="card d-flex flex-column">
-                <div class="card-body d-flex flex-column">
-                  <h3 class="card-title"><a href="#">Weaseling out of things is important to learn.</a></h3>
-                  <div class="text-muted">Please do not offer my god a peanut. That's why I love elementary school, Edna. The children beli...</div>
-                  <div class="d-flex align-items-center pt-5 mt-auto">
-                    <span class="avatar avatar-md" style="background-image: url(./static/avatars/004f.jpg)"></span>
-                    <div class="ml-3">
-                      <a href="./profile.html" class="text-body">Perren Keemar</a>
-                      <small class="d-block text-muted">3 days ago</small>
-                    </div>
-                    <div class="ml-auto">
-                      <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                          <path stroke="none" d="M0 0h24v24H0z"/>
-                          <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
-                        </svg>
-                      </a>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="col-sm-6 col-xl-4">
-              <div class="card d-flex flex-column">
-                <div class="card-body d-flex flex-column">
-                  <h3 class="card-title"><a href="#">You don't like your job, you don't strike.</a></h3>
-                  <div class="text-muted">But, Aquaman, you cannot marry a woman without gills. You're from two different worlds… Oh, I've ...</div>
-                  <div class="d-flex align-items-center pt-5 mt-auto">
-                    <span class="avatar avatar-md" style="background-image: url(./static/avatars/007m.jpg)"></span>
-                    <div class="ml-3">
-                      <a href="./profile.html" class="text-body">Sunny Airey</a>
-                      <small class="d-block text-muted">3 days ago</small>
-                    </div>
-                    <div class="ml-auto">
-                      <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                          <path stroke="none" d="M0 0h24v24H0z"/>
-                          <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
-                        </svg>
-                      </a>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="col-sm-6 col-xl-4">
-              <div class="card d-flex flex-column">
-                <div class="card-body d-flex flex-column">
-                  <h3 class="card-title"><a href="#">I hope I didn't brain my damage.</a></h3>
-                  <div class="text-muted">I don't like being outdoors, Smithers. For one thing, there's too many fat children. Oh, loneline...</div>
-                  <div class="d-flex align-items-center pt-5 mt-auto">
-                    <span class="avatar avatar-md">SA</span>
-                    <div class="ml-3">
-                      <a href="./profile.html" class="text-body">Geoffry Flaunders</a>
-                      <small class="d-block text-muted">3 days ago</small>
-                    </div>
-                    <div class="ml-auto">
-                      <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                          <path stroke="none" d="M0 0h24v24H0z"/>
-                          <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
-                        </svg>
-                      </a>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="col-sm-6">
-              <div class="card d-flex flex-column">
-                <div class="row row-0 flex-fill">
-                  <div class="col-md-3">
-                    <a href="#">
-                      <img src="./static/photos//9f36332564ca271d.jpg" class="w-100 h-100 object-cover" alt="Card side image">
-                    </a>
-                  </div>
-                  <div class="col">
-                    <div class="card-body">
-                      <h3 class="card-title"><a href="#">And this isn't my nose. This is a false one.</a></h3>
-                      <div class="text-muted">Look, my liege! The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migr...</div>
-                      <div class="d-flex align-items-center pt-5 mt-auto">
-                        <span class="avatar avatar-md" style="background-image: url(./static/avatars/002m.jpg)"></span>
-                        <div class="ml-3">
-                          <a href="./profile.html" class="text-body">Dunn Slane</a>
-                          <small class="d-block text-muted">3 days ago</small>
-                        </div>
-                        <div class="ml-auto">
-                          <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                              <path stroke="none" d="M0 0h24v24H0z"/>
-                              <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
-                            </svg>
-                          </a>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="col-sm-6">
-              <div class="card d-flex flex-column">
-                <div class="row row-0 flex-fill">
-                  <div class="col-md-3">
-                    <a href="#">
-                      <img src="./static/photos//35b88fc04a518c1b.jpg" class="w-100 h-100 object-cover" alt="Card side image">
-                    </a>
-                  </div>
-                  <div class="col">
-                    <div class="card-body">
-                      <h3 class="card-title"><a href="#">Well, I didn't vote for you.</a></h3>
-                      <div class="text-muted">Well, we did do the nose. Why? Shut up! Will you shut up?! You don't frighten us, English pig-dog...</div>
-                      <div class="d-flex align-items-center pt-5 mt-auto">
-                        <span class="avatar avatar-md" style="background-image: url(./static/avatars/003m.jpg)"></span>
-                        <div class="ml-3">
-                          <a href="./profile.html" class="text-body">Emmy Levet</a>
-                          <small class="d-block text-muted">3 days ago</small>
-                        </div>
-                        <div class="ml-auto">
-                          <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                              <path stroke="none" d="M0 0h24v24H0z"/>
-                              <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
-                            </svg>
-                          </a>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="col-sm-6">
-              <div class="card d-flex flex-column">
-                <div class="row row-0 flex-fill">
-                  <div class="col-md-3">
-                    <a href="#">
-                      <img src="./static/photos//802a16cdf5ce3551.jpg" class="w-100 h-100 object-cover" alt="Card side image">
-                    </a>
-                  </div>
-                  <div class="col">
-                    <div class="card-body">
-                      <h3 class="card-title"><a href="#">Weaseling out of things is important to learn.</a></h3>
-                      <div class="text-muted">Please do not offer my god a peanut. That's why I love elementary school, Edna. The children believe anything you tell them. Brace yourselves gentlemen. According to the gas chromatograph, the secr...</div>
-                      <div class="d-flex align-items-center pt-5 mt-auto">
-                        <span class="avatar avatar-md" style="background-image: url(./static/avatars/004f.jpg)"></span>
-                        <div class="ml-3">
-                          <a href="./profile.html" class="text-body">Perren Keemar</a>
-                          <small class="d-block text-muted">3 days ago</small>
-                        </div>
-                        <div class="ml-auto">
-                          <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                              <path stroke="none" d="M0 0h24v24H0z"/>
-                              <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
-                            </svg>
-                          </a>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="col-sm-6">
-              <div class="card d-flex flex-column">
-                <div class="row row-0 flex-fill">
-                  <div class="col-md-3">
-                    <a href="#">
-                      <img src="./static/photos//0986f97be719fb9a.jpg" class="w-100 h-100 object-cover" alt="Card side image">
-                    </a>
-                  </div>
-                  <div class="col">
-                    <div class="card-body">
-                      <h3 class="card-title"><a href="#">You don't like your job, you don't strike.</a></h3>
-                      <div class="text-muted">But, Aquaman, you cannot marry a woman without gills. You're from two different worlds… Oh, I've wasted my life. Son, when you participate in sporting events, it's not whether you win or lose: it's...</div>
-                      <div class="d-flex align-items-center pt-5 mt-auto">
-                        <span class="avatar avatar-md" style="background-image: url(./static/avatars/007m.jpg)"></span>
-                        <div class="ml-3">
-                          <a href="./profile.html" class="text-body">Sunny Airey</a>
-                          <small class="d-block text-muted">3 days ago</small>
-                        </div>
-                        <div class="ml-auto">
-                          <a href="#" class="icon d-none d-md-inline-block ml-3 text-muted">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                              <path stroke="none" d="M0 0h24v24H0z"/>
-                              <path d="M12 20l-7 -7a4 4 0 0 1 6.5 -6a.9 .9 0 0 0 1 0a4 4 0 0 1 6.5 6l-7 7" />
-                            </svg>
-                          </a>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <footer class="footer footer-transparent">
-          <div class="container">
-            <div class="row text-center align-items-center flex-row-reverse">
-              <div class="col-lg-auto ml-lg-auto">
-                <ul class="list-inline list-inline-dots mb-0">
-                  <li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li>
-                  <li class="list-inline-item"><a href="./faq.html" class="link-secondary">FAQ</a></li>
-                  <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
-                </ul>
-              </div>
-              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
-                Copyright © 2020
-                <a href="." class="link-secondary">Tabler</a>.
-                All rights reserved.
-              </div>
-            </div>
-          </div>
-        </footer>
-      </div>
-    </div>
-    <!-- Libs JS -->
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
-    <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      document.body.style.display = "block"
-    </script>
-  </body>
-</html>

demo/calendar.html

@@ -1,11 +1,11 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.5
+* @version 1.0.0-alpha.12
-* @link https://github.com/tabler/tabler
+* @link https://tabler.io
-* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Copyright 2018-2020 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
   <head>
@@ -24,22 +24,14 @@
     <meta name="robots" content="noindex,nofollow,noarchive"/>
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
-    <!-- Libs CSS -->
+    <!-- CSS files -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
     <link href="./dist/libs/fullcalendar/core/main.min.css" rel="stylesheet"/>
     <link href="./dist/libs/fullcalendar/daygrid/main.min.css" rel="stylesheet"/>
     <link href="./dist/libs/fullcalendar/timegrid/main.min.css" rel="stylesheet"/>
     <link href="./dist/libs/fullcalendar/list/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
-    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
-    <!-- Tabler Core -->
     <link href="./dist/css/tabler.min.css" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
     <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
     <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css" rel="stylesheet"/>
     <link href="./dist/css/demo.min.css" rel="stylesheet"/>
     <style>
       body {
@@ -49,22 +41,18 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <header class="navbar navbar-expand-md navbar-light">
+      <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
           <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
             <span class="navbar-toggler-icon"></span>
           </button>
           <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-image">
+            <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
           </a>
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item dropdown d-none d-md-flex mr-3">
               <a href="#" class="nav-link px-0" data-toggle="dropdown" tabindex="-1">
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
-                  <path stroke="none" d="M0 0h24v24H0z"/>
-                  <path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" />
-                  <path d="M9 17v1a3 3 0 0 0 6 0v-1" />
-                </svg>
                 <span class="badge bg-red"></span>
               </a>
               <div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
@@ -77,54 +65,32 @@
             </div>
             <div class="nav-item dropdown">
               <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
+                <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
                 <div class="d-none d-xl-block pl-2">
                   <div>Paweł Kuna</div>
                   <div class="mt-1 small text-muted">UI Designer</div>
                 </div>
               </a>
-              <div class="dropdown-menu dropdown-menu-right">
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
+                <a href="#" class="dropdown-item">Set status</a>
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <a href="#" class="dropdown-item">Profile & account</a>
-                    <path stroke="none" d="M0 0h24v24H0z"/>
+                <a href="#" class="dropdown-item">Feedback</a>
-                    <path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-                    <circle cx="12" cy="12" r="3" />
-                  </svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                    <path stroke="none" d="M0 0h24v24H0z"/>
-                    <path d="M9 7 h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" />
-                    <path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" />
-                    <line x1="16" y1="5" x2="19" y2="8" />
-                  </svg>
-                  Another action
-                </a>
                 <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <a href="#" class="dropdown-item">Settings</a>
-                    <path stroke="none" d="M0 0h24v24H0z"/>
+                <a href="#" class="dropdown-item">Logout</a>
-                    <line x1="12" y1="5" x2="12" y2="19" />
-                    <line x1="5" y1="12" x2="19" y2="12" />
-                  </svg>
-                  Separated link</a>
               </div>
             </div>
           </div>
         </div>
       </header>
       <div class="navbar-expand-md">
-        <div class="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar navbar-light">
             <div class="container-xl">
               <ul class="navbar-nav">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="5 12 3 12 12 3 21 12 19 12" />
-                      <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
-                      <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Home
@@ -133,14 +99,7 @@
                 </li>
                 <li class="nav-item active dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" />
-                      <line x1="12" y1="12" x2="20" y2="7.5" />
-                      <line x1="12" y1="12" x2="12" y2="21" />
-                      <line x1="12" y1="12" x2="4" y2="7.5" />
-                      <line x1="16" y1="5.25" x2="8" y2="9.75" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       User Interface
@@ -167,11 +126,21 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./cards-masonry.html" >
+                        Cards Masonry
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./dropdowns.html" >
                         Dropdowns
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./icons.html" >
+                        Icons
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./modals.html" >
                         Modals
@@ -197,6 +166,26 @@
                         Charts
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts-heatmap.html" >
+                        Charts heatmap
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./skeleton.html" >
+                        Skeleton
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./tabs.html" >
+                        Tabs
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./tables.html" >
                         Tables
@@ -217,6 +206,16 @@
                         Lists
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./typography.html" >
+                        Typography
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./markdown.html" >
+                        Markdown
+                      </a>
+                    </li>
                     <li class="dropright">
                       <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
                         Authentication
@@ -233,24 +232,16 @@
                         Error pages
                       </a>
                       <div class="dropdown-menu">
-                      <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./error-404.html" class="dropdown-item">404 page</a>
-                      <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./error-500.html" class="dropdown-item">500 page</a>
-                      <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./error-maintenance.html" class="dropdown-item">Maintenance page</a>
-                      <a href="./404.html" class="dropdown-item">404 page</a>
-                      <a href="./500.html" class="dropdown-item">500 page</a>
-                      <a href="./503.html" class="dropdown-item">503 page</a>
-                      <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
                       </div>
                     </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="9 11 12 14 20 6" />
-                      <path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Form elements
@@ -259,10 +250,7 @@
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Extra
@@ -304,6 +292,11 @@
                         Gallery
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./license.html" >
+                        License
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./profile.html" >
                         Profile
@@ -314,17 +307,16 @@
                         Music
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./welcome.html" >
+                        Welcome
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <rect x="4" y="4" width="6" height="5" rx="2" />
-                      <rect x="4" y="13" width="6" height="7" rx="2" />
-                      <rect x="14" y="4" width="6" height="7" rx="2" />
-                      <rect x="14" y="15" width="6" height="5" rx="2" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Layout
@@ -366,11 +358,21 @@
                         Navbar dark
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-navbar-overlap.html" >
+                        Navbar overlap
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./layout-dark.html" >
                         Dark mode
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-rtl.html" >
+                        RTL mode
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./layout-fluid.html" >
                         Fluid
@@ -383,199 +385,21 @@
                     </li>
                   </ul>
                 </li>
-              <li class="nav-item dropdown">
+                <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link" href="./docs/index.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="14 3 14 8 19 8" />
-                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
-                      <line x1="9" y1="9" x2="10" y2="9" />
-                      <line x1="9" y1="13" x2="15" y2="13" />
-                      <line x1="9" y1="17" x2="15" y2="17" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
-                    Docs
+                      Documentation
                     </span>
                   </a>
-                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-3">
-                  <li >
-                    <a class="dropdown-item" href="./docs/index.html" >
-                      Introduction
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/alerts.html" >
-                      Alerts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/autosize.html" >
-                      Autosize
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/avatars.html" >
-                      Avatars
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/badges.html" >
-                      Badges
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/breadcrumb.html" >
-                      Breadcrumb
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/buttons.html" >
-                      Buttons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/cards.html" >
-                      Cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/carousel.html" >
-                      Carousel
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/colors.html" >
-                      Colors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/countup.html" >
-                      Countup
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/cursors.html" >
-                      Cursors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/charts.html" >
-                      Charts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/dropdowns.html" >
-                      Dropdowns
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/divider.html" >
-                      Divider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/empty.html" >
-                      Empty states
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/flags.html" >
-                      Flags
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/form-elements.html" >
-                      Form elements
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/form-helpers.html" >
-                      Form helpers
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/input-mask.html" >
-                      Form input mask
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/modals.html" >
-                      Modals
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/progress.html" >
-                      Progress
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/payments.html" >
-                      Payments
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/range-slider.html" >
-                      Range slider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/ribbons.html" >
-                      Ribbons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/spinners.html" >
-                      Spinners
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/steps.html" >
-                      Steps
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/tables.html" >
-                      Tables
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/tabs.html" >
-                      Tabs
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/timelines.html" >
-                      Timelines
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/toasts.html" >
-                      Toasts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/tooltips.html" >
-                      Tooltips
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/typography.html" >
-                      Typography
-                    </a>
-                  </li>
-                </ul>
                 </li>
               </ul>
               <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <circle cx="10" cy="10" r="7" />
-                      <line x1="21" y1="21" x2="15" y2="15" />
-                    </svg>
                     </span>
                     <input type="text" class="form-control" placeholder="Search…">
                   </div>
@@ -584,12 +408,13 @@
             </div>
           </div>
         </div>
+      </div>
       <div class="content">
         <div class="container-xl">
           <!-- Page title -->
-          <div class="page-header">
+          <div class="page-header d-print-none">
             <div class="row align-items-center">
-              <div class="col-auto">
+              <div class="col">
                 <h2 class="page-title">
                   Calendar
                 </h2>
@@ -598,11 +423,7 @@
               <div class="col-auto ml-auto d-print-none">
                 <div class="d-flex">
                   <a href="#" class="btn btn-primary">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <line x1="12" y1="5" x2="12" y2="19" />
-                      <line x1="5" y1="12" x2="19" y2="12" />
-                    </svg>
                     Add event
                   </a>
                 </div>
@@ -615,7 +436,7 @@
             </div>
           </div>
         </div>
-        <footer class="footer footer-transparent">
+        <footer class="footer footer-transparent d-print-none">
           <div class="container">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ml-lg-auto">
@@ -626,129 +447,24 @@
                 </ul>
               </div>
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item">
                     Copyright © 2020
                     <a href="." class="link-secondary">Tabler</a>.
                     All rights reserved.
+                  </li>
+                  <li class="list-inline-item">
+                    <a href="./changelog.html" class="link-secondary">v1.0.0-alpha.12</a>
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
         </footer>
       </div>
     </div>
-    <div class="modal modal-blur fade" id="modal-report" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog modal-lg" role="document">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title">New report</h5>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                <path stroke="none" d="M0 0h24v24H0z"/>
-                <line x1="18" y1="6" x2="6" y2="18" />
-                <line x1="6" y1="6" x2="18" y2="18" />
-              </svg>
-            </button>
-          </div>
-          <div class="modal-body">
-            <div class="mb-3">
-              <label class="form-label">Name</label>
-              <input type="text" class="form-control" name="example-text-input" placeholder="Your report name">
-            </div>
-            <label class="form-label">Report type</label>
-            <div class="form-selectgroup-boxes row mb-3">
-              <div class="col-lg-6">
-                <label class="form-selectgroup-item">
-                  <input type="radio" name="report-type" value="1" class="form-selectgroup-input" checked>
-                  <div class="form-selectgroup-label d-flex align-items-center p-3">
-                    <div class="mr-3">
-                      <span class="form-selectgroup-check"></span>
-                    </div>
-                    <div class="form-selectgroup-label-content">
-                      <div class="form-selectgroup-title strong mb-1">Simple</div>
-                      <div class="text-muted">Provide only basic data needed for the report</div>
-                    </div>
-                  </div>
-                </label>
-              </div>
-              <div class="col-lg-6">
-                <label class="form-selectgroup-item">
-                  <input type="radio" name="report-type" value="1" class="form-selectgroup-input">
-                  <div class="form-selectgroup-label d-flex align-items-center p-3">
-                    <div class="mr-3">
-                      <span class="form-selectgroup-check"></span>
-                    </div>
-                    <div class="form-selectgroup-label-content">
-                      <div class="form-selectgroup-title strong mb-1">Advanced</div>
-                      <div class="text-muted">Insert charts and additional advanced analyses to be inserted in the report</div>
-                    </div>
-                  </div>
-                </label>
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-lg-8">
-                <div class="mb-3">
-                  <label class="form-label">Report url</label>
-                  <div class="input-group input-group-flat">
-                    <span class="input-group-text">
-                      https://tabler.io/reports/
-                    </span>
-                    <input type="text" class="form-control pl-0"  value="report-01">
-                  </div>
-                </div>
-              </div>
-              <div class="col-lg-4">
-                <div class="mb-3">
-                  <label class="form-label">Visibility</label>
-                  <select class="form-select">
-                    <option value="1" selected>Private</option>
-                    <option value="2">Public</option>
-                    <option value="3">Hidden</option>
-                  </select>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="modal-body">
-            <div class="row">
-              <div class="col-lg-6">
-                <div class="mb-3">
-                  <label class="form-label">Client name</label>
-                  <input type="text" class="form-control">
-                </div>
-              </div>
-              <div class="col-lg-6">
-                <div class="mb-3">
-                  <label class="form-label">Reporting period</label>
-                  <input type="date" class="form-control">
-                </div>
-              </div>
-              <div class="col-lg-12">
-                <div>
-                  <label class="form-label">Additional information</label>
-                  <textarea class="form-control" rows="3"></textarea>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="modal-footer">
-            <a href="#" class="btn btn-link link-secondary" data-dismiss="modal">
-              Cancel
-            </a>
-            <a href="#" class="btn btn-primary ml-auto" data-dismiss="modal">
-              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                <path stroke="none" d="M0 0h24v24H0z"/>
-                <line x1="12" y1="5" x2="12" y2="19" />
-                <line x1="5" y1="12" x2="19" y2="12" />
-              </svg>
-              Create new report
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
     <!-- Libs JS -->
     <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <script src="./dist/libs/fullcalendar/core/main.min.js"></script>
     <script src="./dist/libs/fullcalendar/daygrid/main.min.js"></script>
     <script src="./dist/libs/fullcalendar/interaction/main.min.js"></script>

demo/cards-masonry.html

@@ -0,0 +1,704 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-alpha.12
+* @link https://tabler.io
+* Copyright 2018-2020 The Tabler Authors
+* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>Cards Masonry - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
+    <!-- CSS files -->
+    <link href="./dist/css/tabler.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
+    <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
+    <link href="./dist/css/demo.min.css" rel="stylesheet"/>
+    <style>
+      body {
+      	display: none;
+      }
+    </style>
+  </head>
+  <body class="antialiased">
+    <div class="page">
+      <header class="navbar navbar-expand-md navbar-light d-print-none">
+        <div class="container-xl">
+          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3">
+            <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
+          </a>
+          <div class="navbar-nav flex-row order-md-last">
+            <div class="nav-item dropdown d-none d-md-flex mr-3">
+              <a href="#" class="nav-link px-0" data-toggle="dropdown" tabindex="-1">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
+                <span class="badge bg-red"></span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
+                <div class="card">
+                  <div class="card-body">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="nav-item dropdown">
+              <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
+                <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
+                <div class="d-none d-xl-block pl-2">
+                  <div>Paweł Kuna</div>
+                  <div class="mt-1 small text-muted">UI Designer</div>
+                </div>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a href="#" class="dropdown-item">Set status</a>
+                <a href="#" class="dropdown-item">Profile & account</a>
+                <a href="#" class="dropdown-item">Feedback</a>
+                <div class="dropdown-divider"></div>
+                <a href="#" class="dropdown-item">Settings</a>
+                <a href="#" class="dropdown-item">Logout</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+      <div class="navbar-expand-md">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar navbar-light">
+            <div class="container-xl">
+              <ul class="navbar-nav">
+                <li class="nav-item">
+                  <a class="nav-link" href="./index.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Home
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item active dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      User Interface
+                    </span>
+                  </a>
+                  <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
+                    <li >
+                      <a class="dropdown-item" href="./empty.html" >
+                        Empty page
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./blank.html" >
+                        Blank page
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./buttons.html" >
+                        Buttons
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item active" href="./cards-masonry.html" >
+                        Cards Masonry
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./dropdowns.html" >
+                        Dropdowns
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./icons.html" >
+                        Icons
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./modals.html" >
+                        Modals
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./maps.html" >
+                        Maps
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./maps-vector.html" >
+                        Vector maps
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./navigation.html" >
+                        Navigation
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts-heatmap.html" >
+                        Charts heatmap
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./skeleton.html" >
+                        Skeleton
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./tabs.html" >
+                        Tabs
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./tables.html" >
+                        Tables
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./calendar.html" >
+                        Calendar
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./lists.html" >
+                        Lists
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./typography.html" >
+                        Typography
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./markdown.html" >
+                        Markdown
+                      </a>
+                    </li>
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
+                      </a>
+                      <div class="dropdown-menu">
+                        <a href="./sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="./sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
+                    </li>
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
+                      </a>
+                      <div class="dropdown-menu">
+                        <a href="./error-404.html" class="dropdown-item">404 page</a>
+                        <a href="./error-500.html" class="dropdown-item">500 page</a>
+                        <a href="./error-maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./form-elements.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Form elements
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Extra
+                    </span>
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="./invoice.html" >
+                        Invoice
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./blog.html" >
+                        Blog cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./search-results.html" >
+                        Search results
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./pricing.html" >
+                        Pricing cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./users.html" >
+                        Users
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./gallery.html" >
+                        Gallery
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./license.html" >
+                        License
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./profile.html" >
+                        Profile
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./music.html" >
+                        Music
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./welcome.html" >
+                        Welcome
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Layout
+                    </span>
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="./layout-horizontal.html" >
+                        Horizontal
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-vertical.html" >
+                        Vertical
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-vertical-right.html" >
+                        Right vertical
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-condensed.html" >
+                        Condensed
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-condensed-dark.html" >
+                        Condensed dark
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-combo.html" >
+                        Combined
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-navbar-dark.html" >
+                        Navbar dark
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-navbar-overlap.html" >
+                        Navbar overlap
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-dark.html" >
+                        Dark mode
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-rtl.html" >
+                        RTL mode
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-fluid.html" >
+                        Fluid
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-fluid-vertical.html" >
+                        Fluid vertical
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="./docs/index.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Documentation
+                    </span>
+                  </a>
+                </li>
+              </ul>
+              <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="content">
+        <div class="container-xl">
+          <!-- Page title -->
+          <div class="page-header d-print-none">
+            <div class="row align-items-center">
+              <div class="col">
+                <h2 class="page-title">
+                  Cards Masonry
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="row row-cards" data-masonry='{"percentPosition": true }'>
+            <div class="col-sm-6 col-lg-4">
+              <div class="card">
+                <div class="card-body">
+                  <p>This is some text within a card body.</p>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-6 col-lg-4">
+              <div class="card">
+                <div class="card-body">
+                  <h3 class="card-title">Card with bottom image</h3>
+                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                    neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                </div>
+                <div class="card-img-bottom img-responsive img-responsive-16by9" style="background-image: url(./static/photos/56614e12b2a7bd68.jpg)"></div>
+              </div>
+            </div>
+            <div class="col-sm-6 col-lg-4">
+              <div class="card">
+                <div class="card-body">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                    neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                </div>
+                <!-- Card footer -->
+                <div class="card-footer">
+                  <div class="row align-items-center">
+                    <div class="col-auto">
+                      <a href="#">More information</a>
+                    </div>
+                    <div class="col-auto ml-auto">
+                      <label class="form-check form-switch m-0">
+                        <input class="form-check-input position-static" type="checkbox" checked>
+                      </label>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-6 col-lg-4">
+              <div class="card">
+                <div class="card-body">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                    neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                </div>
+                <!-- Card footer -->
+                <div class="card-footer">
+                  <div class="row align-items-center">
+                    <div class="col-auto ml-auto">
+                      <div class="avatar-list avatar-list-stacked">
+                        <span class="avatar avatar-sm avatar-rounded" style="background-image: url(./static/avatars/000m.jpg)"></span>
+                        <span class="avatar avatar-sm avatar-rounded">JL</span>
+                        <span class="avatar avatar-sm avatar-rounded" style="background-image: url(./static/avatars/002m.jpg)"></span>
+                        <span class="avatar avatar-sm avatar-rounded" style="background-image: url(./static/avatars/003m.jpg)"></span>
+                        <span class="avatar avatar-sm avatar-rounded" style="background-image: url(./static/avatars/000f.jpg)"></span>
+                        <span class="avatar avatar-sm avatar-rounded">+3</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-6 col-lg-4">
+              <div class="card">
+                <div class="card-header">
+                  <ul class="nav nav-tabs card-header-tabs">
+                    <li class="nav-item">
+                      <a class="nav-link active" href="#">
+                        Active
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a class="nav-link" href="#">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                        Link
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">
+                        Disabled
+                      </a>
+                    </li>
+                    <li class="nav-item ml-auto">
+                      <a class="nav-link" href="#">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /><circle cx="12" cy="12" r="3" /></svg>
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+                <div class="card-body">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                    neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-6 col-lg-4">
+              <div class="card">
+                <div class="card-header">
+                  <ul class="nav nav-pills card-header-pills">
+                    <li class="nav-item">
+                      <a class="nav-link active" href="#">
+                        Active
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a class="nav-link" href="#">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                        Link
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">
+                        Disabled
+                      </a>
+                    </li>
+                    <li class="nav-item ml-auto">
+                      <a class="nav-link" href="#">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /><circle cx="12" cy="12" r="3" /></svg>
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+                <div class="card-body">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                    neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-6 col-lg-4">
+              <div class="card">
+                <div class="empty">
+                  <div class="empty-img"><img src="./static/illustrations/undraw_quitting_time_dm8t.svg" height="128"  alt="">
+                  </div>
+                  <p class="empty-title">No results found</p>
+                  <p class="empty-subtitle text-muted">
+                    Try adjusting your search or filter to find what you're looking for.
+                  </p>
+                  <div class="empty-action">
+                    <a href="./." class="btn btn-primary">
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
+                      Search again
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-6 col-lg-4">
+              <div class="card">
+                <div class="card-body">
+                  <h3 class="card-title">Card with progress bar</h3>
+                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                    neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                </div>
+                <div class="progress progress-sm card-progress">
+                  <div class="progress-bar" style="width: 38%" role="progressbar" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100">
+                    <span class="visually-hidden">38% Complete</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-6 col-lg-4">
+              <div class="card">
+                <div class="card-body">
+                  <h3 class="card-title">Card title</h3>
+                  <div class="card-subtitle">Card subtitle</div>
+                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                    neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-6 col-lg-4">
+              <div class="card">
+                <div class="card-header">
+                  <h3 class="card-title">Header title</h3>
+                </div>
+                <div class="card-body">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
+                    neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
+                </div>
+              </div>
+            </div>
+            <div class="col-sm-6 col-lg-4">
+              <div class="card">
+                <div class="card-body">
+                  <div class="mb-3">
+                    <div class="form-label">Card number</div>
+                    <input type="text" name="input-mask" class="form-control" data-mask="0000 0000 0000 0000" data-mask-visible="true" autocomplete="off"/>
+                  </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 g-2">
+                          <div class="col">
+                            <select class="form-select">
+                              <option value="1">1</option>
+                              <option value="2">2</option>
+                              <option value="3">3</option>
+                              <option value="4">4</option>
+                              <option value="5">5</option>
+                              <option value="6">6</option>
+                              <option value="7">7</option>
+                              <option value="8">8</option>
+                              <option value="9">9</option>
+                              <option value="10">10</option>
+                              <option value="11">11</option>
+                              <option value="12">12</option>
+                            </select>
+                          </div>
+                          <div class="col">
+                            <select class="form-select">
+                              <option value="2020">2020</option>
+                              <option value="2021">2021</option>
+                              <option value="2022">2022</option>
+                              <option value="2023">2023</option>
+                              <option value="2024">2024</option>
+                              <option value="2025">2025</option>
+                              <option value="2026">2026</option>
+                              <option value="2027">2027</option>
+                              <option value="2028">2028</option>
+                              <option value="2029">2029</option>
+                              <option value="2030">2030</option>
+                            </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">
+                    <a href="#" class="btn btn-primary w-100">
+                      Pay now
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <footer class="footer footer-transparent d-print-none">
+          <div class="container">
+            <div class="row text-center align-items-center flex-row-reverse">
+              <div class="col-lg-auto ml-lg-auto">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li>
+                  <li class="list-inline-item"><a href="./faq.html" class="link-secondary">FAQ</a></li>
+                  <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
+                </ul>
+              </div>
+              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item">
+                    Copyright © 2020
+                    <a href="." class="link-secondary">Tabler</a>.
+                    All rights reserved.
+                  </li>
+                  <li class="list-inline-item">
+                    <a href="./changelog.html" class="link-secondary">v1.0.0-alpha.12</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js"></script>
+    <script>
+      document.body.style.display = "block"
+    </script>
+  </body>
+</html>

demo/cards.html

@@ -1,11 +1,11 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.5
+* @version 1.0.0-alpha.12
-* @link https://github.com/tabler/tabler
+* @link https://tabler.io
-* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Copyright 2018-2020 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
   <head>
@@ -24,22 +24,10 @@
     <meta name="robots" content="noindex,nofollow,noarchive"/>
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
-    <!-- Libs CSS -->
+    <!-- CSS files -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
-    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
-    <!-- Tabler Core -->
     <link href="./dist/css/tabler.min.css" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
     <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
     <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css" rel="stylesheet"/>
     <link href="./dist/css/demo.min.css" rel="stylesheet"/>
     <style>
       body {
@@ -49,22 +37,18 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <header class="navbar navbar-expand-md navbar-light">
+      <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
           <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
             <span class="navbar-toggler-icon"></span>
           </button>
           <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-image">
+            <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
           </a>
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item dropdown d-none d-md-flex mr-3">
               <a href="#" class="nav-link px-0" data-toggle="dropdown" tabindex="-1">
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
-                  <path stroke="none" d="M0 0h24v24H0z"/>
-                  <path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" />
-                  <path d="M9 17v1a3 3 0 0 0 6 0v-1" />
-                </svg>
                 <span class="badge bg-red"></span>
               </a>
               <div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
@@ -77,54 +61,32 @@
             </div>
             <div class="nav-item dropdown">
               <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
+                <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
                 <div class="d-none d-xl-block pl-2">
                   <div>Paweł Kuna</div>
                   <div class="mt-1 small text-muted">UI Designer</div>
                 </div>
               </a>
-              <div class="dropdown-menu dropdown-menu-right">
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
+                <a href="#" class="dropdown-item">Set status</a>
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <a href="#" class="dropdown-item">Profile & account</a>
-                    <path stroke="none" d="M0 0h24v24H0z"/>
+                <a href="#" class="dropdown-item">Feedback</a>
-                    <path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-                    <circle cx="12" cy="12" r="3" />
-                  </svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                    <path stroke="none" d="M0 0h24v24H0z"/>
-                    <path d="M9 7 h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" />
-                    <path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" />
-                    <line x1="16" y1="5" x2="19" y2="8" />
-                  </svg>
-                  Another action
-                </a>
                 <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <a href="#" class="dropdown-item">Settings</a>
-                    <path stroke="none" d="M0 0h24v24H0z"/>
+                <a href="#" class="dropdown-item">Logout</a>
-                    <line x1="12" y1="5" x2="12" y2="19" />
-                    <line x1="5" y1="12" x2="19" y2="12" />
-                  </svg>
-                  Separated link</a>
               </div>
             </div>
           </div>
         </div>
       </header>
       <div class="navbar-expand-md">
-        <div class="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar navbar-light">
             <div class="container-xl">
               <ul class="navbar-nav">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="5 12 3 12 12 3 21 12 19 12" />
-                      <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
-                      <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Home
@@ -133,14 +95,7 @@
                 </li>
                 <li class="nav-item active dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" />
-                      <line x1="12" y1="12" x2="20" y2="7.5" />
-                      <line x1="12" y1="12" x2="12" y2="21" />
-                      <line x1="12" y1="12" x2="4" y2="7.5" />
-                      <line x1="16" y1="5.25" x2="8" y2="9.75" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       User Interface
@@ -167,11 +122,21 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./cards-masonry.html" >
+                        Cards Masonry
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./dropdowns.html" >
                         Dropdowns
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./icons.html" >
+                        Icons
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./modals.html" >
                         Modals
@@ -197,6 +162,26 @@
                         Charts
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts-heatmap.html" >
+                        Charts heatmap
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./skeleton.html" >
+                        Skeleton
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./tabs.html" >
+                        Tabs
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./tables.html" >
                         Tables
@@ -217,6 +202,16 @@
                         Lists
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./typography.html" >
+                        Typography
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./markdown.html" >
+                        Markdown
+                      </a>
+                    </li>
                     <li class="dropright">
                       <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
                         Authentication
@@ -233,24 +228,16 @@
                         Error pages
                       </a>
                       <div class="dropdown-menu">
-                      <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./error-404.html" class="dropdown-item">404 page</a>
-                      <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./error-500.html" class="dropdown-item">500 page</a>
-                      <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./error-maintenance.html" class="dropdown-item">Maintenance page</a>
-                      <a href="./404.html" class="dropdown-item">404 page</a>
-                      <a href="./500.html" class="dropdown-item">500 page</a>
-                      <a href="./503.html" class="dropdown-item">503 page</a>
-                      <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
                       </div>
                     </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="9 11 12 14 20 6" />
-                      <path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Form elements
@@ -259,10 +246,7 @@
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Extra
@@ -304,6 +288,11 @@
                         Gallery
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./license.html" >
+                        License
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./profile.html" >
                         Profile
@@ -314,17 +303,16 @@
                         Music
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./welcome.html" >
+                        Welcome
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <rect x="4" y="4" width="6" height="5" rx="2" />
-                      <rect x="4" y="13" width="6" height="7" rx="2" />
-                      <rect x="14" y="4" width="6" height="7" rx="2" />
-                      <rect x="14" y="15" width="6" height="5" rx="2" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Layout
@@ -366,11 +354,21 @@
                         Navbar dark
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-navbar-overlap.html" >
+                        Navbar overlap
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./layout-dark.html" >
                         Dark mode
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-rtl.html" >
+                        RTL mode
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./layout-fluid.html" >
                         Fluid
@@ -383,199 +381,21 @@
                     </li>
                   </ul>
                 </li>
-              <li class="nav-item dropdown">
+                <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link" href="./docs/index.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="14 3 14 8 19 8" />
-                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
-                      <line x1="9" y1="9" x2="10" y2="9" />
-                      <line x1="9" y1="13" x2="15" y2="13" />
-                      <line x1="9" y1="17" x2="15" y2="17" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
-                    Docs
+                      Documentation
                     </span>
                   </a>
-                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-3">
-                  <li >
-                    <a class="dropdown-item" href="./docs/index.html" >
-                      Introduction
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/alerts.html" >
-                      Alerts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/autosize.html" >
-                      Autosize
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/avatars.html" >
-                      Avatars
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/badges.html" >
-                      Badges
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/breadcrumb.html" >
-                      Breadcrumb
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/buttons.html" >
-                      Buttons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/cards.html" >
-                      Cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/carousel.html" >
-                      Carousel
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/colors.html" >
-                      Colors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/countup.html" >
-                      Countup
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/cursors.html" >
-                      Cursors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/charts.html" >
-                      Charts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/dropdowns.html" >
-                      Dropdowns
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/divider.html" >
-                      Divider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/empty.html" >
-                      Empty states
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/flags.html" >
-                      Flags
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/form-elements.html" >
-                      Form elements
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/form-helpers.html" >
-                      Form helpers
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/input-mask.html" >
-                      Form input mask
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/modals.html" >
-                      Modals
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/progress.html" >
-                      Progress
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/payments.html" >
-                      Payments
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/range-slider.html" >
-                      Range slider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/ribbons.html" >
-                      Ribbons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/spinners.html" >
-                      Spinners
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/steps.html" >
-                      Steps
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/tables.html" >
-                      Tables
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/tabs.html" >
-                      Tabs
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/timelines.html" >
-                      Timelines
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/toasts.html" >
-                      Toasts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/tooltips.html" >
-                      Tooltips
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/typography.html" >
-                      Typography
-                    </a>
-                  </li>
-                </ul>
                 </li>
               </ul>
               <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <circle cx="10" cy="10" r="7" />
-                      <line x1="21" y1="21" x2="15" y2="15" />
-                    </svg>
                     </span>
                     <input type="text" class="form-control" placeholder="Search…">
                   </div>
@@ -584,44 +404,54 @@
             </div>
           </div>
         </div>
+      </div>
       <div class="content">
         <div class="container-xl">
           <!-- Page title -->
-          <div class="page-header">
+          <div class="page-header d-print-none">
             <div class="row align-items-center">
-              <div class="col-auto">
+              <div class="col">
                 <h2 class="page-title">
                   Cards
                 </h2>
               </div>
             </div>
           </div>
-          <div class="row">
+          <div class="row row-cards">
             <div class="col-md-6 col-xl-4">
+              <div class="row row-cards">
+                <div class="col-12">
                   <div class="card">
                     <div class="card-body">
                       <p>This is some text within a card body.</p>
                     </div>
                   </div>
+                </div>
+                <div class="col-12">
                   <div class="card">
                     <div class="card-body">
                       <h3 class="card-title">Card with bottom image</h3>
                       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
                         neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
                     </div>
-                <img src="./static/photos/56614e12b2a7bd68.jpg" class="card-img-bottom"
+                    <div class="card-img-bottom img-responsive img-responsive-16by9" style="background-image: url(./static/photos/56614e12b2a7bd68.jpg)"></div>
-           alt="Card bottom image">
                   </div>
+                </div>
+                <div class="col-12">
                   <div class="card card-active">
                     <div class="card-body">
                       <p>This is a card with active state.</p>
                     </div>
                   </div>
+                </div>
+                <div class="col-12">
                   <div class="card card-inactive">
                     <div class="card-body">
                       <p>This is some text inactive state.</p>
                     </div>
                   </div>
+                </div>
+                <div class="col-12">
                   <div class="card">
                     <div class="card-body">
                       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
@@ -641,6 +471,8 @@
                       </div>
                     </div>
                   </div>
+                </div>
+                <div class="col-12">
                   <div class="card">
                     <div class="card-body">
                       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
@@ -651,17 +483,19 @@
                       <div class="row align-items-center">
                         <div class="col-auto ml-auto">
                           <div class="avatar-list avatar-list-stacked">
-                        <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
+                            <span class="avatar avatar-sm avatar-rounded" style="background-image: url(./static/avatars/000m.jpg)"></span>
-                        <span class="avatar">JL</span>
+                            <span class="avatar avatar-sm avatar-rounded">JL</span>
-                        <span class="avatar" style="background-image: url(./static/avatars/002m.jpg)"></span>
+                            <span class="avatar avatar-sm avatar-rounded" style="background-image: url(./static/avatars/002m.jpg)"></span>
-                        <span class="avatar" style="background-image: url(./static/avatars/003m.jpg)"></span>
+                            <span class="avatar avatar-sm avatar-rounded" style="background-image: url(./static/avatars/003m.jpg)"></span>
-                        <span class="avatar" style="background-image: url(./static/avatars/000f.jpg)"></span>
+                            <span class="avatar avatar-sm avatar-rounded" style="background-image: url(./static/avatars/000f.jpg)"></span>
-                        <span class="avatar">+3</span>
+                            <span class="avatar avatar-sm avatar-rounded">+3</span>
                           </div>
                         </div>
                       </div>
                     </div>
                   </div>
+                </div>
+                <div class="col-12">
                   <div class="card">
                     <div class="card-header">
                       <ul class="nav nav-tabs card-header-tabs">
@@ -672,10 +506,7 @@
                         </li>
                         <li class="nav-item">
                           <a class="nav-link" href="#">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
-                          <path stroke="none" d="M0 0h24v24H0z"/>
-                          <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
-                        </svg>
                             Link
                           </a>
                         </li>
@@ -686,11 +517,7 @@
                         </li>
                         <li class="nav-item ml-auto">
                           <a class="nav-link" href="#">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /><circle cx="12" cy="12" r="3" /></svg>
-                          <path stroke="none" d="M0 0h24v24H0z"/>
-                          <path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-                          <circle cx="12" cy="12" r="3" />
-                        </svg>
                           </a>
                         </li>
                       </ul>
@@ -700,6 +527,8 @@
                         neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
                     </div>
                   </div>
+                </div>
+                <div class="col-12">
                   <div class="card">
                     <div class="card-header">
                       <ul class="nav nav-pills card-header-pills">
@@ -710,10 +539,7 @@
                         </li>
                         <li class="nav-item">
                           <a class="nav-link" href="#">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
-                          <path stroke="none" d="M0 0h24v24H0z"/>
-                          <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
-                        </svg>
                             Link
                           </a>
                         </li>
@@ -724,11 +550,7 @@
                         </li>
                         <li class="nav-item ml-auto">
                           <a class="nav-link" href="#">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /><circle cx="12" cy="12" r="3" /></svg>
-                          <path stroke="none" d="M0 0h24v24H0z"/>
-                          <path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-                          <circle cx="12" cy="12" r="3" />
-                        </svg>
                           </a>
                         </li>
                       </ul>
@@ -738,6 +560,8 @@
                         neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
                     </div>
                   </div>
+                </div>
+                <div class="col-12">
                   <div class="card">
                     <div class="card-body">
                       <h3 class="card-title">Card with progress bar</h3>
@@ -746,31 +570,30 @@
                     </div>
                     <div class="progress progress-sm card-progress">
                       <div class="progress-bar" style="width: 38%" role="progressbar" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100">
-                    <span class="sr-only">38% Complete</span>
+                        <span class="visually-hidden">38% Complete</span>
                       </div>
                     </div>
                   </div>
+                </div>
+                <div class="col-12">
                   <div class="card">
                     <div class="empty">
-                  <div class="empty-icon">
+                      <div class="empty-img"><img src="./static/illustrations/undraw_quitting_time_dm8t.svg" height="128"  alt="">
-                    <img src="./static/illustrations/undraw_quitting_time_dm8t.svg" class="h-8 mb-4" alt="">
                       </div>
-                  <p class="empty-title h3">No results found</p>
+                      <p class="empty-title">No results found</p>
                       <p class="empty-subtitle text-muted">
                         Try adjusting your search or filter to find what you're looking for.
                       </p>
                       <div class="empty-action">
                         <a href="./." class="btn btn-primary">
-                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
-                        <path stroke="none" d="M0 0h24v24H0z"/>
-                        <circle cx="10" cy="10" r="7" />
-                        <line x1="21" y1="21" x2="15" y2="15" />
-                      </svg>
                           Search again
                         </a>
                       </div>
                     </div>
                   </div>
+                </div>
+                <div class="col-12">
                   <!-- Cards with tabs component -->
                   <div class="card-tabs">
                     <!-- Cards navigation -->
@@ -819,6 +642,8 @@
                       </div>
                     </div>
                   </div>
+                </div>
+                <div class="col-12">
                   <!-- Cards with tabs component -->
                   <div class="card-tabs">
                     <div class="tab-content">
@@ -868,7 +693,11 @@
                     </ul>
                   </div>
                 </div>
+              </div>
+            </div>
             <div class="col-md-6 col-xl-8">
+              <div class="row row-cards">
+                <div class="col-12">
                   <div class="card">
                     <div class="row row-0">
                       <div class="col-3">
@@ -883,6 +712,8 @@
                       </div>
                     </div>
                   </div>
+                </div>
+                <div class="col-12">
                   <div class="card">
                     <div class="row row-0">
                       <div class="col-3 order-md-last">
@@ -897,6 +728,8 @@
                       </div>
                     </div>
                   </div>
+                </div>
+                <div class="col-12">
                   <div class="card-group">
                     <a href="#" class="card card-inactive text-center">
                       <div class="card-body">
@@ -914,16 +747,22 @@
                       </div>
                     </a>
                   </div>
-              <div class="row">
+                </div>
+                <div class="col-12">
+                  <div class="row row-cards">
                     <div class="col-xl-6">
+                      <div class="row row-cards">
+                        <div class="col-12">
                           <div class="card">
-                    <img src="./static/photos/9f36332564ca271d.jpg" class="card-img-top" alt="Card top image">
+                            <div class="card-img-top img-responsive img-responsive-16by9" style="background-image: url(./static/photos/9f36332564ca271d.jpg)"></div>
                             <div class="card-body">
                               <h3 class="card-title">Card with top image</h3>
                               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
                                 neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
                             </div>
                           </div>
+                        </div>
+                        <div class="col-12">
                           <div class="card">
                             <div class="card-body">
                               <h3 class="card-title">Card with button link</h3>
@@ -934,6 +773,8 @@
                               </div>
                             </div>
                           </div>
+                        </div>
+                        <div class="col-12">
                           <div class="card">
                             <div class="card-status-top bg-danger"></div>
                             <div class="card-body">
@@ -942,6 +783,8 @@
                                 neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
                             </div>
                           </div>
+                        </div>
+                        <div class="col-12">
                           <div class="card">
                             <div class="card-status-bottom bg-success"></div>
                             <div class="card-body">
@@ -950,6 +793,8 @@
                                 neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
                             </div>
                           </div>
+                        </div>
+                        <div class="col-12">
                           <div class="card">
                             <div class="card-status-left bg-primary"></div>
                             <div class="card-body">
@@ -958,6 +803,8 @@
                                 neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
                             </div>
                           </div>
+                        </div>
+                        <div class="col-12">
                           <div class="card card-stacked">
                             <div class="card-body">
                               <h3 class="card-title">Stacked card</h3>
@@ -965,6 +812,8 @@
                                 neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
                             </div>
                           </div>
+                        </div>
+                        <div class="col-12">
                           <div class="card">
                             <div class="card-body">
                               <div class="mb-3">
@@ -979,7 +828,7 @@
                                 <div class="col-8">
                                   <div class="mb-3">
                                     <label class="form-label">Expiration date</label>
-                            <div class="row row-sm">
+                                    <div class="row g-2">
                                       <div class="col">
                                         <select class="form-select">
                                           <option value="1">1</option>
@@ -1022,14 +871,18 @@
                                 </div>
                               </div>
                               <div class="mt-2">
-                        <a href="#" class="btn btn-primary btn-block">
+                                <a href="#" class="btn btn-primary w-100">
                                   Pay now
                                 </a>
                               </div>
                             </div>
                           </div>
                         </div>
+                      </div>
+                    </div>
                     <div class="col-xl-6">
+                      <div class="row row-cards">
+                        <div class="col-12">
                           <div class="card">
                             <div class="card-body">
                               <h3 class="card-title">Card title</h3>
@@ -1038,6 +891,8 @@
                                 neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
                             </div>
                           </div>
+                        </div>
+                        <div class="col-12">
                           <div class="card">
                             <div class="card-header">
                               <h3 class="card-title">Header title</h3>
@@ -1047,6 +902,8 @@
                                 neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
                             </div>
                           </div>
+                        </div>
+                        <div class="col-12">
                           <div class="card">
                             <div class="card-body">
                               <h3 class="card-title">Card with footer</h3>
@@ -1058,6 +915,8 @@
                               This is standard card footer
                             </div>
                           </div>
+                        </div>
+                        <div class="col-12">
                           <div class="card">
                             <div class="card-body">
                               <h3 class="card-title">Card with footer button</h3>
@@ -1069,6 +928,8 @@
                               <a href="#" class="btn btn-primary">Go somewhere</a>
                             </div>
                           </div>
+                        </div>
+                        <div class="col-12">
                           <div class="card">
                             <div class="card-body">
                               <h3 class="card-title">Card with footer buttons</h3>
@@ -1088,7 +949,11 @@
                     </div>
                   </div>
                 </div>
-        <footer class="footer footer-transparent">
+              </div>
+            </div>
+          </div>
+        </div>
+        <footer class="footer footer-transparent d-print-none">
           <div class="container">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ml-lg-auto">
@@ -1099,9 +964,16 @@
                 </ul>
               </div>
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item">
                     Copyright © 2020
                     <a href="." class="link-secondary">Tabler</a>.
                     All rights reserved.
+                  </li>
+                  <li class="list-inline-item">
+                    <a href="./changelog.html" class="link-secondary">v1.0.0-alpha.12</a>
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
@@ -1110,25 +982,8 @@
     </div>
     <!-- Libs JS -->
     <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
-    <script src="./dist/libs/imask/dist/imask.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
-    <script>
-      (function () {
-      	/**
-      	 * 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>
     <script>
       document.body.style.display = "block"
     </script>

demo/carousel.html

@@ -1,11 +1,11 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.5
+* @version 1.0.0-alpha.12
-* @link https://github.com/tabler/tabler
+* @link https://tabler.io
-* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Copyright 2018-2020 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
   <head>
@@ -24,22 +24,10 @@
     <meta name="robots" content="noindex,nofollow,noarchive"/>
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
-    <!-- Libs CSS -->
+    <!-- CSS files -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
-    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
-    <!-- Tabler Core -->
     <link href="./dist/css/tabler.min.css" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
     <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
     <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css" rel="stylesheet"/>
     <link href="./dist/css/demo.min.css" rel="stylesheet"/>
     <style>
       body {
@@ -49,22 +37,18 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <header class="navbar navbar-expand-md navbar-light">
+      <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
           <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
             <span class="navbar-toggler-icon"></span>
           </button>
           <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-image">
+            <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
           </a>
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item dropdown d-none d-md-flex mr-3">
               <a href="#" class="nav-link px-0" data-toggle="dropdown" tabindex="-1">
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
-                  <path stroke="none" d="M0 0h24v24H0z"/>
-                  <path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" />
-                  <path d="M9 17v1a3 3 0 0 0 6 0v-1" />
-                </svg>
                 <span class="badge bg-red"></span>
               </a>
               <div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
@@ -77,54 +61,32 @@
             </div>
             <div class="nav-item dropdown">
               <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
+                <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
                 <div class="d-none d-xl-block pl-2">
                   <div>Paweł Kuna</div>
                   <div class="mt-1 small text-muted">UI Designer</div>
                 </div>
               </a>
-              <div class="dropdown-menu dropdown-menu-right">
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
+                <a href="#" class="dropdown-item">Set status</a>
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <a href="#" class="dropdown-item">Profile & account</a>
-                    <path stroke="none" d="M0 0h24v24H0z"/>
+                <a href="#" class="dropdown-item">Feedback</a>
-                    <path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-                    <circle cx="12" cy="12" r="3" />
-                  </svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                    <path stroke="none" d="M0 0h24v24H0z"/>
-                    <path d="M9 7 h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" />
-                    <path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" />
-                    <line x1="16" y1="5" x2="19" y2="8" />
-                  </svg>
-                  Another action
-                </a>
                 <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <a href="#" class="dropdown-item">Settings</a>
-                    <path stroke="none" d="M0 0h24v24H0z"/>
+                <a href="#" class="dropdown-item">Logout</a>
-                    <line x1="12" y1="5" x2="12" y2="19" />
-                    <line x1="5" y1="12" x2="19" y2="12" />
-                  </svg>
-                  Separated link</a>
               </div>
             </div>
           </div>
         </div>
       </header>
       <div class="navbar-expand-md">
-        <div class="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar navbar-light">
             <div class="container-xl">
               <ul class="navbar-nav">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="5 12 3 12 12 3 21 12 19 12" />
-                      <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
-                      <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Home
@@ -133,14 +95,7 @@
                 </li>
                 <li class="nav-item active dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" />
-                      <line x1="12" y1="12" x2="20" y2="7.5" />
-                      <line x1="12" y1="12" x2="12" y2="21" />
-                      <line x1="12" y1="12" x2="4" y2="7.5" />
-                      <line x1="16" y1="5.25" x2="8" y2="9.75" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       User Interface
@@ -167,11 +122,21 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./cards-masonry.html" >
+                        Cards Masonry
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./dropdowns.html" >
                         Dropdowns
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./icons.html" >
+                        Icons
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./modals.html" >
                         Modals
@@ -197,6 +162,26 @@
                         Charts
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts-heatmap.html" >
+                        Charts heatmap
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./skeleton.html" >
+                        Skeleton
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./tabs.html" >
+                        Tabs
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./tables.html" >
                         Tables
@@ -217,6 +202,16 @@
                         Lists
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./typography.html" >
+                        Typography
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./markdown.html" >
+                        Markdown
+                      </a>
+                    </li>
                     <li class="dropright">
                       <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
                         Authentication
@@ -233,24 +228,16 @@
                         Error pages
                       </a>
                       <div class="dropdown-menu">
-                      <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./error-404.html" class="dropdown-item">404 page</a>
-                      <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./error-500.html" class="dropdown-item">500 page</a>
-                      <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./error-maintenance.html" class="dropdown-item">Maintenance page</a>
-                      <a href="./404.html" class="dropdown-item">404 page</a>
-                      <a href="./500.html" class="dropdown-item">500 page</a>
-                      <a href="./503.html" class="dropdown-item">503 page</a>
-                      <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
                       </div>
                     </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="9 11 12 14 20 6" />
-                      <path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Form elements
@@ -259,10 +246,7 @@
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Extra
@@ -304,6 +288,11 @@
                         Gallery
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./license.html" >
+                        License
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./profile.html" >
                         Profile
@@ -314,17 +303,16 @@
                         Music
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./welcome.html" >
+                        Welcome
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <rect x="4" y="4" width="6" height="5" rx="2" />
-                      <rect x="4" y="13" width="6" height="7" rx="2" />
-                      <rect x="14" y="4" width="6" height="7" rx="2" />
-                      <rect x="14" y="15" width="6" height="5" rx="2" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Layout
@@ -366,11 +354,21 @@
                         Navbar dark
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-navbar-overlap.html" >
+                        Navbar overlap
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./layout-dark.html" >
                         Dark mode
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-rtl.html" >
+                        RTL mode
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./layout-fluid.html" >
                         Fluid
@@ -383,199 +381,21 @@
                     </li>
                   </ul>
                 </li>
-              <li class="nav-item dropdown">
+                <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link" href="./docs/index.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="14 3 14 8 19 8" />
-                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
-                      <line x1="9" y1="9" x2="10" y2="9" />
-                      <line x1="9" y1="13" x2="15" y2="13" />
-                      <line x1="9" y1="17" x2="15" y2="17" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
-                    Docs
+                      Documentation
                     </span>
                   </a>
-                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-3">
-                  <li >
-                    <a class="dropdown-item" href="./docs/index.html" >
-                      Introduction
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/alerts.html" >
-                      Alerts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/autosize.html" >
-                      Autosize
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/avatars.html" >
-                      Avatars
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/badges.html" >
-                      Badges
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/breadcrumb.html" >
-                      Breadcrumb
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/buttons.html" >
-                      Buttons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/cards.html" >
-                      Cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/carousel.html" >
-                      Carousel
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/colors.html" >
-                      Colors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/countup.html" >
-                      Countup
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/cursors.html" >
-                      Cursors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/charts.html" >
-                      Charts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/dropdowns.html" >
-                      Dropdowns
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/divider.html" >
-                      Divider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/empty.html" >
-                      Empty states
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/flags.html" >
-                      Flags
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/form-elements.html" >
-                      Form elements
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/form-helpers.html" >
-                      Form helpers
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/input-mask.html" >
-                      Form input mask
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/modals.html" >
-                      Modals
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/progress.html" >
-                      Progress
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/payments.html" >
-                      Payments
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/range-slider.html" >
-                      Range slider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/ribbons.html" >
-                      Ribbons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/spinners.html" >
-                      Spinners
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/steps.html" >
-                      Steps
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/tables.html" >
-                      Tables
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/tabs.html" >
-                      Tabs
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/timelines.html" >
-                      Timelines
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/toasts.html" >
-                      Toasts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/tooltips.html" >
-                      Tooltips
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/typography.html" >
-                      Typography
-                    </a>
-                  </li>
-                </ul>
                 </li>
               </ul>
               <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <circle cx="10" cy="10" r="7" />
-                      <line x1="21" y1="21" x2="15" y2="15" />
-                    </svg>
                     </span>
                     <input type="text" class="form-control" placeholder="Search…">
                   </div>
@@ -584,12 +404,13 @@
             </div>
           </div>
         </div>
+      </div>
       <div class="content">
         <div class="container-xl">
           <!-- Page title -->
-          <div class="page-header">
+          <div class="page-header d-print-none">
             <div class="row align-items-center">
-              <div class="col-auto">
+              <div class="col">
                 <h2 class="page-title">
                   Carousel
                 </h2>
@@ -686,11 +507,11 @@
                     </div>
                     <a class="carousel-control-prev" href="#carousel-controls" role="button" data-slide="prev">
                       <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-                      <span class="sr-only">Previous</span>
+                      <span class="visually-hidden">Previous</span>
                     </a>
                     <a class="carousel-control-next" href="#carousel-controls" role="button" data-slide="next">
                       <span class="carousel-control-next-icon" aria-hidden="true"></span>
-                      <span class="sr-only">Next</span>
+                      <span class="visually-hidden">Next</span>
                     </a>
                   </div>
                 </div>
@@ -747,11 +568,11 @@
                     </div>
                     <a class="carousel-control-prev" href="#carousel-captions" role="button" data-slide="prev">
                       <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-                      <span class="sr-only">Previous</span>
+                      <span class="visually-hidden">Previous</span>
                     </a>
                     <a class="carousel-control-next" href="#carousel-captions" role="button" data-slide="next">
                       <span class="carousel-control-next-icon" aria-hidden="true"></span>
-                      <span class="sr-only">Next</span>
+                      <span class="visually-hidden">Next</span>
                     </a>
                   </div>
                 </div>
@@ -759,7 +580,7 @@
             </div>
           </div>
         </div>
-        <footer class="footer footer-transparent">
+        <footer class="footer footer-transparent d-print-none">
           <div class="container">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ml-lg-auto">
@@ -770,9 +591,16 @@
                 </ul>
               </div>
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item">
                     Copyright © 2020
                     <a href="." class="link-secondary">Tabler</a>.
                     All rights reserved.
+                  </li>
+                  <li class="list-inline-item">
+                    <a href="./changelog.html" class="link-secondary">v1.0.0-alpha.12</a>
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
@@ -781,7 +609,6 @@
     </div>
     <!-- Libs JS -->
     <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
     <script>

demo/changelog.html

@@ -1,11 +1,11 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.5
+* @version 1.0.0-alpha.12
-* @link https://github.com/tabler/tabler
+* @link https://tabler.io
-* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Copyright 2018-2020 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
   <head>
@@ -24,22 +24,10 @@
     <meta name="robots" content="noindex,nofollow,noarchive"/>
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
-    <!-- Libs CSS -->
+    <!-- CSS files -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
-    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
-    <!-- Tabler Core -->
     <link href="./dist/css/tabler.min.css" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
     <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
     <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css" rel="stylesheet"/>
     <link href="./dist/css/demo.min.css" rel="stylesheet"/>
     <style>
       body {
@@ -49,22 +37,18 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <header class="navbar navbar-expand-md navbar-light">
+      <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
           <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
             <span class="navbar-toggler-icon"></span>
           </button>
           <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-image">
+            <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
           </a>
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item dropdown d-none d-md-flex mr-3">
               <a href="#" class="nav-link px-0" data-toggle="dropdown" tabindex="-1">
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
-                  <path stroke="none" d="M0 0h24v24H0z"/>
-                  <path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" />
-                  <path d="M9 17v1a3 3 0 0 0 6 0v-1" />
-                </svg>
                 <span class="badge bg-red"></span>
               </a>
               <div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
@@ -77,54 +61,32 @@
             </div>
             <div class="nav-item dropdown">
               <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
+                <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
                 <div class="d-none d-xl-block pl-2">
                   <div>Paweł Kuna</div>
                   <div class="mt-1 small text-muted">UI Designer</div>
                 </div>
               </a>
-              <div class="dropdown-menu dropdown-menu-right">
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
+                <a href="#" class="dropdown-item">Set status</a>
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <a href="#" class="dropdown-item">Profile & account</a>
-                    <path stroke="none" d="M0 0h24v24H0z"/>
+                <a href="#" class="dropdown-item">Feedback</a>
-                    <path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-                    <circle cx="12" cy="12" r="3" />
-                  </svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                    <path stroke="none" d="M0 0h24v24H0z"/>
-                    <path d="M9 7 h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" />
-                    <path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" />
-                    <line x1="16" y1="5" x2="19" y2="8" />
-                  </svg>
-                  Another action
-                </a>
                 <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <a href="#" class="dropdown-item">Settings</a>
-                    <path stroke="none" d="M0 0h24v24H0z"/>
+                <a href="#" class="dropdown-item">Logout</a>
-                    <line x1="12" y1="5" x2="12" y2="19" />
-                    <line x1="5" y1="12" x2="19" y2="12" />
-                  </svg>
-                  Separated link</a>
               </div>
             </div>
           </div>
         </div>
       </header>
       <div class="navbar-expand-md">
-        <div class="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar navbar-light">
             <div class="container-xl">
               <ul class="navbar-nav">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="5 12 3 12 12 3 21 12 19 12" />
-                      <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
-                      <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Home
@@ -133,14 +95,7 @@
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" />
-                      <line x1="12" y1="12" x2="20" y2="7.5" />
-                      <line x1="12" y1="12" x2="12" y2="21" />
-                      <line x1="12" y1="12" x2="4" y2="7.5" />
-                      <line x1="16" y1="5.25" x2="8" y2="9.75" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       User Interface
@@ -167,11 +122,21 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./cards-masonry.html" >
+                        Cards Masonry
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./dropdowns.html" >
                         Dropdowns
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./icons.html" >
+                        Icons
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./modals.html" >
                         Modals
@@ -197,6 +162,26 @@
                         Charts
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts-heatmap.html" >
+                        Charts heatmap
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./skeleton.html" >
+                        Skeleton
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./tabs.html" >
+                        Tabs
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./tables.html" >
                         Tables
@@ -217,6 +202,16 @@
                         Lists
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./typography.html" >
+                        Typography
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./markdown.html" >
+                        Markdown
+                      </a>
+                    </li>
                     <li class="dropright">
                       <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
                         Authentication
@@ -233,24 +228,16 @@
                         Error pages
                       </a>
                       <div class="dropdown-menu">
-                      <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./error-404.html" class="dropdown-item">404 page</a>
-                      <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./error-500.html" class="dropdown-item">500 page</a>
-                      <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./error-maintenance.html" class="dropdown-item">Maintenance page</a>
-                      <a href="./404.html" class="dropdown-item">404 page</a>
-                      <a href="./500.html" class="dropdown-item">500 page</a>
-                      <a href="./503.html" class="dropdown-item">503 page</a>
-                      <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
                       </div>
                     </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="9 11 12 14 20 6" />
-                      <path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Form elements
@@ -259,10 +246,7 @@
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Extra
@@ -304,6 +288,11 @@
                         Gallery
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./license.html" >
+                        License
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./profile.html" >
                         Profile
@@ -314,17 +303,16 @@
                         Music
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./welcome.html" >
+                        Welcome
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <rect x="4" y="4" width="6" height="5" rx="2" />
-                      <rect x="4" y="13" width="6" height="7" rx="2" />
-                      <rect x="14" y="4" width="6" height="7" rx="2" />
-                      <rect x="14" y="15" width="6" height="5" rx="2" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Layout
@@ -366,11 +354,21 @@
                         Navbar dark
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-navbar-overlap.html" >
+                        Navbar overlap
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./layout-dark.html" >
                         Dark mode
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-rtl.html" >
+                        RTL mode
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./layout-fluid.html" >
                         Fluid
@@ -383,199 +381,21 @@
                     </li>
                   </ul>
                 </li>
-              <li class="nav-item dropdown">
+                <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link" href="./docs/index.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="14 3 14 8 19 8" />
-                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
-                      <line x1="9" y1="9" x2="10" y2="9" />
-                      <line x1="9" y1="13" x2="15" y2="13" />
-                      <line x1="9" y1="17" x2="15" y2="17" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
-                    Docs
+                      Documentation
                     </span>
                   </a>
-                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-3">
-                  <li >
-                    <a class="dropdown-item" href="./docs/index.html" >
-                      Introduction
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/alerts.html" >
-                      Alerts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/autosize.html" >
-                      Autosize
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/avatars.html" >
-                      Avatars
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/badges.html" >
-                      Badges
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/breadcrumb.html" >
-                      Breadcrumb
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/buttons.html" >
-                      Buttons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/cards.html" >
-                      Cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/carousel.html" >
-                      Carousel
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/colors.html" >
-                      Colors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/countup.html" >
-                      Countup
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/cursors.html" >
-                      Cursors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/charts.html" >
-                      Charts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/dropdowns.html" >
-                      Dropdowns
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/divider.html" >
-                      Divider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/empty.html" >
-                      Empty states
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/flags.html" >
-                      Flags
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/form-elements.html" >
-                      Form elements
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/form-helpers.html" >
-                      Form helpers
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/input-mask.html" >
-                      Form input mask
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/modals.html" >
-                      Modals
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/progress.html" >
-                      Progress
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/payments.html" >
-                      Payments
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/range-slider.html" >
-                      Range slider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/ribbons.html" >
-                      Ribbons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/spinners.html" >
-                      Spinners
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/steps.html" >
-                      Steps
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/tables.html" >
-                      Tables
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/tabs.html" >
-                      Tabs
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/timelines.html" >
-                      Timelines
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/toasts.html" >
-                      Toasts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/tooltips.html" >
-                      Tooltips
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/typography.html" >
-                      Typography
-                    </a>
-                  </li>
-                </ul>
                 </li>
               </ul>
               <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <circle cx="10" cy="10" r="7" />
-                      <line x1="21" y1="21" x2="15" y2="15" />
-                    </svg>
                     </span>
                     <input type="text" class="form-control" placeholder="Search…">
                   </div>
@@ -584,24 +404,263 @@
             </div>
           </div>
         </div>
+      </div>
       <div class="content">
         <div class="container-xl">
           <!-- Page title -->
-          <div class="page-header">
+          <div class="page-header d-print-none">
             <div class="row align-items-center">
-              <div class="col-auto">
+              <div class="col">
                 <h2 class="page-title">
-                  Changelog
+                  Documentation
                 </h2>
               </div>
             </div>
           </div>
+          <div class="row g-5">
+            <div class="d-none d-lg-block col-lg-3">
+              <ul class="nav nav-pills nav-vertical">
+                <li class="nav-item">
+                  <a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
+                    </span>
+                    Getting started
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav collapse" id="menu-base">
+                    <li class="nav-item">
+                      <a href="./docs/index.html" class="nav-link">
+                        Introduction
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="./docs/colors.html" class="nav-link">
+                        Colors
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="./docs/typography.html" class="nav-link">
+                        Typography
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="./docs/icons.html" class="nav-link">
+                        Icons
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="false">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
+                    </span>
+                    Components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav collapse" id="menu-components">
+                    <li class="nav-item">
+                      <a href="./docs/alerts.html" class="nav-link">
+                        Alerts
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="./docs/avatars.html" class="nav-link">
+                        Avatars
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="./docs/badges.html" class="nav-link">
+                        Badges
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="./docs/breadcrumb.html" class="nav-link">
+                        Breadcrumb
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="./docs/buttons.html" class="nav-link">
+                        Buttons
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="./docs/cards.html" class="nav-link">
+                        Cards
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="./docs/carousel.html" class="nav-link">
+                        Carousel
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="./docs/dropdowns.html" class="nav-link">
+                        Dropdowns
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="./docs/divider.html" class="nav-link">
+                        Divider
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="./docs/empty.html" class="nav-link">
+                        Empty states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="./docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="./docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="./docs/modals.html" class="nav-link">
+                        Modals
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="./docs/progress.html" class="nav-link">
+                        Progress
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="./docs/payments.html" class="nav-link">
+                        Payments
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="./docs/range-slider.html" class="nav-link">
+                        Range slider
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="./docs/ribbons.html" class="nav-link">
+                        Ribbons
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="./docs/skeleton.html" class="nav-link">
+                        Skeleton
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="./docs/spinners.html" class="nav-link">
+                        Spinners
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="./docs/steps.html" class="nav-link">
+                        Steps
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="./docs/switch-icon.html" class="nav-link">
+                        Switch icon
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="./docs/tables.html" class="nav-link">
+                        Tables
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="./docs/tabs.html" class="nav-link">
+                        Tabs
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="./docs/timelines.html" class="nav-link">
+                        Timelines
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="./docs/toasts.html" class="nav-link">
+                        Toasts
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="./docs/tooltips.html" class="nav-link">
+                        Tooltips
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
+                    </span>
+                    Utilities
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="./docs/cursors.html" class="nav-link">
+                        Cursors
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
+                    </span>
+                    Plugins
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav collapse" id="menu-plugins">
+                    <li class="nav-item">
+                      <a href="./docs/autosize.html" class="nav-link">
+                        Autosize
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="./docs/input-mask.html" class="nav-link">
+                        Form input mask
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="./docs/flags.html" class="nav-link">
+                        Flags
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="./docs/charts.html" class="nav-link">
+                        Charts
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="./changelog.html" class="nav-link active">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
+                    </span>
+                    Changelog
+                    <span class="badge bg-blue-lt ml-auto">1.0.0-alpha.12</span>
+                  </a>
+                </li>
+              </ul>
+            </div>
+            <div class="col-lg-9">
               <div class="card card-lg">
-            <div class="card-body markdown">
+                <div class="card-body">
+                  <div class="markdown">
+                    <div class="mb-5">
+                      <div class="d-flex mb-3">
+                        <h1 class="mt-0">Changelog</h1>
                       </div>
                     </div>
                   </div>
-        <footer class="footer footer-transparent">
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <footer class="footer footer-transparent d-print-none">
           <div class="container">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ml-lg-auto">
@@ -612,9 +671,16 @@
                 </ul>
               </div>
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item">
                     Copyright © 2020
                     <a href="." class="link-secondary">Tabler</a>.
                     All rights reserved.
+                  </li>
+                  <li class="list-inline-item">
+                    <a href="./changelog.html" class="link-secondary">v1.0.0-alpha.12</a>
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
@@ -623,7 +689,6 @@
     </div>
     <!-- Libs JS -->
     <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
     <script>

demo/charts-heatmap.html

@@ -1,11 +1,11 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.5
+* @version 1.0.0-alpha.12
-* @link https://github.com/tabler/tabler
+* @link https://tabler.io
-* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Copyright 2018-2020 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
   <head>
@@ -24,22 +24,10 @@
     <meta name="robots" content="noindex,nofollow,noarchive"/>
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
-    <!-- Libs CSS -->
+    <!-- CSS files -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
-    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
-    <!-- Tabler Core -->
     <link href="./dist/css/tabler.min.css" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
     <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
     <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css" rel="stylesheet"/>
     <link href="./dist/css/demo.min.css" rel="stylesheet"/>
     <style>
       body {
@@ -49,22 +37,18 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <header class="navbar navbar-expand-md navbar-light">
+      <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
           <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
             <span class="navbar-toggler-icon"></span>
           </button>
           <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-image">
+            <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
           </a>
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item dropdown d-none d-md-flex mr-3">
               <a href="#" class="nav-link px-0" data-toggle="dropdown" tabindex="-1">
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
-                  <path stroke="none" d="M0 0h24v24H0z"/>
-                  <path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" />
-                  <path d="M9 17v1a3 3 0 0 0 6 0v-1" />
-                </svg>
                 <span class="badge bg-red"></span>
               </a>
               <div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
@@ -77,54 +61,32 @@
             </div>
             <div class="nav-item dropdown">
               <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
+                <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
                 <div class="d-none d-xl-block pl-2">
                   <div>Paweł Kuna</div>
                   <div class="mt-1 small text-muted">UI Designer</div>
                 </div>
               </a>
-              <div class="dropdown-menu dropdown-menu-right">
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
+                <a href="#" class="dropdown-item">Set status</a>
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <a href="#" class="dropdown-item">Profile & account</a>
-                    <path stroke="none" d="M0 0h24v24H0z"/>
+                <a href="#" class="dropdown-item">Feedback</a>
-                    <path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-                    <circle cx="12" cy="12" r="3" />
-                  </svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                    <path stroke="none" d="M0 0h24v24H0z"/>
-                    <path d="M9 7 h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" />
-                    <path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" />
-                    <line x1="16" y1="5" x2="19" y2="8" />
-                  </svg>
-                  Another action
-                </a>
                 <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <a href="#" class="dropdown-item">Settings</a>
-                    <path stroke="none" d="M0 0h24v24H0z"/>
+                <a href="#" class="dropdown-item">Logout</a>
-                    <line x1="12" y1="5" x2="12" y2="19" />
-                    <line x1="5" y1="12" x2="19" y2="12" />
-                  </svg>
-                  Separated link</a>
               </div>
             </div>
           </div>
         </div>
       </header>
       <div class="navbar-expand-md">
-        <div class="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar navbar-light">
             <div class="container-xl">
               <ul class="navbar-nav">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="5 12 3 12 12 3 21 12 19 12" />
-                      <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
-                      <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Home
@@ -133,14 +95,7 @@
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" />
-                      <line x1="12" y1="12" x2="20" y2="7.5" />
-                      <line x1="12" y1="12" x2="12" y2="21" />
-                      <line x1="12" y1="12" x2="4" y2="7.5" />
-                      <line x1="16" y1="5.25" x2="8" y2="9.75" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       User Interface
@@ -167,11 +122,21 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./cards-masonry.html" >
+                        Cards Masonry
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./dropdowns.html" >
                         Dropdowns
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./icons.html" >
+                        Icons
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./modals.html" >
                         Modals
@@ -197,6 +162,26 @@
                         Charts
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts-heatmap.html" >
+                        Charts heatmap
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./skeleton.html" >
+                        Skeleton
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./tabs.html" >
+                        Tabs
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./tables.html" >
                         Tables
@@ -217,6 +202,16 @@
                         Lists
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./typography.html" >
+                        Typography
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./markdown.html" >
+                        Markdown
+                      </a>
+                    </li>
                     <li class="dropright">
                       <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
                         Authentication
@@ -233,24 +228,16 @@
                         Error pages
                       </a>
                       <div class="dropdown-menu">
-                      <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./error-404.html" class="dropdown-item">404 page</a>
-                      <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./error-500.html" class="dropdown-item">500 page</a>
-                      <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./error-maintenance.html" class="dropdown-item">Maintenance page</a>
-                      <a href="./404.html" class="dropdown-item">404 page</a>
-                      <a href="./500.html" class="dropdown-item">500 page</a>
-                      <a href="./503.html" class="dropdown-item">503 page</a>
-                      <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
                       </div>
                     </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="9 11 12 14 20 6" />
-                      <path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Form elements
@@ -259,10 +246,7 @@
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Extra
@@ -304,6 +288,11 @@
                         Gallery
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./license.html" >
+                        License
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./profile.html" >
                         Profile
@@ -314,17 +303,16 @@
                         Music
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./welcome.html" >
+                        Welcome
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <rect x="4" y="4" width="6" height="5" rx="2" />
-                      <rect x="4" y="13" width="6" height="7" rx="2" />
-                      <rect x="14" y="4" width="6" height="7" rx="2" />
-                      <rect x="14" y="15" width="6" height="5" rx="2" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Layout
@@ -366,11 +354,21 @@
                         Navbar dark
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-navbar-overlap.html" >
+                        Navbar overlap
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./layout-dark.html" >
                         Dark mode
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-rtl.html" >
+                        RTL mode
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./layout-fluid.html" >
                         Fluid
@@ -383,199 +381,21 @@
                     </li>
                   </ul>
                 </li>
-              <li class="nav-item dropdown">
+                <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link" href="./docs/index.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="14 3 14 8 19 8" />
-                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
-                      <line x1="9" y1="9" x2="10" y2="9" />
-                      <line x1="9" y1="13" x2="15" y2="13" />
-                      <line x1="9" y1="17" x2="15" y2="17" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
-                    Docs
+                      Documentation
                     </span>
                   </a>
-                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-3">
-                  <li >
-                    <a class="dropdown-item" href="./docs/index.html" >
-                      Introduction
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/alerts.html" >
-                      Alerts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/autosize.html" >
-                      Autosize
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/avatars.html" >
-                      Avatars
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/badges.html" >
-                      Badges
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/breadcrumb.html" >
-                      Breadcrumb
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/buttons.html" >
-                      Buttons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/cards.html" >
-                      Cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/carousel.html" >
-                      Carousel
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/colors.html" >
-                      Colors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/countup.html" >
-                      Countup
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/cursors.html" >
-                      Cursors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/charts.html" >
-                      Charts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/dropdowns.html" >
-                      Dropdowns
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/divider.html" >
-                      Divider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/empty.html" >
-                      Empty states
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/flags.html" >
-                      Flags
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/form-elements.html" >
-                      Form elements
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/form-helpers.html" >
-                      Form helpers
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/input-mask.html" >
-                      Form input mask
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/modals.html" >
-                      Modals
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/progress.html" >
-                      Progress
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/payments.html" >
-                      Payments
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/range-slider.html" >
-                      Range slider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/ribbons.html" >
-                      Ribbons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/spinners.html" >
-                      Spinners
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/steps.html" >
-                      Steps
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/tables.html" >
-                      Tables
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/tabs.html" >
-                      Tabs
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/timelines.html" >
-                      Timelines
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/toasts.html" >
-                      Toasts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/tooltips.html" >
-                      Tooltips
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/typography.html" >
-                      Typography
-                    </a>
-                  </li>
-                </ul>
                 </li>
               </ul>
               <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <circle cx="10" cy="10" r="7" />
-                      <line x1="21" y1="21" x2="15" y2="15" />
-                    </svg>
                     </span>
                     <input type="text" class="form-control" placeholder="Search…">
                   </div>
@@ -584,128 +404,86 @@
             </div>
           </div>
         </div>
+      </div>
       <div class="content">
         <div class="container-xl">
           <!-- Page title -->
-          <div class="page-header">
+          <div class="page-header d-print-none">
             <div class="row align-items-center">
-              <div class="col-auto">
+              <div class="col">
                 <h2 class="page-title">
                   Heatmap Charts
                 </h2>
               </div>
             </div>
           </div>
-          <div class="row">
+          <div class="row row-cards">
             <div class="col-xl-6">
               <div class="card">
                 <div class="card-body">
                   <h4 class="card-title">Basic Heatmap - Single Series</h4>
-                  <div id="heatmap-basic" class="chart"></div>
+                  <div id="chart-heatmap-basic"></div>
                 </div>
               </div>
-              <script>
-                var generateData = function() {
-                	var data = [],
-                		min = 0,
-                		max = 100,
-                		count = 15;
-                	for (var n = 0; n < count; n++) {
-                		data.push({
-                			x: (n + 1).toString(),
-                			y: Math.floor(Math.random() * (max - min + 1)) + min
-                		});
-                	}
-                	return data;
-                };
-                var options = {
-                	chart: {
-                		height: 400,
-                		type: "heatmap"
-                	},
-                	dataLabels: {
-                		enabled: false
-                	},
-                	colors: [tabler.colors.blue, ],
-                	series: [
-                		{ name: "Jan", data: generateData() },
-                		{ name: "Feb", data: generateData() },
-                		{ name: "Mar", data: generateData() },
-                		{ name: "Apr", data: generateData() },
-                		{ name: "May", data: generateData() },
-                		{ name: "Jun", data: generateData() },
-                		{ name: "Jul", data: generateData() },
-                		{ name: "Aug", data: generateData() },
-                		{ name: "Sep", data: generateData() },
-                		{ name: "Oct", data: generateData() },
-                		{ name: "Nov", data: generateData() },
-                		{ name: "Dec", data: generateData() },
-                	],
-                	xaxis: {
-                		type: "category"
-                	}
-                };
-                (new ApexCharts(document.querySelector("#heatmap-basic"),options)).render();
-              </script>
             </div>
             <div class="col-xl-6">
               <div class="card">
                 <div class="card-body">
                   <h4 class="card-title">Heatmap - Multiple series</h4>
-                  <div id="heatmap-multiple" class="chart"></div>
+                  <div id="chart-heatmap-multiple"></div>
                 </div>
               </div>
-              <script>
-                var generateData = function() {
-                	var data = [],
-                		min = 0,
-                		max = 100,
-                		count = 15;
-                	for (var n = 0; n < count; n++) {
-                		data.push({
-                			x: (n + 1).toString(),
-                			y: Math.floor(Math.random() * (max - min + 1)) + min
-                		});
-                	}
-                	return data;
-                };
-                var options = {
-                	chart: {
-                		height: 400,
-                		type: "heatmap"
-                	},
-                	dataLabels: {
-                		enabled: false
-                	},
-                	colors: [tabler.colors.blue, tabler.colors.azure, tabler.colors.indigo, tabler.colors.purple, tabler.colors.pink, tabler.colors.red, tabler.colors.orange, tabler.colors.yellow, tabler.colors.lime, tabler.colors.green, tabler.colors.teal, tabler.colors.cyan, ],
-                	series: [
-                		{ name: "Jan", data: generateData() },
-                		{ name: "Feb", data: generateData() },
-                		{ name: "Mar", data: generateData() },
-                		{ name: "Apr", data: generateData() },
-                		{ name: "May", data: generateData() },
-                		{ name: "Jun", data: generateData() },
-                		{ name: "Jul", data: generateData() },
-                		{ name: "Aug", data: generateData() },
-                		{ name: "Sep", data: generateData() },
-                		{ name: "Oct", data: generateData() },
-                		{ name: "Nov", data: generateData() },
-                		{ name: "Dec", data: generateData() },
-                	],
-                	xaxis: {
-                		type: "category"
-                	}
-                };
-                (new ApexCharts(document.querySelector("#heatmap-multiple"),options)).render();
-              </script>
             </div>
             <div class="col-xl-6">
               <div class="card">
                 <div class="card-body">
                   <h4 class="card-title">Heatmap - Labels included</h4>
-                  <div id="heatmap-labels" class="chart"></div>
+                  <div id="chart-heatmap-labels"></div>
                 </div>
               </div>
+            </div>
+            <div class="col-xl-6">
+              <div class="card">
+                <div class="card-body">
+                  <h4 class="card-title">Heatmap - Color range</h4>
+                  <div id="chart-heatmap-colors"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <footer class="footer footer-transparent d-print-none">
+          <div class="container">
+            <div class="row text-center align-items-center flex-row-reverse">
+              <div class="col-lg-auto ml-lg-auto">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li>
+                  <li class="list-inline-item"><a href="./faq.html" class="link-secondary">FAQ</a></li>
+                  <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
+                </ul>
+              </div>
+              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item">
+                    Copyright © 2020
+                    <a href="." class="link-secondary">Tabler</a>.
+                    All rights reserved.
+                  </li>
+                  <li class="list-inline-item">
+                    <a href="./changelog.html" class="link-secondary">v1.0.0-alpha.12</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="./dist/libs/apexcharts/dist/apexcharts.min.js"></script>
+    <!-- Tabler Core -->
+    <script src="./dist/js/tabler.min.js"></script>
     <script>
       var generateData = function() {
       	var data = [],
@@ -723,12 +501,15 @@
       var options = {
       	chart: {
       		height: 400,
-                		type: "heatmap"
+      		type: "heatmap",
+      		toolbar: {
+      			show: false,
+      		},
       	},
       	dataLabels: {
-                		enabled: true
+      		enabled: false
       	},
-                	colors: [tabler.colors.blue, ],
+      	colors: ["#206bc4", ],
       	series: [
       		{ name: "Jan", data: generateData() },
       		{ name: "Feb", data: generateData() },
@@ -747,16 +528,8 @@
       		type: "category"
       	}
       };
-                (new ApexCharts(document.querySelector("#heatmap-labels"),options)).render();
+      (new ApexCharts(document.querySelector("#chart-heatmap-basic"),options)).render();
     </script>
-            </div>
-            <div class="col-xl-6">
-              <div class="card">
-                <div class="card-body">
-                  <h4 class="card-title">Heatmap - Color range</h4>
-                  <div id="heatmap-colors" class="chart"></div>
-                </div>
-              </div>
     <script>
       var generateData = function() {
       	var data = [],
@@ -774,7 +547,102 @@
       var options = {
       	chart: {
       		height: 400,
-                		type: "heatmap"
+      		type: "heatmap",
+      		toolbar: {
+      			show: false,
+      		},
+      	},
+      	dataLabels: {
+      		enabled: false
+      	},
+      	colors: ["#206bc4", "#45aaf2", "#6574cd", "#a55eea", "#f66d9b", "#cd201f", "#ff922b", "#fab005", "#94d82d", "#5eba00", "#2bcbba", "#17a2b8", ],
+      	series: [
+      		{ name: "Jan", data: generateData() },
+      		{ name: "Feb", data: generateData() },
+      		{ name: "Mar", data: generateData() },
+      		{ name: "Apr", data: generateData() },
+      		{ name: "May", data: generateData() },
+      		{ name: "Jun", data: generateData() },
+      		{ name: "Jul", data: generateData() },
+      		{ name: "Aug", data: generateData() },
+      		{ name: "Sep", data: generateData() },
+      		{ name: "Oct", data: generateData() },
+      		{ name: "Nov", data: generateData() },
+      		{ name: "Dec", data: generateData() },
+      	],
+      	xaxis: {
+      		type: "category"
+      	}
+      };
+      (new ApexCharts(document.querySelector("#chart-heatmap-multiple"),options)).render();
+    </script>
+    <script>
+      var generateData = function() {
+      	var data = [],
+      		min = 0,
+      		max = 100,
+      		count = 15;
+      	for (var n = 0; n < count; n++) {
+      		data.push({
+      			x: (n + 1).toString(),
+      			y: Math.floor(Math.random() * (max - min + 1)) + min
+      		});
+      	}
+      	return data;
+      };
+      var options = {
+      	chart: {
+      		height: 400,
+      		type: "heatmap",
+      		toolbar: {
+      			show: false,
+      		},
+      	},
+      	dataLabels: {
+      		enabled: true
+      	},
+      	colors: ["#206bc4", ],
+      	series: [
+      		{ name: "Jan", data: generateData() },
+      		{ name: "Feb", data: generateData() },
+      		{ name: "Mar", data: generateData() },
+      		{ name: "Apr", data: generateData() },
+      		{ name: "May", data: generateData() },
+      		{ name: "Jun", data: generateData() },
+      		{ name: "Jul", data: generateData() },
+      		{ name: "Aug", data: generateData() },
+      		{ name: "Sep", data: generateData() },
+      		{ name: "Oct", data: generateData() },
+      		{ name: "Nov", data: generateData() },
+      		{ name: "Dec", data: generateData() },
+      	],
+      	xaxis: {
+      		type: "category"
+      	}
+      };
+      (new ApexCharts(document.querySelector("#chart-heatmap-labels"),options)).render();
+    </script>
+    <script>
+      var generateData = function() {
+      	var data = [],
+      		min = 0,
+      		max = 100,
+      		count = 15;
+      	for (var n = 0; n < count; n++) {
+      		data.push({
+      			x: (n + 1).toString(),
+      			y: Math.floor(Math.random() * (max - min + 1)) + min
+      		});
+      	}
+      	return data;
+      };
+      var options = {
+      	chart: {
+      		height: 400,
+      		type: "heatmap",
+      		toolbar: {
+      			show: false,
+      		},
       	},
       	dataLabels: {
       		enabled: false
@@ -787,22 +655,22 @@
       					from: 0,
       					to: 20,
       					name: "Low",
-                					color: tabler.colors.green
+      					color: "#5eba00"
       				}, {
       					from: 21,
       					to: 50,
       					name: "Medium",
-                					color: tabler.colors.blue
+      					color: "#206bc4"
       				}, {
       					from: 51,
       					to: 75,
       					name: "High",
-                					color: tabler.colors.yellow
+      					color: "#fab005"
       				}, {
       					from: 76,
       					to: 100,
       					name: "Extreme",
-                					color: tabler.colors.red
+      					color: "#cd201f"
       				}]
       			}
       		}
@@ -825,36 +693,8 @@
       		type: "category"
       	}
       };
-                (new ApexCharts(document.querySelector("#heatmap-colors"),options)).render();
+      (new ApexCharts(document.querySelector("#chart-heatmap-colors"),options)).render();
     </script>
-            </div>
-          </div>
-        </div>
-        <footer class="footer footer-transparent">
-          <div class="container">
-            <div class="row text-center align-items-center flex-row-reverse">
-              <div class="col-lg-auto ml-lg-auto">
-                <ul class="list-inline list-inline-dots mb-0">
-                  <li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li>
-                  <li class="list-inline-item"><a href="./faq.html" class="link-secondary">FAQ</a></li>
-                  <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
-                </ul>
-              </div>
-              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
-                Copyright © 2020
-                <a href="." class="link-secondary">Tabler</a>.
-                All rights reserved.
-              </div>
-            </div>
-          </div>
-        </footer>
-      </div>
-    </div>
-    <!-- Libs JS -->
-    <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
-    <!-- Tabler Core -->
-    <script src="./dist/js/tabler.min.js"></script>
     <script>
       document.body.style.display = "block"
     </script>

demo/components.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-  <meta charset="utf-8">
-  <title>Redirecting…</title>
-  <link rel="canonical" href="..">
-  <meta http-equiv="refresh" content="0; url=..">
-  <meta name="robots" content="noindex">
-  <noscript><a href="..">Click here if you are not redirected.</a></noscript>
-  <script>
-    location="..";
-  </script>
-</html>

demo/components/index.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-  <meta charset="utf-8">
-  <title>Redirecting…</title>
-  <link rel="canonical" href="../components.html">
-  <meta http-equiv="refresh" content="0; url=../components.html">
-  <meta name="robots" content="noindex">
-  <noscript><a href="../components.html">Click here if you are not redirected.</a></noscript>
-  <script>
-    location="../components.html";
-  </script>
-</html>

demo/crypto-currencies.html

@@ -1,11 +1,11 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.5
+* @version 1.0.0-alpha.12
-* @link https://github.com/tabler/tabler
+* @link https://tabler.io
-* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Copyright 2018-2020 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
   <head>
@@ -24,22 +24,10 @@
     <meta name="robots" content="noindex,nofollow,noarchive"/>
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
-    <!-- Libs CSS -->
+    <!-- CSS files -->
-    <link href="./dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/core/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/daygrid/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/timegrid/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/fullcalendar/list/main.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
-    <link href="./dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
-    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
-    <!-- Tabler Core -->
     <link href="./dist/css/tabler.min.css" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
     <link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
     <link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
-    <link href="./dist/css/tabler-buttons.min.css" rel="stylesheet"/>
     <link href="./dist/css/demo.min.css" rel="stylesheet"/>
     <style>
       body {
@@ -49,22 +37,18 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <header class="navbar navbar-expand-md navbar-light">
+      <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
           <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
             <span class="navbar-toggler-icon"></span>
           </button>
           <a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3">
-            <img src="./static/logo.svg" alt="Tabler" class="navbar-brand-image">
+            <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
           </a>
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item dropdown d-none d-md-flex mr-3">
               <a href="#" class="nav-link px-0" data-toggle="dropdown" tabindex="-1">
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
-                  <path stroke="none" d="M0 0h24v24H0z"/>
-                  <path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" />
-                  <path d="M9 17v1a3 3 0 0 0 6 0v-1" />
-                </svg>
                 <span class="badge bg-red"></span>
               </a>
               <div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
@@ -77,54 +61,32 @@
             </div>
             <div class="nav-item dropdown">
               <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
+                <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
                 <div class="d-none d-xl-block pl-2">
                   <div>Paweł Kuna</div>
                   <div class="mt-1 small text-muted">UI Designer</div>
                 </div>
               </a>
-              <div class="dropdown-menu dropdown-menu-right">
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
+                <a href="#" class="dropdown-item">Set status</a>
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <a href="#" class="dropdown-item">Profile & account</a>
-                    <path stroke="none" d="M0 0h24v24H0z"/>
+                <a href="#" class="dropdown-item">Feedback</a>
-                    <path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-                    <circle cx="12" cy="12" r="3" />
-                  </svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                    <path stroke="none" d="M0 0h24v24H0z"/>
-                    <path d="M9 7 h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" />
-                    <path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" />
-                    <line x1="16" y1="5" x2="19" y2="8" />
-                  </svg>
-                  Another action
-                </a>
                 <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <a href="#" class="dropdown-item">Settings</a>
-                    <path stroke="none" d="M0 0h24v24H0z"/>
+                <a href="#" class="dropdown-item">Logout</a>
-                    <line x1="12" y1="5" x2="12" y2="19" />
-                    <line x1="5" y1="12" x2="19" y2="12" />
-                  </svg>
-                  Separated link</a>
               </div>
             </div>
           </div>
         </div>
       </header>
       <div class="navbar-expand-md">
-        <div class="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar navbar-light">
             <div class="container-xl">
               <ul class="navbar-nav">
                 <li class="nav-item">
                   <a class="nav-link" href="./index.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="5 12 3 12 12 3 21 12 19 12" />
-                      <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
-                      <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Home
@@ -133,14 +95,7 @@
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" />
-                      <line x1="12" y1="12" x2="20" y2="7.5" />
-                      <line x1="12" y1="12" x2="12" y2="21" />
-                      <line x1="12" y1="12" x2="4" y2="7.5" />
-                      <line x1="16" y1="5.25" x2="8" y2="9.75" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       User Interface
@@ -167,11 +122,21 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./cards-masonry.html" >
+                        Cards Masonry
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./dropdowns.html" >
                         Dropdowns
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./icons.html" >
+                        Icons
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./modals.html" >
                         Modals
@@ -197,6 +162,26 @@
                         Charts
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./charts-heatmap.html" >
+                        Charts heatmap
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./skeleton.html" >
+                        Skeleton
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./tabs.html" >
+                        Tabs
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./tables.html" >
                         Tables
@@ -217,6 +202,16 @@
                         Lists
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./typography.html" >
+                        Typography
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="./markdown.html" >
+                        Markdown
+                      </a>
+                    </li>
                     <li class="dropright">
                       <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
                         Authentication
@@ -233,24 +228,16 @@
                         Error pages
                       </a>
                       <div class="dropdown-menu">
-                      <a href="./400.html" class="dropdown-item">400 page</a>
+                        <a href="./error-404.html" class="dropdown-item">404 page</a>
-                      <a href="./401.html" class="dropdown-item">401 page</a>
+                        <a href="./error-500.html" class="dropdown-item">500 page</a>
-                      <a href="./403.html" class="dropdown-item">403 page</a>
+                        <a href="./error-maintenance.html" class="dropdown-item">Maintenance page</a>
-                      <a href="./404.html" class="dropdown-item">404 page</a>
-                      <a href="./500.html" class="dropdown-item">500 page</a>
-                      <a href="./503.html" class="dropdown-item">503 page</a>
-                      <a href="./maintenance.html" class="dropdown-item">Maintenance page</a>
                       </div>
                     </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a class="nav-link" href="./form-elements.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="9 11 12 14 20 6" />
-                      <path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Form elements
@@ -259,10 +246,7 @@
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Extra
@@ -304,6 +288,11 @@
                         Gallery
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./license.html" >
+                        License
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./profile.html" >
                         Profile
@@ -314,17 +303,16 @@
                         Music
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./welcome.html" >
+                        Welcome
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <rect x="4" y="4" width="6" height="5" rx="2" />
-                      <rect x="4" y="13" width="6" height="7" rx="2" />
-                      <rect x="14" y="4" width="6" height="7" rx="2" />
-                      <rect x="14" y="15" width="6" height="5" rx="2" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Layout
@@ -366,11 +354,21 @@
                         Navbar dark
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-navbar-overlap.html" >
+                        Navbar overlap
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./layout-dark.html" >
                         Dark mode
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./layout-rtl.html" >
+                        RTL mode
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./layout-fluid.html" >
                         Fluid
@@ -383,199 +381,21 @@
                     </li>
                   </ul>
                 </li>
-              <li class="nav-item dropdown">
+                <li class="nav-item">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link" href="./docs/index.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="14 3 14 8 19 8" />
-                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
-                      <line x1="9" y1="9" x2="10" y2="9" />
-                      <line x1="9" y1="13" x2="15" y2="13" />
-                      <line x1="9" y1="17" x2="15" y2="17" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
-                    Docs
+                      Documentation
                     </span>
                   </a>
-                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-3">
-                  <li >
-                    <a class="dropdown-item" href="./docs/index.html" >
-                      Introduction
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/alerts.html" >
-                      Alerts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/autosize.html" >
-                      Autosize
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/avatars.html" >
-                      Avatars
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/badges.html" >
-                      Badges
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/breadcrumb.html" >
-                      Breadcrumb
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/buttons.html" >
-                      Buttons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/cards.html" >
-                      Cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/carousel.html" >
-                      Carousel
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/colors.html" >
-                      Colors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/countup.html" >
-                      Countup
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/cursors.html" >
-                      Cursors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/charts.html" >
-                      Charts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/dropdowns.html" >
-                      Dropdowns
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/divider.html" >
-                      Divider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/empty.html" >
-                      Empty states
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/flags.html" >
-                      Flags
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/form-elements.html" >
-                      Form elements
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/form-helpers.html" >
-                      Form helpers
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/input-mask.html" >
-                      Form input mask
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/modals.html" >
-                      Modals
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/progress.html" >
-                      Progress
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/payments.html" >
-                      Payments
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/range-slider.html" >
-                      Range slider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/ribbons.html" >
-                      Ribbons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/spinners.html" >
-                      Spinners
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/steps.html" >
-                      Steps
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/tables.html" >
-                      Tables
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/tabs.html" >
-                      Tabs
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/timelines.html" >
-                      Timelines
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/toasts.html" >
-                      Toasts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/tooltips.html" >
-                      Tooltips
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="./docs/typography.html" >
-                      Typography
-                    </a>
-                  </li>
-                </ul>
                 </li>
               </ul>
               <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <circle cx="10" cy="10" r="7" />
-                      <line x1="21" y1="21" x2="15" y2="15" />
-                    </svg>
                     </span>
                     <input type="text" class="form-control" placeholder="Search…">
                   </div>
@@ -584,12 +404,13 @@
             </div>
           </div>
         </div>
+      </div>
       <div class="content">
         <div class="container-xl">
           <!-- Page title -->
-          <div class="page-header">
+          <div class="page-header d-print-none">
             <div class="row align-items-center">
-              <div class="col-auto">
+              <div class="col">
                 <h2 class="page-title">
                   Crypto currencies
                 </h2>
@@ -1813,7 +1634,7 @@
             </table>
           </div>
         </div>
-        <footer class="footer footer-transparent">
+        <footer class="footer footer-transparent d-print-none">
           <div class="container">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ml-lg-auto">
@@ -1824,9 +1645,16 @@
                 </ul>
               </div>
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item">
                     Copyright © 2020
                     <a href="." class="link-secondary">Tabler</a>.
                     All rights reserved.
+                  </li>
+                  <li class="list-inline-item">
+                    <a href="./changelog.html" class="link-secondary">v1.0.0-alpha.12</a>
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
@@ -1835,7 +1663,6 @@
     </div>
     <!-- Libs JS -->
     <script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="./dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
     <script>

demo/dist/css/demo.css

@@ -1,21 +1,18 @@
 /*!
- * Tabler (v1.0.0-alpha.5)
+* Tabler v1.0.0-alpha.12 (https://tabler.io)
- * Copyright 2018-2020 The Tabler Authors
+* @version 1.0.0-alpha.12
- * Copyright 2018-2020 codecalm
+* @link https://tabler.io
- * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+* Copyright 2018-2020 The Tabler Authors
- */
+* Copyright 2018-2020 codecalm.net Paweł Kuna
-/**
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
-Dark mode
+*/
- */
 pre.highlight,
 .highlight pre {
   max-height: 30rem;
   margin: 1.5rem 0;
   overflow: auto;
-  font-size: 0.625rem;
+  font-size: 85.7142857%;
-  background: #354052;
+  border-radius: 3px; }
-  border-radius: 3px;
-  color: #ffffff; }
   pre.highlight::-webkit-scrollbar,
   .highlight pre::-webkit-scrollbar {
     width: 6px;
@@ -25,37 +22,164 @@ pre.highlight,
   pre.highlight::-webkit-scrollbar-thumb,
   .highlight pre::-webkit-scrollbar-thumb {
     border-radius: 5px;
-    background: transparent; }
+    background: #dbdee3; }
   pre.highlight::-webkit-scrollbar-corner,
   .highlight pre::-webkit-scrollbar-corner {
     background: transparent; }
   pre.highlight:hover::-webkit-scrollbar-thumb,
   .highlight pre:hover::-webkit-scrollbar-thumb {
-    background: #cbcfd6;
+    background: #c6cad0;
-    background: #5d6675; }
+    background: #c6cad0; }
 
-.highlight .c, .highlight .c1 {
+.highlight {
-  color: #a0aec0; }
+  margin: 0; }
-
+  .highlight .dl {
-.highlight .na, .highlight .nx, .highlight .nl, .language-css .highlight .na, .language-scss .highlight .na {
+    color: #4070a0; }
-  color: #ffe484; }
+  .highlight .c {
-
+    color: #727272; }
-.highlight .s, .highlight .dl, .highlight .s1, .highlight .s2, .highlight .mh {
+  .highlight .c1 {
-  color: #b5f4a5; }
+    color: #727272; }
-
+  .highlight .ch {
-.highlight .mi, .highlight .language-js .nb, .highlight .nc, .highlight .nd, .highlight .nt {
+    font-style: italic;
-  color: #93ddfd; }
+    color: #60a0b0; }
-
+  .highlight .cm {
-.highlight .language-html .nt, .highlight .nb {
+    color: #727272; }
-  color: #ff8383; }
+  .highlight .cp {
-
+    color: #008085; }
-.highlight .k, .highlight .kd, .highlight .nv, .highlight .n {
+  .highlight .cpf {
-  color: #d9a9ff; }
+    color: #007020; }
+  .highlight .cs {
+    color: #727272; }
+  .highlight .gd {
+    background-color: #fcc;
+    border: 1px solid #c00; }
+  .highlight .ge {
+    font-style: italic; }
+  .highlight .gh {
+    color: #030; }
+  .highlight .gi {
+    background-color: #cfc;
+    border: 1px solid #0c0; }
+  .highlight .gl {
+    text-decoration: underline; }
+  .highlight .go {
+    color: #aaa; }
+  .highlight .gp {
+    color: #009; }
+  .highlight .gr {
+    color: #f00; }
+  .highlight .gs {
+    font-weight: 700; }
+  .highlight .gt {
+    color: #9c6; }
+  .highlight .gu {
+    color: #030; }
+  .highlight .il {
+    color: #c24f19; }
+  .highlight .k {
+    color: #069; }
+  .highlight .kc {
+    color: #069; }
+  .highlight .kd {
+    color: #069; }
+  .highlight .kn {
+    color: #069; }
+  .highlight .kp {
+    color: #069; }
+  .highlight .kr {
+    color: #069; }
+  .highlight .kt {
+    color: #078; }
+  .highlight .m {
+    color: #c24f19; }
+  .highlight .mf {
+    color: #c24f19; }
+  .highlight .mb {
+    color: #40a070; }
+  .highlight .mh {
+    color: #c24f19; }
+  .highlight .mi {
+    color: #c24f19; }
+  .highlight .mo {
+    color: #c24f19; }
+  .highlight .na {
+    color: #006ee0; }
+  .highlight .nb {
+    color: #366; }
+  .highlight .nc {
+    color: #168174; }
+  .highlight .nd {
+    color: #6b62de; }
+  .highlight .ne {
+    color: #c00; }
+  .highlight .nf {
+    color: #b715f4; }
+  .highlight .ni {
+    color: #727272; }
+  .highlight .nl {
+    color: #6b62de; }
+  .highlight .nn {
+    color: #007ca5; }
+  .highlight .no {
+    color: #360; }
+  .highlight .nt {
+    color: #2f6f9f; }
+  .highlight .nv {
+    color: #033; }
+  .highlight .o {
+    color: #555; }
+  .highlight .ow {
+    color: #000; }
+  .highlight .s {
+    color: #d73038; }
+  .highlight .s1 {
+    color: #c30; }
+  .highlight .s2 {
+    color: #c30; }
+  .highlight .sa {
+    color: #4070a0; }
+  .highlight .sb {
+    color: #c30; }
+  .highlight .sc {
+    color: #c30; }
+  .highlight .sd {
+    font-style: italic;
+    color: #c30; }
+  .highlight .se {
+    color: #c30; }
+  .highlight .sh {
+    color: #c30; }
+  .highlight .si {
+    color: #a00; }
+  .highlight .sr {
+    color: #337e7e; }
+  .highlight .ss {
+    color: #fc3; }
+  .highlight .sx {
+    color: #c30; }
+  .highlight .w {
+    color: #bbb; }
+  .highlight .language-bash::before, .highlight .language-sh::before {
+    color: #009;
+    content: "$ ";
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none; }
+  .highlight .language-bash .m, .highlight .language-sh .m {
+    color: inherit; }
+  .highlight .language-powershell::before {
+    color: #009;
+    content: "PM> ";
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none; }
 
 .example {
   padding: 2rem;
   margin: 2rem 0;
-  border: 1px solid rgba(110, 117, 130, 0.2);
+  border: 1px solid #e6e8e9;
   border-radius: 3px 3px 0 0;
   position: relative;
   min-height: 12rem;
@@ -70,14 +194,17 @@ pre.highlight,
 
 .example-content {
   font-size: 0.875rem;
+  line-height: 1.4285714;
+  color: #232e3c;
   flex: 1;
   max-width: 100%; }
 
 .example-bg {
-  background: #f5f7fb; }
+  background: #f4f6fa; }
 
 .example-code {
   margin: 2rem 0;
+  border: 1px solid #e6e8e9;
   border-top: none; }
   .example-code pre {
     margin: 0;
@@ -91,13 +218,13 @@ pre.highlight,
     margin-bottom: 0; }
 
 .example-column-1 {
-  max-width: 20rem; }
+  max-width: 26rem; }
 
 .example-column-2 {
-  max-width: 40rem; }
+  max-width: 52rem; }
 
 .example-modal-backdrop {
-  background: #354052;
+  background: #232e3c;
   opacity: 0.24;
   position: absolute;
   width: 100%;
@@ -108,12 +235,12 @@ pre.highlight,
 
 @media not print {
   .theme-dark .example-code {
-    border: 1px solid rgba(110, 117, 130, 0.2);
+    border: 1px solid #e6e8e9;
     border-top: none; } }
 
 @media not print and (prefers-color-scheme: dark) {
   .theme-dark-auto .example-code {
-    border: 1px solid rgba(110, 117, 130, 0.2);
+    border: 1px solid #e6e8e9;
     border-top: none; } }
 
 .card-sponsor {
@@ -124,20 +251,35 @@ pre.highlight,
 body.no-transitions * {
   transition: none !important; }
 
-.toc-entry:before {
-  content: '- '; }
-
-.toc-entry ul {
-  list-style: none;
-  padding-left: 1rem; }
-
-.toc-entry a {
-  color: #6e7582; }
-
 .dropdown-menu-demo {
   display: inline-block;
   width: 100%;
   position: relative;
   top: 0;
   margin-bottom: 1rem; }
-/*# sourceMappingURL=demo.css.map */
+
+.demo-icon-preview {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0; }
+  .demo-icon-preview svg,
+  .demo-icon-preview i {
+    width: 15rem;
+    height: 15rem;
+    font-size: 15rem;
+    stroke-width: 1.5;
+    margin: 0 auto;
+    display: block; }
+    @media (max-width: 575.98px) {
+      .demo-icon-preview svg,
+      .demo-icon-preview i {
+        width: 10rem;
+        height: 10rem;
+        font-size: 10rem; } }
+
+.demo-dividers > p {
+  opacity: .2;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none; }

demo/dist/css/demo.min.css

@@ -1,7 +1,9 @@
 /*!
- * Tabler (v1.0.0-alpha.5)
+* Tabler v1.0.0-alpha.12 (https://tabler.io)
- * Copyright 2018-2020 The Tabler Authors
+* @version 1.0.0-alpha.12
- * Copyright 2018-2020 codecalm
+* @link https://tabler.io
- * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+* Copyright 2018-2020 The Tabler Authors
- */.highlight pre,pre.highlight{max-height:30rem;margin:1.5rem 0;overflow:auto;font-size:.625rem;background:#354052;border-radius:3px;color:#fff}.highlight pre::-webkit-scrollbar,pre.highlight::-webkit-scrollbar{width:6px;height:6px;-webkit-transition:.3s background;transition:.3s background}.highlight pre::-webkit-scrollbar-thumb,pre.highlight::-webkit-scrollbar-thumb{border-radius:5px;background:0 0}.highlight pre::-webkit-scrollbar-corner,pre.highlight::-webkit-scrollbar-corner{background:0 0}.highlight pre:hover::-webkit-scrollbar-thumb,pre.highlight:hover::-webkit-scrollbar-thumb{background:#cbcfd6;background:#5d6675}.highlight .c,.highlight .c1{color:#a0aec0}.highlight .na,.highlight .nl,.highlight .nx,.language-css .highlight .na,.language-scss .highlight .na{color:#ffe484}.highlight .dl,.highlight .mh,.highlight .s,.highlight .s1,.highlight .s2{color:#b5f4a5}.highlight .language-js .nb,.highlight .mi,.highlight .nc,.highlight .nd,.highlight .nt{color:#93ddfd}.highlight .language-html .nt,.highlight .nb{color:#ff8383}.highlight .k,.highlight .kd,.highlight .n,.highlight .nv{color:#d9a9ff}.example{padding:2rem;margin:2rem 0;border:1px solid rgba(110,117,130,.2);border-radius:3px 3px 0 0;position:relative;min-height:12rem;display:flex;align-items:center;overflow-x:auto}.example-centered{justify-content:center}.example-centered .example-content{flex:0 auto}.example-content{font-size:.875rem;flex:1;max-width:100%}.example-bg{background:#f5f7fb}.example-code{margin:2rem 0;border-top:none}.example-code pre{margin:0;border-radius:0 0 3px 3px}.example+.example-code{margin-top:-2rem}.example-column{margin:0 auto}.example-column>.card:last-of-type{margin-bottom:0}.example-column-1{max-width:20rem}.example-column-2{max-width:40rem}.example-modal-backdrop{background:#354052;opacity:.24;position:absolute;width:100%;left:0;top:0;height:100%;border-radius:2px 2px 0 0}@media not print{.theme-dark .example-code{border:1px solid rgba(110,117,130,.2);border-top:none}}@media not print and (prefers-color-scheme:dark){.theme-dark-auto .example-code{border:1px solid rgba(110,117,130,.2);border-top:none}}.card-sponsor{background:#dbe7f6 no-repeat center/100% 100%;border-color:#548ed2;min-height:316px}body.no-transitions *{transition:none!important}.toc-entry:before{content:'- '}.toc-entry ul{list-style:none;padding-left:1rem}.toc-entry a{color:#6e7582}.dropdown-menu-demo{display:inline-block;width:100%;position:relative;top:0;margin-bottom:1rem}
+* Copyright 2018-2020 codecalm.net Paweł Kuna
-/*# sourceMappingURL=demo.min.css.map */
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+*/
+.highlight pre,pre.highlight{max-height:30rem;margin:1.5rem 0;overflow:auto;font-size:85.7142857%;border-radius:3px}.highlight pre::-webkit-scrollbar,pre.highlight::-webkit-scrollbar{width:6px;height:6px;-webkit-transition:.3s background;transition:.3s background}.highlight pre::-webkit-scrollbar-thumb,pre.highlight::-webkit-scrollbar-thumb{border-radius:5px;background:#dbdee3}.highlight pre::-webkit-scrollbar-corner,pre.highlight::-webkit-scrollbar-corner{background:0 0}.highlight pre:hover::-webkit-scrollbar-thumb,pre.highlight:hover::-webkit-scrollbar-thumb{background:#c6cad0;background:#c6cad0}.highlight{margin:0}.highlight .dl{color:#4070a0}.highlight .c{color:#727272}.highlight .c1{color:#727272}.highlight .ch{font-style:italic;color:#60a0b0}.highlight .cm{color:#727272}.highlight .cp{color:#008085}.highlight .cpf{color:#007020}.highlight .cs{color:#727272}.highlight .gd{background-color:#fcc;border:1px solid #c00}.highlight .ge{font-style:italic}.highlight .gh{color:#030}.highlight .gi{background-color:#cfc;border:1px solid #0c0}.highlight .gl{text-decoration:underline}.highlight .go{color:#aaa}.highlight .gp{color:#009}.highlight .gr{color:red}.highlight .gs{font-weight:700}.highlight .gt{color:#9c6}.highlight .gu{color:#030}.highlight .il{color:#c24f19}.highlight .k{color:#069}.highlight .kc{color:#069}.highlight .kd{color:#069}.highlight .kn{color:#069}.highlight .kp{color:#069}.highlight .kr{color:#069}.highlight .kt{color:#078}.highlight .m{color:#c24f19}.highlight .mf{color:#c24f19}.highlight .mb{color:#40a070}.highlight .mh{color:#c24f19}.highlight .mi{color:#c24f19}.highlight .mo{color:#c24f19}.highlight .na{color:#006ee0}.highlight .nb{color:#366}.highlight .nc{color:#168174}.highlight .nd{color:#6b62de}.highlight .ne{color:#c00}.highlight .nf{color:#b715f4}.highlight .ni{color:#727272}.highlight .nl{color:#6b62de}.highlight .nn{color:#007ca5}.highlight .no{color:#360}.highlight .nt{color:#2f6f9f}.highlight .nv{color:#033}.highlight .o{color:#555}.highlight .ow{color:#000}.highlight .s{color:#d73038}.highlight .s1{color:#c30}.highlight .s2{color:#c30}.highlight .sa{color:#4070a0}.highlight .sb{color:#c30}.highlight .sc{color:#c30}.highlight .sd{font-style:italic;color:#c30}.highlight .se{color:#c30}.highlight .sh{color:#c30}.highlight .si{color:#a00}.highlight .sr{color:#337e7e}.highlight .ss{color:#fc3}.highlight .sx{color:#c30}.highlight .w{color:#bbb}.highlight .language-bash::before,.highlight .language-sh::before{color:#009;content:"$ ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.highlight .language-bash .m,.highlight .language-sh .m{color:inherit}.highlight .language-powershell::before{color:#009;content:"PM> ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.example{padding:2rem;margin:2rem 0;border:1px solid #e6e8e9;border-radius:3px 3px 0 0;position:relative;min-height:12rem;display:flex;align-items:center;overflow-x:auto}.example-centered{justify-content:center}.example-centered .example-content{flex:0 auto}.example-content{font-size:.875rem;line-height:1.4285714;color:#232e3c;flex:1;max-width:100%}.example-bg{background:#f4f6fa}.example-code{margin:2rem 0;border:1px solid #e6e8e9;border-top:none}.example-code pre{margin:0;border-radius:0 0 3px 3px}.example+.example-code{margin-top:-2rem}.example-column{margin:0 auto}.example-column>.card:last-of-type{margin-bottom:0}.example-column-1{max-width:26rem}.example-column-2{max-width:52rem}.example-modal-backdrop{background:#232e3c;opacity:.24;position:absolute;width:100%;left:0;top:0;height:100%;border-radius:2px 2px 0 0}@media not print{.theme-dark .example-code{border:1px solid #e6e8e9;border-top:none}}@media not print and (prefers-color-scheme:dark){.theme-dark-auto .example-code{border:1px solid #e6e8e9;border-top:none}}.card-sponsor{background:#dbe7f6 no-repeat center/100% 100%;border-color:#548ed2;min-height:316px}body.no-transitions *{transition:none!important}.dropdown-menu-demo{display:inline-block;width:100%;position:relative;top:0;margin-bottom:1rem}.demo-icon-preview{position:-webkit-sticky;position:sticky;top:0}.demo-icon-preview i,.demo-icon-preview svg{width:15rem;height:15rem;font-size:15rem;stroke-width:1.5;margin:0 auto;display:block}@media (max-width:575.98px){.demo-icon-preview i,.demo-icon-preview svg{width:10rem;height:10rem;font-size:10rem}}.demo-dividers>p{opacity:.2;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}

demo/dist/css/tabler-flags.css

@@ -1,12 +1,11 @@
 /*!
- * Tabler (v1.0.0-alpha.5)
+* Tabler v1.0.0-alpha.12 (https://tabler.io)
- * Copyright 2018-2020 The Tabler Authors
+* @version 1.0.0-alpha.12
- * Copyright 2018-2020 codecalm
+* @link https://tabler.io
- * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+* Copyright 2018-2020 The Tabler Authors
- */
+* Copyright 2018-2020 codecalm.net Paweł Kuna
-/**
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
-Dark mode
+*/
- */
 .flag {
   position: relative;
   display: inline-block;
@@ -16,7 +15,7 @@ Dark mode
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
-  border: 1px solid rgba(110, 117, 130, 0.2);
+  border: 1px solid #e6e8e9;
   border-radius: 3px; }
 
 .flag-country-ad {
@@ -787,15 +786,22 @@ Dark mode
 .flag-country-un {
   background-image: url("../img/flags/un.svg"); }
 
-.flag-md {
+.flag-xs {
+  width: 1.6666625rem;
+  height: 1.25rem; }
+
+.flag-sm {
   width: 2.66666rem;
   height: 2rem; }
 
+.flag-md {
+  width: 4.9999875rem;
+  height: 3.75rem; }
+
 .flag-lg {
-  width: 3.99999rem;
+  width: 6.66665rem;
-  height: 3rem; }
+  height: 5rem; }
 
 .flag-xl {
-  width: 5.33332rem;
+  width: 9.33331rem;
-  height: 4rem; }
+  height: 7rem; }
-/*# sourceMappingURL=tabler-flags.css.map */

demo/dist/css/tabler-payments.css

@@ -1,12 +1,11 @@
 /*!
- * Tabler (v1.0.0-alpha.5)
+* Tabler v1.0.0-alpha.12 (https://tabler.io)
- * Copyright 2018-2020 The Tabler Authors
+* @version 1.0.0-alpha.12
- * Copyright 2018-2020 codecalm
+* @link https://tabler.io
- * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+* Copyright 2018-2020 The Tabler Authors
- */
+* Copyright 2018-2020 codecalm.net Paweł Kuna
-/**
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
-Dark mode
+*/
- */
 .payment {
   width: 3.33332rem;
   height: 2rem;
@@ -371,15 +370,22 @@ Dark mode
 .payment-provider-worldpay-dark {
   background-image: url("../img/payments/worldpay-dark.svg"); }
 
+.payment-xs {
+  width: 2.083325rem;
+  height: 1.25rem; }
+
 .payment-sm {
-  width: 2.49999rem;
+  width: 3.33332rem;
-  height: 1.5rem; }
+  height: 2rem; }
+
+.payment-md {
+  width: 6.249975rem;
+  height: 3.75rem; }
 
 .payment-lg {
-  width: 4.99998rem;
+  width: 8.3333rem;
-  height: 3rem; }
+  height: 5rem; }
 
 .payment-xl {
-  width: 6.66664rem;
+  width: 11.66662rem;
-  height: 4rem; }
+  height: 7rem; }
-/*# sourceMappingURL=tabler-payments.css.map */

demo/dist/libs/autosize/dist/autosize.min.js

@@ -1,6 +0,0 @@
-/*!
-	autosize 4.0.2
-	license: MIT
-	http://www.jacklmoore.com/autosize
-*/
-!function(e,t){if("function"==typeof define&&define.amd)define(["module","exports"],t);else if("undefined"!=typeof exports)t(module,exports);else{var n={exports:{}};t(n,n.exports),e.autosize=n.exports}}(this,function(e,t){"use strict";var n,o,p="function"==typeof Map?new Map:(n=[],o=[],{has:function(e){return-1<n.indexOf(e)},get:function(e){return o[n.indexOf(e)]},set:function(e,t){-1===n.indexOf(e)&&(n.push(e),o.push(t))},delete:function(e){var t=n.indexOf(e);-1<t&&(n.splice(t,1),o.splice(t,1))}}),c=function(e){return new Event(e,{bubbles:!0})};try{new Event("test")}catch(e){c=function(e){var t=document.createEvent("Event");return t.initEvent(e,!0,!1),t}}function r(r){if(r&&r.nodeName&&"TEXTAREA"===r.nodeName&&!p.has(r)){var e,n=null,o=null,i=null,d=function(){r.clientWidth!==o&&a()},l=function(t){window.removeEventListener("resize",d,!1),r.removeEventListener("input",a,!1),r.removeEventListener("keyup",a,!1),r.removeEventListener("autosize:destroy",l,!1),r.removeEventListener("autosize:update",a,!1),Object.keys(t).forEach(function(e){r.style[e]=t[e]}),p.delete(r)}.bind(r,{height:r.style.height,resize:r.style.resize,overflowY:r.style.overflowY,overflowX:r.style.overflowX,wordWrap:r.style.wordWrap});r.addEventListener("autosize:destroy",l,!1),"onpropertychange"in r&&"oninput"in r&&r.addEventListener("keyup",a,!1),window.addEventListener("resize",d,!1),r.addEventListener("input",a,!1),r.addEventListener("autosize:update",a,!1),r.style.overflowX="hidden",r.style.wordWrap="break-word",p.set(r,{destroy:l,update:a}),"vertical"===(e=window.getComputedStyle(r,null)).resize?r.style.resize="none":"both"===e.resize&&(r.style.resize="horizontal"),n="content-box"===e.boxSizing?-(parseFloat(e.paddingTop)+parseFloat(e.paddingBottom)):parseFloat(e.borderTopWidth)+parseFloat(e.borderBottomWidth),isNaN(n)&&(n=0),a()}function s(e){var t=r.style.width;r.style.width="0px",r.offsetWidth,r.style.width=t,r.style.overflowY=e}function u(){if(0!==r.scrollHeight){var e=function(e){for(var t=[];e&&e.parentNode&&e.parentNode instanceof Element;)e.parentNode.scrollTop&&t.push({node:e.parentNode,scrollTop:e.parentNode.scrollTop}),e=e.parentNode;return t}(r),t=document.documentElement&&document.documentElement.scrollTop;r.style.height="",r.style.height=r.scrollHeight+n+"px",o=r.clientWidth,e.forEach(function(e){e.node.scrollTop=e.scrollTop}),t&&(document.documentElement.scrollTop=t)}}function a(){u();var e=Math.round(parseFloat(r.style.height)),t=window.getComputedStyle(r,null),n="content-box"===t.boxSizing?Math.round(parseFloat(t.height)):r.offsetHeight;if(n<e?"hidden"===t.overflowY&&(s("scroll"),u(),n="content-box"===t.boxSizing?Math.round(parseFloat(window.getComputedStyle(r,null).height)):r.offsetHeight):"hidden"!==t.overflowY&&(s("hidden"),u(),n="content-box"===t.boxSizing?Math.round(parseFloat(window.getComputedStyle(r,null).height)):r.offsetHeight),i!==n){i=n;var o=c("autosize:resized");try{r.dispatchEvent(o)}catch(e){}}}}function i(e){var t=p.get(e);t&&t.destroy()}function d(e){var t=p.get(e);t&&t.update()}var l=null;"undefined"==typeof window||"function"!=typeof window.getComputedStyle?((l=function(e){return e}).destroy=function(e){return e},l.update=function(e){return e}):((l=function(e,t){return e&&Array.prototype.forEach.call(e.length?e:[e],function(e){return r(e)}),e}).destroy=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],i),e},l.update=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],d),e}),t.default=l,e.exports=t.default});

demo/dist/libs/countup.js/dist/countUp.js

@@ -0,0 +1,248 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+// playground: stackblitz.com/edit/countup-typescript
+var CountUp = /** @class */ (function () {
+    function CountUp(target, endVal, options) {
+        var _this = this;
+        this.target = target;
+        this.endVal = endVal;
+        this.options = options;
+        this.version = '2.0.7';
+        this.defaults = {
+            startVal: 0,
+            decimalPlaces: 0,
+            duration: 2,
+            useEasing: true,
+            useGrouping: true,
+            smartEasingThreshold: 999,
+            smartEasingAmount: 333,
+            separator: ',',
+            decimal: '.',
+            prefix: '',
+            suffix: ''
+        };
+        this.finalEndVal = null; // for smart easing
+        this.useEasing = true;
+        this.countDown = false;
+        this.error = '';
+        this.startVal = 0;
+        this.paused = true;
+        this.count = function (timestamp) {
+            if (!_this.startTime) {
+                _this.startTime = timestamp;
+            }
+            var progress = timestamp - _this.startTime;
+            _this.remaining = _this.duration - progress;
+            // to ease or not to ease
+            if (_this.useEasing) {
+                if (_this.countDown) {
+                    _this.frameVal = _this.startVal - _this.easingFn(progress, 0, _this.startVal - _this.endVal, _this.duration);
+                }
+                else {
+                    _this.frameVal = _this.easingFn(progress, _this.startVal, _this.endVal - _this.startVal, _this.duration);
+                }
+            }
+            else {
+                if (_this.countDown) {
+                    _this.frameVal = _this.startVal - ((_this.startVal - _this.endVal) * (progress / _this.duration));
+                }
+                else {
+                    _this.frameVal = _this.startVal + (_this.endVal - _this.startVal) * (progress / _this.duration);
+                }
+            }
+            // don't go past endVal since progress can exceed duration in the last frame
+            if (_this.countDown) {
+                _this.frameVal = (_this.frameVal < _this.endVal) ? _this.endVal : _this.frameVal;
+            }
+            else {
+                _this.frameVal = (_this.frameVal > _this.endVal) ? _this.endVal : _this.frameVal;
+            }
+            // decimal
+            _this.frameVal = Number(_this.frameVal.toFixed(_this.options.decimalPlaces));
+            // format and print value
+            _this.printValue(_this.frameVal);
+            // whether to continue
+            if (progress < _this.duration) {
+                _this.rAF = requestAnimationFrame(_this.count);
+            }
+            else if (_this.finalEndVal !== null) {
+                // smart easing
+                _this.update(_this.finalEndVal);
+            }
+            else {
+                if (_this.callback) {
+                    _this.callback();
+                }
+            }
+        };
+        // default format and easing functions
+        this.formatNumber = function (num) {
+            var neg = (num < 0) ? '-' : '';
+            var result, x, x1, x2, x3;
+            result = Math.abs(num).toFixed(_this.options.decimalPlaces);
+            result += '';
+            x = result.split('.');
+            x1 = x[0];
+            x2 = x.length > 1 ? _this.options.decimal + x[1] : '';
+            if (_this.options.useGrouping) {
+                x3 = '';
+                for (var i = 0, len = x1.length; i < len; ++i) {
+                    if (i !== 0 && (i % 3) === 0) {
+                        x3 = _this.options.separator + x3;
+                    }
+                    x3 = x1[len - i - 1] + x3;
+                }
+                x1 = x3;
+            }
+            // optional numeral substitution
+            if (_this.options.numerals && _this.options.numerals.length) {
+                x1 = x1.replace(/[0-9]/g, function (w) { return _this.options.numerals[+w]; });
+                x2 = x2.replace(/[0-9]/g, function (w) { return _this.options.numerals[+w]; });
+            }
+            return neg + _this.options.prefix + x1 + x2 + _this.options.suffix;
+        };
+        this.easeOutExpo = function (t, b, c, d) {
+            return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
+        };
+        this.options = __assign(__assign({}, this.defaults), options);
+        this.formattingFn = (this.options.formattingFn) ?
+            this.options.formattingFn : this.formatNumber;
+        this.easingFn = (this.options.easingFn) ?
+            this.options.easingFn : this.easeOutExpo;
+        this.startVal = this.validateValue(this.options.startVal);
+        this.frameVal = this.startVal;
+        this.endVal = this.validateValue(endVal);
+        this.options.decimalPlaces = Math.max(0 || this.options.decimalPlaces);
+        this.resetDuration();
+        this.options.separator = String(this.options.separator);
+        this.useEasing = this.options.useEasing;
+        if (this.options.separator === '') {
+            this.options.useGrouping = false;
+        }
+        this.el = (typeof target === 'string') ? document.getElementById(target) : target;
+        if (this.el) {
+            this.printValue(this.startVal);
+        }
+        else {
+            this.error = '[CountUp] target is null or undefined';
+        }
+    }
+    // determines where easing starts and whether to count down or up
+    CountUp.prototype.determineDirectionAndSmartEasing = function () {
+        var end = (this.finalEndVal) ? this.finalEndVal : this.endVal;
+        this.countDown = (this.startVal > end);
+        var animateAmount = end - this.startVal;
+        if (Math.abs(animateAmount) > this.options.smartEasingThreshold) {
+            this.finalEndVal = end;
+            var up = (this.countDown) ? 1 : -1;
+            this.endVal = end + (up * this.options.smartEasingAmount);
+            this.duration = this.duration / 2;
+        }
+        else {
+            this.endVal = end;
+            this.finalEndVal = null;
+        }
+        if (this.finalEndVal) {
+            this.useEasing = false;
+        }
+        else {
+            this.useEasing = this.options.useEasing;
+        }
+    };
+    // start animation
+    CountUp.prototype.start = function (callback) {
+        if (this.error) {
+            return;
+        }
+        this.callback = callback;
+        if (this.duration > 0) {
+            this.determineDirectionAndSmartEasing();
+            this.paused = false;
+            this.rAF = requestAnimationFrame(this.count);
+        }
+        else {
+            this.printValue(this.endVal);
+        }
+    };
+    // pause/resume animation
+    CountUp.prototype.pauseResume = function () {
+        if (!this.paused) {
+            cancelAnimationFrame(this.rAF);
+        }
+        else {
+            this.startTime = null;
+            this.duration = this.remaining;
+            this.startVal = this.frameVal;
+            this.determineDirectionAndSmartEasing();
+            this.rAF = requestAnimationFrame(this.count);
+        }
+        this.paused = !this.paused;
+    };
+    // reset to startVal so animation can be run again
+    CountUp.prototype.reset = function () {
+        cancelAnimationFrame(this.rAF);
+        this.paused = true;
+        this.resetDuration();
+        this.startVal = this.validateValue(this.options.startVal);
+        this.frameVal = this.startVal;
+        this.printValue(this.startVal);
+    };
+    // pass a new endVal and start animation
+    CountUp.prototype.update = function (newEndVal) {
+        cancelAnimationFrame(this.rAF);
+        this.startTime = null;
+        this.endVal = this.validateValue(newEndVal);
+        if (this.endVal === this.frameVal) {
+            return;
+        }
+        this.startVal = this.frameVal;
+        if (!this.finalEndVal) {
+            this.resetDuration();
+        }
+        this.finalEndVal = null;
+        this.determineDirectionAndSmartEasing();
+        this.rAF = requestAnimationFrame(this.count);
+    };
+    CountUp.prototype.printValue = function (val) {
+        var result = this.formattingFn(val);
+        if (this.el.tagName === 'INPUT') {
+            var input = this.el;
+            input.value = result;
+        }
+        else if (this.el.tagName === 'text' || this.el.tagName === 'tspan') {
+            this.el.textContent = result;
+        }
+        else {
+            this.el.innerHTML = result;
+        }
+    };
+    CountUp.prototype.ensureNumber = function (n) {
+        return (typeof n === 'number' && !isNaN(n));
+    };
+    CountUp.prototype.validateValue = function (value) {
+        var newValue = Number(value);
+        if (!this.ensureNumber(newValue)) {
+            this.error = "[CountUp] invalid start or end value: " + value;
+            return null;
+        }
+        else {
+            return newValue;
+        }
+    };
+    CountUp.prototype.resetDuration = function () {
+        this.startTime = null;
+        this.duration = Number(this.options.duration) * 1000;
+        this.remaining = this.duration;
+    };
+    return CountUp;
+}());
+export { CountUp };

demo/dist/libs/flatpickr/dist/plugins/rangePlugin.js

@@ -2,7 +2,30 @@
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
     typeof define === 'function' && define.amd ? define(factory) :
     (global = global || self, global.rangePlugin = factory());
-}(this, function () { 'use strict';
+}(this, (function () { 'use strict';
+
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+
+    function __spreadArrays() {
+        for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+        for (var r = Array(s), k = 0, i = 0; i < il; i++)
+            for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+                r[k] = a[j];
+        return r;
+    }
 
     function rangePlugin(config) {
         if (config === void 0) { config = {}; }
@@ -125,17 +148,17 @@
                         return;
                     _prevDates =
                         !_prevDates || selDates.length >= _prevDates.length
-                          ? selDates.slice() : _prevDates;
+                            ? __spreadArrays(selDates) : _prevDates;
                     if (_prevDates.length > selDates.length) {
                         var newSelectedDate = selDates[0];
                         var newDates = _secondInputFocused
                             ? [_prevDates[0], newSelectedDate]
                             : [newSelectedDate, _prevDates[1]];
                         fp.setDate(newDates, false);
-                      _prevDates = newDates.slice();
+                        _prevDates = __spreadArrays(newDates);
                     }
                     _a = fp.selectedDates.map(function (d) { return fp.formatDate(d, dateFormat); }), _b = _a[0], fp._input.value = _b === void 0 ? "" : _b, _c = _a[1], secondInput.value = _c === void 0 ? "" : _c;
-              }
+                },
             };
             return plugin;
         };
@@ -143,4 +166,4 @@
 
     return rangePlugin;
 
-}));
+})));

demo/dist/libs/fullcalendar/daygrid/main.min.css

@@ -1 +1 @@
-.fc-dayGridDay-view .fc-content-skeleton,.fc-dayGridWeek-view .fc-content-skeleton{padding-bottom:1em}.fc-dayGrid-view .fc-body .fc-row{min-height:4em}.fc-row.fc-rigid{overflow:hidden}.fc-row.fc-rigid .fc-content-skeleton{position:absolute;top:0;left:0;right:0}.fc-day-top.fc-other-month{opacity:.3}.fc-dayGrid-view .fc-day-number,.fc-dayGrid-view .fc-week-number{padding:2px}.fc-dayGrid-view th.fc-day-number,.fc-dayGrid-view th.fc-week-number{padding:0 2px}.fc-ltr .fc-dayGrid-view .fc-day-top .fc-day-number{float:right}.fc-rtl .fc-dayGrid-view .fc-day-top .fc-day-number{float:left}.fc-ltr .fc-dayGrid-view .fc-day-top .fc-week-number{float:left;border-radius:0 0 3px}.fc-rtl .fc-dayGrid-view .fc-day-top .fc-week-number{float:right;border-radius:0 0 0 3px}.fc-dayGrid-view .fc-day-top .fc-week-number{min-width:1.5em;text-align:center;background-color:#f2f2f2;color:grey}.fc-dayGrid-view td.fc-week-number{text-align:center}.fc-dayGrid-view td.fc-week-number>*{display:inline-block;min-width:1.25em}
+:root{--fc-daygrid-event-dot-width:8px}.fc .fc-popover{position:fixed;top:0;box-shadow:0 2px 6px rgba(0,0,0,.15)}.fc .fc-popover-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:3px 4px}.fc .fc-popover-title{margin:0 2px}.fc .fc-popover-close{cursor:pointer;opacity:.65;font-size:1.1em}.fc-theme-standard .fc-popover{border:1px solid #ddd;border:1px solid var(--fc-border-color,#ddd);background:var(--fc-page-bg-color,#fff)}.fc-theme-standard .fc-popover-header{background:rgba(208,208,208,.3);background:var(--fc-neutral-bg-color,rgba(208,208,208,.3))}.fc-daygrid-day-events:after,.fc-daygrid-day-events:before,.fc-daygrid-day-frame:after,.fc-daygrid-day-frame:before,.fc-daygrid-event-harness:after,.fc-daygrid-event-harness:before{content:"";clear:both;display:table}.fc .fc-daygrid-body{position:relative;z-index:1}.fc .fc-daygrid-day.fc-day-today{background-color:rgba(255,220,40,.15);background-color:var(--fc-today-bg-color,rgba(255,220,40,.15))}.fc .fc-daygrid-day-frame{position:relative;min-height:100%}.fc .fc-daygrid-day-top{display:flex;flex-direction:row-reverse}.fc .fc-day-other .fc-daygrid-day-top{opacity:.3}.fc .fc-daygrid-day-number{position:relative;z-index:4;padding:4px}.fc .fc-daygrid-day-events{margin-top:1px}.fc .fc-daygrid-body-balanced .fc-daygrid-day-events{position:absolute;left:0;right:0}.fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events{position:relative;min-height:2em}.fc .fc-daygrid-body-natural .fc-daygrid-day-events{margin-bottom:1em}.fc .fc-daygrid-event-harness{position:relative}.fc .fc-daygrid-event-harness-abs{position:absolute;top:0;left:0;right:0}.fc .fc-daygrid-bg-harness{position:absolute;top:0;bottom:0}.fc .fc-daygrid-day-bg .fc-non-business{z-index:1}.fc .fc-daygrid-day-bg .fc-bg-event{z-index:2}.fc .fc-daygrid-day-bg .fc-highlight{z-index:3}.fc .fc-daygrid-event{z-index:6;margin-top:1px}.fc .fc-daygrid-event.fc-event-mirror{z-index:7}.fc .fc-daygrid-day-bottom{font-size:.85em;margin:2px 3px 0}.fc .fc-daygrid-more-link{position:relative;z-index:4;cursor:pointer}.fc .fc-daygrid-week-number{position:absolute;z-index:5;top:0;padding:2px;min-width:1.5em;text-align:center;background-color:rgba(208,208,208,.3);background-color:var(--fc-neutral-bg-color,rgba(208,208,208,.3));color:grey;color:var(--fc-neutral-text-color,grey)}.fc .fc-more-popover{z-index:8}.fc .fc-more-popover .fc-popover-body{min-width:220px;padding:10px}.fc-direction-ltr .fc-daygrid-event.fc-event-start,.fc-direction-rtl .fc-daygrid-event.fc-event-end{margin-left:2px}.fc-direction-ltr .fc-daygrid-event.fc-event-end,.fc-direction-rtl .fc-daygrid-event.fc-event-start{margin-right:2px}.fc-direction-ltr .fc-daygrid-week-number{left:0;border-radius:0 0 3px}.fc-direction-rtl .fc-daygrid-week-number{right:0;border-radius:0 0 0 3px}.fc-liquid-hack .fc-daygrid-day-frame{position:static}.fc-daygrid-event{position:relative;white-space:nowrap;border-radius:3px;font-size:.85em;font-size:var(--fc-small-font-size,.85em)}.fc-daygrid-block-event .fc-event-time{font-weight:700}.fc-daygrid-block-event .fc-event-time,.fc-daygrid-block-event .fc-event-title{padding:1px}.fc-daygrid-dot-event{display:flex;align-items:center;padding:2px 0}.fc-daygrid-dot-event .fc-event-title{flex-grow:1;flex-shrink:1;min-width:0;overflow:hidden;font-weight:700}.fc-daygrid-dot-event.fc-event-mirror,.fc-daygrid-dot-event:hover{background:rgba(0,0,0,.1)}.fc-daygrid-dot-event.fc-event-selected:before{top:-10px;bottom:-10px}.fc-daygrid-event-dot{margin:0 4px;box-sizing:content-box;width:0;height:0;border:4px solid #3788d8;border:calc(var(--fc-daygrid-event-dot-width,8px)/ 2) solid var(--fc-event-border-color,#3788d8);border-radius:4px;border-radius:calc(var(--fc-daygrid-event-dot-width,8px)/ 2)}.fc-direction-ltr .fc-daygrid-event .fc-event-time{margin-right:3px}.fc-direction-rtl .fc-daygrid-event .fc-event-time{margin-left:3px}

demo/dist/libs/fullcalendar/list/main.min.css

@@ -1 +1 @@
-.fc-event-dot{display:inline-block;width:10px;height:10px;border-radius:5px}.fc-rtl .fc-list-view{direction:rtl}.fc-list-view{border-width:1px;border-style:solid}.fc .fc-list-table{table-layout:auto}.fc-list-table td{border-width:1px 0 0;padding:8px 14px}.fc-list-table tr:first-child td{border-top-width:0}.fc-list-heading{border-bottom-width:1px}.fc-list-heading td{font-weight:700}.fc-ltr .fc-list-heading-main{float:left}.fc-ltr .fc-list-heading-alt,.fc-rtl .fc-list-heading-main{float:right}.fc-rtl .fc-list-heading-alt{float:left}.fc-list-item.fc-has-url{cursor:pointer}.fc-list-item-marker,.fc-list-item-time{white-space:nowrap;width:1px}.fc-ltr .fc-list-item-marker{padding-right:0}.fc-rtl .fc-list-item-marker{padding-left:0}.fc-list-item-title a{text-decoration:none;color:inherit}.fc-list-item-title a[href]:hover{text-decoration:underline}.fc-list-empty-wrap2{position:absolute;top:0;left:0;right:0;bottom:0}.fc-list-empty-wrap1{width:100%;height:100%;display:table}.fc-list-empty{display:table-cell;vertical-align:middle;text-align:center}.fc-unthemed .fc-list-empty{background-color:#eee}
+:root{--fc-list-event-dot-width:10px;--fc-list-event-hover-bg-color:#f5f5f5}.fc-theme-standard .fc-list{border:1px solid #ddd;border:1px solid var(--fc-border-color,#ddd)}.fc .fc-list-empty{background-color:rgba(208,208,208,.3);background-color:var(--fc-neutral-bg-color,rgba(208,208,208,.3));height:100%;display:flex;justify-content:center;align-items:center}.fc .fc-list-empty-cushion{margin:5em 0}.fc .fc-list-table{width:100%;border-style:hidden}.fc .fc-list-table tr>*{border-left:0;border-right:0}.fc .fc-list-sticky .fc-list-day>*{position:-webkit-sticky;position:sticky;top:0;background:var(--fc-page-bg-color,#fff)}.fc .fc-list-table th{padding:0}.fc .fc-list-day-cushion,.fc .fc-list-table td{padding:8px 14px}.fc .fc-list-day-cushion:after{content:"";clear:both;display:table}.fc-theme-standard .fc-list-day-cushion{background-color:rgba(208,208,208,.3);background-color:var(--fc-neutral-bg-color,rgba(208,208,208,.3))}.fc-direction-ltr .fc-list-day-text,.fc-direction-rtl .fc-list-day-side-text{float:left}.fc-direction-ltr .fc-list-day-side-text,.fc-direction-rtl .fc-list-day-text{float:right}.fc-direction-ltr .fc-list-table .fc-list-event-graphic{padding-right:0}.fc-direction-rtl .fc-list-table .fc-list-event-graphic{padding-left:0}.fc .fc-list-event.fc-event-forced-url{cursor:pointer}.fc .fc-list-event:hover td{background-color:#f5f5f5;background-color:var(--fc-list-event-hover-bg-color,#f5f5f5)}.fc .fc-list-event-graphic,.fc .fc-list-event-time{white-space:nowrap;width:1px}.fc .fc-list-event-dot{display:inline-block;box-sizing:content-box;width:0;height:0;border:5px solid #3788d8;border:calc(var(--fc-list-event-dot-width,10px)/ 2) solid var(--fc-event-border-color,#3788d8);border-radius:5px;border-radius:calc(var(--fc-list-event-dot-width,10px)/ 2)}.fc .fc-list-event-title a{color:inherit;text-decoration:none}.fc .fc-list-event.fc-event-forced-url:hover a{text-decoration:underline}

demo/dist/libs/nouislider/distribute/nouislider.min.css

@@ -1,2 +1,2 @@
-/*! nouislider - 14.2.0 - 3/27/2020 */
+/*! nouislider - 14.6.2 - 9/16/2020 */
-.noUi-target,.noUi-target *{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-ms-touch-action:none;touch-action:none;-ms-user-select:none;-moz-user-select:none;user-select:none;-moz-box-sizing:border-box;box-sizing:border-box}.noUi-target{position:relative}.noUi-base,.noUi-connects{width:100%;height:100%;position:relative;z-index:1}.noUi-connects{overflow:hidden;z-index:0}.noUi-connect,.noUi-origin{will-change:transform;position:absolute;z-index:1;top:0;right:0;-ms-transform-origin:0 0;-webkit-transform-origin:0 0;-webkit-transform-style:preserve-3d;transform-origin:0 0;transform-style:flat}.noUi-connect{height:100%;width:100%}.noUi-origin{height:10%;width:10%}.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin{left:0;right:auto}.noUi-vertical .noUi-origin{width:0}.noUi-horizontal .noUi-origin{height:0}.noUi-handle{-webkit-backface-visibility:hidden;backface-visibility:hidden;position:absolute}.noUi-touch-area{height:100%;width:100%}.noUi-state-tap .noUi-connect,.noUi-state-tap .noUi-origin{-webkit-transition:transform .3s;transition:transform .3s}.noUi-state-drag *{cursor:inherit!important}.noUi-horizontal{height:18px}.noUi-horizontal .noUi-handle{width:34px;height:28px;right:-17px;top:-6px}.noUi-vertical{width:18px}.noUi-vertical .noUi-handle{width:28px;height:34px;right:-6px;top:-17px}.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle{left:-17px;right:auto}.noUi-target{background:#FAFAFA;border-radius:4px;border:1px solid #D3D3D3;box-shadow:inset 0 1px 1px #F0F0F0,0 3px 6px -5px #BBB}.noUi-connects{border-radius:3px}.noUi-connect{background:#3FB8AF}.noUi-draggable{cursor:ew-resize}.noUi-vertical .noUi-draggable{cursor:ns-resize}.noUi-handle{border:1px solid #D9D9D9;border-radius:3px;background:#FFF;cursor:default;box-shadow:inset 0 0 1px #FFF,inset 0 1px 7px #EBEBEB,0 3px 6px -3px #BBB}.noUi-active{box-shadow:inset 0 0 1px #FFF,inset 0 1px 7px #DDD,0 3px 6px -3px #BBB}.noUi-handle:after,.noUi-handle:before{content:"";display:block;position:absolute;height:14px;width:1px;background:#E8E7E6;left:14px;top:6px}.noUi-handle:after{left:17px}.noUi-vertical .noUi-handle:after,.noUi-vertical .noUi-handle:before{width:14px;height:1px;left:6px;top:14px}.noUi-vertical .noUi-handle:after{top:17px}[disabled] .noUi-connect{background:#B8B8B8}[disabled] .noUi-handle,[disabled].noUi-handle,[disabled].noUi-target{cursor:not-allowed}.noUi-pips,.noUi-pips *{-moz-box-sizing:border-box;box-sizing:border-box}.noUi-pips{position:absolute;color:#999}.noUi-value{position:absolute;white-space:nowrap;text-align:center}.noUi-value-sub{color:#ccc;font-size:10px}.noUi-marker{position:absolute;background:#CCC}.noUi-marker-sub{background:#AAA}.noUi-marker-large{background:#AAA}.noUi-pips-horizontal{padding:10px 0;height:80px;top:100%;left:0;width:100%}.noUi-value-horizontal{-webkit-transform:translate(-50%,50%);transform:translate(-50%,50%)}.noUi-rtl .noUi-value-horizontal{-webkit-transform:translate(50%,50%);transform:translate(50%,50%)}.noUi-marker-horizontal.noUi-marker{margin-left:-1px;width:2px;height:5px}.noUi-marker-horizontal.noUi-marker-sub{height:10px}.noUi-marker-horizontal.noUi-marker-large{height:15px}.noUi-pips-vertical{padding:0 10px;height:100%;top:0;left:100%}.noUi-value-vertical{-webkit-transform:translate(0,-50%);transform:translate(0,-50%);padding-left:25px}.noUi-rtl .noUi-value-vertical{-webkit-transform:translate(0,50%);transform:translate(0,50%)}.noUi-marker-vertical.noUi-marker{width:5px;height:2px;margin-top:-1px}.noUi-marker-vertical.noUi-marker-sub{width:10px}.noUi-marker-vertical.noUi-marker-large{width:15px}.noUi-tooltip{display:block;position:absolute;border:1px solid #D9D9D9;border-radius:3px;background:#fff;color:#000;padding:5px;text-align:center;white-space:nowrap}.noUi-horizontal .noUi-tooltip{-webkit-transform:translate(-50%,0);transform:translate(-50%,0);left:50%;bottom:120%}.noUi-vertical .noUi-tooltip{-webkit-transform:translate(0,-50%);transform:translate(0,-50%);top:50%;right:120%}
+.noUi-target,.noUi-target *{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-ms-touch-action:none;touch-action:none;-ms-user-select:none;-moz-user-select:none;user-select:none;-moz-box-sizing:border-box;box-sizing:border-box}.noUi-target{position:relative}.noUi-base,.noUi-connects{width:100%;height:100%;position:relative;z-index:1}.noUi-connects{overflow:hidden;z-index:0}.noUi-connect,.noUi-origin{will-change:transform;position:absolute;z-index:1;top:0;right:0;-ms-transform-origin:0 0;-webkit-transform-origin:0 0;-webkit-transform-style:preserve-3d;transform-origin:0 0;transform-style:flat}.noUi-connect{height:100%;width:100%}.noUi-origin{height:10%;width:10%}.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin{left:0;right:auto}.noUi-vertical .noUi-origin{width:0}.noUi-horizontal .noUi-origin{height:0}.noUi-handle{-webkit-backface-visibility:hidden;backface-visibility:hidden;position:absolute}.noUi-touch-area{height:100%;width:100%}.noUi-state-tap .noUi-connect,.noUi-state-tap .noUi-origin{-webkit-transition:transform .3s;transition:transform .3s}.noUi-state-drag *{cursor:inherit!important}.noUi-horizontal{height:18px}.noUi-horizontal .noUi-handle{width:34px;height:28px;right:-17px;top:-6px}.noUi-vertical{width:18px}.noUi-vertical .noUi-handle{width:28px;height:34px;right:-6px;top:-17px}.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle{left:-17px;right:auto}.noUi-target{background:#FAFAFA;border-radius:4px;border:1px solid #D3D3D3;box-shadow:inset 0 1px 1px #F0F0F0,0 3px 6px -5px #BBB}.noUi-connects{border-radius:3px}.noUi-connect{background:#3FB8AF}.noUi-draggable{cursor:ew-resize}.noUi-vertical .noUi-draggable{cursor:ns-resize}.noUi-handle{border:1px solid #D9D9D9;border-radius:3px;background:#FFF;cursor:default;box-shadow:inset 0 0 1px #FFF,inset 0 1px 7px #EBEBEB,0 3px 6px -3px #BBB}.noUi-active{box-shadow:inset 0 0 1px #FFF,inset 0 1px 7px #DDD,0 3px 6px -3px #BBB}.noUi-handle:after,.noUi-handle:before{content:"";display:block;position:absolute;height:14px;width:1px;background:#E8E7E6;left:14px;top:6px}.noUi-handle:after{left:17px}.noUi-vertical .noUi-handle:after,.noUi-vertical .noUi-handle:before{width:14px;height:1px;left:6px;top:14px}.noUi-vertical .noUi-handle:after{top:17px}[disabled] .noUi-connect{background:#B8B8B8}[disabled] .noUi-handle,[disabled].noUi-handle,[disabled].noUi-target{cursor:not-allowed}.noUi-pips,.noUi-pips *{-moz-box-sizing:border-box;box-sizing:border-box}.noUi-pips{position:absolute;color:#999}.noUi-value{position:absolute;white-space:nowrap;text-align:center}.noUi-value-sub{color:#ccc;font-size:10px}.noUi-marker{position:absolute;background:#CCC}.noUi-marker-sub{background:#AAA}.noUi-marker-large{background:#AAA}.noUi-pips-horizontal{padding:10px 0;height:80px;top:100%;left:0;width:100%}.noUi-value-horizontal{-webkit-transform:translate(-50%,50%);transform:translate(-50%,50%)}.noUi-rtl .noUi-value-horizontal{-webkit-transform:translate(50%,50%);transform:translate(50%,50%)}.noUi-marker-horizontal.noUi-marker{margin-left:-1px;width:2px;height:5px}.noUi-marker-horizontal.noUi-marker-sub{height:10px}.noUi-marker-horizontal.noUi-marker-large{height:15px}.noUi-pips-vertical{padding:0 10px;height:100%;top:0;left:100%}.noUi-value-vertical{-webkit-transform:translate(0,-50%);transform:translate(0,-50%);padding-left:25px}.noUi-rtl .noUi-value-vertical{-webkit-transform:translate(0,50%);transform:translate(0,50%)}.noUi-marker-vertical.noUi-marker{width:5px;height:2px;margin-top:-1px}.noUi-marker-vertical.noUi-marker-sub{width:10px}.noUi-marker-vertical.noUi-marker-large{width:15px}.noUi-tooltip{display:block;position:absolute;border:1px solid #D9D9D9;border-radius:3px;background:#fff;color:#000;padding:5px;text-align:center;white-space:nowrap}.noUi-horizontal .noUi-tooltip{-webkit-transform:translate(-50%,0);transform:translate(-50%,0);left:50%;bottom:120%}.noUi-vertical .noUi-tooltip{-webkit-transform:translate(0,-50%);transform:translate(0,-50%);top:50%;right:120%}.noUi-horizontal .noUi-origin>.noUi-tooltip{-webkit-transform:translate(50%,0);transform:translate(50%,0);left:auto;bottom:10px}.noUi-vertical .noUi-origin>.noUi-tooltip{-webkit-transform:translate(0,-18px);transform:translate(0,-18px);top:auto;right:28px}

demo/docs/alerts.html

@@ -1,18 +1,18 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.5
+* @version 1.0.0-alpha.12
-* @link https://github.com/tabler/tabler
+* @link https://tabler.io
-* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Copyright 2018-2020 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
   <head>
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <title>Alerts - Documentation - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <title>Alerts - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
@@ -25,22 +25,10 @@
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
     <meta name="description" content="Alert messages are used to inform users of the status of their action and help them solve any problems that might have occurred. Good design of alert modals is very important for the overall user experience of a website or app."/>
-    <!-- Libs CSS -->
+    <!-- CSS files -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
-    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
-    <!-- Tabler Core -->
     <link href="../dist/css/tabler.min.css" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
     <link href="../dist/css/tabler-flags.min.css" rel="stylesheet"/>
     <link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
-    <link href="../dist/css/tabler-buttons.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
     <style>
       body {
@@ -50,22 +38,18 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <header class="navbar navbar-expand-md navbar-light">
+      <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
           <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
             <span class="navbar-toggler-icon"></span>
           </button>
           <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-image">
+            <img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
           </a>
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item dropdown d-none d-md-flex mr-3">
               <a href="#" class="nav-link px-0" data-toggle="dropdown" tabindex="-1">
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
-                  <path stroke="none" d="M0 0h24v24H0z"/>
-                  <path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" />
-                  <path d="M9 17v1a3 3 0 0 0 6 0v-1" />
-                </svg>
                 <span class="badge bg-red"></span>
               </a>
               <div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
@@ -78,54 +62,32 @@
             </div>
             <div class="nav-item dropdown">
               <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
+                <span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
                 <div class="d-none d-xl-block pl-2">
                   <div>Paweł Kuna</div>
                   <div class="mt-1 small text-muted">UI Designer</div>
                 </div>
               </a>
-              <div class="dropdown-menu dropdown-menu-right">
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
+                <a href="#" class="dropdown-item">Set status</a>
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <a href="#" class="dropdown-item">Profile & account</a>
-                    <path stroke="none" d="M0 0h24v24H0z"/>
+                <a href="#" class="dropdown-item">Feedback</a>
-                    <path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-                    <circle cx="12" cy="12" r="3" />
-                  </svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                    <path stroke="none" d="M0 0h24v24H0z"/>
-                    <path d="M9 7 h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" />
-                    <path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" />
-                    <line x1="16" y1="5" x2="19" y2="8" />
-                  </svg>
-                  Another action
-                </a>
                 <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <a href="#" class="dropdown-item">Settings</a>
-                    <path stroke="none" d="M0 0h24v24H0z"/>
+                <a href="#" class="dropdown-item">Logout</a>
-                    <line x1="12" y1="5" x2="12" y2="19" />
-                    <line x1="5" y1="12" x2="19" y2="12" />
-                  </svg>
-                  Separated link</a>
               </div>
             </div>
           </div>
         </div>
       </header>
       <div class="navbar-expand-md">
-        <div class="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar navbar-light">
             <div class="container-xl">
               <ul class="navbar-nav">
                 <li class="nav-item">
                   <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="5 12 3 12 12 3 21 12 19 12" />
-                      <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
-                      <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Home
@@ -134,14 +96,7 @@
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" />
-                      <line x1="12" y1="12" x2="20" y2="7.5" />
-                      <line x1="12" y1="12" x2="12" y2="21" />
-                      <line x1="12" y1="12" x2="4" y2="7.5" />
-                      <line x1="16" y1="5.25" x2="8" y2="9.75" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       User Interface
@@ -168,11 +123,21 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../cards-masonry.html" >
+                        Cards Masonry
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../dropdowns.html" >
                         Dropdowns
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../icons.html" >
+                        Icons
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../modals.html" >
                         Modals
@@ -198,6 +163,26 @@
                         Charts
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../charts-heatmap.html" >
+                        Charts heatmap
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../skeleton.html" >
+                        Skeleton
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../tabs.html" >
+                        Tabs
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../tables.html" >
                         Tables
@@ -218,6 +203,16 @@
                         Lists
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../typography.html" >
+                        Typography
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../markdown.html" >
+                        Markdown
+                      </a>
+                    </li>
                     <li class="dropright">
                       <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
                         Authentication
@@ -234,24 +229,16 @@
                         Error pages
                       </a>
                       <div class="dropdown-menu">
-                      <a href="../400.html" class="dropdown-item">400 page</a>
+                        <a href="../error-404.html" class="dropdown-item">404 page</a>
-                      <a href="../401.html" class="dropdown-item">401 page</a>
+                        <a href="../error-500.html" class="dropdown-item">500 page</a>
-                      <a href="../403.html" class="dropdown-item">403 page</a>
+                        <a href="../error-maintenance.html" class="dropdown-item">Maintenance page</a>
-                      <a href="../404.html" class="dropdown-item">404 page</a>
-                      <a href="../500.html" class="dropdown-item">500 page</a>
-                      <a href="../503.html" class="dropdown-item">503 page</a>
-                      <a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
                       </div>
                     </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="9 11 12 14 20 6" />
-                      <path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Form elements
@@ -260,10 +247,7 @@
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Extra
@@ -305,6 +289,11 @@
                         Gallery
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../license.html" >
+                        License
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../profile.html" >
                         Profile
@@ -315,17 +304,16 @@
                         Music
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../welcome.html" >
+                        Welcome
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <rect x="4" y="4" width="6" height="5" rx="2" />
-                      <rect x="4" y="13" width="6" height="7" rx="2" />
-                      <rect x="14" y="4" width="6" height="7" rx="2" />
-                      <rect x="14" y="15" width="6" height="5" rx="2" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Layout
@@ -367,11 +355,21 @@
                         Navbar dark
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../layout-navbar-overlap.html" >
+                        Navbar overlap
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../layout-dark.html" >
                         Dark mode
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../layout-rtl.html" >
+                        RTL mode
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../layout-fluid.html" >
                         Fluid
@@ -384,199 +382,21 @@
                     </li>
                   </ul>
                 </li>
-              <li class="nav-item active dropdown">
+                <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link" href="../docs/index.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="14 3 14 8 19 8" />
-                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
-                      <line x1="9" y1="9" x2="10" y2="9" />
-                      <line x1="9" y1="13" x2="15" y2="13" />
-                      <line x1="9" y1="17" x2="15" y2="17" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
-                    Docs
+                      Documentation
                     </span>
                   </a>
-                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-3">
-                  <li >
-                    <a class="dropdown-item" href="../docs/index.html" >
-                      Introduction
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item active" href="../docs/alerts.html" >
-                      Alerts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/autosize.html" >
-                      Autosize
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/avatars.html" >
-                      Avatars
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/badges.html" >
-                      Badges
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/breadcrumb.html" >
-                      Breadcrumb
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/buttons.html" >
-                      Buttons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/cards.html" >
-                      Cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/carousel.html" >
-                      Carousel
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/colors.html" >
-                      Colors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/countup.html" >
-                      Countup
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/cursors.html" >
-                      Cursors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/charts.html" >
-                      Charts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/dropdowns.html" >
-                      Dropdowns
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/divider.html" >
-                      Divider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/empty.html" >
-                      Empty states
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/flags.html" >
-                      Flags
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/form-elements.html" >
-                      Form elements
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/form-helpers.html" >
-                      Form helpers
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/input-mask.html" >
-                      Form input mask
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/modals.html" >
-                      Modals
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/progress.html" >
-                      Progress
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/payments.html" >
-                      Payments
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/range-slider.html" >
-                      Range slider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/ribbons.html" >
-                      Ribbons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/spinners.html" >
-                      Spinners
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/steps.html" >
-                      Steps
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tables.html" >
-                      Tables
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tabs.html" >
-                      Tabs
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/timelines.html" >
-                      Timelines
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/toasts.html" >
-                      Toasts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tooltips.html" >
-                      Tooltips
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/typography.html" >
-                      Typography
-                    </a>
-                  </li>
-                </ul>
                 </li>
               </ul>
               <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <circle cx="10" cy="10" r="7" />
-                      <line x1="21" y1="21" x2="15" y2="15" />
-                    </svg>
                     </span>
                     <input type="text" class="form-control" placeholder="Search…">
                   </div>
@@ -585,57 +405,263 @@
             </div>
           </div>
         </div>
+      </div>
       <div class="content">
         <div class="container-xl">
           <!-- Page title -->
-          <div class="page-header">
+          <div class="page-header d-print-none">
             <div class="row align-items-center">
-              <div class="col-auto">
+              <div class="col">
                 <h2 class="page-title">
                   Documentation
                 </h2>
               </div>
             </div>
           </div>
-          <div class="row justify-content-center">
+          <div class="row g-5">
-            <div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
+            <div class="d-none d-lg-block col-lg-3">
-              <div class="sticky-top">
+              <ul class="nav nav-pills nav-vertical">
-                <a href="https://github.com/tabler/tabler" class="btn btn-github mb-6 btn-block" target="_blank" rel="noreferrer">
+                <li class="nav-item">
-                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                  <a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
-                    <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
-                  </svg>
+                    </span>
-                  Browse source code
+                    Getting started
+                    <span class="nav-link-toggle"></span>
                   </a>
-                <h5 class="subheader">On this page</h5>
+                  <ul class="nav collapse" id="menu-base">
-                <ul class="list-unstyled">
+                    <li class="nav-item">
-                  <li class="toc-entry toc-h2"><a href="#default-markup">Default markup</a></li>
+                      <a href="../docs/index.html" class="nav-link">
-                  <li class="toc-entry toc-h2"><a href="#alert-links">Alert links</a></li>
+                        Introduction
-                  <li class="toc-entry toc-h2"><a href="#dismissible-alerts">Dismissible alerts</a></li>
+                      </a>
-                  <li class="toc-entry toc-h2"><a href="#alerts-with-icons">Alerts with icons</a></li>
+                    </li>
-                  <li class="toc-entry toc-h2"><a href="#alert-with-avatar">Alert with avatar</a></li>
+                    <li class="nav-item">
-                  <li class="toc-entry toc-h2"><a href="#alert-with-buttons">Alert with buttons</a></li>
+                      <a href="../docs/colors.html" class="nav-link">
+                        Colors
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/typography.html" class="nav-link">
+                        Typography
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/icons.html" class="nav-link">
+                        Icons
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
+                    </span>
+                    Components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav collapse show" id="menu-components">
+                    <li class="nav-item">
+                      <a href="../docs/alerts.html" class="nav-link active">
+                        Alerts
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/avatars.html" class="nav-link">
+                        Avatars
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/badges.html" class="nav-link">
+                        Badges
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/breadcrumb.html" class="nav-link">
+                        Breadcrumb
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/buttons.html" class="nav-link">
+                        Buttons
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/cards.html" class="nav-link">
+                        Cards
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/carousel.html" class="nav-link">
+                        Carousel
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/dropdowns.html" class="nav-link">
+                        Dropdowns
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/divider.html" class="nav-link">
+                        Divider
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/empty.html" class="nav-link">
+                        Empty states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/modals.html" class="nav-link">
+                        Modals
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/payments.html" class="nav-link">
+                        Payments
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/range-slider.html" class="nav-link">
+                        Range slider
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/ribbons.html" class="nav-link">
+                        Ribbons
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/skeleton.html" class="nav-link">
+                        Skeleton
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/spinners.html" class="nav-link">
+                        Spinners
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/steps.html" class="nav-link">
+                        Steps
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/switch-icon.html" class="nav-link">
+                        Switch icon
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tables.html" class="nav-link">
+                        Tables
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tabs.html" class="nav-link">
+                        Tabs
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/timelines.html" class="nav-link">
+                        Timelines
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/toasts.html" class="nav-link">
+                        Toasts
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tooltips.html" class="nav-link">
+                        Tooltips
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
+                    </span>
+                    Utilities
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/cursors.html" class="nav-link">
+                        Cursors
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
+                    </span>
+                    Plugins
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav collapse" id="menu-plugins">
+                    <li class="nav-item">
+                      <a href="../docs/autosize.html" class="nav-link">
+                        Autosize
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/input-mask.html" class="nav-link">
+                        Form input mask
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/flags.html" class="nav-link">
+                        Flags
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/charts.html" class="nav-link">
+                        Charts
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="../changelog.html" class="nav-link">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
+                    </span>
+                    Changelog
+                    <span class="badge bg-blue-lt ml-auto">1.0.0-alpha.12</span>
+                  </a>
+                </li>
               </ul>
-              </div>
             </div>
             <div class="col-lg-9">
               <div class="card card-lg">
                 <div class="card-body">
                   <div class="markdown">
-                    <div class="d-flex">
+                    <div class="mb-5">
-                      <h2 class="h1 mt-0 mb-3">Alerts</h2>
+                      <div class="d-flex mb-3">
+                        <h1 class="mt-0">Alerts</h1>
                         <p class="ml-auto">
                           <a href="https://getbootstrap.com/docs/4.4/components/alerts/" target="_blank">
-                          <svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
-                            <path stroke="none" d="M0 0h24v24H0z"/>
-                            <path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
-                            <line x1="10" y1="14" x2="20" y2="4" />
-                            <polyline points="15 4 20 4 20 9" />
-                          </svg>
                             Bootstrap documentation
                           </a>
                         </p>
                       </div>
                       <p>Alert messages are used to inform users of the status of their action and help them solve any problems that might have occurred. Good design of alert modals is very important for the overall user experience of a website or app.</p>
+                    </div>
                     <h2 id="default-markup">Default markup</h2>
                     <p>Depending on the information you need to convey, you can use one of the following types of alert messages - <strong>success</strong>, <strong>info</strong>, <strong>warning</strong> or <strong>danger</strong>. Using the right type of alert modal will help draw users’ attention to the message and prompt them to take action.</p>
                     <div class="example no_toc_section">
@@ -675,16 +701,16 @@
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <div class="alert alert-success" role="alert">
-                          This is a success alert — <a href="#" class="alert-link">check it out</a>!
+                          This is a success alert — <a href="javascript:void()" class="alert-link">check it out</a>!
                         </div>
                         <div class="alert alert-info" role="alert">
-                          This is a info alert — <a href="#" class="alert-link">check it out</a>!
+                          This is a info alert — <a href="javascript:void()" class="alert-link">check it out</a>!
                         </div>
                         <div class="alert alert-warning" role="alert">
-                          This is a warning alert — <a href="#" class="alert-link">check it out</a>!
+                          This is a warning alert — <a href="javascript:void()" class="alert-link">check it out</a>!
                         </div>
                         <div class="alert alert-danger" role="alert">
-                          This is a danger alert — <a href="#" class="alert-link">check it out</a>!
+                          This is a danger alert — <a href="javascript:void()" class="alert-link">check it out</a>!
                         </div>
                       </div>
                     </div>
@@ -705,24 +731,24 @@
                       </figure>
                     </div>
                     <h2 id="dismissible-alerts">Dismissible alerts</h2>
-                    <p>Add the <code class="highlighter-rouge">x</code> close button to make an alert modal dismissible. Thanks to that, your alert modal will disappear only once the user closes it.</p>
+                    <p>Add the <code class="language-plaintext highlighter-rouge">x</code> close button to make an alert modal dismissible. Thanks to that, your alert modal will disappear only once the user closes it.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <div class="alert alert-success alert-dismissible" role="alert">
                           This is a success alert — check it out!
-                          <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
+                          <a href="javascript:void()" class="btn-close" data-dismiss="alert" aria-label="close"></a>
                         </div>
                         <div class="alert alert-info alert-dismissible" role="alert">
                           This is a info alert — check it out!
-                          <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
+                          <a href="javascript:void()" class="btn-close" data-dismiss="alert" aria-label="close"></a>
                         </div>
                         <div class="alert alert-warning alert-dismissible" role="alert">
                           This is a warning alert — check it out!
-                          <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
+                          <a href="javascript:void()" class="btn-close" data-dismiss="alert" aria-label="close"></a>
                         </div>
                         <div class="alert alert-danger alert-dismissible" role="alert">
                           This is a danger alert — check it out!
-                          <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
+                          <a href="javascript:void()" class="btn-close" data-dismiss="alert" aria-label="close"></a>
                         </div>
                       </div>
                     </div>
@@ -730,19 +756,19 @@
                       <figure class="highlight">
                         <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-success alert-dismissible"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
   This is a success alert — check it out!
-  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"close"</span><span class="nt">&gt;</span><span class="ni">&amp;times;</span><span class="nt">&lt;/a&gt;</span>
+  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn-close"</span> <span class="na">data-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"close"</span><span class="nt">&gt;&lt;/a&gt;</span>
 <span class="nt">&lt;/div&gt;</span>
 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-info alert-dismissible"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
   This is a info alert — check it out!
-  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"close"</span><span class="nt">&gt;</span><span class="ni">&amp;times;</span><span class="nt">&lt;/a&gt;</span>
+  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn-close"</span> <span class="na">data-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"close"</span><span class="nt">&gt;&lt;/a&gt;</span>
 <span class="nt">&lt;/div&gt;</span>
 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-warning alert-dismissible"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
   This is a warning alert — check it out!
-  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"close"</span><span class="nt">&gt;</span><span class="ni">&amp;times;</span><span class="nt">&lt;/a&gt;</span>
+  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn-close"</span> <span class="na">data-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"close"</span><span class="nt">&gt;&lt;/a&gt;</span>
 <span class="nt">&lt;/div&gt;</span>
 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-danger alert-dismissible"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
   This is a danger alert — check it out!
-  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"close"</span><span class="nt">&gt;</span><span class="ni">&amp;times;</span><span class="nt">&lt;/a&gt;</span>
+  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn-close"</span> <span class="na">data-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"close"</span><span class="nt">&gt;&lt;/a&gt;</span>
 <span class="nt">&lt;/div&gt;</span></code></pre>
                       </figure>
                     </div>
@@ -751,36 +777,19 @@
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <div class="alert alert-success" role="alert">
-                          <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M5 12l5 5l10 -10" /></svg>
-                            <path stroke="none" d="M0 0h24v24H0z" />
-                            <polyline points="20 7 10 17 5 12" />
-                          </svg>
                           This is a success alert — check it out!
                         </div>
                         <div class="alert alert-info" role="alert">
-                          <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><circle cx="12" cy="12" r="9" /><line x1="12" y1="8" x2="12.01" y2="8" /><polyline points="11 12 12 12 12 16 13 16" /></svg>
-                            <path stroke="none" d="M0 0h24v24H0z" />
-                            <circle cx="12" cy="12" r="9" />
-                            <line x1="12" y1="8" x2="12.01" y2="8" />
-                            <polyline points="11 12 12 12 12 16 13 16" />
-                          </svg>
                           This is a info alert — check it out!
                         </div>
                         <div class="alert alert-warning" role="alert">
-                          <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M12 9v2m0 4v.01" /><path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75" /></svg>
-                            <path stroke="none" d="M0 0h24v24H0z" />
-                            <path d="M12 9v2m0 4v.01" />
-                            <path d="M5.07 19H19a2 2 0 0 0 1.75 -2.75L13.75 4a2 2 0 0 0 -3.5 0L3.25 16.25a2 2 0 0 0 1.75 2.75" />
-                          </svg>
                           This is a warning alert — check it out!
                         </div>
                         <div class="alert alert-danger" role="alert">
-                          <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><circle cx="12" cy="12" r="9" /><line x1="12" y1="8" x2="12" y2="12" /><line x1="12" y1="16" x2="12.01" y2="16" /></svg>
-                            <path stroke="none" d="M0 0h24v24H0z" />
-                            <circle cx="12" cy="12" r="9" />
-                            <line x1="12" y1="8" x2="12" y2="12" />
-                            <line x1="12" y1="16" x2="12.01" y2="16" />
-                          </svg>
                           This is a danger alert — check it out!
                         </div>
                       </div>
@@ -788,19 +797,19 @@
                     <div class="example-code">
                       <figure class="highlight">
                         <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-success"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
-  <span class="c">&lt;!-- SVG icon code --&gt;</span>
+  <span class="c">&lt;!-- SVG icon code with class="mr-1" --&gt;</span>
   This is a success alert — check it out!
 <span class="nt">&lt;/div&gt;</span>
 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-info"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
-  <span class="c">&lt;!-- SVG icon code --&gt;</span>
+  <span class="c">&lt;!-- SVG icon code with class="mr-1" --&gt;</span>
   This is a info alert — check it out!
 <span class="nt">&lt;/div&gt;</span>
 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-warning"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
-  <span class="c">&lt;!-- SVG icon code --&gt;</span>
+  <span class="c">&lt;!-- SVG icon code with class="mr-1" --&gt;</span>
   This is a warning alert — check it out!
 <span class="nt">&lt;/div&gt;</span>
 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-danger"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
-  <span class="c">&lt;!-- SVG icon code --&gt;</span>
+  <span class="c">&lt;!-- SVG icon code with class="mr-1" --&gt;</span>
   This is a danger alert — check it out!
 <span class="nt">&lt;/div&gt;</span></code></pre>
                       </figure>
@@ -855,10 +864,10 @@
                           <h3>Some Title</h3>
                           <p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
                           <div class="btn-list">
-                            <a href="#" class="btn btn-success">Save changes</a>
+                            <a href="javascript:void()" class="btn btn-success">Save changes</a>
-                            <a href="#" class="btn btn-secondary">Cancel</a>
+                            <a href="javascript:void()" class="btn">Cancel</a>
                           </div>
-                          <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
+                          <a href="javascript:void()" class="btn-close" data-dismiss="alert" aria-label="close"></a>
                         </div>
                       </div>
                     </div>
@@ -869,9 +878,9 @@
   <span class="nt">&lt;p&gt;</span>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.<span class="nt">&lt;/p&gt;</span>
   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-list"</span><span class="nt">&gt;</span>
     <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-success"</span><span class="nt">&gt;</span>Save changes<span class="nt">&lt;/a&gt;</span>
-    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">&gt;</span>Cancel<span class="nt">&lt;/a&gt;</span>
+    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>Cancel<span class="nt">&lt;/a&gt;</span>
   <span class="nt">&lt;/div&gt;</span>
-  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"close"</span><span class="nt">&gt;</span><span class="ni">&amp;times;</span><span class="nt">&lt;/a&gt;</span>
+  <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn-close"</span> <span class="na">data-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"close"</span><span class="nt">&gt;&lt;/a&gt;</span>
 <span class="nt">&lt;/div&gt;</span></code></pre>
                       </figure>
                     </div>
@@ -881,7 +890,7 @@
             </div>
           </div>
         </div>
-        <footer class="footer footer-transparent">
+        <footer class="footer footer-transparent d-print-none">
           <div class="container">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ml-lg-auto">
@@ -892,9 +901,16 @@
                 </ul>
               </div>
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item">
                     Copyright © 2020
                     <a href=".." class="link-secondary">Tabler</a>.
                     All rights reserved.
+                  </li>
+                  <li class="list-inline-item">
+                    <a href="../changelog.html" class="link-secondary">v1.0.0-alpha.12</a>
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
@@ -903,7 +919,6 @@
     </div>
     <!-- Libs JS -->
     <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="../dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
     <script>

demo/docs/autosize.html

@@ -1,18 +1,18 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.5
+* @version 1.0.0-alpha.12
-* @link https://github.com/tabler/tabler
+* @link https://tabler.io
-* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Copyright 2018-2020 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
   <head>
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <title>Autosize - Documentation - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <title>Autosize - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
@@ -25,22 +25,10 @@
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
     <meta name="description" content="The autosize element will automatically adjust the textarea height and make it easier for users to follow as they type."/>
-    <!-- Libs CSS -->
+    <!-- CSS files -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
-    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
-    <!-- Tabler Core -->
     <link href="../dist/css/tabler.min.css" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
     <link href="../dist/css/tabler-flags.min.css" rel="stylesheet"/>
     <link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
-    <link href="../dist/css/tabler-buttons.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
     <style>
       body {
@@ -50,22 +38,18 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <header class="navbar navbar-expand-md navbar-light">
+      <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
           <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
             <span class="navbar-toggler-icon"></span>
           </button>
           <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-image">
+            <img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
           </a>
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item dropdown d-none d-md-flex mr-3">
               <a href="#" class="nav-link px-0" data-toggle="dropdown" tabindex="-1">
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
-                  <path stroke="none" d="M0 0h24v24H0z"/>
-                  <path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" />
-                  <path d="M9 17v1a3 3 0 0 0 6 0v-1" />
-                </svg>
                 <span class="badge bg-red"></span>
               </a>
               <div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
@@ -78,54 +62,32 @@
             </div>
             <div class="nav-item dropdown">
               <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
+                <span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
                 <div class="d-none d-xl-block pl-2">
                   <div>Paweł Kuna</div>
                   <div class="mt-1 small text-muted">UI Designer</div>
                 </div>
               </a>
-              <div class="dropdown-menu dropdown-menu-right">
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
+                <a href="#" class="dropdown-item">Set status</a>
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <a href="#" class="dropdown-item">Profile & account</a>
-                    <path stroke="none" d="M0 0h24v24H0z"/>
+                <a href="#" class="dropdown-item">Feedback</a>
-                    <path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-                    <circle cx="12" cy="12" r="3" />
-                  </svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                    <path stroke="none" d="M0 0h24v24H0z"/>
-                    <path d="M9 7 h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" />
-                    <path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" />
-                    <line x1="16" y1="5" x2="19" y2="8" />
-                  </svg>
-                  Another action
-                </a>
                 <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <a href="#" class="dropdown-item">Settings</a>
-                    <path stroke="none" d="M0 0h24v24H0z"/>
+                <a href="#" class="dropdown-item">Logout</a>
-                    <line x1="12" y1="5" x2="12" y2="19" />
-                    <line x1="5" y1="12" x2="19" y2="12" />
-                  </svg>
-                  Separated link</a>
               </div>
             </div>
           </div>
         </div>
       </header>
       <div class="navbar-expand-md">
-        <div class="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar navbar-light">
             <div class="container-xl">
               <ul class="navbar-nav">
                 <li class="nav-item">
                   <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="5 12 3 12 12 3 21 12 19 12" />
-                      <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
-                      <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Home
@@ -134,14 +96,7 @@
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" />
-                      <line x1="12" y1="12" x2="20" y2="7.5" />
-                      <line x1="12" y1="12" x2="12" y2="21" />
-                      <line x1="12" y1="12" x2="4" y2="7.5" />
-                      <line x1="16" y1="5.25" x2="8" y2="9.75" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       User Interface
@@ -168,11 +123,21 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../cards-masonry.html" >
+                        Cards Masonry
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../dropdowns.html" >
                         Dropdowns
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../icons.html" >
+                        Icons
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../modals.html" >
                         Modals
@@ -198,6 +163,26 @@
                         Charts
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../charts-heatmap.html" >
+                        Charts heatmap
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../skeleton.html" >
+                        Skeleton
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../tabs.html" >
+                        Tabs
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../tables.html" >
                         Tables
@@ -218,6 +203,16 @@
                         Lists
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../typography.html" >
+                        Typography
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../markdown.html" >
+                        Markdown
+                      </a>
+                    </li>
                     <li class="dropright">
                       <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
                         Authentication
@@ -234,24 +229,16 @@
                         Error pages
                       </a>
                       <div class="dropdown-menu">
-                      <a href="../400.html" class="dropdown-item">400 page</a>
+                        <a href="../error-404.html" class="dropdown-item">404 page</a>
-                      <a href="../401.html" class="dropdown-item">401 page</a>
+                        <a href="../error-500.html" class="dropdown-item">500 page</a>
-                      <a href="../403.html" class="dropdown-item">403 page</a>
+                        <a href="../error-maintenance.html" class="dropdown-item">Maintenance page</a>
-                      <a href="../404.html" class="dropdown-item">404 page</a>
-                      <a href="../500.html" class="dropdown-item">500 page</a>
-                      <a href="../503.html" class="dropdown-item">503 page</a>
-                      <a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
                       </div>
                     </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="9 11 12 14 20 6" />
-                      <path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Form elements
@@ -260,10 +247,7 @@
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Extra
@@ -305,6 +289,11 @@
                         Gallery
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../license.html" >
+                        License
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../profile.html" >
                         Profile
@@ -315,17 +304,16 @@
                         Music
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../welcome.html" >
+                        Welcome
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <rect x="4" y="4" width="6" height="5" rx="2" />
-                      <rect x="4" y="13" width="6" height="7" rx="2" />
-                      <rect x="14" y="4" width="6" height="7" rx="2" />
-                      <rect x="14" y="15" width="6" height="5" rx="2" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Layout
@@ -367,11 +355,21 @@
                         Navbar dark
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../layout-navbar-overlap.html" >
+                        Navbar overlap
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../layout-dark.html" >
                         Dark mode
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../layout-rtl.html" >
+                        RTL mode
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../layout-fluid.html" >
                         Fluid
@@ -384,199 +382,21 @@
                     </li>
                   </ul>
                 </li>
-              <li class="nav-item active dropdown">
+                <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link" href="../docs/index.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="14 3 14 8 19 8" />
-                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
-                      <line x1="9" y1="9" x2="10" y2="9" />
-                      <line x1="9" y1="13" x2="15" y2="13" />
-                      <line x1="9" y1="17" x2="15" y2="17" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
-                    Docs
+                      Documentation
                     </span>
                   </a>
-                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-3">
-                  <li >
-                    <a class="dropdown-item" href="../docs/index.html" >
-                      Introduction
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/alerts.html" >
-                      Alerts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item active" href="../docs/autosize.html" >
-                      Autosize
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/avatars.html" >
-                      Avatars
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/badges.html" >
-                      Badges
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/breadcrumb.html" >
-                      Breadcrumb
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/buttons.html" >
-                      Buttons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/cards.html" >
-                      Cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/carousel.html" >
-                      Carousel
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/colors.html" >
-                      Colors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/countup.html" >
-                      Countup
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/cursors.html" >
-                      Cursors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/charts.html" >
-                      Charts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/dropdowns.html" >
-                      Dropdowns
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/divider.html" >
-                      Divider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/empty.html" >
-                      Empty states
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/flags.html" >
-                      Flags
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/form-elements.html" >
-                      Form elements
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/form-helpers.html" >
-                      Form helpers
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/input-mask.html" >
-                      Form input mask
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/modals.html" >
-                      Modals
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/progress.html" >
-                      Progress
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/payments.html" >
-                      Payments
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/range-slider.html" >
-                      Range slider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/ribbons.html" >
-                      Ribbons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/spinners.html" >
-                      Spinners
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/steps.html" >
-                      Steps
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tables.html" >
-                      Tables
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tabs.html" >
-                      Tabs
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/timelines.html" >
-                      Timelines
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/toasts.html" >
-                      Toasts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tooltips.html" >
-                      Tooltips
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/typography.html" >
-                      Typography
-                    </a>
-                  </li>
-                </ul>
                 </li>
               </ul>
               <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <circle cx="10" cy="10" r="7" />
-                      <line x1="21" y1="21" x2="15" y2="15" />
-                    </svg>
                     </span>
                     <input type="text" class="form-control" placeholder="Search…">
                   </div>
@@ -585,53 +405,269 @@
             </div>
           </div>
         </div>
+      </div>
       <div class="content">
         <div class="container-xl">
           <!-- Page title -->
-          <div class="page-header">
+          <div class="page-header d-print-none">
             <div class="row align-items-center">
-              <div class="col-auto">
+              <div class="col">
                 <h2 class="page-title">
                   Documentation
                 </h2>
               </div>
             </div>
           </div>
-          <div class="row justify-content-center">
+          <div class="row g-5">
-            <div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
+            <div class="d-none d-lg-block col-lg-3">
-              <div class="sticky-top">
+              <ul class="nav nav-pills nav-vertical">
-                <a href="https://github.com/tabler/tabler" class="btn btn-github mb-6 btn-block" target="_blank" rel="noreferrer">
+                <li class="nav-item">
-                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                  <a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
-                    <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
-                  </svg>
+                    </span>
-                  Browse source code
+                    Getting started
+                    <span class="nav-link-toggle"></span>
                   </a>
-                <h5 class="subheader">On this page</h5>
+                  <ul class="nav collapse" id="menu-base">
-                <ul class="list-unstyled">
+                    <li class="nav-item">
-                  <li class="toc-entry toc-h2"><a href="#default-markup">Default markup</a></li>
+                      <a href="../docs/index.html" class="nav-link">
+                        Introduction
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/colors.html" class="nav-link">
+                        Colors
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/typography.html" class="nav-link">
+                        Typography
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/icons.html" class="nav-link">
+                        Icons
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="false">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
+                    </span>
+                    Components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav collapse" id="menu-components">
+                    <li class="nav-item">
+                      <a href="../docs/alerts.html" class="nav-link">
+                        Alerts
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/avatars.html" class="nav-link">
+                        Avatars
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/badges.html" class="nav-link">
+                        Badges
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/breadcrumb.html" class="nav-link">
+                        Breadcrumb
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/buttons.html" class="nav-link">
+                        Buttons
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/cards.html" class="nav-link">
+                        Cards
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/carousel.html" class="nav-link">
+                        Carousel
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/dropdowns.html" class="nav-link">
+                        Dropdowns
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/divider.html" class="nav-link">
+                        Divider
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/empty.html" class="nav-link">
+                        Empty states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/modals.html" class="nav-link">
+                        Modals
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/payments.html" class="nav-link">
+                        Payments
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/range-slider.html" class="nav-link">
+                        Range slider
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/ribbons.html" class="nav-link">
+                        Ribbons
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/skeleton.html" class="nav-link">
+                        Skeleton
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/spinners.html" class="nav-link">
+                        Spinners
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/steps.html" class="nav-link">
+                        Steps
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/switch-icon.html" class="nav-link">
+                        Switch icon
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tables.html" class="nav-link">
+                        Tables
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tabs.html" class="nav-link">
+                        Tabs
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/timelines.html" class="nav-link">
+                        Timelines
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/toasts.html" class="nav-link">
+                        Toasts
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tooltips.html" class="nav-link">
+                        Tooltips
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
+                    </span>
+                    Utilities
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/cursors.html" class="nav-link">
+                        Cursors
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="true">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
+                    </span>
+                    Plugins
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav collapse show" id="menu-plugins">
+                    <li class="nav-item">
+                      <a href="../docs/autosize.html" class="nav-link active">
+                        Autosize
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/input-mask.html" class="nav-link">
+                        Form input mask
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/flags.html" class="nav-link">
+                        Flags
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/charts.html" class="nav-link">
+                        Charts
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="../changelog.html" class="nav-link">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
+                    </span>
+                    Changelog
+                    <span class="badge bg-blue-lt ml-auto">1.0.0-alpha.12</span>
+                  </a>
+                </li>
               </ul>
-              </div>
             </div>
             <div class="col-lg-9">
               <div class="card card-lg">
                 <div class="card-body">
                   <div class="markdown">
-                    <div class="d-flex">
+                    <div class="mb-5">
-                      <h2 class="h1 mt-0 mb-3">Autosize</h2>
+                      <div class="d-flex mb-3">
+                        <h1 class="mt-0">Autosize</h1>
                       </div>
                       <p>The autosize element will automatically adjust the textarea height and make it easier for users to follow as they type.</p>
+                    </div>
                     <h2 id="default-markup">Default markup</h2>
                     <p>Add the autosize element to your input to make it automatically adjust to the length of a text as a user types it.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <label class="form-label">Autosize example</label>
-                        <textarea class="form-control" data-toggle="autosize" placeholder="Typing something…"></textarea>
+                        <textarea class="form-control" data-toggle="autosize" placeholder="Type something…"></textarea>
                       </div>
                     </div>
                     <div class="example-code">
                       <figure class="highlight">
                         <pre><code class="language-html" data-lang="html"><span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Autosize example<span class="nt">&lt;/label&gt;</span>
-<span class="nt">&lt;textarea</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">data-toggle=</span><span class="s">"autosize"</span> <span class="na">placeholder=</span><span class="s">"Typing something…"</span><span class="nt">&gt;&lt;/textarea&gt;</span></code></pre>
+<span class="nt">&lt;textarea</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">data-toggle=</span><span class="s">"autosize"</span> <span class="na">placeholder=</span><span class="s">"Type something…"</span><span class="nt">&gt;&lt;/textarea&gt;</span></code></pre>
                       </figure>
                     </div>
                   </div>
@@ -640,7 +676,7 @@
             </div>
           </div>
         </div>
-        <footer class="footer footer-transparent">
+        <footer class="footer footer-transparent d-print-none">
           <div class="container">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ml-lg-auto">
@@ -651,9 +687,16 @@
                 </ul>
               </div>
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item">
                     Copyright © 2020
                     <a href=".." class="link-secondary">Tabler</a>.
                     All rights reserved.
+                  </li>
+                  <li class="list-inline-item">
+                    <a href="../changelog.html" class="link-secondary">v1.0.0-alpha.12</a>
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
@@ -662,20 +705,8 @@
     </div>
     <!-- Libs JS -->
     <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="../dist/libs/jquery/dist/jquery.slim.min.js"></script>
-    <script src="../dist/libs/autosize/dist/autosize.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
-    <script>
-      (function () {
-      	const elements = document.querySelectorAll('[data-toggle="autosize"]');
-      	if (elements.length) {
-      		elements.forEach(function (element) {
-      			autosize(element);
-      		});
-      	}
-      })();
-    </script>
     <script>
       document.body.style.display = "block"
     </script>

demo/docs/avatars.html

@@ -1,18 +1,18 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.5
+* @version 1.0.0-alpha.12
-* @link https://github.com/tabler/tabler
+* @link https://tabler.io
-* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Copyright 2018-2020 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
   <head>
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <title>Avatars - Documentation - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <title>Avatars - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
@@ -25,22 +25,10 @@
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
     <meta name="description" content="Avatars help customise various elements of a user interface and make the product experience more personalised. They are often used in communication apps, collaboration tools and social media."/>
-    <!-- Libs CSS -->
+    <!-- CSS files -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
-    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
-    <!-- Tabler Core -->
     <link href="../dist/css/tabler.min.css" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
     <link href="../dist/css/tabler-flags.min.css" rel="stylesheet"/>
     <link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
-    <link href="../dist/css/tabler-buttons.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
     <style>
       body {
@@ -50,22 +38,18 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <header class="navbar navbar-expand-md navbar-light">
+      <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
           <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
             <span class="navbar-toggler-icon"></span>
           </button>
           <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-image">
+            <img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
           </a>
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item dropdown d-none d-md-flex mr-3">
               <a href="#" class="nav-link px-0" data-toggle="dropdown" tabindex="-1">
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
-                  <path stroke="none" d="M0 0h24v24H0z"/>
-                  <path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" />
-                  <path d="M9 17v1a3 3 0 0 0 6 0v-1" />
-                </svg>
                 <span class="badge bg-red"></span>
               </a>
               <div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
@@ -78,54 +62,32 @@
             </div>
             <div class="nav-item dropdown">
               <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
+                <span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
                 <div class="d-none d-xl-block pl-2">
                   <div>Paweł Kuna</div>
                   <div class="mt-1 small text-muted">UI Designer</div>
                 </div>
               </a>
-              <div class="dropdown-menu dropdown-menu-right">
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
+                <a href="#" class="dropdown-item">Set status</a>
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <a href="#" class="dropdown-item">Profile & account</a>
-                    <path stroke="none" d="M0 0h24v24H0z"/>
+                <a href="#" class="dropdown-item">Feedback</a>
-                    <path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-                    <circle cx="12" cy="12" r="3" />
-                  </svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                    <path stroke="none" d="M0 0h24v24H0z"/>
-                    <path d="M9 7 h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" />
-                    <path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" />
-                    <line x1="16" y1="5" x2="19" y2="8" />
-                  </svg>
-                  Another action
-                </a>
                 <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <a href="#" class="dropdown-item">Settings</a>
-                    <path stroke="none" d="M0 0h24v24H0z"/>
+                <a href="#" class="dropdown-item">Logout</a>
-                    <line x1="12" y1="5" x2="12" y2="19" />
-                    <line x1="5" y1="12" x2="19" y2="12" />
-                  </svg>
-                  Separated link</a>
               </div>
             </div>
           </div>
         </div>
       </header>
       <div class="navbar-expand-md">
-        <div class="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar navbar-light">
             <div class="container-xl">
               <ul class="navbar-nav">
                 <li class="nav-item">
                   <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="5 12 3 12 12 3 21 12 19 12" />
-                      <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
-                      <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Home
@@ -134,14 +96,7 @@
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" />
-                      <line x1="12" y1="12" x2="20" y2="7.5" />
-                      <line x1="12" y1="12" x2="12" y2="21" />
-                      <line x1="12" y1="12" x2="4" y2="7.5" />
-                      <line x1="16" y1="5.25" x2="8" y2="9.75" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       User Interface
@@ -168,11 +123,21 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../cards-masonry.html" >
+                        Cards Masonry
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../dropdowns.html" >
                         Dropdowns
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../icons.html" >
+                        Icons
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../modals.html" >
                         Modals
@@ -198,6 +163,26 @@
                         Charts
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../charts-heatmap.html" >
+                        Charts heatmap
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../skeleton.html" >
+                        Skeleton
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../tabs.html" >
+                        Tabs
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../tables.html" >
                         Tables
@@ -218,6 +203,16 @@
                         Lists
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../typography.html" >
+                        Typography
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../markdown.html" >
+                        Markdown
+                      </a>
+                    </li>
                     <li class="dropright">
                       <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
                         Authentication
@@ -234,24 +229,16 @@
                         Error pages
                       </a>
                       <div class="dropdown-menu">
-                      <a href="../400.html" class="dropdown-item">400 page</a>
+                        <a href="../error-404.html" class="dropdown-item">404 page</a>
-                      <a href="../401.html" class="dropdown-item">401 page</a>
+                        <a href="../error-500.html" class="dropdown-item">500 page</a>
-                      <a href="../403.html" class="dropdown-item">403 page</a>
+                        <a href="../error-maintenance.html" class="dropdown-item">Maintenance page</a>
-                      <a href="../404.html" class="dropdown-item">404 page</a>
-                      <a href="../500.html" class="dropdown-item">500 page</a>
-                      <a href="../503.html" class="dropdown-item">503 page</a>
-                      <a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
                       </div>
                     </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="9 11 12 14 20 6" />
-                      <path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Form elements
@@ -260,10 +247,7 @@
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Extra
@@ -305,6 +289,11 @@
                         Gallery
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../license.html" >
+                        License
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../profile.html" >
                         Profile
@@ -315,17 +304,16 @@
                         Music
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../welcome.html" >
+                        Welcome
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <rect x="4" y="4" width="6" height="5" rx="2" />
-                      <rect x="4" y="13" width="6" height="7" rx="2" />
-                      <rect x="14" y="4" width="6" height="7" rx="2" />
-                      <rect x="14" y="15" width="6" height="5" rx="2" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Layout
@@ -367,11 +355,21 @@
                         Navbar dark
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../layout-navbar-overlap.html" >
+                        Navbar overlap
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../layout-dark.html" >
                         Dark mode
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../layout-rtl.html" >
+                        RTL mode
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../layout-fluid.html" >
                         Fluid
@@ -384,199 +382,21 @@
                     </li>
                   </ul>
                 </li>
-              <li class="nav-item active dropdown">
+                <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link" href="../docs/index.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="14 3 14 8 19 8" />
-                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
-                      <line x1="9" y1="9" x2="10" y2="9" />
-                      <line x1="9" y1="13" x2="15" y2="13" />
-                      <line x1="9" y1="17" x2="15" y2="17" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
-                    Docs
+                      Documentation
                     </span>
                   </a>
-                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-3">
-                  <li >
-                    <a class="dropdown-item" href="../docs/index.html" >
-                      Introduction
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/alerts.html" >
-                      Alerts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/autosize.html" >
-                      Autosize
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item active" href="../docs/avatars.html" >
-                      Avatars
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/badges.html" >
-                      Badges
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/breadcrumb.html" >
-                      Breadcrumb
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/buttons.html" >
-                      Buttons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/cards.html" >
-                      Cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/carousel.html" >
-                      Carousel
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/colors.html" >
-                      Colors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/countup.html" >
-                      Countup
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/cursors.html" >
-                      Cursors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/charts.html" >
-                      Charts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/dropdowns.html" >
-                      Dropdowns
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/divider.html" >
-                      Divider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/empty.html" >
-                      Empty states
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/flags.html" >
-                      Flags
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/form-elements.html" >
-                      Form elements
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/form-helpers.html" >
-                      Form helpers
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/input-mask.html" >
-                      Form input mask
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/modals.html" >
-                      Modals
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/progress.html" >
-                      Progress
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/payments.html" >
-                      Payments
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/range-slider.html" >
-                      Range slider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/ribbons.html" >
-                      Ribbons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/spinners.html" >
-                      Spinners
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/steps.html" >
-                      Steps
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tables.html" >
-                      Tables
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tabs.html" >
-                      Tabs
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/timelines.html" >
-                      Timelines
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/toasts.html" >
-                      Toasts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tooltips.html" >
-                      Tooltips
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/typography.html" >
-                      Typography
-                    </a>
-                  </li>
-                </ul>
                 </li>
               </ul>
               <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <circle cx="10" cy="10" r="7" />
-                      <line x1="21" y1="21" x2="15" y2="15" />
-                    </svg>
                     </span>
                     <input type="text" class="form-control" placeholder="Search…">
                   </div>
@@ -585,52 +405,259 @@
             </div>
           </div>
         </div>
+      </div>
       <div class="content">
         <div class="container-xl">
           <!-- Page title -->
-          <div class="page-header">
+          <div class="page-header d-print-none">
             <div class="row align-items-center">
-              <div class="col-auto">
+              <div class="col">
                 <h2 class="page-title">
                   Documentation
                 </h2>
               </div>
             </div>
           </div>
-          <div class="row justify-content-center">
+          <div class="row g-5">
-            <div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
+            <div class="d-none d-lg-block col-lg-3">
-              <div class="sticky-top">
+              <ul class="nav nav-pills nav-vertical">
-                <a href="https://github.com/tabler/tabler" class="btn btn-github mb-6 btn-block" target="_blank" rel="noreferrer">
+                <li class="nav-item">
-                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                  <a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
-                    <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
-                  </svg>
+                    </span>
-                  Browse source code
+                    Getting started
+                    <span class="nav-link-toggle"></span>
                   </a>
-                <h5 class="subheader">On this page</h5>
+                  <ul class="nav collapse" id="menu-base">
-                <ul class="list-unstyled">
+                    <li class="nav-item">
-                  <li class="toc-entry toc-h2"><a href="#default-markup">Default markup</a></li>
+                      <a href="../docs/index.html" class="nav-link">
-                  <li class="toc-entry toc-h2"><a href="#avatar-image">Avatar image</a></li>
+                        Introduction
-                  <li class="toc-entry toc-h2"><a href="#initials">Initials</a></li>
+                      </a>
-                  <li class="toc-entry toc-h2"><a href="#avatar-icons">Avatar icons</a></li>
+                    </li>
-                  <li class="toc-entry toc-h2"><a href="#avatar-initials-color">Avatar initials color</a></li>
+                    <li class="nav-item">
-                  <li class="toc-entry toc-h2"><a href="#avatar-size">Avatar size</a></li>
+                      <a href="../docs/colors.html" class="nav-link">
-                  <li class="toc-entry toc-h2"><a href="#avatar-status">Avatar status</a></li>
+                        Colors
-                  <li class="toc-entry toc-h2"><a href="#avatar-shape">Avatar shape</a></li>
+                      </a>
-                  <li class="toc-entry toc-h2"><a href="#avatars-list">Avatars list</a></li>
+                    </li>
-                  <li class="toc-entry toc-h2"><a href="#stacked-list">Stacked list</a></li>
+                    <li class="nav-item">
+                      <a href="../docs/typography.html" class="nav-link">
+                        Typography
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/icons.html" class="nav-link">
+                        Icons
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
+                    </span>
+                    Components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav collapse show" id="menu-components">
+                    <li class="nav-item">
+                      <a href="../docs/alerts.html" class="nav-link">
+                        Alerts
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/avatars.html" class="nav-link active">
+                        Avatars
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/badges.html" class="nav-link">
+                        Badges
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/breadcrumb.html" class="nav-link">
+                        Breadcrumb
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/buttons.html" class="nav-link">
+                        Buttons
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/cards.html" class="nav-link">
+                        Cards
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/carousel.html" class="nav-link">
+                        Carousel
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/dropdowns.html" class="nav-link">
+                        Dropdowns
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/divider.html" class="nav-link">
+                        Divider
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/empty.html" class="nav-link">
+                        Empty states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/modals.html" class="nav-link">
+                        Modals
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/payments.html" class="nav-link">
+                        Payments
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/range-slider.html" class="nav-link">
+                        Range slider
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/ribbons.html" class="nav-link">
+                        Ribbons
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/skeleton.html" class="nav-link">
+                        Skeleton
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/spinners.html" class="nav-link">
+                        Spinners
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/steps.html" class="nav-link">
+                        Steps
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/switch-icon.html" class="nav-link">
+                        Switch icon
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tables.html" class="nav-link">
+                        Tables
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tabs.html" class="nav-link">
+                        Tabs
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/timelines.html" class="nav-link">
+                        Timelines
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/toasts.html" class="nav-link">
+                        Toasts
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tooltips.html" class="nav-link">
+                        Tooltips
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
+                    </span>
+                    Utilities
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/cursors.html" class="nav-link">
+                        Cursors
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
+                    </span>
+                    Plugins
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav collapse" id="menu-plugins">
+                    <li class="nav-item">
+                      <a href="../docs/autosize.html" class="nav-link">
+                        Autosize
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/input-mask.html" class="nav-link">
+                        Form input mask
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/flags.html" class="nav-link">
+                        Flags
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/charts.html" class="nav-link">
+                        Charts
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="../changelog.html" class="nav-link">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
+                    </span>
+                    Changelog
+                    <span class="badge bg-blue-lt ml-auto">1.0.0-alpha.12</span>
+                  </a>
+                </li>
               </ul>
-              </div>
             </div>
             <div class="col-lg-9">
               <div class="card card-lg">
                 <div class="card-body">
                   <div class="markdown">
-                    <div class="d-flex">
+                    <div class="mb-5">
-                      <h2 class="h1 mt-0 mb-3">Avatars</h2>
+                      <div class="d-flex mb-3">
+                        <h1 class="mt-0">Avatars</h1>
                       </div>
                       <p>Avatars help customise various elements of a user interface and make the product experience more personalised. They are often used in communication apps, collaboration tools and social media.</p>
+                    </div>
                     <h2 id="default-markup">Default markup</h2>
-                    <p>Use the <code class="highlighter-rouge">avatar</code> class to add an avatar to your interface design for greater customisation.</p>
+                    <p>Use the <code class="language-plaintext highlighter-rouge">avatar</code> class to add an avatar to your interface design for greater customisation.</p>
                     <div class="example no_toc_section example-centered">
                       <div class="example-content">
                         <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
@@ -685,35 +712,21 @@
                     <p>Apart from pictures and initials, you can also use icons to make the avatars more universal.</p>
                     <div class="example no_toc_section example-centered">
                       <div class="example-content">
-                        <span class="avatar"><svg xmlns="http://www.w3.org/2000/svg" class="icon avatar-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <span class="avatar"><svg xmlns="http://www.w3.org/2000/svg" class="icon avatar-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><circle cx="12" cy="7" r="4" /><path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" /></svg>
-                            <path stroke="none" d="M0 0h24v24H0z" />
-                            <circle cx="12" cy="7" r="4" />
-                            <path d="M5.5 21v-2a4 4 0 0 1 4 -4h5a4 4 0 0 1 4 4v2" />
-                          </svg>
                         </span>
-                        <span class="avatar"><svg xmlns="http://www.w3.org/2000/svg" class="icon avatar-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <span class="avatar"><svg xmlns="http://www.w3.org/2000/svg" class="icon avatar-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
-                            <path stroke="none" d="M0 0h24v24H0z" />
-                            <line x1="12" y1="5" x2="12" y2="19" />
-                            <line x1="5" y1="12" x2="19" y2="12" />
-                          </svg>
                         </span>
-                        <span class="avatar"><svg xmlns="http://www.w3.org/2000/svg" class="icon avatar-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        <span class="avatar"><svg xmlns="http://www.w3.org/2000/svg" class="icon avatar-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><circle cx="9" cy="7" r="4" /><path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" /><path d="M16 11h6m-3 -3v6" /></svg>
-                            <path stroke="none" d="M0 0h24v24H0z" />
-                            <circle cx="8.5" cy="7" r="4" />
-                            <path d="M2 21v-2a4 4 0 0 1 4 -4h5a4 4 0 0 1 4 4v2" />
-                            <line x1="16" y1="11" x2="22" y2="11" />
-                            <line x1="19" y1="8" x2="19" y2="14" />
-                          </svg>
                         </span>
                       </div>
                     </div>
                     <div class="example-code">
                       <figure class="highlight">
-                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&gt;</span>
+                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code with class="avatar-icon" --&gt;</span>
 <span class="nt">&lt;/span&gt;</span>
-<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code with class="avatar-icon" --&gt;</span>
 <span class="nt">&lt;/span&gt;</span>
-<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code with class="avatar-icon" --&gt;</span>
 <span class="nt">&lt;/span&gt;</span></code></pre>
                       </figure>
                     </div>
@@ -746,6 +759,7 @@
                         <span class="avatar avatar-md" style="background-image: url(../static/avatars/002f.jpg)"></span>
                         <span class="avatar">EP</span>
                         <span class="avatar avatar-sm" style="background-image: url(../static/avatars/001f.jpg)"></span>
+                        <span class="avatar avatar-xs" style="background-image: url(../static/avatars/000f.jpg)"></span>
                       </div>
                     </div>
                     <div class="example-code">
@@ -754,7 +768,8 @@
 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-lg"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-md"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span><span class="nt">&gt;</span>EP<span class="nt">&lt;/span&gt;</span>
-<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-sm"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span></code></pre>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-sm"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-xs"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span></code></pre>
                       </figure>
                     </div>
                     <h2 id="avatar-status">Avatar status</h2>
@@ -814,22 +829,22 @@
                     <div class="example no_toc_section example-centered">
                       <div class="example-content">
                         <div class="avatar-list">
-                          <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
+                          <span class="avatar avatar-sm avatar-rounded" style="background-image: url(../static/avatars/000m.jpg)"></span>
-                          <span class="avatar">JL</span>
+                          <span class="avatar avatar-sm avatar-rounded">JL</span>
-                          <span class="avatar" style="background-image: url(../static/avatars/002m.jpg)"></span>
+                          <span class="avatar avatar-sm avatar-rounded" style="background-image: url(../static/avatars/002m.jpg)"></span>
-                          <span class="avatar" style="background-image: url(../static/avatars/003m.jpg)"></span>
+                          <span class="avatar avatar-sm avatar-rounded" style="background-image: url(../static/avatars/003m.jpg)"></span>
-                          <span class="avatar" style="background-image: url(../static/avatars/000f.jpg)"></span>
+                          <span class="avatar avatar-sm avatar-rounded" style="background-image: url(../static/avatars/000f.jpg)"></span>
                         </div>
                       </div>
                     </div>
                     <div class="example-code">
                       <figure class="highlight">
                         <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"avatar-list"</span><span class="nt">&gt;</span>
-  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
+  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-sm avatar-rounded"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
-  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span><span class="nt">&gt;</span>JL<span class="nt">&lt;/span&gt;</span>
+  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-sm avatar-rounded"</span><span class="nt">&gt;</span>JL<span class="nt">&lt;/span&gt;</span>
-  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
+  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-sm avatar-rounded"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
-  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
+  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-sm avatar-rounded"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
-  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
+  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-sm avatar-rounded"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
 <span class="nt">&lt;/div&gt;</span></code></pre>
                       </figure>
                     </div>
@@ -865,7 +880,7 @@
             </div>
           </div>
         </div>
-        <footer class="footer footer-transparent">
+        <footer class="footer footer-transparent d-print-none">
           <div class="container">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ml-lg-auto">
@@ -876,9 +891,16 @@
                 </ul>
               </div>
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item">
                     Copyright © 2020
                     <a href=".." class="link-secondary">Tabler</a>.
                     All rights reserved.
+                  </li>
+                  <li class="list-inline-item">
+                    <a href="../changelog.html" class="link-secondary">v1.0.0-alpha.12</a>
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
@@ -887,7 +909,6 @@
     </div>
     <!-- Libs JS -->
     <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="../dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
     <script>

demo/docs/breadcrumb.html

@@ -1,18 +1,18 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.5
+* @version 1.0.0-alpha.12
-* @link https://github.com/tabler/tabler
+* @link https://tabler.io
-* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Copyright 2018-2020 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
   <head>
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <title>Breadcrumb - Documentation - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <title>Breadcrumb - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
@@ -25,22 +25,10 @@
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
     <meta name="description" content="Breadcrumbs are used to show the current website or app location and reduce the number of actions users have to take. Thanks to breadcrumbs, they can easily navigate within the website hierarchy and better understand its structure."/>
-    <!-- Libs CSS -->
+    <!-- CSS files -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
-    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
-    <!-- Tabler Core -->
     <link href="../dist/css/tabler.min.css" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
     <link href="../dist/css/tabler-flags.min.css" rel="stylesheet"/>
     <link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
-    <link href="../dist/css/tabler-buttons.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
     <style>
       body {
@@ -50,22 +38,18 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <header class="navbar navbar-expand-md navbar-light">
+      <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
           <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
             <span class="navbar-toggler-icon"></span>
           </button>
           <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-image">
+            <img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
           </a>
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item dropdown d-none d-md-flex mr-3">
               <a href="#" class="nav-link px-0" data-toggle="dropdown" tabindex="-1">
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
-                  <path stroke="none" d="M0 0h24v24H0z"/>
-                  <path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" />
-                  <path d="M9 17v1a3 3 0 0 0 6 0v-1" />
-                </svg>
                 <span class="badge bg-red"></span>
               </a>
               <div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
@@ -78,54 +62,32 @@
             </div>
             <div class="nav-item dropdown">
               <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
+                <span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
                 <div class="d-none d-xl-block pl-2">
                   <div>Paweł Kuna</div>
                   <div class="mt-1 small text-muted">UI Designer</div>
                 </div>
               </a>
-              <div class="dropdown-menu dropdown-menu-right">
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
+                <a href="#" class="dropdown-item">Set status</a>
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <a href="#" class="dropdown-item">Profile & account</a>
-                    <path stroke="none" d="M0 0h24v24H0z"/>
+                <a href="#" class="dropdown-item">Feedback</a>
-                    <path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-                    <circle cx="12" cy="12" r="3" />
-                  </svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                    <path stroke="none" d="M0 0h24v24H0z"/>
-                    <path d="M9 7 h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" />
-                    <path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" />
-                    <line x1="16" y1="5" x2="19" y2="8" />
-                  </svg>
-                  Another action
-                </a>
                 <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <a href="#" class="dropdown-item">Settings</a>
-                    <path stroke="none" d="M0 0h24v24H0z"/>
+                <a href="#" class="dropdown-item">Logout</a>
-                    <line x1="12" y1="5" x2="12" y2="19" />
-                    <line x1="5" y1="12" x2="19" y2="12" />
-                  </svg>
-                  Separated link</a>
               </div>
             </div>
           </div>
         </div>
       </header>
       <div class="navbar-expand-md">
-        <div class="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar navbar-light">
             <div class="container-xl">
               <ul class="navbar-nav">
                 <li class="nav-item">
                   <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="5 12 3 12 12 3 21 12 19 12" />
-                      <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
-                      <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Home
@@ -134,14 +96,7 @@
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" />
-                      <line x1="12" y1="12" x2="20" y2="7.5" />
-                      <line x1="12" y1="12" x2="12" y2="21" />
-                      <line x1="12" y1="12" x2="4" y2="7.5" />
-                      <line x1="16" y1="5.25" x2="8" y2="9.75" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       User Interface
@@ -168,11 +123,21 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../cards-masonry.html" >
+                        Cards Masonry
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../dropdowns.html" >
                         Dropdowns
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../icons.html" >
+                        Icons
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../modals.html" >
                         Modals
@@ -198,6 +163,26 @@
                         Charts
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../charts-heatmap.html" >
+                        Charts heatmap
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../skeleton.html" >
+                        Skeleton
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../tabs.html" >
+                        Tabs
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../tables.html" >
                         Tables
@@ -218,6 +203,16 @@
                         Lists
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../typography.html" >
+                        Typography
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../markdown.html" >
+                        Markdown
+                      </a>
+                    </li>
                     <li class="dropright">
                       <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
                         Authentication
@@ -234,24 +229,16 @@
                         Error pages
                       </a>
                       <div class="dropdown-menu">
-                      <a href="../400.html" class="dropdown-item">400 page</a>
+                        <a href="../error-404.html" class="dropdown-item">404 page</a>
-                      <a href="../401.html" class="dropdown-item">401 page</a>
+                        <a href="../error-500.html" class="dropdown-item">500 page</a>
-                      <a href="../403.html" class="dropdown-item">403 page</a>
+                        <a href="../error-maintenance.html" class="dropdown-item">Maintenance page</a>
-                      <a href="../404.html" class="dropdown-item">404 page</a>
-                      <a href="../500.html" class="dropdown-item">500 page</a>
-                      <a href="../503.html" class="dropdown-item">503 page</a>
-                      <a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
                       </div>
                     </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="9 11 12 14 20 6" />
-                      <path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Form elements
@@ -260,10 +247,7 @@
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Extra
@@ -305,6 +289,11 @@
                         Gallery
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../license.html" >
+                        License
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../profile.html" >
                         Profile
@@ -315,17 +304,16 @@
                         Music
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../welcome.html" >
+                        Welcome
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <rect x="4" y="4" width="6" height="5" rx="2" />
-                      <rect x="4" y="13" width="6" height="7" rx="2" />
-                      <rect x="14" y="4" width="6" height="7" rx="2" />
-                      <rect x="14" y="15" width="6" height="5" rx="2" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Layout
@@ -367,11 +355,21 @@
                         Navbar dark
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../layout-navbar-overlap.html" >
+                        Navbar overlap
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../layout-dark.html" >
                         Dark mode
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../layout-rtl.html" >
+                        RTL mode
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../layout-fluid.html" >
                         Fluid
@@ -384,199 +382,21 @@
                     </li>
                   </ul>
                 </li>
-              <li class="nav-item active dropdown">
+                <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link" href="../docs/index.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="14 3 14 8 19 8" />
-                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
-                      <line x1="9" y1="9" x2="10" y2="9" />
-                      <line x1="9" y1="13" x2="15" y2="13" />
-                      <line x1="9" y1="17" x2="15" y2="17" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
-                    Docs
+                      Documentation
                     </span>
                   </a>
-                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-3">
-                  <li >
-                    <a class="dropdown-item" href="../docs/index.html" >
-                      Introduction
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/alerts.html" >
-                      Alerts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/autosize.html" >
-                      Autosize
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/avatars.html" >
-                      Avatars
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/badges.html" >
-                      Badges
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item active" href="../docs/breadcrumb.html" >
-                      Breadcrumb
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/buttons.html" >
-                      Buttons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/cards.html" >
-                      Cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/carousel.html" >
-                      Carousel
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/colors.html" >
-                      Colors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/countup.html" >
-                      Countup
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/cursors.html" >
-                      Cursors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/charts.html" >
-                      Charts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/dropdowns.html" >
-                      Dropdowns
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/divider.html" >
-                      Divider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/empty.html" >
-                      Empty states
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/flags.html" >
-                      Flags
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/form-elements.html" >
-                      Form elements
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/form-helpers.html" >
-                      Form helpers
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/input-mask.html" >
-                      Form input mask
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/modals.html" >
-                      Modals
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/progress.html" >
-                      Progress
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/payments.html" >
-                      Payments
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/range-slider.html" >
-                      Range slider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/ribbons.html" >
-                      Ribbons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/spinners.html" >
-                      Spinners
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/steps.html" >
-                      Steps
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tables.html" >
-                      Tables
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tabs.html" >
-                      Tabs
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/timelines.html" >
-                      Timelines
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/toasts.html" >
-                      Toasts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tooltips.html" >
-                      Tooltips
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/typography.html" >
-                      Typography
-                    </a>
-                  </li>
-                </ul>
                 </li>
               </ul>
               <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <circle cx="10" cy="10" r="7" />
-                      <line x1="21" y1="21" x2="15" y2="15" />
-                    </svg>
                     </span>
                     <input type="text" class="form-control" placeholder="Search…">
                   </div>
@@ -585,62 +405,271 @@
             </div>
           </div>
         </div>
+      </div>
       <div class="content">
         <div class="container-xl">
           <!-- Page title -->
-          <div class="page-header">
+          <div class="page-header d-print-none">
             <div class="row align-items-center">
-              <div class="col-auto">
+              <div class="col">
                 <h2 class="page-title">
                   Documentation
                 </h2>
               </div>
             </div>
           </div>
-          <div class="row justify-content-center">
+          <div class="row g-5">
-            <div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
+            <div class="d-none d-lg-block col-lg-3">
-              <div class="sticky-top">
+              <ul class="nav nav-pills nav-vertical">
-                <a href="https://github.com/tabler/tabler" class="btn btn-github mb-6 btn-block" target="_blank" rel="noreferrer">
+                <li class="nav-item">
-                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                  <a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
-                    <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
-                  </svg>
+                    </span>
-                  Browse source code
+                    Getting started
+                    <span class="nav-link-toggle"></span>
                   </a>
-                <h5 class="subheader">On this page</h5>
+                  <ul class="nav collapse" id="menu-base">
-                <ul class="list-unstyled">
+                    <li class="nav-item">
-                  <li class="toc-entry toc-h2"><a href="#default-markup">Default markup</a></li>
+                      <a href="../docs/index.html" class="nav-link">
-                  <li class="toc-entry toc-h2"><a href="#breadcrumb-variations">Breadcrumb variations</a></li>
+                        Introduction
-                  <li class="toc-entry toc-h2"><a href="#alternate-version">Alternate version</a></li>
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/colors.html" class="nav-link">
+                        Colors
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/typography.html" class="nav-link">
+                        Typography
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/icons.html" class="nav-link">
+                        Icons
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
+                    </span>
+                    Components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav collapse show" id="menu-components">
+                    <li class="nav-item">
+                      <a href="../docs/alerts.html" class="nav-link">
+                        Alerts
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/avatars.html" class="nav-link">
+                        Avatars
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/badges.html" class="nav-link">
+                        Badges
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/breadcrumb.html" class="nav-link active">
+                        Breadcrumb
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/buttons.html" class="nav-link">
+                        Buttons
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/cards.html" class="nav-link">
+                        Cards
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/carousel.html" class="nav-link">
+                        Carousel
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/dropdowns.html" class="nav-link">
+                        Dropdowns
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/divider.html" class="nav-link">
+                        Divider
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/empty.html" class="nav-link">
+                        Empty states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/modals.html" class="nav-link">
+                        Modals
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/payments.html" class="nav-link">
+                        Payments
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/range-slider.html" class="nav-link">
+                        Range slider
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/ribbons.html" class="nav-link">
+                        Ribbons
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/skeleton.html" class="nav-link">
+                        Skeleton
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/spinners.html" class="nav-link">
+                        Spinners
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/steps.html" class="nav-link">
+                        Steps
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/switch-icon.html" class="nav-link">
+                        Switch icon
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tables.html" class="nav-link">
+                        Tables
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tabs.html" class="nav-link">
+                        Tabs
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/timelines.html" class="nav-link">
+                        Timelines
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/toasts.html" class="nav-link">
+                        Toasts
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tooltips.html" class="nav-link">
+                        Tooltips
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
+                    </span>
+                    Utilities
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/cursors.html" class="nav-link">
+                        Cursors
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
+                    </span>
+                    Plugins
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav collapse" id="menu-plugins">
+                    <li class="nav-item">
+                      <a href="../docs/autosize.html" class="nav-link">
+                        Autosize
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/input-mask.html" class="nav-link">
+                        Form input mask
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/flags.html" class="nav-link">
+                        Flags
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/charts.html" class="nav-link">
+                        Charts
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="../changelog.html" class="nav-link">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
+                    </span>
+                    Changelog
+                    <span class="badge bg-blue-lt ml-auto">1.0.0-alpha.12</span>
+                  </a>
+                </li>
               </ul>
-              </div>
             </div>
             <div class="col-lg-9">
               <div class="card card-lg">
                 <div class="card-body">
                   <div class="markdown">
-                    <div class="d-flex">
+                    <div class="mb-5">
-                      <h2 class="h1 mt-0 mb-3">Breadcrumb</h2>
+                      <div class="d-flex mb-3">
+                        <h1 class="mt-0">Breadcrumb</h1>
                         <p class="ml-auto">
                           <a href="https://getbootstrap.com/docs/4.4/components/breadcrumb/" target="_blank">
-                          <svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
-                            <path stroke="none" d="M0 0h24v24H0z"/>
-                            <path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
-                            <line x1="10" y1="14" x2="20" y2="4" />
-                            <polyline points="15 4 20 4 20 9" />
-                          </svg>
                             Bootstrap documentation
                           </a>
                         </p>
                       </div>
                       <p>Breadcrumbs are used to show the current website or app location and reduce the number of actions users have to take. Thanks to breadcrumbs, they can easily navigate within the website hierarchy and better understand its structure.</p>
+                    </div>
                     <h2 id="default-markup">Default markup</h2>
-                    <p>Add the <code class="highlighter-rouge">:before</code> pseudo-element in <code class="highlighter-rouge">li</code> tags to use the default separators. The <code class="highlighter-rouge">active</code> modifier in a <code class="highlighter-rouge">li</code> tag will help you indicate the current page location and facilitate navigation within your website or app.</p>
+                    <p>Add the <code class="language-plaintext highlighter-rouge">:before</code> pseudo-element in <code class="language-plaintext highlighter-rouge">li</code> tags to use the default separators. The <code class="language-plaintext highlighter-rouge">active</code> modifier in a <code class="language-plaintext highlighter-rouge">li</code> tag will help you indicate the current page location and facilitate navigation within your website or app.</p>
                     <div class="example no_toc_section example-centered">
                       <div class="example-content">
                         <ol class="breadcrumb" aria-label="breadcrumbs">
-                          <li class="breadcrumb-item"><a href="#">Home</a></li>
+                          <li class="breadcrumb-item"><a href="javascript:void()">Home</a></li>
-                          <li class="breadcrumb-item"><a href="#">Library</a></li>
+                          <li class="breadcrumb-item"><a href="javascript:void()">Library</a></li>
-                          <li class="breadcrumb-item active" aria-current="page"><a href="#">Data</a></li>
+                          <li class="breadcrumb-item active" aria-current="page"><a href="javascript:void()">Data</a></li>
                         </ol>
                       </div>
                     </div>
@@ -654,13 +683,13 @@
                       </figure>
                     </div>
                     <h2 id="breadcrumb-variations">Breadcrumb variations</h2>
-                    <p>If you wish to use different separators, modify the <code class="highlighter-rouge">$breadcrumb-variants</code> variable in the Tabler config. Depending on the aesthetics of your design, you can choose dots, bullets or arrows.</p>
+                    <p>If you wish to use different separators, modify the <code class="language-plaintext highlighter-rouge">$breadcrumb-variants</code> variable in the Tabler config. Depending on the aesthetics of your design, you can choose dots, bullets or arrows.</p>
                     <div class="example no_toc_section example-centered">
                       <div class="example-content">
                         <ol class="breadcrumb breadcrumb-dots" aria-label="breadcrumbs">
-                          <li class="breadcrumb-item"><a href="#">Home</a></li>
+                          <li class="breadcrumb-item"><a href="javascript:void()">Home</a></li>
-                          <li class="breadcrumb-item"><a href="#">Library</a></li>
+                          <li class="breadcrumb-item"><a href="javascript:void()">Library</a></li>
-                          <li class="breadcrumb-item active" aria-current="page"><a href="#">Data</a></li>
+                          <li class="breadcrumb-item active" aria-current="page"><a href="javascript:void()">Data</a></li>
                         </ol>
                       </div>
                     </div>
@@ -676,9 +705,9 @@
                     <div class="example no_toc_section example-centered">
                       <div class="example-content">
                         <ol class="breadcrumb breadcrumb-arrows" aria-label="breadcrumbs">
-                          <li class="breadcrumb-item"><a href="#">Home</a></li>
+                          <li class="breadcrumb-item"><a href="javascript:void()">Home</a></li>
-                          <li class="breadcrumb-item"><a href="#">Library</a></li>
+                          <li class="breadcrumb-item"><a href="javascript:void()">Library</a></li>
-                          <li class="breadcrumb-item active" aria-current="page"><a href="#">Data</a></li>
+                          <li class="breadcrumb-item active" aria-current="page"><a href="javascript:void()">Data</a></li>
                         </ol>
                       </div>
                     </div>
@@ -694,9 +723,9 @@
                     <div class="example no_toc_section example-centered">
                       <div class="example-content">
                         <ol class="breadcrumb breadcrumb-bullets" aria-label="breadcrumbs">
-                          <li class="breadcrumb-item"><a href="#">Home</a></li>
+                          <li class="breadcrumb-item"><a href="javascript:void()">Home</a></li>
-                          <li class="breadcrumb-item"><a href="#">Library</a></li>
+                          <li class="breadcrumb-item"><a href="javascript:void()">Library</a></li>
-                          <li class="breadcrumb-item active" aria-current="page"><a href="#">Data</a></li>
+                          <li class="breadcrumb-item active" aria-current="page"><a href="javascript:void()">Data</a></li>
                         </ol>
                       </div>
                     </div>
@@ -710,13 +739,13 @@
                       </figure>
                     </div>
                     <h2 id="alternate-version">Alternate version</h2>
-                    <p>Use the <code class="highlighter-rouge">breadcrumb-alternate</code> class to make the breadcrumb colors more neutral, retaining its function of showing the current location within an interface.</p>
+                    <p>Use the <code class="language-plaintext highlighter-rouge">breadcrumb-alternate</code> class to make the breadcrumb colors more neutral, retaining its function of showing the current location within an interface.</p>
                     <div class="example no_toc_section example-centered">
                       <div class="example-content">
                         <ol class="breadcrumb breadcrumb-alternate" aria-label="breadcrumbs">
-                          <li class="breadcrumb-item"><a href="#">Home</a></li>
+                          <li class="breadcrumb-item"><a href="javascript:void()">Home</a></li>
-                          <li class="breadcrumb-item"><a href="#">Library</a></li>
+                          <li class="breadcrumb-item"><a href="javascript:void()">Library</a></li>
-                          <li class="breadcrumb-item active" aria-current="page"><a href="#">Data</a></li>
+                          <li class="breadcrumb-item active" aria-current="page"><a href="javascript:void()">Data</a></li>
                         </ol>
                       </div>
                     </div>
@@ -735,7 +764,7 @@
             </div>
           </div>
         </div>
-        <footer class="footer footer-transparent">
+        <footer class="footer footer-transparent d-print-none">
           <div class="container">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ml-lg-auto">
@@ -746,9 +775,16 @@
                 </ul>
               </div>
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item">
                     Copyright © 2020
                     <a href=".." class="link-secondary">Tabler</a>.
                     All rights reserved.
+                  </li>
+                  <li class="list-inline-item">
+                    <a href="../changelog.html" class="link-secondary">v1.0.0-alpha.12</a>
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
@@ -757,7 +793,6 @@
     </div>
     <!-- Libs JS -->
     <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="../dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
     <script>

demo/docs/carousel.html

@@ -1,18 +1,18 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.5
+* @version 1.0.0-alpha.12
-* @link https://github.com/tabler/tabler
+* @link https://tabler.io
-* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Copyright 2018-2020 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
   <head>
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <title>Carousel - Documentation - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <title>Carousel - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
@@ -25,22 +25,10 @@
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
     <meta name="description" content="A carousel is used to display multiple pieces of visual content without taking up too much space. Carousels eliminate the need to scroll down the page to see all content and are a popular method of displaying marketing information."/>
-    <!-- Libs CSS -->
+    <!-- CSS files -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
-    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
-    <!-- Tabler Core -->
     <link href="../dist/css/tabler.min.css" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
     <link href="../dist/css/tabler-flags.min.css" rel="stylesheet"/>
     <link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
-    <link href="../dist/css/tabler-buttons.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
     <style>
       body {
@@ -50,22 +38,18 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <header class="navbar navbar-expand-md navbar-light">
+      <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
           <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
             <span class="navbar-toggler-icon"></span>
           </button>
           <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-image">
+            <img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
           </a>
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item dropdown d-none d-md-flex mr-3">
               <a href="#" class="nav-link px-0" data-toggle="dropdown" tabindex="-1">
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
-                  <path stroke="none" d="M0 0h24v24H0z"/>
-                  <path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" />
-                  <path d="M9 17v1a3 3 0 0 0 6 0v-1" />
-                </svg>
                 <span class="badge bg-red"></span>
               </a>
               <div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
@@ -78,54 +62,32 @@
             </div>
             <div class="nav-item dropdown">
               <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
+                <span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
                 <div class="d-none d-xl-block pl-2">
                   <div>Paweł Kuna</div>
                   <div class="mt-1 small text-muted">UI Designer</div>
                 </div>
               </a>
-              <div class="dropdown-menu dropdown-menu-right">
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
+                <a href="#" class="dropdown-item">Set status</a>
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <a href="#" class="dropdown-item">Profile & account</a>
-                    <path stroke="none" d="M0 0h24v24H0z"/>
+                <a href="#" class="dropdown-item">Feedback</a>
-                    <path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-                    <circle cx="12" cy="12" r="3" />
-                  </svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                    <path stroke="none" d="M0 0h24v24H0z"/>
-                    <path d="M9 7 h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" />
-                    <path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" />
-                    <line x1="16" y1="5" x2="19" y2="8" />
-                  </svg>
-                  Another action
-                </a>
                 <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <a href="#" class="dropdown-item">Settings</a>
-                    <path stroke="none" d="M0 0h24v24H0z"/>
+                <a href="#" class="dropdown-item">Logout</a>
-                    <line x1="12" y1="5" x2="12" y2="19" />
-                    <line x1="5" y1="12" x2="19" y2="12" />
-                  </svg>
-                  Separated link</a>
               </div>
             </div>
           </div>
         </div>
       </header>
       <div class="navbar-expand-md">
-        <div class="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar navbar-light">
             <div class="container-xl">
               <ul class="navbar-nav">
                 <li class="nav-item">
                   <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="5 12 3 12 12 3 21 12 19 12" />
-                      <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
-                      <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Home
@@ -134,14 +96,7 @@
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" />
-                      <line x1="12" y1="12" x2="20" y2="7.5" />
-                      <line x1="12" y1="12" x2="12" y2="21" />
-                      <line x1="12" y1="12" x2="4" y2="7.5" />
-                      <line x1="16" y1="5.25" x2="8" y2="9.75" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       User Interface
@@ -168,11 +123,21 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../cards-masonry.html" >
+                        Cards Masonry
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../dropdowns.html" >
                         Dropdowns
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../icons.html" >
+                        Icons
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../modals.html" >
                         Modals
@@ -198,6 +163,26 @@
                         Charts
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../charts-heatmap.html" >
+                        Charts heatmap
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../skeleton.html" >
+                        Skeleton
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../tabs.html" >
+                        Tabs
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../tables.html" >
                         Tables
@@ -218,6 +203,16 @@
                         Lists
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../typography.html" >
+                        Typography
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../markdown.html" >
+                        Markdown
+                      </a>
+                    </li>
                     <li class="dropright">
                       <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
                         Authentication
@@ -234,24 +229,16 @@
                         Error pages
                       </a>
                       <div class="dropdown-menu">
-                      <a href="../400.html" class="dropdown-item">400 page</a>
+                        <a href="../error-404.html" class="dropdown-item">404 page</a>
-                      <a href="../401.html" class="dropdown-item">401 page</a>
+                        <a href="../error-500.html" class="dropdown-item">500 page</a>
-                      <a href="../403.html" class="dropdown-item">403 page</a>
+                        <a href="../error-maintenance.html" class="dropdown-item">Maintenance page</a>
-                      <a href="../404.html" class="dropdown-item">404 page</a>
-                      <a href="../500.html" class="dropdown-item">500 page</a>
-                      <a href="../503.html" class="dropdown-item">503 page</a>
-                      <a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
                       </div>
                     </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="9 11 12 14 20 6" />
-                      <path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Form elements
@@ -260,10 +247,7 @@
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Extra
@@ -305,6 +289,11 @@
                         Gallery
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../license.html" >
+                        License
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../profile.html" >
                         Profile
@@ -315,17 +304,16 @@
                         Music
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../welcome.html" >
+                        Welcome
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <rect x="4" y="4" width="6" height="5" rx="2" />
-                      <rect x="4" y="13" width="6" height="7" rx="2" />
-                      <rect x="14" y="4" width="6" height="7" rx="2" />
-                      <rect x="14" y="15" width="6" height="5" rx="2" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Layout
@@ -367,11 +355,21 @@
                         Navbar dark
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../layout-navbar-overlap.html" >
+                        Navbar overlap
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../layout-dark.html" >
                         Dark mode
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../layout-rtl.html" >
+                        RTL mode
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../layout-fluid.html" >
                         Fluid
@@ -384,199 +382,21 @@
                     </li>
                   </ul>
                 </li>
-              <li class="nav-item active dropdown">
+                <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link" href="../docs/index.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="14 3 14 8 19 8" />
-                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
-                      <line x1="9" y1="9" x2="10" y2="9" />
-                      <line x1="9" y1="13" x2="15" y2="13" />
-                      <line x1="9" y1="17" x2="15" y2="17" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
-                    Docs
+                      Documentation
                     </span>
                   </a>
-                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-3">
-                  <li >
-                    <a class="dropdown-item" href="../docs/index.html" >
-                      Introduction
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/alerts.html" >
-                      Alerts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/autosize.html" >
-                      Autosize
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/avatars.html" >
-                      Avatars
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/badges.html" >
-                      Badges
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/breadcrumb.html" >
-                      Breadcrumb
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/buttons.html" >
-                      Buttons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/cards.html" >
-                      Cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item active" href="../docs/carousel.html" >
-                      Carousel
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/colors.html" >
-                      Colors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/countup.html" >
-                      Countup
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/cursors.html" >
-                      Cursors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/charts.html" >
-                      Charts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/dropdowns.html" >
-                      Dropdowns
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/divider.html" >
-                      Divider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/empty.html" >
-                      Empty states
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/flags.html" >
-                      Flags
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/form-elements.html" >
-                      Form elements
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/form-helpers.html" >
-                      Form helpers
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/input-mask.html" >
-                      Form input mask
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/modals.html" >
-                      Modals
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/progress.html" >
-                      Progress
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/payments.html" >
-                      Payments
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/range-slider.html" >
-                      Range slider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/ribbons.html" >
-                      Ribbons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/spinners.html" >
-                      Spinners
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/steps.html" >
-                      Steps
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tables.html" >
-                      Tables
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tabs.html" >
-                      Tabs
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/timelines.html" >
-                      Timelines
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/toasts.html" >
-                      Toasts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tooltips.html" >
-                      Tooltips
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/typography.html" >
-                      Typography
-                    </a>
-                  </li>
-                </ul>
                 </li>
               </ul>
               <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <circle cx="10" cy="10" r="7" />
-                      <line x1="21" y1="21" x2="15" y2="15" />
-                    </svg>
                     </span>
                     <input type="text" class="form-control" placeholder="Search…">
                   </div>
@@ -585,52 +405,263 @@
             </div>
           </div>
         </div>
+      </div>
       <div class="content">
         <div class="container-xl">
           <!-- Page title -->
-          <div class="page-header">
+          <div class="page-header d-print-none">
             <div class="row align-items-center">
-              <div class="col-auto">
+              <div class="col">
                 <h2 class="page-title">
                   Documentation
                 </h2>
               </div>
             </div>
           </div>
-          <div class="row justify-content-center">
+          <div class="row g-5">
-            <div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
+            <div class="d-none d-lg-block col-lg-3">
-              <div class="sticky-top">
+              <ul class="nav nav-pills nav-vertical">
-                <a href="https://github.com/tabler/tabler" class="btn btn-github mb-6 btn-block" target="_blank" rel="noreferrer">
+                <li class="nav-item">
-                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                  <a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
-                    <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
-                  </svg>
+                    </span>
-                  Browse source code
+                    Getting started
+                    <span class="nav-link-toggle"></span>
                   </a>
-                <h5 class="subheader">On this page</h5>
+                  <ul class="nav collapse" id="menu-base">
-                <ul class="list-unstyled">
+                    <li class="nav-item">
-                  <li class="toc-entry toc-h2"><a href="#default-markup">Default markup</a></li>
+                      <a href="../docs/index.html" class="nav-link">
+                        Introduction
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/colors.html" class="nav-link">
+                        Colors
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/typography.html" class="nav-link">
+                        Typography
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/icons.html" class="nav-link">
+                        Icons
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
+                    </span>
+                    Components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav collapse show" id="menu-components">
+                    <li class="nav-item">
+                      <a href="../docs/alerts.html" class="nav-link">
+                        Alerts
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/avatars.html" class="nav-link">
+                        Avatars
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/badges.html" class="nav-link">
+                        Badges
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/breadcrumb.html" class="nav-link">
+                        Breadcrumb
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/buttons.html" class="nav-link">
+                        Buttons
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/cards.html" class="nav-link">
+                        Cards
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/carousel.html" class="nav-link active">
+                        Carousel
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/dropdowns.html" class="nav-link">
+                        Dropdowns
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/divider.html" class="nav-link">
+                        Divider
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/empty.html" class="nav-link">
+                        Empty states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/modals.html" class="nav-link">
+                        Modals
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/payments.html" class="nav-link">
+                        Payments
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/range-slider.html" class="nav-link">
+                        Range slider
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/ribbons.html" class="nav-link">
+                        Ribbons
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/skeleton.html" class="nav-link">
+                        Skeleton
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/spinners.html" class="nav-link">
+                        Spinners
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/steps.html" class="nav-link">
+                        Steps
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/switch-icon.html" class="nav-link">
+                        Switch icon
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tables.html" class="nav-link">
+                        Tables
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tabs.html" class="nav-link">
+                        Tabs
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/timelines.html" class="nav-link">
+                        Timelines
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/toasts.html" class="nav-link">
+                        Toasts
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tooltips.html" class="nav-link">
+                        Tooltips
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
+                    </span>
+                    Utilities
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/cursors.html" class="nav-link">
+                        Cursors
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
+                    </span>
+                    Plugins
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav collapse" id="menu-plugins">
+                    <li class="nav-item">
+                      <a href="../docs/autosize.html" class="nav-link">
+                        Autosize
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/input-mask.html" class="nav-link">
+                        Form input mask
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/flags.html" class="nav-link">
+                        Flags
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/charts.html" class="nav-link">
+                        Charts
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="../changelog.html" class="nav-link">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
+                    </span>
+                    Changelog
+                    <span class="badge bg-blue-lt ml-auto">1.0.0-alpha.12</span>
+                  </a>
+                </li>
               </ul>
-              </div>
             </div>
             <div class="col-lg-9">
               <div class="card card-lg">
                 <div class="card-body">
                   <div class="markdown">
-                    <div class="d-flex">
+                    <div class="mb-5">
-                      <h2 class="h1 mt-0 mb-3">Carousel</h2>
+                      <div class="d-flex mb-3">
+                        <h1 class="mt-0">Carousel</h1>
                         <p class="ml-auto">
                           <a href="https://getbootstrap.com/docs/4.4/components/carousel/" target="_blank">
-                          <svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
-                            <path stroke="none" d="M0 0h24v24H0z"/>
-                            <path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
-                            <line x1="10" y1="14" x2="20" y2="4" />
-                            <polyline points="15 4 20 4 20 9" />
-                          </svg>
                             Bootstrap documentation
                           </a>
                         </p>
                       </div>
                       <p>A carousel is used to display multiple pieces of visual content without taking up too much space. Carousels eliminate the need to scroll down the page to see all content and are a popular method of displaying marketing information.</p>
+                    </div>
                     <h2 id="default-markup">Default markup</h2>
                     <p>Use a carousel to make your website design more visually appealing for users. In the default carousel design, respective elements slide automatically and users can go to the next slide by clicking an arrow.</p>
                     <div class="example no_toc_section example-centered">
@@ -663,11 +694,11 @@
                             </div>
                             <a class="carousel-control-prev" href="#carousel-sample" role="button" data-slide="prev">
                               <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-                              <span class="sr-only">Previous</span>
+                              <span class="visually-hidden">Previous</span>
                             </a>
                             <a class="carousel-control-next" href="#carousel-sample" role="button" data-slide="next">
                               <span class="carousel-control-next-icon" aria-hidden="true"></span>
-                              <span class="sr-only">Next</span>
+                              <span class="visually-hidden">Next</span>
                             </a>
                           </div>
                         </div>
@@ -702,11 +733,11 @@
   <span class="nt">&lt;/div&gt;</span>
   <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"carousel-control-prev"</span> <span class="na">href=</span><span class="s">"#carousel-sample"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">data-slide=</span><span class="s">"prev"</span><span class="nt">&gt;</span>
     <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"carousel-control-prev-icon"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;&lt;/span&gt;</span>
-    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>Previous<span class="nt">&lt;/span&gt;</span>
+    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"visually-hidden"</span><span class="nt">&gt;</span>Previous<span class="nt">&lt;/span&gt;</span>
   <span class="nt">&lt;/a&gt;</span>
   <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"carousel-control-next"</span> <span class="na">href=</span><span class="s">"#carousel-sample"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">data-slide=</span><span class="s">"next"</span><span class="nt">&gt;</span>
     <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"carousel-control-next-icon"</span> <span class="na">aria-hidden=</span><span class="s">"true"</span><span class="nt">&gt;&lt;/span&gt;</span>
-    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"sr-only"</span><span class="nt">&gt;</span>Next<span class="nt">&lt;/span&gt;</span>
+    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"visually-hidden"</span><span class="nt">&gt;</span>Next<span class="nt">&lt;/span&gt;</span>
   <span class="nt">&lt;/a&gt;</span>
 <span class="nt">&lt;/div&gt;</span></code></pre>
                       </figure>
@@ -717,7 +748,7 @@
             </div>
           </div>
         </div>
-        <footer class="footer footer-transparent">
+        <footer class="footer footer-transparent d-print-none">
           <div class="container">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ml-lg-auto">
@@ -728,9 +759,16 @@
                 </ul>
               </div>
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item">
                     Copyright © 2020
                     <a href=".." class="link-secondary">Tabler</a>.
                     All rights reserved.
+                  </li>
+                  <li class="list-inline-item">
+                    <a href="../changelog.html" class="link-secondary">v1.0.0-alpha.12</a>
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
@@ -739,7 +777,6 @@
     </div>
     <!-- Libs JS -->
     <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="../dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
     <script>

demo/docs/charts.html

@@ -1,18 +1,18 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.5
+* @version 1.0.0-alpha.12
-* @link https://github.com/tabler/tabler
+* @link https://tabler.io
-* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Copyright 2018-2020 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
   <head>
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <title>Charts - Documentation - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <title>Charts - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
@@ -24,22 +24,10 @@
     <meta name="robots" content="noindex,nofollow,noarchive"/>
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
-    <!-- Libs CSS -->
+    <!-- CSS files -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
-    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
-    <!-- Tabler Core -->
     <link href="../dist/css/tabler.min.css" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
     <link href="../dist/css/tabler-flags.min.css" rel="stylesheet"/>
     <link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
-    <link href="../dist/css/tabler-buttons.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
     <style>
       body {
@@ -49,22 +37,18 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <header class="navbar navbar-expand-md navbar-light">
+      <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
           <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
             <span class="navbar-toggler-icon"></span>
           </button>
           <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-image">
+            <img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
           </a>
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item dropdown d-none d-md-flex mr-3">
               <a href="#" class="nav-link px-0" data-toggle="dropdown" tabindex="-1">
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
-                  <path stroke="none" d="M0 0h24v24H0z"/>
-                  <path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" />
-                  <path d="M9 17v1a3 3 0 0 0 6 0v-1" />
-                </svg>
                 <span class="badge bg-red"></span>
               </a>
               <div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
@@ -77,54 +61,32 @@
             </div>
             <div class="nav-item dropdown">
               <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
+                <span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
                 <div class="d-none d-xl-block pl-2">
                   <div>Paweł Kuna</div>
                   <div class="mt-1 small text-muted">UI Designer</div>
                 </div>
               </a>
-              <div class="dropdown-menu dropdown-menu-right">
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
+                <a href="#" class="dropdown-item">Set status</a>
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <a href="#" class="dropdown-item">Profile & account</a>
-                    <path stroke="none" d="M0 0h24v24H0z"/>
+                <a href="#" class="dropdown-item">Feedback</a>
-                    <path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-                    <circle cx="12" cy="12" r="3" />
-                  </svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                    <path stroke="none" d="M0 0h24v24H0z"/>
-                    <path d="M9 7 h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" />
-                    <path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" />
-                    <line x1="16" y1="5" x2="19" y2="8" />
-                  </svg>
-                  Another action
-                </a>
                 <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <a href="#" class="dropdown-item">Settings</a>
-                    <path stroke="none" d="M0 0h24v24H0z"/>
+                <a href="#" class="dropdown-item">Logout</a>
-                    <line x1="12" y1="5" x2="12" y2="19" />
-                    <line x1="5" y1="12" x2="19" y2="12" />
-                  </svg>
-                  Separated link</a>
               </div>
             </div>
           </div>
         </div>
       </header>
       <div class="navbar-expand-md">
-        <div class="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar navbar-light">
             <div class="container-xl">
               <ul class="navbar-nav">
                 <li class="nav-item">
                   <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="5 12 3 12 12 3 21 12 19 12" />
-                      <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
-                      <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Home
@@ -133,14 +95,7 @@
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" />
-                      <line x1="12" y1="12" x2="20" y2="7.5" />
-                      <line x1="12" y1="12" x2="12" y2="21" />
-                      <line x1="12" y1="12" x2="4" y2="7.5" />
-                      <line x1="16" y1="5.25" x2="8" y2="9.75" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       User Interface
@@ -167,11 +122,21 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../cards-masonry.html" >
+                        Cards Masonry
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../dropdowns.html" >
                         Dropdowns
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../icons.html" >
+                        Icons
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../modals.html" >
                         Modals
@@ -197,6 +162,26 @@
                         Charts
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../charts-heatmap.html" >
+                        Charts heatmap
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../skeleton.html" >
+                        Skeleton
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../tabs.html" >
+                        Tabs
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../tables.html" >
                         Tables
@@ -217,6 +202,16 @@
                         Lists
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../typography.html" >
+                        Typography
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../markdown.html" >
+                        Markdown
+                      </a>
+                    </li>
                     <li class="dropright">
                       <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
                         Authentication
@@ -233,24 +228,16 @@
                         Error pages
                       </a>
                       <div class="dropdown-menu">
-                      <a href="../400.html" class="dropdown-item">400 page</a>
+                        <a href="../error-404.html" class="dropdown-item">404 page</a>
-                      <a href="../401.html" class="dropdown-item">401 page</a>
+                        <a href="../error-500.html" class="dropdown-item">500 page</a>
-                      <a href="../403.html" class="dropdown-item">403 page</a>
+                        <a href="../error-maintenance.html" class="dropdown-item">Maintenance page</a>
-                      <a href="../404.html" class="dropdown-item">404 page</a>
-                      <a href="../500.html" class="dropdown-item">500 page</a>
-                      <a href="../503.html" class="dropdown-item">503 page</a>
-                      <a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
                       </div>
                     </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="9 11 12 14 20 6" />
-                      <path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Form elements
@@ -259,10 +246,7 @@
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Extra
@@ -304,6 +288,11 @@
                         Gallery
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../license.html" >
+                        License
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../profile.html" >
                         Profile
@@ -314,17 +303,16 @@
                         Music
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../welcome.html" >
+                        Welcome
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <rect x="4" y="4" width="6" height="5" rx="2" />
-                      <rect x="4" y="13" width="6" height="7" rx="2" />
-                      <rect x="14" y="4" width="6" height="7" rx="2" />
-                      <rect x="14" y="15" width="6" height="5" rx="2" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Layout
@@ -366,11 +354,21 @@
                         Navbar dark
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../layout-navbar-overlap.html" >
+                        Navbar overlap
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../layout-dark.html" >
                         Dark mode
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../layout-rtl.html" >
+                        RTL mode
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../layout-fluid.html" >
                         Fluid
@@ -383,199 +381,21 @@
                     </li>
                   </ul>
                 </li>
-              <li class="nav-item active dropdown">
+                <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link" href="../docs/index.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="14 3 14 8 19 8" />
-                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
-                      <line x1="9" y1="9" x2="10" y2="9" />
-                      <line x1="9" y1="13" x2="15" y2="13" />
-                      <line x1="9" y1="17" x2="15" y2="17" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
-                    Docs
+                      Documentation
                     </span>
                   </a>
-                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-3">
-                  <li >
-                    <a class="dropdown-item" href="../docs/index.html" >
-                      Introduction
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/alerts.html" >
-                      Alerts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/autosize.html" >
-                      Autosize
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/avatars.html" >
-                      Avatars
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/badges.html" >
-                      Badges
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/breadcrumb.html" >
-                      Breadcrumb
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/buttons.html" >
-                      Buttons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/cards.html" >
-                      Cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/carousel.html" >
-                      Carousel
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/colors.html" >
-                      Colors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/countup.html" >
-                      Countup
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/cursors.html" >
-                      Cursors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item active" href="../docs/charts.html" >
-                      Charts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/dropdowns.html" >
-                      Dropdowns
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/divider.html" >
-                      Divider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/empty.html" >
-                      Empty states
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/flags.html" >
-                      Flags
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/form-elements.html" >
-                      Form elements
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/form-helpers.html" >
-                      Form helpers
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/input-mask.html" >
-                      Form input mask
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/modals.html" >
-                      Modals
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/progress.html" >
-                      Progress
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/payments.html" >
-                      Payments
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/range-slider.html" >
-                      Range slider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/ribbons.html" >
-                      Ribbons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/spinners.html" >
-                      Spinners
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/steps.html" >
-                      Steps
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tables.html" >
-                      Tables
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tabs.html" >
-                      Tabs
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/timelines.html" >
-                      Timelines
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/toasts.html" >
-                      Toasts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tooltips.html" >
-                      Tooltips
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/typography.html" >
-                      Typography
-                    </a>
-                  </li>
-                </ul>
                 </li>
               </ul>
               <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <circle cx="10" cy="10" r="7" />
-                      <line x1="21" y1="21" x2="15" y2="15" />
-                    </svg>
                     </span>
                     <input type="text" class="form-control" placeholder="Search…">
                   </div>
@@ -584,39 +404,255 @@
             </div>
           </div>
         </div>
+      </div>
       <div class="content">
         <div class="container-xl">
           <!-- Page title -->
-          <div class="page-header">
+          <div class="page-header d-print-none">
             <div class="row align-items-center">
-              <div class="col-auto">
+              <div class="col">
                 <h2 class="page-title">
                   Documentation
                 </h2>
               </div>
             </div>
           </div>
-          <div class="row justify-content-center">
+          <div class="row g-5">
-            <div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
+            <div class="d-none d-lg-block col-lg-3">
-              <div class="sticky-top">
+              <ul class="nav nav-pills nav-vertical">
-                <a href="https://github.com/tabler/tabler" class="btn btn-github mb-6 btn-block" target="_blank" rel="noreferrer">
+                <li class="nav-item">
-                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                  <a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
-                    <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
-                  </svg>
+                    </span>
-                  Browse source code
+                    Getting started
+                    <span class="nav-link-toggle"></span>
                   </a>
-                <h5 class="subheader">On this page</h5>
+                  <ul class="nav collapse" id="menu-base">
-                <ul class="list-unstyled">
+                    <li class="nav-item">
-                  <li class="toc-entry toc-h2"><a href="#default-markup">Default markup</a></li>
+                      <a href="../docs/index.html" class="nav-link">
+                        Introduction
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/colors.html" class="nav-link">
+                        Colors
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/typography.html" class="nav-link">
+                        Typography
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/icons.html" class="nav-link">
+                        Icons
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
+                    </span>
+                    Components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav collapse show" id="menu-components">
+                    <li class="nav-item">
+                      <a href="../docs/alerts.html" class="nav-link">
+                        Alerts
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/avatars.html" class="nav-link">
+                        Avatars
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/badges.html" class="nav-link">
+                        Badges
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/breadcrumb.html" class="nav-link">
+                        Breadcrumb
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/buttons.html" class="nav-link">
+                        Buttons
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/cards.html" class="nav-link">
+                        Cards
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/carousel.html" class="nav-link">
+                        Carousel
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/dropdowns.html" class="nav-link">
+                        Dropdowns
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/divider.html" class="nav-link">
+                        Divider
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/empty.html" class="nav-link">
+                        Empty states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/modals.html" class="nav-link">
+                        Modals
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/payments.html" class="nav-link">
+                        Payments
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/range-slider.html" class="nav-link">
+                        Range slider
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/ribbons.html" class="nav-link">
+                        Ribbons
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/skeleton.html" class="nav-link">
+                        Skeleton
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/spinners.html" class="nav-link">
+                        Spinners
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/steps.html" class="nav-link">
+                        Steps
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/switch-icon.html" class="nav-link">
+                        Switch icon
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tables.html" class="nav-link">
+                        Tables
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tabs.html" class="nav-link">
+                        Tabs
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/timelines.html" class="nav-link">
+                        Timelines
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/toasts.html" class="nav-link">
+                        Toasts
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tooltips.html" class="nav-link">
+                        Tooltips
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
+                    </span>
+                    Utilities
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/cursors.html" class="nav-link">
+                        Cursors
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
+                    </span>
+                    Plugins
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav collapse" id="menu-plugins">
+                    <li class="nav-item">
+                      <a href="../docs/autosize.html" class="nav-link">
+                        Autosize
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/input-mask.html" class="nav-link">
+                        Form input mask
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/flags.html" class="nav-link">
+                        Flags
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/charts.html" class="nav-link active">
+                        Charts
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="../changelog.html" class="nav-link">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
+                    </span>
+                    Changelog
+                    <span class="badge bg-blue-lt ml-auto">1.0.0-alpha.12</span>
+                  </a>
+                </li>
               </ul>
-              </div>
             </div>
             <div class="col-lg-9">
               <div class="card card-lg">
                 <div class="card-body">
                   <div class="markdown">
-                    <div class="d-flex">
+                    <div class="mb-5">
-                      <h2 class="h1 mt-0 mb-3">Charts</h2>
+                      <div class="d-flex mb-3">
+                        <h1 class="mt-0">Charts</h1>
+                      </div>
                     </div>
                     <h2 id="default-markup">Default markup</h2>
                   </div>
@@ -625,7 +661,7 @@
             </div>
           </div>
         </div>
-        <footer class="footer footer-transparent">
+        <footer class="footer footer-transparent d-print-none">
           <div class="container">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ml-lg-auto">
@@ -636,9 +672,16 @@
                 </ul>
               </div>
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item">
                     Copyright © 2020
                     <a href=".." class="link-secondary">Tabler</a>.
                     All rights reserved.
+                  </li>
+                  <li class="list-inline-item">
+                    <a href="../changelog.html" class="link-secondary">v1.0.0-alpha.12</a>
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
@@ -647,7 +690,6 @@
     </div>
     <!-- Libs JS -->
     <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="../dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
     <script>

demo/docs/countup.html

@@ -1,18 +1,18 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.5
+* @version 1.0.0-alpha.12
-* @link https://github.com/tabler/tabler
+* @link https://tabler.io
-* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Copyright 2018-2020 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
   <head>
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <title>Countup - Documentation - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <title>Countup - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
@@ -25,22 +25,10 @@
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
     <meta name="description" content="A countup element is used to display numerical data in an interesting way and make the interface more interactive. All the available options can be found [here](https://inorganik.github.io/countUp.js/)"/>
-    <!-- Libs CSS -->
+    <!-- CSS files -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
-    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
-    <!-- Tabler Core -->
     <link href="../dist/css/tabler.min.css" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
     <link href="../dist/css/tabler-flags.min.css" rel="stylesheet"/>
     <link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
-    <link href="../dist/css/tabler-buttons.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
     <style>
       body {
@@ -50,22 +38,18 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <header class="navbar navbar-expand-md navbar-light">
+      <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
           <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
             <span class="navbar-toggler-icon"></span>
           </button>
           <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-image">
+            <img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
           </a>
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item dropdown d-none d-md-flex mr-3">
               <a href="#" class="nav-link px-0" data-toggle="dropdown" tabindex="-1">
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
-                  <path stroke="none" d="M0 0h24v24H0z"/>
-                  <path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" />
-                  <path d="M9 17v1a3 3 0 0 0 6 0v-1" />
-                </svg>
                 <span class="badge bg-red"></span>
               </a>
               <div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
@@ -78,54 +62,32 @@
             </div>
             <div class="nav-item dropdown">
               <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
+                <span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
                 <div class="d-none d-xl-block pl-2">
                   <div>Paweł Kuna</div>
                   <div class="mt-1 small text-muted">UI Designer</div>
                 </div>
               </a>
-              <div class="dropdown-menu dropdown-menu-right">
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
+                <a href="#" class="dropdown-item">Set status</a>
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <a href="#" class="dropdown-item">Profile & account</a>
-                    <path stroke="none" d="M0 0h24v24H0z"/>
+                <a href="#" class="dropdown-item">Feedback</a>
-                    <path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-                    <circle cx="12" cy="12" r="3" />
-                  </svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                    <path stroke="none" d="M0 0h24v24H0z"/>
-                    <path d="M9 7 h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" />
-                    <path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" />
-                    <line x1="16" y1="5" x2="19" y2="8" />
-                  </svg>
-                  Another action
-                </a>
                 <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <a href="#" class="dropdown-item">Settings</a>
-                    <path stroke="none" d="M0 0h24v24H0z"/>
+                <a href="#" class="dropdown-item">Logout</a>
-                    <line x1="12" y1="5" x2="12" y2="19" />
-                    <line x1="5" y1="12" x2="19" y2="12" />
-                  </svg>
-                  Separated link</a>
               </div>
             </div>
           </div>
         </div>
       </header>
       <div class="navbar-expand-md">
-        <div class="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar navbar-light">
             <div class="container-xl">
               <ul class="navbar-nav">
                 <li class="nav-item">
                   <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="5 12 3 12 12 3 21 12 19 12" />
-                      <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
-                      <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Home
@@ -134,14 +96,7 @@
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" />
-                      <line x1="12" y1="12" x2="20" y2="7.5" />
-                      <line x1="12" y1="12" x2="12" y2="21" />
-                      <line x1="12" y1="12" x2="4" y2="7.5" />
-                      <line x1="16" y1="5.25" x2="8" y2="9.75" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       User Interface
@@ -168,11 +123,21 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../cards-masonry.html" >
+                        Cards Masonry
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../dropdowns.html" >
                         Dropdowns
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../icons.html" >
+                        Icons
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../modals.html" >
                         Modals
@@ -198,6 +163,26 @@
                         Charts
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../charts-heatmap.html" >
+                        Charts heatmap
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../skeleton.html" >
+                        Skeleton
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../tabs.html" >
+                        Tabs
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../tables.html" >
                         Tables
@@ -218,6 +203,16 @@
                         Lists
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../typography.html" >
+                        Typography
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../markdown.html" >
+                        Markdown
+                      </a>
+                    </li>
                     <li class="dropright">
                       <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
                         Authentication
@@ -234,24 +229,16 @@
                         Error pages
                       </a>
                       <div class="dropdown-menu">
-                      <a href="../400.html" class="dropdown-item">400 page</a>
+                        <a href="../error-404.html" class="dropdown-item">404 page</a>
-                      <a href="../401.html" class="dropdown-item">401 page</a>
+                        <a href="../error-500.html" class="dropdown-item">500 page</a>
-                      <a href="../403.html" class="dropdown-item">403 page</a>
+                        <a href="../error-maintenance.html" class="dropdown-item">Maintenance page</a>
-                      <a href="../404.html" class="dropdown-item">404 page</a>
-                      <a href="../500.html" class="dropdown-item">500 page</a>
-                      <a href="../503.html" class="dropdown-item">503 page</a>
-                      <a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
                       </div>
                     </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="9 11 12 14 20 6" />
-                      <path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Form elements
@@ -260,10 +247,7 @@
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Extra
@@ -305,6 +289,11 @@
                         Gallery
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../license.html" >
+                        License
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../profile.html" >
                         Profile
@@ -315,17 +304,16 @@
                         Music
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../welcome.html" >
+                        Welcome
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <rect x="4" y="4" width="6" height="5" rx="2" />
-                      <rect x="4" y="13" width="6" height="7" rx="2" />
-                      <rect x="14" y="4" width="6" height="7" rx="2" />
-                      <rect x="14" y="15" width="6" height="5" rx="2" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Layout
@@ -367,11 +355,21 @@
                         Navbar dark
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../layout-navbar-overlap.html" >
+                        Navbar overlap
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../layout-dark.html" >
                         Dark mode
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../layout-rtl.html" >
+                        RTL mode
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../layout-fluid.html" >
                         Fluid
@@ -384,199 +382,21 @@
                     </li>
                   </ul>
                 </li>
-              <li class="nav-item active dropdown">
+                <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link" href="../docs/index.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="14 3 14 8 19 8" />
-                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
-                      <line x1="9" y1="9" x2="10" y2="9" />
-                      <line x1="9" y1="13" x2="15" y2="13" />
-                      <line x1="9" y1="17" x2="15" y2="17" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
-                    Docs
+                      Documentation
                     </span>
                   </a>
-                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-3">
-                  <li >
-                    <a class="dropdown-item" href="../docs/index.html" >
-                      Introduction
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/alerts.html" >
-                      Alerts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/autosize.html" >
-                      Autosize
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/avatars.html" >
-                      Avatars
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/badges.html" >
-                      Badges
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/breadcrumb.html" >
-                      Breadcrumb
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/buttons.html" >
-                      Buttons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/cards.html" >
-                      Cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/carousel.html" >
-                      Carousel
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/colors.html" >
-                      Colors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item active" href="../docs/countup.html" >
-                      Countup
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/cursors.html" >
-                      Cursors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/charts.html" >
-                      Charts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/dropdowns.html" >
-                      Dropdowns
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/divider.html" >
-                      Divider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/empty.html" >
-                      Empty states
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/flags.html" >
-                      Flags
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/form-elements.html" >
-                      Form elements
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/form-helpers.html" >
-                      Form helpers
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/input-mask.html" >
-                      Form input mask
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/modals.html" >
-                      Modals
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/progress.html" >
-                      Progress
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/payments.html" >
-                      Payments
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/range-slider.html" >
-                      Range slider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/ribbons.html" >
-                      Ribbons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/spinners.html" >
-                      Spinners
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/steps.html" >
-                      Steps
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tables.html" >
-                      Tables
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tabs.html" >
-                      Tabs
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/timelines.html" >
-                      Timelines
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/toasts.html" >
-                      Toasts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tooltips.html" >
-                      Tooltips
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/typography.html" >
-                      Typography
-                    </a>
-                  </li>
-                </ul>
                 </li>
               </ul>
               <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <circle cx="10" cy="10" r="7" />
-                      <line x1="21" y1="21" x2="15" y2="15" />
-                    </svg>
                     </span>
                     <input type="text" class="form-control" placeholder="Search…">
                   </div>
@@ -585,52 +405,259 @@
             </div>
           </div>
         </div>
+      </div>
       <div class="content">
         <div class="container-xl">
           <!-- Page title -->
-          <div class="page-header">
+          <div class="page-header d-print-none">
             <div class="row align-items-center">
-              <div class="col-auto">
+              <div class="col">
                 <h2 class="page-title">
                   Documentation
                 </h2>
               </div>
             </div>
           </div>
-          <div class="row justify-content-center">
+          <div class="row g-5">
-            <div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
+            <div class="d-none d-lg-block col-lg-3">
-              <div class="sticky-top">
+              <ul class="nav nav-pills nav-vertical">
-                <a href="https://github.com/tabler/tabler" class="btn btn-github mb-6 btn-block" target="_blank" rel="noreferrer">
+                <li class="nav-item">
-                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                  <a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
-                    <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
-                  </svg>
+                    </span>
-                  Browse source code
+                    Getting started
+                    <span class="nav-link-toggle"></span>
                   </a>
-                <h5 class="subheader">On this page</h5>
+                  <ul class="nav collapse" id="menu-base">
-                <ul class="list-unstyled">
+                    <li class="nav-item">
-                  <li class="toc-entry toc-h2"><a href="#default-countup">Default countup</a></li>
+                      <a href="../docs/index.html" class="nav-link">
-                  <li class="toc-entry toc-h2"><a href="#duration">Duration</a></li>
+                        Introduction
-                  <li class="toc-entry toc-h2"><a href="#starting-value">Starting value</a></li>
+                      </a>
-                  <li class="toc-entry toc-h2"><a href="#decimal-places">Decimal places</a></li>
+                    </li>
-                  <li class="toc-entry toc-h2"><a href="#easing">Easing</a></li>
+                    <li class="nav-item">
-                  <li class="toc-entry toc-h2"><a href="#use-grouping">Use grouping</a></li>
+                      <a href="../docs/colors.html" class="nav-link">
-                  <li class="toc-entry toc-h2"><a href="#separator">Separator</a></li>
+                        Colors
-                  <li class="toc-entry toc-h2"><a href="#decimal-separator">Decimal separator</a></li>
+                      </a>
-                  <li class="toc-entry toc-h2"><a href="#prefix">Prefix</a></li>
+                    </li>
-                  <li class="toc-entry toc-h2"><a href="#suffix">Suffix</a></li>
+                    <li class="nav-item">
+                      <a href="../docs/typography.html" class="nav-link">
+                        Typography
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/icons.html" class="nav-link">
+                        Icons
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
+                    </span>
+                    Components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav collapse show" id="menu-components">
+                    <li class="nav-item">
+                      <a href="../docs/alerts.html" class="nav-link">
+                        Alerts
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/avatars.html" class="nav-link">
+                        Avatars
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/badges.html" class="nav-link">
+                        Badges
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/breadcrumb.html" class="nav-link">
+                        Breadcrumb
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/buttons.html" class="nav-link">
+                        Buttons
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/cards.html" class="nav-link">
+                        Cards
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/carousel.html" class="nav-link">
+                        Carousel
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/dropdowns.html" class="nav-link">
+                        Dropdowns
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/divider.html" class="nav-link">
+                        Divider
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/empty.html" class="nav-link">
+                        Empty states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/modals.html" class="nav-link">
+                        Modals
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/payments.html" class="nav-link">
+                        Payments
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/range-slider.html" class="nav-link">
+                        Range slider
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/ribbons.html" class="nav-link">
+                        Ribbons
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/skeleton.html" class="nav-link">
+                        Skeleton
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/spinners.html" class="nav-link">
+                        Spinners
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/steps.html" class="nav-link">
+                        Steps
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/switch-icon.html" class="nav-link">
+                        Switch icon
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tables.html" class="nav-link">
+                        Tables
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tabs.html" class="nav-link">
+                        Tabs
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/timelines.html" class="nav-link">
+                        Timelines
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/toasts.html" class="nav-link">
+                        Toasts
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tooltips.html" class="nav-link">
+                        Tooltips
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
+                    </span>
+                    Utilities
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/cursors.html" class="nav-link">
+                        Cursors
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
+                    </span>
+                    Plugins
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav collapse" id="menu-plugins">
+                    <li class="nav-item">
+                      <a href="../docs/autosize.html" class="nav-link">
+                        Autosize
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/input-mask.html" class="nav-link">
+                        Form input mask
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/flags.html" class="nav-link">
+                        Flags
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/charts.html" class="nav-link">
+                        Charts
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="../changelog.html" class="nav-link">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
+                    </span>
+                    Changelog
+                    <span class="badge bg-blue-lt ml-auto">1.0.0-alpha.12</span>
+                  </a>
+                </li>
               </ul>
-              </div>
             </div>
             <div class="col-lg-9">
               <div class="card card-lg">
                 <div class="card-body">
                   <div class="markdown">
-                    <div class="d-flex">
+                    <div class="mb-5">
-                      <h2 class="h1 mt-0 mb-3">Countup</h2>
+                      <div class="d-flex mb-3">
+                        <h1 class="mt-0">Countup</h1>
                       </div>
                       <p>A countup element is used to display numerical data in an interesting way and make the interface more interactive. All the available options can be found [here](https://inorganik.github.io/countUp.js/)</p>
+                    </div>
                     <h2 id="default-countup">Default countup</h2>
-                    <p>To create a countup, add <code class="highlighter-rouge">data-countup</code> to any HTML text tag and specify the number which is to be reached. The animation will be triggered as soon as the number enters the viewport.</p>
+                    <p>To create a countup, add <code class="language-plaintext highlighter-rouge">data-countup</code> to any HTML text tag and specify the number which is to be reached. The animation will be triggered as soon as the number enters the viewport.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <h1 data-countup="">30000</h1>
@@ -642,7 +669,7 @@
                       </figure>
                     </div>
                     <h2 id="duration">Duration</h2>
-                    <p>Set the <code class="highlighter-rouge">duration</code> to determine how long the animation should take. By default, the duration is set to 2 seconds, but you can modify it as you wish.</p>
+                    <p>Set the <code class="language-plaintext highlighter-rouge">duration</code> to determine how long the animation should take. By default, the duration is set to 2 seconds, but you can modify it as you wish.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <h1 data-countup="">30000</h1>
@@ -658,7 +685,7 @@
                       </figure>
                     </div>
                     <h2 id="starting-value">Starting value</h2>
-                    <p>By default the countup will start from zero. If you want to set a different start value use <code class="highlighter-rouge">startVal</code>. 
+                    <p>By default the countup will start from zero. If you want to set a different start value use <code class="language-plaintext highlighter-rouge">startVal</code>. 
                       You can also set the start value to be greater than the final value, so that it counts down instead of up.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
@@ -673,7 +700,7 @@
                       </figure>
                     </div>
                     <h2 id="decimal-places">Decimal places</h2>
-                    <p>Set how many decimal numbers should be displayed using <code class="highlighter-rouge">decimalPlaces</code>.</p>
+                    <p>Set how many decimal numbers should be displayed using <code class="language-plaintext highlighter-rouge">decimalPlaces</code>.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <h1 data-countup="">3.123</h1>
@@ -691,7 +718,7 @@
                       </figure>
                     </div>
                     <h2 id="easing">Easing</h2>
-                    <p>Disable easing using <code class="highlighter-rouge">"useEasing": false</code>. Easing is set to <code class="highlighter-rouge">true</code> by default, so that the animation speed changes over the course of its duration.</p>
+                    <p>Disable easing using <code class="language-plaintext highlighter-rouge">"useEasing": false</code>. Easing is set to <code class="language-plaintext highlighter-rouge">true</code> by default, so that the animation speed changes over the course of its duration.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <h1 data-countup="">30000</h1>
@@ -705,7 +732,7 @@
                       </figure>
                     </div>
                     <h2 id="use-grouping">Use grouping</h2>
-                    <p>Disable grouping using <code class="highlighter-rouge">"useGrouping": false</code>. Grouping is set to <code class="highlighter-rouge">true</code> by default and the default group separator is a comma.</p>
+                    <p>Disable grouping using <code class="language-plaintext highlighter-rouge">"useGrouping": false</code>. Grouping is set to <code class="language-plaintext highlighter-rouge">true</code> by default and the default group separator is a comma.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <h1 data-countup="">30000</h1>
@@ -719,7 +746,7 @@
                       </figure>
                     </div>
                     <h2 id="separator">Separator</h2>
-                    <p>You can change the default comma group separator using <code class="highlighter-rouge">separator</code> and specifying the one you wish to use.</p>
+                    <p>You can change the default comma group separator using <code class="language-plaintext highlighter-rouge">separator</code> and specifying the one you wish to use.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <h1 data-countup="">3000000</h1>
@@ -737,7 +764,7 @@
                       </figure>
                     </div>
                     <h2 id="decimal-separator">Decimal separator</h2>
-                    <p>You can also change the decimal separator which is set to a full stop by default. To do it, use <code class="highlighter-rouge">decimal</code> and specify the decimal separator of your choice.</p>
+                    <p>You can also change the decimal separator which is set to a full stop by default. To do it, use <code class="language-plaintext highlighter-rouge">decimal</code> and specify the decimal separator of your choice.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <h1 data-countup="{&quot;decimalPlaces&quot;:2}">3.12</h1>
@@ -755,7 +782,7 @@
                       </figure>
                     </div>
                     <h2 id="prefix">Prefix</h2>
-                    <p>Set the countup prefix using <code class="highlighter-rouge">prefix</code> and specifying the prefix you want to add, for instance a currency symbol.</p>
+                    <p>Set the countup prefix using <code class="language-plaintext highlighter-rouge">prefix</code> and specifying the prefix you want to add, for instance a currency symbol.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <h1 data-countup="{&quot;prefix&quot;:&quot;$&quot;}">30000</h1>
@@ -771,7 +798,7 @@
                       </figure>
                     </div>
                     <h2 id="suffix">Suffix</h2>
-                    <p>Set the countup suffix using <code class="highlighter-rouge">suffix</code>.</p>
+                    <p>Set the countup suffix using <code class="language-plaintext highlighter-rouge">suffix</code>.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <h1 data-countup="{&quot;suffix&quot;:&quot;%&quot;}">30</h1>
@@ -804,7 +831,7 @@
             </div>
           </div>
         </div>
-        <footer class="footer footer-transparent">
+        <footer class="footer footer-transparent d-print-none">
           <div class="container">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ml-lg-auto">
@@ -815,9 +842,16 @@
                 </ul>
               </div>
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item">
                     Copyright © 2020
                     <a href=".." class="link-secondary">Tabler</a>.
                     All rights reserved.
+                  </li>
+                  <li class="list-inline-item">
+                    <a href="../changelog.html" class="link-secondary">v1.0.0-alpha.12</a>
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
@@ -826,7 +860,7 @@
     </div>
     <!-- Libs JS -->
     <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="../dist/libs/jquery/dist/jquery.slim.min.js"></script>
+    <script src="../dist/libs/countup.js/dist/countUp.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
     <script>

demo/docs/cursors.html

@@ -1,18 +1,18 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.5
+* @version 1.0.0-alpha.12
-* @link https://github.com/tabler/tabler
+* @link https://tabler.io
-* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Copyright 2018-2020 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
   <head>
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <title>Cursors - Documentation - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <title>Cursors - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
@@ -25,22 +25,10 @@
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
     <meta name="description" content="You can use different cursors to reflect the intended user interaction with particular elements of an interface. The cursor will change when a user hovers over a given element to indicate the action which can be performed."/>
-    <!-- Libs CSS -->
+    <!-- CSS files -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
-    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
-    <!-- Tabler Core -->
     <link href="../dist/css/tabler.min.css" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
     <link href="../dist/css/tabler-flags.min.css" rel="stylesheet"/>
     <link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
-    <link href="../dist/css/tabler-buttons.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
     <style>
       body {
@@ -50,22 +38,18 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <header class="navbar navbar-expand-md navbar-light">
+      <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
           <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
             <span class="navbar-toggler-icon"></span>
           </button>
           <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-image">
+            <img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
           </a>
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item dropdown d-none d-md-flex mr-3">
               <a href="#" class="nav-link px-0" data-toggle="dropdown" tabindex="-1">
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
-                  <path stroke="none" d="M0 0h24v24H0z"/>
-                  <path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" />
-                  <path d="M9 17v1a3 3 0 0 0 6 0v-1" />
-                </svg>
                 <span class="badge bg-red"></span>
               </a>
               <div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
@@ -78,54 +62,32 @@
             </div>
             <div class="nav-item dropdown">
               <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
+                <span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
                 <div class="d-none d-xl-block pl-2">
                   <div>Paweł Kuna</div>
                   <div class="mt-1 small text-muted">UI Designer</div>
                 </div>
               </a>
-              <div class="dropdown-menu dropdown-menu-right">
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
+                <a href="#" class="dropdown-item">Set status</a>
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <a href="#" class="dropdown-item">Profile & account</a>
-                    <path stroke="none" d="M0 0h24v24H0z"/>
+                <a href="#" class="dropdown-item">Feedback</a>
-                    <path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-                    <circle cx="12" cy="12" r="3" />
-                  </svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                    <path stroke="none" d="M0 0h24v24H0z"/>
-                    <path d="M9 7 h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" />
-                    <path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" />
-                    <line x1="16" y1="5" x2="19" y2="8" />
-                  </svg>
-                  Another action
-                </a>
                 <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <a href="#" class="dropdown-item">Settings</a>
-                    <path stroke="none" d="M0 0h24v24H0z"/>
+                <a href="#" class="dropdown-item">Logout</a>
-                    <line x1="12" y1="5" x2="12" y2="19" />
-                    <line x1="5" y1="12" x2="19" y2="12" />
-                  </svg>
-                  Separated link</a>
               </div>
             </div>
           </div>
         </div>
       </header>
       <div class="navbar-expand-md">
-        <div class="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar navbar-light">
             <div class="container-xl">
               <ul class="navbar-nav">
                 <li class="nav-item">
                   <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="5 12 3 12 12 3 21 12 19 12" />
-                      <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
-                      <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Home
@@ -134,14 +96,7 @@
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" />
-                      <line x1="12" y1="12" x2="20" y2="7.5" />
-                      <line x1="12" y1="12" x2="12" y2="21" />
-                      <line x1="12" y1="12" x2="4" y2="7.5" />
-                      <line x1="16" y1="5.25" x2="8" y2="9.75" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       User Interface
@@ -168,11 +123,21 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../cards-masonry.html" >
+                        Cards Masonry
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../dropdowns.html" >
                         Dropdowns
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../icons.html" >
+                        Icons
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../modals.html" >
                         Modals
@@ -198,6 +163,26 @@
                         Charts
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../charts-heatmap.html" >
+                        Charts heatmap
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../skeleton.html" >
+                        Skeleton
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../tabs.html" >
+                        Tabs
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../tables.html" >
                         Tables
@@ -218,6 +203,16 @@
                         Lists
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../typography.html" >
+                        Typography
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../markdown.html" >
+                        Markdown
+                      </a>
+                    </li>
                     <li class="dropright">
                       <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
                         Authentication
@@ -234,24 +229,16 @@
                         Error pages
                       </a>
                       <div class="dropdown-menu">
-                      <a href="../400.html" class="dropdown-item">400 page</a>
+                        <a href="../error-404.html" class="dropdown-item">404 page</a>
-                      <a href="../401.html" class="dropdown-item">401 page</a>
+                        <a href="../error-500.html" class="dropdown-item">500 page</a>
-                      <a href="../403.html" class="dropdown-item">403 page</a>
+                        <a href="../error-maintenance.html" class="dropdown-item">Maintenance page</a>
-                      <a href="../404.html" class="dropdown-item">404 page</a>
-                      <a href="../500.html" class="dropdown-item">500 page</a>
-                      <a href="../503.html" class="dropdown-item">503 page</a>
-                      <a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
                       </div>
                     </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="9 11 12 14 20 6" />
-                      <path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Form elements
@@ -260,10 +247,7 @@
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Extra
@@ -305,6 +289,11 @@
                         Gallery
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../license.html" >
+                        License
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../profile.html" >
                         Profile
@@ -315,17 +304,16 @@
                         Music
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../welcome.html" >
+                        Welcome
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <rect x="4" y="4" width="6" height="5" rx="2" />
-                      <rect x="4" y="13" width="6" height="7" rx="2" />
-                      <rect x="14" y="4" width="6" height="7" rx="2" />
-                      <rect x="14" y="15" width="6" height="5" rx="2" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Layout
@@ -367,11 +355,21 @@
                         Navbar dark
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../layout-navbar-overlap.html" >
+                        Navbar overlap
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../layout-dark.html" >
                         Dark mode
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../layout-rtl.html" >
+                        RTL mode
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../layout-fluid.html" >
                         Fluid
@@ -384,199 +382,21 @@
                     </li>
                   </ul>
                 </li>
-              <li class="nav-item active dropdown">
+                <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link" href="../docs/index.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="14 3 14 8 19 8" />
-                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
-                      <line x1="9" y1="9" x2="10" y2="9" />
-                      <line x1="9" y1="13" x2="15" y2="13" />
-                      <line x1="9" y1="17" x2="15" y2="17" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
-                    Docs
+                      Documentation
                     </span>
                   </a>
-                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-3">
-                  <li >
-                    <a class="dropdown-item" href="../docs/index.html" >
-                      Introduction
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/alerts.html" >
-                      Alerts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/autosize.html" >
-                      Autosize
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/avatars.html" >
-                      Avatars
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/badges.html" >
-                      Badges
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/breadcrumb.html" >
-                      Breadcrumb
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/buttons.html" >
-                      Buttons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/cards.html" >
-                      Cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/carousel.html" >
-                      Carousel
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/colors.html" >
-                      Colors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/countup.html" >
-                      Countup
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item active" href="../docs/cursors.html" >
-                      Cursors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/charts.html" >
-                      Charts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/dropdowns.html" >
-                      Dropdowns
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/divider.html" >
-                      Divider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/empty.html" >
-                      Empty states
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/flags.html" >
-                      Flags
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/form-elements.html" >
-                      Form elements
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/form-helpers.html" >
-                      Form helpers
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/input-mask.html" >
-                      Form input mask
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/modals.html" >
-                      Modals
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/progress.html" >
-                      Progress
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/payments.html" >
-                      Payments
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/range-slider.html" >
-                      Range slider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/ribbons.html" >
-                      Ribbons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/spinners.html" >
-                      Spinners
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/steps.html" >
-                      Steps
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tables.html" >
-                      Tables
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tabs.html" >
-                      Tabs
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/timelines.html" >
-                      Timelines
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/toasts.html" >
-                      Toasts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tooltips.html" >
-                      Tooltips
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/typography.html" >
-                      Typography
-                    </a>
-                  </li>
-                </ul>
                 </li>
               </ul>
               <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <circle cx="10" cy="10" r="7" />
-                      <line x1="21" y1="21" x2="15" y2="15" />
-                    </svg>
                     </span>
                     <input type="text" class="form-control" placeholder="Search…">
                   </div>
@@ -585,50 +405,266 @@
             </div>
           </div>
         </div>
+      </div>
       <div class="content">
         <div class="container-xl">
           <!-- Page title -->
-          <div class="page-header">
+          <div class="page-header d-print-none">
             <div class="row align-items-center">
-              <div class="col-auto">
+              <div class="col">
                 <h2 class="page-title">
                   Documentation
                 </h2>
               </div>
             </div>
           </div>
-          <div class="row justify-content-center">
+          <div class="row g-5">
-            <div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
+            <div class="d-none d-lg-block col-lg-3">
-              <div class="sticky-top">
+              <ul class="nav nav-pills nav-vertical">
-                <a href="https://github.com/tabler/tabler" class="btn btn-github mb-6 btn-block" target="_blank" rel="noreferrer">
+                <li class="nav-item">
-                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                  <a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
-                    <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
-                  </svg>
+                    </span>
-                  Browse source code
+                    Getting started
+                    <span class="nav-link-toggle"></span>
                   </a>
-                <h5 class="subheader">On this page</h5>
+                  <ul class="nav collapse" id="menu-base">
-                <ul class="list-unstyled">
+                    <li class="nav-item">
-                  <li class="toc-entry toc-h2"><a href="#cursor-utilities">Cursor utilities</a></li>
+                      <a href="../docs/index.html" class="nav-link">
+                        Introduction
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/colors.html" class="nav-link">
+                        Colors
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/typography.html" class="nav-link">
+                        Typography
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/icons.html" class="nav-link">
+                        Icons
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="false">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
+                    </span>
+                    Components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav collapse" id="menu-components">
+                    <li class="nav-item">
+                      <a href="../docs/alerts.html" class="nav-link">
+                        Alerts
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/avatars.html" class="nav-link">
+                        Avatars
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/badges.html" class="nav-link">
+                        Badges
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/breadcrumb.html" class="nav-link">
+                        Breadcrumb
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/buttons.html" class="nav-link">
+                        Buttons
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/cards.html" class="nav-link">
+                        Cards
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/carousel.html" class="nav-link">
+                        Carousel
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/dropdowns.html" class="nav-link">
+                        Dropdowns
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/divider.html" class="nav-link">
+                        Divider
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/empty.html" class="nav-link">
+                        Empty states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/modals.html" class="nav-link">
+                        Modals
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/payments.html" class="nav-link">
+                        Payments
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/range-slider.html" class="nav-link">
+                        Range slider
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/ribbons.html" class="nav-link">
+                        Ribbons
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/skeleton.html" class="nav-link">
+                        Skeleton
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/spinners.html" class="nav-link">
+                        Spinners
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/steps.html" class="nav-link">
+                        Steps
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/switch-icon.html" class="nav-link">
+                        Switch icon
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tables.html" class="nav-link">
+                        Tables
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tabs.html" class="nav-link">
+                        Tabs
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/timelines.html" class="nav-link">
+                        Timelines
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/toasts.html" class="nav-link">
+                        Toasts
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tooltips.html" class="nav-link">
+                        Tooltips
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="true">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
+                    </span>
+                    Utilities
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav collapse show" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/cursors.html" class="nav-link active">
+                        Cursors
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
+                    </span>
+                    Plugins
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav collapse" id="menu-plugins">
+                    <li class="nav-item">
+                      <a href="../docs/autosize.html" class="nav-link">
+                        Autosize
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/input-mask.html" class="nav-link">
+                        Form input mask
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/flags.html" class="nav-link">
+                        Flags
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/charts.html" class="nav-link">
+                        Charts
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="../changelog.html" class="nav-link">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
+                    </span>
+                    Changelog
+                    <span class="badge bg-blue-lt ml-auto">1.0.0-alpha.12</span>
+                  </a>
+                </li>
               </ul>
-              </div>
             </div>
             <div class="col-lg-9">
               <div class="card card-lg">
                 <div class="card-body">
                   <div class="markdown">
-                    <div class="d-flex">
+                    <div class="mb-5">
-                      <h2 class="h1 mt-0 mb-3">Cursors</h2>
+                      <div class="d-flex mb-3">
+                        <h1 class="mt-0">Cursors</h1>
                       </div>
                       <p>You can use different cursors to reflect the intended user interaction with particular elements of an interface. The cursor will change when a user hovers over a given element to indicate the action which can be performed.</p>
+                    </div>
                     <h2 id="cursor-utilities">Cursor utilities</h2>
                     <p>Use one of the available cursor utilities depending on the action you want to indicate.</p>
                     <ul>
-                      <li><code class="highlighter-rouge">.cursor-auto</code>- the cursor style depends on what’s inside a given element</li>
+                      <li><code class="language-plaintext highlighter-rouge">.cursor-auto</code>- the cursor style depends on what’s inside a given element</li>
-                      <li><code class="highlighter-rouge">.cursor-pointer</code> - a pointing cursor, used to show that an element is clickable</li>
+                      <li><code class="language-plaintext highlighter-rouge">.cursor-pointer</code> - a pointing cursor, used to show that an element is clickable</li>
-                      <li><code class="highlighter-rouge">.cursor-move</code> - a cursor which shows that a given element can be moved</li>
+                      <li><code class="language-plaintext highlighter-rouge">.cursor-move</code> - a cursor which shows that a given element can be moved</li>
-                      <li><code class="highlighter-rouge">.cursor-not-allowed</code> - a cursor which shows that a user is not allowed to perform an action on an element</li>
+                      <li><code class="language-plaintext highlighter-rouge">.cursor-not-allowed</code> - a cursor which shows that a user is not allowed to perform an action on an element</li>
-                      <li><code class="highlighter-rouge">.cursor-zoom-in</code> - a cursor which shows that a user can zoom in</li>
+                      <li><code class="language-plaintext highlighter-rouge">.cursor-zoom-in</code> - a cursor which shows that a user can zoom in</li>
-                      <li><code class="highlighter-rouge">.cursor-zoom-out</code> - a cursor which shows that a user can zoom out</li>
+                      <li><code class="language-plaintext highlighter-rouge">.cursor-zoom-out</code> - a cursor which shows that a user can zoom out</li>
                     </ul>
                     <div class="example no_toc_section">
                       <div class="example-content">
@@ -684,7 +720,7 @@
             </div>
           </div>
         </div>
-        <footer class="footer footer-transparent">
+        <footer class="footer footer-transparent d-print-none">
           <div class="container">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ml-lg-auto">
@@ -695,9 +731,16 @@
                 </ul>
               </div>
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item">
                     Copyright © 2020
                     <a href=".." class="link-secondary">Tabler</a>.
                     All rights reserved.
+                  </li>
+                  <li class="list-inline-item">
+                    <a href="../changelog.html" class="link-secondary">v1.0.0-alpha.12</a>
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
@@ -706,7 +749,6 @@
     </div>
     <!-- Libs JS -->
     <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="../dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
     <script>

demo/docs/divider.html

@@ -1,18 +1,18 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.5
+* @version 1.0.0-alpha.12
-* @link https://github.com/tabler/tabler
+* @link https://tabler.io
-* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Copyright 2018-2020 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
   <head>
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <title>Divider - Documentation - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <title>Divider - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
@@ -25,22 +25,10 @@
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
     <meta name="description" content="Dividers help organize content and make the interface layout clear and uncluttered. Greater clarity adds up to better user experience and enhanced interaction with a website or app."/>
-    <!-- Libs CSS -->
+    <!-- CSS files -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
-    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
-    <!-- Tabler Core -->
     <link href="../dist/css/tabler.min.css" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
     <link href="../dist/css/tabler-flags.min.css" rel="stylesheet"/>
     <link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
-    <link href="../dist/css/tabler-buttons.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
     <style>
       body {
@@ -50,22 +38,18 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <header class="navbar navbar-expand-md navbar-light">
+      <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
           <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
             <span class="navbar-toggler-icon"></span>
           </button>
           <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-image">
+            <img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
           </a>
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item dropdown d-none d-md-flex mr-3">
               <a href="#" class="nav-link px-0" data-toggle="dropdown" tabindex="-1">
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
-                  <path stroke="none" d="M0 0h24v24H0z"/>
-                  <path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" />
-                  <path d="M9 17v1a3 3 0 0 0 6 0v-1" />
-                </svg>
                 <span class="badge bg-red"></span>
               </a>
               <div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
@@ -78,54 +62,32 @@
             </div>
             <div class="nav-item dropdown">
               <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
+                <span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
                 <div class="d-none d-xl-block pl-2">
                   <div>Paweł Kuna</div>
                   <div class="mt-1 small text-muted">UI Designer</div>
                 </div>
               </a>
-              <div class="dropdown-menu dropdown-menu-right">
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
+                <a href="#" class="dropdown-item">Set status</a>
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <a href="#" class="dropdown-item">Profile & account</a>
-                    <path stroke="none" d="M0 0h24v24H0z"/>
+                <a href="#" class="dropdown-item">Feedback</a>
-                    <path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-                    <circle cx="12" cy="12" r="3" />
-                  </svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                    <path stroke="none" d="M0 0h24v24H0z"/>
-                    <path d="M9 7 h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" />
-                    <path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" />
-                    <line x1="16" y1="5" x2="19" y2="8" />
-                  </svg>
-                  Another action
-                </a>
                 <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <a href="#" class="dropdown-item">Settings</a>
-                    <path stroke="none" d="M0 0h24v24H0z"/>
+                <a href="#" class="dropdown-item">Logout</a>
-                    <line x1="12" y1="5" x2="12" y2="19" />
-                    <line x1="5" y1="12" x2="19" y2="12" />
-                  </svg>
-                  Separated link</a>
               </div>
             </div>
           </div>
         </div>
       </header>
       <div class="navbar-expand-md">
-        <div class="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar navbar-light">
             <div class="container-xl">
               <ul class="navbar-nav">
                 <li class="nav-item">
                   <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="5 12 3 12 12 3 21 12 19 12" />
-                      <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
-                      <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Home
@@ -134,14 +96,7 @@
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" />
-                      <line x1="12" y1="12" x2="20" y2="7.5" />
-                      <line x1="12" y1="12" x2="12" y2="21" />
-                      <line x1="12" y1="12" x2="4" y2="7.5" />
-                      <line x1="16" y1="5.25" x2="8" y2="9.75" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       User Interface
@@ -168,11 +123,21 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../cards-masonry.html" >
+                        Cards Masonry
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../dropdowns.html" >
                         Dropdowns
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../icons.html" >
+                        Icons
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../modals.html" >
                         Modals
@@ -198,6 +163,26 @@
                         Charts
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../charts-heatmap.html" >
+                        Charts heatmap
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../skeleton.html" >
+                        Skeleton
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../tabs.html" >
+                        Tabs
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../tables.html" >
                         Tables
@@ -218,6 +203,16 @@
                         Lists
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../typography.html" >
+                        Typography
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../markdown.html" >
+                        Markdown
+                      </a>
+                    </li>
                     <li class="dropright">
                       <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
                         Authentication
@@ -234,24 +229,16 @@
                         Error pages
                       </a>
                       <div class="dropdown-menu">
-                      <a href="../400.html" class="dropdown-item">400 page</a>
+                        <a href="../error-404.html" class="dropdown-item">404 page</a>
-                      <a href="../401.html" class="dropdown-item">401 page</a>
+                        <a href="../error-500.html" class="dropdown-item">500 page</a>
-                      <a href="../403.html" class="dropdown-item">403 page</a>
+                        <a href="../error-maintenance.html" class="dropdown-item">Maintenance page</a>
-                      <a href="../404.html" class="dropdown-item">404 page</a>
-                      <a href="../500.html" class="dropdown-item">500 page</a>
-                      <a href="../503.html" class="dropdown-item">503 page</a>
-                      <a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
                       </div>
                     </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="9 11 12 14 20 6" />
-                      <path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Form elements
@@ -260,10 +247,7 @@
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Extra
@@ -305,6 +289,11 @@
                         Gallery
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../license.html" >
+                        License
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../profile.html" >
                         Profile
@@ -315,17 +304,16 @@
                         Music
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../welcome.html" >
+                        Welcome
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <rect x="4" y="4" width="6" height="5" rx="2" />
-                      <rect x="4" y="13" width="6" height="7" rx="2" />
-                      <rect x="14" y="4" width="6" height="7" rx="2" />
-                      <rect x="14" y="15" width="6" height="5" rx="2" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Layout
@@ -367,11 +355,21 @@
                         Navbar dark
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../layout-navbar-overlap.html" >
+                        Navbar overlap
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../layout-dark.html" >
                         Dark mode
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../layout-rtl.html" >
+                        RTL mode
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../layout-fluid.html" >
                         Fluid
@@ -384,199 +382,21 @@
                     </li>
                   </ul>
                 </li>
-              <li class="nav-item active dropdown">
+                <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link" href="../docs/index.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="14 3 14 8 19 8" />
-                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
-                      <line x1="9" y1="9" x2="10" y2="9" />
-                      <line x1="9" y1="13" x2="15" y2="13" />
-                      <line x1="9" y1="17" x2="15" y2="17" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
-                    Docs
+                      Documentation
                     </span>
                   </a>
-                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-3">
-                  <li >
-                    <a class="dropdown-item" href="../docs/index.html" >
-                      Introduction
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/alerts.html" >
-                      Alerts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/autosize.html" >
-                      Autosize
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/avatars.html" >
-                      Avatars
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/badges.html" >
-                      Badges
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/breadcrumb.html" >
-                      Breadcrumb
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/buttons.html" >
-                      Buttons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/cards.html" >
-                      Cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/carousel.html" >
-                      Carousel
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/colors.html" >
-                      Colors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/countup.html" >
-                      Countup
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/cursors.html" >
-                      Cursors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/charts.html" >
-                      Charts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/dropdowns.html" >
-                      Dropdowns
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/divider.html" >
-                      Divider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/empty.html" >
-                      Empty states
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/flags.html" >
-                      Flags
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/form-elements.html" >
-                      Form elements
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/form-helpers.html" >
-                      Form helpers
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/input-mask.html" >
-                      Form input mask
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/modals.html" >
-                      Modals
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/progress.html" >
-                      Progress
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/payments.html" >
-                      Payments
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/range-slider.html" >
-                      Range slider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/ribbons.html" >
-                      Ribbons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/spinners.html" >
-                      Spinners
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/steps.html" >
-                      Steps
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tables.html" >
-                      Tables
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tabs.html" >
-                      Tabs
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/timelines.html" >
-                      Timelines
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/toasts.html" >
-                      Toasts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tooltips.html" >
-                      Tooltips
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/typography.html" >
-                      Typography
-                    </a>
-                  </li>
-                </ul>
                 </li>
               </ul>
               <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <circle cx="10" cy="10" r="7" />
-                      <line x1="21" y1="21" x2="15" y2="15" />
-                    </svg>
                     </span>
                     <input type="text" class="form-control" placeholder="Search…">
                   </div>
@@ -585,60 +405,270 @@
             </div>
           </div>
         </div>
+      </div>
       <div class="content">
         <div class="container-xl">
           <!-- Page title -->
-          <div class="page-header">
+          <div class="page-header d-print-none">
             <div class="row align-items-center">
-              <div class="col-auto">
+              <div class="col">
                 <h2 class="page-title">
                   Documentation
                 </h2>
               </div>
             </div>
           </div>
-          <div class="row justify-content-center">
+          <div class="row g-5">
-            <div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
+            <div class="d-none d-lg-block col-lg-3">
-              <div class="sticky-top">
+              <ul class="nav nav-pills nav-vertical">
-                <a href="https://github.com/tabler/tabler" class="btn btn-github mb-6 btn-block" target="_blank" rel="noreferrer">
+                <li class="nav-item">
-                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                  <a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
-                    <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
-                  </svg>
+                    </span>
-                  Browse source code
+                    Getting started
+                    <span class="nav-link-toggle"></span>
                   </a>
-                <h5 class="subheader">On this page</h5>
+                  <ul class="nav collapse" id="menu-base">
-                <ul class="list-unstyled">
+                    <li class="nav-item">
-                  <li class="toc-entry toc-h2"><a href="#default-markup">Default markup</a></li>
+                      <a href="../docs/index.html" class="nav-link">
-                  <li class="toc-entry toc-h2"><a href="#text-position">Text position</a></li>
+                        Introduction
-                  <li class="toc-entry toc-h2"><a href="#divider-color">Divider color</a></li>
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/colors.html" class="nav-link">
+                        Colors
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/typography.html" class="nav-link">
+                        Typography
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/icons.html" class="nav-link">
+                        Icons
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
+                    </span>
+                    Components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav collapse show" id="menu-components">
+                    <li class="nav-item">
+                      <a href="../docs/alerts.html" class="nav-link">
+                        Alerts
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/avatars.html" class="nav-link">
+                        Avatars
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/badges.html" class="nav-link">
+                        Badges
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/breadcrumb.html" class="nav-link">
+                        Breadcrumb
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/buttons.html" class="nav-link">
+                        Buttons
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/cards.html" class="nav-link">
+                        Cards
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/carousel.html" class="nav-link">
+                        Carousel
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/dropdowns.html" class="nav-link">
+                        Dropdowns
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/divider.html" class="nav-link active">
+                        Divider
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/empty.html" class="nav-link">
+                        Empty states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/modals.html" class="nav-link">
+                        Modals
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/payments.html" class="nav-link">
+                        Payments
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/range-slider.html" class="nav-link">
+                        Range slider
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/ribbons.html" class="nav-link">
+                        Ribbons
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/skeleton.html" class="nav-link">
+                        Skeleton
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/spinners.html" class="nav-link">
+                        Spinners
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/steps.html" class="nav-link">
+                        Steps
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/switch-icon.html" class="nav-link">
+                        Switch icon
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tables.html" class="nav-link">
+                        Tables
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tabs.html" class="nav-link">
+                        Tabs
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/timelines.html" class="nav-link">
+                        Timelines
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/toasts.html" class="nav-link">
+                        Toasts
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tooltips.html" class="nav-link">
+                        Tooltips
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
+                    </span>
+                    Utilities
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/cursors.html" class="nav-link">
+                        Cursors
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
+                    </span>
+                    Plugins
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav collapse" id="menu-plugins">
+                    <li class="nav-item">
+                      <a href="../docs/autosize.html" class="nav-link">
+                        Autosize
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/input-mask.html" class="nav-link">
+                        Form input mask
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/flags.html" class="nav-link">
+                        Flags
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/charts.html" class="nav-link">
+                        Charts
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="../changelog.html" class="nav-link">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
+                    </span>
+                    Changelog
+                    <span class="badge bg-blue-lt ml-auto">1.0.0-alpha.12</span>
+                  </a>
+                </li>
               </ul>
-              </div>
             </div>
             <div class="col-lg-9">
               <div class="card card-lg">
                 <div class="card-body">
                   <div class="markdown">
-                    <div class="d-flex">
+                    <div class="mb-5">
-                      <h2 class="h1 mt-0 mb-3">Divider</h2>
+                      <div class="d-flex mb-3">
+                        <h1 class="mt-0">Divider</h1>
                         <p class="ml-auto">
                           <a href="https://getbootstrap.com/docs/4.4/components/dropdowns/#dividers" target="_blank">
-                          <svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon pr-1 text-blue" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" /><line x1="10" y1="14" x2="20" y2="4" /><polyline points="15 4 20 4 20 9" /></svg>
-                            <path stroke="none" d="M0 0h24v24H0z"/>
-                            <path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
-                            <line x1="10" y1="14" x2="20" y2="4" />
-                            <polyline points="15 4 20 4 20 9" />
-                          </svg>
                             Bootstrap documentation
                           </a>
                         </p>
                       </div>
                       <p>Dividers help organize content and make the interface layout clear and uncluttered. Greater clarity adds up to better user experience and enhanced interaction with a website or app.</p>
+                    </div>
                     <h2 id="default-markup">Default markup</h2>
                     <p>Use dividers to visually separate content into parts. You can use a line only or add text that will be centered by default.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
+                        <div class="demo-dividers">
                           <p>
-                          Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
+                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
                           </p>
                           <div class="hr-text">See also</div>
                           <p>
@@ -646,10 +676,11 @@
                           </p>
                         </div>
                       </div>
+                    </div>
                     <div class="example-code">
                       <figure class="highlight">
                         <pre><code class="language-html" data-lang="html"><span class="nt">&lt;p&gt;</span>
-  Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
 <span class="nt">&lt;/p&gt;</span>
 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"hr-text"</span><span class="nt">&gt;</span>See also<span class="nt">&lt;/div&gt;</span>
 <span class="nt">&lt;p&gt;</span>
@@ -661,8 +692,9 @@
                     <p>You can modify the position of the text which is to be included in a separator and make it left- or right-aligned. Otherwise, the text will remain centered.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
+                        <div class="demo-dividers">
                           <p>
-                          Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
+                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
                           </p>
                           <div class="hr-text hr-text-left">Left divider</div>
                           <p>
@@ -670,7 +702,7 @@
                           </p>
                           <div class="hr-text">Centered divider</div>
                           <p>
-                          Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
+                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
                           </p>
                           <div class="hr-text hr-text-right">Right divider</div>
                           <p>
@@ -678,10 +710,11 @@
                           </p>
                         </div>
                       </div>
+                    </div>
                     <div class="example-code">
                       <figure class="highlight">
                         <pre><code class="language-html" data-lang="html"><span class="nt">&lt;p&gt;</span>
-  Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
 <span class="nt">&lt;/p&gt;</span>
 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"hr-text hr-text-left"</span><span class="nt">&gt;</span>Left divider<span class="nt">&lt;/div&gt;</span>
 <span class="nt">&lt;p&gt;</span>
@@ -689,7 +722,7 @@
 <span class="nt">&lt;/p&gt;</span>
 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"hr-text"</span><span class="nt">&gt;</span>Centered divider<span class="nt">&lt;/div&gt;</span>
 <span class="nt">&lt;p&gt;</span>
-  Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
 <span class="nt">&lt;/p&gt;</span>
 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"hr-text hr-text-right"</span><span class="nt">&gt;</span>Right divider<span class="nt">&lt;/div&gt;</span>
 <span class="nt">&lt;p&gt;</span>
@@ -701,6 +734,7 @@
                     <p>Customize the color of dividers to make them go well with your design. Click <a href="./colors.html">here</a> to see the list of available colors.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
+                        <div class="demo-dividers">
                           <p>
                             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
                           </p>
@@ -709,11 +743,16 @@
                             Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
                           </p>
                           <div class="hr-text text-red">Red divider</div>
+                          <p>
+                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
+                          </p>
+                          <div class="hr-text text-primary">Primary divider</div>
                           <p>
                             Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
                           </p>
                         </div>
                       </div>
+                    </div>
                     <div class="example-code">
                       <figure class="highlight">
                         <pre><code class="language-html" data-lang="html"><span class="nt">&lt;p&gt;</span>
@@ -724,6 +763,10 @@
   Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
 <span class="nt">&lt;/p&gt;</span>
 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"hr-text text-red"</span><span class="nt">&gt;</span>Red divider<span class="nt">&lt;/div&gt;</span>
+<span class="nt">&lt;p&gt;</span>
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
+<span class="nt">&lt;/p&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"hr-text text-primary"</span><span class="nt">&gt;</span>Primary divider<span class="nt">&lt;/div&gt;</span>
 <span class="nt">&lt;p&gt;</span>
   Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
 <span class="nt">&lt;/p&gt;</span></code></pre>
@@ -735,7 +778,7 @@
             </div>
           </div>
         </div>
-        <footer class="footer footer-transparent">
+        <footer class="footer footer-transparent d-print-none">
           <div class="container">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ml-lg-auto">
@@ -746,9 +789,16 @@
                 </ul>
               </div>
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item">
                     Copyright © 2020
                     <a href=".." class="link-secondary">Tabler</a>.
                     All rights reserved.
+                  </li>
+                  <li class="list-inline-item">
+                    <a href="../changelog.html" class="link-secondary">v1.0.0-alpha.12</a>
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
@@ -757,7 +807,6 @@
     </div>
     <!-- Libs JS -->
     <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="../dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
     <script>

demo/docs/empty.html

@@ -1,18 +1,18 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.5
+* @version 1.0.0-alpha.12
-* @link https://github.com/tabler/tabler
+* @link https://tabler.io
-* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Copyright 2018-2020 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
   <head>
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <title>Empty states - Documentation - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <title>Empty states - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
@@ -25,22 +25,10 @@
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
     <meta name="description" content="Empty states or blank pages are commonly used as placeholders for first-use, empty data or error screens. Their aim is to engage users when there is no content to display and that is why their design is extremely important from the point of view of the user experience of your website or app."/>
-    <!-- Libs CSS -->
+    <!-- CSS files -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
-    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
-    <!-- Tabler Core -->
     <link href="../dist/css/tabler.min.css" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
     <link href="../dist/css/tabler-flags.min.css" rel="stylesheet"/>
     <link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
-    <link href="../dist/css/tabler-buttons.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
     <style>
       body {
@@ -50,22 +38,18 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <header class="navbar navbar-expand-md navbar-light">
+      <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
           <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
             <span class="navbar-toggler-icon"></span>
           </button>
           <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-image">
+            <img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
           </a>
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item dropdown d-none d-md-flex mr-3">
               <a href="#" class="nav-link px-0" data-toggle="dropdown" tabindex="-1">
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
-                  <path stroke="none" d="M0 0h24v24H0z"/>
-                  <path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" />
-                  <path d="M9 17v1a3 3 0 0 0 6 0v-1" />
-                </svg>
                 <span class="badge bg-red"></span>
               </a>
               <div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
@@ -78,54 +62,32 @@
             </div>
             <div class="nav-item dropdown">
               <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
+                <span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
                 <div class="d-none d-xl-block pl-2">
                   <div>Paweł Kuna</div>
                   <div class="mt-1 small text-muted">UI Designer</div>
                 </div>
               </a>
-              <div class="dropdown-menu dropdown-menu-right">
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
+                <a href="#" class="dropdown-item">Set status</a>
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <a href="#" class="dropdown-item">Profile & account</a>
-                    <path stroke="none" d="M0 0h24v24H0z"/>
+                <a href="#" class="dropdown-item">Feedback</a>
-                    <path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-                    <circle cx="12" cy="12" r="3" />
-                  </svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                    <path stroke="none" d="M0 0h24v24H0z"/>
-                    <path d="M9 7 h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" />
-                    <path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" />
-                    <line x1="16" y1="5" x2="19" y2="8" />
-                  </svg>
-                  Another action
-                </a>
                 <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <a href="#" class="dropdown-item">Settings</a>
-                    <path stroke="none" d="M0 0h24v24H0z"/>
+                <a href="#" class="dropdown-item">Logout</a>
-                    <line x1="12" y1="5" x2="12" y2="19" />
-                    <line x1="5" y1="12" x2="19" y2="12" />
-                  </svg>
-                  Separated link</a>
               </div>
             </div>
           </div>
         </div>
       </header>
       <div class="navbar-expand-md">
-        <div class="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar navbar-light">
             <div class="container-xl">
               <ul class="navbar-nav">
                 <li class="nav-item">
                   <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="5 12 3 12 12 3 21 12 19 12" />
-                      <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
-                      <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Home
@@ -134,14 +96,7 @@
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" />
-                      <line x1="12" y1="12" x2="20" y2="7.5" />
-                      <line x1="12" y1="12" x2="12" y2="21" />
-                      <line x1="12" y1="12" x2="4" y2="7.5" />
-                      <line x1="16" y1="5.25" x2="8" y2="9.75" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       User Interface
@@ -168,11 +123,21 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../cards-masonry.html" >
+                        Cards Masonry
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../dropdowns.html" >
                         Dropdowns
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../icons.html" >
+                        Icons
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../modals.html" >
                         Modals
@@ -198,6 +163,26 @@
                         Charts
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../charts-heatmap.html" >
+                        Charts heatmap
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../skeleton.html" >
+                        Skeleton
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../tabs.html" >
+                        Tabs
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../tables.html" >
                         Tables
@@ -218,6 +203,16 @@
                         Lists
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../typography.html" >
+                        Typography
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../markdown.html" >
+                        Markdown
+                      </a>
+                    </li>
                     <li class="dropright">
                       <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
                         Authentication
@@ -234,24 +229,16 @@
                         Error pages
                       </a>
                       <div class="dropdown-menu">
-                      <a href="../400.html" class="dropdown-item">400 page</a>
+                        <a href="../error-404.html" class="dropdown-item">404 page</a>
-                      <a href="../401.html" class="dropdown-item">401 page</a>
+                        <a href="../error-500.html" class="dropdown-item">500 page</a>
-                      <a href="../403.html" class="dropdown-item">403 page</a>
+                        <a href="../error-maintenance.html" class="dropdown-item">Maintenance page</a>
-                      <a href="../404.html" class="dropdown-item">404 page</a>
-                      <a href="../500.html" class="dropdown-item">500 page</a>
-                      <a href="../503.html" class="dropdown-item">503 page</a>
-                      <a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
                       </div>
                     </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="9 11 12 14 20 6" />
-                      <path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Form elements
@@ -260,10 +247,7 @@
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Extra
@@ -305,6 +289,11 @@
                         Gallery
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../license.html" >
+                        License
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../profile.html" >
                         Profile
@@ -315,17 +304,16 @@
                         Music
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../welcome.html" >
+                        Welcome
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <rect x="4" y="4" width="6" height="5" rx="2" />
-                      <rect x="4" y="13" width="6" height="7" rx="2" />
-                      <rect x="14" y="4" width="6" height="7" rx="2" />
-                      <rect x="14" y="15" width="6" height="5" rx="2" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Layout
@@ -367,11 +355,21 @@
                         Navbar dark
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../layout-navbar-overlap.html" >
+                        Navbar overlap
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../layout-dark.html" >
                         Dark mode
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../layout-rtl.html" >
+                        RTL mode
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../layout-fluid.html" >
                         Fluid
@@ -384,199 +382,21 @@
                     </li>
                   </ul>
                 </li>
-              <li class="nav-item active dropdown">
+                <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link" href="../docs/index.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="14 3 14 8 19 8" />
-                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
-                      <line x1="9" y1="9" x2="10" y2="9" />
-                      <line x1="9" y1="13" x2="15" y2="13" />
-                      <line x1="9" y1="17" x2="15" y2="17" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
-                    Docs
+                      Documentation
                     </span>
                   </a>
-                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-3">
-                  <li >
-                    <a class="dropdown-item" href="../docs/index.html" >
-                      Introduction
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/alerts.html" >
-                      Alerts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/autosize.html" >
-                      Autosize
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/avatars.html" >
-                      Avatars
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/badges.html" >
-                      Badges
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/breadcrumb.html" >
-                      Breadcrumb
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/buttons.html" >
-                      Buttons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/cards.html" >
-                      Cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/carousel.html" >
-                      Carousel
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/colors.html" >
-                      Colors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/countup.html" >
-                      Countup
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/cursors.html" >
-                      Cursors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/charts.html" >
-                      Charts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/dropdowns.html" >
-                      Dropdowns
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/divider.html" >
-                      Divider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/empty.html" >
-                      Empty states
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/flags.html" >
-                      Flags
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/form-elements.html" >
-                      Form elements
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/form-helpers.html" >
-                      Form helpers
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/input-mask.html" >
-                      Form input mask
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/modals.html" >
-                      Modals
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/progress.html" >
-                      Progress
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/payments.html" >
-                      Payments
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/range-slider.html" >
-                      Range slider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/ribbons.html" >
-                      Ribbons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/spinners.html" >
-                      Spinners
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/steps.html" >
-                      Steps
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tables.html" >
-                      Tables
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tabs.html" >
-                      Tabs
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/timelines.html" >
-                      Timelines
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/toasts.html" >
-                      Toasts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tooltips.html" >
-                      Tooltips
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/typography.html" >
-                      Typography
-                    </a>
-                  </li>
-                </ul>
                 </li>
               </ul>
               <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <circle cx="10" cy="10" r="7" />
-                      <line x1="21" y1="21" x2="15" y2="15" />
-                    </svg>
                     </span>
                     <input type="text" class="form-control" placeholder="Search…">
                   </div>
@@ -585,65 +405,271 @@
             </div>
           </div>
         </div>
+      </div>
       <div class="content">
         <div class="container-xl">
           <!-- Page title -->
-          <div class="page-header">
+          <div class="page-header d-print-none">
             <div class="row align-items-center">
-              <div class="col-auto">
+              <div class="col">
                 <h2 class="page-title">
                   Documentation
                 </h2>
               </div>
             </div>
           </div>
-          <div class="row justify-content-center">
+          <div class="row g-5">
-            <div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
+            <div class="d-none d-lg-block col-lg-3">
-              <div class="sticky-top">
+              <ul class="nav nav-pills nav-vertical">
-                <a href="https://github.com/tabler/tabler" class="btn btn-github mb-6 btn-block" target="_blank" rel="noreferrer">
+                <li class="nav-item">
-                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                  <a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
-                    <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
-                  </svg>
+                    </span>
-                  Browse source code
+                    Getting started
+                    <span class="nav-link-toggle"></span>
                   </a>
-                <h5 class="subheader">On this page</h5>
+                  <ul class="nav collapse" id="menu-base">
-                <ul class="list-unstyled">
+                    <li class="nav-item">
-                  <li class="toc-entry toc-h2"><a href="#default-markup">Default markup</a></li>
+                      <a href="../docs/index.html" class="nav-link">
-                  <li class="toc-entry toc-h2"><a href="#empty-state-with-illustration">Empty state with illustration</a></li>
+                        Introduction
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/colors.html" class="nav-link">
+                        Colors
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/typography.html" class="nav-link">
+                        Typography
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/icons.html" class="nav-link">
+                        Icons
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
+                    </span>
+                    Components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav collapse show" id="menu-components">
+                    <li class="nav-item">
+                      <a href="../docs/alerts.html" class="nav-link">
+                        Alerts
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/avatars.html" class="nav-link">
+                        Avatars
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/badges.html" class="nav-link">
+                        Badges
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/breadcrumb.html" class="nav-link">
+                        Breadcrumb
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/buttons.html" class="nav-link">
+                        Buttons
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/cards.html" class="nav-link">
+                        Cards
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/carousel.html" class="nav-link">
+                        Carousel
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/dropdowns.html" class="nav-link">
+                        Dropdowns
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/divider.html" class="nav-link">
+                        Divider
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/empty.html" class="nav-link active">
+                        Empty states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/modals.html" class="nav-link">
+                        Modals
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/payments.html" class="nav-link">
+                        Payments
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/range-slider.html" class="nav-link">
+                        Range slider
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/ribbons.html" class="nav-link">
+                        Ribbons
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/skeleton.html" class="nav-link">
+                        Skeleton
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/spinners.html" class="nav-link">
+                        Spinners
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/steps.html" class="nav-link">
+                        Steps
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/switch-icon.html" class="nav-link">
+                        Switch icon
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tables.html" class="nav-link">
+                        Tables
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tabs.html" class="nav-link">
+                        Tabs
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/timelines.html" class="nav-link">
+                        Timelines
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/toasts.html" class="nav-link">
+                        Toasts
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tooltips.html" class="nav-link">
+                        Tooltips
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
+                    </span>
+                    Utilities
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/cursors.html" class="nav-link">
+                        Cursors
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
+                    </span>
+                    Plugins
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav collapse" id="menu-plugins">
+                    <li class="nav-item">
+                      <a href="../docs/autosize.html" class="nav-link">
+                        Autosize
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/input-mask.html" class="nav-link">
+                        Form input mask
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/flags.html" class="nav-link">
+                        Flags
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/charts.html" class="nav-link">
+                        Charts
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="../changelog.html" class="nav-link">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
+                    </span>
+                    Changelog
+                    <span class="badge bg-blue-lt ml-auto">1.0.0-alpha.12</span>
+                  </a>
+                </li>
               </ul>
-              </div>
             </div>
             <div class="col-lg-9">
               <div class="card card-lg">
                 <div class="card-body">
                   <div class="markdown">
-                    <div class="d-flex">
+                    <div class="mb-5">
-                      <h2 class="h1 mt-0 mb-3">Empty states</h2>
+                      <div class="d-flex mb-3">
+                        <h1 class="mt-0">Empty states</h1>
                       </div>
                       <p>Empty states or blank pages are commonly used as placeholders for first-use, empty data or error screens. Their aim is to engage users when there is no content to display and that is why their design is extremely important from the point of view of the user experience of your website or app.</p>
+                    </div>
                     <h2 id="default-markup">Default markup</h2>
                     <p>Use the default empty state to engage users in the critical moments of their experience with your website or app. A good empty state screen should let users know what is happening and what they should do next as well as encourage them to take action.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <div class="empty">
-                          <div class="empty-icon">
+                          <div class="empty-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><circle cx="12" cy="12" r="9" /><line x1="9" y1="10" x2="9.01" y2="10" /><line x1="15" y1="10" x2="15.01" y2="10" /><path d="M9.5 15.25a3.5 3.5 0 0 1 5 0" /></svg>
-                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                              <path stroke="none" d="M0 0h24v24H0z" />
-                              <circle cx="10" cy="10" r="7" />
-                              <line x1="21" y1="21" x2="15" y2="15" />
-                            </svg>
                           </div>
-                          <p class="empty-title h3">No results found</p>
+                          <p class="empty-title">No results found</p>
                           <p class="empty-subtitle text-muted">
                             Try adjusting your search or filter to find what you're looking for.
                           </p>
                           <div class="empty-action">
                             <a href="../." class="btn btn-primary">
-                              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
-                                <path stroke="none" d="M0 0h24v24H0z" />
-                                <circle cx="10" cy="10" r="7" />
-                                <line x1="21" y1="21" x2="15" y2="15" />
-                              </svg>
                               Search again
                             </a>
                           </div>
@@ -653,10 +679,9 @@
                     <div class="example-code">
                       <figure class="highlight">
                         <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"empty"</span><span class="nt">&gt;</span>
-  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"empty-icon"</span><span class="nt">&gt;</span>
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"empty-icon"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&gt;</span>
-    <span class="c">&lt;!-- SVG icon code --&gt;</span>
   <span class="nt">&lt;/div&gt;</span>
-  <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"empty-title h3"</span><span class="nt">&gt;</span>No results found<span class="nt">&lt;/p&gt;</span>
+  <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"empty-title"</span><span class="nt">&gt;</span>No results found<span class="nt">&lt;/p&gt;</span>
   <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"empty-subtitle text-muted"</span><span class="nt">&gt;</span>
     Try adjusting your search or filter to find what you're looking for.
   <span class="nt">&lt;/p&gt;</span>
@@ -674,21 +699,16 @@
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <div class="empty">
-                          <div class="empty-icon">
+                          <div class="empty-img"><img src="../static/illustrations/undraw_quitting_time_dm8t.svg" height="128" alt="" />
-                            <img src="../static/illustrations/undraw_quitting_time_dm8t.svg" class="h-8 mb-4" alt="" />
                           </div>
-                          <p class="empty-title h3">No results found</p>
+                          <p class="empty-title">Invoices are managed from here</p>
                           <p class="empty-subtitle text-muted">
                             Try adjusting your search or filter to find what you're looking for.
                           </p>
                           <div class="empty-action">
                             <a href="../." class="btn btn-primary">
-                              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
-                                <path stroke="none" d="M0 0h24v24H0z" />
+                              New invoice
-                                <circle cx="10" cy="10" r="7" />
-                                <line x1="21" y1="21" x2="15" y2="15" />
-                              </svg>
-                              Search again
                             </a>
                           </div>
                         </div>
@@ -697,17 +717,52 @@
                     <div class="example-code">
                       <figure class="highlight">
                         <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"empty"</span><span class="nt">&gt;</span>
-  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"empty-icon"</span><span class="nt">&gt;</span>
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"empty-img"</span><span class="nt">&gt;&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">height=</span><span class="s">"128"</span>  <span class="na">alt=</span><span class="s">""</span><span class="nt">&gt;</span>
-    <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">class=</span><span class="s">"h-8 mb-4"</span> <span class="na">alt=</span><span class="s">""</span><span class="nt">&gt;</span>
   <span class="nt">&lt;/div&gt;</span>
-  <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"empty-title h3"</span><span class="nt">&gt;</span>No results found<span class="nt">&lt;/p&gt;</span>
+  <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"empty-title"</span><span class="nt">&gt;</span>Invoices are managed from here<span class="nt">&lt;/p&gt;</span>
   <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"empty-subtitle text-muted"</span><span class="nt">&gt;</span>
     Try adjusting your search or filter to find what you're looking for.
   <span class="nt">&lt;/p&gt;</span>
   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"empty-action"</span><span class="nt">&gt;</span>
     <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>
       <span class="c">&lt;!-- SVG icon code --&gt;</span>
-      Search again
+      New invoice
+    <span class="nt">&lt;/a&gt;</span>
+  <span class="nt">&lt;/div&gt;</span>
+<span class="nt">&lt;/div&gt;</span></code></pre>
+                      </figure>
+                    </div>
+                    <h2 id="empty-state-with-header">Empty state with header</h2>
+                    <p>Instead of adding an icon or illustration you can simply give the text:</p>
+                    <div class="example no_toc_section">
+                      <div class="example-content">
+                        <div class="empty">
+                          <div class="empty-header">404</div>
+                          <p class="empty-title">Oops… You just found an error page</p>
+                          <p class="empty-subtitle text-muted">
+                            Try adjusting your search or filter to find what you're looking for.
+                          </p>
+                          <div class="empty-action">
+                            <a href="../." class="btn btn-primary">
+                              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><line x1="5" y1="12" x2="19" y2="12" /><line x1="5" y1="12" x2="11" y2="18" /><line x1="5" y1="12" x2="11" y2="6" /></svg>
+                              Take me home
+                            </a>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="example-code">
+                      <figure class="highlight">
+                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"empty"</span><span class="nt">&gt;</span>
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"empty-header"</span><span class="nt">&gt;</span>404<span class="nt">&lt;/div&gt;</span>
+  <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"empty-title"</span><span class="nt">&gt;</span>Oops… You just found an error page<span class="nt">&lt;/p&gt;</span>
+  <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"empty-subtitle text-muted"</span><span class="nt">&gt;</span>
+    Try adjusting your search or filter to find what you're looking for.
+  <span class="nt">&lt;/p&gt;</span>
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"empty-action"</span><span class="nt">&gt;</span>
+    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">&gt;</span>
+      <span class="c">&lt;!-- SVG icon code --&gt;</span>
+      Take me home
     <span class="nt">&lt;/a&gt;</span>
   <span class="nt">&lt;/div&gt;</span>
 <span class="nt">&lt;/div&gt;</span></code></pre>
@@ -719,7 +774,7 @@
             </div>
           </div>
         </div>
-        <footer class="footer footer-transparent">
+        <footer class="footer footer-transparent d-print-none">
           <div class="container">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ml-lg-auto">
@@ -730,9 +785,16 @@
                 </ul>
               </div>
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item">
                     Copyright © 2020
                     <a href=".." class="link-secondary">Tabler</a>.
                     All rights reserved.
+                  </li>
+                  <li class="list-inline-item">
+                    <a href="../changelog.html" class="link-secondary">v1.0.0-alpha.12</a>
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
@@ -741,7 +803,6 @@
     </div>
     <!-- Libs JS -->
     <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="../dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
     <script>

demo/docs/flags.html

@@ -1,18 +1,18 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.5
+* @version 1.0.0-alpha.12
-* @link https://github.com/tabler/tabler
+* @link https://tabler.io
-* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Copyright 2018-2020 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
   <head>
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <title>Flags - Documentation - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <title>Flags - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
@@ -25,22 +25,10 @@
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
     <meta name="description" content="Thanks to the Tabler flags plug-in, you can create flags to visually represent countries or languages. Flags are often used in forms, as an element of a delivery address, phone number dialling code and many more."/>
-    <!-- Libs CSS -->
+    <!-- CSS files -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
-    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
-    <!-- Tabler Core -->
     <link href="../dist/css/tabler.min.css" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
     <link href="../dist/css/tabler-flags.min.css" rel="stylesheet"/>
     <link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
-    <link href="../dist/css/tabler-buttons.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
     <style>
       body {
@@ -50,22 +38,18 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <header class="navbar navbar-expand-md navbar-light">
+      <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
           <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
             <span class="navbar-toggler-icon"></span>
           </button>
           <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-image">
+            <img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
           </a>
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item dropdown d-none d-md-flex mr-3">
               <a href="#" class="nav-link px-0" data-toggle="dropdown" tabindex="-1">
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
-                  <path stroke="none" d="M0 0h24v24H0z"/>
-                  <path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" />
-                  <path d="M9 17v1a3 3 0 0 0 6 0v-1" />
-                </svg>
                 <span class="badge bg-red"></span>
               </a>
               <div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
@@ -78,54 +62,32 @@
             </div>
             <div class="nav-item dropdown">
               <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
+                <span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
                 <div class="d-none d-xl-block pl-2">
                   <div>Paweł Kuna</div>
                   <div class="mt-1 small text-muted">UI Designer</div>
                 </div>
               </a>
-              <div class="dropdown-menu dropdown-menu-right">
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
+                <a href="#" class="dropdown-item">Set status</a>
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <a href="#" class="dropdown-item">Profile & account</a>
-                    <path stroke="none" d="M0 0h24v24H0z"/>
+                <a href="#" class="dropdown-item">Feedback</a>
-                    <path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-                    <circle cx="12" cy="12" r="3" />
-                  </svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                    <path stroke="none" d="M0 0h24v24H0z"/>
-                    <path d="M9 7 h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" />
-                    <path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" />
-                    <line x1="16" y1="5" x2="19" y2="8" />
-                  </svg>
-                  Another action
-                </a>
                 <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <a href="#" class="dropdown-item">Settings</a>
-                    <path stroke="none" d="M0 0h24v24H0z"/>
+                <a href="#" class="dropdown-item">Logout</a>
-                    <line x1="12" y1="5" x2="12" y2="19" />
-                    <line x1="5" y1="12" x2="19" y2="12" />
-                  </svg>
-                  Separated link</a>
               </div>
             </div>
           </div>
         </div>
       </header>
       <div class="navbar-expand-md">
-        <div class="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar navbar-light">
             <div class="container-xl">
               <ul class="navbar-nav">
                 <li class="nav-item">
                   <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="5 12 3 12 12 3 21 12 19 12" />
-                      <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
-                      <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Home
@@ -134,14 +96,7 @@
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" />
-                      <line x1="12" y1="12" x2="20" y2="7.5" />
-                      <line x1="12" y1="12" x2="12" y2="21" />
-                      <line x1="12" y1="12" x2="4" y2="7.5" />
-                      <line x1="16" y1="5.25" x2="8" y2="9.75" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       User Interface
@@ -168,11 +123,21 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../cards-masonry.html" >
+                        Cards Masonry
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../dropdowns.html" >
                         Dropdowns
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../icons.html" >
+                        Icons
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../modals.html" >
                         Modals
@@ -198,6 +163,26 @@
                         Charts
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../charts-heatmap.html" >
+                        Charts heatmap
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../skeleton.html" >
+                        Skeleton
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../tabs.html" >
+                        Tabs
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../tables.html" >
                         Tables
@@ -218,6 +203,16 @@
                         Lists
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../typography.html" >
+                        Typography
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../markdown.html" >
+                        Markdown
+                      </a>
+                    </li>
                     <li class="dropright">
                       <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
                         Authentication
@@ -234,24 +229,16 @@
                         Error pages
                       </a>
                       <div class="dropdown-menu">
-                      <a href="../400.html" class="dropdown-item">400 page</a>
+                        <a href="../error-404.html" class="dropdown-item">404 page</a>
-                      <a href="../401.html" class="dropdown-item">401 page</a>
+                        <a href="../error-500.html" class="dropdown-item">500 page</a>
-                      <a href="../403.html" class="dropdown-item">403 page</a>
+                        <a href="../error-maintenance.html" class="dropdown-item">Maintenance page</a>
-                      <a href="../404.html" class="dropdown-item">404 page</a>
-                      <a href="../500.html" class="dropdown-item">500 page</a>
-                      <a href="../503.html" class="dropdown-item">503 page</a>
-                      <a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
                       </div>
                     </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="9 11 12 14 20 6" />
-                      <path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Form elements
@@ -260,10 +247,7 @@
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Extra
@@ -305,6 +289,11 @@
                         Gallery
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../license.html" >
+                        License
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../profile.html" >
                         Profile
@@ -315,17 +304,16 @@
                         Music
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../welcome.html" >
+                        Welcome
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <rect x="4" y="4" width="6" height="5" rx="2" />
-                      <rect x="4" y="13" width="6" height="7" rx="2" />
-                      <rect x="14" y="4" width="6" height="7" rx="2" />
-                      <rect x="14" y="15" width="6" height="5" rx="2" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Layout
@@ -367,11 +355,21 @@
                         Navbar dark
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../layout-navbar-overlap.html" >
+                        Navbar overlap
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../layout-dark.html" >
                         Dark mode
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../layout-rtl.html" >
+                        RTL mode
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../layout-fluid.html" >
                         Fluid
@@ -384,199 +382,21 @@
                     </li>
                   </ul>
                 </li>
-              <li class="nav-item active dropdown">
+                <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link" href="../docs/index.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="14 3 14 8 19 8" />
-                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
-                      <line x1="9" y1="9" x2="10" y2="9" />
-                      <line x1="9" y1="13" x2="15" y2="13" />
-                      <line x1="9" y1="17" x2="15" y2="17" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
-                    Docs
+                      Documentation
                     </span>
                   </a>
-                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-3">
-                  <li >
-                    <a class="dropdown-item" href="../docs/index.html" >
-                      Introduction
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/alerts.html" >
-                      Alerts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/autosize.html" >
-                      Autosize
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/avatars.html" >
-                      Avatars
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/badges.html" >
-                      Badges
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/breadcrumb.html" >
-                      Breadcrumb
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/buttons.html" >
-                      Buttons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/cards.html" >
-                      Cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/carousel.html" >
-                      Carousel
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/colors.html" >
-                      Colors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/countup.html" >
-                      Countup
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/cursors.html" >
-                      Cursors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/charts.html" >
-                      Charts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/dropdowns.html" >
-                      Dropdowns
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/divider.html" >
-                      Divider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/empty.html" >
-                      Empty states
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item active" href="../docs/flags.html" >
-                      Flags
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/form-elements.html" >
-                      Form elements
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/form-helpers.html" >
-                      Form helpers
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/input-mask.html" >
-                      Form input mask
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/modals.html" >
-                      Modals
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/progress.html" >
-                      Progress
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/payments.html" >
-                      Payments
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/range-slider.html" >
-                      Range slider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/ribbons.html" >
-                      Ribbons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/spinners.html" >
-                      Spinners
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/steps.html" >
-                      Steps
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tables.html" >
-                      Tables
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tabs.html" >
-                      Tabs
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/timelines.html" >
-                      Timelines
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/toasts.html" >
-                      Toasts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tooltips.html" >
-                      Tooltips
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/typography.html" >
-                      Typography
-                    </a>
-                  </li>
-                </ul>
                 </li>
               </ul>
               <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <circle cx="10" cy="10" r="7" />
-                      <line x1="21" y1="21" x2="15" y2="15" />
-                    </svg>
                     </span>
                     <input type="text" class="form-control" placeholder="Search…">
                   </div>
@@ -585,48 +405,262 @@
             </div>
           </div>
         </div>
+      </div>
       <div class="content">
         <div class="container-xl">
           <!-- Page title -->
-          <div class="page-header">
+          <div class="page-header d-print-none">
             <div class="row align-items-center">
-              <div class="col-auto">
+              <div class="col">
                 <h2 class="page-title">
                   Documentation
                 </h2>
               </div>
             </div>
           </div>
-          <div class="row justify-content-center">
+          <div class="row g-5">
-            <div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
+            <div class="d-none d-lg-block col-lg-3">
-              <div class="sticky-top">
+              <ul class="nav nav-pills nav-vertical">
-                <a href="https://github.com/tabler/tabler" class="btn btn-github mb-6 btn-block" target="_blank" rel="noreferrer">
+                <li class="nav-item">
-                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                  <a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
-                    <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
-                  </svg>
+                    </span>
-                  Browse source code
+                    Getting started
+                    <span class="nav-link-toggle"></span>
                   </a>
-                <h5 class="subheader">On this page</h5>
+                  <ul class="nav collapse" id="menu-base">
-                <ul class="list-unstyled">
+                    <li class="nav-item">
-                  <li class="toc-entry toc-h2"><a href="#flag">Flag</a></li>
+                      <a href="../docs/index.html" class="nav-link">
-                  <li class="toc-entry toc-h2"><a href="#flag-sizes">Flag sizes</a></li>
+                        Introduction
-                  <li class="toc-entry toc-h2"><a href="#types">Types</a></li>
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/colors.html" class="nav-link">
+                        Colors
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/typography.html" class="nav-link">
+                        Typography
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/icons.html" class="nav-link">
+                        Icons
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
+                    </span>
+                    Components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav collapse show" id="menu-components">
+                    <li class="nav-item">
+                      <a href="../docs/alerts.html" class="nav-link">
+                        Alerts
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/avatars.html" class="nav-link">
+                        Avatars
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/badges.html" class="nav-link">
+                        Badges
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/breadcrumb.html" class="nav-link">
+                        Breadcrumb
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/buttons.html" class="nav-link">
+                        Buttons
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/cards.html" class="nav-link">
+                        Cards
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/carousel.html" class="nav-link">
+                        Carousel
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/dropdowns.html" class="nav-link">
+                        Dropdowns
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/divider.html" class="nav-link">
+                        Divider
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/empty.html" class="nav-link">
+                        Empty states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/modals.html" class="nav-link">
+                        Modals
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/payments.html" class="nav-link">
+                        Payments
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/range-slider.html" class="nav-link">
+                        Range slider
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/ribbons.html" class="nav-link">
+                        Ribbons
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/skeleton.html" class="nav-link">
+                        Skeleton
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/spinners.html" class="nav-link">
+                        Spinners
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/steps.html" class="nav-link">
+                        Steps
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/switch-icon.html" class="nav-link">
+                        Switch icon
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tables.html" class="nav-link">
+                        Tables
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tabs.html" class="nav-link">
+                        Tabs
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/timelines.html" class="nav-link">
+                        Timelines
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/toasts.html" class="nav-link">
+                        Toasts
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tooltips.html" class="nav-link">
+                        Tooltips
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
+                    </span>
+                    Utilities
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/cursors.html" class="nav-link">
+                        Cursors
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
+                    </span>
+                    Plugins
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav collapse" id="menu-plugins">
+                    <li class="nav-item">
+                      <a href="../docs/autosize.html" class="nav-link">
+                        Autosize
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/input-mask.html" class="nav-link">
+                        Form input mask
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/flags.html" class="nav-link active">
+                        Flags
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/charts.html" class="nav-link">
+                        Charts
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="../changelog.html" class="nav-link">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
+                    </span>
+                    Changelog
+                    <span class="badge bg-blue-lt ml-auto">1.0.0-alpha.12</span>
+                  </a>
+                </li>
               </ul>
-              </div>
             </div>
             <div class="col-lg-9">
               <div class="card card-lg">
                 <div class="card-body">
                   <div class="markdown">
-                    <div class="d-flex">
+                    <div class="mb-5">
-                      <h2 class="h1 mt-0 mb-3">Flags</h2>
+                      <div class="d-flex mb-3">
+                        <h1 class="mt-0">Flags</h1>
                       </div>
                       <div class="alert alert-info">This module is available in <code>tabler-flags</code>
                         plugin.
                       </div>
                       <p>Thanks to the Tabler flags plug-in, you can create flags to visually represent countries or languages. Flags are often used in forms, as an element of a delivery address, phone number dialling code and many more.</p>
+                    </div>
                     <h2 id="flag">Flag</h2>
-                    <p>To create a flag, add the <code class="highlighter-rouge">flag</code> class to a component and choose the country whose flag you want to use. The full list of countries can be found below.</p>
+                    <p>To create a flag, add the <code class="language-plaintext highlighter-rouge">flag</code> class to a component and choose the country whose flag you want to use. The full list of countries can be found below.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <span class="flag flag-country-tg mr-1"></span>
@@ -648,7 +682,8 @@
                         <span class="flag flag-xl flag-country-pl mr-1"></span>
                         <span class="flag flag-lg flag-country-pl mr-1"></span>
                         <span class="flag flag-md flag-country-pl"></span>
-                        <span class="flag flag-country-pl mr-1"></span>
+                        <span class="flag flag-sm flag-country-pl mr-1"></span>
+                        <span class="flag flag-xs flag-country-pl mr-1"></span>
                       </div>
                     </div>
                     <div class="example-code">
@@ -656,11 +691,12 @@
                         <pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"flag flag-xl flag-country-pl mr-1"</span><span class="nt">&gt;&lt;/span&gt;</span>
 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"flag flag-lg flag-country-pl mr-1"</span><span class="nt">&gt;&lt;/span&gt;</span>
 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"flag flag-md flag-country-pl"</span><span class="nt">&gt;&lt;/span&gt;</span>
-<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"flag flag-country-pl mr-1"</span><span class="nt">&gt;&lt;/span&gt;</span></code></pre>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"flag flag-sm flag-country-pl mr-1"</span><span class="nt">&gt;&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"flag flag-xs flag-country-pl mr-1"</span><span class="nt">&gt;&lt;/span&gt;</span></code></pre>
                       </figure>
                     </div>
                     <h2 id="types">Types</h2>
-                    <p>To use the flag of a particular country, add the <code class="highlighter-rouge">flag-(country name)</code> class. For example, to create a flag of Andorra should use the following class: <code class="highlighter-rouge">.flag-ad</code>.</p>
+                    <p>To use the flag of a particular country, add the <code class="language-plaintext highlighter-rouge">flag-country-(country name)</code> class. For example, to create a flag of Andorra should use the following class: <code class="language-plaintext highlighter-rouge">.flag-country-ad</code>.</p>
                     <table>
                       <tr>
                         <td><span class="flag flag-country-ad"></span>
@@ -2175,7 +2211,7 @@
             </div>
           </div>
         </div>
-        <footer class="footer footer-transparent">
+        <footer class="footer footer-transparent d-print-none">
           <div class="container">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ml-lg-auto">
@@ -2186,9 +2222,16 @@
                 </ul>
               </div>
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item">
                     Copyright © 2020
                     <a href=".." class="link-secondary">Tabler</a>.
                     All rights reserved.
+                  </li>
+                  <li class="list-inline-item">
+                    <a href="../changelog.html" class="link-secondary">v1.0.0-alpha.12</a>
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
@@ -2197,7 +2240,6 @@
     </div>
     <!-- Libs JS -->
     <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="../dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
     <script>

demo/docs/form-helpers.html

@@ -1,18 +1,18 @@
 <!doctype html>
 <!--
 * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
-* @version 1.0.0-alpha.5
+* @version 1.0.0-alpha.12
-* @link https://github.com/tabler/tabler
+* @link https://tabler.io
-* Copyright 2018-2019 The Tabler Authors
+* Copyright 2018-2020 The Tabler Authors
-* Copyright 2018-2019 codecalm.net Paweł Kuna
+* Copyright 2018-2020 codecalm.net Paweł Kuna
-* Licensed under MIT (https://tabler.io/license)
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
 -->
 <html lang="en">
   <head>
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
-    <title>Form helpers - Documentation - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <title>Form helpers - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
     <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
     <meta name="msapplication-TileColor" content="#206bc4"/>
     <meta name="theme-color" content="#206bc4"/>
@@ -25,22 +25,10 @@
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
     <meta name="description" content="A form helper can be used to provide users with additional information about the elements of a form that may be unclear."/>
-    <!-- Libs CSS -->
+    <!-- CSS files -->
-    <link href="../dist/libs/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/selectize/dist/css/selectize.css" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/core/main.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/daygrid/main.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/timegrid/main.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/fullcalendar/list/main.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/flatpickr/dist/flatpickr.min.css" rel="stylesheet"/>
-    <link href="../dist/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet"/>
-    <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css" rel="stylesheet"/>
-    <!-- Tabler Core -->
     <link href="../dist/css/tabler.min.css" rel="stylesheet"/>
-    <!-- Tabler Plugins -->
     <link href="../dist/css/tabler-flags.min.css" rel="stylesheet"/>
     <link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
-    <link href="../dist/css/tabler-buttons.min.css" rel="stylesheet"/>
     <link href="../dist/css/demo.min.css" rel="stylesheet"/>
     <style>
       body {
@@ -50,22 +38,18 @@
   </head>
   <body class="antialiased">
     <div class="page">
-      <header class="navbar navbar-expand-md navbar-light">
+      <header class="navbar navbar-expand-md navbar-light d-print-none">
         <div class="container-xl">
           <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
             <span class="navbar-toggler-icon"></span>
           </button>
           <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3">
-            <img src="../static/logo.svg" alt="Tabler" class="navbar-brand-image">
+            <img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
           </a>
           <div class="navbar-nav flex-row order-md-last">
             <div class="nav-item dropdown d-none d-md-flex mr-3">
               <a href="#" class="nav-link px-0" data-toggle="dropdown" tabindex="-1">
-                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
-                  <path stroke="none" d="M0 0h24v24H0z"/>
-                  <path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" />
-                  <path d="M9 17v1a3 3 0 0 0 6 0v-1" />
-                </svg>
                 <span class="badge bg-red"></span>
               </a>
               <div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
@@ -78,54 +62,32 @@
             </div>
             <div class="nav-item dropdown">
               <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
-                <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
+                <span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
                 <div class="d-none d-xl-block pl-2">
                   <div>Paweł Kuna</div>
                   <div class="mt-1 small text-muted">UI Designer</div>
                 </div>
               </a>
-              <div class="dropdown-menu dropdown-menu-right">
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
-                <a class="dropdown-item" href="#">
+                <a href="#" class="dropdown-item">Set status</a>
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <a href="#" class="dropdown-item">Profile & account</a>
-                    <path stroke="none" d="M0 0h24v24H0z"/>
+                <a href="#" class="dropdown-item">Feedback</a>
-                    <path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-                    <circle cx="12" cy="12" r="3" />
-                  </svg>
-                  Action
-                </a>
-                <a class="dropdown-item" href="#">
-                  <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                    <path stroke="none" d="M0 0h24v24H0z"/>
-                    <path d="M9 7 h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" />
-                    <path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" />
-                    <line x1="16" y1="5" x2="19" y2="8" />
-                  </svg>
-                  Another action
-                </a>
                 <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <a href="#" class="dropdown-item">Settings</a>
-                    <path stroke="none" d="M0 0h24v24H0z"/>
+                <a href="#" class="dropdown-item">Logout</a>
-                    <line x1="12" y1="5" x2="12" y2="19" />
-                    <line x1="5" y1="12" x2="19" y2="12" />
-                  </svg>
-                  Separated link</a>
               </div>
             </div>
           </div>
         </div>
       </header>
       <div class="navbar-expand-md">
-        <div class="navbar collapse navbar-collapse navbar-light" id="navbar-menu">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar navbar-light">
             <div class="container-xl">
               <ul class="navbar-nav">
                 <li class="nav-item">
                   <a class="nav-link" href="../index.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="5 12 3 12 12 3 21 12 19 12" />
-                      <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
-                      <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Home
@@ -134,14 +96,7 @@
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" />
-                      <line x1="12" y1="12" x2="20" y2="7.5" />
-                      <line x1="12" y1="12" x2="12" y2="21" />
-                      <line x1="12" y1="12" x2="4" y2="7.5" />
-                      <line x1="16" y1="5.25" x2="8" y2="9.75" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       User Interface
@@ -168,11 +123,21 @@
                         Cards
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../cards-masonry.html" >
+                        Cards Masonry
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../dropdowns.html" >
                         Dropdowns
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../icons.html" >
+                        Icons
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../modals.html" >
                         Modals
@@ -198,6 +163,26 @@
                         Charts
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../charts-heatmap.html" >
+                        Charts heatmap
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../skeleton.html" >
+                        Skeleton
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../tabs.html" >
+                        Tabs
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../tables.html" >
                         Tables
@@ -218,6 +203,16 @@
                         Lists
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../typography.html" >
+                        Typography
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../markdown.html" >
+                        Markdown
+                      </a>
+                    </li>
                     <li class="dropright">
                       <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
                         Authentication
@@ -234,24 +229,16 @@
                         Error pages
                       </a>
                       <div class="dropdown-menu">
-                      <a href="../400.html" class="dropdown-item">400 page</a>
+                        <a href="../error-404.html" class="dropdown-item">404 page</a>
-                      <a href="../401.html" class="dropdown-item">401 page</a>
+                        <a href="../error-500.html" class="dropdown-item">500 page</a>
-                      <a href="../403.html" class="dropdown-item">403 page</a>
+                        <a href="../error-maintenance.html" class="dropdown-item">Maintenance page</a>
-                      <a href="../404.html" class="dropdown-item">404 page</a>
-                      <a href="../500.html" class="dropdown-item">500 page</a>
-                      <a href="../503.html" class="dropdown-item">503 page</a>
-                      <a href="../maintenance.html" class="dropdown-item">Maintenance page</a>
                       </div>
                     </li>
                   </ul>
                 </li>
                 <li class="nav-item">
                   <a class="nav-link" href="../form-elements.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="9 11 12 14 20 6" />
-                      <path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Form elements
@@ -260,10 +247,7 @@
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <path d="M12 17.75l-6.172 3.245 1.179-6.873-4.993-4.867 6.9-1.002L12 2l3.086 6.253 6.9 1.002-4.993 4.867 1.179 6.873z" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Extra
@@ -305,6 +289,11 @@
                         Gallery
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../license.html" >
+                        License
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../profile.html" >
                         Profile
@@ -315,17 +304,16 @@
                         Music
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../welcome.html" >
+                        Welcome
+                      </a>
+                    </li>
                   </ul>
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <rect x="4" y="4" width="6" height="5" rx="2" />
-                      <rect x="4" y="13" width="6" height="7" rx="2" />
-                      <rect x="14" y="4" width="6" height="7" rx="2" />
-                      <rect x="14" y="15" width="6" height="5" rx="2" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
                       Layout
@@ -367,11 +355,21 @@
                         Navbar dark
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../layout-navbar-overlap.html" >
+                        Navbar overlap
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../layout-dark.html" >
                         Dark mode
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../layout-rtl.html" >
+                        RTL mode
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../layout-fluid.html" >
                         Fluid
@@ -384,199 +382,21 @@
                     </li>
                   </ul>
                 </li>
-              <li class="nav-item active dropdown">
+                <li class="nav-item active">
-                <a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
+                  <a class="nav-link" href="../docs/index.html" >
-                  <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <polyline points="14 3 14 8 19 8" />
-                      <path d="M17 21H7a2 2 0 0 1 -2 -2V5a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
-                      <line x1="9" y1="9" x2="10" y2="9" />
-                      <line x1="9" y1="13" x2="15" y2="13" />
-                      <line x1="9" y1="17" x2="15" y2="17" />
-                    </svg>
                     </span>
                     <span class="nav-link-title">
-                    Docs
+                      Documentation
                     </span>
                   </a>
-                <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-3">
-                  <li >
-                    <a class="dropdown-item" href="../docs/index.html" >
-                      Introduction
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/alerts.html" >
-                      Alerts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/autosize.html" >
-                      Autosize
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/avatars.html" >
-                      Avatars
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/badges.html" >
-                      Badges
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/breadcrumb.html" >
-                      Breadcrumb
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/buttons.html" >
-                      Buttons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/cards.html" >
-                      Cards
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/carousel.html" >
-                      Carousel
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/colors.html" >
-                      Colors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/countup.html" >
-                      Countup
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/cursors.html" >
-                      Cursors
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/charts.html" >
-                      Charts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/dropdowns.html" >
-                      Dropdowns
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/divider.html" >
-                      Divider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/empty.html" >
-                      Empty states
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/flags.html" >
-                      Flags
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/form-elements.html" >
-                      Form elements
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/form-helpers.html" >
-                      Form helpers
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/input-mask.html" >
-                      Form input mask
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/modals.html" >
-                      Modals
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/progress.html" >
-                      Progress
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/payments.html" >
-                      Payments
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/range-slider.html" >
-                      Range slider
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/ribbons.html" >
-                      Ribbons
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/spinners.html" >
-                      Spinners
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/steps.html" >
-                      Steps
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tables.html" >
-                      Tables
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tabs.html" >
-                      Tabs
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/timelines.html" >
-                      Timelines
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/toasts.html" >
-                      Toasts
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/tooltips.html" >
-                      Tooltips
-                    </a>
-                  </li>
-                  <li >
-                    <a class="dropdown-item" href="../docs/typography.html" >
-                      Typography
-                    </a>
-                  </li>
-                </ul>
                 </li>
               </ul>
               <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
                 <form action="." method="get">
                   <div class="input-icon">
                     <span class="input-icon-addon">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
-                      <path stroke="none" d="M0 0h24v24H0z"/>
-                      <circle cx="10" cy="10" r="7" />
-                      <line x1="21" y1="21" x2="15" y2="15" />
-                    </svg>
                     </span>
                     <input type="text" class="form-control" placeholder="Search…">
                   </div>
@@ -585,41 +405,257 @@
             </div>
           </div>
         </div>
+      </div>
       <div class="content">
         <div class="container-xl">
           <!-- Page title -->
-          <div class="page-header">
+          <div class="page-header d-print-none">
             <div class="row align-items-center">
-              <div class="col-auto">
+              <div class="col">
                 <h2 class="page-title">
                   Documentation
                 </h2>
               </div>
             </div>
           </div>
-          <div class="row justify-content-center">
+          <div class="row g-5">
-            <div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
+            <div class="d-none d-lg-block col-lg-3">
-              <div class="sticky-top">
+              <ul class="nav nav-pills nav-vertical">
-                <a href="https://github.com/tabler/tabler" class="btn btn-github mb-6 btn-block" target="_blank" rel="noreferrer">
+                <li class="nav-item">
-                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                  <a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
-                    <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
-                  </svg>
+                    </span>
-                  Browse source code
+                    Getting started
+                    <span class="nav-link-toggle"></span>
                   </a>
-                <h5 class="subheader">On this page</h5>
+                  <ul class="nav collapse" id="menu-base">
-                <ul class="list-unstyled">
+                    <li class="nav-item">
-                  <li class="toc-entry toc-h2"><a href="#input-help">Input help</a></li>
+                      <a href="../docs/index.html" class="nav-link">
+                        Introduction
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/colors.html" class="nav-link">
+                        Colors
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/typography.html" class="nav-link">
+                        Typography
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/icons.html" class="nav-link">
+                        Icons
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
+                    </span>
+                    Components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav collapse show" id="menu-components">
+                    <li class="nav-item">
+                      <a href="../docs/alerts.html" class="nav-link">
+                        Alerts
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/avatars.html" class="nav-link">
+                        Avatars
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/badges.html" class="nav-link">
+                        Badges
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/breadcrumb.html" class="nav-link">
+                        Breadcrumb
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/buttons.html" class="nav-link">
+                        Buttons
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/cards.html" class="nav-link">
+                        Cards
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/carousel.html" class="nav-link">
+                        Carousel
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/dropdowns.html" class="nav-link">
+                        Dropdowns
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/divider.html" class="nav-link">
+                        Divider
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/empty.html" class="nav-link">
+                        Empty states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link active">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/modals.html" class="nav-link">
+                        Modals
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/payments.html" class="nav-link">
+                        Payments
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/range-slider.html" class="nav-link">
+                        Range slider
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/ribbons.html" class="nav-link">
+                        Ribbons
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/skeleton.html" class="nav-link">
+                        Skeleton
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/spinners.html" class="nav-link">
+                        Spinners
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/steps.html" class="nav-link">
+                        Steps
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/switch-icon.html" class="nav-link">
+                        Switch icon
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tables.html" class="nav-link">
+                        Tables
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tabs.html" class="nav-link">
+                        Tabs
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/timelines.html" class="nav-link">
+                        Timelines
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/toasts.html" class="nav-link">
+                        Toasts
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tooltips.html" class="nav-link">
+                        Tooltips
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
+                    </span>
+                    Utilities
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/cursors.html" class="nav-link">
+                        Cursors
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
+                    </span>
+                    Plugins
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav collapse" id="menu-plugins">
+                    <li class="nav-item">
+                      <a href="../docs/autosize.html" class="nav-link">
+                        Autosize
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/input-mask.html" class="nav-link">
+                        Form input mask
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/flags.html" class="nav-link">
+                        Flags
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/charts.html" class="nav-link">
+                        Charts
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="../changelog.html" class="nav-link">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
+                    </span>
+                    Changelog
+                    <span class="badge bg-blue-lt ml-auto">1.0.0-alpha.12</span>
+                  </a>
+                </li>
               </ul>
-              </div>
             </div>
             <div class="col-lg-9">
               <div class="card card-lg">
                 <div class="card-body">
                   <div class="markdown">
-                    <div class="d-flex">
+                    <div class="mb-5">
-                      <h2 class="h1 mt-0 mb-3">Form helpers</h2>
+                      <div class="d-flex mb-3">
+                        <h1 class="mt-0">Form helpers</h1>
                       </div>
                       <p>A form helper can be used to provide users with additional information about the elements of a form that may be unclear.</p>
+                    </div>
                     <h2 id="input-help">Input help</h2>
                     <p>Use an input helper to display additional information about a form element. The text label will appear once a user hovers over the helper.</p>
                     <div class="example no_toc_section">
@@ -640,7 +676,7 @@
             </div>
           </div>
         </div>
-        <footer class="footer footer-transparent">
+        <footer class="footer footer-transparent d-print-none">
           <div class="container">
             <div class="row text-center align-items-center flex-row-reverse">
               <div class="col-lg-auto ml-lg-auto">
@@ -651,9 +687,16 @@
                 </ul>
               </div>
               <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item">
                     Copyright © 2020
                     <a href=".." class="link-secondary">Tabler</a>.
                     All rights reserved.
+                  </li>
+                  <li class="list-inline-item">
+                    <a href="../changelog.html" class="link-secondary">v1.0.0-alpha.12</a>
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
@@ -662,7 +705,6 @@
     </div>
     <!-- Libs JS -->
     <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="../dist/libs/jquery/dist/jquery.slim.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
     <script>

demo/docs/icons.html

@@ -0,0 +1,765 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-alpha.12
+* @link https://tabler.io
+* Copyright 2018-2020 The Tabler Authors
+* Copyright 2018-2020 codecalm.net Paweł Kuna
+* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>Icons - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+    <meta name="msapplication-TileColor" content="#206bc4"/>
+    <meta name="theme-color" content="#206bc4"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="mobile-web-app-capable" content="yes"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="MobileOptimized" content="320"/>
+    <meta name="robots" content="noindex,nofollow,noarchive"/>
+    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
+    <!-- CSS files -->
+    <link href="../dist/css/tabler.min.css" rel="stylesheet"/>
+    <link href="../dist/css/tabler-flags.min.css" rel="stylesheet"/>
+    <link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
+    <link href="../dist/css/demo.min.css" rel="stylesheet"/>
+    <style>
+      body {
+      	display: none;
+      }
+    </style>
+  </head>
+  <body class="antialiased">
+    <div class="page">
+      <header class="navbar navbar-expand-md navbar-light d-print-none">
+        <div class="container-xl">
+          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <a href=".." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3">
+            <img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
+          </a>
+          <div class="navbar-nav flex-row order-md-last">
+            <div class="nav-item dropdown d-none d-md-flex mr-3">
+              <a href="#" class="nav-link px-0" data-toggle="dropdown" tabindex="-1">
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
+                <span class="badge bg-red"></span>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
+                <div class="card">
+                  <div class="card-body">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="nav-item dropdown">
+              <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
+                <span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
+                <div class="d-none d-xl-block pl-2">
+                  <div>Paweł Kuna</div>
+                  <div class="mt-1 small text-muted">UI Designer</div>
+                </div>
+              </a>
+              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                <a href="#" class="dropdown-item">Set status</a>
+                <a href="#" class="dropdown-item">Profile & account</a>
+                <a href="#" class="dropdown-item">Feedback</a>
+                <div class="dropdown-divider"></div>
+                <a href="#" class="dropdown-item">Settings</a>
+                <a href="#" class="dropdown-item">Logout</a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </header>
+      <div class="navbar-expand-md">
+        <div class="collapse navbar-collapse" id="navbar-menu">
+          <div class="navbar navbar-light">
+            <div class="container-xl">
+              <ul class="navbar-nav">
+                <li class="nav-item">
+                  <a class="nav-link" href="../index.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Home
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      User Interface
+                    </span>
+                  </a>
+                  <ul class="dropdown-menu dropdown-menu-columns  dropdown-menu-columns-2">
+                    <li >
+                      <a class="dropdown-item" href="../empty.html" >
+                        Empty page
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../blank.html" >
+                        Blank page
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../buttons.html" >
+                        Buttons
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../cards.html" >
+                        Cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../cards-masonry.html" >
+                        Cards Masonry
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../dropdowns.html" >
+                        Dropdowns
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../icons.html" >
+                        Icons
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../modals.html" >
+                        Modals
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../maps.html" >
+                        Maps
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../maps-vector.html" >
+                        Vector maps
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../navigation.html" >
+                        Navigation
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../charts.html" >
+                        Charts
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../charts-heatmap.html" >
+                        Charts heatmap
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../skeleton.html" >
+                        Skeleton
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../tabs.html" >
+                        Tabs
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../tables.html" >
+                        Tables
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../calendar.html" >
+                        Calendar
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../carousel.html" >
+                        Carousel
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../lists.html" >
+                        Lists
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../typography.html" >
+                        Typography
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../markdown.html" >
+                        Markdown
+                      </a>
+                    </li>
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Authentication
+                      </a>
+                      <div class="dropdown-menu">
+                        <a href="../sign-in.html" class="dropdown-item">Sign in</a>
+                        <a href="../sign-up.html" class="dropdown-item">Sign up</a>
+                        <a href="../forgot-password.html" class="dropdown-item">Forgot password</a>
+                        <a href="../terms-of-service.html" class="dropdown-item">Terms of service</a>
+                      </div>
+                    </li>
+                    <li class="dropright">
+                      <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
+                        Error pages
+                      </a>
+                      <div class="dropdown-menu">
+                        <a href="../error-404.html" class="dropdown-item">404 page</a>
+                        <a href="../error-500.html" class="dropdown-item">500 page</a>
+                        <a href="../error-maintenance.html" class="dropdown-item">Maintenance page</a>
+                      </div>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="../form-elements.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Form elements
+                    </span>
+                  </a>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Extra
+                    </span>
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="../invoice.html" >
+                        Invoice
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../blog.html" >
+                        Blog cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../snippets.html" >
+                        Snippets
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../search-results.html" >
+                        Search results
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../pricing.html" >
+                        Pricing cards
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../users.html" >
+                        Users
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../gallery.html" >
+                        Gallery
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../license.html" >
+                        License
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../profile.html" >
+                        Profile
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../music.html" >
+                        Music
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../welcome.html" >
+                        Welcome
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item dropdown">
+                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Layout
+                    </span>
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li >
+                      <a class="dropdown-item" href="../layout-horizontal.html" >
+                        Horizontal
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../layout-vertical.html" >
+                        Vertical
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../layout-vertical-right.html" >
+                        Right vertical
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../layout-condensed.html" >
+                        Condensed
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../layout-condensed-dark.html" >
+                        Condensed dark
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../layout-combo.html" >
+                        Combined
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../layout-navbar-dark.html" >
+                        Navbar dark
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../layout-navbar-overlap.html" >
+                        Navbar overlap
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../layout-dark.html" >
+                        Dark mode
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../layout-rtl.html" >
+                        RTL mode
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../layout-fluid.html" >
+                        Fluid
+                      </a>
+                    </li>
+                    <li >
+                      <a class="dropdown-item" href="../layout-fluid-vertical.html" >
+                        Fluid vertical
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item active">
+                  <a class="nav-link" href="../docs/index.html" >
+                    <span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
+                    </span>
+                    <span class="nav-link-title">
+                      Documentation
+                    </span>
+                  </a>
+                </li>
+              </ul>
+              <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
+                <form action="." method="get">
+                  <div class="input-icon">
+                    <span class="input-icon-addon">
+                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
+                    </span>
+                    <input type="text" class="form-control" placeholder="Search…">
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="content">
+        <div class="container-xl">
+          <!-- Page title -->
+          <div class="page-header d-print-none">
+            <div class="row align-items-center">
+              <div class="col">
+                <h2 class="page-title">
+                  Documentation
+                </h2>
+              </div>
+            </div>
+          </div>
+          <div class="row g-5">
+            <div class="d-none d-lg-block col-lg-3">
+              <ul class="nav nav-pills nav-vertical">
+                <li class="nav-item">
+                  <a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="true">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
+                    </span>
+                    Getting started
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav collapse show" id="menu-base">
+                    <li class="nav-item">
+                      <a href="../docs/index.html" class="nav-link">
+                        Introduction
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/colors.html" class="nav-link">
+                        Colors
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/typography.html" class="nav-link">
+                        Typography
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/icons.html" class="nav-link active">
+                        Icons
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="false">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
+                    </span>
+                    Components
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav collapse" id="menu-components">
+                    <li class="nav-item">
+                      <a href="../docs/alerts.html" class="nav-link">
+                        Alerts
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/avatars.html" class="nav-link">
+                        Avatars
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/badges.html" class="nav-link">
+                        Badges
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/breadcrumb.html" class="nav-link">
+                        Breadcrumb
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/buttons.html" class="nav-link">
+                        Buttons
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/cards.html" class="nav-link">
+                        Cards
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/carousel.html" class="nav-link">
+                        Carousel
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/dropdowns.html" class="nav-link">
+                        Dropdowns
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/divider.html" class="nav-link">
+                        Divider
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/empty.html" class="nav-link">
+                        Empty states
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-elements.html" class="nav-link">
+                        Form elements
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/form-helpers.html" class="nav-link">
+                        Form helpers
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/modals.html" class="nav-link">
+                        Modals
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/progress.html" class="nav-link">
+                        Progress
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/payments.html" class="nav-link">
+                        Payments
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/range-slider.html" class="nav-link">
+                        Range slider
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/ribbons.html" class="nav-link">
+                        Ribbons
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/skeleton.html" class="nav-link">
+                        Skeleton
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/spinners.html" class="nav-link">
+                        Spinners
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/steps.html" class="nav-link">
+                        Steps
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/switch-icon.html" class="nav-link">
+                        Switch icon
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tables.html" class="nav-link">
+                        Tables
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tabs.html" class="nav-link">
+                        Tabs
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/timelines.html" class="nav-link">
+                        Timelines
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/toasts.html" class="nav-link">
+                        Toasts
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/tooltips.html" class="nav-link">
+                        Tooltips
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
+                    </span>
+                    Utilities
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav collapse" id="menu-utils">
+                    <li class="nav-item">
+                      <a href="../docs/cursors.html" class="nav-link">
+                        Cursors
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
+                    </span>
+                    Plugins
+                    <span class="nav-link-toggle"></span>
+                  </a>
+                  <ul class="nav collapse" id="menu-plugins">
+                    <li class="nav-item">
+                      <a href="../docs/autosize.html" class="nav-link">
+                        Autosize
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/input-mask.html" class="nav-link">
+                        Form input mask
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/flags.html" class="nav-link">
+                        Flags
+                      </a>
+                    </li>
+                    <li class="nav-item">
+                      <a href="../docs/charts.html" class="nav-link">
+                        Charts
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="../changelog.html" class="nav-link">
+                    <span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
+                    </span>
+                    Changelog
+                    <span class="badge bg-blue-lt ml-auto">1.0.0-alpha.12</span>
+                  </a>
+                </li>
+              </ul>
+            </div>
+            <div class="col-lg-9">
+              <div class="card card-lg">
+                <div class="card-body">
+                  <div class="markdown">
+                    <div class="mb-5">
+                      <div class="d-flex mb-3">
+                        <h1 class="mt-0">Icons</h1>
+                      </div>
+                    </div>
+                    <h2 id="base-icon">Base icon</h2>
+                    <div class="example no_toc_section">
+                      <div class="example-content">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><line x1="10" y1="10" x2="10.01" y2="10" /><line x1="14" y1="10" x2="14.01" y2="10" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><circle cx="5" cy="18" r="3" /><circle cx="19" cy="18" r="3" /><polyline points="12 19 12 15 9 12 14 8 16 11 19 11" /><circle cx="17" cy="5" r="1" /></svg>
+                      </div>
+                    </div>
+                    <div class="example-code">
+                      <figure class="highlight">
+                        <pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- SVG icon code --&gt;</span>
+<span class="c">&lt;!-- SVG icon code --&gt;</span>
+<span class="c">&lt;!-- SVG icon code --&gt;</span>
+<span class="c">&lt;!-- SVG icon code --&gt;</span></code></pre>
+                      </figure>
+                    </div>
+                    <h2 id="filled-icons">Filled icons</h2>
+                    <div class="example no_toc_section">
+                      <div class="example-content">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><circle cx="12" cy="12" r="9" /></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><rect x="4" y="4" width="16" height="16" rx="2" /></svg>
+                      </div>
+                    </div>
+                    <div class="example-code">
+                      <figure class="highlight">
+                        <pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- SVG icon code with class="icon-filled" --&gt;</span>
+<span class="c">&lt;!-- SVG icon code with class="icon-filled" --&gt;</span>
+<span class="c">&lt;!-- SVG icon code with class="icon-filled" --&gt;</span>
+<span class="c">&lt;!-- SVG icon code with class="icon-filled" --&gt;</span></code></pre>
+                      </figure>
+                    </div>
+                    <h2 id="icon-colors">Icon colors</h2>
+                    <div class="example no_toc_section">
+                      <div class="example-content">
+                        <span class="text-red">
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
+                        </span>
+                        <span class="text-yellow">
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
+                        </span>
+                        <span class="text-blue">
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><circle cx="12" cy="12" r="9" /></svg>
+                        </span>
+                        <span class="text-green">
+                          <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><rect x="4" y="4" width="16" height="16" rx="2" /></svg>
+                        </span>
+                      </div>
+                    </div>
+                    <div class="example-code">
+                      <figure class="highlight">
+                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-red"</span><span class="nt">&gt;</span>
+  <span class="c">&lt;!-- SVG icon code with class="icon-filled" --&gt;</span>
+<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-yellow"</span><span class="nt">&gt;</span>
+  <span class="c">&lt;!-- SVG icon code with class="icon-filled" --&gt;</span>
+<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-blue"</span><span class="nt">&gt;</span>
+  <span class="c">&lt;!-- SVG icon code --&gt;</span>
+<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-green"</span><span class="nt">&gt;</span>
+  <span class="c">&lt;!-- SVG icon code --&gt;</span>
+<span class="nt">&lt;/span&gt;</span></code></pre>
+                      </figure>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <footer class="footer footer-transparent d-print-none">
+          <div class="container">
+            <div class="row text-center align-items-center flex-row-reverse">
+              <div class="col-lg-auto ml-lg-auto">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item"><a href="../docs/index.html" class="link-secondary">Documentation</a></li>
+                  <li class="list-inline-item"><a href="../faq.html" class="link-secondary">FAQ</a></li>
+                  <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
+                </ul>
+              </div>
+              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
+                <ul class="list-inline list-inline-dots mb-0">
+                  <li class="list-inline-item">
+                    Copyright © 2020
+                    <a href=".." class="link-secondary">Tabler</a>.
+                    All rights reserved.
+                  </li>
+                  <li class="list-inline-item">
+                    <a href="../changelog.html" class="link-secondary">v1.0.0-alpha.12</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </footer>
+      </div>
+    </div>
+    <!-- Libs JS -->
+    <script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+    <!-- Tabler Core -->
+    <script src="../dist/js/tabler.min.js"></script>
+    <script>
+      document.body.style.display = "block"
+    </script>
+  </body>
+</html>