Release 1.0.0-alpha.9

# Conflicts:
#	src/pages/_includes/layout/homepage.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,5 @@ node_modules/
 /svg-tmp/
 /components/
 /percy.sh
+/Gemfile.lock
+/package-lock.json

Gemfile

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

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,18 @@
 
 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="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> 
-[![Backers on Open Collective](https://opencollective.com/tabler/backers/badge.svg)](#backers)
+<a href="https://www.npmjs.com/package/tabler"><img src="https://img.shields.io/npm/dt/tabler.svg" alt="Total Downloads"></a> 
- [![Sponsors on Open Collective](https://opencollective.com/tabler/sponsors/badge.svg)](#sponsors)
+<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>
 
 
 ## Features

_config-demo.yml

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

_config.yml

@@ -1,11 +1,19 @@
-source: pages
+source: src/pages
 destination: tmp
 
-version: 1.0.0-alpha.6
+keep_files:
+  - css
+  - js
+  - img
+  - dist
+  - static
+
 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
 
@@ -23,15 +31,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:
@@ -50,10 +53,6 @@ toc:
 collections:
   docs:
     output: true
-#  changelog:
-#    output: false
-#  components:
-#    output: true
 
 defaults:
   - scope:
@@ -71,11 +70,6 @@ defaults:
     values:
       layout: docs
       toc: true
-#  - scope:
-#      type: "components"
-#    values:
-#      layout: component
-
 
 colors:
   blue:
@@ -114,9 +108,6 @@ colors:
   cyan:
     hex: '#17a2b8'
     title: Cyan
-  gray:
-    hex: '#868e96'
-    title: Gray
 
 colors-extra:
   white:
@@ -125,6 +116,9 @@ colors-extra:
   dark:
     hex: '#303645'
     title: Dark
+  gray:
+    hex: '#868e96'
+    title: Gray
 
 variants:
   - name: success
@@ -161,9 +155,6 @@ button-variants:
   dark:
     class: dark
     title: Dark
-  link:
-    class: link
-    title: Link
 
 button-states:
   - class:
@@ -175,47 +166,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/all.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.9
-* @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 {
@@ -55,16 +43,12 @@
             <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,11 @@
                         Charts
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./tables.html" >
                         Tables
@@ -217,6 +187,11 @@
                         Lists
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs-index.html" >
+                        Docs index
+                      </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 +208,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 +226,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
@@ -314,17 +278,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 +329,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
@@ -385,14 +358,7 @@
                 </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">
+                    <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
@@ -449,11 +415,6 @@
                         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
@@ -571,11 +532,7 @@
                 <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 +541,13 @@
             </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">
+              <div class="col">
                 <h2 class="page-title">
                   Index
                 </h2>
@@ -607,8 +565,8 @@
                 <div class="card-body">
                   <ul>
                     <li>
-                      <a href="/layout-condensed-dark.html">
+                      <a href="/layout-vertical.html">
-                        layout-condensed-dark.html
+                        layout-vertical.html
                       </a>
                     </li>
                     <li>
@@ -616,89 +574,14 @@
                         redirects.json
                       </a>
                     </li>
-                    <li>
-                      <a href="/components/index.html">
-                        redirect.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/welcome.html">
-                        welcome.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/tmp3.html">
-                        tmp3.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/tmp.html">
-                        tmp.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/tmp-dark.html">
-                        tmp-dark.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-vertical.html">
-                        layout-vertical.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-vertical-right.html">
-                        layout-vertical-right.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-navbar-dark.html">
-                        layout-navbar-dark.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-horizontal.html">
-                        layout-horizontal.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-fluid.html">
-                        layout-fluid.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-fluid-vertical.html">
-                        layout-fluid-vertical.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-dark.html">
-                        layout-dark.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-condensed.html">
-                        layout-condensed.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/layout-combo.html">
-                        layout-combo.html
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/terms-of-service.html">
-                        terms-of-service.html
-                      </a>
-                    </li>
                     <li>
                       <a href="/tables.html">
                         tables.html
                       </a>
                     </li>
                     <li>
-                      <a href="/sitemap.xml">
+                      <a href="/settings-index.html">
-                        sitemap.xml
+                        settings-index.html
                       </a>
                     </li>
                     <li>
@@ -707,30 +590,62 @@
                       </a>
                     </li>
                     <li>
-                      <a href="/navigation.html">
+                      <a href="/layout-combo.html">
-                        navigation.html
+                        layout-combo.html
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/layout-condensed-dark.html">
+                        layout-condensed-dark.html
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/layout-condensed.html">
+                        layout-condensed.html
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/layout-dark.html">
+                        layout-dark.html
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/layout-fluid-vertical.html">
+                        layout-fluid-vertical.html
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/layout-fluid.html">
+                        layout-fluid.html
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/layout-horizontal.html">
+                        layout-horizontal.html
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/layout-navbar-dark.html">
+                        layout-navbar-dark.html
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/layout-navbar-overlap.html">
+                        layout-navbar-overlap.html
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/layout-vertical-right.html">
+                        layout-vertical-right.html
                       </a>
                     </li>
                     <li>
                       <a href="/blank.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon text-success" width="24" height="24" 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="20 7 10 17 5 12" />
-                        </svg>
                         Blank page
                       </a>
                     </li>
-                    <li>
-                      <a href="/blog.html">
-                        Blog
-                      </a>
-                    </li>
                     <li>
                       <a href="/buttons.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon text-success" width="24" height="24" 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="20 7 10 17 5 12" />
-                        </svg>
                         Buttons
                       </a>
                     </li>
@@ -744,21 +659,18 @@
                         Cards
                       </a>
                     </li>
+                    <li>
+                      <a href="/cards-masonry.html">
+                        Cards Masonry
+                      </a>
+                    </li>
                     <li>
                       <a href="/carousel.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon text-success" width="24" height="24" 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="20 7 10 17 5 12" />
-                        </svg>
                         Carousel
                       </a>
                     </li>
                     <li>
                       <a href="/changelog.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon text-success" width="24" height="24" 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="20 7 10 17 5 12" />
-                        </svg>
                         Changelog
                       </a>
                     </li>
@@ -769,19 +681,11 @@
                     </li>
                     <li>
                       <a href="/crypto-currencies.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon text-success" width="24" height="24" 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="20 7 10 17 5 12" />
-                        </svg>
                         Crypto currencies
                       </a>
                     </li>
                     <li>
                       <a href="/docs.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon text-success" width="24" height="24" 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="20 7 10 17 5 12" />
-                        </svg>
                         Documentation
                       </a>
                     </li>
@@ -790,29 +694,11 @@
                         Dropdowns
                       </a>
                     </li>
-                    <li>
-                      <a href="/email.html">
-                        Email
-                      </a>
-                    </li>
                     <li>
                       <a href="/empty.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon text-success" width="24" height="24" 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="20 7 10 17 5 12" />
-                        </svg>
                         Empty page
                       </a>
                     </li>
-                    <li>
-                      <a href="/flags.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon text-success" width="24" height="24" 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="20 7 10 17 5 12" />
-                        </svg>
-                        Flags
-                      </a>
-                    </li>
                     <li>
                       <a href="/forgot-password.html">
                         Forgot password
@@ -825,19 +711,11 @@
                     </li>
                     <li>
                       <a href="/gallery.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon text-success" width="24" height="24" 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="20 7 10 17 5 12" />
-                        </svg>
                         Gallery
                       </a>
                     </li>
                     <li>
                       <a href="/charts-heatmap.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon text-success" width="24" height="24" 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="20 7 10 17 5 12" />
-                        </svg>
                         Heatmap Charts
                       </a>
                     </li>
@@ -862,16 +740,7 @@
                       </a>
                     </li>
                     <li>
-                      <a href="/lookup.html">
+                      <a href="/error-maintenance.html">
-                        Lookup company
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/maintenance.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon text-success" width="24" height="24" 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="20 7 10 17 5 12" />
-                        </svg>
                         Maintenance mode
                       </a>
                     </li>
@@ -896,59 +765,20 @@
                       </a>
                     </li>
                     <li>
-                      <a href="/400.html">
+                      <a href="/navigation.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon text-success" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                        Navigation
-                          <path stroke="none" d="M0 0h24v24H0z"/>
-                          <polyline points="20 7 10 17 5 12" />
-                        </svg>
-                        Page 400
                       </a>
                     </li>
                     <li>
-                      <a href="/401.html">
+                      <a href="/error-404.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon text-success" width="24" height="24" 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="20 7 10 17 5 12" />
-                        </svg>
-                        Page 401
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/403.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon text-success" width="24" height="24" 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="20 7 10 17 5 12" />
-                        </svg>
-                        Page 403
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/404.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon text-success" width="24" height="24" 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="20 7 10 17 5 12" />
-                        </svg>
                         Page 404
                       </a>
                     </li>
                     <li>
-                      <a href="/500.html">
+                      <a href="/error-500.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon text-success" width="24" height="24" 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="20 7 10 17 5 12" />
-                        </svg>
                         Page 500
                       </a>
                     </li>
-                    <li>
-                      <a href="/503.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon text-success" width="24" height="24" 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="20 7 10 17 5 12" />
-                        </svg>
-                        Page 503
-                      </a>
-                    </li>
                     <li>
                       <a href="/pagination.html">
                         Pagination
@@ -956,32 +786,14 @@
                     </li>
                     <li>
                       <a href="/pricing.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon text-success" width="24" height="24" 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="20 7 10 17 5 12" />
-                        </svg>
                         Pricing cards
                       </a>
                     </li>
                     <li>
-                      <a href="/profile.html">
+                      <a href="/layout-rtl.html">
-                        Profile
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/rtl.html">
                         RTL mode
                       </a>
                     </li>
-                    <li>
-                      <a href="/ribbons.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon text-success" width="24" height="24" 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="20 7 10 17 5 12" />
-                        </svg>
-                        Ribbons
-                      </a>
-                    </li>
                     <li>
                       <a href="/sign-in.html">
                         Sign in
@@ -999,47 +811,21 @@
                     </li>
                     <li>
                       <a href="/social.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon text-success" width="24" height="24" 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="20 7 10 17 5 12" />
-                        </svg>
                         Social elements
                       </a>
                     </li>
-                    <li>
-                      <a href="/store.html">
-                        Store
-                      </a>
-                    </li>
-                    <li>
-                      <a href="/components.html">
-                        Table UI components
-                      </a>
-                    </li>
                     <li>
                       <a href="/tabs.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon text-success" width="24" height="24" 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="20 7 10 17 5 12" />
-                        </svg>
                         Tabs
                       </a>
                     </li>
                     <li>
                       <a href="/typography.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon text-success" width="24" height="24" 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="20 7 10 17 5 12" />
-                        </svg>
                         Typography
                       </a>
                     </li>
                     <li>
                       <a href="/users.html">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="icon text-success" width="24" height="24" 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="20 7 10 17 5 12" />
-                        </svg>
                         Users list
                       </a>
                     </li>
@@ -1048,6 +834,11 @@
                         Vector Maps
                       </a>
                     </li>
+                    <li>
+                      <a href="/wizard.html">
+                        Wizard
+                      </a>
+                    </li>
                   </ul>
                 </div>
               </div>
@@ -1065,9 +856,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="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.9</a>
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
@@ -1076,7 +874,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/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.9
-* @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 {
@@ -55,16 +43,12 @@
             <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,11 @@
                         Charts
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./tables.html" >
                         Tables
@@ -217,6 +187,11 @@
                         Lists
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs-index.html" >
+                        Docs index
+                      </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 +208,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 +226,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
@@ -314,17 +278,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 +329,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
@@ -385,14 +358,7 @@
                 </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">
+                    <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
@@ -449,11 +415,6 @@
                         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
@@ -571,11 +532,7 @@
                 <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,23 +541,20 @@
             </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">
-              <img src="./static/illustrations/undraw_printing_invoices_5r4r.svg" class="h-8 mb-4" alt="">
+              <img src="./static/illustrations/undraw_printing_invoices_5r4r.svg" height="128" class="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>
@@ -617,9 +571,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="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.9</a>
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
@@ -628,7 +589,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/buttons.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.9
-* @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 {
@@ -55,16 +43,12 @@
             <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,11 @@
                         Charts
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./tables.html" >
                         Tables
@@ -217,6 +187,11 @@
                         Lists
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs-index.html" >
+                        Docs index
+                      </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 +208,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 +226,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
@@ -314,17 +278,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 +329,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
@@ -385,14 +358,7 @@
                 </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">
+                    <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
@@ -449,11 +415,6 @@
                         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
@@ -571,11 +532,7 @@
                 <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,26 +541,27 @@
             </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">
+              <div class="col">
                 <h2 class="page-title">
                   Buttons
                 </h2>
               </div>
             </div>
           </div>
-          <div class="row">
+          <div class="row row-cards">
             <div class="col-12">
               <div class="card">
                 <div class="card-header">
                   <h3 class="card-title">Standard Buttons</h3>
                 </div>
                 <div class="card-body">
-                  <div class="row row-sm align-items-center mb-n3">
+                  <div class="row g-2 align-items-center mb-n3">
                     <div class="col-12 col-xl-2 mb-3 font-weight-semibold">Normal</div>
                     <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
                       <a href="#" class="btn btn-primary btn-block">
@@ -645,13 +603,8 @@
                         Dark
                       </a>
                     </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-link btn-block">
-                        Link
-                      </a>
                   </div>
-                  </div>
+                  <div class="row g-2 align-items-center mb-n3 mt-3">
-                  <div class="row row-sm align-items-center mb-n3 mt-3">
                     <div class="col-12 col-xl-2 mb-3 font-weight-semibold">Active state</div>
                     <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
                       <a href="#" class="btn btn-primary active btn-block">
@@ -693,13 +646,8 @@
                         Dark
                       </a>
                     </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-link active btn-block">
-                        Link
-                      </a>
                   </div>
-                  </div>
+                  <div class="row g-2 align-items-center mb-n3 mt-3">
-                  <div class="row row-sm align-items-center mb-n3 mt-3">
                     <div class="col-12 col-xl-2 mb-3 font-weight-semibold">Disabled</div>
                     <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
                       <a href="#" class="btn btn-primary disabled btn-block">
@@ -741,14 +689,11 @@
                         Dark
                       </a>
                     </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
-                      <a href="#" class="btn btn-link disabled btn-block">
-                        Link
-                      </a>
                   </div>
                 </div>
               </div>
             </div>
+            <div class="col-12">
               <div class="card">
                 <div class="card-header">
                   <h3 class="card-title">Outline Buttons</h3>
@@ -756,7 +701,7 @@
                 <div class="card-body">
                   <p>Use <code>.btn-outline-*</code> class for outline buttons.
                   </p>
-                  <div class="row row-sm align-items-center mb-n3">
+                  <div class="row g-2 align-items-center mb-n3">
                     <div class="col-12 col-xl-2 mb-3 font-weight-semibold">Normal</div>
                     <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
                       <a href="#" class="btn btn-outline-primary btn-block">
@@ -799,7 +744,7 @@
                       </a>
                     </div>
                   </div>
-                  <div class="row row-sm align-items-center mb-n3 mt-3">
+                  <div class="row g-2 align-items-center mb-n3 mt-3">
                     <div class="col-12 col-xl-2 mb-3 font-weight-semibold">Active state</div>
                     <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
                       <a href="#" class="btn btn-outline-primary active btn-block">
@@ -842,7 +787,7 @@
                       </a>
                     </div>
                   </div>
-                  <div class="row row-sm align-items-center mb-n3 mt-3">
+                  <div class="row g-2 align-items-center mb-n3 mt-3">
                     <div class="col-12 col-xl-2 mb-3 font-weight-semibold">Disabled</div>
                     <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
                       <a href="#" class="btn btn-outline-primary disabled btn-block">
@@ -887,6 +832,8 @@
                   </div>
                 </div>
               </div>
+            </div>
+            <div class="col-12">
               <div class="card">
                 <div class="card-header">
                   <h3 class="card-title">Ghost Buttons</h3>
@@ -894,7 +841,7 @@
                 <div class="card-body">
                   <p>Use <code>.btn-ghost-*</code> class for ghost buttons.
                   </p>
-                  <div class="row row-sm align-items-center mb-n3">
+                  <div class="row g-2 align-items-center mb-n3">
                     <div class="col-12 col-xl-2 mb-3 font-weight-semibold">Normal</div>
                     <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
                       <a href="#" class="btn btn-ghost-primary btn-block">
@@ -937,7 +884,7 @@
                       </a>
                     </div>
                   </div>
-                  <div class="row row-sm align-items-center mb-n3 mt-3">
+                  <div class="row g-2 align-items-center mb-n3 mt-3">
                     <div class="col-12 col-xl-2 mb-3 font-weight-semibold">Active state</div>
                     <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
                       <a href="#" class="btn btn-ghost-primary active btn-block">
@@ -980,7 +927,7 @@
                       </a>
                     </div>
                   </div>
-                  <div class="row row-sm align-items-center mb-n3 mt-3">
+                  <div class="row g-2 align-items-center mb-n3 mt-3">
                     <div class="col-12 col-xl-2 mb-3 font-weight-semibold">Disabled</div>
                     <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
                       <a href="#" class="btn btn-ghost-primary disabled btn-block">
@@ -1025,6 +972,8 @@
                   </div>
                 </div>
               </div>
+            </div>
+            <div class="col-12">
               <div class="card">
                 <div class="card-header">
                   <h3 class="card-title">Square Buttons</h3>
@@ -1032,7 +981,7 @@
                 <div class="card-body">
                   <p>Use <code>.btn-square</code> class for square buttons.
                   </p>
-                  <div class="row row-sm align-items-center mb-n3">
+                  <div class="row g-2 align-items-center mb-n3">
                     <div class="col-12 col-xl-2 mb-3 font-weight-semibold">Normal</div>
                     <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
                       <a href="#" class="btn btn-primary btn-square btn-block">
@@ -1077,6 +1026,8 @@
                   </div>
                 </div>
               </div>
+            </div>
+            <div class="col-12">
               <div class="card">
                 <div class="card-header">
                   <h3 class="card-title">Pill Buttons</h3>
@@ -1084,7 +1035,7 @@
                 <div class="card-body">
                   <p>Use <code>.btn-pill</code> class for pill buttons.
                   </p>
-                  <div class="row row-sm align-items-center mb-n3">
+                  <div class="row g-2 align-items-center mb-n3">
                     <div class="col-12 col-xl-2 mb-3 font-weight-semibold">Normal</div>
                     <div class="col-6 col-sm-4 col-md-2 col-xl mb-3">
                       <a href="#" class="btn btn-primary btn-pill btn-block">
@@ -1129,12 +1080,14 @@
                   </div>
                 </div>
               </div>
+            </div>
+            <div class="col-12">
               <div class="card">
                 <div class="card-header">
                   <h3 class="card-title">Extra colors</h3>
                 </div>
                 <div class="card-body">
-                  <div class="row row-sm align-items-center mb-n3">
+                  <div class="row g-2 align-items-center mb-n3">
                     <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
                       <a href="#" class="btn btn-blue btn-block">
                         Blue
@@ -1195,236 +1148,177 @@
                         Cyan
                       </a>
                     </div>
-                    <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
-                      <a href="#" class="btn btn-gray btn-block">
-                        Gray
-                      </a>
                   </div>
                 </div>
               </div>
             </div>
+            <div class="col-12">
               <div class="card">
                 <div class="card-header">
                   <h3 class="card-title">Icon buttons</h3>
                 </div>
                 <div class="card-body">
-                  <div class="row row-sm align-items-center mb-n3">
+                  <div class="row g-2 align-items-center mb-n3">
                     <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
                       <a href="#" class="btn btn-facebook btn-block btn-icon" aria-label="Facebook">
-                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3" /></svg>
-                          <path d="M22.676 0H1.324C.593 0 0 .593 0 1.324v21.352C0 23.408.593 24 1.324 24h11.494v-9.294H9.689v-3.621h3.129V8.41c0-3.099 1.894-4.785 4.659-4.785 1.325 0 2.464.097 2.796.141v3.24h-1.921c-1.5 0-1.792.721-1.792 1.771v2.311h3.584l-.465 3.63H16.56V24h6.115c.733 0 1.325-.592 1.325-1.324V1.324C24 .593 23.408 0 22.676 0"/>
-                        </svg>
                       </a>
                     </div>
                     <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
                       <a href="#" class="btn btn-twitter btn-block btn-icon" aria-label="Twitter">
-                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z" /></svg>
-                          <path d="M23.954 4.569a10 10 0 0 1-2.825.775 4.958 4.958 0 0 0 2.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 0 0-8.384 4.482C7.691 8.094 4.066 6.13 1.64 3.161a4.822 4.822 0 0 0-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 0 1-2.228-.616v.061a4.923 4.923 0 0 0 3.946 4.827 4.996 4.996 0 0 1-2.212.085 4.937 4.937 0 0 0 4.604 3.417 9.868 9.868 0 0 1-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 0 0 7.557 2.209c9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63a9.936 9.936 0 0 0 2.46-2.548l-.047-.02z"/>
-                        </svg>
                       </a>
                     </div>
                     <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
                       <a href="#" class="btn btn-google btn-block btn-icon" aria-label="Google">
-                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="M17.788 5.108a9 9 0 1 0 3.212 6.892h-8" /></svg>
-                          <path d="M12.24 10.285V14.4h6.806c-.275 1.765-2.056 5.174-6.806 5.174-4.095 0-7.439-3.389-7.439-7.574s3.345-7.574 7.439-7.574c2.33 0 3.891.989 4.785 1.849l3.254-3.138C18.189 1.186 15.479 0 12.24 0c-6.635 0-12 5.365-12 12s5.365 12 12 12c6.926 0 11.52-4.869 11.52-11.726 0-.788-.085-1.39-.189-1.989H12.24z"/>
-                        </svg>
                       </a>
                     </div>
                     <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
                       <a href="#" class="btn btn-youtube btn-block btn-icon" aria-label="Youtube">
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon" fill="currentColor">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="3" y="5" width="18" height="14" rx="4" /><path d="M10 9l5 3l-5 3z" /></svg>
-                          <path d="M23.495 6.205a3.007 3.007 0 0 0-2.088-2.088c-1.87-.501-9.396-.501-9.396-.501s-7.507-.01-9.396.501A3.007 3.007 0 0 0 .527 6.205a31.247 31.247 0 0 0-.522 5.805 31.247 31.247 0 0 0 .522 5.783 3.007 3.007 0 0 0 2.088 2.088c1.868.502 9.396.502 9.396.502s7.506 0 9.396-.502a3.007 3.007 0 0 0 2.088-2.088 31.247 31.247 0 0 0 .5-5.783 31.247 31.247 0 0 0-.5-5.805zM9.609 15.601V8.408l6.264 3.602z"/>
-                        </svg>
                       </a>
                     </div>
                     <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
                       <a href="#" class="btn btn-vimeo btn-block btn-icon" aria-label="Vimeo">
-                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="M3 8.5l1 1s1.5 -1.102 2 -.5c.509 .609 1.863 7.65 2.5 9c.556 1.184 1.978 2.89 4 1.5c2 -1.5 7.5 -5.5 8.5 -11.5c.444 -2.661 -1 -4 -2.5 -4c-2 0 -4.047 1.202 -4.5 4c2.05 -1.254 2.551 1.003 1.5 3c-1.052 2.005 -2 3 -2.5 3c-.49 0 -.924 -1.165 -1.5 -3.5c-.59 -2.42 -.5 -6.5 -3 -6.5s-5.5 4.5 -5.5 4.5z" /></svg>
-                          <path d="M23.977 6.416c-.105 2.338-1.739 5.543-4.894 9.609-3.268 4.247-6.026 6.37-8.29 6.37-1.409 0-2.578-1.294-3.553-3.881L5.322 11.4C4.603 8.816 3.834 7.522 3.01 7.522c-.179 0-.806.378-1.881 1.132L0 7.197a315.065 315.065 0 0 0 3.501-3.128C5.08 2.701 6.266 1.984 7.055 1.91c1.867-.18 3.016 1.1 3.447 3.838.465 2.953.789 4.789.971 5.507.539 2.45 1.131 3.674 1.776 3.674.502 0 1.256-.796 2.265-2.385 1.004-1.589 1.54-2.797 1.612-3.628.144-1.371-.395-2.061-1.614-2.061-.574 0-1.167.121-1.777.391 1.186-3.868 3.434-5.757 6.762-5.637 2.473.06 3.628 1.664 3.493 4.797l-.013.01z"/>
-                        </svg>
                       </a>
                     </div>
                     <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
                       <a href="#" class="btn btn-dribbble btn-block btn-icon" aria-label="Dribbble">
-                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M9 3.6c5 6 7 10.5 7.5 16.2" /><path d="M6.4 19c3.5 -3.5 6 -6.5 14.5 -6.4" /><path d="M3.1 10.75c5 0 9.814 -.38 15.314 -5" /></svg>
-                          <path d="M12 24C5.385 24 0 18.615 0 12S5.385 0 12 0s12 5.385 12 12-5.385 12-12 12zm10.12-10.358c-.35-.11-3.17-.953-6.384-.438 1.34 3.684 1.887 6.684 1.992 7.308a10.28 10.28 0 0 0 4.395-6.87zm-6.115 7.808c-.153-.9-.75-4.032-2.19-7.77l-.066.02c-5.79 2.015-7.86 6.025-8.04 6.4a10.161 10.161 0 0 0 6.29 2.166c1.42 0 2.77-.29 4-.814zm-11.62-2.58c.232-.4 3.045-5.055 8.332-6.765.135-.045.27-.084.405-.12-.26-.585-.54-1.167-.832-1.74C7.17 11.775 2.206 11.71 1.756 11.7l-.004.312c0 2.633.998 5.037 2.634 6.855zm-2.42-8.955c.46.008 4.683.026 9.477-1.248a65.473 65.473 0 0 0-3.8-5.928 10.275 10.275 0 0 0-5.676 7.17zM9.6 2.052c.282.38 2.145 2.914 3.822 6 3.645-1.365 5.19-3.44 5.373-3.702A10.19 10.19 0 0 0 12 1.764c-.825 0-1.63.1-2.4.285zm10.335 3.483c-.218.29-1.935 2.493-5.724 4.04.24.49.47.985.68 1.486.08.18.15.36.22.53 3.41-.43 6.8.26 7.14.33-.02-2.42-.88-4.64-2.31-6.38z"/>
-                        </svg>
                       </a>
                     </div>
                     <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
                       <a href="#" class="btn btn-github btn-block btn-icon" aria-label="Github">
-                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
-                          <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"/>
-                        </svg>
                       </a>
                     </div>
                     <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
                       <a href="#" class="btn btn-instagram btn-block btn-icon" aria-label="Instagram">
-                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="4" /><circle cx="12" cy="12" r="3" /><line x1="16.5" y1="7.5" x2="16.5" y2="7.501" /></svg>
-                          <path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913a5.885 5.885 0 0 0 1.384 2.126A5.868 5.868 0 0 0 4.14 23.37c.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558a5.898 5.898 0 0 0 2.126-1.384 5.86 5.86 0 0 0 1.384-2.126c.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913a5.89 5.89 0 0 0-1.384-2.126A5.847 5.847 0 0 0 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227a3.81 3.81 0 0 1-.899 1.382 3.744 3.744 0 0 1-1.38.896c-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421a3.716 3.716 0 0 1-1.379-.899 3.644 3.644 0 0 1-.9-1.38c-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 1 0 0-12.324zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405a1.441 1.441 0 0 1-2.88 0 1.44 1.44 0 0 1 2.88 0z"/>
-                        </svg>
                       </a>
                     </div>
                     <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
                       <a href="#" class="btn btn-pinterest btn-block btn-icon" aria-label="Pinterest">
-                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="8" y1="20" x2="12" y2="11" /><path d="M10.7 14c.437 1.263 1.43 2 2.55 2c2.071 0 3.75 -1.554 3.75 -4a5 5 0 1 0 -9.7 1.7" /><circle cx="12" cy="12" r="9" /></svg>
-                          <path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z"/>
-                        </svg>
                       </a>
                     </div>
                     <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
                       <a href="#" class="btn btn-vk btn-block btn-icon" aria-label="VK">
-                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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 6h2v12c-4.5 -1 -8 -6.5 -9 -12" /><path d="M20 6c-1 2 -3 5 -5 6h-3" /><path d="M20 18c-1 -2 -3 -5 -5 -6" /></svg>
-                          <path d="M11.701 18.771h1.437s.433-.047.654-.284c.21-.221.21-.63.21-.63s-.031-1.927.869-2.21c.887-.281 2.012 1.86 3.211 2.683.916.629 1.605.494 1.605.494l3.211-.044s1.682-.105.887-1.426c-.061-.105-.451-.975-2.371-2.76-2.012-1.861-1.742-1.561.676-4.787 1.469-1.965 2.07-3.166 1.875-3.676-.166-.48-1.26-.361-1.26-.361l-3.602.031s-.27-.031-.465.09c-.195.119-.314.391-.314.391s-.572 1.529-1.336 2.82c-1.623 2.729-2.268 2.879-2.523 2.699-.604-.391-.449-1.58-.449-2.432 0-2.641.404-3.75-.781-4.035-.39-.091-.681-.15-1.685-.166-1.29-.014-2.378.01-2.995.311-.405.203-.72.652-.539.675.24.03.779.146 1.064.537.375.506.359 1.636.359 1.636s.211 3.116-.494 3.503c-.495.262-1.155-.28-2.595-2.756-.735-1.26-1.291-2.67-1.291-2.67s-.105-.256-.299-.406c-.227-.165-.557-.225-.557-.225l-3.435.03s-.51.016-.689.24c-.166.195-.016.615-.016.615s2.686 6.287 5.732 9.453c2.79 2.902 5.956 2.715 5.956 2.715l-.05-.055z"/>
-                        </svg>
                       </a>
                     </div>
                     <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
                       <a href="#" class="btn btn-rss btn-block btn-icon" aria-label="RSS">
-                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="19" r="1" /><path d="M4 4a16 16 0 0 1 16 16" /><path d="M4 11a9 9 0 0 1 9 9" /></svg>
-                          <path d="M19.199 24C19.199 13.467 10.533 4.8 0 4.8V0c13.165 0 24 10.835 24 24h-4.801zM3.291 17.415a3.3 3.3 0 0 1 3.293 3.295A3.303 3.303 0 0 1 3.283 24C1.47 24 0 22.526 0 20.71s1.475-3.294 3.291-3.295zM15.909 24h-4.665c0-6.169-5.075-11.245-11.244-11.245V8.09c8.727 0 15.909 7.184 15.909 15.91z"/>
-                        </svg>
                       </a>
                     </div>
                     <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
                       <a href="#" class="btn btn-flickr btn-block btn-icon" aria-label="Flickr">
-                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="12" r="3" /><circle cx="17" cy="12" r="3" /></svg>
-                          <path d="M0 12a5.565 5.565 0 0 0 5.565 5.564c3.075 0 5.569-2.49 5.569-5.564S8.641 6.436 5.565 6.436A5.566 5.566 0 0 0 0 12zm12.866 0a5.565 5.565 0 0 0 5.567 5.564C21.496 17.564 24 15.074 24 12s-2.492-5.564-5.564-5.564A5.567 5.567 0 0 0 12.866 12z"/>
-                        </svg>
                       </a>
                     </div>
                     <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
                       <a href="#" class="btn btn-bitbucket btn-block btn-icon" aria-label="Bitbucker">
-                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
-                          <path d="M.778 1.211a.768.768 0 0 0-.768.892l3.263 19.811c.084.499.515.867 1.022.872H19.95a.772.772 0 0 0 .77-.646l3.27-20.03a.768.768 0 0 0-.768-.891L.778 1.211zM14.52 15.528H9.522L8.17 8.464h7.561l-1.211 7.064z"/>
-                        </svg>
                       </a>
                     </div>
                     <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
                       <a href="#" class="btn btn-tabler btn-block btn-icon" aria-label="Tabler">
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon" fill="currentColor">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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>
-                          <path d="M23.5 5.3C22.9 3 21 1.1 18.7.5 14.3-.2 9.8-.2 5.4.5 3 1.1 1.1 3 .5 5.3c-.7 4.4-.7 8.9 0 13.3.6 2.4 2.5 4.3 4.8 4.9 4.4.7 8.9.7 13.3 0 2.4-.6 4.2-2.4 4.8-4.8.8-4.5.8-8.9.1-13.4zm-11.8 7.6c-1 1.6-2.5 3.1-4.2 4.1-.6.3-1.2.3-1.8 0s-.9-.9-.9-1.5.3-1.2.9-1.5c.9-.5 1.6-1.2 2.3-2-.7-.8-1.4-1.4-2.3-2-.8-.5-1.1-1.6-.6-2.4S6.7 6.5 7.5 7c1.7 1 3.1 2.4 4.2 4.1.4.5.4 1.2 0 1.8zm6 3.6h-4.3c-.8 0-1.4-.4-1.4-1.1 0-.7.6-1.1 1.4-1.1h4.3c.8 0 1.4.4 1.4 1.1 0 .7-.6 1.1-1.4 1.1z"/>
-                        </svg>
                       </a>
                     </div>
                   </div>
                 </div>
               </div>
+            </div>
+            <div class="col-12">
               <div class="card">
                 <div class="card-header">
                   <h3 class="card-title">Social colors</h3>
                 </div>
                 <div class="card-body">
-                  <div class="row row-sm align-items-center mb-n3">
+                  <div class="row g-2 align-items-center mb-n3">
                     <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
                       <a href="#" class="btn btn-facebook btn-block">
-                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3" /></svg>
-                          <path d="M22.676 0H1.324C.593 0 0 .593 0 1.324v21.352C0 23.408.593 24 1.324 24h11.494v-9.294H9.689v-3.621h3.129V8.41c0-3.099 1.894-4.785 4.659-4.785 1.325 0 2.464.097 2.796.141v3.24h-1.921c-1.5 0-1.792.721-1.792 1.771v2.311h3.584l-.465 3.63H16.56V24h6.115c.733 0 1.325-.592 1.325-1.324V1.324C24 .593 23.408 0 22.676 0"/>
-                        </svg>
                         Facebook
                       </a>
                     </div>
                     <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
                       <a href="#" class="btn btn-twitter btn-block">
-                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z" /></svg>
-                          <path d="M23.954 4.569a10 10 0 0 1-2.825.775 4.958 4.958 0 0 0 2.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 0 0-8.384 4.482C7.691 8.094 4.066 6.13 1.64 3.161a4.822 4.822 0 0 0-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 0 1-2.228-.616v.061a4.923 4.923 0 0 0 3.946 4.827 4.996 4.996 0 0 1-2.212.085 4.937 4.937 0 0 0 4.604 3.417 9.868 9.868 0 0 1-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 0 0 7.557 2.209c9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63a9.936 9.936 0 0 0 2.46-2.548l-.047-.02z"/>
-                        </svg>
                         Twitter
                       </a>
                     </div>
                     <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
                       <a href="#" class="btn btn-google btn-block">
-                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="M17.788 5.108a9 9 0 1 0 3.212 6.892h-8" /></svg>
-                          <path d="M12.24 10.285V14.4h6.806c-.275 1.765-2.056 5.174-6.806 5.174-4.095 0-7.439-3.389-7.439-7.574s3.345-7.574 7.439-7.574c2.33 0 3.891.989 4.785 1.849l3.254-3.138C18.189 1.186 15.479 0 12.24 0c-6.635 0-12 5.365-12 12s5.365 12 12 12c6.926 0 11.52-4.869 11.52-11.726 0-.788-.085-1.39-.189-1.989H12.24z"/>
-                        </svg>
                         Google
                       </a>
                     </div>
                     <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
                       <a href="#" class="btn btn-youtube btn-block">
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon" fill="currentColor">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="3" y="5" width="18" height="14" rx="4" /><path d="M10 9l5 3l-5 3z" /></svg>
-                          <path d="M23.495 6.205a3.007 3.007 0 0 0-2.088-2.088c-1.87-.501-9.396-.501-9.396-.501s-7.507-.01-9.396.501A3.007 3.007 0 0 0 .527 6.205a31.247 31.247 0 0 0-.522 5.805 31.247 31.247 0 0 0 .522 5.783 3.007 3.007 0 0 0 2.088 2.088c1.868.502 9.396.502 9.396.502s7.506 0 9.396-.502a3.007 3.007 0 0 0 2.088-2.088 31.247 31.247 0 0 0 .5-5.783 31.247 31.247 0 0 0-.5-5.805zM9.609 15.601V8.408l6.264 3.602z"/>
-                        </svg>
                         Youtube
                       </a>
                     </div>
                     <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
                       <a href="#" class="btn btn-vimeo btn-block">
-                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="M3 8.5l1 1s1.5 -1.102 2 -.5c.509 .609 1.863 7.65 2.5 9c.556 1.184 1.978 2.89 4 1.5c2 -1.5 7.5 -5.5 8.5 -11.5c.444 -2.661 -1 -4 -2.5 -4c-2 0 -4.047 1.202 -4.5 4c2.05 -1.254 2.551 1.003 1.5 3c-1.052 2.005 -2 3 -2.5 3c-.49 0 -.924 -1.165 -1.5 -3.5c-.59 -2.42 -.5 -6.5 -3 -6.5s-5.5 4.5 -5.5 4.5z" /></svg>
-                          <path d="M23.977 6.416c-.105 2.338-1.739 5.543-4.894 9.609-3.268 4.247-6.026 6.37-8.29 6.37-1.409 0-2.578-1.294-3.553-3.881L5.322 11.4C4.603 8.816 3.834 7.522 3.01 7.522c-.179 0-.806.378-1.881 1.132L0 7.197a315.065 315.065 0 0 0 3.501-3.128C5.08 2.701 6.266 1.984 7.055 1.91c1.867-.18 3.016 1.1 3.447 3.838.465 2.953.789 4.789.971 5.507.539 2.45 1.131 3.674 1.776 3.674.502 0 1.256-.796 2.265-2.385 1.004-1.589 1.54-2.797 1.612-3.628.144-1.371-.395-2.061-1.614-2.061-.574 0-1.167.121-1.777.391 1.186-3.868 3.434-5.757 6.762-5.637 2.473.06 3.628 1.664 3.493 4.797l-.013.01z"/>
-                        </svg>
                         Vimeo
                       </a>
                     </div>
                     <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
                       <a href="#" class="btn btn-dribbble btn-block">
-                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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" /><path d="M9 3.6c5 6 7 10.5 7.5 16.2" /><path d="M6.4 19c3.5 -3.5 6 -6.5 14.5 -6.4" /><path d="M3.1 10.75c5 0 9.814 -.38 15.314 -5" /></svg>
-                          <path d="M12 24C5.385 24 0 18.615 0 12S5.385 0 12 0s12 5.385 12 12-5.385 12-12 12zm10.12-10.358c-.35-.11-3.17-.953-6.384-.438 1.34 3.684 1.887 6.684 1.992 7.308a10.28 10.28 0 0 0 4.395-6.87zm-6.115 7.808c-.153-.9-.75-4.032-2.19-7.77l-.066.02c-5.79 2.015-7.86 6.025-8.04 6.4a10.161 10.161 0 0 0 6.29 2.166c1.42 0 2.77-.29 4-.814zm-11.62-2.58c.232-.4 3.045-5.055 8.332-6.765.135-.045.27-.084.405-.12-.26-.585-.54-1.167-.832-1.74C7.17 11.775 2.206 11.71 1.756 11.7l-.004.312c0 2.633.998 5.037 2.634 6.855zm-2.42-8.955c.46.008 4.683.026 9.477-1.248a65.473 65.473 0 0 0-3.8-5.928 10.275 10.275 0 0 0-5.676 7.17zM9.6 2.052c.282.38 2.145 2.914 3.822 6 3.645-1.365 5.19-3.44 5.373-3.702A10.19 10.19 0 0 0 12 1.764c-.825 0-1.63.1-2.4.285zm10.335 3.483c-.218.29-1.935 2.493-5.724 4.04.24.49.47.985.68 1.486.08.18.15.36.22.53 3.41-.43 6.8.26 7.14.33-.02-2.42-.88-4.64-2.31-6.38z"/>
-                        </svg>
                         Dribbble
                       </a>
                     </div>
                     <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
                       <a href="#" class="btn btn-github btn-block">
-                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
-                          <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"/>
-                        </svg>
                         Github
                       </a>
                     </div>
                     <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
                       <a href="#" class="btn btn-instagram btn-block">
-                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="4" /><circle cx="12" cy="12" r="3" /><line x1="16.5" y1="7.5" x2="16.5" y2="7.501" /></svg>
-                          <path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913a5.885 5.885 0 0 0 1.384 2.126A5.868 5.868 0 0 0 4.14 23.37c.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558a5.898 5.898 0 0 0 2.126-1.384 5.86 5.86 0 0 0 1.384-2.126c.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913a5.89 5.89 0 0 0-1.384-2.126A5.847 5.847 0 0 0 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227a3.81 3.81 0 0 1-.899 1.382 3.744 3.744 0 0 1-1.38.896c-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421a3.716 3.716 0 0 1-1.379-.899 3.644 3.644 0 0 1-.9-1.38c-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 1 0 0-12.324zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405a1.441 1.441 0 0 1-2.88 0 1.44 1.44 0 0 1 2.88 0z"/>
-                        </svg>
                         Instagram
                       </a>
                     </div>
                     <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
                       <a href="#" class="btn btn-pinterest btn-block">
-                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="8" y1="20" x2="12" y2="11" /><path d="M10.7 14c.437 1.263 1.43 2 2.55 2c2.071 0 3.75 -1.554 3.75 -4a5 5 0 1 0 -9.7 1.7" /><circle cx="12" cy="12" r="9" /></svg>
-                          <path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z"/>
-                        </svg>
                         Pinterest
                       </a>
                     </div>
                     <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
                       <a href="#" class="btn btn-vk btn-block">
-                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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 6h2v12c-4.5 -1 -8 -6.5 -9 -12" /><path d="M20 6c-1 2 -3 5 -5 6h-3" /><path d="M20 18c-1 -2 -3 -5 -5 -6" /></svg>
-                          <path d="M11.701 18.771h1.437s.433-.047.654-.284c.21-.221.21-.63.21-.63s-.031-1.927.869-2.21c.887-.281 2.012 1.86 3.211 2.683.916.629 1.605.494 1.605.494l3.211-.044s1.682-.105.887-1.426c-.061-.105-.451-.975-2.371-2.76-2.012-1.861-1.742-1.561.676-4.787 1.469-1.965 2.07-3.166 1.875-3.676-.166-.48-1.26-.361-1.26-.361l-3.602.031s-.27-.031-.465.09c-.195.119-.314.391-.314.391s-.572 1.529-1.336 2.82c-1.623 2.729-2.268 2.879-2.523 2.699-.604-.391-.449-1.58-.449-2.432 0-2.641.404-3.75-.781-4.035-.39-.091-.681-.15-1.685-.166-1.29-.014-2.378.01-2.995.311-.405.203-.72.652-.539.675.24.03.779.146 1.064.537.375.506.359 1.636.359 1.636s.211 3.116-.494 3.503c-.495.262-1.155-.28-2.595-2.756-.735-1.26-1.291-2.67-1.291-2.67s-.105-.256-.299-.406c-.227-.165-.557-.225-.557-.225l-3.435.03s-.51.016-.689.24c-.166.195-.016.615-.016.615s2.686 6.287 5.732 9.453c2.79 2.902 5.956 2.715 5.956 2.715l-.05-.055z"/>
-                        </svg>
                         VK
                       </a>
                     </div>
                     <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
                       <a href="#" class="btn btn-rss btn-block">
-                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="19" r="1" /><path d="M4 4a16 16 0 0 1 16 16" /><path d="M4 11a9 9 0 0 1 9 9" /></svg>
-                          <path d="M19.199 24C19.199 13.467 10.533 4.8 0 4.8V0c13.165 0 24 10.835 24 24h-4.801zM3.291 17.415a3.3 3.3 0 0 1 3.293 3.295A3.303 3.303 0 0 1 3.283 24C1.47 24 0 22.526 0 20.71s1.475-3.294 3.291-3.295zM15.909 24h-4.665c0-6.169-5.075-11.245-11.244-11.245V8.09c8.727 0 15.909 7.184 15.909 15.91z"/>
-                        </svg>
                         RSS
                       </a>
                     </div>
                     <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
                       <a href="#" class="btn btn-flickr btn-block">
-                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="12" r="3" /><circle cx="17" cy="12" r="3" /></svg>
-                          <path d="M0 12a5.565 5.565 0 0 0 5.565 5.564c3.075 0 5.569-2.49 5.569-5.564S8.641 6.436 5.565 6.436A5.566 5.566 0 0 0 0 12zm12.866 0a5.565 5.565 0 0 0 5.567 5.564C21.496 17.564 24 15.074 24 12s-2.492-5.564-5.564-5.564A5.567 5.567 0 0 0 12.866 12z"/>
-                        </svg>
                         Flickr
                       </a>
                     </div>
                     <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
                       <a href="#" class="btn btn-bitbucket btn-block">
-                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
-                          <path d="M.778 1.211a.768.768 0 0 0-.768.892l3.263 19.811c.084.499.515.867 1.022.872H19.95a.772.772 0 0 0 .77-.646l3.27-20.03a.768.768 0 0 0-.768-.891L.778 1.211zM14.52 15.528H9.522L8.17 8.464h7.561l-1.211 7.064z"/>
-                        </svg>
                         Bitbucker
                       </a>
                     </div>
                     <div class="col-6 col-sm-4 col-md-2 col-xl-auto mb-3">
                       <a href="#" class="btn btn-tabler btn-block">
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon" fill="currentColor">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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>
-                          <path d="M23.5 5.3C22.9 3 21 1.1 18.7.5 14.3-.2 9.8-.2 5.4.5 3 1.1 1.1 3 .5 5.3c-.7 4.4-.7 8.9 0 13.3.6 2.4 2.5 4.3 4.8 4.9 4.4.7 8.9.7 13.3 0 2.4-.6 4.2-2.4 4.8-4.8.8-4.5.8-8.9.1-13.4zm-11.8 7.6c-1 1.6-2.5 3.1-4.2 4.1-.6.3-1.2.3-1.8 0s-.9-.9-.9-1.5.3-1.2.9-1.5c.9-.5 1.6-1.2 2.3-2-.7-.8-1.4-1.4-2.3-2-.8-.5-1.1-1.6-.6-2.4S6.7 6.5 7.5 7c1.7 1 3.1 2.4 4.2 4.1.4.5.4 1.2 0 1.8zm6 3.6h-4.3c-.8 0-1.4-.4-1.4-1.1 0-.7.6-1.1 1.4-1.1h4.3c.8 0 1.4.4 1.4 1.1 0 .7-.6 1.1-1.4 1.1z"/>
-                        </svg>
                         Tabler
                       </a>
                     </div>
@@ -1445,9 +1339,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="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.9</a>
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
@@ -1456,7 +1357,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/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.9
-* @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 {
@@ -55,16 +47,12 @@
             <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,11 @@
                         Charts
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./tables.html" >
                         Tables
@@ -217,6 +191,11 @@
                         Lists
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs-index.html" >
+                        Docs index
+                      </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 +212,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 +230,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
@@ -314,17 +282,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 +333,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
@@ -385,14 +362,7 @@
                 </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">
+                    <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
@@ -449,11 +419,6 @@
                         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
@@ -571,11 +536,7 @@
                 <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 +545,13 @@
             </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">
+              <div class="col">
                 <h2 class="page-title">
                   Calendar
                 </h2>
@@ -598,11 +560,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>
@@ -626,129 +584,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="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.9</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,842 @@
+<!doctype html>
+<!--
+* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
+* @version 1.0.0-alpha.9
+* @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">
+        <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="./pagination.html" >
+                        Pagination
+                      </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="./docs-index.html" >
+                        Docs index
+                      </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="./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 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" 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">
+                      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/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" 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">
+            <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-icon">
+                    <img src="./static/illustrations/undraw_quitting_time_dm8t.svg" height="128" class="mb-4"  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 btn-block">
+                      Pay now
+                    </a>
+                  </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">
+                <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="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.9</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.9
-* @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 {
@@ -55,16 +43,12 @@
             <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,11 @@
                         Charts
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./tables.html" >
                         Tables
@@ -217,6 +187,11 @@
                         Lists
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs-index.html" >
+                        Docs index
+                      </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 +208,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 +226,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
@@ -314,17 +278,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 +329,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
@@ -385,14 +358,7 @@
                 </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">
+                    <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
@@ -449,11 +415,6 @@
                         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
@@ -571,11 +532,7 @@
                 <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 +541,54 @@
             </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">
+              <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 +608,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 +620,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 +643,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 +654,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 +664,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 +676,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 +687,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 +697,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 +707,31 @@
                     </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">
-                    <img src="./static/illustrations/undraw_quitting_time_dm8t.svg" class="h-8 mb-4" alt="">
+                        <img src="./static/illustrations/undraw_quitting_time_dm8t.svg" height="128" class="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 +780,8 @@
                       </div>
                     </div>
                   </div>
+                </div>
+                <div class="col-12">
                   <!-- Cards with tabs component -->
                   <div class="card-tabs">
                     <div class="tab-content">
@@ -868,7 +831,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 +850,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 +866,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 +885,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 +911,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 +921,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 +931,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 +941,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 +950,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 +966,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>
@@ -1029,7 +1016,11 @@
                             </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 +1029,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 +1040,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 +1053,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 +1066,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,6 +1087,10 @@
                     </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">
@@ -1099,9 +1102,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="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.9</a>
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
@@ -1110,25 +1120,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.9
-* @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 {
@@ -55,16 +43,12 @@
             <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,11 @@
                         Charts
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./tables.html" >
                         Tables
@@ -217,6 +187,11 @@
                         Lists
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs-index.html" >
+                        Docs index
+                      </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 +208,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 +226,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
@@ -314,17 +278,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 +329,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
@@ -385,14 +358,7 @@
                 </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">
+                    <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
@@ -449,11 +415,6 @@
                         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
@@ -571,11 +532,7 @@
                 <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 +541,13 @@
             </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">
+              <div class="col">
                 <h2 class="page-title">
                   Carousel
                 </h2>
@@ -686,11 +644,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 +705,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>
@@ -770,9 +728,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="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.9</a>
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
@@ -781,7 +746,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.9
-* @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 {
@@ -55,16 +43,12 @@
             <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,11 @@
                         Charts
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./tables.html" >
                         Tables
@@ -217,6 +187,11 @@
                         Lists
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs-index.html" >
+                        Docs index
+                      </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 +208,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 +226,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
@@ -314,17 +278,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 +329,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
@@ -385,14 +358,7 @@
                 </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">
+                    <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
@@ -449,11 +415,6 @@
                         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
@@ -571,11 +532,7 @@
                 <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 +541,13 @@
             </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">
+              <div class="col">
                 <h2 class="page-title">
                   Changelog
                 </h2>
@@ -612,9 +570,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="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.9</a>
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
@@ -623,7 +588,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.9
-* @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 {
@@ -55,16 +43,12 @@
             <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,11 @@
                         Charts
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./tables.html" >
                         Tables
@@ -217,6 +187,11 @@
                         Lists
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs-index.html" >
+                        Docs index
+                      </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 +208,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 +226,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
@@ -314,17 +278,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 +329,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
@@ -385,14 +358,7 @@
                 </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">
+                    <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
@@ -449,11 +415,6 @@
                         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
@@ -571,11 +532,7 @@
                 <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 +541,13 @@
             </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">
+              <div class="col">
                 <h2 class="page-title">
                   Heatmap Charts
                 </h2>
@@ -628,18 +586,6 @@
                 	},
                 	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"
@@ -679,18 +625,6 @@
                 	},
                 	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"
@@ -730,18 +664,6 @@
                 	},
                 	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"
@@ -808,18 +730,6 @@
                 		}
                 	},
                 	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"
@@ -841,9 +751,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="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.9</a>
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
@@ -852,7 +769,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.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.9
-* @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 {
@@ -55,16 +43,12 @@
             <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,11 @@
                         Charts
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./tables.html" >
                         Tables
@@ -217,6 +187,11 @@
                         Lists
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs-index.html" >
+                        Docs index
+                      </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 +208,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 +226,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
@@ -314,17 +278,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 +329,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
@@ -385,14 +358,7 @@
                 </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">
+                    <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
@@ -449,11 +415,6 @@
                         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
@@ -571,11 +532,7 @@
                 <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 +541,13 @@
             </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">
+              <div class="col">
                 <h2 class="page-title">
                   Charts
                 </h2>
@@ -597,13 +555,29 @@
             </div>
           </div>
           <div class="row">
-            <div class="col-12">
+            <div class="card">
+              <div class="card-body">
+                <div class="d-flex">
+                  <h3 class="card-title">Social referrals</h3>
+                  <div class="ml-auto">
+                    <div class="dropdown">
+                      <a class="dropdown-toggle text-muted" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Last 7 days</a>
+                      <div class="dropdown-menu dropdown-menu-right">
+                        <a class="dropdown-item active" href="#">Last 7 days</a>
+                        <a class="dropdown-item" href="#">Last 30 days</a>
+                        <a class="dropdown-item" href="#">Last 3 months</a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div id="chart-social-referrals"></div>
+              </div>
+            </div>
             <div class="card">
               <div class="card-body">
                 <div id="chart-tasks-overview"></div>
               </div>
             </div>
-            </div>
             <div class="col-lg-6 col-xl-4">
               <div class="card">
                 <div class="card-body">
@@ -771,9 +745,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="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.9</a>
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
@@ -782,10 +763,93 @@
     </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/apexcharts/dist/apexcharts.min.js"></script>
     <!-- Tabler Core -->
     <script src="./dist/js/tabler.min.js"></script>
+    <script>
+      // @formatter:off
+      document.addEventListener("DOMContentLoaded", function () {
+      	window.ApexCharts && (new ApexCharts(document.getElementById('chart-social-referrals'), {
+      		chart: {
+      			type: "line",
+      			fontFamily: 'inherit',
+      			height: 192,
+      			parentHeightOffset: 0,
+      			toolbar: {
+      				show: false,
+      			},
+      			animations: {
+      				enabled: false
+      			},
+      		},
+      		fill: {
+      			opacity: 1,
+      		},
+      		stroke: {
+      			width: 2,
+      			lineCap: "round",
+      			curve: "smooth",
+      		},
+      		series: [{
+      			name: "Facebook",
+      			data: [13281, 8521, 15038, 9983, 15417, 8888, 7052, 14270, 5214, 9587, 5950, 16852, 17836, 12217, 17406, 12262, 9147, 14961, 18292, 15230, 13435, 10649, 5140, 13680, 4508, 13271, 13413, 5543, 18727, 18238, 18175, 6246, 5864, 17847, 9170, 6445, 12945, 8142, 8980, 10422, 15535, 11569, 10114, 17621, 16138, 13046, 6652, 9906, 14100, 16495, 6749]
+      		},{
+      			name: "Twitter",
+      			data: [3680, 1862, 3070, 2252, 5348, 3091, 3000, 3984, 5176, 5325, 2420, 5474, 3098, 1893, 3748, 2879, 4197, 5186, 4213, 4334, 2807, 1594, 4863, 2030, 3752, 4856, 5341, 3954, 3461, 3097, 3404, 4949, 2283, 3227, 3630, 2360, 3477, 4675, 1901, 2252, 3347, 2954, 5029, 2079, 2830, 3292, 4578, 3401, 4104, 3749, 4457, 3734]
+      		},{
+      			name: "Dribbble",
+      			data: [722, 1866, 961, 1108, 1110, 561, 1753, 1815, 1985, 776, 859, 547, 1488, 766, 702, 621, 1599, 1372, 1620, 963, 759, 764, 739, 789, 1696, 1454, 1842, 734, 551, 1689, 1924, 1875, 908, 1675, 1541, 1953, 534, 502, 1524, 1867, 719, 1472, 1608, 1025, 889, 1150, 654, 1695, 1662, 1285, 1787]
+      		}],
+      		grid: {
+      			padding: {
+      				top: -20,
+      				right: 0,
+      				left: -4,
+      				bottom: -4
+      			},
+      			strokeDashArray: 4,
+      			xaxis: {
+      				lines: {
+      					show: true
+      				}
+      			},
+      		},
+      		xaxis: {
+      			labels: {
+      				padding: 0
+      			},
+      			tooltip: {
+      				enabled: false
+      			},
+      			type: 'datetime',
+      		},
+      		yaxis: {
+      			labels: {
+      				padding: 4
+      			},
+      		},
+      		labels: [
+      			'2020-06-20', '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26', '2020-06-27', '2020-06-28', '2020-06-29', '2020-06-30', '2020-07-01', '2020-07-02', '2020-07-03', '2020-07-04', '2020-07-05', '2020-07-06', '2020-07-07', '2020-07-08', '2020-07-09', '2020-07-10', '2020-07-11', '2020-07-12', '2020-07-13', '2020-07-14', '2020-07-15', '2020-07-16', '2020-07-17', '2020-07-18', '2020-07-19', '2020-07-20', '2020-07-21', '2020-07-22', '2020-07-23', '2020-07-24', '2020-07-25', '2020-07-26', '2020-07-27', '2020-07-28', '2020-07-29', '2020-07-30', '2020-07-31', '2020-08-01', '2020-08-02', '2020-08-03', '2020-08-04', '2020-08-05', '2020-08-06', '2020-08-07', '2020-08-08', '2020-08-09'
+      		],
+      		colors: ["#3b5998", "#1da1f2", "#ea4c89"],
+      		legend: {
+      			show: true,
+      			position: 'bottom',
+      			height: 32,
+      			offsetY: 8,
+      			markers: {
+      				width: 8,
+      				height: 8,
+      				radius: 100,
+      			},
+      			itemMargin: {
+      				horizontal: 8,
+      			},
+      		},
+      	})).render();
+      });
+      // @formatter:on
+    </script>
     <script>
       // @formatter:off
       document.addEventListener("DOMContentLoaded", function () {
@@ -822,7 +886,7 @@
       				top: -20,
       				right: 0,
       				left: -4,
-      				bottom: -8
+      				bottom: -4
       			},
       			strokeDashArray: 4,
       		},
@@ -887,7 +951,7 @@
       				top: -20,
       				right: 0,
       				left: -4,
-      				bottom: -8
+      				bottom: -4
       			},
       			strokeDashArray: 4,
       		},
@@ -952,7 +1016,7 @@
       				top: -20,
       				right: 0,
       				left: -4,
-      				bottom: -8
+      				bottom: -4
       			},
       			strokeDashArray: 4,
       		},
@@ -1018,7 +1082,7 @@
       				top: -20,
       				right: 0,
       				left: -4,
-      				bottom: -8
+      				bottom: -4
       			},
       			strokeDashArray: 4,
       		},
@@ -1083,7 +1147,7 @@
       				top: -20,
       				right: 0,
       				left: -4,
-      				bottom: -8
+      				bottom: -4
       			},
       			strokeDashArray: 4,
       		},
@@ -1145,7 +1209,7 @@
       				top: -20,
       				right: 0,
       				left: -4,
-      				bottom: -8
+      				bottom: -4
       			},
       			strokeDashArray: 4,
       		},
@@ -1211,7 +1275,7 @@
       				top: -20,
       				right: 0,
       				left: -4,
-      				bottom: -8
+      				bottom: -4
       			},
       			strokeDashArray: 4,
       		},
@@ -1276,7 +1340,7 @@
       				top: -20,
       				right: 0,
       				left: -4,
-      				bottom: -8
+      				bottom: -4
       			},
       			strokeDashArray: 4,
       		},
@@ -1344,7 +1408,7 @@
       				top: -20,
       				right: 0,
       				left: -4,
-      				bottom: -8
+      				bottom: -4
       			},
       			strokeDashArray: 4,
       		},
@@ -1368,7 +1432,7 @@
       		labels: [
       			'2020-06-20', '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26'
       		],
-      		colors: ["#206bc4", "#fa4654"],
+      		colors: ["#206bc4", "#cd201f"],
       		legend: {
       			show: false,
       		},
@@ -1416,7 +1480,7 @@
       				top: -20,
       				right: 0,
       				left: -4,
-      				bottom: -8
+      				bottom: -4
       			},
       			strokeDashArray: 4,
       		},
@@ -1440,7 +1504,7 @@
       		labels: [
       			'2020-06-20', '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26'
       		],
-      		colors: ["#206bc4", "#fa4654"],
+      		colors: ["#206bc4", "#cd201f"],
       		legend: {
       			show: false,
       		},
@@ -1488,7 +1552,7 @@
       				top: -20,
       				right: 0,
       				left: -4,
-      				bottom: -8
+      				bottom: -4
       			},
       			strokeDashArray: 4,
       		},
@@ -1512,7 +1576,7 @@
       		labels: [
       			'2020-06-20', '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26'
       		],
-      		colors: ["#206bc4", "#fa4654"],
+      		colors: ["#206bc4", "#cd201f"],
       		legend: {
       			show: false,
       		},
@@ -1561,7 +1625,7 @@
       				top: -20,
       				right: 0,
       				left: -4,
-      				bottom: -8
+      				bottom: -4
       			},
       			strokeDashArray: 4,
       		},
@@ -1585,7 +1649,7 @@
       		labels: [
       			'2020-06-20', '2020-06-21', '2020-06-22', '2020-06-23', '2020-06-24', '2020-06-25', '2020-06-26'
       		],
-      		colors: ["#206bc4", "#fa4654"],
+      		colors: ["#206bc4", "#cd201f"],
       		legend: {
       			show: false,
       		},
@@ -1666,7 +1730,7 @@
       				top: -20,
       				right: 0,
       				left: -4,
-      				bottom: -8
+      				bottom: -4
       			},
       			strokeDashArray: 4,
       		},
@@ -1737,7 +1801,7 @@
       				top: -20,
       				right: 0,
       				left: -4,
-      				bottom: -8
+      				bottom: -4
       			},
       			strokeDashArray: 4,
       		},
@@ -1796,7 +1860,7 @@
       				top: -20,
       				right: 0,
       				left: -4,
-      				bottom: -8
+      				bottom: -4
       			},
       			strokeDashArray: 4,
       		},
@@ -1849,7 +1913,7 @@
       				top: -20,
       				right: 0,
       				left: -4,
-      				bottom: -8
+      				bottom: -4
       			},
       			strokeDashArray: 4,
       		},
@@ -1921,7 +1985,7 @@
       				top: -20,
       				right: 0,
       				left: -4,
-      				bottom: -8
+      				bottom: -4
       			},
       			strokeDashArray: 4,
       		},
@@ -1990,7 +2054,7 @@
       				top: -20,
       				right: 0,
       				left: -4,
-      				bottom: -8
+      				bottom: -4
       			},
       			strokeDashArray: 4,
       		},
@@ -2060,7 +2124,7 @@
       				top: -20,
       				right: 0,
       				left: -4,
-      				bottom: -8
+      				bottom: -4
       			},
       			strokeDashArray: 4,
       		},
@@ -2125,7 +2189,7 @@
       				top: -20,
       				right: 0,
       				left: -4,
-      				bottom: -8
+      				bottom: -4
       			},
       			strokeDashArray: 4,
       		},
@@ -2182,7 +2246,7 @@
       				top: -20,
       				right: 0,
       				left: -4,
-      				bottom: -8
+      				bottom: -4
       			},
       			strokeDashArray: 4,
       		},
@@ -2253,7 +2317,7 @@
       				top: -20,
       				right: 0,
       				left: -4,
-      				bottom: -8
+      				bottom: -4
       			},
       			strokeDashArray: 4,
       		},

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.9
-* @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 {
@@ -55,16 +43,12 @@
             <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,11 @@
                         Charts
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="./tables.html" >
                         Tables
@@ -217,6 +187,11 @@
                         Lists
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="./docs-index.html" >
+                        Docs index
+                      </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 +208,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 +226,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
@@ -314,17 +278,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 +329,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
@@ -385,14 +358,7 @@
                 </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">
+                    <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
@@ -449,11 +415,6 @@
                         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
@@ -571,11 +532,7 @@
                 <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 +541,13 @@
             </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">
+              <div class="col">
                 <h2 class="page-title">
                   Crypto currencies
                 </h2>
@@ -1824,9 +1782,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="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.9</a>
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
@@ -1835,7 +1800,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,19 +1,18 @@
 /*!
- * Tabler (v1.0.0-alpha.5)
+* Tabler v1.0.0-alpha.9 (https://tabler.io)
+* @version 1.0.0-alpha.9
+* @link https://tabler.io
 * Copyright 2018-2020 The Tabler Authors
- * Copyright 2018-2020 codecalm
+* 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;
+  background: #232e3c;
   border-radius: 3px;
   color: #ffffff; }
   pre.highlight::-webkit-scrollbar,
@@ -31,8 +30,8 @@ pre.highlight,
     background: transparent; }
   pre.highlight:hover::-webkit-scrollbar-thumb,
   .highlight pre:hover::-webkit-scrollbar-thumb {
-    background: #cbcfd6;
+    background: #c4c8cf;
-    background: #5d6675; }
+    background: #4f5863; }
 
 .highlight .c, .highlight .c1 {
   color: #a0aec0; }
@@ -55,7 +54,7 @@ pre.highlight,
 .example {
   padding: 2rem;
   margin: 2rem 0;
-  border: 1px solid rgba(110, 117, 130, 0.2);
+  border: 1px solid #e8e9ea;
   border-radius: 3px 3px 0 0;
   position: relative;
   min-height: 12rem;
@@ -74,7 +73,7 @@ pre.highlight,
   max-width: 100%; }
 
 .example-bg {
-  background: #f5f7fb; }
+  background: #f1f4f8; }
 
 .example-code {
   margin: 2rem 0;
@@ -97,7 +96,7 @@ pre.highlight,
   max-width: 40rem; }
 
 .example-modal-backdrop {
-  background: #354052;
+  background: #232e3c;
   opacity: 0.24;
   position: absolute;
   width: 100%;
@@ -108,12 +107,12 @@ pre.highlight,
 
 @media not print {
   .theme-dark .example-code {
-    border: 1px solid rgba(110, 117, 130, 0.2);
+    border: 1px solid #e8e9ea;
     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 #e8e9ea;
     border-top: none; } }
 
 .card-sponsor {
@@ -131,13 +130,21 @@ body.no-transitions * {
   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 {
+    width: 100%;
+    height: auto;
+    stroke-width: 1.5;
+    max-width: 15rem;
+    margin: 0 auto;
+    display: block; }

demo/dist/css/demo.min.css

@@ -1,7 +1,9 @@
 /*!
- * Tabler (v1.0.0-alpha.5)
+* Tabler v1.0.0-alpha.9 (https://tabler.io)
+* @version 1.0.0-alpha.9
+* @link https://tabler.io
 * Copyright 2018-2020 The Tabler Authors
- * Copyright 2018-2020 codecalm
+* Copyright 2018-2020 codecalm.net Paweł Kuna
 * 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:.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}
+*/
-/*# sourceMappingURL=demo.min.css.map */
+.highlight pre,pre.highlight{max-height:30rem;margin:1.5rem 0;overflow:auto;font-size:85.7142857%;background:#232e3c;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:#c4c8cf;background:#4f5863}.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 #e8e9ea;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:#f1f4f8}.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:#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 #e8e9ea;border-top:none}}@media not print and (prefers-color-scheme:dark){.theme-dark-auto .example-code{border:1px solid #e8e9ea;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}.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 svg{width:100%;height:auto;stroke-width:1.5;max-width:15rem;margin:0 auto;display:block}

demo/dist/css/tabler-flags.css

@@ -1,12 +1,11 @@
 /*!
- * Tabler (v1.0.0-alpha.5)
+* Tabler v1.0.0-alpha.9 (https://tabler.io)
+* @version 1.0.0-alpha.9
+* @link https://tabler.io
 * Copyright 2018-2020 The Tabler Authors
- * Copyright 2018-2020 codecalm
+* 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 #e8e9ea;
   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.9 (https://tabler.io)
+* @version 1.0.0-alpha.9
+* @link https://tabler.io
 * Copyright 2018-2020 The Tabler Authors
- * Copyright 2018-2020 codecalm
+* 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.9
-* @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 {
@@ -56,16 +44,12 @@
             <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,11 @@
                         Charts
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../tables.html" >
                         Tables
@@ -218,6 +188,11 @@
                         Lists
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs-index.html" >
+                        Docs index
+                      </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 +209,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 +227,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
@@ -315,17 +279,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 +330,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
@@ -386,14 +359,7 @@
                 </li>
                 <li class="nav-item active 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">
+                    <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
@@ -450,11 +416,6 @@
                         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
@@ -572,11 +533,7 @@
                 <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,12 +542,13 @@
             </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">
+              <div class="col">
                 <h2 class="page-title">
                   Documentation
                 </h2>
@@ -599,11 +557,9 @@
           </div>
           <div class="row justify-content-center">
             <div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
-              <div class="sticky-top">
+              <div class="sticky-top lh-lg py-4">
-                <a href="https://github.com/tabler/tabler" class="btn btn-github mb-6 btn-block" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
-                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor"><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"/></svg>
-                    <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"/>
-                  </svg>
                   Browse source code
                 </a>
                 <h5 class="subheader">On this page</h5>
@@ -622,15 +578,10 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div class="d-flex">
-                      <h2 class="h1 mt-0 mb-3">Alerts</h2>
+                      <h1 class="h2 mt-0 mb-3">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>
@@ -705,24 +656,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="#" class="btn-close" data-dismiss="alert" aria-label="close">&times;</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="#" class="btn-close" data-dismiss="alert" aria-label="close">&times;</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="#" class="btn-close" data-dismiss="alert" aria-label="close">&times;</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="#" class="btn-close" data-dismiss="alert" aria-label="close">&times;</a>
                         </div>
                       </div>
                     </div>
@@ -730,19 +681,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;</span><span class="ni">&amp;times;</span><span class="nt">&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;</span><span class="ni">&amp;times;</span><span class="nt">&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;</span><span class="ni">&amp;times;</span><span class="nt">&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;</span><span class="ni">&amp;times;</span><span class="nt">&lt;/a&gt;</span>
 <span class="nt">&lt;/div&gt;</span></code></pre>
                       </figure>
                     </div>
@@ -751,36 +702,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>
@@ -856,9 +790,9 @@
                           <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="#" class="btn btn-secondary">Cancel</a>
+                            <a href="#" class="btn">Cancel</a>
                           </div>
-                          <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
+                          <a href="#" class="btn-close" data-dismiss="alert" aria-label="close">&times;</a>
                         </div>
                       </div>
                     </div>
@@ -869,9 +803,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;</span><span class="ni">&amp;times;</span><span class="nt">&lt;/a&gt;</span>
 <span class="nt">&lt;/div&gt;</span></code></pre>
                       </figure>
                     </div>
@@ -892,9 +826,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="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.9</a>
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
@@ -903,7 +844,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.9
-* @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 {
@@ -56,16 +44,12 @@
             <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,11 @@
                         Charts
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../tables.html" >
                         Tables
@@ -218,6 +188,11 @@
                         Lists
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs-index.html" >
+                        Docs index
+                      </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 +209,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 +227,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
@@ -315,17 +279,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 +330,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
@@ -386,14 +359,7 @@
                 </li>
                 <li class="nav-item active 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">
+                    <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
@@ -450,11 +416,6 @@
                         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
@@ -572,11 +533,7 @@
                 <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,12 +542,13 @@
             </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">
+              <div class="col">
                 <h2 class="page-title">
                   Documentation
                 </h2>
@@ -599,11 +557,9 @@
           </div>
           <div class="row justify-content-center">
             <div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
-              <div class="sticky-top">
+              <div class="sticky-top lh-lg py-4">
-                <a href="https://github.com/tabler/tabler" class="btn btn-github mb-6 btn-block" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
-                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor"><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"/></svg>
-                    <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"/>
-                  </svg>
                   Browse source code
                 </a>
                 <h5 class="subheader">On this page</h5>
@@ -617,7 +573,7 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div class="d-flex">
-                      <h2 class="h1 mt-0 mb-3">Autosize</h2>
+                      <h1 class="h2 mt-0 mb-3">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>
                     <h2 id="default-markup">Default markup</h2>
@@ -625,13 +581,13 @@
                     <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>
@@ -651,9 +607,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="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.9</a>
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
@@ -662,20 +625,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.9
-* @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 {
@@ -56,16 +44,12 @@
             <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,11 @@
                         Charts
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../tables.html" >
                         Tables
@@ -218,6 +188,11 @@
                         Lists
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs-index.html" >
+                        Docs index
+                      </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 +209,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 +227,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
@@ -315,17 +279,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 +330,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
@@ -386,14 +359,7 @@
                 </li>
                 <li class="nav-item active 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">
+                    <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
@@ -450,11 +416,6 @@
                         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
@@ -572,11 +533,7 @@
                 <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,12 +542,13 @@
             </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">
+              <div class="col">
                 <h2 class="page-title">
                   Documentation
                 </h2>
@@ -599,11 +557,9 @@
           </div>
           <div class="row justify-content-center">
             <div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
-              <div class="sticky-top">
+              <div class="sticky-top lh-lg py-4">
-                <a href="https://github.com/tabler/tabler" class="btn btn-github mb-6 btn-block" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
-                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor"><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"/></svg>
-                    <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"/>
-                  </svg>
                   Browse source code
                 </a>
                 <h5 class="subheader">On this page</h5>
@@ -626,11 +582,11 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div class="d-flex">
-                      <h2 class="h1 mt-0 mb-3">Avatars</h2>
+                      <h1 class="h2 mt-0 mb-3">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>
                     <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,25 +641,11 @@
                     <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>
@@ -746,6 +688,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 +697,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 +758,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>
@@ -876,9 +820,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="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.9</a>
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
@@ -887,7 +838,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/badges.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.9
-* @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>Badges - Documentation - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <title>Badges - 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="Badges are small count and labeling components, which are used to add extra information to an interface element. You can use them to draw users&#39; attention to a new element, notify about unread messages or provide any kind of additional info."/>
-    <!-- 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 {
@@ -56,16 +44,12 @@
             <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,11 @@
                         Charts
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../tables.html" >
                         Tables
@@ -218,6 +188,11 @@
                         Lists
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs-index.html" >
+                        Docs index
+                      </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 +209,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 +227,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
@@ -315,17 +279,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 +330,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
@@ -386,14 +359,7 @@
                 </li>
                 <li class="nav-item active 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">
+                    <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
@@ -450,11 +416,6 @@
                         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
@@ -572,11 +533,7 @@
                 <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,12 +542,13 @@
             </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">
+              <div class="col">
                 <h2 class="page-title">
                   Documentation
                 </h2>
@@ -599,11 +557,9 @@
           </div>
           <div class="row justify-content-center">
             <div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
-              <div class="sticky-top">
+              <div class="sticky-top lh-lg py-4">
-                <a href="https://github.com/tabler/tabler" class="btn btn-github mb-6 btn-block" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
-                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor"><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"/></svg>
-                    <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"/>
-                  </svg>
                   Browse source code
                 </a>
                 <h5 class="subheader">On this page</h5>
@@ -612,12 +568,9 @@
                   <li class="toc-entry toc-h2"><a href="#pill-badges">Pill badges</a></li>
                   <li class="toc-entry toc-h2"><a href="#soft-color-badges">Soft color badges</a></li>
                   <li class="toc-entry toc-h2"><a href="#links">Links</a></li>
-                  <li class="toc-entry toc-h2"><a href="#empty-badges">Empty badges</a>
+                  <li class="toc-entry toc-h2"><a href="#empty-badges">Empty badges</a></li>
-                    <ul>
+                  <li class="toc-entry toc-h2"><a href="#badge-avatars">Badge avatars</a></li>
-                      <li class="toc-entry toc-h3"><a href="#badge-add-ons">Badge add-ons</a></li>
+                  <li class="toc-entry toc-h2"><a href="#button-with-badge">Button with badge</a></li>
-                      <li class="toc-entry toc-h3"><a href="#badge-avatars">Badge avatars</a></li>
-                    </ul>
-                  </li>
                 </ul>
               </div>
             </div>
@@ -626,15 +579,10 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div class="d-flex">
-                      <h2 class="h1 mt-0 mb-3">Badges</h2>
+                      <h1 class="h2 mt-0 mb-3">Badges</h1>
                       <p class="ml-auto">
                         <a href="https://getbootstrap.com/docs/4.4/components/badge/" 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>
@@ -656,7 +604,6 @@
                         <span class="badge bg-green">green</span>
                         <span class="badge bg-teal">teal</span>
                         <span class="badge bg-cyan">cyan</span>
-                        <span class="badge bg-gray">gray</span>
                       </div>
                     </div>
                     <div class="example-code">
@@ -672,12 +619,11 @@
 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-lime"</span><span class="nt">&gt;</span>lime<span class="nt">&lt;/span&gt;</span>
 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-green"</span><span class="nt">&gt;</span>green<span class="nt">&lt;/span&gt;</span>
 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-teal"</span><span class="nt">&gt;</span>teal<span class="nt">&lt;/span&gt;</span>
-<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-cyan"</span><span class="nt">&gt;</span>cyan<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-cyan"</span><span class="nt">&gt;</span>cyan<span class="nt">&lt;/span&gt;</span></code></pre>
-<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-gray"</span><span class="nt">&gt;</span>gray<span class="nt">&lt;/span&gt;</span></code></pre>
                       </figure>
                     </div>
                     <h2 id="pill-badges">Pill badges</h2>
-                    <p>Use the <code class="highlighter-rouge">.bagde-pill</code> class if you want to create a badge with rounded corners. Its width will adjust to the label text.</p>
+                    <p>Use the <code class="language-plaintext highlighter-rouge">.bagde-pill</code> class if you want to create a badge with rounded corners. Its width will adjust to the label text.</p>
                     <div class="example no_toc_section example-centered">
                       <div class="example-content">
                         <span class="badge badge-pill bg-blue">1</span>
@@ -692,7 +638,6 @@
                         <span class="badge badge-pill bg-green">10</span>
                         <span class="badge badge-pill bg-teal">11</span>
                         <span class="badge badge-pill bg-cyan">12</span>
-                        <span class="badge badge-pill bg-gray">13</span>
                       </div>
                     </div>
                     <div class="example-code">
@@ -708,8 +653,7 @@
 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-pill bg-lime"</span><span class="nt">&gt;</span>9<span class="nt">&lt;/span&gt;</span>
 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-pill bg-green"</span><span class="nt">&gt;</span>10<span class="nt">&lt;/span&gt;</span>
 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-pill bg-teal"</span><span class="nt">&gt;</span>11<span class="nt">&lt;/span&gt;</span>
-<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-pill bg-cyan"</span><span class="nt">&gt;</span>12<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-pill bg-cyan"</span><span class="nt">&gt;</span>12<span class="nt">&lt;/span&gt;</span></code></pre>
-<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge badge-pill bg-gray"</span><span class="nt">&gt;</span>13<span class="nt">&lt;/span&gt;</span></code></pre>
                       </figure>
                     </div>
                     <h2 id="soft-color-badges">Soft color badges</h2>
@@ -728,7 +672,6 @@
                         <span class="badge bg-green-lt">green</span>
                         <span class="badge bg-teal-lt">teal</span>
                         <span class="badge bg-cyan-lt">cyan</span>
-                        <span class="badge bg-gray-lt">gray</span>
                       </div>
                     </div>
                     <div class="example-code">
@@ -744,12 +687,11 @@
 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-lime-lt"</span><span class="nt">&gt;</span>lime<span class="nt">&lt;/span&gt;</span>
 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-green-lt"</span><span class="nt">&gt;</span>green<span class="nt">&lt;/span&gt;</span>
 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-teal-lt"</span><span class="nt">&gt;</span>teal<span class="nt">&lt;/span&gt;</span>
-<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-cyan-lt"</span><span class="nt">&gt;</span>cyan<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-cyan-lt"</span><span class="nt">&gt;</span>cyan<span class="nt">&lt;/span&gt;</span></code></pre>
-<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-gray-lt"</span><span class="nt">&gt;</span>gray<span class="nt">&lt;/span&gt;</span></code></pre>
                       </figure>
                     </div>
                     <h2 id="links">Links</h2>
-                    <p>Place the badge within an <code class="highlighter-rouge">&lt;a&gt;</code> element if you want it to perform the function of a link and make it clickable.</p>
+                    <p>Place the badge within an <code class="language-plaintext highlighter-rouge">&lt;a&gt;</code> element if you want it to perform the function of a link and make it clickable.</p>
                     <div class="example no_toc_section example-centered">
                       <div class="example-content">
                         <a href="#" class="badge bg-blue">blue</a>
@@ -764,7 +706,6 @@
                         <a href="#" class="badge bg-green">green</a>
                         <a href="#" class="badge bg-teal">teal</a>
                         <a href="#" class="badge bg-cyan">cyan</a>
-                        <a href="#" class="badge bg-gray">gray</a>
                       </div>
                     </div>
                     <div class="example-code">
@@ -780,8 +721,7 @@
 <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge bg-lime"</span><span class="nt">&gt;</span>lime<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">"badge bg-green"</span><span class="nt">&gt;</span>green<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">"badge bg-teal"</span><span class="nt">&gt;</span>teal<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">"badge bg-cyan"</span><span class="nt">&gt;</span>cyan<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">"badge bg-cyan"</span><span class="nt">&gt;</span>cyan<span class="nt">&lt;/a&gt;</span></code></pre>
-<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge bg-gray"</span><span class="nt">&gt;</span>gray<span class="nt">&lt;/a&gt;</span></code></pre>
                       </figure>
                     </div>
                     <h2 id="empty-badges">Empty badges</h2>
@@ -800,7 +740,6 @@
                         <a href="#" class="badge bg-green"></a>
                         <a href="#" class="badge bg-teal"></a>
                         <a href="#" class="badge bg-cyan"></a>
-                        <a href="#" class="badge bg-gray"></a>
                       </div>
                     </div>
                     <div class="example-code">
@@ -816,94 +755,83 @@
 <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge bg-lime"</span><span class="nt">&gt;&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">"badge bg-green"</span><span class="nt">&gt;&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">"badge bg-teal"</span><span class="nt">&gt;&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">"badge bg-cyan"</span><span class="nt">&gt;&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">"badge bg-cyan"</span><span class="nt">&gt;&lt;/a&gt;</span></code></pre>
-<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"badge bg-gray"</span><span class="nt">&gt;&lt;/a&gt;</span></code></pre>
                       </figure>
                     </div>
-                    <h3 id="badge-add-ons">Badge add-ons</h3>
+                    <h2 id="badge-avatars">Badge avatars</h2>
-                    <p>Add the <code class="highlighter-rouge">.badge-addon</code> class to create an add-on that will customize your badge and make it more noticeable. You can use any color variants and combine them as you see fit.</p>
+                    <p>Create the <code class="language-plaintext highlighter-rouge">.badge-avatar</code> class to add an avatar that will make a badge more personalized.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
-                        <span class="badge bg-green">
+                        <span class="badge">
-                          task
+                          <span class="avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
-                          <span class="badge-addon ">finished</span>
-                        </span>
-                        <span class="badge bg-purple">
-                          bundle
-                          <span class="badge-addon ">passing</span>
-                        </span>
-                        <span class="badge bg-red-lt">
-                          CSS gzip size
-                          <span class="badge-addon bg-red">20.9kB</span>
-                        </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">"badge bg-green"</span><span class="nt">&gt;</span>
-  task
-  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge-addon "</span><span class="nt">&gt;</span>finished<span class="nt">&lt;/span&gt;</span>
-<span class="nt">&lt;/span&gt;</span>
-<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-purple"</span><span class="nt">&gt;</span>
-  bundle
-  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge-addon "</span><span class="nt">&gt;</span>passing<span class="nt">&lt;/span&gt;</span>
-<span class="nt">&lt;/span&gt;</span>
-<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-red-lt"</span><span class="nt">&gt;</span>
-  CSS gzip size
-  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge-addon bg-red"</span><span class="nt">&gt;</span>20.9kB<span class="nt">&lt;/span&gt;</span>
-<span class="nt">&lt;/span&gt;</span></code></pre>
-                      </figure>
-                    </div>
-                    <h3 id="badge-avatars">Badge avatars</h3>
-                    <p>Create the <code class="highlighter-rouge">.badge-avatar</code> class to add an avatar that will make a badge more personalized.</p>
-                    <div class="example no_toc_section">
-                      <div class="example-content">
-                        <span class="badge bg-blue">
-                          <span class="badge-avatar" style="background-image: url(../static/avatars/000m.jpg)"></span>
                           Paweł Kuna
                         </span>
-                        <span class="badge bg-blue">
+                        <span class="badge">
-                          <span class="badge-avatar" style="background-image: url(../)">JL</span>
+                          <span class="avatar" style="background-image: url(../)">JL</span>
                           Jeffie Lewzey
                         </span>
-                        <span class="badge bg-blue">
+                        <span class="badge">
-                          <span class="badge-avatar" style="background-image: url(../static/avatars/002m.jpg)"></span>
+                          <span class="avatar" style="background-image: url(../static/avatars/002m.jpg)"></span>
                           Mallory Hulme
                         </span>
-                        <span class="badge bg-blue">
+                        <span class="badge">
-                          <span class="badge-avatar" style="background-image: url(../static/avatars/003m.jpg)"></span>
+                          <span class="avatar" style="background-image: url(../static/avatars/003m.jpg)"></span>
                           Dunn Slane
                         </span>
-                        <span class="badge bg-blue">
+                        <span class="badge">
-                          <span class="badge-avatar" style="background-image: url(../static/avatars/000f.jpg)"></span>
+                          <span class="avatar" style="background-image: url(../static/avatars/000f.jpg)"></span>
                           Emmy Levet
                         </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">"badge bg-blue"</span><span class="nt">&gt;</span>
+                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge"</span><span class="nt">&gt;</span>
-  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge-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"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
   Paweł Kuna
 <span class="nt">&lt;/span&gt;</span>
-<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-blue"</span><span class="nt">&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge"</span><span class="nt">&gt;</span>
-  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge-avatar"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</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;</span>JL<span class="nt">&lt;/span&gt;</span>
   Jeffie Lewzey
 <span class="nt">&lt;/span&gt;</span>
-<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-blue"</span><span class="nt">&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge"</span><span class="nt">&gt;</span>
-  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge-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"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
   Mallory Hulme
 <span class="nt">&lt;/span&gt;</span>
-<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-blue"</span><span class="nt">&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge"</span><span class="nt">&gt;</span>
-  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge-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"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
   Dunn Slane
 <span class="nt">&lt;/span&gt;</span>
-<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-blue"</span><span class="nt">&gt;</span>
+<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge"</span><span class="nt">&gt;</span>
-  <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge-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"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
   Emmy Levet
 <span class="nt">&lt;/span&gt;</span></code></pre>
                       </figure>
                     </div>
+                    <h2 id="button-with-badge">Button with badge</h2>
+                    <p>Badges can be used as part of links or buttons to provide a counter.</p>
+                    <div class="example no_toc_section">
+                      <div class="example-content">
+                        <div class="btn-list">
+                          <button type="button" class="btn">
+                            Notifications <span class="badge bg-red ml-2">4</span>
+                          </button>
+                          <button type="button" class="btn">
+                            Notifications <span class="badge bg-green ml-2">4</span>
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="example-code">
+                      <figure class="highlight">
+                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>
+  Notifications <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-red ml-2"</span><span class="nt">&gt;</span>4<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;/button&gt;</span>
+<span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>
+  Notifications <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-green ml-2"</span><span class="nt">&gt;</span>4<span class="nt">&lt;/span&gt;</span>
+<span class="nt">&lt;/button&gt;</span></code></pre>
+                      </figure>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -921,9 +849,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="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.9</a>
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
@@ -932,7 +867,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.9
-* @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 {
@@ -56,16 +44,12 @@
             <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,11 @@
                         Charts
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../tables.html" >
                         Tables
@@ -218,6 +188,11 @@
                         Lists
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs-index.html" >
+                        Docs index
+                      </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 +209,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 +227,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
@@ -315,17 +279,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 +330,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
@@ -386,14 +359,7 @@
                 </li>
                 <li class="nav-item active 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">
+                    <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
@@ -450,11 +416,6 @@
                         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
@@ -572,11 +533,7 @@
                 <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,12 +542,13 @@
             </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">
+              <div class="col">
                 <h2 class="page-title">
                   Documentation
                 </h2>
@@ -599,11 +557,9 @@
           </div>
           <div class="row justify-content-center">
             <div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
-              <div class="sticky-top">
+              <div class="sticky-top lh-lg py-4">
-                <a href="https://github.com/tabler/tabler" class="btn btn-github mb-6 btn-block" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
-                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor"><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"/></svg>
-                    <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"/>
-                  </svg>
                   Browse source code
                 </a>
                 <h5 class="subheader">On this page</h5>
@@ -619,22 +575,17 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div class="d-flex">
-                      <h2 class="h1 mt-0 mb-3">Breadcrumb</h2>
+                      <h1 class="h2 mt-0 mb-3">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>
                     <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">
@@ -654,7 +605,7 @@
                       </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">
@@ -710,7 +661,7 @@
                       </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">
@@ -746,9 +697,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="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.9</a>
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
@@ -757,7 +715,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/cards.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.9
-* @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>Cards - Documentation - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <title>Cards - 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="Cards are flexible user interface elements, which help organize content into meaningful sections and make it easier to display on different screen sizes. Cards contain various smaller components, such as images, text, links and buttons and may act as an entry to more detailed information, helping users scan the page quickly and find the most relevant content."/>
-    <!-- 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 {
@@ -56,16 +44,12 @@
             <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,11 @@
                         Charts
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../tables.html" >
                         Tables
@@ -218,6 +188,11 @@
                         Lists
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs-index.html" >
+                        Docs index
+                      </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 +209,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 +227,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
@@ -315,17 +279,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 +330,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
@@ -386,14 +359,7 @@
                 </li>
                 <li class="nav-item active 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">
+                    <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
@@ -450,11 +416,6 @@
                         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
@@ -572,11 +533,7 @@
                 <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,12 +542,13 @@
             </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">
+              <div class="col">
                 <h2 class="page-title">
                   Documentation
                 </h2>
@@ -599,11 +557,9 @@
           </div>
           <div class="row justify-content-center">
             <div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
-              <div class="sticky-top">
+              <div class="sticky-top lh-lg py-4">
-                <a href="https://github.com/tabler/tabler" class="btn btn-github mb-6 btn-block" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
-                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor"><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"/></svg>
-                    <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"/>
-                  </svg>
                   Browse source code
                 </a>
                 <h5 class="subheader">On this page</h5>
@@ -626,22 +582,17 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div class="d-flex">
-                      <h2 class="h1 mt-0 mb-3">Cards</h2>
+                      <h1 class="h2 mt-0 mb-3">Cards</h1>
                       <p class="ml-auto">
                         <a href="https://getbootstrap.com/docs/4.4/components/card/" 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>Cards are flexible user interface elements, which help organize content into meaningful sections and make it easier to display on different screen sizes. Cards contain various smaller components, such as images, text, links and buttons and may act as an entry to more detailed information, helping users scan the page quickly and find the most relevant content.</p>
                     <h2 id="default-card">Default card</h2>
-                    <p>Use the <code class="highlighter-rouge">.card</code> and <code class="highlighter-rouge">.card-body</code> classes to create a card and use it as the basis for a more advanced card design. A card is a perfect way to organize content and make it look neat and tidy.</p>
+                    <p>Use the <code class="language-plaintext highlighter-rouge">.card</code> and <code class="language-plaintext highlighter-rouge">.card-body</code> classes to create a card and use it as the basis for a more advanced card design. A card is a perfect way to organize content and make it look neat and tidy.</p>
                     <div class="example no_toc_section example-bg">
                       <div class="example-content">
                         <div class="example-column example-column-1">
@@ -663,8 +614,8 @@
                       </figure>
                     </div>
                     <h2 id="card-padding">Card padding</h2>
-                    <p>You can change the padding of a newly created card. To do it, use the <code class="highlighter-rouge">.card-sm</code>, <code class="highlighter-rouge">.card-md</code> or <code class="highlighter-rouge">.card-lg</code> classes.</p>
+                    <p>You can change the padding of a newly created card. To do it, use the <code class="language-plaintext highlighter-rouge">.card-sm</code>, <code class="language-plaintext highlighter-rouge">.card-md</code> or <code class="language-plaintext highlighter-rouge">.card-lg</code> classes.</p>
-                    <p>Cards with the <code class="highlighter-rouge">.card-sm</code> class are well suited for small items such as snippets, etc., while the <code class="highlighter-rouge">.card-lg</code> class can be used for large blocks of text. Padding will be automatically reduced on small devices, to fit the screen size.</p>
+                    <p>Cards with the <code class="language-plaintext highlighter-rouge">.card-sm</code> class are well suited for small items such as snippets, etc., while the <code class="language-plaintext highlighter-rouge">.card-lg</code> class can be used for large blocks of text. Padding will be automatically reduced on small devices, to fit the screen size.</p>
                     <div class="example no_toc_section example-bg">
                       <div class="example-content">
                         <div class="example-column example-column-2">
@@ -716,7 +667,7 @@
                       </figure>
                     </div>
                     <h2 id="card-with-title">Card with title</h2>
-                    <p>Add a title to your card by including the <code class="highlighter-rouge">.card-title</code> class within <code class="highlighter-rouge">.card-body</code>. You can also place the title inside the <code class="highlighter-rouge">.card-header</code> element to separate the title from the content with a horizontal line.</p>
+                    <p>Add a title to your card by including the <code class="language-plaintext highlighter-rouge">.card-title</code> class within <code class="language-plaintext highlighter-rouge">.card-body</code>. You can also place the title inside the <code class="language-plaintext highlighter-rouge">.card-header</code> element to separate the title from the content with a horizontal line.</p>
                     <div class="example no_toc_section example-bg">
                       <div class="example-content">
                         <div class="example-column example-column-1">
@@ -761,7 +712,7 @@
                       <div class="example-content">
                         <div class="example-column example-column-1">
                           <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 title and image</h3>
                               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
@@ -774,7 +725,7 @@
                     <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">"card"</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">"card-img-top"</span> <span class="na">alt=</span><span class="s">"Card top image"</span><span class="nt">&gt;</span>
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-img-top img-responsive img-responsive-16by9"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/div&gt;</span>
   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
     <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Card with title and image<span class="nt">&lt;/h3&gt;</span>
     <span class="nt">&lt;p&gt;</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
@@ -784,7 +735,7 @@
                       </figure>
                     </div>
                     <h2 id="blog-post-card">Blog post card</h2>
-                    <p>Add an image to your blog post card to make it eye-catching. You can do it by adding the image in the <code class="highlighter-rouge">.card-img-top</code> class. Thanks to the <code class="highlighter-rouge">.d-flex</code> and <code class="highlighter-rouge">.flex-column</code> classes within <code class="highlighter-rouge">.card-body</code>, the author details will be displayed at the bottom of the card.</p>
+                    <p>Add an image to your blog post card to make it eye-catching. You can do it by adding the image in the <code class="language-plaintext highlighter-rouge">.card-img-top</code> class. Thanks to the <code class="language-plaintext highlighter-rouge">.d-flex</code> and <code class="language-plaintext highlighter-rouge">.flex-column</code> classes within <code class="language-plaintext highlighter-rouge">.card-body</code>, the author details will be displayed at the bottom of the card.</p>
                     <div class="example no_toc_section example-bg">
                       <div class="example-content">
                         <div class="example-column example-column-1">
@@ -803,10 +754,7 @@
                                 </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">
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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>
-                                      <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>
@@ -841,7 +789,7 @@
                       </figure>
                     </div>
                     <h2 id="row-deck">Row deck</h2>
-                    <p>Add the <code class="highlighter-rouge">.row-deck</code> class to <code class="highlighter-rouge">.row</code>, if you want to display several cards next to one another. Thanks to that, they will all have the same height.</p>
+                    <p>Add the <code class="language-plaintext highlighter-rouge">.row-deck</code> class to <code class="language-plaintext highlighter-rouge">.row</code>, if you want to display several cards next to one another. Thanks to that, they will all have the same height.</p>
                     <div class="example no_toc_section example-bg">
                       <div class="example-content">
                         <div class="example-column example-column-2">
@@ -887,7 +835,7 @@
                       </figure>
                     </div>
                     <h2 id="post-card-with-aside-image">Post card with aside image</h2>
-                    <p>You can also add an image on the left side of the card. To do it, add the <code class="highlighter-rouge">.card-aside</code> class to the element with the <code class="highlighter-rouge">.card</code> class. Then add the image in the <code class="highlighter-rouge">.card-aside-column</code> element and it will be automatically centered and scaled to the right size.</p>
+                    <p>You can also add an image on the left side of the card. To do it, add the <code class="language-plaintext highlighter-rouge">.card-aside</code> class to the element with the <code class="language-plaintext highlighter-rouge">.card</code> class. Then add the image in the <code class="language-plaintext highlighter-rouge">.card-aside-column</code> element and it will be automatically centered and scaled to the right size.</p>
                     <div class="example no_toc_section example-bg">
                       <div class="example-content">
                         <div class="example-column example-column-2">
@@ -910,10 +858,7 @@
                                     </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">
+                                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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>
-                                          <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>
@@ -1012,7 +957,7 @@
                       </figure>
                     </div>
                     <h2 id="stacked-card">Stacked card</h2>
-                    <p>Use the <code class="highlighter-rouge">card-stacked</code> class to stack up multiple cards, if you want to save screen space or create a visually appealing effect.</p>
+                    <p>Use the <code class="language-plaintext highlighter-rouge">card-stacked</code> class to stack up multiple cards, if you want to save screen space or create a visually appealing effect.</p>
                     <div class="example no_toc_section example-bg">
                       <div class="example-content">
                         <div class="example-column example-column-1">
@@ -1162,9 +1107,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="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.9</a>
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
@@ -1173,7 +1125,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.9
-* @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 {
@@ -56,16 +44,12 @@
             <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,11 @@
                         Charts
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../tables.html" >
                         Tables
@@ -218,6 +188,11 @@
                         Lists
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs-index.html" >
+                        Docs index
+                      </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 +209,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 +227,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
@@ -315,17 +279,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 +330,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
@@ -386,14 +359,7 @@
                 </li>
                 <li class="nav-item active 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">
+                    <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
@@ -450,11 +416,6 @@
                         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
@@ -572,11 +533,7 @@
                 <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,12 +542,13 @@
             </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">
+              <div class="col">
                 <h2 class="page-title">
                   Documentation
                 </h2>
@@ -599,11 +557,9 @@
           </div>
           <div class="row justify-content-center">
             <div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
-              <div class="sticky-top">
+              <div class="sticky-top lh-lg py-4">
-                <a href="https://github.com/tabler/tabler" class="btn btn-github mb-6 btn-block" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
-                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor"><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"/></svg>
-                    <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"/>
-                  </svg>
                   Browse source code
                 </a>
                 <h5 class="subheader">On this page</h5>
@@ -617,15 +573,10 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div class="d-flex">
-                      <h2 class="h1 mt-0 mb-3">Carousel</h2>
+                      <h1 class="h2 mt-0 mb-3">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>
@@ -663,11 +614,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 +653,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>
@@ -728,9 +679,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="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.9</a>
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
@@ -739,7 +697,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.9
-* @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 {
@@ -55,16 +43,12 @@
             <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,11 @@
                         Charts
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../tables.html" >
                         Tables
@@ -217,6 +187,11 @@
                         Lists
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs-index.html" >
+                        Docs index
+                      </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 +208,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 +226,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
@@ -314,17 +278,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 +329,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
@@ -385,14 +358,7 @@
                 </li>
                 <li class="nav-item active 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">
+                    <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
@@ -449,11 +415,6 @@
                         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
@@ -571,11 +532,7 @@
                 <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 +541,13 @@
             </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">
+              <div class="col">
                 <h2 class="page-title">
                   Documentation
                 </h2>
@@ -598,11 +556,9 @@
           </div>
           <div class="row justify-content-center">
             <div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
-              <div class="sticky-top">
+              <div class="sticky-top lh-lg py-4">
-                <a href="https://github.com/tabler/tabler" class="btn btn-github mb-6 btn-block" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
-                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor"><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"/></svg>
-                    <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"/>
-                  </svg>
                   Browse source code
                 </a>
                 <h5 class="subheader">On this page</h5>
@@ -616,7 +572,7 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div class="d-flex">
-                      <h2 class="h1 mt-0 mb-3">Charts</h2>
+                      <h1 class="h2 mt-0 mb-3">Charts</h1>
                     </div>
                     <h2 id="default-markup">Default markup</h2>
                   </div>
@@ -636,9 +592,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="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.9</a>
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
@@ -647,7 +610,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/colors.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.9
-* @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>Colors - Documentation - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <title>Colors - 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 choice of colors for a website or app interface has an big influence on how users interact with the product and what decisions they make. Harmonic colors can contribute to a nice first impression and encourage users to engage with your product, so it&#39;s a very important aspect of a successful design, which needs to be well thought out."/>
-    <!-- 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 {
@@ -56,16 +44,12 @@
             <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,11 @@
                         Charts
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../tables.html" >
                         Tables
@@ -218,6 +188,11 @@
                         Lists
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs-index.html" >
+                        Docs index
+                      </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 +209,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 +227,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
@@ -315,17 +279,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 +330,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
@@ -386,14 +359,7 @@
                 </li>
                 <li class="nav-item active 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">
+                    <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
@@ -450,11 +416,6 @@
                         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
@@ -572,11 +533,7 @@
                 <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,12 +542,13 @@
             </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">
+              <div class="col">
                 <h2 class="page-title">
                   Documentation
                 </h2>
@@ -599,11 +557,9 @@
           </div>
           <div class="row justify-content-center">
             <div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
-              <div class="sticky-top">
+              <div class="sticky-top lh-lg py-4">
-                <a href="https://github.com/tabler/tabler" class="btn btn-github mb-6 btn-block" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
-                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor"><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"/></svg>
-                    <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"/>
-                  </svg>
                   Browse source code
                 </a>
                 <h5 class="subheader">On this page</h5>
@@ -618,15 +574,10 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div class="d-flex">
-                      <h2 class="h1 mt-0 mb-3">Colors</h2>
+                      <h1 class="h2 mt-0 mb-3">Colors</h1>
                       <p class="ml-auto">
                         <a href="https://getbootstrap.com/docs/4.4/utilities/colors/" 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>
@@ -636,246 +587,228 @@
                     <p>Choose one of the available colors from the basic color palette and make your design attractive for users. You can use the colors to customize the design of components, indicate different states or suggest actions you want users to take.</p>
                     <div class="example">
                       <div class="mb-n3">
-                        <div class="row row-sm mb-3 align-items-center">
+                        <div class="row g-2 mb-3 align-items-center">
                           <div class="col-auto">
-                            <div class="stamp bg-blue text-white">B</div>
+                            <div class="avatar bg-blue text-white">B</div>
                           </div>
                           <div class="col">
                             <span class="font-weight-semibold">Blue</span><br />
                             <code>bg-blue</code>
                           </div>
                         </div>
-                        <div class="row row-sm mb-3 align-items-center">
+                        <div class="row g-2 mb-3 align-items-center">
                           <div class="col-auto">
-                            <div class="stamp bg-azure text-white">A</div>
+                            <div class="avatar bg-azure text-white">A</div>
                           </div>
                           <div class="col">
                             <span class="font-weight-semibold">Azure</span><br />
                             <code>bg-azure</code>
                           </div>
                         </div>
-                        <div class="row row-sm mb-3 align-items-center">
+                        <div class="row g-2 mb-3 align-items-center">
                           <div class="col-auto">
-                            <div class="stamp bg-indigo text-white">I</div>
+                            <div class="avatar bg-indigo text-white">I</div>
                           </div>
                           <div class="col">
                             <span class="font-weight-semibold">Indigo</span><br />
                             <code>bg-indigo</code>
                           </div>
                         </div>
-                        <div class="row row-sm mb-3 align-items-center">
+                        <div class="row g-2 mb-3 align-items-center">
                           <div class="col-auto">
-                            <div class="stamp bg-purple text-white">P</div>
+                            <div class="avatar bg-purple text-white">P</div>
                           </div>
                           <div class="col">
                             <span class="font-weight-semibold">Purple</span><br />
                             <code>bg-purple</code>
                           </div>
                         </div>
-                        <div class="row row-sm mb-3 align-items-center">
+                        <div class="row g-2 mb-3 align-items-center">
                           <div class="col-auto">
-                            <div class="stamp bg-pink text-white">P</div>
+                            <div class="avatar bg-pink text-white">P</div>
                           </div>
                           <div class="col">
                             <span class="font-weight-semibold">Pink</span><br />
                             <code>bg-pink</code>
                           </div>
                         </div>
-                        <div class="row row-sm mb-3 align-items-center">
+                        <div class="row g-2 mb-3 align-items-center">
                           <div class="col-auto">
-                            <div class="stamp bg-red text-white">R</div>
+                            <div class="avatar bg-red text-white">R</div>
                           </div>
                           <div class="col">
                             <span class="font-weight-semibold">Red</span><br />
                             <code>bg-red</code>
                           </div>
                         </div>
-                        <div class="row row-sm mb-3 align-items-center">
+                        <div class="row g-2 mb-3 align-items-center">
                           <div class="col-auto">
-                            <div class="stamp bg-orange text-white">O</div>
+                            <div class="avatar bg-orange text-white">O</div>
                           </div>
                           <div class="col">
                             <span class="font-weight-semibold">Orange</span><br />
                             <code>bg-orange</code>
                           </div>
                         </div>
-                        <div class="row row-sm mb-3 align-items-center">
+                        <div class="row g-2 mb-3 align-items-center">
                           <div class="col-auto">
-                            <div class="stamp bg-yellow text-white">Y</div>
+                            <div class="avatar bg-yellow text-white">Y</div>
                           </div>
                           <div class="col">
                             <span class="font-weight-semibold">Yellow</span><br />
                             <code>bg-yellow</code>
                           </div>
                         </div>
-                        <div class="row row-sm mb-3 align-items-center">
+                        <div class="row g-2 mb-3 align-items-center">
                           <div class="col-auto">
-                            <div class="stamp bg-lime text-white">L</div>
+                            <div class="avatar bg-lime text-white">L</div>
                           </div>
                           <div class="col">
                             <span class="font-weight-semibold">Lime</span><br />
                             <code>bg-lime</code>
                           </div>
                         </div>
-                        <div class="row row-sm mb-3 align-items-center">
+                        <div class="row g-2 mb-3 align-items-center">
                           <div class="col-auto">
-                            <div class="stamp bg-green text-white">G</div>
+                            <div class="avatar bg-green text-white">G</div>
                           </div>
                           <div class="col">
                             <span class="font-weight-semibold">Green</span><br />
                             <code>bg-green</code>
                           </div>
                         </div>
-                        <div class="row row-sm mb-3 align-items-center">
+                        <div class="row g-2 mb-3 align-items-center">
                           <div class="col-auto">
-                            <div class="stamp bg-teal text-white">T</div>
+                            <div class="avatar bg-teal text-white">T</div>
                           </div>
                           <div class="col">
                             <span class="font-weight-semibold">Teal</span><br />
                             <code>bg-teal</code>
                           </div>
                         </div>
-                        <div class="row row-sm mb-3 align-items-center">
+                        <div class="row g-2 mb-3 align-items-center">
                           <div class="col-auto">
-                            <div class="stamp bg-cyan text-white">C</div>
+                            <div class="avatar bg-cyan text-white">C</div>
                           </div>
                           <div class="col">
                             <span class="font-weight-semibold">Cyan</span><br />
                             <code>bg-cyan</code>
                           </div>
                         </div>
-                        <div class="row row-sm mb-3 align-items-center">
-                          <div class="col-auto">
-                            <div class="stamp bg-gray text-white">G</div>
-                          </div>
-                          <div class="col">
-                            <span class="font-weight-semibold">Gray</span><br />
-                            <code>bg-gray</code>
-                          </div>
-                        </div>
                       </div>
                     </div>
                     <h2 id="light-colors">Light colors</h2>
                     <p>All available colors can come in pastel shades, which are perfect for more subtle designs and can be easily combined with the basic palette to create eye-cathing designs.</p>
                     <div class="example">
                       <div class="mb-n3">
-                        <div class="row row-sm mb-3 align-items-center">
+                        <div class="row g-2 mb-3 align-items-center">
                           <div class="col-auto">
-                            <div class="stamp bg-blue-lt">B</div>
+                            <div class="avatar bg-blue-lt">B</div>
                           </div>
                           <div class="col">
                             <span class="font-weight-semibold">Blue</span><br />
                             <code>bg-blue-lt</code>
                           </div>
                         </div>
-                        <div class="row row-sm mb-3 align-items-center">
+                        <div class="row g-2 mb-3 align-items-center">
                           <div class="col-auto">
-                            <div class="stamp bg-azure-lt">A</div>
+                            <div class="avatar bg-azure-lt">A</div>
                           </div>
                           <div class="col">
                             <span class="font-weight-semibold">Azure</span><br />
                             <code>bg-azure-lt</code>
                           </div>
                         </div>
-                        <div class="row row-sm mb-3 align-items-center">
+                        <div class="row g-2 mb-3 align-items-center">
                           <div class="col-auto">
-                            <div class="stamp bg-indigo-lt">I</div>
+                            <div class="avatar bg-indigo-lt">I</div>
                           </div>
                           <div class="col">
                             <span class="font-weight-semibold">Indigo</span><br />
                             <code>bg-indigo-lt</code>
                           </div>
                         </div>
-                        <div class="row row-sm mb-3 align-items-center">
+                        <div class="row g-2 mb-3 align-items-center">
                           <div class="col-auto">
-                            <div class="stamp bg-purple-lt">P</div>
+                            <div class="avatar bg-purple-lt">P</div>
                           </div>
                           <div class="col">
                             <span class="font-weight-semibold">Purple</span><br />
                             <code>bg-purple-lt</code>
                           </div>
                         </div>
-                        <div class="row row-sm mb-3 align-items-center">
+                        <div class="row g-2 mb-3 align-items-center">
                           <div class="col-auto">
-                            <div class="stamp bg-pink-lt">P</div>
+                            <div class="avatar bg-pink-lt">P</div>
                           </div>
                           <div class="col">
                             <span class="font-weight-semibold">Pink</span><br />
                             <code>bg-pink-lt</code>
                           </div>
                         </div>
-                        <div class="row row-sm mb-3 align-items-center">
+                        <div class="row g-2 mb-3 align-items-center">
                           <div class="col-auto">
-                            <div class="stamp bg-red-lt">R</div>
+                            <div class="avatar bg-red-lt">R</div>
                           </div>
                           <div class="col">
                             <span class="font-weight-semibold">Red</span><br />
                             <code>bg-red-lt</code>
                           </div>
                         </div>
-                        <div class="row row-sm mb-3 align-items-center">
+                        <div class="row g-2 mb-3 align-items-center">
                           <div class="col-auto">
-                            <div class="stamp bg-orange-lt">O</div>
+                            <div class="avatar bg-orange-lt">O</div>
                           </div>
                           <div class="col">
                             <span class="font-weight-semibold">Orange</span><br />
                             <code>bg-orange-lt</code>
                           </div>
                         </div>
-                        <div class="row row-sm mb-3 align-items-center">
+                        <div class="row g-2 mb-3 align-items-center">
                           <div class="col-auto">
-                            <div class="stamp bg-yellow-lt">Y</div>
+                            <div class="avatar bg-yellow-lt">Y</div>
                           </div>
                           <div class="col">
                             <span class="font-weight-semibold">Yellow</span><br />
                             <code>bg-yellow-lt</code>
                           </div>
                         </div>
-                        <div class="row row-sm mb-3 align-items-center">
+                        <div class="row g-2 mb-3 align-items-center">
                           <div class="col-auto">
-                            <div class="stamp bg-lime-lt">L</div>
+                            <div class="avatar bg-lime-lt">L</div>
                           </div>
                           <div class="col">
                             <span class="font-weight-semibold">Lime</span><br />
                             <code>bg-lime-lt</code>
                           </div>
                         </div>
-                        <div class="row row-sm mb-3 align-items-center">
+                        <div class="row g-2 mb-3 align-items-center">
                           <div class="col-auto">
-                            <div class="stamp bg-green-lt">G</div>
+                            <div class="avatar bg-green-lt">G</div>
                           </div>
                           <div class="col">
                             <span class="font-weight-semibold">Green</span><br />
                             <code>bg-green-lt</code>
                           </div>
                         </div>
-                        <div class="row row-sm mb-3 align-items-center">
+                        <div class="row g-2 mb-3 align-items-center">
                           <div class="col-auto">
-                            <div class="stamp bg-teal-lt">T</div>
+                            <div class="avatar bg-teal-lt">T</div>
                           </div>
                           <div class="col">
                             <span class="font-weight-semibold">Teal</span><br />
                             <code>bg-teal-lt</code>
                           </div>
                         </div>
-                        <div class="row row-sm mb-3 align-items-center">
+                        <div class="row g-2 mb-3 align-items-center">
                           <div class="col-auto">
-                            <div class="stamp bg-cyan-lt">C</div>
+                            <div class="avatar bg-cyan-lt">C</div>
                           </div>
                           <div class="col">
                             <span class="font-weight-semibold">Cyan</span><br />
                             <code>bg-cyan-lt</code>
                           </div>
                         </div>
-                        <div class="row row-sm mb-3 align-items-center">
-                          <div class="col-auto">
-                            <div class="stamp bg-gray-lt">G</div>
-                          </div>
-                          <div class="col">
-                            <span class="font-weight-semibold">Gray</span><br />
-                            <code>bg-gray-lt</code>
-                          </div>
-                        </div>
                       </div>
                     </div>
                   </div>
@@ -895,9 +828,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="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.9</a>
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
@@ -906,7 +846,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.9
-* @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 {
@@ -56,16 +44,12 @@
             <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,11 @@
                         Charts
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../tables.html" >
                         Tables
@@ -218,6 +188,11 @@
                         Lists
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs-index.html" >
+                        Docs index
+                      </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 +209,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 +227,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
@@ -315,17 +279,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 +330,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
@@ -386,14 +359,7 @@
                 </li>
                 <li class="nav-item active 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">
+                    <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
@@ -450,11 +416,6 @@
                         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
@@ -572,11 +533,7 @@
                 <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,12 +542,13 @@
             </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">
+              <div class="col">
                 <h2 class="page-title">
                   Documentation
                 </h2>
@@ -599,11 +557,9 @@
           </div>
           <div class="row justify-content-center">
             <div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
-              <div class="sticky-top">
+              <div class="sticky-top lh-lg py-4">
-                <a href="https://github.com/tabler/tabler" class="btn btn-github mb-6 btn-block" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
-                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor"><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"/></svg>
-                    <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"/>
-                  </svg>
                   Browse source code
                 </a>
                 <h5 class="subheader">On this page</h5>
@@ -626,11 +582,11 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div class="d-flex">
-                      <h2 class="h1 mt-0 mb-3">Countup</h2>
+                      <h1 class="h2 mt-0 mb-3">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>
                     <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 +598,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 +614,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 +629,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 +647,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 +661,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 +675,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 +693,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 +711,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 +727,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>
@@ -815,9 +771,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="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.9</a>
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
@@ -826,7 +789,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.9
-* @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 {
@@ -56,16 +44,12 @@
             <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,11 @@
                         Charts
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../tables.html" >
                         Tables
@@ -218,6 +188,11 @@
                         Lists
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs-index.html" >
+                        Docs index
+                      </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 +209,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 +227,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
@@ -315,17 +279,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 +330,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
@@ -386,14 +359,7 @@
                 </li>
                 <li class="nav-item active 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">
+                    <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
@@ -450,11 +416,6 @@
                         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
@@ -572,11 +533,7 @@
                 <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,12 +542,13 @@
             </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">
+              <div class="col">
                 <h2 class="page-title">
                   Documentation
                 </h2>
@@ -599,11 +557,9 @@
           </div>
           <div class="row justify-content-center">
             <div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
-              <div class="sticky-top">
+              <div class="sticky-top lh-lg py-4">
-                <a href="https://github.com/tabler/tabler" class="btn btn-github mb-6 btn-block" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
-                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor"><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"/></svg>
-                    <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"/>
-                  </svg>
                   Browse source code
                 </a>
                 <h5 class="subheader">On this page</h5>
@@ -617,18 +573,18 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div class="d-flex">
-                      <h2 class="h1 mt-0 mb-3">Cursors</h2>
+                      <h1 class="h2 mt-0 mb-3">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>
                     <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">
@@ -695,9 +651,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="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.9</a>
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
@@ -706,7 +669,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.9
-* @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 {
@@ -56,16 +44,12 @@
             <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,11 @@
                         Charts
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../tables.html" >
                         Tables
@@ -218,6 +188,11 @@
                         Lists
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs-index.html" >
+                        Docs index
+                      </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 +209,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 +227,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
@@ -315,17 +279,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 +330,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
@@ -386,14 +359,7 @@
                 </li>
                 <li class="nav-item active 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">
+                    <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
@@ -450,11 +416,6 @@
                         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
@@ -572,11 +533,7 @@
                 <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,12 +542,13 @@
             </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">
+              <div class="col">
                 <h2 class="page-title">
                   Documentation
                 </h2>
@@ -599,11 +557,9 @@
           </div>
           <div class="row justify-content-center">
             <div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
-              <div class="sticky-top">
+              <div class="sticky-top lh-lg py-4">
-                <a href="https://github.com/tabler/tabler" class="btn btn-github mb-6 btn-block" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
-                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor"><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"/></svg>
-                    <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"/>
-                  </svg>
                   Browse source code
                 </a>
                 <h5 class="subheader">On this page</h5>
@@ -619,15 +575,10 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div class="d-flex">
-                      <h2 class="h1 mt-0 mb-3">Divider</h2>
+                      <h1 class="h2 mt-0 mb-3">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>
@@ -746,9 +697,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="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.9</a>
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
@@ -757,7 +715,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/dropdowns.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.9
-* @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>Dropdowns - Documentation - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <title>Dropdowns - 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="Use dropdowns to display lists of options or include more positions in a menu without overwhelming users with too many buttons and long lists. Dropdowns facilitate users&#39; interaction with your website or software and make your design look clear."/>
-    <!-- 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 {
@@ -56,16 +44,12 @@
             <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,11 @@
                         Charts
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../tables.html" >
                         Tables
@@ -218,6 +188,11 @@
                         Lists
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs-index.html" >
+                        Docs index
+                      </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 +209,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 +227,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
@@ -315,17 +279,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 +330,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
@@ -386,14 +359,7 @@
                 </li>
                 <li class="nav-item active 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">
+                    <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
@@ -450,11 +416,6 @@
                         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
@@ -572,11 +533,7 @@
                 <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,12 +542,13 @@
             </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">
+              <div class="col">
                 <h2 class="page-title">
                   Documentation
                 </h2>
@@ -599,11 +557,9 @@
           </div>
           <div class="row justify-content-center">
             <div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
-              <div class="sticky-top">
+              <div class="sticky-top lh-lg py-4">
-                <a href="https://github.com/tabler/tabler" class="btn btn-github mb-6 btn-block" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
-                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor"><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"/></svg>
-                    <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"/>
-                  </svg>
                   Browse source code
                 </a>
                 <h5 class="subheader">On this page</h5>
@@ -627,22 +583,17 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div class="d-flex">
-                      <h2 class="h1 mt-0 mb-3">Dropdowns</h2>
+                      <h1 class="h2 mt-0 mb-3">Dropdowns</h1>
                       <p class="ml-auto">
                         <a href="https://getbootstrap.com/docs/4.4/components/dropdowns" 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>Use dropdowns to display lists of options or include more positions in a menu without overwhelming users with too many buttons and long lists. Dropdowns facilitate users' interaction with your website or software and make your design look clear.</p>
                     <h2 id="default-dropdown">Default dropdown</h2>
-                    <p>With small markup changes, you can turn any <code class="highlighter-rouge">.btn</code> into a dropdown toggle and use it to display more options for users to choose from. Start with the default dropdown and then use additional classes to make your dropdown more user-friendly.</p>
+                    <p>With small markup changes, you can turn any <code class="language-plaintext highlighter-rouge">.btn</code> into a dropdown toggle and use it to display more options for users to choose from. Start with the default dropdown and then use additional classes to make your dropdown more user-friendly.</p>
                     <div class="example no_toc_section example-centered">
                       <div class="example-content">
                         <div class="dropdown-menu dropdown-menu-demo">
@@ -788,20 +739,11 @@
                         <div class="dropdown-menu dropdown-menu-demo">
                           <span class="dropdown-header">Dropdown header</span>
                           <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">
+                            <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" 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>
                             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">
+                            <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" fill="none" /><path d="M9 7h-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>
-                              <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>
@@ -923,20 +865,11 @@
                         <div class="dropdown-menu dropdown-menu-demo dropdown-menu-arrow bg-dark text-white">
                           <span class="dropdown-header">Dropdown header</span>
                           <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">
+                            <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" 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>
                             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">
+                            <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" fill="none" /><path d="M9 7h-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>
-                              <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>
@@ -962,7 +895,7 @@
                     <div class="example no_toc_section example-centered">
                       <div class="example-content">
                         <div class="btn-list align-items-start">
-                          <a href="#" class="btn btn-secondary">
+                          <a href="#" class="btn btn-white">
                             Button
                           </a>
                           <div class="dropdown show">
@@ -983,10 +916,7 @@
                                     </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">
+                                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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>
-                                          <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>
@@ -999,7 +929,7 @@
                     </div>
                     <div class="example-code">
                       <figure class="highlight">
-                        <pre><code class="language-html" data-lang="html"><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>
+                        <pre><code class="language-html" data-lang="html"><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-white"</span><span class="nt">&gt;</span>
   Button
 <span class="nt">&lt;/a&gt;</span>
 <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">&gt;</span>
@@ -1047,9 +977,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="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.9</a>
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
@@ -1058,7 +995,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.9
-* @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 {
@@ -56,16 +44,12 @@
             <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,11 @@
                         Charts
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../tables.html" >
                         Tables
@@ -218,6 +188,11 @@
                         Lists
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs-index.html" >
+                        Docs index
+                      </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 +209,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 +227,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
@@ -315,17 +279,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 +330,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
@@ -386,14 +359,7 @@
                 </li>
                 <li class="nav-item active 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">
+                    <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
@@ -450,11 +416,6 @@
                         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
@@ -572,11 +533,7 @@
                 <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,12 +542,13 @@
             </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">
+              <div class="col">
                 <h2 class="page-title">
                   Documentation
                 </h2>
@@ -599,11 +557,9 @@
           </div>
           <div class="row justify-content-center">
             <div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
-              <div class="sticky-top">
+              <div class="sticky-top lh-lg py-4">
-                <a href="https://github.com/tabler/tabler" class="btn btn-github mb-6 btn-block" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
-                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor"><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"/></svg>
-                    <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"/>
-                  </svg>
                   Browse source code
                 </a>
                 <h5 class="subheader">On this page</h5>
@@ -618,7 +574,7 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div class="d-flex">
-                      <h2 class="h1 mt-0 mb-3">Empty states</h2>
+                      <h1 class="h2 mt-0 mb-3">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>
                     <h2 id="default-markup">Default markup</h2>
@@ -627,23 +583,15 @@
                       <div class="example-content">
                         <div class="empty">
                           <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">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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>
                           </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>
@@ -656,7 +604,7 @@
   <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="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>
@@ -675,19 +623,15 @@
                       <div class="example-content">
                         <div class="empty">
                           <div class="empty-icon">
-                            <img src="../static/illustrations/undraw_quitting_time_dm8t.svg" class="h-8 mb-4" alt="" />
+                            <img src="../static/illustrations/undraw_quitting_time_dm8t.svg" height="128" class="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>
@@ -698,9 +642,9 @@
                       <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;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;img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">height=</span><span class="s">"128"</span> <span class="na">class=</span><span class="s">"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>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>
@@ -730,9 +674,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="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.9</a>
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
@@ -741,7 +692,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.9
-* @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 {
@@ -56,16 +44,12 @@
             <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,11 @@
                         Charts
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../tables.html" >
                         Tables
@@ -218,6 +188,11 @@
                         Lists
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs-index.html" >
+                        Docs index
+                      </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 +209,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 +227,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
@@ -315,17 +279,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 +330,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
@@ -386,14 +359,7 @@
                 </li>
                 <li class="nav-item active 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">
+                    <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
@@ -450,11 +416,6 @@
                         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
@@ -572,11 +533,7 @@
                 <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,12 +542,13 @@
             </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">
+              <div class="col">
                 <h2 class="page-title">
                   Documentation
                 </h2>
@@ -599,11 +557,9 @@
           </div>
           <div class="row justify-content-center">
             <div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
-              <div class="sticky-top">
+              <div class="sticky-top lh-lg py-4">
-                <a href="https://github.com/tabler/tabler" class="btn btn-github mb-6 btn-block" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
-                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor"><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"/></svg>
-                    <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"/>
-                  </svg>
                   Browse source code
                 </a>
                 <h5 class="subheader">On this page</h5>
@@ -619,14 +575,14 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div class="d-flex">
-                      <h2 class="h1 mt-0 mb-3">Flags</h2>
+                      <h1 class="h2 mt-0 mb-3">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>
                     <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 +604,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 +613,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>
@@ -2186,9 +2144,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="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.9</a>
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
@@ -2197,7 +2162,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-elements.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.9
-* @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 elements - Documentation - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <title>Form elements - 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,11 @@
     <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="Forms are one of the most important types of interaction with a website or app. Since their aim is to enable users to make a purchase, subscribe to a service or sign up to create an account, it&#39;s important to make sure they are easy to complete and help increase conversion rates. Use the available elements to create forms which are well-structured and user-friendly."/>
-    <!-- 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 {
@@ -56,16 +45,12 @@
             <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 +63,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 +97,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 +124,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 +164,11 @@
                         Charts
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../tables.html" >
                         Tables
@@ -218,6 +189,11 @@
                         Lists
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs-index.html" >
+                        Docs index
+                      </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 +210,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 +228,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
@@ -315,17 +280,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 +331,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
@@ -386,14 +360,7 @@
                 </li>
                 <li class="nav-item active 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">
+                    <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
@@ -450,11 +417,6 @@
                         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
@@ -572,11 +534,7 @@
                 <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,12 +543,13 @@
             </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">
+              <div class="col">
                 <h2 class="page-title">
                   Documentation
                 </h2>
@@ -599,11 +558,9 @@
           </div>
           <div class="row justify-content-center">
             <div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
-              <div class="sticky-top">
+              <div class="sticky-top lh-lg py-4">
-                <a href="https://github.com/tabler/tabler" class="btn btn-github mb-6 btn-block" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
-                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor"><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"/></svg>
-                    <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"/>
-                  </svg>
                   Browse source code
                 </a>
                 <h5 class="subheader">On this page</h5>
@@ -644,15 +601,10 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div class="d-flex">
-                      <h2 class="h1 mt-0 mb-3">Form elements</h2>
+                      <h1 class="h2 mt-0 mb-3">Form elements</h1>
                       <p class="ml-auto">
                         <a href="https://getbootstrap.com/docs/4.4/components/forms/" 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>
@@ -685,7 +637,7 @@
                       </figure>
                     </div>
                     <h2 id="form-control-rounded">Form control rounded</h2>
-                    <p>Use the <code class="highlighter-rouge">form-control-rounded</code> class if you prefer form controls with rounded corners.</p>
+                    <p>Use the <code class="language-plaintext highlighter-rouge">form-control-rounded</code> class if you prefer form controls with rounded corners.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <div class="mb-3">
@@ -694,11 +646,7 @@
                           <div class="input-icon">
                             <input type="text" class="form-control form-control-rounded" placeholder="Search…" />
                             <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>
                           </div>
                         </div>
@@ -719,7 +667,7 @@
                       </figure>
                     </div>
                     <h2 id="form-control-flush">Form control flush</h2>
-                    <p>You can remove borders from your form control by adding the <code class="highlighter-rouge">form-control-flush</code> class.</p>
+                    <p>You can remove borders from your form control by adding the <code class="language-plaintext highlighter-rouge">form-control-flush</code> class.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <div class="mb-3">
@@ -745,20 +693,12 @@
                           <div class="input-icon mb-3">
                             <input type="text" class="form-control" placeholder="Search…" />
                             <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>
                           </div>
                           <div class="input-icon mb-3">
                             <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="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>
                             <input type="text" class="form-control" placeholder="Username" />
                           </div>
@@ -820,17 +760,13 @@
                       <div class="example-content">
                         <div class="mb-3">
                           <label class="form-label">Separated inputs</label>
-                          <div class="row row-sm">
+                          <div class="row g-2">
                             <div class="col">
                               <input type="text" class="form-control" placeholder="Search for…" />
                             </div>
                             <div class="col-auto">
-                              <a href="#" class="btn btn-secondary btn-icon" aria-label="Button">
+                              <a href="#" class="btn btn-white btn-icon" aria-label="Button">
-                                <svg xmlns="http://www.w3.org/2000/svg" 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>
                               </a>
                             </div>
                           </div>
@@ -841,12 +777,12 @@
                       <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">"mb-3"</span><span class="nt">&gt;</span>
   <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Separated inputs<span class="nt">&lt;/label&gt;</span>
-  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row row-sm"</span><span class="nt">&gt;</span>
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row g-2"</span><span class="nt">&gt;</span>
     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">placeholder=</span><span class="s">"Search for…"</span><span class="nt">&gt;</span>
     <span class="nt">&lt;/div&gt;</span>
     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</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-secondary btn-icon"</span> <span class="na">aria-label=</span><span class="s">"Button"</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-white btn-icon"</span> <span class="na">aria-label=</span><span class="s">"Button"</span><span class="nt">&gt;</span>
         <span class="c">&lt;!-- SVG icon code --&gt;</span>
       <span class="nt">&lt;/a&gt;</span>
     <span class="nt">&lt;/div&gt;</span>
@@ -976,7 +912,7 @@
                         <div style="max-width: 25rem">
                           <div class="mb-3">
                             <label class="form-label">Image Check</label>
-                            <div class="row row-sm">
+                            <div class="row g-2">
                               <div class="col-6 col-sm-4">
                                 <label class="form-imagecheck mb-2">
                                   <input name="form-imagecheck" type="checkbox" value="1" class="form-imagecheck-input" />
@@ -1058,7 +994,7 @@
                       <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">"mb-3"</span><span class="nt">&gt;</span>
   <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Image Check<span class="nt">&lt;/label&gt;</span>
-  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row row-sm"</span><span class="nt">&gt;</span>
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row g-2"</span><span class="nt">&gt;</span>
     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6 col-sm-4"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-imagecheck mb-2"</span><span class="nt">&gt;</span>
         <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"form-imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"1"</span> <span class="na">class=</span><span class="s">"form-imagecheck-input"</span> <span class="nt">/&gt;</span>
@@ -1141,7 +1077,7 @@
                       <div class="example-content">
                         <div class="mb-3">
                           <label class="form-label">Color Input</label>
-                          <div class="row row-sm">
+                          <div class="row g-2">
                             <div class="col-auto">
                               <label class="form-colorinput">
                                 <input name="color" type="radio" value="dark" class="form-colorinput-input" />
@@ -1216,7 +1152,7 @@
                       <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">"mb-3"</span><span class="nt">&gt;</span>
   <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Color Input<span class="nt">&lt;/label&gt;</span>
-  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row row-sm"</span><span class="nt">&gt;</span>
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row g-2"</span><span class="nt">&gt;</span>
     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-colorinput"</span><span class="nt">&gt;</span>
         <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">value=</span><span class="s">"dark"</span> <span class="na">class=</span><span class="s">"form-colorinput-input"</span> <span class="nt">/&gt;</span>
@@ -1306,7 +1242,7 @@
                       </figure>
                     </div>
                     <h2 id="datalists">Datalists</h2>
-                    <p>Use the <code class="highlighter-rouge">datalist</code> element to add an autocomplete feature to your input control. The list of available options will display once a user starts to type and will make it quicker to complete form sections.</p>
+                    <p>Use the <code class="language-plaintext highlighter-rouge">datalist</code> element to add an autocomplete feature to your input control. The list of available options will display once a user starts to type and will make it quicker to complete form sections.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <div class="mb-3">
@@ -1377,36 +1313,22 @@
                           <div class="form-selectgroup">
                             <label class="form-selectgroup-item">
                               <input type="checkbox" name="name" value="sun" class="form-selectgroup-input" checked="" />
-                              <span class="form-selectgroup-label"><svg xmlns="http://www.w3.org/2000/svg" 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="form-selectgroup-label"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
-                                  <path stroke="none" d="M0 0h24v24H0z" />
-                                  <circle cx="12" cy="12" r="4" />
-                                  <path d="M3 12h1M12 3v1M20 12h1M12 20v1M5.6 5.6l.7 .7M18.4 5.6l-.7 .7M17.7 17.7l.7 .7M6.3 17.7l-.7 .7" />
-                                </svg>
                               </span>
                             </label>
                             <label class="form-selectgroup-item">
                               <input type="checkbox" name="name" value="moon" class="form-selectgroup-input" />
-                              <span class="form-selectgroup-label"><svg xmlns="http://www.w3.org/2000/svg" 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="form-selectgroup-label"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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 3c0.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
-                                  <path stroke="none" d="M0 0h24v24H0z" />
-                                  <path d="M16.2 4a9.03 9.03 0 1 0 3.9 12a6.5 6.5 0 1 1 -3.9 -12" />
-                                </svg>
                               </span>
                             </label>
                             <label class="form-selectgroup-item">
                               <input type="checkbox" name="name" value="cloud-rain" class="form-selectgroup-input" />
-                              <span class="form-selectgroup-label"><svg xmlns="http://www.w3.org/2000/svg" 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="form-selectgroup-label"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="M7 18a4.6 4.4 0 0 1 0 -9a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7" /><path d="M11 13v2m0 3v2m4 -5v2m0 3v2" /></svg>
-                                  <path stroke="none" d="M0 0h24v24H0z" />
-                                  <path d="M7 18a4.6 4.4 0 0 1 0 -9h0a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7" />
-                                  <path d="M11 13v2m0 3v2m4 -5v2m0 3v2" />
-                                </svg>
                               </span>
                             </label>
                             <label class="form-selectgroup-item">
                               <input type="checkbox" name="name" value="cloud" class="form-selectgroup-input" />
-                              <span class="form-selectgroup-label"><svg xmlns="http://www.w3.org/2000/svg" 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="form-selectgroup-label"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="M7 18a4.6 4.4 0 0 1 0 -9a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-12" /></svg>
-                                  <path stroke="none" d="M0 0h24v24H0z" />
-                                  <path d="M7 18a4.6 4.4 0 0 1 0 -9h0a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-12" />
-                                </svg>
                               </span>
                             </label>
                             <label class="form-selectgroup-item">
@@ -1420,37 +1342,22 @@
                           <div class="form-selectgroup">
                             <label class="form-selectgroup-item">
                               <input type="radio" name="icons" value="home" class="form-selectgroup-input" checked="" />
-                              <span class="form-selectgroup-label"><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">
+                              <span class="form-selectgroup-label"><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" /><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>
                                 Home</span>
                             </label>
                             <label class="form-selectgroup-item">
                               <input type="radio" name="icons" value="user" class="form-selectgroup-input" />
-                              <span class="form-selectgroup-label"><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">
+                              <span class="form-selectgroup-label"><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="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>
                                 User</span>
                             </label>
                             <label class="form-selectgroup-item">
                               <input type="radio" name="icons" value="circle" class="form-selectgroup-input" />
-                              <span class="form-selectgroup-label"><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">
+                              <span class="form-selectgroup-label"><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" /></svg>
-                                  <path stroke="none" d="M0 0h24v24H0z" />
-                                  <circle cx="12" cy="12" r="9" />
-                                </svg>
                                 Circle</span>
                             </label>
                             <label class="form-selectgroup-item">
                               <input type="radio" name="icons" value="square" class="form-selectgroup-input" />
-                              <span class="form-selectgroup-label"><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">
+                              <span class="form-selectgroup-label"><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" /><rect x="4" y="4" width="16" height="16" rx="2" /></svg>
-                                  <path stroke="none" d="M0 0h24v24H0z" />
-                                  <rect x="4" y="4" width="16" height="16" rx="2" />
-                                </svg>
                                 Square</span>
                             </label>
                           </div>
@@ -1633,8 +1540,8 @@
                                 </div>
                                 <div class="form-selectgroup-label-content d-flex align-items-center">
                                   <span class="avatar mr-3" style="background-image: url(../static/avatars/000m.jpg)"></span>
-                                  <div class="lh-sm">
+                                  <div>
-                                    <div class="strong">Paweł Kuna</div>
+                                    <div class="font-weight-medium">Paweł Kuna</div>
                                     <div class="text-muted">UI Designer</div>
                                   </div>
                                 </div>
@@ -1648,8 +1555,8 @@
                                 </div>
                                 <div class="form-selectgroup-label-content d-flex align-items-center">
                                   <span class="avatar mr-3">JL</span>
-                                  <div class="lh-sm">
+                                  <div>
-                                    <div class="strong">Jeffie Lewzey</div>
+                                    <div class="font-weight-medium">Jeffie Lewzey</div>
                                     <div class="text-muted">Chemical Engineer</div>
                                   </div>
                                 </div>
@@ -1663,8 +1570,8 @@
                                 </div>
                                 <div class="form-selectgroup-label-content d-flex align-items-center">
                                   <span class="avatar mr-3" style="background-image: url(../static/avatars/002m.jpg)"></span>
-                                  <div class="lh-sm">
+                                  <div>
-                                    <div class="strong">Mallory Hulme</div>
+                                    <div class="font-weight-medium">Mallory Hulme</div>
                                     <div class="text-muted">Geologist IV</div>
                                   </div>
                                 </div>
@@ -1678,8 +1585,8 @@
                                 </div>
                                 <div class="form-selectgroup-label-content d-flex align-items-center">
                                   <span class="avatar mr-3" style="background-image: url(../static/avatars/003m.jpg)"></span>
-                                  <div class="lh-sm">
+                                  <div>
-                                    <div class="strong">Dunn Slane</div>
+                                    <div class="font-weight-medium">Dunn Slane</div>
                                     <div class="text-muted">Research Nurse</div>
                                   </div>
                                 </div>
@@ -1693,8 +1600,8 @@
                                 </div>
                                 <div class="form-selectgroup-label-content d-flex align-items-center">
                                   <span class="avatar mr-3" style="background-image: url(../static/avatars/000f.jpg)"></span>
-                                  <div class="lh-sm">
+                                  <div>
-                                    <div class="strong">Emmy Levet</div>
+                                    <div class="font-weight-medium">Emmy Levet</div>
                                     <div class="text-muted">VP Product Management</div>
                                   </div>
                                 </div>
@@ -1757,8 +1664,8 @@
         <span class="nt">&lt;/div&gt;</span>
         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-label-content d-flex align-items-center"</span><span class="nt">&gt;</span>
           <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar mr-3"</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</span> <span class="na">class=</span><span class="s">"lh-sm"</span><span class="nt">&gt;</span>
+          <span class="nt">&lt;div&gt;</span>
-            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"strong"</span><span class="nt">&gt;</span>Paweł Kuna<span class="nt">&lt;/div&gt;</span>
+            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"font-weight-medium"</span><span class="nt">&gt;</span>Paweł Kuna<span class="nt">&lt;/div&gt;</span>
             <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>UI Designer<span class="nt">&lt;/div&gt;</span>
           <span class="nt">&lt;/div&gt;</span>
         <span class="nt">&lt;/div&gt;</span>
@@ -1772,8 +1679,8 @@
         <span class="nt">&lt;/div&gt;</span>
         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-label-content d-flex align-items-center"</span><span class="nt">&gt;</span>
           <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar mr-3"</span><span class="nt">&gt;</span>JL<span class="nt">&lt;/span&gt;</span>
-          <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"lh-sm"</span><span class="nt">&gt;</span>
+          <span class="nt">&lt;div&gt;</span>
-            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"strong"</span><span class="nt">&gt;</span>Jeffie Lewzey<span class="nt">&lt;/div&gt;</span>
+            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"font-weight-medium"</span><span class="nt">&gt;</span>Jeffie Lewzey<span class="nt">&lt;/div&gt;</span>
             <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Chemical Engineer<span class="nt">&lt;/div&gt;</span>
           <span class="nt">&lt;/div&gt;</span>
         <span class="nt">&lt;/div&gt;</span>
@@ -1787,8 +1694,8 @@
         <span class="nt">&lt;/div&gt;</span>
         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-label-content d-flex align-items-center"</span><span class="nt">&gt;</span>
           <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar mr-3"</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</span> <span class="na">class=</span><span class="s">"lh-sm"</span><span class="nt">&gt;</span>
+          <span class="nt">&lt;div&gt;</span>
-            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"strong"</span><span class="nt">&gt;</span>Mallory Hulme<span class="nt">&lt;/div&gt;</span>
+            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"font-weight-medium"</span><span class="nt">&gt;</span>Mallory Hulme<span class="nt">&lt;/div&gt;</span>
             <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Geologist IV<span class="nt">&lt;/div&gt;</span>
           <span class="nt">&lt;/div&gt;</span>
         <span class="nt">&lt;/div&gt;</span>
@@ -1802,8 +1709,8 @@
         <span class="nt">&lt;/div&gt;</span>
         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-label-content d-flex align-items-center"</span><span class="nt">&gt;</span>
           <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar mr-3"</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</span> <span class="na">class=</span><span class="s">"lh-sm"</span><span class="nt">&gt;</span>
+          <span class="nt">&lt;div&gt;</span>
-            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"strong"</span><span class="nt">&gt;</span>Dunn Slane<span class="nt">&lt;/div&gt;</span>
+            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"font-weight-medium"</span><span class="nt">&gt;</span>Dunn Slane<span class="nt">&lt;/div&gt;</span>
             <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Research Nurse<span class="nt">&lt;/div&gt;</span>
           <span class="nt">&lt;/div&gt;</span>
         <span class="nt">&lt;/div&gt;</span>
@@ -1817,8 +1724,8 @@
         <span class="nt">&lt;/div&gt;</span>
         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-label-content d-flex align-items-center"</span><span class="nt">&gt;</span>
           <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar mr-3"</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</span> <span class="na">class=</span><span class="s">"lh-sm"</span><span class="nt">&gt;</span>
+          <span class="nt">&lt;div&gt;</span>
-            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"strong"</span><span class="nt">&gt;</span>Emmy Levet<span class="nt">&lt;/div&gt;</span>
+            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"font-weight-medium"</span><span class="nt">&gt;</span>Emmy Levet<span class="nt">&lt;/div&gt;</span>
             <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>VP Product Management<span class="nt">&lt;/div&gt;</span>
           <span class="nt">&lt;/div&gt;</span>
         <span class="nt">&lt;/div&gt;</span>
@@ -2071,7 +1978,7 @@
                       </figure>
                     </div>
                     <h2 id="fieldset">Fieldset</h2>
-                    <p>Group parts of your form to make it well-structured and clearer for users, using the <code class="highlighter-rouge">fieldset</code> element.</p>
+                    <p>Group parts of your form to make it well-structured and clearer for users, using the <code class="language-plaintext highlighter-rouge">fieldset</code> element.</p>
                     <div class="example no_toc_section">
                       <div class="example-content">
                         <fieldset class="form-fieldset">
@@ -2291,30 +2198,11 @@
                           <div class="input-group input-group-flat">
                             <input type="text" class="form-control" />
                             <span class="input-group-text">
-                              <a href="#" class="link-secondary" title="Clear search" data-toggle="tooltip"><svg xmlns="http://www.w3.org/2000/svg" class="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="link-secondary" title="Clear search" data-toggle="tooltip"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>
-                                  <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>
                               </a>
-                              <a href="#" class="link-secondary ml-2" title="Search settings" data-toggle="tooltip"><svg xmlns="http://www.w3.org/2000/svg" class="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="link-secondary ml-2" title="Search settings" data-toggle="tooltip"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="6" cy="10" r="2" /><line x1="6" y1="4" x2="6" y2="8" /><line x1="6" y1="12" x2="6" y2="20" /><circle cx="12" cy="16" r="2" /><line x1="12" y1="4" x2="12" y2="14" /><line x1="12" y1="18" x2="12" y2="20" /><circle cx="18" cy="7" r="2" /><line x1="18" y1="4" x2="18" y2="5" /><line x1="18" y1="9" x2="18" y2="20" /></svg>
-                                  <path stroke="none" d="M0 0h24v24H0z" />
-                                  <circle cx="6" cy="10" r="2" />
-                                  <line x1="6" y1="4" x2="6" y2="8" />
-                                  <line x1="6" y1="12" x2="6" y2="20" />
-                                  <circle cx="12" cy="16" r="2" />
-                                  <line x1="12" y1="4" x2="12" y2="14" />
-                                  <line x1="12" y1="18" x2="12" y2="20" />
-                                  <circle cx="18" cy="7" r="2" />
-                                  <line x1="18" y1="4" x2="18" y2="5" />
-                                  <line x1="18" y1="9" x2="18" y2="20" />
-                                </svg>
                               </a>
-                              <a href="#" class="link-secondary ml-2 disabled" title="Add notification" data-toggle="tooltip"><svg xmlns="http://www.w3.org/2000/svg" class="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="link-secondary ml-2 disabled" title="Add notification" data-toggle="tooltip"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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>
                               </a>
                             </span>
                           </div>
@@ -2356,9 +2244,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="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.9</a>
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
@@ -2367,7 +2262,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>
     <script src="../dist/libs/nouislider/distribute/nouislider.min.js"></script>
     <!-- Tabler Core -->
     <script src="../dist/js/tabler.min.js"></script>
@@ -2410,6 +2304,19 @@
       });
       // @formatter:on
     </script>
+    <script>
+      let sliderTriggerList = [].slice.call(document.querySelectorAll("[data-slider]"));
+      sliderTriggerList.map(function (sliderTriggerEl) {
+      	let options = {};
+      	if (sliderTriggerEl.getAttribute("data-slider")) {
+      		options = JSON.parse(sliderTriggerEl.getAttribute("data-slider"));
+      	}
+      	let slider = noUiSlider.create(sliderTriggerEl, options);
+      	if (options['js-name']) {
+      		window[options['js-name']] = slider;
+      	}
+      });
+    </script>
     <script>
       document.body.style.display = "block"
     </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.9
-* @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 {
@@ -56,16 +44,12 @@
             <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,11 @@
                         Charts
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../tables.html" >
                         Tables
@@ -218,6 +188,11 @@
                         Lists
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs-index.html" >
+                        Docs index
+                      </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 +209,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 +227,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
@@ -315,17 +279,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 +330,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
@@ -386,14 +359,7 @@
                 </li>
                 <li class="nav-item active 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">
+                    <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
@@ -450,11 +416,6 @@
                         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
@@ -572,11 +533,7 @@
                 <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,12 +542,13 @@
             </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">
+              <div class="col">
                 <h2 class="page-title">
                   Documentation
                 </h2>
@@ -599,11 +557,9 @@
           </div>
           <div class="row justify-content-center">
             <div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
-              <div class="sticky-top">
+              <div class="sticky-top lh-lg py-4">
-                <a href="https://github.com/tabler/tabler" class="btn btn-github mb-6 btn-block" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
-                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor"><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"/></svg>
-                    <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"/>
-                  </svg>
                   Browse source code
                 </a>
                 <h5 class="subheader">On this page</h5>
@@ -617,7 +573,7 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div class="d-flex">
-                      <h2 class="h1 mt-0 mb-3">Form helpers</h2>
+                      <h1 class="h2 mt-0 mb-3">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>
                     <h2 id="input-help">Input help</h2>
@@ -651,9 +607,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="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.9</a>
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
@@ -662,7 +625,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/index.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.9
-* @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>Introduction - Documentation - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <title>Introduction - 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 {
@@ -55,16 +43,12 @@
             <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,11 @@
                         Charts
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../tables.html" >
                         Tables
@@ -217,6 +187,11 @@
                         Lists
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs-index.html" >
+                        Docs index
+                      </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 +208,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 +226,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
@@ -314,17 +278,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 +329,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
@@ -385,14 +358,7 @@
                 </li>
                 <li class="nav-item active 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">
+                    <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
@@ -449,11 +415,6 @@
                         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
@@ -571,11 +532,7 @@
                 <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 +541,13 @@
             </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">
+              <div class="col">
                 <h2 class="page-title">
                   Documentation
                 </h2>
@@ -598,11 +556,9 @@
           </div>
           <div class="row justify-content-center">
             <div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
-              <div class="sticky-top">
+              <div class="sticky-top lh-lg py-4">
-                <a href="https://github.com/tabler/tabler" class="btn btn-github mb-6 btn-block" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
-                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor"><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"/></svg>
-                    <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"/>
-                  </svg>
                   Browse source code
                 </a>
                 <h5 class="subheader">On this page</h5>
@@ -620,7 +576,7 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div class="d-flex">
-                      <h2 class="h1 mt-0 mb-3">Introduction</h2>
+                      <h1 class="h2 mt-0 mb-3">Introduction</h1>
                     </div>
                     <h2 id="what-is-tabler">What is Tabler?</h2>
                     <p>Tabler is a UI kit that speeds up the development process and makes it easier than ever! Built on the latest version of Bootstrap, it helps you create templates based on fully customizable and ready-to-use UI components, which can be used by both simple websites and sophisticated systems. With basic knowledge of HTML and CSS, you’ll be able to create dashboards that are fully functional and beautifully designed!</p>
@@ -631,25 +587,25 @@
                     <p>To use our build system and run our documentation locally, you’ll need a copy of Tabler’s source files. Follow the steps below:</p>
                     <ol>
                       <li><a href="https://nodejs.org/download/">Install Node.js</a>, which we use to manage our dependencies.</li>
-                      <li>Navigate to the root <code class="highlighter-rouge">/tabler</code> directory and run <code class="highlighter-rouge">npm install</code> to install our local dependencies listed in <code class="highlighter-rouge">package.json</code>.</li>
+                      <li>Navigate to the root <code class="language-plaintext highlighter-rouge">/tabler</code> directory and run <code class="language-plaintext highlighter-rouge">npm install</code> to install our local dependencies listed in <code class="language-plaintext highlighter-rouge">package.json</code>.</li>
                       <li><a href="https://ruby-lang.org/en/documentation/installation/">Install Ruby</a> - the recommended version is <a href="https://cache.ruby-lang.org/pub/ruby/2.5/ruby-2.5.5.tar.gz">2.5.5</a>.</li>
-                      <li><a href="https://bundler.io">Install Bundler</a> with <code class="highlighter-rouge">gem install bundler</code> and, finally, run <code class="highlighter-rouge">bundle install</code>. It will install all Ruby dependencies, such as <a href="https://jekyllrb.com">Jekyll and plugins</a>.</li>
+                      <li><a href="https://bundler.io">Install Bundler</a> with <code class="language-plaintext highlighter-rouge">gem install bundler</code> and, finally, run <code class="language-plaintext highlighter-rouge">bundle install</code>. It will install all Ruby dependencies, such as <a href="https://jekyllrb.com">Jekyll and plugins</a>.</li>
                     </ol>
                     <p><strong>Windows users</strong>:</p>
                     <ol>
-                      <li><a href="https://git-scm.com/download/win">Install Git</a> in <code class="highlighter-rouge">C:\Program Files\git\bin</code> directory and run <code class="highlighter-rouge">npm config set script-shell "C:\Program Files\git\bin\bash.exe"</code> to change the default shell.</li>
+                      <li><a href="https://git-scm.com/download/win">Install Git</a> in <code class="language-plaintext highlighter-rouge">C:\Program Files\git\bin</code> directory and run <code class="language-plaintext highlighter-rouge">npm config set script-shell "C:\Program Files\git\bin\bash.exe"</code> to change the default shell.</li>
                       <li><a href="https://rubyinstaller.org/downloads/">Install Ruby+Devkit</a> - recommended version is <a href="https://github.com/oneclick/rubyinstaller2/releases/download/RubyInstaller-2.5.5-1/rubyinstaller-devkit-2.5.5-1-x86.exe">2.5.5</a>.</li>
                       <li><a href="https://jekyllrb.com/docs/installation/windows/">Read guide</a> to get Jekyll up and running without problems.</li>
                     </ol>
                     <p>Once you’ve completed the setup, you’ll be able to run the various commands provided from the command line.</p>
                     <h2 id="build-tabler-locally">Build Tabler locally</h2>
                     <ol>
-                      <li>From the root <code class="highlighter-rouge">/tabler</code> directory, run <code class="highlighter-rouge">npm run start</code> in the command line.</li>
+                      <li>From the root <code class="language-plaintext highlighter-rouge">/tabler</code> directory, run <code class="language-plaintext highlighter-rouge">npm run start</code> in the command line.</li>
                       <li>Open <a href="http://localhost:4000">http://localhost:4000</a> in your browser, and voilà.</li>
-                      <li>Any change in <code class="highlighter-rouge">/pages</code> directory will build the application and refresh the page.</li>
+                      <li>Any change in <code class="language-plaintext highlighter-rouge">/pages</code> directory will build the application and refresh the page.</li>
                     </ol>
                     <p><strong>Note</strong>:
-                      Run <code class="highlighter-rouge">npm run build</code> for rerforms a one off build application without refresh.
+                      Run <code class="language-plaintext highlighter-rouge">npm run build</code> for rerforms a one off build application without refresh.
                       Open <a href="http://localhost:3001">http://localhost:3001</a> to configure the Web server.</p>
                     <h2 id="bugs-and-feature-requests">Bugs and feature requests</h2>
                     <p>Found a bug or have a feature request? <a href="https://github.com/tabler/tabler/issues/new">Please open a new issue</a>.</p>
@@ -670,9 +626,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="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.9</a>
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
@@ -681,7 +644,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/input-mask.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.9
-* @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>Input mask - Documentation - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <title>Input mask - 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="An input mask is a used to clarify the input format required in a given field and is helpful for users, removing confusion and reducing the number of validation errors."/>
-    <!-- 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 {
@@ -56,16 +44,12 @@
             <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,11 @@
                         Charts
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../tables.html" >
                         Tables
@@ -218,6 +188,11 @@
                         Lists
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs-index.html" >
+                        Docs index
+                      </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 +209,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 +227,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
@@ -315,17 +279,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 +330,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
@@ -386,14 +359,7 @@
                 </li>
                 <li class="nav-item active 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">
+                    <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
@@ -450,11 +416,6 @@
                         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
@@ -572,11 +533,7 @@
                 <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,12 +542,13 @@
             </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">
+              <div class="col">
                 <h2 class="page-title">
                   Documentation
                 </h2>
@@ -599,11 +557,9 @@
           </div>
           <div class="row justify-content-center">
             <div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
-              <div class="sticky-top">
+              <div class="sticky-top lh-lg py-4">
-                <a href="https://github.com/tabler/tabler" class="btn btn-github mb-6 btn-block" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
-                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor"><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"/></svg>
-                    <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"/>
-                  </svg>
                   Browse source code
                 </a>
                 <h5 class="subheader">On this page</h5>
@@ -617,7 +573,7 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div class="d-flex">
-                      <h2 class="h1 mt-0 mb-3">Input mask</h2>
+                      <h1 class="h2 mt-0 mb-3">Input mask</h1>
                     </div>
                     <p>An input mask is a used to clarify the input format required in a given field and is helpful for users, removing confusion and reducing the number of validation errors.</p>
                     <h2 id="default-markup">Default markup</h2>
@@ -651,9 +607,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="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.9</a>
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
@@ -662,25 +625,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/docs/modals.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.9
-* @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>Modals - Documentation - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
+    <title>Modals - 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="Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content."/>
-    <!-- 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 {
@@ -56,16 +44,12 @@
             <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,11 @@
                         Charts
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../pagination.html" >
+                        Pagination
+                      </a>
+                    </li>
                     <li >
                       <a class="dropdown-item" href="../tables.html" >
                         Tables
@@ -218,6 +188,11 @@
                         Lists
                       </a>
                     </li>
+                    <li >
+                      <a class="dropdown-item" href="../docs-index.html" >
+                        Docs index
+                      </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 +209,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 +227,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
@@ -315,17 +279,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 +330,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
@@ -386,14 +359,7 @@
                 </li>
                 <li class="nav-item active 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">
+                    <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
@@ -450,11 +416,6 @@
                         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
@@ -572,11 +533,7 @@
                 <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,12 +542,13 @@
             </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">
+              <div class="col">
                 <h2 class="page-title">
                   Documentation
                 </h2>
@@ -599,11 +557,9 @@
           </div>
           <div class="row justify-content-center">
             <div class="d-none d-lg-block col-lg-3 order-lg-1 mb-4">
-              <div class="sticky-top">
+              <div class="sticky-top lh-lg py-4">
-                <a href="https://github.com/tabler/tabler" class="btn btn-github mb-6 btn-block" target="_blank" rel="noreferrer">
+                <a href="https://github.com/tabler/tabler" class="btn btn-white mb-6 btn-block" target="_blank" rel="noreferrer">
-                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor">
+                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon" fill="currentColor"><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"/></svg>
-                    <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"/>
-                  </svg>
                   Browse source code
                 </a>
                 <h5 class="subheader">On this page</h5>
@@ -619,7 +575,7 @@
                 <div class="card-body">
                   <div class="markdown">
                     <div class="d-flex">
-                      <h2 class="h1 mt-0 mb-3">Modals</h2>
+                      <h1 class="h2 mt-0 mb-3">Modals</h1>
                     </div>
                     <p>Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
                     <h2 id="default-markup">Default markup</h2>
@@ -630,19 +586,13 @@
                           <div class="modal-content">
                             <div class="modal-header">
                               <h5 class="modal-title">Modal title</h5>
-                              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                              <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
-                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" 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">
                               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci animi beatae delectus deleniti dolorem eveniet facere fuga iste nemo nesciunt nihil odio perspiciatis, quia quis reprehenderit sit tempora totam unde.
                             </div>
                             <div class="modal-footer">
-                              <button type="button" class="btn btn-secondary mr-auto" data-dismiss="modal">Close</button>
+                              <button type="button" class="btn mr-auto" data-dismiss="modal">Close</button>
                               <button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
                             </div>
                           </div>
@@ -655,15 +605,13 @@
   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-content"</span><span class="nt">&gt;</span>
     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-header"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"modal-title"</span><span class="nt">&gt;</span>Modal title<span class="nt">&lt;/h5&gt;</span>
-      <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn-close"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">&gt;&lt;/button&gt;</span>
-        <span class="c">&lt;!-- SVG icon code --&gt;</span>
-      <span class="nt">&lt;/button&gt;</span>
     <span class="nt">&lt;/div&gt;</span>
     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-body"</span><span class="nt">&gt;</span>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci animi beatae delectus deleniti dolorem eveniet facere fuga iste nemo nesciunt nihil odio perspiciatis, quia quis reprehenderit sit tempora totam unde.
     <span class="nt">&lt;/div&gt;</span>
     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-footer"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary mr-auto"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span><span class="nt">&gt;</span>Close<span class="nt">&lt;/button&gt;</span>
+      <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn mr-auto"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span><span class="nt">&gt;</span>Close<span class="nt">&lt;/button&gt;</span>
       <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span><span class="nt">&gt;</span>Save changes<span class="nt">&lt;/button&gt;</span>
     <span class="nt">&lt;/div&gt;</span>
   <span class="nt">&lt;/div&gt;</span>
@@ -712,13 +660,7 @@
                           <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">
+                              <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
-                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" 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">
@@ -730,29 +672,29 @@
                                 <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">
+                                    <span class="form-selectgroup-label d-flex align-items-center p-3">
-                                      <div class="mr-3">
+                                      <span class="mr-3">
                                         <span class="form-selectgroup-check"></span>
-                                      </div>
+                                      </span>
-                                      <div class="form-selectgroup-label-content">
+                                      <span class="form-selectgroup-label-content">
-                                        <div class="form-selectgroup-title strong mb-1">Simple</div>
+                                        <span class="form-selectgroup-title strong mb-1">Simple</span>
-                                        <div class="text-muted">Provide only basic data needed for the report</div>
+                                        <span class="d-block text-muted">Provide only basic data needed for the report</span>
-                                      </div>
+                                      </span>
-                                    </div>
+                                    </span>
                                   </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">
+                                    <span class="form-selectgroup-label d-flex align-items-center p-3">
-                                      <div class="mr-3">
+                                      <span class="mr-3">
                                         <span class="form-selectgroup-check"></span>
-                                      </div>
+                                      </span>
-                                      <div class="form-selectgroup-label-content">
+                                      <span class="form-selectgroup-label-content">
-                                        <div class="form-selectgroup-title strong mb-1">Advanced</div>
+                                        <span class="form-selectgroup-title strong mb-1">Advanced</span>
-                                        <div class="text-muted">Insert charts and additional advanced analyses to be inserted in the report</div>
+                                        <span class="d-block text-muted">Insert charts and additional advanced analyses to be inserted in the report</span>
-                                      </div>
+                                      </span>
-                                    </div>
+                                    </span>
                                   </label>
                                 </div>
                               </div>
@@ -807,11 +749,7 @@
                                 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">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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>
                                 Create new report
                               </a>
                             </div>
@@ -825,9 +763,7 @@
   <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-content"</span><span class="nt">&gt;</span>
     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-header"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;h5</span> <span class="na">class=</span><span class="s">"modal-title"</span><span class="nt">&gt;</span>New report<span class="nt">&lt;/h5&gt;</span>
-      <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"close"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn-close"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">&gt;&lt;/button&gt;</span>
-        <span class="c">&lt;!-- SVG icon code --&gt;</span>
-      <span class="nt">&lt;/button&gt;</span>
     <span class="nt">&lt;/div&gt;</span>
     <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-body"</span><span class="nt">&gt;</span>
       <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mb-3"</span><span class="nt">&gt;</span>
@@ -839,29 +775,29 @@
         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-6"</span><span class="nt">&gt;</span>
           <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span class="nt">&gt;</span>
             <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"report-type"</span> <span class="na">value=</span><span class="s">"1"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span> <span class="na">checked</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-label d-flex align-items-center p-3"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-label d-flex align-items-center p-3"</span><span class="nt">&gt;</span>
-              <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mr-3"</span><span class="nt">&gt;</span>
+              <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"mr-3"</span><span class="nt">&gt;</span>
                 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-check"</span><span class="nt">&gt;&lt;/span&gt;</span>
-              <span class="nt">&lt;/div&gt;</span>
+              <span class="nt">&lt;/span&gt;</span>
-              <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-label-content"</span><span class="nt">&gt;</span>
+              <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-label-content"</span><span class="nt">&gt;</span>
-                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-title strong mb-1"</span><span class="nt">&gt;</span>Simple<span class="nt">&lt;/div&gt;</span>
+                <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-title strong mb-1"</span><span class="nt">&gt;</span>Simple<span class="nt">&lt;/span&gt;</span>
-                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Provide only basic data needed for the report<span class="nt">&lt;/div&gt;</span>
+                <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"d-block text-muted"</span><span class="nt">&gt;</span>Provide only basic data needed for the report<span class="nt">&lt;/span&gt;</span>
-              <span class="nt">&lt;/div&gt;</span>
+              <span class="nt">&lt;/span&gt;</span>
-            <span class="nt">&lt;/div&gt;</span>
+            <span class="nt">&lt;/span&gt;</span>
           <span class="nt">&lt;/label&gt;</span>
         <span class="nt">&lt;/div&gt;</span>
         <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-lg-6"</span><span class="nt">&gt;</span>
           <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item"</span><span class="nt">&gt;</span>
             <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">name=</span><span class="s">"report-type"</span> <span class="na">value=</span><span class="s">"1"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span><span class="nt">&gt;</span>
-            <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-label d-flex align-items-center p-3"</span><span class="nt">&gt;</span>
+            <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-label d-flex align-items-center p-3"</span><span class="nt">&gt;</span>
-              <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"mr-3"</span><span class="nt">&gt;</span>
+              <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"mr-3"</span><span class="nt">&gt;</span>
                 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-check"</span><span class="nt">&gt;&lt;/span&gt;</span>
-              <span class="nt">&lt;/div&gt;</span>
+              <span class="nt">&lt;/span&gt;</span>
-              <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-label-content"</span><span class="nt">&gt;</span>
+              <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-label-content"</span><span class="nt">&gt;</span>
-                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup-title strong mb-1"</span><span class="nt">&gt;</span>Advanced<span class="nt">&lt;/div&gt;</span>
+                <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-title strong mb-1"</span><span class="nt">&gt;</span>Advanced<span class="nt">&lt;/span&gt;</span>
-                <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Insert charts and additional advanced analyses to be inserted in the report<span class="nt">&lt;/div&gt;</span>
+                <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"d-block text-muted"</span><span class="nt">&gt;</span>Insert charts and additional advanced analyses to be inserted in the report<span class="nt">&lt;/span&gt;</span>
-              <span class="nt">&lt;/div&gt;</span>
+              <span class="nt">&lt;/span&gt;</span>
-            <span class="nt">&lt;/div&gt;</span>
+            <span class="nt">&lt;/span&gt;</span>
           <span class="nt">&lt;/label&gt;</span>
         <span class="nt">&lt;/div&gt;</span>
       <span class="nt">&lt;/div&gt;</span>
@@ -941,9 +877,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="https://github.com/tabler/tabler/releases" target="_blank" class="link-secondary">v1.0.0-alpha.9</a>
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
@@ -952,7 +895,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>