Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-26 11:16:12 +04:00
Code Issues Projects Releases Wiki Activity

Compare commits

base: Mirrors:v1.0.0-alpha.14
Branches Tags
Mirrors:dev Mirrors:dependabot/github_actions/actions/cache-5 Mirrors:dev-cards-demos Mirrors:changeset-release/dev Mirrors:dev-form-controls Mirrors:dependabot/npm_and_yarn/glob-11.1.0 Mirrors:dev-layouts Mirrors:dev-docs-improvements-2 Mirrors:main Mirrors:main-revert Mirrors:dev-sidebar-narrow Mirrors:dev-onboarding Mirrors:dev-blog Mirrors:dev-customers Mirrors:dev-scss-imports Mirrors:dev-dependencies-07-23 Mirrors:dev-css-layers Mirrors:dev-docs-footer Mirrors:dev-doc-changelog Mirrors:dev-color-variables Mirrors:precommit-test Mirrors:dev-docs-app Mirrors:dev-css-props Mirrors:dev-secondary-color Mirrors:dev-orders Mirrors:changeset-release/main Mirrors:dev-colors Mirrors:dev-build-windows Mirrors:dev-brand-color Mirrors:dev-build Mirrors:changeset-release/dev-changesets Mirrors:dev-changesets Mirrors:dev-site-entry
Mirrors:@tabler/core@1.4.0 Mirrors:@tabler/core@1.3.2 Mirrors:@tabler/core@1.3.1 Mirrors:@tabler/core@1.3.0 Mirrors:v1.2.0 Mirrors:@tabler/core@1.1.1 Mirrors:v1.1.0 Mirrors:v1.0.0 Mirrors:v1.0.0-beta24 Mirrors:v1.0.0-beta23 Mirrors:v1.0.0-beta22 Mirrors:v1.0.0-beta21 Mirrors:v1.0.0-beta20 Mirrors:v1.0.0-beta19 Mirrors:v1.0.0-beta18 Mirrors:v1.0.0-beta17 Mirrors:v1.0.0-beta16 Mirrors:v1.0.0-beta15 Mirrors:v1.0.0-beta14 Mirrors:v1.0.0-beta13 Mirrors:v1.0.0-beta12 Mirrors:v1.0.0-beta11 Mirrors:v1.0.0-beta10 Mirrors:v1.0.0-beta9 Mirrors:v1.0.0-beta8 Mirrors:v1.0.0-beta7 Mirrors:v1.0.0-beta6 Mirrors:v1.0.0-beta5 Mirrors:v1.0.0-beta4 Mirrors:v1.0.0-beta3 Mirrors:v1.0.0-beta2 Mirrors:v1.0.0-beta Mirrors:v1.0.0-alpha.24 Mirrors:v1.0.0-alpha.23 Mirrors:v1.0.0-alpha.22 Mirrors:v1.0.0-alpha.21 Mirrors:v1.0.0-alpha.20 Mirrors:v1.0.0-alpha.19 Mirrors:v1.0.0-alpha.18 Mirrors:v1.0.0-alpha.17 Mirrors:v1.0.0-alpha.16 Mirrors:v1.0.0-alpha.15 Mirrors:v1.0.0-alpha.14 Mirrors:v1.0.0-alpha.13 Mirrors:v1.0.0-alpha.12 Mirrors:v1.0.0-alpha.11 Mirrors:v1.0.0-alpha.10 Mirrors:v1.0.0-alpha.9 Mirrors:v1.0.0-alpha.8 Mirrors:remove Mirrors:1.0.0-alpha.6 Mirrors:1.0.0-alpha.5 Mirrors:1.0.0-alpha.4 Mirrors:1.0.0-alpha.3 Mirrors:1.0.0-alpha.2 Mirrors:1.0.0-alpha Mirrors:v0.0.33 Mirrors:v0.0.32 Mirrors:v0.0.31 Mirrors:v0.0.30 Mirrors:v0.0.21 Mirrors:v0.0.20 Mirrors:v0.0.19 Mirrors:v0.0.18 Mirrors:v0.0.17 Mirrors:v0.0.16 Mirrors:v0.0.15 Mirrors:v0.0.14 Mirrors:v0.0.13 Mirrors:v0.0.12 Mirrors:v0.0.11 Mirrors:v0.0.10 Mirrors:v0.0.9
..
compare: Mirrors:v1.0.0-alpha.18
Branches Tags
Mirrors:dependabot/github_actions/actions/cache-5 Mirrors:dev-cards-demos Mirrors:changeset-release/dev Mirrors:dev Mirrors:dev-form-controls Mirrors:dependabot/npm_and_yarn/glob-11.1.0 Mirrors:dev-layouts Mirrors:dev-docs-improvements-2 Mirrors:main Mirrors:main-revert Mirrors:dev-sidebar-narrow Mirrors:dev-onboarding Mirrors:dev-blog Mirrors:dev-customers Mirrors:dev-scss-imports Mirrors:dev-dependencies-07-23 Mirrors:dev-css-layers Mirrors:dev-docs-footer Mirrors:dev-doc-changelog Mirrors:dev-color-variables Mirrors:precommit-test Mirrors:dev-docs-app Mirrors:dev-css-props Mirrors:dev-secondary-color Mirrors:dev-orders Mirrors:changeset-release/main Mirrors:dev-colors Mirrors:dev-build-windows Mirrors:dev-brand-color Mirrors:dev-build Mirrors:changeset-release/dev-changesets Mirrors:dev-changesets Mirrors:dev-site-entry
Mirrors:@tabler/core@1.4.0 Mirrors:@tabler/core@1.3.2 Mirrors:@tabler/core@1.3.1 Mirrors:@tabler/core@1.3.0 Mirrors:v1.2.0 Mirrors:@tabler/core@1.1.1 Mirrors:v1.1.0 Mirrors:v1.0.0 Mirrors:v1.0.0-beta24 Mirrors:v1.0.0-beta23 Mirrors:v1.0.0-beta22 Mirrors:v1.0.0-beta21 Mirrors:v1.0.0-beta20 Mirrors:v1.0.0-beta19 Mirrors:v1.0.0-beta18 Mirrors:v1.0.0-beta17 Mirrors:v1.0.0-beta16 Mirrors:v1.0.0-beta15 Mirrors:v1.0.0-beta14 Mirrors:v1.0.0-beta13 Mirrors:v1.0.0-beta12 Mirrors:v1.0.0-beta11 Mirrors:v1.0.0-beta10 Mirrors:v1.0.0-beta9 Mirrors:v1.0.0-beta8 Mirrors:v1.0.0-beta7 Mirrors:v1.0.0-beta6 Mirrors:v1.0.0-beta5 Mirrors:v1.0.0-beta4 Mirrors:v1.0.0-beta3 Mirrors:v1.0.0-beta2 Mirrors:v1.0.0-beta Mirrors:v1.0.0-alpha.24 Mirrors:v1.0.0-alpha.23 Mirrors:v1.0.0-alpha.22 Mirrors:v1.0.0-alpha.21 Mirrors:v1.0.0-alpha.20 Mirrors:v1.0.0-alpha.19 Mirrors:v1.0.0-alpha.18 Mirrors:v1.0.0-alpha.17 Mirrors:v1.0.0-alpha.16 Mirrors:v1.0.0-alpha.15 Mirrors:v1.0.0-alpha.14 Mirrors:v1.0.0-alpha.13 Mirrors:v1.0.0-alpha.12 Mirrors:v1.0.0-alpha.11 Mirrors:v1.0.0-alpha.10 Mirrors:v1.0.0-alpha.9 Mirrors:v1.0.0-alpha.8 Mirrors:remove Mirrors:1.0.0-alpha.6 Mirrors:1.0.0-alpha.5 Mirrors:1.0.0-alpha.4 Mirrors:1.0.0-alpha.3 Mirrors:1.0.0-alpha.2 Mirrors:1.0.0-alpha Mirrors:v0.0.33 Mirrors:v0.0.32 Mirrors:v0.0.31 Mirrors:v0.0.30 Mirrors:v0.0.21 Mirrors:v0.0.20 Mirrors:v0.0.19 Mirrors:v0.0.18 Mirrors:v0.0.17 Mirrors:v0.0.16 Mirrors:v0.0.15 Mirrors:v0.0.14 Mirrors:v0.0.13 Mirrors:v0.0.12 Mirrors:v0.0.11 Mirrors:v0.0.10 Mirrors:v0.0.9

70 Commits
v1.0.0-alp ... v1.0.0-alp

Author SHA1 Message Date
codecalm
f3be0c14d9 Release 1.0.0-alpha.18 2020-12-16 13:03:40 +01:00
codecalm
7e2d096a46 dependencies update 2020-12-16 13:01:49 +01:00
codecalm
475935b7d4 calendar menu fix #738 2020-12-13 15:05:50 +01:00
codecalm
1fb2cd15d3 animated dots loader 2020-12-13 14:10:05 +01:00
Paweł Kuna
57575c37b4 Merge pull request #737 from enricodias/dev 2020-12-12 20:30:48 +01:00
Enrico Dias
d4732aa72b Merge pull request #1 from tabler/dev 
Merge from original repo
 2020-12-12 09:45:39 -03:00
Enrico Dias
3b6458f436 enforce $card-border-width on cards 2020-12-11 19:01:36 -03:00
codecalm
6cba4883ff tabler icons update, dependencies update 2020-12-11 13:45:34 +01:00
codecalm
62b0e8a6bf Release 1.0.0-alpha.17 2020-12-08 23:04:50 +01:00
codecalm
7ff3549c35 bootstrap upgrade to newest version 2020-12-07 22:38:02 +01:00
Paweł Kuna
57508c04de Merge pull request #732 from tabler/rtl-utils 2020-12-06 15:01:22 +01:00
codecalm
ee0e7fcbf3 new bootstrap 5 margin and padding utils 2020-12-06 14:38:53 +01:00
codecalm
5589a71f6f new bootstrap 5 margin and padding utils 2020-12-06 14:18:42 +01:00
codecalm
c72e780668 bootstrap dropdowns fixes 2020-12-06 12:46:50 +01:00
codecalm
8059a68cf8 disable critical css 2020-12-06 00:08:32 +01:00
codecalm
8507e6622a disable sentry 2020-12-06 00:03:51 +01:00
codecalm
4ea3716686 css base fix 2020-12-06 00:02:20 +01:00
codecalm
f8eaddf479 purge css fix 2020-12-05 23:58:33 +01:00
codecalm
069c0ef9b9 critical css test 2020-12-05 23:40:02 +01:00
codecalm
722a332b41 css optimize 2020-12-05 23:04:24 +01:00
codecalm
4d8891d77a purge css fix 2020-12-05 21:58:52 +01:00
codecalm
eb93e6d918 homepage charts fixesbootstrap upgrade 2020-12-05 21:34:42 +01:00
codecalm
b5ceaca0a4 Merge branches 'dev' and 'dev-purgecss' of https://github.com/tabler/tabler into dev 2020-12-05 21:20:16 +01:00
Paweł Kuna
519386ccb7 Merge pull request #728 from cedric-anne/patch-1 
Permit installation using pnpm
 2020-12-05 21:19:47 +01:00
codecalm
b59e07425e demo purge css 2020-12-05 21:17:28 +01:00
Michal Wolny
1fe6bd311d Release 1.0.0-alpha.16 2020-12-03 20:46:47 +01:00
codecalm
c2558cc3f4 homepage charts fixes 2020-11-30 23:17:56 +01:00
codecalm
d3a8cb075c interface colors 2020-11-30 23:01:10 +01:00
codecalm
32d7e0e107 colors fixes 2020-11-30 23:00:19 +01:00
Cédric Anne
00b052a7a0 Permit installation using pnpm 2020-11-30 20:56:11 +01:00
codecalm
bdf4995507 alerts fixes 2020-11-30 17:46:14 +01:00
codecalm
17c0fc2507 js fixes 2020-11-30 15:11:11 +01:00
codecalm
a6288b4cbd js void fix 2020-11-30 15:08:04 +01:00
codecalm
79f7023663 homepage optimize 2020-11-29 23:47:39 +01:00
codecalm
523de80a52 images optimize 2020-11-29 23:35:21 +01:00
codecalm
806b119a10 homepage aria fixes 2020-11-29 23:04:30 +01:00
codecalm
728b032c56 tasks label 2020-11-29 17:38:24 +01:00
codecalm
81720ec980 error page fixes 2020-11-29 17:01:57 +01:00
codecalm
12c3503a21 sentry init 2020-11-29 16:27:26 +01:00
codecalm
a1abd45fac newest bootstrap data-XXX => data-bs-XXX fixes 2020-11-29 16:19:14 +01:00
codecalm
22e5fcb70e newest bootstrap data-XXX => data-bs-XXX fixes 2020-11-29 16:05:54 +01:00
codecalm
5455cbd641 Merge branch 'dev' of https://github.com/tabler/tabler into dev 2020-11-29 15:33:11 +01:00
codecalm
d2e8d39ad1 Release 1.0.0-alpha.15 2020-11-29 15:32:43 +01:00
Michal Wolny
f5a461ee01 fix chart sparkline for percentage 2020-11-28 17:20:28 +01:00
codecalm
5c97599ca0 bootstrap update 2020-11-28 00:03:29 +01:00
codecalm
b114114e58 bootstrap update 2020-11-28 00:01:22 +01:00
codecalm
bf32b9afe0 transparent topbar 2020-11-22 20:34:58 +01:00
codecalm
f3de51546b navbar combined 2020-11-22 20:30:36 +01:00
codecalm
cf595d616b navbar fixes 2020-11-22 00:43:12 +01:00
codecalm
da46ca4dd4 navbar fix 2020-11-22 00:39:29 +01:00
codecalm
b93a6fc962 google maps, map fullsize 2020-11-22 00:36:17 +01:00
codecalm
9233d468bc classname fixes 2020-11-22 00:04:17 +01:00
codecalm
220a30813b transparent navbar 2020-11-21 22:34:25 +01:00
codecalm
81f6a2c070 vertical navbar fixes 2020-11-21 22:30:23 +01:00
codecalm
73e15ce04a layout fixes 2020-11-21 22:20:21 +01:00
codecalm
5be8aa444f Merge branches 'dev' and 'dev-layout' of https://github.com/tabler/tabler into dev-layout 
 Conflicts:
	src/pages/_includes/layout/navbar.html
	src/pages/_includes/layout/sidebar.html
	src/pages/_layouts/default.html
 2020-11-21 22:15:46 +01:00
codecalm
728e757c69 images optimization 2020-11-21 22:06:01 +01:00
codecalm
28246e2648 images optimization 2020-11-21 22:01:58 +01:00
codecalm
f718d6b590 lighthouse fixes 2020-11-21 21:55:33 +01:00
codecalm
ac6bd14e25 lighthouse fixes 2020-11-21 21:53:28 +01:00
codecalm
057192efbb lighthouse fixes 2020-11-21 21:45:15 +01:00
codecalm
2fd8ce5d17 lighthouse fixes 2020-11-21 21:42:36 +01:00
codecalm
2cbaa1a0b1 small fixes 2020-11-21 21:38:36 +01:00
codecalm
f5d1e169c5 docs fixes 2020-11-21 21:28:30 +01:00
codecalm
9e396532b9 fix #702 2020-11-21 21:16:41 +01:00
codecalm
8381f5b989 fix #723 2020-11-21 21:12:20 +01:00
codecalm
57a4c54ad8 sticky navbar 2020-11-21 20:48:32 +01:00
codecalm
7f56afc852 snippet fixes 2020-11-21 17:15:14 +01:00
codecalm
df261777e2 readme fixes 2020-11-21 16:31:16 +01:00
codecalm
3cce1c5963 vertical transparent layout 2020-11-12 13:47:51 +01:00
954 changed files with 23405 additions and 12151 deletions
Expand all files Collapse all files

6
README.md
View File

@@ -2,7 +2,7 @@
A premium and open source dashboard template with a responsive and high-quality UI.
<a href="https://preview.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://preview.tabler.io">View Demo</a> | <a href="https://github.com/tabler/tabler/archive/dev.zip">Download ZIP</a>
![Tabler preview](/src/static/tabler-preview.png?raw=true)
@@ -26,7 +26,7 @@ We've created this admin panel for everyone who wants to create templates based
## Sponsor Tabler
<a href="https://github.com/sponsors/codecalm" target="_blank"><img src="/static/sponsor-banner-readme.png?raw=true" alt="Sponsor Tabler" /></a>
<a href="https://github.com/sponsors/codecalm" target="_blank"><img src="/src/static/sponsor-banner-readme.png?raw=true" alt="Sponsor Tabler" /></a>
### Sponsors
@@ -67,7 +67,7 @@ Once you complete the setup, you'll be able to run the various commands provided
1. From the root `/tabler` directory, run `npm run start` in the command line.
2. Open [http://localhost:3000](http://localhost:3000) in your browser, and voilà.
3. Any change in the `/pages` directory will build the application and refresh the page.
3. Any change in the `/src` directory will build the application and refresh the page.
**Note**:
Run `npm run build` for reforms a one off build application without refresh.

4
_config.yml
View File

@@ -19,7 +19,9 @@ changelog-url: https://github.com/tabler/tabler/releases
sponsor-url: https://github.com/sponsors/codecalm
preview-url: https://preview.tabler.io
mapbox_key: pk.eyJ1IjoiY29kZWNhbG0iLCJhIjoiSzRiOVJvQSJ9.BUVkTT6IYs83xSUs4H7bjQ
mapbox-key: pk.eyJ1IjoiY29kZWNhbG0iLCJhIjoiSzRiOVJvQSJ9.BUVkTT6IYs83xSUs4H7bjQ
google-maps-key: AIzaSyAr5mRB4U1KRkVznIrDWEvZjroYcD202DI
google-maps-dev-key: AIzaSyCL-BY8-sq12m0S9H-S_yMqDmcun3A9znw
debug: false

75
demo/activity.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href=".">
<img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="./cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="./colors.html" >
Colors
</a>
<a class="dropdown-item" href="./dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="./maps.html" >
Maps
</a>
<a class="dropdown-item" href="./map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="./maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="./navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="./tables.html" >
Tables
</a>
<a class="dropdown-item" href="./calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="./carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="./markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="./auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="./layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="./layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="./layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="./layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="./layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="./layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -587,11 +593,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="./license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -602,7 +608,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -615,8 +621,5 @@
<script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

206
demo/all.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href=".">
<img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="./cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="./colors.html" >
Colors
</a>
<a class="dropdown-item" href="./dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="./maps.html" >
Maps
</a>
<a class="dropdown-item" href="./map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="./maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="./navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="./tables.html" >
Tables
</a>
<a class="dropdown-item" href="./calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="./carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="./markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="./auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="./layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="./layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="./layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="./layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="./layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="./layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -337,22 +343,12 @@
</div>
<div class="card-body">
<ul>
<li>
<a href="/layout-horizontal.html">
layout-horizontal.html
</a>
</li>
<li>
<a href="/redirects.json">
<svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1 text-red" width="24" height="24" viewBox="0 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>
<svg xmlns="http://www.w3.org/2000/svg" class="icon me-1 text-red" width="24" height="24" viewBox="0 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>
redirects.json
</a>
</li>
<li>
<a href="/layout-navbar-overlap.html">
layout-navbar-overlap.html
</a>
</li>
<li>
<a href="/layout-combo.html">
layout-combo.html
@@ -383,47 +379,24 @@
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="/docs.html">
<svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1 text-red" width="24" height="24" viewBox="0 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>
redirect.html
<a href="/layout-navbar-overlap.html">
layout-navbar-overlap.html
</a>
</li>
<li>
<a href="/tables.html">
tables.html
</a>
</li>
<li>
<a href="/skeleton.html">
skeleton.html
</a>
</li>
<li>
<a href="/sitemap.xml">
<svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1 text-red" width="24" height="24" viewBox="0 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>
sitemap.xml
</a>
</li>
<li>
<a href="/search-results.html">
search-results.html
</a>
</li>
<li>
<a href="/robots.txt">
<svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1 text-red" width="24" height="24" viewBox="0 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>
robots.txt
</a>
</li>
<li>
<a href="/layout-vertical.html">
layout-vertical.html
<a href="/layout-navbar-sticky.html">
layout-navbar-sticky.html
</a>
</li>
<li>
@@ -431,9 +404,57 @@
layout-vertical-right.html
</a>
</li>
<li>
<a href="/layout-vertical-transparent.html">
layout-vertical-transparent.html
</a>
</li>
<li>
<a href="/layout-vertical.html">
layout-vertical.html
</a>
</li>
<li>
<a href="/map-fullsize.html">
map-fullsize.html
</a>
</li>
<li>
<a href="/robots.txt">
<svg xmlns="http://www.w3.org/2000/svg" class="icon me-1 text-red" width="24" height="24" viewBox="0 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>
robots.txt
</a>
</li>
<li>
<a href="/search-results.html">
search-results.html
</a>
</li>
<li>
<a href="/sitemap.xml">
<svg xmlns="http://www.w3.org/2000/svg" class="icon me-1 text-red" width="24" height="24" viewBox="0 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>
sitemap.xml
</a>
</li>
<li>
<a href="/skeleton.html">
skeleton.html
</a>
</li>
<li>
<a href="/tables.html">
tables.html
</a>
</li>
<li>
<a href="/docs.html">
<svg xmlns="http://www.w3.org/2000/svg" class="icon me-1 text-red" width="24" height="24" viewBox="0 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>
redirect.html
</a>
</li>
<li>
<a href="/activity.html">
<svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1 text-red" width="24" height="24" viewBox="0 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>
<svg xmlns="http://www.w3.org/2000/svg" class="icon me-1 text-red" width="24" height="24" viewBox="0 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>
Activity
</a>
</li>
@@ -472,6 +493,12 @@
Charts
</a>
</li>
<li>
<a href="/colors.html">
<svg xmlns="http://www.w3.org/2000/svg" class="icon me-1 text-red" width="24" height="24" viewBox="0 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>
Colors
</a>
</li>
<li>
<a href="/dropdowns.html">
Dropdowns
@@ -483,13 +510,13 @@
</a>
</li>
<li>
<a href="/auth-lock.html">
<a href="/forgot-password.html">
<svg xmlns="http://www.w3.org/2000/svg" class="icon me-1 text-red" width="24" height="24" viewBox="0 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>
Forgot password
</a>
</li>
<li>
<a href="/forgot-password.html">
<svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1 text-red" width="24" height="24" viewBox="0 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>
<a href="/auth-lock.html">
Forgot password
</a>
</li>
@@ -505,7 +532,7 @@
</li>
<li>
<a href="/charts-heatmap.html">
<svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1 text-red" width="24" height="24" viewBox="0 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>
<svg xmlns="http://www.w3.org/2000/svg" class="icon me-1 text-red" width="24" height="24" viewBox="0 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>
Heatmap Charts
</a>
</li>
@@ -535,7 +562,7 @@
</a>
</li>
<li>
<a href="/maintenance.html">
<a href="/error-maintenance.html">
Maintenance mode
</a>
</li>
@@ -565,12 +592,12 @@
</a>
</li>
<li>
<a href="/404.html">
<a href="/error-404.html">
Page 404
</a>
</li>
<li>
<a href="/500.html">
<a href="/error-500.html">
Page 500
</a>
</li>
@@ -581,7 +608,7 @@
</li>
<li>
<a href="/playground.html">
<svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1 text-red" width="24" height="24" viewBox="0 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>
<svg xmlns="http://www.w3.org/2000/svg" class="icon me-1 text-red" width="24" height="24" viewBox="0 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>
Playground
</a>
</li>
@@ -597,13 +624,13 @@
</li>
<li>
<a href="/sign-in.html">
<svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1 text-red" width="24" height="24" viewBox="0 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>
<svg xmlns="http://www.w3.org/2000/svg" class="icon me-1 text-red" width="24" height="24" viewBox="0 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>
Sign in
</a>
</li>
<li>
<a href="/sign-up.html">
<svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1 text-red" width="24" height="24" viewBox="0 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>
<svg xmlns="http://www.w3.org/2000/svg" class="icon me-1 text-red" width="24" height="24" viewBox="0 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>
Sign up
</a>
</li>
@@ -614,7 +641,7 @@
</li>
<li>
<a href="/terms-of-service.html">
<svg xmlns="http://www.w3.org/2000/svg" class="icon mr-1 text-red" width="24" height="24" viewBox="0 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>
<svg xmlns="http://www.w3.org/2000/svg" class="icon me-1 text-red" width="24" height="24" viewBox="0 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>
Terms of service
</a>
</li>
@@ -652,11 +679,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="./license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -667,7 +694,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -680,8 +707,5 @@
<script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

10
demo/auth-lock.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,11 +19,6 @@
<link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-vendors.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 flex-column justify-content-center py-4">
@@ -58,8 +53,5 @@
<script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

75
demo/blank.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href=".">
<img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</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" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="./cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="./colors.html" >
Colors
</a>
<a class="dropdown-item" href="./dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="./maps.html" >
Maps
</a>
<a class="dropdown-item" href="./map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="./maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="./navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="./tables.html" >
Tables
</a>
<a class="dropdown-item" href="./calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="./carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="./markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="./auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="./layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="./layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="./layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="./layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="./layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="./layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -335,11 +341,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="./license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -350,7 +356,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -363,8 +369,5 @@
<script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

75
demo/buttons.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href=".">
<img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</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" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="./cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="./colors.html" >
Colors
</a>
<a class="dropdown-item" href="./dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="./maps.html" >
Maps
</a>
<a class="dropdown-item" href="./map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="./maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="./navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="./tables.html" >
Tables
</a>
<a class="dropdown-item" href="./calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="./carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="./markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="./auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="./layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="./layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="./layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="./layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="./layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="./layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -1106,11 +1112,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="./license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -1121,7 +1127,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -1134,8 +1140,5 @@
<script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

87
demo/cards-masonry.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href=".">
<img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</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" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item active" href="./cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="./colors.html" >
Colors
</a>
<a class="dropdown-item" href="./dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="./maps.html" >
Maps
</a>
<a class="dropdown-item" href="./map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="./maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="./navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="./tables.html" >
Tables
</a>
<a class="dropdown-item" href="./calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="./carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="./markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="./auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="./layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="./layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="./layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="./layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="./layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="./layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -357,7 +363,7 @@
<div class="col-auto">
<a href="#">More information</a>
</div>
<div class="col-auto ml-auto">
<div class="col-auto ms-auto">
<label class="form-check form-switch m-0">
<input class="form-check-input position-static" type="checkbox" checked>
</label>
@@ -375,7 +381,7 @@
<!-- Card footer -->
<div class="card-footer">
<div class="row align-items-center">
<div class="col-auto ml-auto">
<div class="col-auto ms-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>
@@ -400,7 +406,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"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="icon me-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>
@@ -409,7 +415,7 @@
Disabled
</a>
</li>
<li class="nav-item ml-auto">
<li class="nav-item ms-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>
@@ -433,7 +439,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"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="icon me-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>
@@ -442,7 +448,7 @@
Disabled
</a>
</li>
<li class="nav-item ml-auto">
<li class="nav-item ms-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>
@@ -578,11 +584,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="./license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -593,7 +599,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -607,8 +613,5 @@
<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>

107
demo/cards.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href=".">
<img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</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" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="./cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="./colors.html" >
Colors
</a>
<a class="dropdown-item" href="./dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="./maps.html" >
Maps
</a>
<a class="dropdown-item" href="./map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="./maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="./navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="./tables.html" >
Tables
</a>
<a class="dropdown-item" href="./calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="./carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="./markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="./auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="./layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="./layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="./layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="./layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="./layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="./layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -373,7 +379,7 @@
<div class="col-auto">
<a href="#">More information</a>
</div>
<div class="col-auto ml-auto">
<div class="col-auto ms-auto">
<label class="form-check form-switch m-0">
<input class="form-check-input position-static" type="checkbox" checked>
</label>
@@ -391,7 +397,7 @@
<!-- Card footer -->
<div class="card-footer">
<div class="row align-items-center">
<div class="col-auto ml-auto">
<div class="col-auto ms-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>
@@ -416,7 +422,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"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="icon me-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>
@@ -425,7 +431,7 @@
Disabled
</a>
</li>
<li class="nav-item ml-auto">
<li class="nav-item ms-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>
@@ -449,7 +455,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"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="icon me-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>
@@ -458,7 +464,7 @@
Disabled
</a>
</li>
<li class="nav-item ml-auto">
<li class="nav-item ms-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>
@@ -508,10 +514,10 @@
<div class="card-tabs">
<!-- Cards navigation -->
<ul class="nav nav-tabs">
<li class="nav-item"><a href="#tab-top-1" class="nav-link active" data-toggle="tab">Tab 1</a></li>
<li class="nav-item"><a href="#tab-top-2" class="nav-link" data-toggle="tab">Tab 2</a></li>
<li class="nav-item"><a href="#tab-top-3" class="nav-link" data-toggle="tab">Tab 3</a></li>
<li class="nav-item"><a href="#tab-top-4" class="nav-link" data-toggle="tab">Tab 4</a></li>
<li class="nav-item"><a href="#tab-top-1" class="nav-link active" data-bs-toggle="tab">Tab 1</a></li>
<li class="nav-item"><a href="#tab-top-2" class="nav-link" data-bs-toggle="tab">Tab 2</a></li>
<li class="nav-item"><a href="#tab-top-3" class="nav-link" data-bs-toggle="tab">Tab 3</a></li>
<li class="nav-item"><a href="#tab-top-4" class="nav-link" data-bs-toggle="tab">Tab 4</a></li>
</ul>
<div class="tab-content">
<!-- Content of card #1 -->
@@ -596,10 +602,10 @@
</div>
<!-- Cards navigation -->
<ul class="nav nav-tabs nav-tabs-bottom">
<li class="nav-item"><a href="#tab-bottom-1" class="nav-link active" data-toggle="tab">Tab 1</a></li>
<li class="nav-item"><a href="#tab-bottom-2" class="nav-link" data-toggle="tab">Tab 2</a></li>
<li class="nav-item"><a href="#tab-bottom-3" class="nav-link" data-toggle="tab">Tab 3</a></li>
<li class="nav-item"><a href="#tab-bottom-4" class="nav-link" data-toggle="tab">Tab 4</a></li>
<li class="nav-item"><a href="#tab-bottom-1" class="nav-link active" data-bs-toggle="tab">Tab 1</a></li>
<li class="nav-item"><a href="#tab-bottom-2" class="nav-link" data-bs-toggle="tab">Tab 2</a></li>
<li class="nav-item"><a href="#tab-bottom-3" class="nav-link" data-bs-toggle="tab">Tab 3</a></li>
<li class="nav-item"><a href="#tab-bottom-4" class="nav-link" data-bs-toggle="tab">Tab 4</a></li>
</ul>
</div>
</div>
@@ -706,7 +712,7 @@
</div>
<div class="col-12">
<div class="card">
<div class="card-status-left bg-primary"></div>
<div class="card-status-start bg-primary"></div>
<div class="card-body">
<h3 class="card-title">Card with side status</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
@@ -850,7 +856,7 @@
<div class="card-footer">
<div class="d-flex">
<a href="#" class="btn btn-link">Cancel</a>
<a href="#" class="btn btn-primary ml-auto">Go somewhere</a>
<a href="#" class="btn btn-primary ms-auto">Go somewhere</a>
</div>
</div>
</div>
@@ -866,11 +872,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="./license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -881,7 +887,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -894,8 +900,5 @@
<script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

141
demo/carousel.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href=".">
<img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</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" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="./cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="./colors.html" >
Colors
</a>
<a class="dropdown-item" href="./dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="./maps.html" >
Maps
</a>
<a class="dropdown-item" href="./map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="./maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="./navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="./tables.html" >
Tables
</a>
<a class="dropdown-item" href="./calendar.html" >
Calendar
</a>
<a class="dropdown-item active" href="./carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="./markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="./auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="./layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="./layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="./layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="./layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="./layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="./layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -334,22 +340,22 @@
<h3 class="card-title">Carousel</h3>
</div>
<div class="card-body">
<div id="carousel-default" class="carousel slide" data-ride="carousel">
<div id="carousel-default" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" alt="" src="./static/photos/1b73704b282a8ec6.jpg" data-holder-rendered="true">
<img class="d-block w-100" alt="" src="./static/photos/1b73704b282a8ec6.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="" src="./static/photos/3d2998219313cd37.jpg" data-holder-rendered="true">
<img class="d-block w-100" alt="" src="./static/photos/3d2998219313cd37.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="" src="./static/photos/6ab3200b14549f8a.jpg" data-holder-rendered="true">
<img class="d-block w-100" alt="" src="./static/photos/6ab3200b14549f8a.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="" src="./static/photos/6d35d9a2bd6c63c2.jpg" data-holder-rendered="true">
<img class="d-block w-100" alt="" src="./static/photos/6d35d9a2bd6c63c2.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="" src="./static/photos/8a26974ee6444acd.jpg" data-holder-rendered="true">
<img class="d-block w-100" alt="" src="./static/photos/8a26974ee6444acd.jpg">
</div>
</div>
</div>
@@ -362,29 +368,29 @@
<h3 class="card-title">Carousel with indicators</h3>
</div>
<div class="card-body">
<div id="carousel-indicators" class="carousel slide" data-ride="carousel">
<div id="carousel-indicators" class="carousel slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-indicators" data-slide-to="0" class="active"></li>
<li data-target="#carousel-indicators" data-slide-to="1" class=""></li>
<li data-target="#carousel-indicators" data-slide-to="2" class=""></li>
<li data-target="#carousel-indicators" data-slide-to="3" class=""></li>
<li data-target="#carousel-indicators" data-slide-to="4" class=""></li>
<li data-bs-target="#carousel-indicators" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carousel-indicators" data-bs-slide-to="1" class=""></li>
<li data-bs-target="#carousel-indicators" data-bs-slide-to="2" class=""></li>
<li data-bs-target="#carousel-indicators" data-bs-slide-to="3" class=""></li>
<li data-bs-target="#carousel-indicators" data-bs-slide-to="4" class=""></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" alt="" src="./static/photos/8c13ad59f739558c.jpg" data-holder-rendered="true">
<img class="d-block w-100" alt="" src="./static/photos/8c13ad59f739558c.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="" src="./static/photos/8fdeb4785d2b82ef.jpg" data-holder-rendered="true">
<img class="d-block w-100" alt="" src="./static/photos/8fdeb4785d2b82ef.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="" src="./static/photos/9f36332564ca271d.jpg" data-holder-rendered="true">
<img class="d-block w-100" alt="" src="./static/photos/9f36332564ca271d.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="" src="./static/photos/35b88fc04a518c1b.jpg" data-holder-rendered="true">
<img class="d-block w-100" alt="" src="./static/photos/35b88fc04a518c1b.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="" src="./static/photos/36e273986ed577b8.jpg" data-holder-rendered="true">
<img class="d-block w-100" alt="" src="./static/photos/36e273986ed577b8.jpg">
</div>
</div>
</div>
@@ -397,29 +403,29 @@
<h3 class="card-title">Carousel with controls</h3>
</div>
<div class="card-body">
<div id="carousel-controls" class="carousel slide" data-ride="carousel">
<div id="carousel-controls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" alt="" src="./static/photos/75b555b99d5b38c4.jpg" data-holder-rendered="true">
<img class="d-block w-100" alt="" src="./static/photos/75b555b99d5b38c4.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="" src="./static/photos/546fd146c83f428c.jpg" data-holder-rendered="true">
<img class="d-block w-100" alt="" src="./static/photos/546fd146c83f428c.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="" src="./static/photos/802a16cdf5ce3551.jpg" data-holder-rendered="true">
<img class="d-block w-100" alt="" src="./static/photos/802a16cdf5ce3551.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="" src="./static/photos/0986f97be719fb9a.jpg" data-holder-rendered="true">
<img class="d-block w-100" alt="" src="./static/photos/0986f97be719fb9a.jpg">
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="" src="./static/photos/1194d63fe36a8670.jpg" data-holder-rendered="true">
<img class="d-block w-100" alt="" src="./static/photos/1194d63fe36a8670.jpg">
</div>
</div>
<a class="carousel-control-prev" href="#carousel-controls" role="button" data-slide="prev">
<a class="carousel-control-prev" href="#carousel-controls" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-controls" role="button" data-slide="next">
<a class="carousel-control-next" href="#carousel-controls" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
@@ -433,10 +439,10 @@
<h3 class="card-title">Carousel with captions</h3>
</div>
<div class="card-body">
<div id="carousel-captions" class="carousel slide" data-ride="carousel">
<div id="carousel-captions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" alt="" src="./static/photos/1366fdc9b9b277e4.jpg" data-holder-rendered="true">
<img class="d-block w-100" alt="" src="./static/photos/1366fdc9b9b277e4.jpg">
<div class="carousel-item-background d-none d-md-block"></div>
<div class="carousel-caption d-none d-md-block">
<h3>Slide label</h3>
@@ -444,7 +450,7 @@
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="" src="./static/photos/5358d787242861c4.jpg" data-holder-rendered="true">
<img class="d-block w-100" alt="" src="./static/photos/5358d787242861c4.jpg">
<div class="carousel-item-background d-none d-md-block"></div>
<div class="carousel-caption d-none d-md-block">
<h3>Slide label</h3>
@@ -452,7 +458,7 @@
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="" src="./static/photos/5614ec7eb9034d04.jpg" data-holder-rendered="true">
<img class="d-block w-100" alt="" src="./static/photos/5614ec7eb9034d04.jpg">
<div class="carousel-item-background d-none d-md-block"></div>
<div class="carousel-caption d-none d-md-block">
<h3>Slide label</h3>
@@ -460,7 +466,7 @@
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="" src="./static/photos/56614e12b2a7bd68.jpg" data-holder-rendered="true">
<img class="d-block w-100" alt="" src="./static/photos/56614e12b2a7bd68.jpg">
<div class="carousel-item-background d-none d-md-block"></div>
<div class="carousel-caption d-none d-md-block">
<h3>Slide label</h3>
@@ -468,7 +474,7 @@
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="" src="./static/photos/77586f6ffa9fbc5e.jpg" data-holder-rendered="true">
<img class="d-block w-100" alt="" src="./static/photos/77586f6ffa9fbc5e.jpg">
<div class="carousel-item-background d-none d-md-block"></div>
<div class="carousel-caption d-none d-md-block">
<h3>Slide label</h3>
@@ -476,11 +482,11 @@
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carousel-captions" role="button" data-slide="prev">
<a class="carousel-control-prev" href="#carousel-captions" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-captions" role="button" data-slide="next">
<a class="carousel-control-next" href="#carousel-captions" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
@@ -493,11 +499,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="./license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -508,7 +514,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -521,8 +527,5 @@
<script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

101
demo/changelog.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href=".">
<img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="./cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="./colors.html" >
Colors
</a>
<a class="dropdown-item" href="./dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="./maps.html" >
Maps
</a>
<a class="dropdown-item" href="./map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="./maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="./navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="./tables.html" >
Tables
</a>
<a class="dropdown-item" href="./calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="./carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="./markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="./auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="./layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="./layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="./layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="./layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="./layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="./layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -327,17 +333,17 @@
</div>
</div>
</div>
<div class="row g-5">
<div class="row">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<ul class="nav nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<ul class="nav nav-pills collapse" id="menu-base">
<li class="nav-item">
<a href="./docs/index.html" class="nav-link">
Introduction
@@ -366,13 +372,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-components">
<ul class="nav nav-pills collapse" id="menu-components">
<li class="nav-item">
<a href="./docs/alerts.html" class="nav-link">
Alerts
@@ -506,13 +512,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<ul class="nav nav-pills collapse" id="menu-utils">
<li class="nav-item">
<a href="./docs/cursors.html" class="nav-link">
Cursors
@@ -521,13 +527,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<ul class="nav nav-pills collapse" id="menu-plugins">
<li class="nav-item">
<a href="./docs/autosize.html" class="nav-link">
Autosize
@@ -555,7 +561,7 @@
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
</span>
Changelog
<span class="badge bg-blue-lt ml-auto">1.0.0-alpha.14</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-alpha.18</span>
</a>
</li>
</ul>
@@ -564,8 +570,8 @@
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="mb-5">
<div class="d-flex mb-3">
<div>
<div class="d-flex mb-4">
<h1 class="mt-0">Changelog</h1>
</div>
</div>
@@ -578,11 +584,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="./license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -593,7 +599,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -606,8 +612,5 @@
<script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

75
demo/charts-heatmap.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href=".">
<img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="./cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="./colors.html" >
Colors
</a>
<a class="dropdown-item" href="./dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="./maps.html" >
Maps
</a>
<a class="dropdown-item" href="./map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="./maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="./navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="./tables.html" >
Tables
</a>
<a class="dropdown-item" href="./calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="./carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="./markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="./auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="./layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="./layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="./layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="./layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="./layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="./layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -365,11 +371,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="./license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -380,7 +386,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -605,8 +611,5 @@
};
(new ApexCharts(document.querySelector("#chart-heatmap-colors"),options)).render();
</script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

81
demo/charts.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href=".">
<img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</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" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="./cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="./colors.html" >
Colors
</a>
<a class="dropdown-item" href="./dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="./maps.html" >
Maps
</a>
<a class="dropdown-item" href="./map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="./maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="./navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item active" href="./charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="./tables.html" >
Tables
</a>
<a class="dropdown-item" href="./calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="./carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="./markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="./auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="./layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="./layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="./layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="./layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="./layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="./layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -333,10 +339,10 @@
<div class="card-body">
<div class="d-flex">
<h3 class="card-title">Social referrals</h3>
<div class="ml-auto">
<div class="ms-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-toggle text-muted" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Last 7 days</a>
<div class="dropdown-menu dropdown-menu-end">
<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>
@@ -514,11 +520,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="./license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -529,7 +535,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -2123,8 +2129,5 @@
});
// @formatter:on
</script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

669
demo/colors.html Normal file
View File

@@ -0,0 +1,669 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.18
* @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>Colors - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
<!-- 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/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
<span class="navbar-toggler-icon"></span>
</button>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href=".">
<img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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-end 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-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block ps-2">
<div>Paweł Kuna</div>
<div class="mt-1 small text-muted">UI Designer</div>
</div>
</a>
<div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
<a href="#" class="dropdown-item">Set status</a>
<a href="#" class="dropdown-item">Profile & account</a>
<a href="#" class="dropdown-item">Feedback</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Settings</a>
<a href="#" class="dropdown-item">Logout</a>
</div>
</div>
</div>
</div>
</header>
<div class="navbar-expand-md">
<div class="collapse navbar-collapse" id="navbar-menu">
<div class="navbar navbar-light">
<div class="container-xl">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="./index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
</span>
<span class="nav-link-title">
Home
</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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">
Interface
</span>
</a>
<div class="dropdown-menu">
<div class="dropdown-menu-columns">
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./empty.html" >
Empty page
</a>
<a class="dropdown-item" href="./blank.html" >
Blank page
</a>
<a class="dropdown-item" href="./buttons.html" >
Buttons
</a>
<a class="dropdown-item" href="./cards.html" >
Cards
</a>
<a class="dropdown-item" href="./cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="./colors.html" >
Colors
</a>
<a class="dropdown-item" href="./dropdowns.html" >
Dropdowns
</a>
<a class="dropdown-item" href="./icons.html" >
Icons
</a>
<a class="dropdown-item" href="./modals.html" >
Modals
</a>
<a class="dropdown-item" href="./maps.html" >
Maps
</a>
<a class="dropdown-item" href="./map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="./maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="./navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./charts.html" >
Charts
</a>
<a class="dropdown-item" href="./charts-heatmap.html" >
Charts heatmap
</a>
<a class="dropdown-item" href="./pagination.html" >
Pagination
</a>
<a class="dropdown-item" href="./skeleton.html" >
Skeleton
</a>
<a class="dropdown-item" href="./tabs.html" >
Tabs
</a>
<a class="dropdown-item" href="./tables.html" >
Tables
</a>
<a class="dropdown-item" href="./carousel.html" >
Carousel
</a>
<a class="dropdown-item" href="./lists.html" >
Lists
</a>
<a class="dropdown-item" href="./typography.html" >
Typography
</a>
<a class="dropdown-item" href="./markdown.html" >
Markdown
</a>
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-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>
<a href="./auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-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>
</div>
</div>
</div>
</div>
</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-bs-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>
<div class="dropdown-menu">
<a class="dropdown-item" href="./activity.html" >
Activity
</a>
<a class="dropdown-item" href="./gallery.html" >
Gallery
</a>
<a class="dropdown-item" href="./invoice.html" >
Invoice
</a>
<a class="dropdown-item" href="./search-results.html" >
Search results
</a>
<a class="dropdown-item" href="./pricing.html" >
Pricing cards
</a>
<a class="dropdown-item" href="./users.html" >
Users
</a>
<a class="dropdown-item" href="./license.html" >
License
</a>
<a class="dropdown-item" href="./music.html" >
Music
</a>
<a class="dropdown-item" href="./widgets.html" >
Widgets
</a>
<a class="dropdown-item" href="./wizard.html" >
Wizard
</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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>
<div class="dropdown-menu">
<div class="dropdown-menu-columns">
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./layout-horizontal.html" >
Horizontal
</a>
<a class="dropdown-item" href="./layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="./layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="./layout-vertical-right.html" >
Right vertical
</a>
<a class="dropdown-item" href="./layout-condensed.html" >
Condensed
</a>
<a class="dropdown-item" href="./layout-condensed-dark.html" >
Condensed dark
</a>
<a class="dropdown-item" href="./layout-combo.html" >
Combined
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="./layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="./layout-navbar-overlap.html" >
Navbar overlap
</a>
<a class="dropdown-item" href="./layout-dark.html" >
Dark mode
</a>
<a class="dropdown-item" href="./layout-rtl.html" >
RTL mode
</a>
<a class="dropdown-item" href="./layout-fluid.html" >
Fluid
</a>
<a class="dropdown-item" href="./layout-fluid-vertical.html" >
Fluid vertical
</a>
</div>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="./docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Documentation
</span>
</a>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
<form action="." method="get">
<div class="input-icon">
<span class="input-icon-addon">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
</span>
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="content">
<div class="container-xl">
<!-- Page title -->
<div class="page-header d-print-none">
<div class="row align-items-center">
<div class="col">
<h2 class="page-title">
Colors
</h2>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="table-responsive">
<table class="table text-center">
<tr>
<td>
<div class="avatar text-white bg-blue" data-demo-color>bl
</div>
</td>
<td>
<div class="avatar text-white bg-azure" data-demo-color>az
</div>
</td>
<td>
<div class="avatar text-white bg-indigo" data-demo-color>in
</div>
</td>
<td>
<div class="avatar text-white bg-purple" data-demo-color>pu
</div>
</td>
<td>
<div class="avatar text-white bg-pink" data-demo-color>pi
</div>
</td>
<td>
<div class="avatar text-white bg-red" data-demo-color>re
</div>
</td>
<td>
<div class="avatar text-white bg-orange" data-demo-color>or
</div>
</td>
<td>
<div class="avatar text-white bg-yellow" data-demo-color>ye
</div>
</td>
<td>
<div class="avatar text-white bg-lime" data-demo-color>li
</div>
</td>
<td>
<div class="avatar text-white bg-green" data-demo-color>gr
</div>
</td>
<td>
<div class="avatar text-white bg-teal" data-demo-color>te
</div>
</td>
<td>
<div class="avatar text-white bg-cyan" data-demo-color>cy
</div>
</td>
<td>
<div class="avatar text-white bg-dark" data-demo-color>da
</div>
</td>
<td>
<div class="avatar text-white bg-muted" data-demo-color>mu
</div>
</td>
</tr>
<tr>
<td>
<div class="avatar bg-blue-lt" data-demo-color>bl</div>
</td>
<td>
<div class="avatar bg-azure-lt" data-demo-color>az</div>
</td>
<td>
<div class="avatar bg-indigo-lt" data-demo-color>in</div>
</td>
<td>
<div class="avatar bg-purple-lt" data-demo-color>pu</div>
</td>
<td>
<div class="avatar bg-pink-lt" data-demo-color>pi</div>
</td>
<td>
<div class="avatar bg-red-lt" data-demo-color>re</div>
</td>
<td>
<div class="avatar bg-orange-lt" data-demo-color>or</div>
</td>
<td>
<div class="avatar bg-yellow-lt" data-demo-color>ye</div>
</td>
<td>
<div class="avatar bg-lime-lt" data-demo-color>li</div>
</td>
<td>
<div class="avatar bg-green-lt" data-demo-color>gr</div>
</td>
<td>
<div class="avatar bg-teal-lt" data-demo-color>te</div>
</td>
<td>
<div class="avatar bg-cyan-lt" data-demo-color>cy</div>
</td>
<td>
<div class="avatar bg-dark-lt" data-demo-color>da</div>
</td>
<td>
<div class="avatar bg-muted-lt" data-demo-color>mu</div>
</td>
</tr>
<tr>
<td>
<div class="avatar text-blue bg-white" data-demo-color>bl</div>
</td>
<td>
<div class="avatar text-azure bg-white" data-demo-color>az</div>
</td>
<td>
<div class="avatar text-indigo bg-white" data-demo-color>in</div>
</td>
<td>
<div class="avatar text-purple bg-white" data-demo-color>pu</div>
</td>
<td>
<div class="avatar text-pink bg-white" data-demo-color>pi</div>
</td>
<td>
<div class="avatar text-red bg-white" data-demo-color>re</div>
</td>
<td>
<div class="avatar text-orange bg-white" data-demo-color>or</div>
</td>
<td>
<div class="avatar text-yellow bg-white" data-demo-color>ye</div>
</td>
<td>
<div class="avatar text-lime bg-white" data-demo-color>li</div>
</td>
<td>
<div class="avatar text-green bg-white" data-demo-color>gr</div>
</td>
<td>
<div class="avatar text-teal bg-white" data-demo-color>te</div>
</td>
<td>
<div class="avatar text-cyan bg-white" data-demo-color>cy</div>
</td>
<td>
<div class="avatar text-dark bg-white" data-demo-color>da</div>
</td>
<td>
<div class="avatar text-muted bg-white" data-demo-color>mu</div>
</td>
</tr>
<tr class="bg-light">
<td>
<div class="avatar text-blue bg-light" data-demo-color>bl</div>
</td>
<td>
<div class="avatar text-azure bg-light" data-demo-color>az</div>
</td>
<td>
<div class="avatar text-indigo bg-light" data-demo-color>in</div>
</td>
<td>
<div class="avatar text-purple bg-light" data-demo-color>pu</div>
</td>
<td>
<div class="avatar text-pink bg-light" data-demo-color>pi</div>
</td>
<td>
<div class="avatar text-red bg-light" data-demo-color>re</div>
</td>
<td>
<div class="avatar text-orange bg-light" data-demo-color>or</div>
</td>
<td>
<div class="avatar text-yellow bg-light" data-demo-color>ye</div>
</td>
<td>
<div class="avatar text-lime bg-light" data-demo-color>li</div>
</td>
<td>
<div class="avatar text-green bg-light" data-demo-color>gr</div>
</td>
<td>
<div class="avatar text-teal bg-light" data-demo-color>te</div>
</td>
<td>
<div class="avatar text-cyan bg-light" data-demo-color>cy</div>
</td>
<td>
<div class="avatar text-dark bg-light" data-demo-color>da</div>
</td>
<td>
<div class="avatar text-muted bg-light" data-demo-color>mu</div>
</td>
</tr>
<tr class="bg-dark text-white">
<td>
<div class="avatar text-blue bg-dark" data-demo-color>bl</div>
</td>
<td>
<div class="avatar text-azure bg-dark" data-demo-color>az</div>
</td>
<td>
<div class="avatar text-indigo bg-dark" data-demo-color>in</div>
</td>
<td>
<div class="avatar text-purple bg-dark" data-demo-color>pu</div>
</td>
<td>
<div class="avatar text-pink bg-dark" data-demo-color>pi</div>
</td>
<td>
<div class="avatar text-red bg-dark" data-demo-color>re</div>
</td>
<td>
<div class="avatar text-orange bg-dark" data-demo-color>or</div>
</td>
<td>
<div class="avatar text-yellow bg-dark" data-demo-color>ye</div>
</td>
<td>
<div class="avatar text-lime bg-dark" data-demo-color>li</div>
</td>
<td>
<div class="avatar text-green bg-dark" data-demo-color>gr</div>
</td>
<td>
<div class="avatar text-teal bg-dark" data-demo-color>te</div>
</td>
<td>
<div class="avatar text-cyan bg-dark" data-demo-color>cy</div>
</td>
<td>
<div class="avatar text-white bg-dark" data-demo-color>wh</div>
</td>
<td>
<div class="avatar text-muted bg-dark" data-demo-color>mu</div>
</td>
</tr>
<tr class="bg-dark text-white">
<td>
<div class="avatar bg-blue-lt" data-demo-color>bl</div>
<div class="mt-2" data-demo-color-contrast></div>
</td>
<td>
<div class="avatar bg-azure-lt" data-demo-color>az</div>
<div class="mt-2" data-demo-color-contrast></div>
</td>
<td>
<div class="avatar bg-indigo-lt" data-demo-color>in</div>
<div class="mt-2" data-demo-color-contrast></div>
</td>
<td>
<div class="avatar bg-purple-lt" data-demo-color>pu</div>
<div class="mt-2" data-demo-color-contrast></div>
</td>
<td>
<div class="avatar bg-pink-lt" data-demo-color>pi</div>
<div class="mt-2" data-demo-color-contrast></div>
</td>
<td>
<div class="avatar bg-red-lt" data-demo-color>re</div>
<div class="mt-2" data-demo-color-contrast></div>
</td>
<td>
<div class="avatar bg-orange-lt" data-demo-color>or</div>
<div class="mt-2" data-demo-color-contrast></div>
</td>
<td>
<div class="avatar bg-yellow-lt" data-demo-color>ye</div>
<div class="mt-2" data-demo-color-contrast></div>
</td>
<td>
<div class="avatar bg-lime-lt" data-demo-color>li</div>
<div class="mt-2" data-demo-color-contrast></div>
</td>
<td>
<div class="avatar bg-green-lt" data-demo-color>gr</div>
<div class="mt-2" data-demo-color-contrast></div>
</td>
<td>
<div class="avatar bg-teal-lt" data-demo-color>te</div>
<div class="mt-2" data-demo-color-contrast></div>
</td>
<td>
<div class="avatar bg-cyan-lt" data-demo-color>cy</div>
<div class="mt-2" data-demo-color-contrast></div>
</td>
<td>
<div class="avatar bg-white-lt" data-demo-color>wh</div>
<div class="mt-2" data-demo-color-contrast></div>
</td>
<td>
<div class="avatar bg-muted-lt" data-demo-color>mu</div>
<div class="mt-2" data-demo-color-contrast></div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-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="./license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item">
Copyright © 2020
<a href="." class="link-secondary">Tabler</a>.
All rights reserved.
</li>
<li class="list-inline-item">
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
</div>
</div>
<!-- Libs JS -->
<script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
</body>
</html>

4
demo/dist/css/demo.css vendored
View File

@@ -1,6 +1,6 @@
/*!
* Tabler v1.0.0-alpha.14 (https://tabler.io)
* @version 1.0.0-alpha.14
* Tabler v1.0.0-alpha.18 (https://tabler.io)
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna

4
demo/dist/css/demo.min.css vendored
View File

@@ -1,6 +1,6 @@
/*!
* Tabler v1.0.0-alpha.14 (https://tabler.io)
* @version 1.0.0-alpha.14
* Tabler v1.0.0-alpha.18 (https://tabler.io)
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna

4
demo/dist/css/tabler-flags.css vendored
View File

@@ -1,6 +1,6 @@
/*!
* Tabler v1.0.0-alpha.14 (https://tabler.io)
* @version 1.0.0-alpha.14
* Tabler v1.0.0-alpha.18 (https://tabler.io)
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna

4
demo/dist/css/tabler-flags.min.css vendored
View File

@@ -1,6 +1,6 @@
/*!
* Tabler v1.0.0-alpha.14 (https://tabler.io)
* @version 1.0.0-alpha.14
* Tabler v1.0.0-alpha.18 (https://tabler.io)
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna

4
demo/dist/css/tabler-payments.css vendored
View File

@@ -1,6 +1,6 @@
/*!
* Tabler v1.0.0-alpha.14 (https://tabler.io)
* @version 1.0.0-alpha.14
* Tabler v1.0.0-alpha.18 (https://tabler.io)
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna

4
demo/dist/css/tabler-payments.min.css vendored
View File

@@ -1,6 +1,6 @@
/*!
* Tabler v1.0.0-alpha.14 (https://tabler.io)
* @version 1.0.0-alpha.14
* Tabler v1.0.0-alpha.18 (https://tabler.io)
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna

12
demo/dist/css/tabler-vendors.css vendored
View File

@@ -1,6 +1,6 @@
/*!
* Tabler v1.0.0-alpha.14 (https://tabler.io)
* @version 1.0.0-alpha.14
* Tabler v1.0.0-alpha.18 (https://tabler.io)
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -27,9 +27,9 @@
.selectize-control.is-valid {
padding: 0; }
.selectize-control.is-valid .selectize-input {
border-color: #5eba00; }
border-color: #2fb344; }
.selectize-control.is-valid .selectize-input.focus {
box-shadow: 0 0 0 0.25rem rgba(94, 186, 0, 0.25); }
box-shadow: 0 0 0 0.25rem rgba(47, 179, 68, 0.25); }
.selectize-control.is-valid .selectize-dropdown {
background: none;
background-color: inherit;
@@ -38,9 +38,9 @@
.selectize-control.is-invalid {
padding: 0; }
.selectize-control.is-invalid .selectize-input {
border-color: #e53e3e; }
border-color: #d63939; }
.selectize-control.is-invalid .selectize-input.focus {
box-shadow: 0 0 0 0.25rem rgba(229, 62, 62, 0.25); }
box-shadow: 0 0 0 0.25rem rgba(214, 57, 57, 0.25); }
.selectize-control.is-invalid .selectize-dropdown {
background: none;
background-color: inherit;

6
demo/dist/css/tabler-vendors.min.css vendored
View File

File diff suppressed because one or more lines are too long

2578
demo/dist/css/tabler.css vendored
View File

File diff suppressed because it is too large Load Diff

6
demo/dist/css/tabler.min.css vendored
View File

File diff suppressed because one or more lines are too long

35
demo/dist/js/tabler.js vendored
View File

@@ -1,6 +1,6 @@
/*!
* Tabler v1.0.0-alpha.14 (https://tabler.io)
* @version 1.0.0-alpha.14
* Tabler v1.0.0-alpha.18 (https://tabler.io)
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -13,26 +13,17 @@
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
function createCommonjsModule(fn, basedir, module) {
return module = {
path: basedir,
exports: {},
require: function (path, base) {
return commonjsRequire(path, (base === undefined || base === null) ? module.path : base);
}
}, fn(module, module.exports), module.exports;
function createCommonjsModule(fn) {
var module = { exports: {} };
return fn(module, module.exports), module.exports;
}
function commonjsRequire () {
throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
}
var autosize = createCommonjsModule(function (module, exports) {
/*!
autosize 4.0.2
license: MIT
http://www.jacklmoore.com/autosize
*/
var autosize = createCommonjsModule(function (module, exports) {
(function (global, factory) {
{
factory(module, exports);
@@ -249,7 +240,7 @@
});
});
var elements = document.querySelectorAll('[data-toggle="autosize"]');
var elements = document.querySelectorAll('[data-bs-toggle="autosize"]');
if (elements.length) {
elements.forEach(function (element) {
autosize(element);
@@ -3056,13 +3047,13 @@
});
});
var selectors = '.dropdown, .dropup, .dropright, .dropleft',
var selectors = '.dropdown, .dropup, .dropend, .dropstart',
dropdowns = document.querySelectorAll(selectors);
var currentTarget = undefined;
dropdowns.forEach(function (dropdown) {
dropdown.addEventListener('mousedown', function (e) {
e.stopPropagation();
if (e.target.dataset.toggle && e.target.dataset.toggle === 'dropdown') {
if (e.target.dataset.bsToggle && e.target.dataset.bsToggle === 'dropdown') {
currentTarget = e.currentTarget;
}
});
@@ -3077,7 +3068,7 @@
});
(function () {
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]'));
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
tooltipTriggerList.map(function (tooltipTriggerEl) {
var options = {
delay: {
@@ -3089,7 +3080,7 @@
};
return new bootstrap.Tooltip(tooltipTriggerEl, options);
});
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="popover"]'));
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
popoverTriggerList.map(function (popoverTriggerEl) {
var options = {
delay: {
@@ -3101,11 +3092,11 @@
};
return new bootstrap.Popover(popoverTriggerEl, options);
});
var dropdownTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="dropdown"]'));
var dropdownTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="dropdown"]'));
dropdownTriggerList.map(function (dropdownTriggerEl) {
return new bootstrap.Dropdown(dropdownTriggerEl);
});
var switchesTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="switch-icon"]'));
var switchesTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="switch-icon"]'));
switchesTriggerList.map(function (switchTriggerEl) {
switchTriggerEl.addEventListener('click', function (e) {
e.stopPropagation();

6
demo/dist/js/tabler.min.js vendored
View File

File diff suppressed because one or more lines are too long

6
demo/dist/libs/apexcharts/dist/apexcharts.min.js vendored
View File

File diff suppressed because one or more lines are too long

4
demo/dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
demo/dist/libs/nouislider/distribute/nouislider.min.css vendored
View File

@@ -1,2 +1,2 @@
/*! nouislider - 14.6.2 - 9/16/2020 */
/*! nouislider - 14.6.3 - 11/19/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-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}

4
demo/dist/libs/nouislider/distribute/nouislider.min.js vendored
View File

File diff suppressed because one or more lines are too long

169
demo/docs/alerts.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href="..">
<img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="../cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="../colors.html" >
Colors
</a>
<a class="dropdown-item" href="../dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="../maps.html" >
Maps
</a>
<a class="dropdown-item" href="../map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="../maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="../navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="../tables.html" >
Tables
</a>
<a class="dropdown-item" href="../calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="../carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="../markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="../auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="../layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="../layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="../layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="../layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="../layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="../layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -327,17 +333,17 @@
</div>
</div>
</div>
<div class="row g-5">
<div class="row">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<ul class="nav nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<ul class="nav nav-pills collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
@@ -366,13 +372,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<ul class="nav nav-pills collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link active">
Alerts
@@ -506,13 +512,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<ul class="nav nav-pills collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
@@ -521,13 +527,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<ul class="nav nav-pills collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
@@ -555,7 +561,7 @@
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
</span>
Changelog
<span class="badge bg-blue-lt ml-auto">1.0.0-alpha.14</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-alpha.18</span>
</a>
</li>
</ul>
@@ -564,12 +570,12 @@
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="mb-5">
<div class="d-flex mb-3">
<div>
<div class="d-flex mb-4">
<h1 class="mt-0">Alerts</h1>
<p class="ml-auto">
<p class="ms-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"><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>
<svg xmlns="http://www.w3.org/2000/svg" class="icon pe-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>
Bootstrap documentation
</a>
</p>
@@ -615,16 +621,16 @@
<div class="example no_toc_section">
<div class="example-content">
<div class="alert alert-success" role="alert">
This is a success alert — <a href="javascript:void()" class="alert-link">check it out</a>!
This is a success alert — <a href="javascript:void(0)" class="alert-link">check it out</a>!
</div>
<div class="alert alert-info" role="alert">
This is a info alert — <a href="javascript:void()" class="alert-link">check it out</a>!
This is a info alert — <a href="javascript:void(0)" class="alert-link">check it out</a>!
</div>
<div class="alert alert-warning" role="alert">
This is a warning alert — <a href="javascript:void()" class="alert-link">check it out</a>!
This is a warning alert — <a href="javascript:void(0)" class="alert-link">check it out</a>!
</div>
<div class="alert alert-danger" role="alert">
This is a danger alert — <a href="javascript:void()" class="alert-link">check it out</a>!
This is a danger alert — <a href="javascript:void(0)" class="alert-link">check it out</a>!
</div>
</div>
</div>
@@ -650,19 +656,19 @@
<div class="example-content">
<div class="alert alert-success alert-dismissible" role="alert">
This is a success alert — check it out!
<a href="javascript:void()" class="btn-close" data-dismiss="alert" aria-label="close"></a>
<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
</div>
<div class="alert alert-info alert-dismissible" role="alert">
This is a info alert — check it out!
<a href="javascript:void()" class="btn-close" data-dismiss="alert" aria-label="close"></a>
<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
</div>
<div class="alert alert-warning alert-dismissible" role="alert">
This is a warning alert — check it out!
<a href="javascript:void()" class="btn-close" data-dismiss="alert" aria-label="close"></a>
<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
</div>
<div class="alert alert-danger alert-dismissible" role="alert">
This is a danger alert — check it out!
<a href="javascript:void()" class="btn-close" data-dismiss="alert" aria-label="close"></a>
<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
</div>
</div>
</div>
@@ -670,19 +676,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">"btn-close"</span> <span class="na">data-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"close"</span><span class="nt">&gt;&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"btn-close"</span> <span class="na">data-bs-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"close"</span><span class="nt">&gt;&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-info alert-dismissible"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
This is a info alert — check it out!
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn-close"</span> <span class="na">data-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"close"</span><span class="nt">&gt;&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"btn-close"</span> <span class="na">data-bs-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"close"</span><span class="nt">&gt;&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-warning alert-dismissible"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
This is a warning alert — check it out!
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn-close"</span> <span class="na">data-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"close"</span><span class="nt">&gt;&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"btn-close"</span> <span class="na">data-bs-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"close"</span><span class="nt">&gt;&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-danger alert-dismissible"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
This is a danger alert — check it out!
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn-close"</span> <span class="na">data-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"close"</span><span class="nt">&gt;&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"btn-close"</span> <span class="na">data-bs-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"close"</span><span class="nt">&gt;&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</figure>
</div>
@@ -691,19 +697,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"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M5 12l5 5l10 -10" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="icon me-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>
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"><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>
<svg xmlns="http://www.w3.org/2000/svg" class="icon me-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>
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"><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>
<svg xmlns="http://www.w3.org/2000/svg" class="icon me-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>
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"><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>
<svg xmlns="http://www.w3.org/2000/svg" class="icon me-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>
This is a danger alert — check it out!
</div>
</div>
@@ -711,19 +717,19 @@
<div class="example-code">
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-success"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code with class="mr-1" --&gt;</span>
<span class="c">&lt;!-- SVG icon code with class="me-1" --&gt;</span>
This is a success alert — check it out!
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-info"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code with class="mr-1" --&gt;</span>
<span class="c">&lt;!-- SVG icon code with class="me-1" --&gt;</span>
This is a info alert — check it out!
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-warning"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code with class="mr-1" --&gt;</span>
<span class="c">&lt;!-- SVG icon code with class="me-1" --&gt;</span>
This is a warning alert — check it out!
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-danger"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code with class="mr-1" --&gt;</span>
<span class="c">&lt;!-- SVG icon code with class="me-1" --&gt;</span>
This is a danger alert — check it out!
<span class="nt">&lt;/div&gt;</span></code></pre>
</figure>
@@ -733,19 +739,19 @@
<div class="example no_toc_section">
<div class="example-content">
<div class="alert alert-success" role="alert">
<span class="avatar float-left mr-3" style="background-image: url(../static/avatars/000m.jpg)"></span>
<span class="avatar float-left me-3" style="background-image: url(../static/avatars/000m.jpg)"></span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="alert alert-info" role="alert">
<span class="avatar float-left mr-3">JL</span>
<span class="avatar float-left me-3">JL</span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="alert alert-warning" role="alert">
<span class="avatar float-left mr-3" style="background-image: url(../static/avatars/002m.jpg)"></span>
<span class="avatar float-left me-3" style="background-image: url(../static/avatars/002m.jpg)"></span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="alert alert-danger" role="alert">
<span class="avatar float-left mr-3" style="background-image: url(../static/avatars/003m.jpg)"></span>
<span class="avatar float-left me-3" style="background-image: url(../static/avatars/003m.jpg)"></span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</div>
@@ -753,19 +759,19 @@
<div class="example-code">
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-success"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar float-left 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;span</span> <span class="na">class=</span><span class="s">"avatar float-left me-3"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-info"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar float-left mr-3"</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 float-left me-3"</span><span class="nt">&gt;</span>JL<span class="nt">&lt;/span&gt;</span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-warning"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar float-left 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;span</span> <span class="na">class=</span><span class="s">"avatar float-left me-3"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"alert alert-danger"</span> <span class="na">role=</span><span class="s">"alert"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar float-left 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;span</span> <span class="na">class=</span><span class="s">"avatar float-left me-3"</span> <span class="na">style=</span><span class="s">"background-image: url(...)"</span><span class="nt">&gt;&lt;/span&gt;</span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<span class="nt">&lt;/div&gt;</span></code></pre>
</figure>
@@ -778,10 +784,10 @@
<h3>Some Title</h3>
<p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
<div class="btn-list">
<a href="javascript:void()" class="btn btn-success">Save changes</a>
<a href="javascript:void()" class="btn">Cancel</a>
<a href="javascript:void(0)" class="btn btn-success">Save changes</a>
<a href="javascript:void(0)" class="btn">Cancel</a>
</div>
<a href="javascript:void()" class="btn-close" data-dismiss="alert" aria-label="close"></a>
<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
</div>
</div>
</div>
@@ -794,7 +800,7 @@
<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"</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">"btn-close"</span> <span class="na">data-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"close"</span><span class="nt">&gt;&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"btn-close"</span> <span class="na">data-bs-dismiss=</span><span class="s">"alert"</span> <span class="na">aria-label=</span><span class="s">"close"</span><span class="nt">&gt;&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</figure>
</div>
@@ -807,11 +813,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="../license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -822,7 +828,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -835,8 +841,5 @@
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

105
demo/docs/autosize.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href="..">
<img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="../cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="../colors.html" >
Colors
</a>
<a class="dropdown-item" href="../dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="../maps.html" >
Maps
</a>
<a class="dropdown-item" href="../map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="../maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="../navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="../tables.html" >
Tables
</a>
<a class="dropdown-item" href="../calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="../carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="../markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="../auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="../layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="../layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="../layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="../layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="../layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="../layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -327,17 +333,17 @@
</div>
</div>
</div>
<div class="row g-5">
<div class="row">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<ul class="nav nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<ul class="nav nav-pills collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
@@ -366,13 +372,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-components">
<ul class="nav nav-pills collapse" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
@@ -506,13 +512,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<ul class="nav nav-pills collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
@@ -521,13 +527,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="true">
<a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-plugins">
<ul class="nav nav-pills collapse show" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link active">
Autosize
@@ -555,7 +561,7 @@
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
</span>
Changelog
<span class="badge bg-blue-lt ml-auto">1.0.0-alpha.14</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-alpha.18</span>
</a>
</li>
</ul>
@@ -564,8 +570,8 @@
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="mb-5">
<div class="d-flex mb-3">
<div>
<div class="d-flex mb-4">
<h1 class="mt-0">Autosize</h1>
</div>
<p>The autosize element will automatically adjust the textarea height and make it easier for users to follow as they type.</p>
@@ -575,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="Type something…"></textarea>
<textarea class="form-control" data-bs-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">"Type 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-bs-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>
@@ -593,11 +599,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="../license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -608,7 +614,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -621,8 +627,5 @@
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

101
demo/docs/avatars.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href="..">
<img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="../cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="../colors.html" >
Colors
</a>
<a class="dropdown-item" href="../dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="../maps.html" >
Maps
</a>
<a class="dropdown-item" href="../map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="../maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="../navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="../tables.html" >
Tables
</a>
<a class="dropdown-item" href="../calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="../carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="../markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="../auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="../layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="../layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="../layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="../layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="../layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="../layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -327,17 +333,17 @@
</div>
</div>
</div>
<div class="row g-5">
<div class="row">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<ul class="nav nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<ul class="nav nav-pills collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
@@ -366,13 +372,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<ul class="nav nav-pills collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
@@ -506,13 +512,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<ul class="nav nav-pills collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
@@ -521,13 +527,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<ul class="nav nav-pills collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
@@ -555,7 +561,7 @@
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
</span>
Changelog
<span class="badge bg-blue-lt ml-auto">1.0.0-alpha.14</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-alpha.18</span>
</a>
</li>
</ul>
@@ -564,8 +570,8 @@
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="mb-5">
<div class="d-flex mb-3">
<div>
<div class="d-flex mb-4">
<h1 class="mt-0">Avatars</h1>
</div>
<p>Avatars help customise various elements of a user interface and make the product experience more personalised. They are often used in communication apps, collaboration tools and social media.</p>
@@ -797,11 +803,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="../license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -812,7 +818,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -825,8 +831,5 @@
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

161
demo/docs/badges.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href="..">
<img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="../cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="../colors.html" >
Colors
</a>
<a class="dropdown-item" href="../dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="../maps.html" >
Maps
</a>
<a class="dropdown-item" href="../map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="../maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="../navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="../tables.html" >
Tables
</a>
<a class="dropdown-item" href="../calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="../carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="../markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="../auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="../layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="../layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="../layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="../layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="../layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="../layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -327,17 +333,17 @@
</div>
</div>
</div>
<div class="row g-5">
<div class="row">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<ul class="nav nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<ul class="nav nav-pills collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
@@ -366,13 +372,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<ul class="nav nav-pills collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
@@ -506,13 +512,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<ul class="nav nav-pills collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
@@ -521,13 +527,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<ul class="nav nav-pills collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
@@ -555,7 +561,7 @@
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
</span>
Changelog
<span class="badge bg-blue-lt ml-auto">1.0.0-alpha.14</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-alpha.18</span>
</a>
</li>
</ul>
@@ -564,12 +570,12 @@
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="mb-5">
<div class="d-flex mb-3">
<div>
<div class="d-flex mb-4">
<h1 class="mt-0">Badges</h1>
<p class="ml-auto">
<p class="ms-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"><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>
<svg xmlns="http://www.w3.org/2000/svg" class="icon pe-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>
Bootstrap documentation
</a>
</p>
@@ -682,18 +688,18 @@
<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="javascript:void()" class="badge bg-blue">blue</a>
<a href="javascript:void()" class="badge bg-azure">azure</a>
<a href="javascript:void()" class="badge bg-indigo">indigo</a>
<a href="javascript:void()" class="badge bg-purple">purple</a>
<a href="javascript:void()" class="badge bg-pink">pink</a>
<a href="javascript:void()" class="badge bg-red">red</a>
<a href="javascript:void()" class="badge bg-orange">orange</a>
<a href="javascript:void()" class="badge bg-yellow">yellow</a>
<a href="javascript:void()" class="badge bg-lime">lime</a>
<a href="javascript:void()" class="badge bg-green">green</a>
<a href="javascript:void()" class="badge bg-teal">teal</a>
<a href="javascript:void()" class="badge bg-cyan">cyan</a>
<a href="javascript:void(0)" class="badge bg-blue">blue</a>
<a href="javascript:void(0)" class="badge bg-azure">azure</a>
<a href="javascript:void(0)" class="badge bg-indigo">indigo</a>
<a href="javascript:void(0)" class="badge bg-purple">purple</a>
<a href="javascript:void(0)" class="badge bg-pink">pink</a>
<a href="javascript:void(0)" class="badge bg-red">red</a>
<a href="javascript:void(0)" class="badge bg-orange">orange</a>
<a href="javascript:void(0)" class="badge bg-yellow">yellow</a>
<a href="javascript:void(0)" class="badge bg-lime">lime</a>
<a href="javascript:void(0)" class="badge bg-green">green</a>
<a href="javascript:void(0)" class="badge bg-teal">teal</a>
<a href="javascript:void(0)" class="badge bg-cyan">cyan</a>
</div>
</div>
<div class="example-code">
@@ -716,18 +722,18 @@
<p>Leave the HTML element empty if you want to create badges without any text. Empty badges are particularly useful if you want to make an interface element more noticeable regardless of limited space.</p>
<div class="example no_toc_section example-centered">
<div class="example-content">
<a href="javascript:void()" class="badge bg-blue"></a>
<a href="javascript:void()" class="badge bg-azure"></a>
<a href="javascript:void()" class="badge bg-indigo"></a>
<a href="javascript:void()" class="badge bg-purple"></a>
<a href="javascript:void()" class="badge bg-pink"></a>
<a href="javascript:void()" class="badge bg-red"></a>
<a href="javascript:void()" class="badge bg-orange"></a>
<a href="javascript:void()" class="badge bg-yellow"></a>
<a href="javascript:void()" class="badge bg-lime"></a>
<a href="javascript:void()" class="badge bg-green"></a>
<a href="javascript:void()" class="badge bg-teal"></a>
<a href="javascript:void()" class="badge bg-cyan"></a>
<a href="javascript:void(0)" class="badge bg-blue"></a>
<a href="javascript:void(0)" class="badge bg-azure"></a>
<a href="javascript:void(0)" class="badge bg-indigo"></a>
<a href="javascript:void(0)" class="badge bg-purple"></a>
<a href="javascript:void(0)" class="badge bg-pink"></a>
<a href="javascript:void(0)" class="badge bg-red"></a>
<a href="javascript:void(0)" class="badge bg-orange"></a>
<a href="javascript:void(0)" class="badge bg-yellow"></a>
<a href="javascript:void(0)" class="badge bg-lime"></a>
<a href="javascript:void(0)" class="badge bg-green"></a>
<a href="javascript:void(0)" class="badge bg-teal"></a>
<a href="javascript:void(0)" class="badge bg-cyan"></a>
</div>
</div>
<div class="example-code">
@@ -802,10 +808,10 @@
<div class="example-content">
<div class="btn-list">
<button type="button" class="btn">
Notifications <span class="badge bg-red ml-2">4</span>
Notifications <span class="badge bg-red ms-2">4</span>
</button>
<button type="button" class="btn">
Notifications <span class="badge bg-green ml-2">4</span>
Notifications <span class="badge bg-green ms-2">4</span>
</button>
</div>
</div>
@@ -813,10 +819,10 @@
<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>
Notifications <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-red ms-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>
Notifications <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-green ms-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>
@@ -829,11 +835,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="../license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -844,7 +850,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -857,8 +863,5 @@
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

135
demo/docs/breadcrumb.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href="..">
<img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="../cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="../colors.html" >
Colors
</a>
<a class="dropdown-item" href="../dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="../maps.html" >
Maps
</a>
<a class="dropdown-item" href="../map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="../maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="../navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="../tables.html" >
Tables
</a>
<a class="dropdown-item" href="../calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="../carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="../markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="../auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="../layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="../layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="../layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="../layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="../layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="../layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -327,17 +333,17 @@
</div>
</div>
</div>
<div class="row g-5">
<div class="row">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<ul class="nav nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<ul class="nav nav-pills collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
@@ -366,13 +372,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<ul class="nav nav-pills collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
@@ -506,13 +512,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<ul class="nav nav-pills collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
@@ -521,13 +527,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<ul class="nav nav-pills collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
@@ -555,7 +561,7 @@
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
</span>
Changelog
<span class="badge bg-blue-lt ml-auto">1.0.0-alpha.14</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-alpha.18</span>
</a>
</li>
</ul>
@@ -564,12 +570,12 @@
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="mb-5">
<div class="d-flex mb-3">
<div>
<div class="d-flex mb-4">
<h1 class="mt-0">Breadcrumb</h1>
<p class="ml-auto">
<p class="ms-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"><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>
<svg xmlns="http://www.w3.org/2000/svg" class="icon pe-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>
Bootstrap documentation
</a>
</p>
@@ -581,9 +587,9 @@
<div class="example no_toc_section example-centered">
<div class="example-content">
<ol class="breadcrumb" aria-label="breadcrumbs">
<li class="breadcrumb-item"><a href="javascript:void()">Home</a></li>
<li class="breadcrumb-item"><a href="javascript:void()">Library</a></li>
<li class="breadcrumb-item active" aria-current="page"><a href="javascript:void()">Data</a></li>
<li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
<li class="breadcrumb-item"><a href="javascript:void(0)">Library</a></li>
<li class="breadcrumb-item active" aria-current="page"><a href="javascript:void(0)">Data</a></li>
</ol>
</div>
</div>
@@ -601,9 +607,9 @@
<div class="example no_toc_section example-centered">
<div class="example-content">
<ol class="breadcrumb breadcrumb-dots" aria-label="breadcrumbs">
<li class="breadcrumb-item"><a href="javascript:void()">Home</a></li>
<li class="breadcrumb-item"><a href="javascript:void()">Library</a></li>
<li class="breadcrumb-item active" aria-current="page"><a href="javascript:void()">Data</a></li>
<li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
<li class="breadcrumb-item"><a href="javascript:void(0)">Library</a></li>
<li class="breadcrumb-item active" aria-current="page"><a href="javascript:void(0)">Data</a></li>
</ol>
</div>
</div>
@@ -619,9 +625,9 @@
<div class="example no_toc_section example-centered">
<div class="example-content">
<ol class="breadcrumb breadcrumb-arrows" aria-label="breadcrumbs">
<li class="breadcrumb-item"><a href="javascript:void()">Home</a></li>
<li class="breadcrumb-item"><a href="javascript:void()">Library</a></li>
<li class="breadcrumb-item active" aria-current="page"><a href="javascript:void()">Data</a></li>
<li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
<li class="breadcrumb-item"><a href="javascript:void(0)">Library</a></li>
<li class="breadcrumb-item active" aria-current="page"><a href="javascript:void(0)">Data</a></li>
</ol>
</div>
</div>
@@ -637,9 +643,9 @@
<div class="example no_toc_section example-centered">
<div class="example-content">
<ol class="breadcrumb breadcrumb-bullets" aria-label="breadcrumbs">
<li class="breadcrumb-item"><a href="javascript:void()">Home</a></li>
<li class="breadcrumb-item"><a href="javascript:void()">Library</a></li>
<li class="breadcrumb-item active" aria-current="page"><a href="javascript:void()">Data</a></li>
<li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
<li class="breadcrumb-item"><a href="javascript:void(0)">Library</a></li>
<li class="breadcrumb-item active" aria-current="page"><a href="javascript:void(0)">Data</a></li>
</ol>
</div>
</div>
@@ -657,9 +663,9 @@
<div class="example no_toc_section example-centered">
<div class="example-content">
<ol class="breadcrumb breadcrumb-alternate" aria-label="breadcrumbs">
<li class="breadcrumb-item"><a href="javascript:void()">Home</a></li>
<li class="breadcrumb-item"><a href="javascript:void()">Library</a></li>
<li class="breadcrumb-item active" aria-current="page"><a href="javascript:void()">Data</a></li>
<li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
<li class="breadcrumb-item"><a href="javascript:void(0)">Library</a></li>
<li class="breadcrumb-item active" aria-current="page"><a href="javascript:void(0)">Data</a></li>
</ol>
</div>
</div>
@@ -681,11 +687,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="../license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -696,7 +702,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -709,8 +715,5 @@
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

405
demo/docs/buttons.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href="..">
<img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="../cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="../colors.html" >
Colors
</a>
<a class="dropdown-item" href="../dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="../maps.html" >
Maps
</a>
<a class="dropdown-item" href="../map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="../maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="../navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="../tables.html" >
Tables
</a>
<a class="dropdown-item" href="../calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="../carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="../markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="../auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="../layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="../layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="../layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="../layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="../layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="../layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -327,17 +333,17 @@
</div>
</div>
</div>
<div class="row g-5">
<div class="row">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<ul class="nav nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<ul class="nav nav-pills collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
@@ -366,13 +372,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<ul class="nav nav-pills collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
@@ -506,13 +512,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<ul class="nav nav-pills collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
@@ -521,13 +527,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<ul class="nav nav-pills collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
@@ -555,7 +561,7 @@
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
</span>
Changelog
<span class="badge bg-blue-lt ml-auto">1.0.0-alpha.14</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-alpha.18</span>
</a>
</li>
</ul>
@@ -564,12 +570,12 @@
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="mb-5">
<div class="d-flex mb-3">
<div>
<div class="d-flex mb-4">
<h1 class="mt-0">Buttons</h1>
<p class="ml-auto">
<p class="ms-auto">
<a href="https://getbootstrap.com/docs/4.4/components/buttons/" 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"><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>
<svg xmlns="http://www.w3.org/2000/svg" class="icon pe-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>
Bootstrap documentation
</a>
</p>
@@ -581,7 +587,7 @@
<div class="example no_toc_section example-centered">
<div class="example-content">
<div class="btn-list">
<a href="javascript:void()" class="btn" role="button">Link</a>
<a href="javascript:void(0)" class="btn" role="button">Link</a>
<button class="btn">Button</button>
<input type="button" class="btn" value="Input" />
<input type="submit" class="btn" value="Submit" />
@@ -603,7 +609,7 @@
<div class="example no_toc_section example-centered">
<div class="example-content">
<div class="btn-list">
<a href="javascript:void()" class="btn" role="button">Link</a>
<a href="javascript:void(0)" class="btn" role="button">Link</a>
</div>
</div>
</div>
@@ -617,28 +623,28 @@
<div class="example no_toc_section example-centered">
<div class="example-content">
<div class="btn-list">
<a href="javascript:void()" class="btn btn-primary">
<a href="javascript:void(0)" class="btn btn-primary">
Primary
</a>
<a href="javascript:void()" class="btn btn-secondary">
<a href="javascript:void(0)" class="btn btn-secondary">
Secondary
</a>
<a href="javascript:void()" class="btn btn-success">
<a href="javascript:void(0)" class="btn btn-success">
Success
</a>
<a href="javascript:void()" class="btn btn-warning">
<a href="javascript:void(0)" class="btn btn-warning">
Warning
</a>
<a href="javascript:void()" class="btn btn-danger">
<a href="javascript:void(0)" class="btn btn-danger">
Danger
</a>
<a href="javascript:void()" class="btn btn-info">
<a href="javascript:void(0)" class="btn btn-info">
Info
</a>
<a href="javascript:void()" class="btn btn-light">
<a href="javascript:void(0)" class="btn btn-light">
Light
</a>
<a href="javascript:void()" class="btn btn-dark">
<a href="javascript:void(0)" class="btn btn-dark">
Dark
</a>
</div>
@@ -677,28 +683,28 @@
<div class="example no_toc_section example-centered">
<div class="example-content">
<div class="btn-list">
<a href="javascript:void()" class="btn btn-primary disabled">
<a href="javascript:void(0)" class="btn btn-primary disabled">
Primary
</a>
<a href="javascript:void()" class="btn btn-secondary disabled">
<a href="javascript:void(0)" class="btn btn-secondary disabled">
Secondary
</a>
<a href="javascript:void()" class="btn btn-success disabled">
<a href="javascript:void(0)" class="btn btn-success disabled">
Success
</a>
<a href="javascript:void()" class="btn btn-warning disabled">
<a href="javascript:void(0)" class="btn btn-warning disabled">
Warning
</a>
<a href="javascript:void()" class="btn btn-danger disabled">
<a href="javascript:void(0)" class="btn btn-danger disabled">
Danger
</a>
<a href="javascript:void()" class="btn btn-info disabled">
<a href="javascript:void(0)" class="btn btn-info disabled">
Info
</a>
<a href="javascript:void()" class="btn btn-light disabled">
<a href="javascript:void(0)" class="btn btn-light disabled">
Light
</a>
<a href="javascript:void()" class="btn btn-dark disabled">
<a href="javascript:void(0)" class="btn btn-dark disabled">
Dark
</a>
</div>
@@ -737,18 +743,18 @@
<div class="example no_toc_section example-centered">
<div class="example-content">
<div class="btn-list">
<a href="javascript:void()" class="btn btn-blue">Blue</a>
<a href="javascript:void()" class="btn btn-azure">Azure</a>
<a href="javascript:void()" class="btn btn-indigo">Indigo</a>
<a href="javascript:void()" class="btn btn-purple">Purple</a>
<a href="javascript:void()" class="btn btn-pink">Pink</a>
<a href="javascript:void()" class="btn btn-red">Red</a>
<a href="javascript:void()" class="btn btn-orange">Orange</a>
<a href="javascript:void()" class="btn btn-yellow">Yellow</a>
<a href="javascript:void()" class="btn btn-lime">Lime</a>
<a href="javascript:void()" class="btn btn-green">Green</a>
<a href="javascript:void()" class="btn btn-teal">Teal</a>
<a href="javascript:void()" class="btn btn-cyan">Cyan</a>
<a href="javascript:void(0)" class="btn btn-blue">Blue</a>
<a href="javascript:void(0)" class="btn btn-azure">Azure</a>
<a href="javascript:void(0)" class="btn btn-indigo">Indigo</a>
<a href="javascript:void(0)" class="btn btn-purple">Purple</a>
<a href="javascript:void(0)" class="btn btn-pink">Pink</a>
<a href="javascript:void(0)" class="btn btn-red">Red</a>
<a href="javascript:void(0)" class="btn btn-orange">Orange</a>
<a href="javascript:void(0)" class="btn btn-yellow">Yellow</a>
<a href="javascript:void(0)" class="btn btn-lime">Lime</a>
<a href="javascript:void(0)" class="btn btn-green">Green</a>
<a href="javascript:void(0)" class="btn btn-teal">Teal</a>
<a href="javascript:void(0)" class="btn btn-cyan">Cyan</a>
</div>
</div>
</div>
@@ -773,14 +779,14 @@
<div class="example no_toc_section example-centered">
<div class="example-content">
<div class="btn-list">
<a href="javascript:void()" class="btn btn-ghost-primary">Primary</a>
<a href="javascript:void()" class="btn btn-ghost-secondary">Secondary</a>
<a href="javascript:void()" class="btn btn-ghost-success">Success</a>
<a href="javascript:void()" class="btn btn-ghost-warning">Warning</a>
<a href="javascript:void()" class="btn btn-ghost-danger">Danger</a>
<a href="javascript:void()" class="btn btn-ghost-info">Info</a>
<a href="javascript:void()" class="btn btn-ghost-light">Light</a>
<a href="javascript:void()" class="btn btn-ghost-dark">Dark</a>
<a href="javascript:void(0)" class="btn btn-ghost-primary">Primary</a>
<a href="javascript:void(0)" class="btn btn-ghost-secondary">Secondary</a>
<a href="javascript:void(0)" class="btn btn-ghost-success">Success</a>
<a href="javascript:void(0)" class="btn btn-ghost-warning">Warning</a>
<a href="javascript:void(0)" class="btn btn-ghost-danger">Danger</a>
<a href="javascript:void(0)" class="btn btn-ghost-info">Info</a>
<a href="javascript:void(0)" class="btn btn-ghost-light">Light</a>
<a href="javascript:void(0)" class="btn btn-ghost-dark">Dark</a>
</div>
</div>
</div>
@@ -801,31 +807,31 @@
<div class="example no_toc_section example-centered">
<div class="example-content">
<div class="btn-list">
<a href="javascript:void()" class="btn btn-white btn-square">
<a href="javascript:void(0)" class="btn btn-white btn-square">
White
</a>
<a href="javascript:void()" class="btn btn-primary btn-square">
<a href="javascript:void(0)" class="btn btn-primary btn-square">
Primary
</a>
<a href="javascript:void()" class="btn btn-secondary btn-square">
<a href="javascript:void(0)" class="btn btn-secondary btn-square">
Secondary
</a>
<a href="javascript:void()" class="btn btn-success btn-square">
<a href="javascript:void(0)" class="btn btn-success btn-square">
Success
</a>
<a href="javascript:void()" class="btn btn-warning btn-square">
<a href="javascript:void(0)" class="btn btn-warning btn-square">
Warning
</a>
<a href="javascript:void()" class="btn btn-danger btn-square">
<a href="javascript:void(0)" class="btn btn-danger btn-square">
Danger
</a>
<a href="javascript:void()" class="btn btn-info btn-square">
<a href="javascript:void(0)" class="btn btn-info btn-square">
Info
</a>
<a href="javascript:void()" class="btn btn-light btn-square">
<a href="javascript:void(0)" class="btn btn-light btn-square">
Light
</a>
<a href="javascript:void()" class="btn btn-dark btn-square">
<a href="javascript:void(0)" class="btn btn-dark btn-square">
Dark
</a>
</div>
@@ -867,31 +873,31 @@
<div class="example no_toc_section example-centered">
<div class="example-content">
<div class="btn-list">
<a href="javascript:void()" class="btn btn-white btn-pill">
<a href="javascript:void(0)" class="btn btn-white btn-pill">
White
</a>
<a href="javascript:void()" class="btn btn-primary btn-pill">
<a href="javascript:void(0)" class="btn btn-primary btn-pill">
Primary
</a>
<a href="javascript:void()" class="btn btn-secondary btn-pill">
<a href="javascript:void(0)" class="btn btn-secondary btn-pill">
Secondary
</a>
<a href="javascript:void()" class="btn btn-success btn-pill">
<a href="javascript:void(0)" class="btn btn-success btn-pill">
Success
</a>
<a href="javascript:void()" class="btn btn-warning btn-pill">
<a href="javascript:void(0)" class="btn btn-warning btn-pill">
Warning
</a>
<a href="javascript:void()" class="btn btn-danger btn-pill">
<a href="javascript:void(0)" class="btn btn-danger btn-pill">
Danger
</a>
<a href="javascript:void()" class="btn btn-info btn-pill">
<a href="javascript:void(0)" class="btn btn-info btn-pill">
Info
</a>
<a href="javascript:void()" class="btn btn-light btn-pill">
<a href="javascript:void(0)" class="btn btn-light btn-pill">
Light
</a>
<a href="javascript:void()" class="btn btn-dark btn-pill">
<a href="javascript:void(0)" class="btn btn-dark btn-pill">
Dark
</a>
</div>
@@ -933,28 +939,28 @@
<div class="example no_toc_section example-centered">
<div class="example-content">
<div class="btn-list">
<a href="javascript:void()" class="btn btn-outline-primary">
<a href="javascript:void(0)" class="btn btn-outline-primary">
Primary
</a>
<a href="javascript:void()" class="btn btn-outline-secondary">
<a href="javascript:void(0)" class="btn btn-outline-secondary">
Secondary
</a>
<a href="javascript:void()" class="btn btn-outline-success">
<a href="javascript:void(0)" class="btn btn-outline-success">
Success
</a>
<a href="javascript:void()" class="btn btn-outline-warning">
<a href="javascript:void(0)" class="btn btn-outline-warning">
Warning
</a>
<a href="javascript:void()" class="btn btn-outline-danger">
<a href="javascript:void(0)" class="btn btn-outline-danger">
Danger
</a>
<a href="javascript:void()" class="btn btn-outline-info">
<a href="javascript:void(0)" class="btn btn-outline-info">
Info
</a>
<a href="javascript:void()" class="btn btn-outline-light">
<a href="javascript:void(0)" class="btn btn-outline-light">
Light
</a>
<a href="javascript:void()" class="btn btn-outline-dark">
<a href="javascript:void(0)" class="btn btn-outline-dark">
Dark
</a>
</div>
@@ -1084,59 +1090,59 @@
<div class="example no_toc_section example-centered">
<div class="example-content">
<div class="btn-list">
<a href="javascript:void()" class="btn btn-facebook">
<a href="javascript:void(0)" class="btn btn-facebook">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
Facebook
</a>
<a href="javascript:void()" class="btn btn-twitter">
<a href="javascript:void(0)" class="btn btn-twitter">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
Twitter
</a>
<a href="javascript:void()" class="btn btn-google">
<a href="javascript:void(0)" class="btn btn-google">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
Google
</a>
<a href="javascript:void()" class="btn btn-youtube">
<a href="javascript:void(0)" class="btn btn-youtube">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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>
Youtube
</a>
<a href="javascript:void()" class="btn btn-vimeo">
<a href="javascript:void(0)" class="btn btn-vimeo">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
Vimeo
</a>
<a href="javascript:void()" class="btn btn-dribbble">
<a href="javascript:void(0)" class="btn btn-dribbble">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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>
Dribbble
</a>
<a href="javascript:void()" class="btn btn-github">
<a href="javascript:void(0)" class="btn btn-github">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
Github
</a>
<a href="javascript:void()" class="btn btn-instagram">
<a href="javascript:void(0)" class="btn btn-instagram">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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>
Instagram
</a>
<a href="javascript:void()" class="btn btn-pinterest">
<a href="javascript:void(0)" class="btn btn-pinterest">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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>
Pinterest
</a>
<a href="javascript:void()" class="btn btn-vk">
<a href="javascript:void(0)" class="btn btn-vk">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
VK
</a>
<a href="javascript:void()" class="btn btn-rss">
<a href="javascript:void(0)" class="btn btn-rss">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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>
RSS
</a>
<a href="javascript:void()" class="btn btn-flickr">
<a href="javascript:void(0)" class="btn btn-flickr">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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>
Flickr
</a>
<a href="javascript:void()" class="btn btn-bitbucket">
<a href="javascript:void(0)" class="btn btn-bitbucket">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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.648 4a0.64 .64 0 0 0 -.64 .744l3.14 14.528c.07 .417 .43 .724 .852 .728h10a0.644 .644 0 0 0 .642 -.539l3.35 -14.71a0.641 .641 0 0 0 -.64 -.744l-16.704 -.007z" /><path d="M14 15h-4l-1 -6h6z" /></svg>
Bitbucker
</a>
<a href="javascript:void()" class="btn btn-tabler">
<a href="javascript:void(0)" class="btn btn-tabler">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
Tabler
</a>
@@ -1207,46 +1213,46 @@
<div class="example no_toc_section example-centered">
<div class="example-content">
<div class="btn-list">
<a href="javascript:void()" class="btn btn-facebook btn-icon" aria-label="Button">
<a href="javascript:void(0)" class="btn btn-facebook 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"><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>
</a>
<a href="javascript:void()" class="btn btn-twitter btn-icon" aria-label="Button">
<a href="javascript:void(0)" class="btn btn-twitter 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"><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>
</a>
<a href="javascript:void()" class="btn btn-google btn-icon" aria-label="Button">
<a href="javascript:void(0)" class="btn btn-google 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"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M17.788 5.108a9 9 0 1 0 3.212 6.892h-8" /></svg>
</a>
<a href="javascript:void()" class="btn btn-youtube btn-icon" aria-label="Button">
<a href="javascript:void(0)" class="btn btn-youtube 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"><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>
</a>
<a href="javascript:void()" class="btn btn-vimeo btn-icon" aria-label="Button">
<a href="javascript:void(0)" class="btn btn-vimeo 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"><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>
</a>
<a href="javascript:void()" class="btn btn-dribbble btn-icon" aria-label="Button">
<a href="javascript:void(0)" class="btn btn-dribbble 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"><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>
</a>
<a href="javascript:void()" class="btn btn-github btn-icon" aria-label="Button">
<a href="javascript:void(0)" class="btn btn-github 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"><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>
</a>
<a href="javascript:void()" class="btn btn-instagram btn-icon" aria-label="Button">
<a href="javascript:void(0)" class="btn btn-instagram 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"><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>
</a>
<a href="javascript:void()" class="btn btn-pinterest btn-icon" aria-label="Button">
<a href="javascript:void(0)" class="btn btn-pinterest 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"><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>
</a>
<a href="javascript:void()" class="btn btn-vk btn-icon" aria-label="Button">
<a href="javascript:void(0)" class="btn btn-vk 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"><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>
</a>
<a href="javascript:void()" class="btn btn-rss btn-icon" aria-label="Button">
<a href="javascript:void(0)" class="btn btn-rss 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"><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>
</a>
<a href="javascript:void()" class="btn btn-flickr btn-icon" aria-label="Button">
<a href="javascript:void(0)" class="btn btn-flickr 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"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><circle cx="7" cy="12" r="3" /><circle cx="17" cy="12" r="3" /></svg>
</a>
<a href="javascript:void()" class="btn btn-bitbucket btn-icon" aria-label="Button">
<a href="javascript:void(0)" class="btn btn-bitbucket 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"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M3.648 4a0.64 .64 0 0 0 -.64 .744l3.14 14.528c.07 .417 .43 .724 .852 .728h10a0.644 .644 0 0 0 .642 -.539l3.35 -14.71a0.641 .641 0 0 0 -.64 -.744l-16.704 -.007z" /><path d="M14 15h-4l-1 -6h6z" /></svg>
</a>
<a href="javascript:void()" class="btn btn-tabler btn-icon" aria-label="Button">
<a href="javascript:void(0)" class="btn btn-tabler 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"><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>
</a>
</div>
@@ -1303,25 +1309,25 @@
<div class="example no_toc_section example-centered">
<div class="example-content">
<div class="btn-list">
<a href="javascript:void()" class="btn btn-primary btn-icon" aria-label="Button">
<a href="javascript:void(0)" class="btn btn-primary 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"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M3 12h4l3 8l4 -16l3 8h4" /></svg>
</a>
<a href="javascript:void()" class="btn btn-github btn-icon" aria-label="Button">
<a href="javascript:void(0)" class="btn btn-github 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"><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>
</a>
<a href="javascript:void()" class="btn btn-success btn-icon" aria-label="Button">
<a href="javascript:void(0)" class="btn btn-success 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"><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>
</a>
<a href="javascript:void()" class="btn btn-warning btn-icon" aria-label="Button">
<a href="javascript:void(0)" class="btn btn-warning 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"><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>
</a>
<a href="javascript:void()" class="btn btn-danger btn-icon" aria-label="Button">
<a href="javascript:void(0)" class="btn btn-danger 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"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><line x1="4" y1="7" x2="20" y2="7" /><line x1="10" y1="11" x2="10" y2="17" /><line x1="14" y1="11" x2="14" y2="17" /><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" /><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" /></svg>
</a>
<a href="javascript:void()" class="btn btn-purple btn-icon" aria-label="Button">
<a href="javascript:void(0)" class="btn btn-purple 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"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><rect x="3" y="12" width="6" height="8" rx="1" /><rect x="9" y="8" width="6" height="12" rx="1" /><rect x="15" y="4" width="6" height="16" rx="1" /><line x1="4" y1="20" x2="18" y2="20" /></svg>
</a>
<a href="javascript:void()" class="btn btn-white btn-icon" aria-label="Button">
<a href="javascript:void(0)" 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"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="12" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M7 8a4 4 0 0 0 4 4h4" /></svg>
</a>
</div>
@@ -1358,41 +1364,41 @@
<div class="example-content">
<div class="btn-list">
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="5" width="16" height="16" rx="2" /><line x1="16" y1="3" x2="16" y2="7" /><line x1="8" y1="3" x2="8" y2="7" /><line x1="4" y1="11" x2="20" y2="11" /><line x1="11" y1="15" x2="12" y2="15" /><line x1="12" y1="15" x2="12" y2="18" /></svg>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void()">
<a class="dropdown-item" href="javascript:void(0)">
Action
</a>
<a class="dropdown-item" href="javascript:void()">
<a class="dropdown-item" href="javascript:void(0)">
Another action
</a>
</div>
</div>
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="5" width="16" height="16" rx="2" /><line x1="16" y1="3" x2="16" y2="7" /><line x1="8" y1="3" x2="8" y2="7" /><line x1="4" y1="11" x2="20" y2="11" /><line x1="11" y1="15" x2="12" y2="15" /><line x1="12" y1="15" x2="12" y2="18" /></svg>
Show calendar
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void()">
<a class="dropdown-item" href="javascript:void(0)">
Action
</a>
<a class="dropdown-item" href="javascript:void()">
<a class="dropdown-item" href="javascript:void(0)">
Another action
</a>
</div>
</div>
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
Show calendar
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void()">
<a class="dropdown-item" href="javascript:void(0)">
Action
</a>
<a class="dropdown-item" href="javascript:void()">
<a class="dropdown-item" href="javascript:void(0)">
Another action
</a>
</div>
@@ -1403,7 +1409,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">"dropdown"</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 dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</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 dropdown-toggle"</span> <span class="na">data-bs-toggle=</span><span class="s">"dropdown"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">&gt;</span>
@@ -1416,7 +1422,7 @@
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown"</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 dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</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 dropdown-toggle"</span> <span class="na">data-bs-toggle=</span><span class="s">"dropdown"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
Show calendar
<span class="nt">&lt;/button&gt;</span>
@@ -1430,7 +1436,7 @@
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown"</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 dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</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 dropdown-toggle"</span> <span class="na">data-bs-toggle=</span><span class="s">"dropdown"</span><span class="nt">&gt;</span>
Show calendar
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">&gt;</span>
@@ -1449,10 +1455,10 @@
<div class="example no_toc_section example-centered">
<div class="example-content">
<div class="btn-list">
<a href="javascript:void()" class="btn btn-primary btn-loading">
<a href="javascript:void(0)" class="btn btn-primary btn-loading">
Button
</a>
<a href="javascript:void()" class="btn btn-primary btn-loading">
<a href="javascript:void(0)" class="btn btn-primary btn-loading">
Loading button with loooong content
</a>
</div>
@@ -1470,8 +1476,8 @@
</div>
<div class="example no_toc_section example-centered">
<div class="example-content">
<a href="javascript:void()" class="btn btn-primary">
<span class="spinner-border spinner-border-sm mr-2" role="status"></span>
<a href="javascript:void(0)" class="btn btn-primary">
<span class="spinner-border spinner-border-sm me-2" role="status"></span>
Button
</a>
</div>
@@ -1479,7 +1485,7 @@
<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-primary"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"spinner-border spinner-border-sm mr-2"</span> <span class="na">role=</span><span class="s">"status"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"spinner-border spinner-border-sm me-2"</span> <span class="na">role=</span><span class="s">"status"</span><span class="nt">&gt;&lt;/span&gt;</span>
Button
<span class="nt">&lt;/a&gt;</span></code></pre>
</figure>
@@ -1489,9 +1495,9 @@
<div class="example no_toc_section">
<div class="example-content">
<div class="btn-list">
<a href="javascript:void()" class="btn btn-success">Save changes</a>
<a href="javascript:void()" class="btn">Save and continue</a>
<a href="javascript:void()" class="btn btn-danger">Cancel</a>
<a href="javascript:void(0)" class="btn btn-success">Save changes</a>
<a href="javascript:void(0)" class="btn">Save and continue</a>
<a href="javascript:void(0)" class="btn btn-danger">Cancel</a>
</div>
</div>
</div>
@@ -1508,25 +1514,25 @@
<div class="example no_toc_section">
<div class="example-content">
<div class="btn-list">
<a href="javascript:void()" class="btn">One</a>
<a href="javascript:void()" class="btn">Two</a>
<a href="javascript:void()" class="btn">Three</a>
<a href="javascript:void()" class="btn">Four</a>
<a href="javascript:void()" class="btn">Five</a>
<a href="javascript:void()" class="btn">Six</a>
<a href="javascript:void()" class="btn">Seven</a>
<a href="javascript:void()" class="btn">Eight</a>
<a href="javascript:void()" class="btn">Nine</a>
<a href="javascript:void()" class="btn">Ten</a>
<a href="javascript:void()" class="btn">Eleven</a>
<a href="javascript:void()" class="btn">Twelve</a>
<a href="javascript:void()" class="btn">Thirteen</a>
<a href="javascript:void()" class="btn">Fourteen</a>
<a href="javascript:void()" class="btn">Fifteen</a>
<a href="javascript:void()" class="btn">Sixteen</a>
<a href="javascript:void()" class="btn">Seventeen</a>
<a href="javascript:void()" class="btn">Eighteen</a>
<a href="javascript:void()" class="btn">Nineteen</a>
<a href="javascript:void(0)" class="btn">One</a>
<a href="javascript:void(0)" class="btn">Two</a>
<a href="javascript:void(0)" class="btn">Three</a>
<a href="javascript:void(0)" class="btn">Four</a>
<a href="javascript:void(0)" class="btn">Five</a>
<a href="javascript:void(0)" class="btn">Six</a>
<a href="javascript:void(0)" class="btn">Seven</a>
<a href="javascript:void(0)" class="btn">Eight</a>
<a href="javascript:void(0)" class="btn">Nine</a>
<a href="javascript:void(0)" class="btn">Ten</a>
<a href="javascript:void(0)" class="btn">Eleven</a>
<a href="javascript:void(0)" class="btn">Twelve</a>
<a href="javascript:void(0)" class="btn">Thirteen</a>
<a href="javascript:void(0)" class="btn">Fourteen</a>
<a href="javascript:void(0)" class="btn">Fifteen</a>
<a href="javascript:void(0)" class="btn">Sixteen</a>
<a href="javascript:void(0)" class="btn">Seventeen</a>
<a href="javascript:void(0)" class="btn">Eighteen</a>
<a href="javascript:void(0)" class="btn">Nineteen</a>
</div>
</div>
</div>
@@ -1555,12 +1561,12 @@
<span class="nt">&lt;/div&gt;</span></code></pre>
</figure>
</div>
<p>Use the <code class="language-plaintext highlighter-rouge">.text-center</code> or the <code class="language-plaintext highlighter-rouge">.text-right</code> modifiers to change the buttons’ alignment and place them where they suit best.</p>
<p>Use the <code class="language-plaintext highlighter-rouge">.text-center</code> or the <code class="language-plaintext highlighter-rouge">.text-end</code> modifiers to change the buttons’ alignment and place them where they suit best.</p>
<div class="example no_toc_section">
<div class="example-content">
<div class="btn-list justify-content-center">
<a href="javascript:void()" class="btn">Save and continue</a>
<a href="javascript:void()" class="btn btn-primary">Save changes</a>
<a href="javascript:void(0)" class="btn">Save and continue</a>
<a href="javascript:void(0)" class="btn btn-primary">Save changes</a>
</div>
</div>
</div>
@@ -1575,8 +1581,8 @@
<div class="example no_toc_section">
<div class="example-content">
<div class="btn-list justify-content-end">
<a href="javascript:void()" class="btn">Save and continue</a>
<a href="javascript:void()" class="btn btn-primary">Save changes</a>
<a href="javascript:void(0)" class="btn">Save and continue</a>
<a href="javascript:void(0)" class="btn btn-primary">Save changes</a>
</div>
</div>
</div>
@@ -1591,16 +1597,16 @@
<div class="example no_toc_section">
<div class="example-content">
<div class="btn-list">
<a href="javascript:void()" class="btn btn-outline-danger mr-auto">Delete</a>
<a href="javascript:void()" class="btn">Save and continue</a>
<a href="javascript:void()" class="btn btn-primary">Save changes</a>
<a href="javascript:void(0)" class="btn btn-outline-danger me-auto">Delete</a>
<a href="javascript:void(0)" class="btn">Save and continue</a>
<a href="javascript:void(0)" class="btn btn-primary">Save changes</a>
</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">"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-outline-danger mr-auto"</span><span class="nt">&gt;</span>Delete<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-outline-danger me-auto"</span><span class="nt">&gt;</span>Delete<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>Save and continue<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-primary"</span><span class="nt">&gt;</span>Save changes<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
@@ -1611,15 +1617,15 @@
<div class="example no_toc_section example-centered">
<div class="example-content">
<div class="btn-list">
<a href="javascript:void()" class="btn">
<a href="javascript:void(0)" class="btn">
<span class="avatar" style="background-image: url(../static/avatars/003m.jpg)"></span>
Avatar
</a>
<a href="javascript:void()" class="btn">
<a href="javascript:void(0)" class="btn">
<span class="avatar" style="background-image: url(../static/avatars/000f.jpg)"></span>
Avatar
</a>
<a href="javascript:void()" class="btn">
<a href="javascript:void(0)" class="btn">
<span class="avatar" style="background-image: url(../static/avatars/001f.jpg)"></span>
Avatar
</a>
@@ -1651,11 +1657,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="../license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -1666,7 +1672,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -1679,8 +1685,5 @@
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

157
demo/docs/cards.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href="..">
<img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="../cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="../colors.html" >
Colors
</a>
<a class="dropdown-item" href="../dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="../maps.html" >
Maps
</a>
<a class="dropdown-item" href="../map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="../maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="../navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="../tables.html" >
Tables
</a>
<a class="dropdown-item" href="../calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="../carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="../markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="../auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="../layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="../layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="../layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="../layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="../layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="../layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -327,17 +333,17 @@
</div>
</div>
</div>
<div class="row g-5">
<div class="row">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<ul class="nav nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<ul class="nav nav-pills collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
@@ -366,13 +372,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<ul class="nav nav-pills collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
@@ -506,13 +512,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<ul class="nav nav-pills collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
@@ -521,13 +527,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<ul class="nav nav-pills collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
@@ -555,7 +561,7 @@
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
</span>
Changelog
<span class="badge bg-blue-lt ml-auto">1.0.0-alpha.14</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-alpha.18</span>
</a>
</li>
</ul>
@@ -564,12 +570,12 @@
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="mb-5">
<div class="d-flex mb-3">
<div>
<div class="d-flex mb-4">
<h1 class="mt-0">Cards</h1>
<p class="ml-auto">
<p class="ms-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"><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>
<svg xmlns="http://www.w3.org/2000/svg" class="icon pe-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>
Bootstrap documentation
</a>
</p>
@@ -729,20 +735,20 @@
<div class="example-content">
<div class="example-column example-column-1">
<div class="card d-flex flex-column">
<a href="javascript:void()">
<a href="javascript:void(0)">
<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="javascript:void()">How do you know she is a witch?</a></h3>
<h3 class="card-title"><a href="javascript:void(0)">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-4 mt-auto">
<span class="avatar" style="background-image: url(../static/avatars/000f.jpg)"></span>
<div class="ml-3">
<div class="ms-3">
<a href="../profile.html" class="text-body">Maryjo Lebarree</a>
<div class="text-muted">3 days ago</div>
</div>
<div class="ml-auto">
<a href="javascript:void()" class="icon d-none d-md-inline-block ml-3 text-muted">
<div class="ms-auto">
<a href="javascript:void(0)" class="icon d-none d-md-inline-block ms-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" 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>
</a>
</div>
@@ -763,12 +769,12 @@
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a wart. You ...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex align-items-center pt-4 mt-auto"</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;div</span> <span class="na">class=</span><span class="s">"ml-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ms-3"</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">"text-body"</span><span class="nt">&gt;</span>Maryjo Lebarree<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>3 days ago<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ml-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">"icon d-none d-md-inline-block ml-3 text-muted"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ms-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">"icon d-none d-md-inline-block ms-3 text-muted"</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>
@@ -831,22 +837,22 @@
<div class="card d-flex flex-column">
<div class="row row-0 flex-fill">
<div class="col-md-3">
<a href="javascript:void()">
<a href="javascript:void(0)">
<img src="../static/photos/75b555b99d5b38c4.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="javascript:void()">Shut up!</a></h3>
<h3 class="card-title"><a href="javascript:void(0)">Shut up!</a></h3>
<div class="text-muted">Burn her! How do you know she is a witch? You don't frighten us, English pig-dogs! Go and boil yo...</div>
<div class="d-flex align-items-center pt-4 mt-auto">
<span class="avatar" style="background-image: url(../static/avatars/001f.jpg)"></span>
<div class="ml-3">
<div class="ms-3">
<a href="../profile.html" class="text-body">Egan Poetz</a>
<div class="text-muted">3 days ago</div>
</div>
<div class="ml-auto">
<a href="javascript:void()" class="icon d-none d-md-inline-block ml-3 text-red">
<div class="ms-auto">
<a href="javascript:void(0)" class="icon d-none d-md-inline-block ms-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" 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>
</a>
</div>
@@ -873,12 +879,12 @@
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Burn her! How do you know she is a witch? You don't frighten us, English pig-dogs! Go and boil yo...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex align-items-center pt-4 mt-auto"</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;div</span> <span class="na">class=</span><span class="s">"ml-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ms-3"</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">"text-body"</span><span class="nt">&gt;</span>Egan Poetz<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>3 days ago<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ml-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">"icon d-none d-md-inline-block ml-3 text-red"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ms-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">"icon d-none d-md-inline-block ms-3 text-red"</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>
@@ -907,7 +913,7 @@
</div>
<div class="col-md-6">
<div class="card">
<div class="card-status-left bg-green"></div>
<div class="card-status-start bg-green"></div>
<div class="card-body">
<h3 class="card-title">Card with side status</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
@@ -934,7 +940,7 @@
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-md-6"</span><span class="nt">&gt;</span>
<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;div</span> <span class="na">class=</span><span class="s">"card-status-left bg-green"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-status-start bg-green"</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 side status<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
@@ -980,10 +986,10 @@
<div class="card-tabs">
<!-- Cards navigation -->
<ul class="nav nav-tabs">
<li class="nav-item"><a href="#tab-top-1" class="nav-link active" data-toggle="tab">Tab 1</a></li>
<li class="nav-item"><a href="#tab-top-2" class="nav-link" data-toggle="tab">Tab 2</a></li>
<li class="nav-item"><a href="#tab-top-3" class="nav-link" data-toggle="tab">Tab 3</a></li>
<li class="nav-item"><a href="#tab-top-4" class="nav-link" data-toggle="tab">Tab 4</a></li>
<li class="nav-item"><a href="#tab-top-1" class="nav-link active" data-bs-toggle="tab">Tab 1</a></li>
<li class="nav-item"><a href="#tab-top-2" class="nav-link" data-bs-toggle="tab">Tab 2</a></li>
<li class="nav-item"><a href="#tab-top-3" class="nav-link" data-bs-toggle="tab">Tab 3</a></li>
<li class="nav-item"><a href="#tab-top-4" class="nav-link" data-bs-toggle="tab">Tab 4</a></li>
</ul>
<div class="tab-content">
<!-- Content of card #1 -->
@@ -1033,10 +1039,10 @@
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-tabs"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- Cards navigation --&gt;</span>
<span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs"</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#tab-top-1"</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>Tab 1<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#tab-top-2"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>Tab 2<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#tab-top-3"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>Tab 3<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#tab-top-4"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>Tab 4<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#tab-top-1"</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">data-bs-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>Tab 1<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#tab-top-2"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">data-bs-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>Tab 2<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#tab-top-3"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">data-bs-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>Tab 3<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#tab-top-4"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">data-bs-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>Tab 4<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"tab-content"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- Content of card #1 --&gt;</span>
@@ -1088,11 +1094,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="../license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -1103,7 +1109,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -1116,8 +1122,5 @@
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

157
demo/docs/carousel.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href="..">
<img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="../cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="../colors.html" >
Colors
</a>
<a class="dropdown-item" href="../dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="../maps.html" >
Maps
</a>
<a class="dropdown-item" href="../map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="../maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="../navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="../tables.html" >
Tables
</a>
<a class="dropdown-item" href="../calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="../carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="../markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="../auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="../layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="../layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="../layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="../layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="../layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="../layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -327,17 +333,17 @@
</div>
</div>
</div>
<div class="row g-5">
<div class="row">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<ul class="nav nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<ul class="nav nav-pills collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
@@ -366,13 +372,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<ul class="nav nav-pills collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
@@ -506,13 +512,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<ul class="nav nav-pills collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
@@ -521,13 +527,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<ul class="nav nav-pills collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
@@ -555,7 +561,7 @@
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
</span>
Changelog
<span class="badge bg-blue-lt ml-auto">1.0.0-alpha.14</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-alpha.18</span>
</a>
</li>
</ul>
@@ -564,12 +570,12 @@
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="mb-5">
<div class="d-flex mb-3">
<div>
<div class="d-flex mb-4">
<h1 class="mt-0">Carousel</h1>
<p class="ml-auto">
<p class="ms-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"><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>
<svg xmlns="http://www.w3.org/2000/svg" class="icon pe-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>
Bootstrap documentation
</a>
</p>
@@ -581,36 +587,36 @@
<div class="example no_toc_section example-centered">
<div class="example-content">
<div style="max-width: 20rem">
<div id="carousel-sample" class="carousel slide" data-ride="carousel">
<div id="carousel-sample" class="carousel slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-sample" data-slide-to="0" class="active"></li>
<li data-target="#carousel-sample" data-slide-to="1" class=""></li>
<li data-target="#carousel-sample" data-slide-to="2" class=""></li>
<li data-target="#carousel-sample" data-slide-to="3" class=""></li>
<li data-target="#carousel-sample" data-slide-to="4" class=""></li>
<li data-bs-target="#carousel-sample" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carousel-sample" data-bs-slide-to="1" class=""></li>
<li data-bs-target="#carousel-sample" data-bs-slide-to="2" class=""></li>
<li data-bs-target="#carousel-sample" data-bs-slide-to="3" class=""></li>
<li data-bs-target="#carousel-sample" data-bs-slide-to="4" class=""></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" alt="" src="../static/photos/1b73704b282a8ec6.jpg" data-holder-rendered="true" />
<img class="d-block w-100" alt="" src="../static/photos/1b73704b282a8ec6.jpg" />
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="" src="../static/photos/3d2998219313cd37.jpg" data-holder-rendered="true" />
<img class="d-block w-100" alt="" src="../static/photos/3d2998219313cd37.jpg" />
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="" src="../static/photos/6ab3200b14549f8a.jpg" data-holder-rendered="true" />
<img class="d-block w-100" alt="" src="../static/photos/6ab3200b14549f8a.jpg" />
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="" src="../static/photos/6d35d9a2bd6c63c2.jpg" data-holder-rendered="true" />
<img class="d-block w-100" alt="" src="../static/photos/6d35d9a2bd6c63c2.jpg" />
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="" src="../static/photos/8a26974ee6444acd.jpg" data-holder-rendered="true" />
<img class="d-block w-100" alt="" src="../static/photos/8a26974ee6444acd.jpg" />
</div>
</div>
<a class="carousel-control-prev" href="#carousel-sample" role="button" data-slide="prev">
<a class="carousel-control-prev" href="#carousel-sample" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-sample" role="button" data-slide="next">
<a class="carousel-control-next" href="#carousel-sample" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
@@ -620,36 +626,36 @@
</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">id=</span><span class="s">"carousel-sample"</span> <span class="na">class=</span><span class="s">"carousel slide"</span> <span class="na">data-ride=</span><span class="s">"carousel"</span><span class="nt">&gt;</span>
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"carousel-sample"</span> <span class="na">class=</span><span class="s">"carousel slide"</span> <span class="na">data-bs-ride=</span><span class="s">"carousel"</span><span class="nt">&gt;</span>
<span class="nt">&lt;ol</span> <span class="na">class=</span><span class="s">"carousel-indicators"</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">data-target=</span><span class="s">"#carousel-sample"</span> <span class="na">data-slide-to=</span><span class="s">"0"</span> <span class="na">class=</span><span class="s">"active"</span><span class="nt">&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">data-target=</span><span class="s">"#carousel-sample"</span> <span class="na">data-slide-to=</span><span class="s">"1"</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">data-target=</span><span class="s">"#carousel-sample"</span> <span class="na">data-slide-to=</span><span class="s">"2"</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">data-target=</span><span class="s">"#carousel-sample"</span> <span class="na">data-slide-to=</span><span class="s">"3"</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">data-target=</span><span class="s">"#carousel-sample"</span> <span class="na">data-slide-to=</span><span class="s">"4"</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">data-bs-target=</span><span class="s">"#carousel-sample"</span> <span class="na">data-bs-slide-to=</span><span class="s">"0"</span> <span class="na">class=</span><span class="s">"active"</span><span class="nt">&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">data-bs-target=</span><span class="s">"#carousel-sample"</span> <span class="na">data-bs-slide-to=</span><span class="s">"1"</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">data-bs-target=</span><span class="s">"#carousel-sample"</span> <span class="na">data-bs-slide-to=</span><span class="s">"2"</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">data-bs-target=</span><span class="s">"#carousel-sample"</span> <span class="na">data-bs-slide-to=</span><span class="s">"3"</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">data-bs-target=</span><span class="s">"#carousel-sample"</span> <span class="na">data-bs-slide-to=</span><span class="s">"4"</span> <span class="na">class=</span><span class="s">""</span><span class="nt">&gt;&lt;/li&gt;</span>
<span class="nt">&lt;/ol&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"carousel-inner"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"carousel-item active"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">data-holder-rendered=</span><span class="s">"true"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">src=</span><span class="s">"..."</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">"carousel-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">data-holder-rendered=</span><span class="s">"true"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">src=</span><span class="s">"..."</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">"carousel-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">data-holder-rendered=</span><span class="s">"true"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">src=</span><span class="s">"..."</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">"carousel-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">data-holder-rendered=</span><span class="s">"true"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">src=</span><span class="s">"..."</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">"carousel-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">data-holder-rendered=</span><span class="s">"true"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">class=</span><span class="s">"d-block w-100"</span> <span class="na">alt=</span><span class="s">""</span> <span class="na">src=</span><span class="s">"..."</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<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;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-bs-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">"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;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-bs-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">"visually-hidden"</span><span class="nt">&gt;</span>Next<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/a&gt;</span>
@@ -665,11 +671,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="../license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -680,7 +686,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -693,8 +699,5 @@
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

101
demo/docs/charts.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href="..">
<img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="../cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="../colors.html" >
Colors
</a>
<a class="dropdown-item" href="../dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="../maps.html" >
Maps
</a>
<a class="dropdown-item" href="../map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="../maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="../navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="../tables.html" >
Tables
</a>
<a class="dropdown-item" href="../calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="../carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="../markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="../auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="../layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="../layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="../layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="../layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="../layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="../layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -327,17 +333,17 @@
</div>
</div>
</div>
<div class="row g-5">
<div class="row">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<ul class="nav nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<ul class="nav nav-pills collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
@@ -366,13 +372,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<ul class="nav nav-pills collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
@@ -506,13 +512,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<ul class="nav nav-pills collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
@@ -521,13 +527,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<ul class="nav nav-pills collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
@@ -555,7 +561,7 @@
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
</span>
Changelog
<span class="badge bg-blue-lt ml-auto">1.0.0-alpha.14</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-alpha.18</span>
</a>
</li>
</ul>
@@ -564,8 +570,8 @@
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="mb-5">
<div class="d-flex mb-3">
<div>
<div class="d-flex mb-4">
<h1 class="mt-0">Charts</h1>
</div>
</div>
@@ -579,11 +585,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="../license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -594,7 +600,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -607,8 +613,5 @@
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

105
demo/docs/colors.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href="..">
<img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="../cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="../colors.html" >
Colors
</a>
<a class="dropdown-item" href="../dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="../maps.html" >
Maps
</a>
<a class="dropdown-item" href="../map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="../maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="../navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="../tables.html" >
Tables
</a>
<a class="dropdown-item" href="../calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="../carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="../markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="../auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="../layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="../layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="../layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="../layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="../layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="../layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -327,17 +333,17 @@
</div>
</div>
</div>
<div class="row g-5">
<div class="row">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<ul class="nav nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="true">
<a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-base">
<ul class="nav nav-pills collapse show" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
@@ -366,13 +372,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-components">
<ul class="nav nav-pills collapse" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
@@ -506,13 +512,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<ul class="nav nav-pills collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
@@ -521,13 +527,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<ul class="nav nav-pills collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
@@ -555,7 +561,7 @@
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
</span>
Changelog
<span class="badge bg-blue-lt ml-auto">1.0.0-alpha.14</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-alpha.18</span>
</a>
</li>
</ul>
@@ -564,12 +570,12 @@
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="mb-5">
<div class="d-flex mb-3">
<div>
<div class="d-flex mb-4">
<h1 class="mt-0">Colors</h1>
<p class="ml-auto">
<p class="ms-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"><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>
<svg xmlns="http://www.w3.org/2000/svg" class="icon pe-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>
Bootstrap documentation
</a>
</p>
@@ -813,11 +819,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="../license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -828,7 +834,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -841,8 +847,5 @@
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

101
demo/docs/countup.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href="..">
<img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="../cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="../colors.html" >
Colors
</a>
<a class="dropdown-item" href="../dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="../maps.html" >
Maps
</a>
<a class="dropdown-item" href="../map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="../maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="../navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="../tables.html" >
Tables
</a>
<a class="dropdown-item" href="../calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="../carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="../markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="../auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="../layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="../layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="../layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="../layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="../layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="../layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -327,17 +333,17 @@
</div>
</div>
</div>
<div class="row g-5">
<div class="row">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<ul class="nav nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<ul class="nav nav-pills collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
@@ -366,13 +372,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<ul class="nav nav-pills collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
@@ -506,13 +512,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<ul class="nav nav-pills collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
@@ -521,13 +527,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<ul class="nav nav-pills collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
@@ -555,7 +561,7 @@
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
</span>
Changelog
<span class="badge bg-blue-lt ml-auto">1.0.0-alpha.14</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-alpha.18</span>
</a>
</li>
</ul>
@@ -564,8 +570,8 @@
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="mb-5">
<div class="d-flex mb-3">
<div>
<div class="d-flex mb-4">
<h1 class="mt-0">Countup</h1>
</div>
<p>A countup element is used to display numerical data in an interesting way and make the interface more interactive. All the available options can be found [here](https://inorganik.github.io/countUp.js/)</p>
@@ -748,11 +754,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="../license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -763,7 +769,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -777,8 +783,5 @@
<script src="../dist/libs/countup.js/dist/countUp.js"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

101
demo/docs/cursors.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href="..">
<img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="../cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="../colors.html" >
Colors
</a>
<a class="dropdown-item" href="../dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="../maps.html" >
Maps
</a>
<a class="dropdown-item" href="../map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="../maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="../navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="../tables.html" >
Tables
</a>
<a class="dropdown-item" href="../calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="../carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="../markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="../auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="../layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="../layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="../layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="../layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="../layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="../layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -327,17 +333,17 @@
</div>
</div>
</div>
<div class="row g-5">
<div class="row">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<ul class="nav nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<ul class="nav nav-pills collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
@@ -366,13 +372,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-components">
<ul class="nav nav-pills collapse" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
@@ -506,13 +512,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="true">
<a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-utils">
<ul class="nav nav-pills collapse show" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link active">
Cursors
@@ -521,13 +527,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<ul class="nav nav-pills collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
@@ -555,7 +561,7 @@
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
</span>
Changelog
<span class="badge bg-blue-lt ml-auto">1.0.0-alpha.14</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-alpha.18</span>
</a>
</li>
</ul>
@@ -564,8 +570,8 @@
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="mb-5">
<div class="d-flex mb-3">
<div>
<div class="d-flex mb-4">
<h1 class="mt-0">Cursors</h1>
</div>
<p>You can use different cursors to reflect the intended user interaction with particular elements of an interface. The cursor will change when a user hovers over a given element to indicate the action which can be performed.</p>
@@ -637,11 +643,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="../license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -652,7 +658,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -665,8 +671,5 @@
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

105
demo/docs/divider.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href="..">
<img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="../cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="../colors.html" >
Colors
</a>
<a class="dropdown-item" href="../dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="../maps.html" >
Maps
</a>
<a class="dropdown-item" href="../map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="../maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="../navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="../tables.html" >
Tables
</a>
<a class="dropdown-item" href="../calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="../carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="../markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="../auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="../layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="../layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="../layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="../layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="../layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="../layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -327,17 +333,17 @@
</div>
</div>
</div>
<div class="row g-5">
<div class="row">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<ul class="nav nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<ul class="nav nav-pills collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
@@ -366,13 +372,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<ul class="nav nav-pills collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
@@ -506,13 +512,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<ul class="nav nav-pills collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
@@ -521,13 +527,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<ul class="nav nav-pills collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
@@ -555,7 +561,7 @@
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
</span>
Changelog
<span class="badge bg-blue-lt ml-auto">1.0.0-alpha.14</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-alpha.18</span>
</a>
</li>
</ul>
@@ -564,12 +570,12 @@
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="mb-5">
<div class="d-flex mb-3">
<div>
<div class="d-flex mb-4">
<h1 class="mt-0">Divider</h1>
<p class="ml-auto">
<p class="ms-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"><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>
<svg xmlns="http://www.w3.org/2000/svg" class="icon pe-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>
Bootstrap documentation
</a>
</p>
@@ -695,11 +701,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="../license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -710,7 +716,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -723,8 +729,5 @@
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

199
demo/docs/dropdowns.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href="..">
<img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="../cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="../colors.html" >
Colors
</a>
<a class="dropdown-item" href="../dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="../maps.html" >
Maps
</a>
<a class="dropdown-item" href="../map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="../maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="../navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="../tables.html" >
Tables
</a>
<a class="dropdown-item" href="../calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="../carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="../markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="../auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="../layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="../layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="../layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="../layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="../layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="../layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -327,17 +333,17 @@
</div>
</div>
</div>
<div class="row g-5">
<div class="row">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<ul class="nav nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<ul class="nav nav-pills collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
@@ -366,13 +372,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<ul class="nav nav-pills collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
@@ -506,13 +512,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<ul class="nav nav-pills collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
@@ -521,13 +527,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<ul class="nav nav-pills collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
@@ -555,7 +561,7 @@
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
</span>
Changelog
<span class="badge bg-blue-lt ml-auto">1.0.0-alpha.14</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-alpha.18</span>
</a>
</li>
</ul>
@@ -564,12 +570,12 @@
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="mb-5">
<div class="d-flex mb-3">
<div>
<div class="d-flex mb-4">
<h1 class="mt-0">Dropdowns</h1>
<p class="ml-auto">
<p class="ms-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"><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>
<svg xmlns="http://www.w3.org/2000/svg" class="icon pe-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>
Bootstrap documentation
</a>
</p>
@@ -581,10 +587,10 @@
<div class="example no_toc_section example-centered">
<div class="example-content">
<div class="dropdown-menu dropdown-menu-demo">
<a class="dropdown-item" href="javascript:void()">
<a class="dropdown-item" href="javascript:void(0)">
Action
</a>
<a class="dropdown-item" href="javascript:void()">
<a class="dropdown-item" href="javascript:void(0)">
Another action
</a>
</div>
@@ -607,14 +613,14 @@
<div class="example no_toc_section example-centered">
<div class="example-content">
<div class="dropdown-menu dropdown-menu-demo">
<a class="dropdown-item" href="javascript:void()">
<a class="dropdown-item" href="javascript:void(0)">
Action
</a>
<a class="dropdown-item" href="javascript:void()">
<a class="dropdown-item" href="javascript:void(0)">
Another action
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void()">Separated link</a>
<a class="dropdown-item" href="javascript:void(0)">Separated link</a>
</div>
</div>
</div>
@@ -637,13 +643,13 @@
<div class="example no_toc_section example-centered">
<div class="example-content">
<div class="dropdown-menu dropdown-menu-demo">
<a class="dropdown-item" href="javascript:void()">
<a class="dropdown-item" href="javascript:void(0)">
Action
</a>
<a class="dropdown-item" href="javascript:void()">
<a class="dropdown-item" href="javascript:void(0)">
Another action
</a>
<a class="dropdown-item active" href="javascript:void()">Active action</a>
<a class="dropdown-item active" href="javascript:void(0)">Active action</a>
</div>
</div>
</div>
@@ -665,13 +671,13 @@
<div class="example no_toc_section example-centered">
<div class="example-content">
<div class="dropdown-menu dropdown-menu-demo">
<a class="dropdown-item" href="javascript:void()">
<a class="dropdown-item" href="javascript:void(0)">
Action
</a>
<a class="dropdown-item" href="javascript:void()">
<a class="dropdown-item" href="javascript:void(0)">
Another action
</a>
<a class="dropdown-item disabled" href="javascript:void()">Disabled action</a>
<a class="dropdown-item disabled" href="javascript:void(0)">Disabled action</a>
</div>
</div>
</div>
@@ -694,10 +700,10 @@
<div class="example-content">
<div class="dropdown-menu dropdown-menu-demo">
<span class="dropdown-header">Dropdown header</span>
<a class="dropdown-item" href="javascript:void()">
<a class="dropdown-item" href="javascript:void(0)">
Action
</a>
<a class="dropdown-item" href="javascript:void()">
<a class="dropdown-item" href="javascript:void(0)">
Another action
</a>
</div>
@@ -722,11 +728,11 @@
<div class="example-content">
<div class="dropdown-menu dropdown-menu-demo">
<span class="dropdown-header">Dropdown header</span>
<a class="dropdown-item" href="javascript:void()">
<a class="dropdown-item" href="javascript:void(0)">
<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>
Action
</a>
<a class="dropdown-item" href="javascript:void()">
<a class="dropdown-item" href="javascript:void(0)">
<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>
Another action
</a>
@@ -753,10 +759,10 @@
<div class="example no_toc_section example-centered">
<div class="example-content">
<div class="dropdown-menu dropdown-menu-demo dropdown-menu-arrow">
<a class="dropdown-item" href="javascript:void()">
<a class="dropdown-item" href="javascript:void(0)">
Action
</a>
<a class="dropdown-item" href="javascript:void()">
<a class="dropdown-item" href="javascript:void(0)">
Another action
</a>
</div>
@@ -779,13 +785,13 @@
<div class="example no_toc_section example-centered">
<div class="example-content">
<div class="dropdown-menu dropdown-menu-demo">
<a class="dropdown-item" href="javascript:void()">
<a class="dropdown-item" href="javascript:void(0)">
Action
<span class="badge bg-primary ml-auto">12</span>
<span class="badge bg-primary ms-auto">12</span>
</a>
<a class="dropdown-item" href="javascript:void()">
<a class="dropdown-item" href="javascript:void(0)">
Another action
<span class="badge bg-green ml-auto"></span>
<span class="badge bg-green ms-auto"></span>
</a>
</div>
</div>
@@ -795,11 +801,11 @@
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-menu dropdown-menu-demo"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>
Action
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-primary ml-auto"</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 bg-primary ms-auto"</span><span class="nt">&gt;</span>12<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">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>
Another action
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-green ml-auto"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"badge bg-green ms-auto"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</figure>
@@ -809,36 +815,36 @@
<div class="example no_toc_section example-centered">
<div class="example-content">
<div class="dropdown-menu dropdown-menu-demo">
<label class="dropdown-item"><input class="form-check-input m-0 mr-2" type="checkbox" /> Option 1</label>
<label class="dropdown-item"><input class="form-check-input m-0 mr-2" type="checkbox" /> Option 2</label>
<label class="dropdown-item"><input class="form-check-input m-0 mr-2" type="checkbox" /> Option 3</label>
<label class="dropdown-item"><input class="form-check-input m-0 me-2" type="checkbox" /> Option 1</label>
<label class="dropdown-item"><input class="form-check-input m-0 me-2" type="checkbox" /> Option 2</label>
<label class="dropdown-item"><input class="form-check-input m-0 me-2" type="checkbox" /> Option 3</label>
</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">"dropdown-menu dropdown-menu-demo"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"dropdown-item"</span><span class="nt">&gt;&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input m-0 mr-2"</span> <span class="na">type=</span><span class="s">"checkbox"</span><span class="nt">&gt;</span> Option 1<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"dropdown-item"</span><span class="nt">&gt;&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input m-0 mr-2"</span> <span class="na">type=</span><span class="s">"checkbox"</span><span class="nt">&gt;</span> Option 2<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"dropdown-item"</span><span class="nt">&gt;&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input m-0 mr-2"</span> <span class="na">type=</span><span class="s">"checkbox"</span><span class="nt">&gt;</span> Option 3<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"dropdown-item"</span><span class="nt">&gt;&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input m-0 me-2"</span> <span class="na">type=</span><span class="s">"checkbox"</span><span class="nt">&gt;</span> Option 1<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"dropdown-item"</span><span class="nt">&gt;&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input m-0 me-2"</span> <span class="na">type=</span><span class="s">"checkbox"</span><span class="nt">&gt;</span> Option 2<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"dropdown-item"</span><span class="nt">&gt;&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input m-0 me-2"</span> <span class="na">type=</span><span class="s">"checkbox"</span><span class="nt">&gt;</span> Option 3<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</figure>
</div>
<div class="example no_toc_section example-centered">
<div class="example-content">
<div class="dropdown-menu dropdown-menu-demo">
<label class="dropdown-item"><input class="form-check-input m-0 mr-2" type="radio" /> Option 1</label>
<label class="dropdown-item"><input class="form-check-input m-0 mr-2" type="radio" /> Option 2</label>
<label class="dropdown-item"><input class="form-check-input m-0 mr-2" type="radio" /> Option 3</label>
<label class="dropdown-item"><input class="form-check-input m-0 me-2" type="radio" /> Option 1</label>
<label class="dropdown-item"><input class="form-check-input m-0 me-2" type="radio" /> Option 2</label>
<label class="dropdown-item"><input class="form-check-input m-0 me-2" type="radio" /> Option 3</label>
</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">"dropdown-menu dropdown-menu-demo"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"dropdown-item"</span><span class="nt">&gt;&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input m-0 mr-2"</span> <span class="na">type=</span><span class="s">"radio"</span><span class="nt">&gt;</span> Option 1<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"dropdown-item"</span><span class="nt">&gt;&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input m-0 mr-2"</span> <span class="na">type=</span><span class="s">"radio"</span><span class="nt">&gt;</span> Option 2<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"dropdown-item"</span><span class="nt">&gt;&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input m-0 mr-2"</span> <span class="na">type=</span><span class="s">"radio"</span><span class="nt">&gt;</span> Option 3<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"dropdown-item"</span><span class="nt">&gt;&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input m-0 me-2"</span> <span class="na">type=</span><span class="s">"radio"</span><span class="nt">&gt;</span> Option 1<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"dropdown-item"</span><span class="nt">&gt;&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input m-0 me-2"</span> <span class="na">type=</span><span class="s">"radio"</span><span class="nt">&gt;</span> Option 2<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"dropdown-item"</span><span class="nt">&gt;&lt;input</span> <span class="na">class=</span><span class="s">"form-check-input m-0 me-2"</span> <span class="na">type=</span><span class="s">"radio"</span><span class="nt">&gt;</span> Option 3<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</figure>
</div>
@@ -848,11 +854,11 @@
<div class="example-content">
<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="javascript:void()">
<a class="dropdown-item" href="javascript:void(0)">
<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>
Action
</a>
<a class="dropdown-item" href="javascript:void()">
<a class="dropdown-item" href="javascript:void(0)">
<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>
Another action
</a>
@@ -879,27 +885,27 @@
<div class="example no_toc_section example-centered">
<div class="example-content">
<div class="btn-list align-items-start">
<a href="javascript:void()" class="btn btn-white">
<a href="javascript:void(0)" class="btn btn-white">
Button
</a>
<div class="dropdown show">
<a href="javascript:void()" class="btn btn-primary dropdown-toggle">Dropdown</a>
<a href="javascript:void(0)" class="btn btn-primary dropdown-toggle">Dropdown</a>
<div class="dropdown-menu dropdown-menu-card show position-static" style="max-width: 20rem;">
<div class="card d-flex flex-column">
<a href="javascript:void()">
<a href="javascript:void(0)">
<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="javascript:void()">How do you know she is a witch?</a></h3>
<h3 class="card-title"><a href="javascript:void(0)">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-4 mt-auto">
<span class="avatar" style="background-image: url(../static/avatars/000f.jpg)"></span>
<div class="ml-3">
<div class="ms-3">
<a href="../profile.html" class="text-body">Maryjo Lebarree</a>
<div class="text-muted">3 days ago</div>
</div>
<div class="ml-auto">
<a href="javascript:void()" class="icon d-none d-md-inline-block ml-3 text-muted">
<div class="ms-auto">
<a href="javascript:void(0)" class="icon d-none d-md-inline-block ms-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" 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>
</a>
</div>
@@ -928,12 +934,12 @@
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a wart. You ...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex align-items-center pt-4 mt-auto"</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;div</span> <span class="na">class=</span><span class="s">"ml-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ms-3"</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">"text-body"</span><span class="nt">&gt;</span>Maryjo Lebarree<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-muted"</span><span class="nt">&gt;</span>3 days ago<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ml-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">"icon d-none d-md-inline-block ml-3 text-muted"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ms-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">"icon d-none d-md-inline-block ms-3 text-muted"</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>
@@ -953,11 +959,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="../license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -968,7 +974,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -981,8 +987,5 @@
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

101
demo/docs/empty.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href="..">
<img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="../cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="../colors.html" >
Colors
</a>
<a class="dropdown-item" href="../dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="../maps.html" >
Maps
</a>
<a class="dropdown-item" href="../map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="../maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="../navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="../tables.html" >
Tables
</a>
<a class="dropdown-item" href="../calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="../carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="../markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="../auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="../layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="../layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="../layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="../layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="../layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="../layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -327,17 +333,17 @@
</div>
</div>
</div>
<div class="row g-5">
<div class="row">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<ul class="nav nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<ul class="nav nav-pills collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
@@ -366,13 +372,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<ul class="nav nav-pills collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
@@ -506,13 +512,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<ul class="nav nav-pills collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
@@ -521,13 +527,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<ul class="nav nav-pills collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
@@ -555,7 +561,7 @@
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
</span>
Changelog
<span class="badge bg-blue-lt ml-auto">1.0.0-alpha.14</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-alpha.18</span>
</a>
</li>
</ul>
@@ -564,8 +570,8 @@
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="mb-5">
<div class="d-flex mb-3">
<div>
<div class="d-flex mb-4">
<h1 class="mt-0">Empty states</h1>
</div>
<p>Empty states or blank pages are commonly used as placeholders for first-use, empty data or error screens. Their aim is to engage users when there is no content to display and that is why their design is extremely important from the point of view of the user experience of your website or app.</p>
@@ -691,11 +697,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="../license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -706,7 +712,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -719,8 +725,5 @@
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

125
demo/docs/flags.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href="..">
<img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="../cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="../colors.html" >
Colors
</a>
<a class="dropdown-item" href="../dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="../maps.html" >
Maps
</a>
<a class="dropdown-item" href="../map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="../maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="../navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="../tables.html" >
Tables
</a>
<a class="dropdown-item" href="../calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="../carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="../markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="../auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="../layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="../layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="../layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="../layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="../layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="../layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -327,17 +333,17 @@
</div>
</div>
</div>
<div class="row g-5">
<div class="row">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<ul class="nav nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<ul class="nav nav-pills collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
@@ -366,13 +372,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<ul class="nav nav-pills collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
@@ -506,13 +512,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<ul class="nav nav-pills collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
@@ -521,13 +527,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<ul class="nav nav-pills collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
@@ -555,7 +561,7 @@
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
</span>
Changelog
<span class="badge bg-blue-lt ml-auto">1.0.0-alpha.14</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-alpha.18</span>
</a>
</li>
</ul>
@@ -564,8 +570,8 @@
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="mb-5">
<div class="d-flex mb-3">
<div>
<div class="d-flex mb-4">
<h1 class="mt-0">Flags</h1>
</div>
<div class="alert alert-info">This module is available in <code>tabler-flags</code>
@@ -577,15 +583,15 @@
<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>
<span class="flag flag-country-br mr-1"></span>
<span class="flag flag-country-tg me-1"></span>
<span class="flag flag-country-br me-1"></span>
<span class="flag flag-country-pt"></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">"flag flag-country-tg 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-country-br mr-1"</span><span class="nt">&gt;&lt;/span&gt;</span>
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"flag flag-country-tg me-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-country-br me-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-country-pt"</span><span class="nt">&gt;&lt;/span&gt;</span></code></pre>
</figure>
</div>
@@ -593,20 +599,20 @@
<p>Using Bootstrap’s typical naming structure, you can create a standard flag, or scale it up or down to different sizes based on what’s needed.</p>
<div class="example no_toc_section">
<div class="example-content">
<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-xl flag-country-pl me-1"></span>
<span class="flag flag-lg flag-country-pl me-1"></span>
<span class="flag flag-md flag-country-pl"></span>
<span class="flag flag-sm flag-country-pl mr-1"></span>
<span class="flag flag-xs flag-country-pl mr-1"></span>
<span class="flag flag-sm flag-country-pl me-1"></span>
<span class="flag flag-xs flag-country-pl me-1"></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">"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>
<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 me-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 me-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-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>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"flag flag-sm flag-country-pl me-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 me-1"</span><span class="nt">&gt;&lt;/span&gt;</span></code></pre>
</figure>
</div>
<h2 id="types">Types</h2>
@@ -2128,11 +2134,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="../license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -2143,7 +2149,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -2156,8 +2162,5 @@
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

211
demo/docs/form-elements.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -20,29 +20,26 @@
<link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href="..">
<img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -51,14 +48,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -85,11 +82,11 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -110,6 +107,9 @@
<a class="dropdown-item" href="../cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="../colors.html" >
Colors
</a>
<a class="dropdown-item" href="../dropdowns.html" >
Dropdowns
</a>
@@ -122,17 +122,20 @@
<a class="dropdown-item" href="../maps.html" >
Maps
</a>
<a class="dropdown-item" href="../map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="../maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="../navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts-heatmap.html" >
Charts heatmap
</a>
@@ -148,9 +151,6 @@
<a class="dropdown-item" href="../tables.html" >
Tables
</a>
<a class="dropdown-item" href="../calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="../carousel.html" >
Carousel
</a>
@@ -163,8 +163,8 @@
<a class="dropdown-item" href="../markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -175,8 +175,8 @@
<a href="../auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -199,7 +199,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -240,7 +240,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -256,6 +256,9 @@
<a class="dropdown-item" href="../layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="../layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="../layout-vertical-right.html" >
Right vertical
</a>
@@ -273,6 +276,9 @@
<a class="dropdown-item" href="../layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="../layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="../layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -308,7 +314,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -328,17 +334,17 @@
</div>
</div>
</div>
<div class="row g-5">
<div class="row">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<ul class="nav nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<ul class="nav nav-pills collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
@@ -367,13 +373,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<ul class="nav nav-pills collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
@@ -507,13 +513,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<ul class="nav nav-pills collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
@@ -522,13 +528,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<ul class="nav nav-pills collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
@@ -556,7 +562,7 @@
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
</span>
Changelog
<span class="badge bg-blue-lt ml-auto">1.0.0-alpha.14</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-alpha.18</span>
</a>
</li>
</ul>
@@ -565,12 +571,12 @@
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="mb-5">
<div class="d-flex mb-3">
<div>
<div class="d-flex mb-4">
<h1 class="mt-0">Form elements</h1>
<p class="ml-auto">
<p class="ms-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"><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>
<svg xmlns="http://www.w3.org/2000/svg" class="icon pe-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>
Bootstrap documentation
</a>
</p>
@@ -732,7 +738,7 @@
<input type="text" class="form-control" placeholder="Search for…" />
</div>
<div class="col-auto">
<a href="javascript:void()" class="btn btn-white btn-icon" aria-label="Button">
<a href="javascript:void(0)" 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"><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>
</a>
</div>
@@ -1285,7 +1291,7 @@
</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"><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>
<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 3c.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>
</span>
</label>
<label class="form-selectgroup-item">
@@ -1309,22 +1315,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"><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 class="form-selectgroup-label"><svg xmlns="http://www.w3.org/2000/svg" class="icon me-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>
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"><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>
<span class="form-selectgroup-label"><svg xmlns="http://www.w3.org/2000/svg" class="icon me-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>
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"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><circle cx="12" cy="12" r="9" /></svg>
<span class="form-selectgroup-label"><svg xmlns="http://www.w3.org/2000/svg" class="icon me-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>
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"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><rect x="4" y="4" width="16" height="16" rx="2" /></svg>
<span class="form-selectgroup-label"><svg xmlns="http://www.w3.org/2000/svg" class="icon me-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>
Square</span>
</label>
</div>
@@ -1409,22 +1415,22 @@
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-selectgroup"</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">"icons"</span> <span class="na">value=</span><span class="s">"home"</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;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-label"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code with class="mr-1" --&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-label"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code with class="me-1" --&gt;</span>
Home<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&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">"icons"</span> <span class="na">value=</span><span class="s">"user"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-label"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code with class="mr-1" --&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-label"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code with class="me-1" --&gt;</span>
User<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&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">"icons"</span> <span class="na">value=</span><span class="s">"circle"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-label"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code with class="mr-1" --&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-label"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code with class="me-1" --&gt;</span>
Circle<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&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">"icons"</span> <span class="na">value=</span><span class="s">"square"</span> <span class="na">class=</span><span class="s">"form-selectgroup-input"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-label"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code with class="mr-1" --&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-selectgroup-label"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code with class="me-1" --&gt;</span>
Square<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;/div&gt;</span>
@@ -1462,11 +1468,11 @@
<label class="form-selectgroup-item flex-fill">
<input type="radio" name="form-payment" value="visa" class="form-selectgroup-input" />
<div class="form-selectgroup-label d-flex align-items-center p-3">
<div class="mr-3">
<div class="me-3">
<span class="form-selectgroup-check"></span>
</div>
<div>
<span class="payment payment-provider-visa payment-xs mr-2"></span>
<span class="payment payment-provider-visa payment-xs me-2"></span>
ending in <strong>7998</strong>
</div>
</div>
@@ -1474,11 +1480,11 @@
<label class="form-selectgroup-item flex-fill">
<input type="radio" name="form-payment" value="mastercard" class="form-selectgroup-input" checked="" />
<div class="form-selectgroup-label d-flex align-items-center p-3">
<div class="mr-3">
<div class="me-3">
<span class="form-selectgroup-check"></span>
</div>
<div>
<span class="payment payment-provider-mastercard payment-xs mr-2"></span>
<span class="payment payment-provider-mastercard payment-xs me-2"></span>
ending in <strong>2807</strong>
</div>
</div>
@@ -1486,11 +1492,11 @@
<label class="form-selectgroup-item flex-fill">
<input type="radio" name="form-payment" value="paypal" class="form-selectgroup-input" />
<div class="form-selectgroup-label d-flex align-items-center p-3">
<div class="mr-3">
<div class="me-3">
<span class="form-selectgroup-check"></span>
</div>
<div>
<span class="payment payment-provider-paypal payment-xs mr-2"></span>
<span class="payment payment-provider-paypal payment-xs me-2"></span>
</div>
</div>
</label>
@@ -1502,11 +1508,11 @@
<label class="form-selectgroup-item flex-fill">
<input type="checkbox" name="form-project-manager[]" value="1" class="form-selectgroup-input" />
<div class="form-selectgroup-label d-flex align-items-center p-3">
<div class="mr-3">
<div class="me-3">
<span class="form-selectgroup-check"></span>
</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>
<span class="avatar me-3" style="background-image: url(../static/avatars/000m.jpg)"></span>
<div>
<div class="font-weight-medium">Paweł Kuna</div>
<div class="text-muted">UI Designer</div>
@@ -1517,11 +1523,11 @@
<label class="form-selectgroup-item flex-fill">
<input type="checkbox" name="form-project-manager[]" value="2" class="form-selectgroup-input" checked="" />
<div class="form-selectgroup-label d-flex align-items-center p-3">
<div class="mr-3">
<div class="me-3">
<span class="form-selectgroup-check"></span>
</div>
<div class="form-selectgroup-label-content d-flex align-items-center">
<span class="avatar mr-3">JL</span>
<span class="avatar me-3">JL</span>
<div>
<div class="font-weight-medium">Jeffie Lewzey</div>
<div class="text-muted">Chemical Engineer</div>
@@ -1532,11 +1538,11 @@
<label class="form-selectgroup-item flex-fill">
<input type="checkbox" name="form-project-manager[]" value="3" class="form-selectgroup-input" />
<div class="form-selectgroup-label d-flex align-items-center p-3">
<div class="mr-3">
<div class="me-3">
<span class="form-selectgroup-check"></span>
</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>
<span class="avatar me-3" style="background-image: url(../static/avatars/002m.jpg)"></span>
<div>
<div class="font-weight-medium">Mallory Hulme</div>
<div class="text-muted">Geologist IV</div>
@@ -1547,11 +1553,11 @@
<label class="form-selectgroup-item flex-fill">
<input type="checkbox" name="form-project-manager[]" value="4" class="form-selectgroup-input" />
<div class="form-selectgroup-label d-flex align-items-center p-3">
<div class="mr-3">
<div class="me-3">
<span class="form-selectgroup-check"></span>
</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>
<span class="avatar me-3" style="background-image: url(../static/avatars/003m.jpg)"></span>
<div>
<div class="font-weight-medium">Dunn Slane</div>
<div class="text-muted">Research Nurse</div>
@@ -1562,11 +1568,11 @@
<label class="form-selectgroup-item flex-fill">
<input type="checkbox" name="form-project-manager[]" value="5" class="form-selectgroup-input" />
<div class="form-selectgroup-label d-flex align-items-center p-3">
<div class="mr-3">
<div class="me-3">
<span class="form-selectgroup-check"></span>
</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>
<span class="avatar me-3" style="background-image: url(../static/avatars/000f.jpg)"></span>
<div>
<div class="font-weight-medium">Emmy Levet</div>
<div class="text-muted">VP Product Management</div>
@@ -1586,11 +1592,11 @@
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item flex-fill"</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">"form-payment"</span> <span class="na">value=</span><span class="s">"visa"</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;div</span> <span class="na">class=</span><span class="s">"mr-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"me-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;div&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"payment payment-provider-visa payment-xs mr-2"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"payment payment-provider-visa payment-xs me-2"</span><span class="nt">&gt;&lt;/span&gt;</span>
ending in <span class="nt">&lt;strong&gt;</span>7998<span class="nt">&lt;/strong&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
@@ -1598,11 +1604,11 @@
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item flex-fill"</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">"form-payment"</span> <span class="na">value=</span><span class="s">"mastercard"</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;div</span> <span class="na">class=</span><span class="s">"mr-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"me-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;div&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"payment payment-provider-mastercard payment-xs mr-2"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"payment payment-provider-mastercard payment-xs me-2"</span><span class="nt">&gt;&lt;/span&gt;</span>
ending in <span class="nt">&lt;strong&gt;</span>2807<span class="nt">&lt;/strong&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
@@ -1610,11 +1616,11 @@
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item flex-fill"</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">"form-payment"</span> <span class="na">value=</span><span class="s">"paypal"</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;div</span> <span class="na">class=</span><span class="s">"mr-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"me-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;div&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"payment payment-provider-paypal payment-xs mr-2"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"payment payment-provider-paypal payment-xs me-2"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/label&gt;</span>
@@ -1626,11 +1632,11 @@
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item flex-fill"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"form-project-manager[]"</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;div</span> <span class="na">class=</span><span class="s">"mr-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"me-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;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;span</span> <span class="na">class=</span><span class="s">"avatar me-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&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>
@@ -1641,11 +1647,11 @@
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item flex-fill"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"form-project-manager[]"</span> <span class="na">value=</span><span class="s">"2"</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;div</span> <span class="na">class=</span><span class="s">"mr-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"me-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;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;span</span> <span class="na">class=</span><span class="s">"avatar me-3"</span><span class="nt">&gt;</span>JL<span class="nt">&lt;/span&gt;</span>
<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>
@@ -1656,11 +1662,11 @@
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item flex-fill"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"form-project-manager[]"</span> <span class="na">value=</span><span class="s">"3"</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;div</span> <span class="na">class=</span><span class="s">"mr-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"me-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;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;span</span> <span class="na">class=</span><span class="s">"avatar me-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&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>
@@ -1671,11 +1677,11 @@
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item flex-fill"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"form-project-manager[]"</span> <span class="na">value=</span><span class="s">"4"</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;div</span> <span class="na">class=</span><span class="s">"mr-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"me-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;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;span</span> <span class="na">class=</span><span class="s">"avatar me-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&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>
@@ -1686,11 +1692,11 @@
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-selectgroup-item flex-fill"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">name=</span><span class="s">"form-project-manager[]"</span> <span class="na">value=</span><span class="s">"5"</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;div</span> <span class="na">class=</span><span class="s">"mr-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"me-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;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;span</span> <span class="na">class=</span><span class="s">"avatar me-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&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>
@@ -2098,10 +2104,10 @@
<span class="input-group-text">
https://tabler.io/users/
</span>
<input type="text" class="form-control pl-0" value="yourfancyusername" autocomplete="off" />
<input type="text" class="form-control ps-0" value="yourfancyusername" autocomplete="off" />
</div>
<div class="input-group input-group-flat">
<input type="text" class="form-control text-right pr-0" value="yourfancydomain" autocomplete="off" />
<input type="text" class="form-control text-end pe-0" value="yourfancydomain" autocomplete="off" />
<span class="input-group-text">
.tabler.io
</span>
@@ -2117,10 +2123,10 @@
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">&gt;</span>
https://tabler.io/users/
<span class="nt">&lt;/span&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 pl-0"</span> <span class="na">value=</span><span class="s">"yourfancyusername"</span> <span class="na">autocomplete=</span><span class="s">"off"</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 ps-0"</span> <span class="na">value=</span><span class="s">"yourfancyusername"</span> <span class="na">autocomplete=</span><span class="s">"off"</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">"input-group input-group-flat"</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 text-right pr-0"</span> <span class="na">value=</span><span class="s">"yourfancydomain"</span> <span class="na">autocomplete=</span><span class="s">"off"</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 text-end pe-0"</span> <span class="na">value=</span><span class="s">"yourfancydomain"</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">&gt;</span>
.tabler.io
<span class="nt">&lt;/span&gt;</span>
@@ -2137,7 +2143,7 @@
<div class="input-group input-group-flat">
<input type="password" class="form-control" value="ultrastrongpassword" autocomplete="off" />
<span class="input-group-text">
<a href="javascript:void()" class="input-group-link">Show password</a>
<a href="javascript:void(0)" class="input-group-link">Show password</a>
</span>
</div>
</div>
@@ -2165,11 +2171,11 @@
<div class="input-group input-group-flat">
<input type="text" class="form-control" autocomplete="off" />
<span class="input-group-text">
<a href="javascript:void()" 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>
<a href="javascript:void(0)" class="link-secondary" title="Clear search" data-bs-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>
</a>
<a href="javascript:void()" 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>
<a href="javascript:void(0)" class="link-secondary ms-2" title="Search settings" data-bs-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>
</a>
<a href="javascript:void()" 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>
<a href="javascript:void(0)" class="link-secondary ms-2 disabled" title="Add notification" data-bs-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>
</a>
</span>
</div>
@@ -2183,11 +2189,11 @@
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group input-group-flat"</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">autocomplete=</span><span class="s">"off"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-text"</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">"link-secondary"</span> <span class="na">title=</span><span class="s">"Clear search"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&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">"link-secondary"</span> <span class="na">title=</span><span class="s">"Clear search"</span> <span class="na">data-bs-toggle=</span><span class="s">"tooltip"</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;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"link-secondary ml-2"</span> <span class="na">title=</span><span class="s">"Search settings"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&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">"link-secondary ms-2"</span> <span class="na">title=</span><span class="s">"Search settings"</span> <span class="na">data-bs-toggle=</span><span class="s">"tooltip"</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;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"link-secondary ml-2 disabled"</span> <span class="na">title=</span><span class="s">"Add notification"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&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">"link-secondary ms-2 disabled"</span> <span class="na">title=</span><span class="s">"Add notification"</span> <span class="na">data-bs-toggle=</span><span class="s">"tooltip"</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;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span>
@@ -2203,11 +2209,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="../license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -2218,7 +2224,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -2284,8 +2290,5 @@
}
});
</script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

105
demo/docs/form-helpers.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href="..">
<img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="../cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="../colors.html" >
Colors
</a>
<a class="dropdown-item" href="../dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="../maps.html" >
Maps
</a>
<a class="dropdown-item" href="../map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="../maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="../navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="../tables.html" >
Tables
</a>
<a class="dropdown-item" href="../calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="../carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="../markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="../auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="../layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="../layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="../layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="../layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="../layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="../layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -327,17 +333,17 @@
</div>
</div>
</div>
<div class="row g-5">
<div class="row">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<ul class="nav nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<ul class="nav nav-pills collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
@@ -366,13 +372,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<ul class="nav nav-pills collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
@@ -506,13 +512,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<ul class="nav nav-pills collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
@@ -521,13 +527,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<ul class="nav nav-pills collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
@@ -555,7 +561,7 @@
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
</span>
Changelog
<span class="badge bg-blue-lt ml-auto">1.0.0-alpha.14</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-alpha.18</span>
</a>
</li>
</ul>
@@ -564,8 +570,8 @@
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="mb-5">
<div class="d-flex mb-3">
<div>
<div class="d-flex mb-4">
<h1 class="mt-0">Form helpers</h1>
</div>
<p>A form helper can be used to provide users with additional information about the elements of a form that may be unclear.</p>
@@ -574,12 +580,12 @@
<p>Use an input helper to display additional information about a form element. The text label will appear once a user hovers over the helper.</p>
<div class="example no_toc_section">
<div class="example-content">
<span class="form-help" data-toggle="popover" data-placement="top" data-content="&lt;p&gt;ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.&lt;/p&gt;&lt;p class='mb-0'&gt;&lt;a href=''&gt;USP ZIP codes lookup tools&lt;/a&gt;&lt;/p&gt;">?</span>
<span class="form-help" data-bs-toggle="popover" data-bs-placement="top" data-content="&lt;p&gt;ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.&lt;/p&gt;&lt;p class='mb-0'&gt;&lt;a href=''&gt;USP ZIP codes lookup tools&lt;/a&gt;&lt;/p&gt;">?</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">"form-help"</span> <span class="na">data-toggle=</span><span class="s">"popover"</span> <span class="na">data-placement=</span><span class="s">"top"</span> <span class="na">data-content=</span><span class="s">"&lt;p&gt;ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.&lt;/p&gt;
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"form-help"</span> <span class="na">data-bs-toggle=</span><span class="s">"popover"</span> <span class="na">data-bs-placement=</span><span class="s">"top"</span> <span class="na">data-content=</span><span class="s">"&lt;p&gt;ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.&lt;/p&gt;
&lt;p class='mb-0'&gt;&lt;a href=''&gt;USP ZIP codes lookup tools&lt;/a&gt;&lt;/p&gt;
"</span><span class="nt">&gt;</span>?<span class="nt">&lt;/span&gt;</span></code></pre>
</figure>
@@ -593,11 +599,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="../license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -608,7 +614,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -621,8 +627,5 @@
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

101
demo/docs/icons.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href="..">
<img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="../cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="../colors.html" >
Colors
</a>
<a class="dropdown-item" href="../dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="../maps.html" >
Maps
</a>
<a class="dropdown-item" href="../map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="../maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="../navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="../tables.html" >
Tables
</a>
<a class="dropdown-item" href="../calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="../carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="../markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="../auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="../layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="../layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="../layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="../layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="../layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="../layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -327,17 +333,17 @@
</div>
</div>
</div>
<div class="row g-5">
<div class="row">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<ul class="nav nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="true">
<a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-base">
<ul class="nav nav-pills collapse show" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
@@ -366,13 +372,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-components">
<ul class="nav nav-pills collapse" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
@@ -506,13 +512,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<ul class="nav nav-pills collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
@@ -521,13 +527,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<ul class="nav nav-pills collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
@@ -555,7 +561,7 @@
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
</span>
Changelog
<span class="badge bg-blue-lt ml-auto">1.0.0-alpha.14</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-alpha.18</span>
</a>
</li>
</ul>
@@ -564,8 +570,8 @@
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="mb-5">
<div class="d-flex mb-3">
<div>
<div class="d-flex mb-4">
<h1 class="mt-0">Icons</h1>
</div>
</div>
@@ -645,11 +651,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="../license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -660,7 +666,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -673,8 +679,5 @@
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

101
demo/docs/index.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href="..">
<img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="../cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="../colors.html" >
Colors
</a>
<a class="dropdown-item" href="../dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="../maps.html" >
Maps
</a>
<a class="dropdown-item" href="../map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="../maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="../navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="../tables.html" >
Tables
</a>
<a class="dropdown-item" href="../calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="../carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="../markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="../auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="../layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="../layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="../layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="../layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="../layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="../layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -327,17 +333,17 @@
</div>
</div>
</div>
<div class="row g-5">
<div class="row">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<ul class="nav nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="true">
<a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-base">
<ul class="nav nav-pills collapse show" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link active">
Introduction
@@ -366,13 +372,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-components">
<ul class="nav nav-pills collapse" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
@@ -506,13 +512,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<ul class="nav nav-pills collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
@@ -521,13 +527,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<ul class="nav nav-pills collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
@@ -555,7 +561,7 @@
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
</span>
Changelog
<span class="badge bg-blue-lt ml-auto">1.0.0-alpha.14</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-alpha.18</span>
</a>
</li>
</ul>
@@ -564,8 +570,8 @@
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="mb-5">
<div class="d-flex mb-3">
<div>
<div class="d-flex mb-4">
<h1 class="mt-0">Introduction</h1>
</div>
</div>
@@ -606,11 +612,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="../license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -621,7 +627,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -634,8 +640,5 @@
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

101
demo/docs/input-mask.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href="..">
<img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="../cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="../colors.html" >
Colors
</a>
<a class="dropdown-item" href="../dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="../maps.html" >
Maps
</a>
<a class="dropdown-item" href="../map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="../maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="../navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="../tables.html" >
Tables
</a>
<a class="dropdown-item" href="../calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="../carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="../markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="../auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="../layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="../layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="../layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="../layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="../layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="../layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -327,17 +333,17 @@
</div>
</div>
</div>
<div class="row g-5">
<div class="row">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<ul class="nav nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<ul class="nav nav-pills collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
@@ -366,13 +372,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-components">
<ul class="nav nav-pills collapse" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
@@ -506,13 +512,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<ul class="nav nav-pills collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
@@ -521,13 +527,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="true">
<a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-plugins">
<ul class="nav nav-pills collapse show" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
@@ -555,7 +561,7 @@
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
</span>
Changelog
<span class="badge bg-blue-lt ml-auto">1.0.0-alpha.14</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-alpha.18</span>
</a>
</li>
</ul>
@@ -564,8 +570,8 @@
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="mb-5">
<div class="d-flex mb-3">
<div>
<div class="d-flex mb-4">
<h1 class="mt-0">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>
@@ -593,11 +599,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="../license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -608,7 +614,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -621,8 +627,5 @@
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

145
demo/docs/modals.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href="..">
<img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="../cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="../colors.html" >
Colors
</a>
<a class="dropdown-item" href="../dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="../maps.html" >
Maps
</a>
<a class="dropdown-item" href="../map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="../maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="../navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="../tables.html" >
Tables
</a>
<a class="dropdown-item" href="../calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="../carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="../markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="../auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="../layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="../layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="../layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="../layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="../layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="../layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -327,17 +333,17 @@
</div>
</div>
</div>
<div class="row g-5">
<div class="row">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<ul class="nav nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<ul class="nav nav-pills collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
@@ -366,13 +372,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<ul class="nav nav-pills collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
@@ -506,13 +512,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<ul class="nav nav-pills collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
@@ -521,13 +527,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<ul class="nav nav-pills collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
@@ -555,7 +561,7 @@
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
</span>
Changelog
<span class="badge bg-blue-lt ml-auto">1.0.0-alpha.14</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-alpha.18</span>
</a>
</li>
</ul>
@@ -564,8 +570,8 @@
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="mb-5">
<div class="d-flex mb-3">
<div>
<div class="d-flex mb-4">
<h1 class="mt-0">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>
@@ -578,14 +584,14 @@
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></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 mr-auto" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
<button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Save changes</button>
</div>
</div>
</div>
@@ -597,14 +603,14 @@
<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">"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="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-bs-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="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 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;button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn me-auto"</span> <span class="na">data-bs-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-bs-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>
<span class="nt">&lt;/div&gt;</span></code></pre>
@@ -621,8 +627,8 @@
<div>If you proceed, you will lose all your personal data.</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link link-secondary mr-auto" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Yes, delete all my data</button>
<button type="button" class="btn btn-link link-secondary me-auto" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Yes, delete all my data</button>
</div>
</div>
</div>
@@ -637,8 +643,8 @@
<span class="nt">&lt;div&gt;</span>If you proceed, you will lose all your personal data.<span class="nt">&lt;/div&gt;</span>
<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-link link-secondary mr-auto"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span><span class="nt">&gt;</span>Cancel<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-danger"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span><span class="nt">&gt;</span>Yes, delete all my data<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-link link-secondary me-auto"</span> <span class="na">data-bs-dismiss=</span><span class="s">"modal"</span><span class="nt">&gt;</span>Cancel<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-danger"</span> <span class="na">data-bs-dismiss=</span><span class="s">"modal"</span><span class="nt">&gt;</span>Yes, delete all my data<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
@@ -652,7 +658,7 @@
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">New report</h5>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="mb-3">
@@ -665,7 +671,7 @@
<label class="form-selectgroup-item">
<input type="radio" name="report-type" value="1" class="form-selectgroup-input" checked="" />
<span class="form-selectgroup-label d-flex align-items-center p-3">
<span class="mr-3">
<span class="me-3">
<span class="form-selectgroup-check"></span>
</span>
<span class="form-selectgroup-label-content">
@@ -679,7 +685,7 @@
<label class="form-selectgroup-item">
<input type="radio" name="report-type" value="1" class="form-selectgroup-input" />
<span class="form-selectgroup-label d-flex align-items-center p-3">
<span class="mr-3">
<span class="me-3">
<span class="form-selectgroup-check"></span>
</span>
<span class="form-selectgroup-label-content">
@@ -698,7 +704,7 @@
<span class="input-group-text">
https://tabler.io/reports/
</span>
<input type="text" class="form-control pl-0" value="report-01" autocomplete="off" />
<input type="text" class="form-control ps-0" value="report-01" autocomplete="off" />
</div>
</div>
</div>
@@ -737,10 +743,10 @@
</div>
</div>
<div class="modal-footer">
<a href="javascript:void()" class="btn btn-link link-secondary" data-dismiss="modal">
<a href="javascript:void(0)" class="btn btn-link link-secondary" data-bs-dismiss="modal">
Cancel
</a>
<a href="javascript:void()" class="btn btn-primary ml-auto" data-dismiss="modal">
<a href="javascript:void(0)" class="btn btn-primary ms-auto" data-bs-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" fill="none" /><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
Create new report
</a>
@@ -755,7 +761,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">"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="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-bs-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="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>
@@ -768,7 +774,7 @@
<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;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;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">"me-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;/span&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>
@@ -782,7 +788,7 @@
<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;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;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">"me-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;/span&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>
@@ -801,7 +807,7 @@
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-text"</span><span class="nt">&gt;</span>
https://tabler.io/reports/
<span class="nt">&lt;/span&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 pl-0"</span> <span class="na">value=</span><span class="s">"report-01"</span> <span class="na">autocomplete=</span><span class="s">"off"</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 ps-0"</span> <span class="na">value=</span><span class="s">"report-01"</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
@@ -840,10 +846,10 @@
<span class="nt">&lt;/div&gt;</span>
<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;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-link link-secondary"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</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-link link-secondary"</span> <span class="na">data-bs-dismiss=</span><span class="s">"modal"</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 btn-primary ml-auto"</span> <span class="na">data-dismiss=</span><span class="s">"modal"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary ms-auto"</span> <span class="na">data-bs-dismiss=</span><span class="s">"modal"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
Create new report
<span class="nt">&lt;/a&gt;</span>
@@ -861,11 +867,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="../license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -876,7 +882,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -889,8 +895,5 @@
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

129
demo/docs/payments.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href="..">
<img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="../cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="../colors.html" >
Colors
</a>
<a class="dropdown-item" href="../dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="../maps.html" >
Maps
</a>
<a class="dropdown-item" href="../map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="../maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="../navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="../tables.html" >
Tables
</a>
<a class="dropdown-item" href="../calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="../carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="../markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="../auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="../layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="../layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="../layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="../layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="../layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="../layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -327,17 +333,17 @@
</div>
</div>
</div>
<div class="row g-5">
<div class="row">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<ul class="nav nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<ul class="nav nav-pills collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
@@ -366,13 +372,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<ul class="nav nav-pills collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
@@ -506,13 +512,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<ul class="nav nav-pills collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
@@ -521,13 +527,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<ul class="nav nav-pills collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
@@ -555,7 +561,7 @@
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
</span>
Changelog
<span class="badge bg-blue-lt ml-auto">1.0.0-alpha.14</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-alpha.18</span>
</a>
</li>
</ul>
@@ -564,8 +570,8 @@
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="mb-5">
<div class="d-flex mb-3">
<div>
<div class="d-flex mb-4">
<h1 class="mt-0">Payments</h1>
</div>
<div class="alert alert-info">This module is available in <code>tabler-payments</code>
@@ -577,34 +583,34 @@
<p>To create a payment provider icon, add the <code class="language-plaintext highlighter-rouge">payment</code> class to a component and specify the payment provider. The full list of payment providers can be found below.</p>
<div class="example no_toc_section">
<div class="example-content">
<span class="payment payment-provider-shopify mr-3"></span>
<span class="payment payment-provider-visa mr-3"></span>
<span class="payment payment-provider-paypal mr-3"></span>
<span class="payment payment-provider-shopify me-3"></span>
<span class="payment payment-provider-visa me-3"></span>
<span class="payment payment-provider-paypal me-3"></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">"payment payment-provider-shopify mr-3"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"payment payment-provider-visa mr-3"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"payment payment-provider-paypal mr-3"</span><span class="nt">&gt;&lt;/span&gt;</span></code></pre>
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"payment payment-provider-shopify me-3"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"payment payment-provider-visa me-3"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"payment payment-provider-paypal me-3"</span><span class="nt">&gt;&lt;/span&gt;</span></code></pre>
</figure>
</div>
<h2 id="payment-sizes">Payment sizes</h2>
<p>Using Bootstrap’s typical naming structure, you can create a standard payment, or scale it up or down to different sizes based on what’s needed.</p>
<div class="example no_toc_section">
<div class="example-content">
<span class="payment payment-xl payment-provider-shopify mr-3"></span>
<span class="payment payment-lg payment-provider-visa mr-3"></span>
<span class="payment payment-md payment-provider-paypal mr-3"></span>
<span class="payment payment-sm payment-provider-amazon mr-3"></span>
<span class="payment payment-xl payment-provider-shopify me-3"></span>
<span class="payment payment-lg payment-provider-visa me-3"></span>
<span class="payment payment-md payment-provider-paypal me-3"></span>
<span class="payment payment-sm payment-provider-amazon me-3"></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">"payment payment-xl payment-provider-shopify mr-3"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"payment payment-lg payment-provider-visa mr-3"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"payment payment-md payment-provider-paypal mr-3"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"payment payment-sm payment-provider-amazon mr-3"</span><span class="nt">&gt;&lt;/span&gt;</span></code></pre>
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"payment payment-xl payment-provider-shopify me-3"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"payment payment-lg payment-provider-visa me-3"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"payment payment-md payment-provider-paypal me-3"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"payment payment-sm payment-provider-amazon me-3"</span><span class="nt">&gt;&lt;/span&gt;</span></code></pre>
</figure>
</div>
<h2 id="types">Types</h2>
@@ -1092,11 +1098,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="../license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -1107,7 +1113,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -1120,8 +1126,5 @@
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

105
demo/docs/progress.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href="..">
<img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="../cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="../colors.html" >
Colors
</a>
<a class="dropdown-item" href="../dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="../maps.html" >
Maps
</a>
<a class="dropdown-item" href="../map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="../maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="../navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="../tables.html" >
Tables
</a>
<a class="dropdown-item" href="../calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="../carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="../markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="../auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="../layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="../layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="../layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="../layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="../layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="../layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -327,17 +333,17 @@
</div>
</div>
</div>
<div class="row g-5">
<div class="row">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<ul class="nav nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<ul class="nav nav-pills collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
@@ -366,13 +372,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<ul class="nav nav-pills collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
@@ -506,13 +512,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<ul class="nav nav-pills collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
@@ -521,13 +527,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<ul class="nav nav-pills collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
@@ -555,7 +561,7 @@
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
</span>
Changelog
<span class="badge bg-blue-lt ml-auto">1.0.0-alpha.14</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-alpha.18</span>
</a>
</li>
</ul>
@@ -564,12 +570,12 @@
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="mb-5">
<div class="d-flex mb-3">
<div>
<div class="d-flex mb-4">
<h1 class="mt-0">Progress bars</h1>
<p class="ml-auto">
<p class="ms-auto">
<a href="https://getbootstrap.com/docs/4.4/components/progress" 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"><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>
<svg xmlns="http://www.w3.org/2000/svg" class="icon pe-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>
Bootstrap documentation
</a>
</p>
@@ -723,11 +729,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="../license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -738,7 +744,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -751,8 +757,5 @@
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

101
demo/docs/range-slider.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -20,29 +20,26 @@
<link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href="..">
<img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -51,14 +48,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -85,11 +82,11 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -110,6 +107,9 @@
<a class="dropdown-item" href="../cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="../colors.html" >
Colors
</a>
<a class="dropdown-item" href="../dropdowns.html" >
Dropdowns
</a>
@@ -122,17 +122,20 @@
<a class="dropdown-item" href="../maps.html" >
Maps
</a>
<a class="dropdown-item" href="../map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="../maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="../navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts-heatmap.html" >
Charts heatmap
</a>
@@ -148,9 +151,6 @@
<a class="dropdown-item" href="../tables.html" >
Tables
</a>
<a class="dropdown-item" href="../calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="../carousel.html" >
Carousel
</a>
@@ -163,8 +163,8 @@
<a class="dropdown-item" href="../markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -175,8 +175,8 @@
<a href="../auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -199,7 +199,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -240,7 +240,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -256,6 +256,9 @@
<a class="dropdown-item" href="../layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="../layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="../layout-vertical-right.html" >
Right vertical
</a>
@@ -273,6 +276,9 @@
<a class="dropdown-item" href="../layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="../layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="../layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -308,7 +314,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -328,17 +334,17 @@
</div>
</div>
</div>
<div class="row g-5">
<div class="row">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<ul class="nav nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<ul class="nav nav-pills collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
@@ -367,13 +373,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<ul class="nav nav-pills collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
@@ -507,13 +513,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<ul class="nav nav-pills collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
@@ -522,13 +528,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<ul class="nav nav-pills collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
@@ -556,7 +562,7 @@
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
</span>
Changelog
<span class="badge bg-blue-lt ml-auto">1.0.0-alpha.14</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-alpha.18</span>
</a>
</li>
</ul>
@@ -565,8 +571,8 @@
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="mb-5">
<div class="d-flex mb-3">
<div>
<div class="d-flex mb-4">
<h1 class="mt-0">Range slider</h1>
</div>
</div>
@@ -780,11 +786,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="../license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -795,7 +801,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -822,8 +828,5 @@
}
});
</script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

109
demo/docs/ribbons.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href="..">
<img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="../cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="../colors.html" >
Colors
</a>
<a class="dropdown-item" href="../dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="../maps.html" >
Maps
</a>
<a class="dropdown-item" href="../map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="../maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="../navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="../tables.html" >
Tables
</a>
<a class="dropdown-item" href="../calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="../carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="../markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="../auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="../layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="../layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="../layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="../layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="../layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="../layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -327,17 +333,17 @@
</div>
</div>
</div>
<div class="row g-5">
<div class="row">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<ul class="nav nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<ul class="nav nav-pills collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
@@ -366,13 +372,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<ul class="nav nav-pills collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
@@ -506,13 +512,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<ul class="nav nav-pills collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
@@ -521,13 +527,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<ul class="nav nav-pills collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
@@ -555,7 +561,7 @@
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
</span>
Changelog
<span class="badge bg-blue-lt ml-auto">1.0.0-alpha.14</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-alpha.18</span>
</a>
</li>
</ul>
@@ -564,8 +570,8 @@
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="mb-5">
<div class="d-flex mb-3">
<div>
<div class="d-flex mb-4">
<h1 class="mt-0">Ribbons</h1>
</div>
<p>Ribbons are graphical elements which attract users' attention to a given element of an interface and make it stand out.</p>
@@ -600,9 +606,9 @@
<p>You can change the position of a ribbon by adding one of the following classes to the element:</p>
<ul>
<li><code class="language-plaintext highlighter-rouge">ribbon-top</code> - moves it to the top</li>
<li><code class="language-plaintext highlighter-rouge">ribbon-right</code> - moves it to the right</li>
<li><code class="language-plaintext highlighter-rouge">ribbon-end</code> - moves it to the right</li>
<li><code class="language-plaintext highlighter-rouge">ribbon-bottom</code> - moves it to the bottom</li>
<li><code class="language-plaintext highlighter-rouge">ribbon-left</code> - moves it to the lefg</li>
<li><code class="language-plaintext highlighter-rouge">ribbon-start</code> - moves it to the left</li>
</ul>
<p>Using multiple classes at once will give you more position options. For example, the following class: <code class="language-plaintext highlighter-rouge">.ribbon.ribbon-top.ribbon-left</code> will move the ribbon to the top left corner.</p>
<div class="example no_toc_section example-bg">
@@ -611,7 +617,7 @@
<div class="card">
<div class="card-body" style="height: 5rem">
</div>
<div class="ribbon ribbon-top ribbon-left">
<div class="ribbon ribbon-top ribbon-start">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
</div>
</div>
@@ -623,7 +629,7 @@
<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;div</span> <span class="na">class=</span><span class="s">"card-body"</span> <span class="na">style=</span><span class="s">"height: 5rem"</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">"ribbon ribbon-top ribbon-left"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"ribbon ribbon-top ribbon-start"</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;/div&gt;</span></code></pre>
@@ -716,11 +722,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="../license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -731,7 +737,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -744,8 +750,5 @@
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

121
demo/docs/skeleton.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href="..">
<img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="../cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="../colors.html" >
Colors
</a>
<a class="dropdown-item" href="../dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="../maps.html" >
Maps
</a>
<a class="dropdown-item" href="../map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="../maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="../navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="../tables.html" >
Tables
</a>
<a class="dropdown-item" href="../calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="../carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="../markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="../auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="../layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="../layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="../layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="../layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="../layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="../layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -327,17 +333,17 @@
</div>
</div>
</div>
<div class="row g-5">
<div class="row">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<ul class="nav nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<ul class="nav nav-pills collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
@@ -366,13 +372,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<ul class="nav nav-pills collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
@@ -506,13 +512,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<ul class="nav nav-pills collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
@@ -521,13 +527,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<ul class="nav nav-pills collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
@@ -555,7 +561,7 @@
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
</span>
Changelog
<span class="badge bg-blue-lt ml-auto">1.0.0-alpha.14</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-alpha.18</span>
</a>
</li>
</ul>
@@ -564,8 +570,8 @@
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="mb-5">
<div class="d-flex mb-3">
<div>
<div class="d-flex mb-4">
<h1 class="mt-0">Skeleton</h1>
</div>
<p>Skeleton is used to reserve space for content that soon will appear in a layout.</p>
@@ -608,7 +614,7 @@
<p>You can also move the lines to right or to center:</p>
<div class="example no_toc_section">
<div class="example-content">
<div class="text-right">
<div class="text-end">
<div class="skeleton-line"></div>
<div class="skeleton-line"></div>
<div class="skeleton-line"></div>
@@ -622,7 +628,7 @@
</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">"text-right"</span><span class="nt">&gt;</span>
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"text-end"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"skeleton-line"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"skeleton-line"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"skeleton-line"</span><span class="nt">&gt;&lt;/div&gt;</span>
@@ -823,7 +829,7 @@
<div class="skeleton-line"></div>
<div class="skeleton-line"></div>
</div>
<div class="col-2 ml-auto text-right">
<div class="col-2 ms-auto text-end">
<div class="skeleton-line"></div>
<div class="skeleton-line"></div>
</div>
@@ -838,7 +844,7 @@
<div class="skeleton-line"></div>
<div class="skeleton-line"></div>
</div>
<div class="col-2 ml-auto text-right">
<div class="col-2 ms-auto text-end">
<div class="skeleton-line"></div>
<div class="skeleton-line"></div>
</div>
@@ -853,7 +859,7 @@
<div class="skeleton-line"></div>
<div class="skeleton-line"></div>
</div>
<div class="col-2 ml-auto text-right">
<div class="col-2 ms-auto text-end">
<div class="skeleton-line"></div>
<div class="skeleton-line"></div>
</div>
@@ -868,7 +874,7 @@
<div class="skeleton-line"></div>
<div class="skeleton-line"></div>
</div>
<div class="col-2 ml-auto text-right">
<div class="col-2 ms-auto text-end">
<div class="skeleton-line"></div>
<div class="skeleton-line"></div>
</div>
@@ -943,7 +949,7 @@
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"skeleton-line"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"skeleton-line"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-2 ml-auto text-right"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-2 ms-auto text-end"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"skeleton-line"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"skeleton-line"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
@@ -958,7 +964,7 @@
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"skeleton-line"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"skeleton-line"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-2 ml-auto text-right"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-2 ms-auto text-end"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"skeleton-line"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"skeleton-line"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
@@ -973,7 +979,7 @@
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"skeleton-line"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"skeleton-line"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-2 ml-auto text-right"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-2 ms-auto text-end"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"skeleton-line"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"skeleton-line"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
@@ -988,7 +994,7 @@
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"skeleton-line"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"skeleton-line"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-2 ml-auto text-right"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-2 ms-auto text-end"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"skeleton-line"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"skeleton-line"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
@@ -1007,11 +1013,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="../license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -1022,7 +1028,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -1035,8 +1041,5 @@
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

170
demo/docs/spinners.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href="..">
<img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="../cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="../colors.html" >
Colors
</a>
<a class="dropdown-item" href="../dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="../maps.html" >
Maps
</a>
<a class="dropdown-item" href="../map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="../maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="../navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="../tables.html" >
Tables
</a>
<a class="dropdown-item" href="../calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="../carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="../markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="../auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="../layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="../layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="../layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="../layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="../layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="../layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -327,17 +333,17 @@
</div>
</div>
</div>
<div class="row g-5">
<div class="row">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<ul class="nav nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<ul class="nav nav-pills collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
@@ -366,13 +372,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<ul class="nav nav-pills collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
@@ -506,13 +512,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<ul class="nav nav-pills collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
@@ -521,13 +527,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<ul class="nav nav-pills collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
@@ -555,7 +561,7 @@
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
</span>
Changelog
<span class="badge bg-blue-lt ml-auto">1.0.0-alpha.14</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-alpha.18</span>
</a>
</li>
</ul>
@@ -564,12 +570,12 @@
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="mb-5">
<div class="d-flex mb-3">
<div>
<div class="d-flex mb-4">
<h1 class="mt-0">Spinners</h1>
<p class="ml-auto">
<p class="ms-auto">
<a href="https://getbootstrap.com/docs/4.4/components/spinners/" 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"><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>
<svg xmlns="http://www.w3.org/2000/svg" class="icon pe-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>
Bootstrap documentation
</a>
</p>
@@ -681,28 +687,28 @@
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"spinner-grow text-cyan"</span> <span class="na">role=</span><span class="s">"status"</span><span class="nt">&gt;&lt;/div&gt;</span></code></pre>
</figure>
</div>
<h2 id="buttons">Buttons</h2>
<h3 id="button-with-spinner">Button with spinner</h3>
<p>Use buttons with spinners to notify users that an action they have taken by clicking the button is in progress and prevent them from clicking multiple times or giving up.</p>
<div class="example no_toc_section">
<div class="example-content">
<a href="javascript:void()" class="btn btn-primary">
<span class="spinner-border spinner-border-sm mr-2" role="status"></span>
<a href="javascript:void(0)" class="btn btn-primary">
<span class="spinner-border spinner-border-sm me-2" role="status"></span>
Button
</a>
<a href="javascript:void()" class="btn btn-danger">
<span class="spinner-border spinner-border-sm mr-2" role="status"></span>
<a href="javascript:void(0)" class="btn btn-danger">
<span class="spinner-border spinner-border-sm me-2" role="status"></span>
Button
</a>
<a href="javascript:void()" class="btn btn-warning">
<span class="spinner-border spinner-border-sm mr-2" role="status"></span>
<a href="javascript:void(0)" class="btn btn-warning">
<span class="spinner-border spinner-border-sm me-2" role="status"></span>
Button
</a>
<a href="javascript:void()" class="btn btn-success">
<span class="spinner-border spinner-border-sm" role="status"></span>
<a href="javascript:void(0)" class="btn btn-success">
<span class="spinner-border spinner-border-sm me-2" role="status"></span>
Button
</a>
<a href="javascript:void()" class="btn btn-white">
<span class="spinner-border spinner-border-sm" role="status"></span>
<a href="javascript:void(0)" class="btn btn-white">
<span class="spinner-border spinner-border-sm me-2" role="status"></span>
Button
</a>
</div>
@@ -710,24 +716,57 @@
<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-primary"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"spinner-border spinner-border-sm mr-2"</span> <span class="na">role=</span><span class="s">"status"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"spinner-border spinner-border-sm me-2"</span> <span class="na">role=</span><span class="s">"status"</span><span class="nt">&gt;&lt;/span&gt;</span>
Button
<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-danger"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"spinner-border spinner-border-sm mr-2"</span> <span class="na">role=</span><span class="s">"status"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"spinner-border spinner-border-sm me-2"</span> <span class="na">role=</span><span class="s">"status"</span><span class="nt">&gt;&lt;/span&gt;</span>
Button
<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-warning"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"spinner-border spinner-border-sm mr-2"</span> <span class="na">role=</span><span class="s">"status"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"spinner-border spinner-border-sm me-2"</span> <span class="na">role=</span><span class="s">"status"</span><span class="nt">&gt;&lt;/span&gt;</span>
Button
<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-success"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"spinner-border spinner-border-sm"</span> <span class="na">role=</span><span class="s">"status"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"spinner-border spinner-border-sm me-2"</span> <span class="na">role=</span><span class="s">"status"</span><span class="nt">&gt;&lt;/span&gt;</span>
Button
<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-white"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"spinner-border spinner-border-sm"</span> <span class="na">role=</span><span class="s">"status"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"spinner-border spinner-border-sm me-2"</span> <span class="na">role=</span><span class="s">"status"</span><span class="nt">&gt;&lt;/span&gt;</span>
Button
<span class="nt">&lt;/a&gt;</span></code></pre>
</figure>
</div>
<h2 id="animated-dots">Animated dots</h2>
<div class="example no_toc_section">
<div class="example-content">
<div class="text-center">
<h1>Loading<span class="animated-dots"></span></h1>
</div>
</div>
</div>
<div class="example-code">
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;h1&gt;</span>Loading<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"animated-dots"</span><span class="nt">&gt;&lt;/span&gt;&lt;/h1&gt;</span></code></pre>
</figure>
</div>
<div class="example no_toc_section">
<div class="example-content">
<a href="javascript:void(0)" class="btn btn-primary">
Loading<span class="animated-dots"></span>
</a>
<a href="javascript:void(0)" class="btn btn-primary disabled">
Loading<span class="animated-dots"></span>
</a>
</div>
</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-primary"</span><span class="nt">&gt;</span>
Loading<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"animated-dots"</span><span class="nt">&gt;&lt;/span&gt;</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 btn-primary disabled"</span><span class="nt">&gt;</span>
Loading<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"animated-dots"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/a&gt;</span></code></pre>
</figure>
</div>
@@ -740,11 +779,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="../license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -755,7 +794,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -768,8 +807,5 @@
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

167
demo/docs/steps.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href="..">
<img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="../cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="../colors.html" >
Colors
</a>
<a class="dropdown-item" href="../dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="../maps.html" >
Maps
</a>
<a class="dropdown-item" href="../map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="../maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="../navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="../tables.html" >
Tables
</a>
<a class="dropdown-item" href="../calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="../carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="../markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="../auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="../layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="../layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="../layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="../layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="../layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="../layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -327,17 +333,17 @@
</div>
</div>
</div>
<div class="row g-5">
<div class="row">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<ul class="nav nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<ul class="nav nav-pills collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
@@ -366,13 +372,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<ul class="nav nav-pills collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
@@ -506,13 +512,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<ul class="nav nav-pills collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
@@ -521,13 +527,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<ul class="nav nav-pills collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
@@ -555,7 +561,7 @@
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
</span>
Changelog
<span class="badge bg-blue-lt ml-auto">1.0.0-alpha.14</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-alpha.18</span>
</a>
</li>
</ul>
@@ -564,8 +570,8 @@
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="mb-5">
<div class="d-flex mb-3">
<div>
<div class="d-flex mb-4">
<h1 class="mt-0">Steps</h1>
</div>
<p>Steps are used to guide users through complex processes, making them easier and more intuitive. Breaking a multi-step process into smaller parts and tracking progress along the way helps users complete it successfully.</p>
@@ -576,16 +582,16 @@
<div class="example no_toc_section">
<div class="example-content">
<div class="steps">
<a href="javascript:void()" class="step-item">
<a href="javascript:void(0)" class="step-item">
Step 1
</a>
<a href="javascript:void()" class="step-item">
<a href="javascript:void(0)" class="step-item">
Step 2
</a>
<a href="javascript:void()" class="step-item active">
<a href="javascript:void(0)" class="step-item active">
Step 3
</a>
<span href="javascript:void()" class="step-item">
<span href="javascript:void(0)" class="step-item">
Step 4
</span>
</div>
@@ -614,16 +620,16 @@
<div class="example no_toc_section">
<div class="example-content">
<div class="steps">
<a href="javascript:void()" class="step-item" data-toggle="tooltip" title="Step 1 description">
<a href="javascript:void(0)" class="step-item" data-bs-toggle="tooltip" title="Step 1 description">
Step 1
</a>
<a href="javascript:void()" class="step-item" data-toggle="tooltip" title="Step 2 description">
<a href="javascript:void(0)" class="step-item" data-bs-toggle="tooltip" title="Step 2 description">
Step 2
</a>
<a href="javascript:void()" class="step-item active" data-toggle="tooltip" title="Step 3 description">
<a href="javascript:void(0)" class="step-item active" data-bs-toggle="tooltip" title="Step 3 description">
Step 3
</a>
<span href="javascript:void()" class="step-item" data-toggle="tooltip" title="Step 4 description">
<span href="javascript:void(0)" class="step-item" data-bs-toggle="tooltip" title="Step 4 description">
Step 4
</span>
</div>
@@ -632,16 +638,16 @@
<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">"steps"</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">"step-item"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">title=</span><span class="s">"Step 1 description"</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">"step-item"</span> <span class="na">data-bs-toggle=</span><span class="s">"tooltip"</span> <span class="na">title=</span><span class="s">"Step 1 description"</span><span class="nt">&gt;</span>
Step 1
<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">"step-item"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">title=</span><span class="s">"Step 2 description"</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">"step-item"</span> <span class="na">data-bs-toggle=</span><span class="s">"tooltip"</span> <span class="na">title=</span><span class="s">"Step 2 description"</span><span class="nt">&gt;</span>
Step 2
<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">"step-item active"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">title=</span><span class="s">"Step 3 description"</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">"step-item active"</span> <span class="na">data-bs-toggle=</span><span class="s">"tooltip"</span> <span class="na">title=</span><span class="s">"Step 3 description"</span><span class="nt">&gt;</span>
Step 3
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;span</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"step-item"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">title=</span><span class="s">"Step 4 description"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"step-item"</span> <span class="na">data-bs-toggle=</span><span class="s">"tooltip"</span> <span class="na">title=</span><span class="s">"Step 4 description"</span><span class="nt">&gt;</span>
Step 4
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
@@ -652,30 +658,30 @@
<div class="example no_toc_section">
<div class="example-content">
<div class="steps steps-green">
<a href="javascript:void()" class="step-item">
<a href="javascript:void(0)" class="step-item">
Step 1
</a>
<a href="javascript:void()" class="step-item">
<a href="javascript:void(0)" class="step-item">
Step 2
</a>
<a href="javascript:void()" class="step-item active">
<a href="javascript:void(0)" class="step-item active">
Step 3
</a>
<span href="javascript:void()" class="step-item">
<span href="javascript:void(0)" class="step-item">
Step 4
</span>
</div>
<div class="steps steps-red">
<a href="javascript:void()" class="step-item">
<a href="javascript:void(0)" class="step-item">
Step 1
</a>
<a href="javascript:void()" class="step-item">
<a href="javascript:void(0)" class="step-item">
Step 2
</a>
<a href="javascript:void()" class="step-item active">
<a href="javascript:void(0)" class="step-item active">
Step 3
</a>
<span href="javascript:void()" class="step-item">
<span href="javascript:void(0)" class="step-item">
Step 4
</span>
</div>
@@ -718,20 +724,20 @@
<div class="example no_toc_section">
<div class="example-content">
<div class="steps">
<a href="javascript:void()" class="step-item" data-toggle="tooltip" title="Step 1 description"></a>
<a href="javascript:void()" class="step-item" data-toggle="tooltip" title="Step 2 description"></a>
<a href="javascript:void()" class="step-item active" data-toggle="tooltip" title="Step 3 description"></a>
<span href="javascript:void()" class="step-item" data-toggle="tooltip" title="Step 4 description"></span>
<a href="javascript:void(0)" class="step-item" data-bs-toggle="tooltip" title="Step 1 description"></a>
<a href="javascript:void(0)" class="step-item" data-bs-toggle="tooltip" title="Step 2 description"></a>
<a href="javascript:void(0)" class="step-item active" data-bs-toggle="tooltip" title="Step 3 description"></a>
<span href="javascript:void(0)" class="step-item" data-bs-toggle="tooltip" title="Step 4 description"></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">"steps"</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">"step-item"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">title=</span><span class="s">"Step 1 description"</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">"step-item"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">title=</span><span class="s">"Step 2 description"</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">"step-item active"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">title=</span><span class="s">"Step 3 description"</span><span class="nt">&gt;&lt;/a&gt;</span>
<span class="nt">&lt;span</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"step-item"</span> <span class="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">title=</span><span class="s">"Step 4 description"</span><span class="nt">&gt;&lt;/span&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">"step-item"</span> <span class="na">data-bs-toggle=</span><span class="s">"tooltip"</span> <span class="na">title=</span><span class="s">"Step 1 description"</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">"step-item"</span> <span class="na">data-bs-toggle=</span><span class="s">"tooltip"</span> <span class="na">title=</span><span class="s">"Step 2 description"</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">"step-item active"</span> <span class="na">data-bs-toggle=</span><span class="s">"tooltip"</span> <span class="na">title=</span><span class="s">"Step 3 description"</span><span class="nt">&gt;&lt;/a&gt;</span>
<span class="nt">&lt;span</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"step-item"</span> <span class="na">data-bs-toggle=</span><span class="s">"tooltip"</span> <span class="na">title=</span><span class="s">"Step 4 description"</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</figure>
</div>
@@ -740,11 +746,11 @@
<div class="example no_toc_section">
<div class="example-content">
<div class="steps steps-counter steps-lime">
<a href="javascript:void()" class="step-item"></a>
<a href="javascript:void()" class="step-item active"></a>
<span href="javascript:void()" class="step-item"></span>
<span href="javascript:void()" class="step-item"></span>
<span href="javascript:void()" class="step-item"></span>
<a href="javascript:void(0)" class="step-item"></a>
<a href="javascript:void(0)" class="step-item active"></a>
<span href="javascript:void(0)" class="step-item"></span>
<span href="javascript:void(0)" class="step-item"></span>
<span href="javascript:void(0)" class="step-item"></span>
</div>
</div>
</div>
@@ -768,11 +774,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="../license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -783,7 +789,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -796,8 +802,5 @@
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

139
demo/docs/switch-icon.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href="..">
<img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="../cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="../colors.html" >
Colors
</a>
<a class="dropdown-item" href="../dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="../maps.html" >
Maps
</a>
<a class="dropdown-item" href="../map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="../maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="../navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="../tables.html" >
Tables
</a>
<a class="dropdown-item" href="../calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="../carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="../markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="../auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="../layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="../layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="../layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="../layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="../layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="../layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -327,17 +333,17 @@
</div>
</div>
</div>
<div class="row g-5">
<div class="row">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<ul class="nav nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<ul class="nav nav-pills collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
@@ -366,13 +372,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<ul class="nav nav-pills collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
@@ -506,13 +512,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<ul class="nav nav-pills collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
@@ -521,13 +527,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<ul class="nav nav-pills collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
@@ -555,7 +561,7 @@
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
</span>
Changelog
<span class="badge bg-blue-lt ml-auto">1.0.0-alpha.14</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-alpha.18</span>
</a>
</li>
</ul>
@@ -564,8 +570,8 @@
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="mb-5">
<div class="d-flex mb-3">
<div>
<div class="d-flex mb-4">
<h1 class="mt-0">Switch icon</h1>
</div>
<p>The Switch Icon component is used to create a transition between two icons. You can use any icon, both line and filled version.</p>
@@ -575,7 +581,7 @@
<div class="example no_toc_section">
<div class="example-content">
<div class="d-flex space-x-2">
<button class="switch-icon" data-toggle="switch-icon">
<button class="switch-icon" data-bs-toggle="switch-icon">
<span class="switch-icon-a 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" fill="none" /><circle cx="12" cy="12" r="9" /></svg>
</span>
@@ -588,7 +594,7 @@
</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">class=</span><span class="s">"switch-icon"</span> <span class="na">data-toggle=</span><span class="s">"switch-icon"</span><span class="nt">&gt;</span>
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"switch-icon"</span> <span class="na">data-bs-toggle=</span><span class="s">"switch-icon"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"switch-icon-a text-muted"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
@@ -603,7 +609,7 @@
<div class="example no_toc_section">
<div class="example-content">
<div class="d-flex space-x-2">
<button class="switch-icon" data-toggle="switch-icon">
<button class="switch-icon" data-bs-toggle="switch-icon">
<span class="switch-icon-a 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" fill="none" /><circle cx="12" cy="12" r="9" /></svg>
</span>
@@ -611,7 +617,7 @@
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><circle cx="12" cy="12" r="9" /></svg>
</span>
</button>
<button class="switch-icon switch-icon-fade" data-toggle="switch-icon">
<button class="switch-icon switch-icon-fade" data-bs-toggle="switch-icon">
<span class="switch-icon-a 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" fill="none" /><path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
</span>
@@ -619,7 +625,7 @@
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
</span>
</button>
<button class="switch-icon switch-icon-scale" data-toggle="switch-icon">
<button class="switch-icon switch-icon-scale" data-bs-toggle="switch-icon">
<span class="switch-icon-a 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" 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>
@@ -627,7 +633,7 @@
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
</span>
</button>
<button class="switch-icon switch-icon-flip" data-toggle="switch-icon">
<button class="switch-icon switch-icon-flip" data-bs-toggle="switch-icon">
<span class="switch-icon-a 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" fill="none" /><path d="M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3" /></svg>
</span>
@@ -635,7 +641,7 @@
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3" /></svg>
</span>
</button>
<button class="switch-icon switch-icon-slide-up" data-toggle="switch-icon">
<button class="switch-icon switch-icon-slide-up" data-bs-toggle="switch-icon">
<span class="switch-icon-a 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" 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>
</span>
@@ -643,7 +649,7 @@
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
</span>
</button>
<button class="switch-icon switch-icon-slide-left" data-toggle="switch-icon">
<button class="switch-icon switch-icon-slide-left" data-bs-toggle="switch-icon">
<span class="switch-icon-a 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" fill="none" /><path d="M5 12l5 5l10 -10" /></svg>
</span>
@@ -651,7 +657,7 @@
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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>
</span>
</button>
<button class="switch-icon switch-icon-slide-down" data-toggle="switch-icon">
<button class="switch-icon switch-icon-slide-down" data-bs-toggle="switch-icon">
<span class="switch-icon-a 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" fill="none" /><line x1="12" y1="5" x2="12" y2="19" /><line x1="18" y1="13" x2="12" y2="19" /><line x1="6" y1="13" x2="12" y2="19" /></svg>
</span>
@@ -659,9 +665,9 @@
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="18" y1="11" x2="12" y2="5" /><line x1="6" y1="11" x2="12" y2="5" /></svg>
</span>
</button>
<button class="switch-icon switch-icon-slide-right" data-toggle="switch-icon">
<button class="switch-icon switch-icon-slide-right" data-bs-toggle="switch-icon">
<span class="switch-icon-a 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" fill="none" /><circle cx="7" cy="17" r="2" /><circle cx="17" cy="17" r="2" /><path d="M5 17h-2v-6l2-5h9l4 5h1a2 2 0 0 1 2 2v4h-2m-4 0h-6m-6 -6h15m-6 0v-5" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><circle cx="7" cy="17" r="2" /><circle cx="17" cy="17" r="2" /><path d="M5 17h-2v-6l2 -5h9l4 5h1a2 2 0 0 1 2 2v4h-2m-4 0h-6m-6 -6h15m-6 0v-5" /></svg>
</span>
<span class="switch-icon-b 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" fill="none" /><circle cx="18" cy="17" r="2" /><circle cx="6" cy="17" r="2" /><path d="M8 17h5a6 6 0 0 1 5 -5v-5a2 2 0 0 0 -2 -2h-1" /></svg>
@@ -672,7 +678,7 @@
</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">class=</span><span class="s">"switch-icon"</span> <span class="na">data-toggle=</span><span class="s">"switch-icon"</span><span class="nt">&gt;</span>
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"switch-icon"</span> <span class="na">data-bs-toggle=</span><span class="s">"switch-icon"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"switch-icon-a text-muted"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
@@ -680,7 +686,7 @@
<span class="c">&lt;!-- SVG icon code with class="icon-filled" --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"switch-icon switch-icon-fade"</span> <span class="na">data-toggle=</span><span class="s">"switch-icon"</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"switch-icon switch-icon-fade"</span> <span class="na">data-bs-toggle=</span><span class="s">"switch-icon"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"switch-icon-a text-muted"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
@@ -688,7 +694,7 @@
<span class="c">&lt;!-- SVG icon code with class="icon-filled" --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"switch-icon switch-icon-scale"</span> <span class="na">data-toggle=</span><span class="s">"switch-icon"</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"switch-icon switch-icon-scale"</span> <span class="na">data-bs-toggle=</span><span class="s">"switch-icon"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"switch-icon-a text-muted"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
@@ -696,7 +702,7 @@
<span class="c">&lt;!-- SVG icon code with class="icon-filled" --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"switch-icon switch-icon-flip"</span> <span class="na">data-toggle=</span><span class="s">"switch-icon"</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"switch-icon switch-icon-flip"</span> <span class="na">data-bs-toggle=</span><span class="s">"switch-icon"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"switch-icon-a text-muted"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
@@ -704,7 +710,7 @@
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"switch-icon switch-icon-slide-up"</span> <span class="na">data-toggle=</span><span class="s">"switch-icon"</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"switch-icon switch-icon-slide-up"</span> <span class="na">data-bs-toggle=</span><span class="s">"switch-icon"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"switch-icon-a text-muted"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
@@ -712,7 +718,7 @@
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"switch-icon switch-icon-slide-left"</span> <span class="na">data-toggle=</span><span class="s">"switch-icon"</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"switch-icon switch-icon-slide-left"</span> <span class="na">data-bs-toggle=</span><span class="s">"switch-icon"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"switch-icon-a text-muted"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
@@ -720,7 +726,7 @@
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"switch-icon switch-icon-slide-down"</span> <span class="na">data-toggle=</span><span class="s">"switch-icon"</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"switch-icon switch-icon-slide-down"</span> <span class="na">data-bs-toggle=</span><span class="s">"switch-icon"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"switch-icon-a text-muted"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
@@ -728,7 +734,7 @@
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"switch-icon switch-icon-slide-right"</span> <span class="na">data-toggle=</span><span class="s">"switch-icon"</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"switch-icon switch-icon-slide-right"</span> <span class="na">data-bs-toggle=</span><span class="s">"switch-icon"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"switch-icon-a text-muted"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
@@ -747,11 +753,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="../license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -762,7 +768,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -775,8 +781,5 @@
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

145
demo/docs/tables.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href="..">
<img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="../cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="../colors.html" >
Colors
</a>
<a class="dropdown-item" href="../dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="../maps.html" >
Maps
</a>
<a class="dropdown-item" href="../map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="../maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="../navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="../tables.html" >
Tables
</a>
<a class="dropdown-item" href="../calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="../carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="../markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="../auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="../layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="../layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="../layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="../layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="../layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="../layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -327,17 +333,17 @@
</div>
</div>
</div>
<div class="row g-5">
<div class="row">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<ul class="nav nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<ul class="nav nav-pills collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
@@ -366,13 +372,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<ul class="nav nav-pills collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
@@ -506,13 +512,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<ul class="nav nav-pills collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
@@ -521,13 +527,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<ul class="nav nav-pills collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
@@ -555,7 +561,7 @@
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
</span>
Changelog
<span class="badge bg-blue-lt ml-auto">1.0.0-alpha.14</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-alpha.18</span>
</a>
</li>
</ul>
@@ -564,12 +570,12 @@
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="mb-5">
<div class="d-flex mb-3">
<div>
<div class="d-flex mb-4">
<h1 class="mt-0">Tables</h1>
<p class="ml-auto">
<p class="ms-auto">
<a href="https://getbootstrap.com/docs/4.4/content/tables/" 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"><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>
<svg xmlns="http://www.w3.org/2000/svg" class="icon pe-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>
Bootstrap documentation
</a>
</p>
@@ -598,12 +604,12 @@
<td class="text-muted">
UI Designer, Training
</td>
<td class="text-muted"><a href="javascript:void()" class="text-reset">paweluna@howstuffworks.com</a></td>
<td class="text-muted"><a href="javascript:void(0)" class="text-reset">paweluna@howstuffworks.com</a></td>
<td class="text-muted">
User
</td>
<td>
<a href="javascript:void()">Edit</a>
<a href="javascript:void(0)">Edit</a>
</td>
</tr>
<tr>
@@ -611,12 +617,12 @@
<td class="text-muted">
Chemical Engineer, Support
</td>
<td class="text-muted"><a href="javascript:void()" class="text-reset">jlewzey1@seesaa.net</a></td>
<td class="text-muted"><a href="javascript:void(0)" class="text-reset">jlewzey1@seesaa.net</a></td>
<td class="text-muted">
Admin
</td>
<td>
<a href="javascript:void()">Edit</a>
<a href="javascript:void(0)">Edit</a>
</td>
</tr>
<tr>
@@ -624,12 +630,12 @@
<td class="text-muted">
Geologist IV, Support
</td>
<td class="text-muted"><a href="javascript:void()" class="text-reset">mhulme2@domainmarket.com</a></td>
<td class="text-muted"><a href="javascript:void(0)" class="text-reset">mhulme2@domainmarket.com</a></td>
<td class="text-muted">
User
</td>
<td>
<a href="javascript:void()">Edit</a>
<a href="javascript:void(0)">Edit</a>
</td>
</tr>
<tr>
@@ -637,12 +643,12 @@
<td class="text-muted">
Research Nurse, Sales
</td>
<td class="text-muted"><a href="javascript:void()" class="text-reset">dslane3@epa.gov</a></td>
<td class="text-muted"><a href="javascript:void(0)" class="text-reset">dslane3@epa.gov</a></td>
<td class="text-muted">
Owner
</td>
<td>
<a href="javascript:void()">Edit</a>
<a href="javascript:void(0)">Edit</a>
</td>
</tr>
<tr>
@@ -650,12 +656,12 @@
<td class="text-muted">
VP Product Management, Accounting
</td>
<td class="text-muted"><a href="javascript:void()" class="text-reset">elevet4@senate.gov</a></td>
<td class="text-muted"><a href="javascript:void(0)" class="text-reset">elevet4@senate.gov</a></td>
<td class="text-muted">
Admin
</td>
<td>
<a href="javascript:void()">Edit</a>
<a href="javascript:void(0)">Edit</a>
</td>
</tr>
</tbody>
@@ -870,7 +876,7 @@
<td class="text-muted">
UI Designer, Training
</td>
<td class="text-muted"><a href="javascript:void()" class="text-reset">paweluna@howstuffworks.com</a></td>
<td class="text-muted"><a href="javascript:void(0)" class="text-reset">paweluna@howstuffworks.com</a></td>
<td class="text-muted">
User
</td>
@@ -879,7 +885,7 @@
quaerat quo repellendus, voluptates.
</td>
<td>
<a href="javascript:void()">Edit</a>
<a href="javascript:void(0)">Edit</a>
</td>
</tr>
<tr>
@@ -887,7 +893,7 @@
<td class="text-muted">
Chemical Engineer, Support
</td>
<td class="text-muted"><a href="javascript:void()" class="text-reset">jlewzey1@seesaa.net</a></td>
<td class="text-muted"><a href="javascript:void(0)" class="text-reset">jlewzey1@seesaa.net</a></td>
<td class="text-muted">
Admin
</td>
@@ -896,7 +902,7 @@
quaerat quo repellendus, voluptates.
</td>
<td>
<a href="javascript:void()">Edit</a>
<a href="javascript:void(0)">Edit</a>
</td>
</tr>
<tr>
@@ -904,7 +910,7 @@
<td class="text-muted">
Geologist IV, Support
</td>
<td class="text-muted"><a href="javascript:void()" class="text-reset">mhulme2@domainmarket.com</a></td>
<td class="text-muted"><a href="javascript:void(0)" class="text-reset">mhulme2@domainmarket.com</a></td>
<td class="text-muted">
User
</td>
@@ -913,7 +919,7 @@
quaerat quo repellendus, voluptates.
</td>
<td>
<a href="javascript:void()">Edit</a>
<a href="javascript:void(0)">Edit</a>
</td>
</tr>
<tr>
@@ -921,7 +927,7 @@
<td class="text-muted">
Research Nurse, Sales
</td>
<td class="text-muted"><a href="javascript:void()" class="text-reset">dslane3@epa.gov</a></td>
<td class="text-muted"><a href="javascript:void(0)" class="text-reset">dslane3@epa.gov</a></td>
<td class="text-muted">
Owner
</td>
@@ -930,7 +936,7 @@
quaerat quo repellendus, voluptates.
</td>
<td>
<a href="javascript:void()">Edit</a>
<a href="javascript:void(0)">Edit</a>
</td>
</tr>
<tr>
@@ -938,7 +944,7 @@
<td class="text-muted">
VP Product Management, Accounting
</td>
<td class="text-muted"><a href="javascript:void()" class="text-reset">elevet4@senate.gov</a></td>
<td class="text-muted"><a href="javascript:void(0)" class="text-reset">elevet4@senate.gov</a></td>
<td class="text-muted">
Admin
</td>
@@ -947,7 +953,7 @@
quaerat quo repellendus, voluptates.
</td>
<td>
<a href="javascript:void()">Edit</a>
<a href="javascript:void(0)">Edit</a>
</td>
</tr>
</tbody>
@@ -1070,11 +1076,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="../license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -1085,7 +1091,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -1098,8 +1104,5 @@
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

213
demo/docs/tabs.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href="..">
<img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="../cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="../colors.html" >
Colors
</a>
<a class="dropdown-item" href="../dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="../maps.html" >
Maps
</a>
<a class="dropdown-item" href="../map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="../maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="../navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="../tables.html" >
Tables
</a>
<a class="dropdown-item" href="../calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="../carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="../markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="../auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="../layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="../layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="../layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="../layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="../layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="../layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -327,17 +333,17 @@
</div>
</div>
</div>
<div class="row g-5">
<div class="row">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<ul class="nav nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<ul class="nav nav-pills collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
@@ -366,13 +372,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<ul class="nav nav-pills collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
@@ -506,13 +512,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<ul class="nav nav-pills collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
@@ -521,13 +527,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<ul class="nav nav-pills collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
@@ -555,7 +561,7 @@
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
</span>
Changelog
<span class="badge bg-blue-lt ml-auto">1.0.0-alpha.14</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-alpha.18</span>
</a>
</li>
</ul>
@@ -564,12 +570,12 @@
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="mb-5">
<div class="d-flex mb-3">
<div>
<div class="d-flex mb-4">
<h1 class="mt-0">Tabs</h1>
<p class="ml-auto">
<p class="ms-auto">
<a href="https://getbootstrap.com/docs/4.4/components/navs/" 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"><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>
<svg xmlns="http://www.w3.org/2000/svg" class="icon pe-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>
Bootstrap documentation
</a>
</p>
@@ -582,12 +588,12 @@
<div class="example-content">
<div class="example-column example-column-1">
<div class="card">
<ul class="nav nav-tabs" data-toggle="tabs">
<ul class="nav nav-tabs" data-bs-toggle="tabs">
<li class="nav-item">
<a href="#tabs-home-ex1" class="nav-link active" data-toggle="tab">Home</a>
<a href="#tabs-home-ex1" class="nav-link active" data-bs-toggle="tab">Home</a>
</li>
<li class="nav-item">
<a href="#tabs-profile-ex1" class="nav-link" data-toggle="tab">Profile</a>
<a href="#tabs-profile-ex1" class="nav-link" data-bs-toggle="tab">Profile</a>
</li>
</ul>
<div class="card-body">
@@ -607,12 +613,12 @@
<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;ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs"</span> <span class="na">data-toggle=</span><span class="s">"tabs"</span><span class="nt">&gt;</span>
<span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs"</span> <span class="na">data-bs-toggle=</span><span class="s">"tabs"</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-home-ex1"</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-home-ex1"</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">data-bs-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-profile-ex1"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>Profile<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-profile-ex1"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">data-bs-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>Profile<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
@@ -634,17 +640,17 @@
<div class="example-content">
<div class="example-column example-column-1">
<div class="card">
<ul class="nav nav-tabs" data-toggle="tabs">
<ul class="nav nav-tabs" data-bs-toggle="tabs">
<li class="nav-item">
<a href="#tabs-home-ex2" class="nav-link active" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon mr-2" width="24" height="24" viewBox="0 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>
<a href="#tabs-home-ex2" class="nav-link active" data-bs-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon me-2" width="24" height="24" viewBox="0 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>
Home</a>
</li>
<li class="nav-item">
<a href="#tabs-profile-ex2" class="nav-link" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon mr-2" width="24" height="24" viewBox="0 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>
<a href="#tabs-profile-ex2" class="nav-link" data-bs-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon me-2" width="24" height="24" viewBox="0 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>
Profile</a>
</li>
<li class="nav-item ml-auto">
<a href="#tabs-settings-ex2" class="nav-link" title="Settings" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
<li class="nav-item ms-auto">
<a href="#tabs-settings-ex2" class="nav-link" title="Settings" data-bs-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -668,17 +674,17 @@
<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;ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs"</span> <span class="na">data-toggle=</span><span class="s">"tabs"</span><span class="nt">&gt;</span>
<span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs"</span> <span class="na">data-bs-toggle=</span><span class="s">"tabs"</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-home-ex2"</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code with class="mr-2" --&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-home-ex2"</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">data-bs-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code with class="me-2" --&gt;</span>
Home<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-profile-ex2"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code with class="mr-2" --&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-profile-ex2"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">data-bs-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code with class="me-2" --&gt;</span>
Profile<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item ml-auto"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-settings-ex2"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">title=</span><span class="s">"Settings"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item ms-auto"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-settings-ex2"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">title=</span><span class="s">"Settings"</span> <span class="na">data-bs-toggle=</span><span class="s">"tab"</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;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
@@ -704,17 +710,17 @@
<div class="example-content">
<div class="example-column example-column-1">
<div class="card">
<ul class="nav nav-tabs" data-toggle="tabs">
<ul class="nav nav-tabs" data-bs-toggle="tabs">
<li class="nav-item">
<a href="#tabs-home-ex3" class="nav-link active" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon " width="24" height="24" viewBox="0 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>
<a href="#tabs-home-ex3" class="nav-link active" data-bs-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon " width="24" height="24" viewBox="0 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>
</a>
</li>
<li class="nav-item">
<a href="#tabs-profile-ex3" class="nav-link" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon " width="24" height="24" viewBox="0 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>
<a href="#tabs-profile-ex3" class="nav-link" data-bs-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon " width="24" height="24" viewBox="0 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>
</a>
</li>
<li class="nav-item ml-auto">
<a href="#tabs-settings-ex3" class="nav-link" title="Settings" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
<li class="nav-item ms-auto">
<a href="#tabs-settings-ex3" class="nav-link" title="Settings" data-bs-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -738,17 +744,17 @@
<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;ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs"</span> <span class="na">data-toggle=</span><span class="s">"tabs"</span><span class="nt">&gt;</span>
<span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs"</span> <span class="na">data-bs-toggle=</span><span class="s">"tabs"</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-home-ex3"</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-home-ex3"</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">data-bs-toggle=</span><span class="s">"tab"</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;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-profile-ex3"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-profile-ex3"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">data-bs-toggle=</span><span class="s">"tab"</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;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item ml-auto"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-settings-ex3"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">title=</span><span class="s">"Settings"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item ms-auto"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-settings-ex3"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">title=</span><span class="s">"Settings"</span> <span class="na">data-bs-toggle=</span><span class="s">"tab"</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;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
@@ -774,20 +780,20 @@
<div class="example-content">
<div class="example-column example-column-1">
<div class="card">
<ul class="nav nav-tabs" data-toggle="tabs">
<ul class="nav nav-tabs" data-bs-toggle="tabs">
<li class="nav-item">
<a href="#tabs-home-ex4" class="nav-link active" data-toggle="tab">Home</a>
<a href="#tabs-home-ex4" class="nav-link active" data-bs-toggle="tab">Home</a>
</li>
<li class="nav-item">
<a href="#tabs-profile-ex4" class="nav-link" data-toggle="tab">Profile</a>
<a href="#tabs-profile-ex4" class="nav-link" data-bs-toggle="tab">Profile</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:void()" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void()">
<a class="dropdown-item" href="javascript:void(0)">
Action
</a>
<a class="dropdown-item" href="javascript:void()">
<a class="dropdown-item" href="javascript:void(0)">
Another action
</a>
</div>
@@ -810,15 +816,15 @@
<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;ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs"</span> <span class="na">data-toggle=</span><span class="s">"tabs"</span><span class="nt">&gt;</span>
<span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs"</span> <span class="na">data-bs-toggle=</span><span class="s">"tabs"</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-home-ex4"</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-home-ex4"</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">data-bs-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-profile-ex4"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>Profile<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-profile-ex4"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">data-bs-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span>Profile<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item dropdown"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">&gt;</span>Dropdown<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"nav-link dropdown-toggle"</span> <span class="na">data-bs-toggle=</span><span class="s">"dropdown"</span> <span class="na">role=</span><span class="s">"button"</span> <span class="na">aria-haspopup=</span><span class="s">"true"</span> <span class="na">aria-expanded=</span><span class="s">"false"</span><span class="nt">&gt;</span>Dropdown<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>
Action
@@ -848,17 +854,17 @@
<div class="example-content">
<div class="example-column example-column-1">
<div class="card">
<ul class="nav nav-tabs nav-fill" data-toggle="tabs">
<ul class="nav nav-tabs nav-fill" data-bs-toggle="tabs">
<li class="nav-item">
<a href="#tabs-home-ex5" class="nav-link active" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon " width="24" height="24" viewBox="0 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>
<a href="#tabs-home-ex5" class="nav-link active" data-bs-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon " width="24" height="24" viewBox="0 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>
</a>
</li>
<li class="nav-item">
<a href="#tabs-profile-ex5" class="nav-link" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon " width="24" height="24" viewBox="0 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>
<a href="#tabs-profile-ex5" class="nav-link" data-bs-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon " width="24" height="24" viewBox="0 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>
</a>
</li>
<li class="nav-item">
<a href="#tabs-activity-ex5" class="nav-link" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon " width="24" height="24" viewBox="0 0 24 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 12h4l3 8l4 -16l3 8h4" /></svg>
<a href="#tabs-activity-ex5" class="nav-link" data-bs-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon " width="24" height="24" viewBox="0 0 24 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 12h4l3 8l4 -16l3 8h4" /></svg>
</a>
</li>
</ul>
@@ -882,17 +888,17 @@
<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;ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs nav-fill"</span> <span class="na">data-toggle=</span><span class="s">"tabs"</span><span class="nt">&gt;</span>
<span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs nav-fill"</span> <span class="na">data-bs-toggle=</span><span class="s">"tabs"</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-home-ex5"</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-home-ex5"</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">data-bs-toggle=</span><span class="s">"tab"</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;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-profile-ex5"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-profile-ex5"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">data-bs-toggle=</span><span class="s">"tab"</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;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-activity-ex5"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-activity-ex5"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">data-bs-toggle=</span><span class="s">"tab"</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;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
@@ -918,17 +924,17 @@
<div class="example-content">
<div class="example-column example-column-1">
<div class="card">
<ul class="nav nav-tabs nav-tabs-alt" data-toggle="tabs">
<ul class="nav nav-tabs nav-tabs-alt" data-bs-toggle="tabs">
<li class="nav-item">
<a href="#tabs-home-ex6" class="nav-link active" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon mr-2" width="24" height="24" viewBox="0 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>
<a href="#tabs-home-ex6" class="nav-link active" data-bs-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon me-2" width="24" height="24" viewBox="0 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>
Home</a>
</li>
<li class="nav-item">
<a href="#tabs-profile-ex6" class="nav-link" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon mr-2" width="24" height="24" viewBox="0 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>
<a href="#tabs-profile-ex6" class="nav-link" data-bs-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon me-2" width="24" height="24" viewBox="0 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>
Profile</a>
</li>
<li class="nav-item ml-auto">
<a href="#tabs-settings-ex6" class="nav-link" title="Settings" data-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
<li class="nav-item ms-auto">
<a href="#tabs-settings-ex6" class="nav-link" title="Settings" data-bs-toggle="tab"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
@@ -952,17 +958,17 @@
<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;ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs nav-tabs-alt"</span> <span class="na">data-toggle=</span><span class="s">"tabs"</span><span class="nt">&gt;</span>
<span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"nav nav-tabs nav-tabs-alt"</span> <span class="na">data-bs-toggle=</span><span class="s">"tabs"</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-home-ex6"</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code with class="mr-2" --&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-home-ex6"</span> <span class="na">class=</span><span class="s">"nav-link active"</span> <span class="na">data-bs-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code with class="me-2" --&gt;</span>
Home<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-profile-ex6"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code with class="mr-2" --&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-profile-ex6"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">data-bs-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code with class="me-2" --&gt;</span>
Profile<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item ml-auto"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-settings-ex6"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">title=</span><span class="s">"Settings"</span> <span class="na">data-toggle=</span><span class="s">"tab"</span><span class="nt">&gt;</span><span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"nav-item ms-auto"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#tabs-settings-ex6"</span> <span class="na">class=</span><span class="s">"nav-link"</span> <span class="na">title=</span><span class="s">"Settings"</span> <span class="na">data-bs-toggle=</span><span class="s">"tab"</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;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
@@ -991,11 +997,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="../license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -1006,7 +1012,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -1019,8 +1025,5 @@
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

109
demo/docs/timelines.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href="..">
<img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="../cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="../colors.html" >
Colors
</a>
<a class="dropdown-item" href="../dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="../maps.html" >
Maps
</a>
<a class="dropdown-item" href="../map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="../maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="../navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="../tables.html" >
Tables
</a>
<a class="dropdown-item" href="../calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="../carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="../markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="../auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="../layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="../layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="../layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="../layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="../layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="../layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -327,17 +333,17 @@
</div>
</div>
</div>
<div class="row g-5">
<div class="row">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<ul class="nav nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<ul class="nav nav-pills collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
@@ -366,13 +372,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<ul class="nav nav-pills collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
@@ -506,13 +512,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<ul class="nav nav-pills collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
@@ -521,13 +527,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<ul class="nav nav-pills collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
@@ -555,7 +561,7 @@
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
</span>
Changelog
<span class="badge bg-blue-lt ml-auto">1.0.0-alpha.14</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-alpha.18</span>
</a>
</li>
</ul>
@@ -564,8 +570,8 @@
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="mb-5">
<div class="d-flex mb-3">
<div>
<div class="d-flex mb-4">
<h1 class="mt-0">Timelines</h1>
</div>
<p>A timeline is a perfect way to visualize processes and projects, as it's easy to read and attractive for users. You can use it to give an overview of events, present an agenda or point out important points in time.</p>
@@ -604,7 +610,7 @@
<div class="list-timeline-content">
<div class="list-timeline-time">1 day ago</div>
<p class="list-timeline-title">Database backup completed!</p>
<p class="text-muted">Download the <a href="javascript:void()">latest backup</a>.</p>
<p class="text-muted">Download the <a href="javascript:void(0)">latest backup</a>.</p>
</div>
</li>
<li>
@@ -662,7 +668,7 @@
<div class="list-timeline-content">
<div class="list-timeline-time">2 weeks ago</div>
<p class="list-timeline-title">System updated to v2.02</p>
<p class="text-muted">Check the complete changelog at the <a href="javascript:void()">activity
<p class="text-muted">Check the complete changelog at the <a href="javascript:void(0)">activity
page</a>.</p>
</div>
</li>
@@ -802,7 +808,7 @@
<div class="list-timeline-content">
<div class="list-timeline-time">1 day ago</div>
<p class="list-timeline-title">Database backup completed!</p>
<p class="text-muted">Download the <a href="javascript:void()">latest backup</a>.</p>
<p class="text-muted">Download the <a href="javascript:void(0)">latest backup</a>.</p>
</div>
</li>
<li>
@@ -860,7 +866,7 @@
<div class="list-timeline-content">
<div class="list-timeline-time">2 weeks ago</div>
<p class="list-timeline-title">System updated to v2.02</p>
<p class="text-muted">Check the complete changelog at the <a href="javascript:void()">activity
<p class="text-muted">Check the complete changelog at the <a href="javascript:void(0)">activity
page</a>.</p>
</div>
</li>
@@ -975,11 +981,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="../license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -990,7 +996,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -1003,8 +1009,5 @@
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

219
demo/docs/toasts.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href="..">
<img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="../cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="../colors.html" >
Colors
</a>
<a class="dropdown-item" href="../dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="../maps.html" >
Maps
</a>
<a class="dropdown-item" href="../map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="../maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="../navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="../tables.html" >
Tables
</a>
<a class="dropdown-item" href="../calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="../carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="../markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="../auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="../layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="../layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="../layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="../layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="../layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="../layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -327,17 +333,17 @@
</div>
</div>
</div>
<div class="row g-5">
<div class="row">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<ul class="nav nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<ul class="nav nav-pills collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
@@ -366,13 +372,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<ul class="nav nav-pills collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
@@ -506,13 +512,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<ul class="nav nav-pills collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
@@ -521,13 +527,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<ul class="nav nav-pills collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
@@ -555,7 +561,7 @@
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
</span>
Changelog
<span class="badge bg-blue-lt ml-auto">1.0.0-alpha.14</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-alpha.18</span>
</a>
</li>
</ul>
@@ -564,12 +570,12 @@
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="mb-5">
<div class="d-flex mb-3">
<div>
<div class="d-flex mb-4">
<h1 class="mt-0">Toasts</h1>
<p class="ml-auto">
<p class="ms-auto">
<a href="https://getbootstrap.com/docs/4.4/components/toasts/" 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"><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>
<svg xmlns="http://www.w3.org/2000/svg" class="icon pe-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>
Bootstrap documentation
</a>
</p>
@@ -580,12 +586,12 @@
<p>Use the default toast message to inform users of the outcome of their action and provide additional information. It contains an <code class="language-plaintext highlighter-rouge">x</code> close button to make it possible for users to close the toast if they wish.</p>
<div class="example no_toc_section">
<div class="example-content">
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false" data-toggle="toast">
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false" data-bs-toggle="toast">
<div class="toast-header">
<span class="avatar avatar-xs mr-2" style="background-image: url(../static/avatars/002m.jpg)"></span>
<strong class="mr-auto">Mallory Hulme</strong>
<span class="avatar avatar-xs me-2" style="background-image: url(../static/avatars/002m.jpg)"></span>
<strong class="me-auto">Mallory Hulme</strong>
<small>11 mins ago</small>
<button type="button" class="ml-2 btn-close" data-dismiss="toast" aria-label="Close"></button>
<button type="button" class="ms-2 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
@@ -595,12 +601,12 @@
</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">"toast show"</span> <span class="na">role=</span><span class="s">"alert"</span> <span class="na">aria-live=</span><span class="s">"assertive"</span> <span class="na">aria-atomic=</span><span class="s">"true"</span> <span class="na">data-autohide=</span><span class="s">"false"</span> <span class="na">data-toggle=</span><span class="s">"toast"</span><span class="nt">&gt;</span>
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast show"</span> <span class="na">role=</span><span class="s">"alert"</span> <span class="na">aria-live=</span><span class="s">"assertive"</span> <span class="na">aria-atomic=</span><span class="s">"true"</span> <span class="na">data-autohide=</span><span class="s">"false"</span> <span class="na">data-bs-toggle=</span><span class="s">"toast"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast-header"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-xs mr-2"</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;strong</span> <span class="na">class=</span><span class="s">"mr-auto"</span><span class="nt">&gt;</span>Mallory Hulme<span class="nt">&lt;/strong&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-xs me-2"</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;strong</span> <span class="na">class=</span><span class="s">"me-auto"</span><span class="nt">&gt;</span>Mallory Hulme<span class="nt">&lt;/strong&gt;</span>
<span class="nt">&lt;small&gt;</span>11 mins ago<span class="nt">&lt;/small&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">"ml-2 btn-close"</span> <span class="na">data-dismiss=</span><span class="s">"toast"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">&gt;&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">"ms-2 btn-close"</span> <span class="na">data-bs-dismiss=</span><span class="s">"toast"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">&gt;&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">"toast-body"</span><span class="nt">&gt;</span>
Hello, world! This is a toast message.
@@ -612,12 +618,12 @@
<p>Toasts blend over the elements they appear over. If a browser supports the <code class="language-plaintext highlighter-rouge">backdrop-filter</code> CSS property, the elements under a toast will be blurred.</p>
<div class="example no_toc_section">
<div class="example-content">
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false" data-toggle="toast">
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false" data-bs-toggle="toast">
<div class="toast-header">
<span class="avatar avatar-xs mr-2" style="background-image: url(../static/avatars/002m.jpg)"></span>
<strong class="mr-auto">Mallory Hulme</strong>
<span class="avatar avatar-xs me-2" style="background-image: url(../static/avatars/002m.jpg)"></span>
<strong class="me-auto">Mallory Hulme</strong>
<small>11 mins ago</small>
<button type="button" class="ml-2 btn-close" data-dismiss="toast" aria-label="Close"></button>
<button type="button" class="ms-2 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
@@ -627,12 +633,12 @@
</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">"toast show"</span> <span class="na">role=</span><span class="s">"alert"</span> <span class="na">aria-live=</span><span class="s">"assertive"</span> <span class="na">aria-atomic=</span><span class="s">"true"</span> <span class="na">data-autohide=</span><span class="s">"false"</span> <span class="na">data-toggle=</span><span class="s">"toast"</span><span class="nt">&gt;</span>
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast show"</span> <span class="na">role=</span><span class="s">"alert"</span> <span class="na">aria-live=</span><span class="s">"assertive"</span> <span class="na">aria-atomic=</span><span class="s">"true"</span> <span class="na">data-autohide=</span><span class="s">"false"</span> <span class="na">data-bs-toggle=</span><span class="s">"toast"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast-header"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-xs mr-2"</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;strong</span> <span class="na">class=</span><span class="s">"mr-auto"</span><span class="nt">&gt;</span>Mallory Hulme<span class="nt">&lt;/strong&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-xs me-2"</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;strong</span> <span class="na">class=</span><span class="s">"me-auto"</span><span class="nt">&gt;</span>Mallory Hulme<span class="nt">&lt;/strong&gt;</span>
<span class="nt">&lt;small&gt;</span>11 mins ago<span class="nt">&lt;/small&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">"ml-2 btn-close"</span> <span class="na">data-dismiss=</span><span class="s">"toast"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">&gt;&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">"ms-2 btn-close"</span> <span class="na">data-bs-dismiss=</span><span class="s">"toast"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">&gt;&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">"toast-body"</span><span class="nt">&gt;</span>
Hello, world! This is a toast message.
@@ -641,55 +647,59 @@
</figure>
</div>
<h2 id="stacking-toasts">Stacking toasts</h2>
<p>Stack multiple toasts together by putting them within one container.</p>
<p>Stack multiple toasts together by putting them within one <code class="language-plaintext highlighter-rouge">.toast-container</code>.</p>
<div class="example no_toc_section">
<div class="example-content">
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false" data-toggle="toast">
<div class="toast-header">
<span class="avatar avatar-xs mr-2" style="background-image: url(../static/avatars/003m.jpg)"></span>
<strong class="mr-auto">Dunn Slane</strong>
<small>11 mins ago</small>
<button type="button" class="ml-2 btn-close" data-dismiss="toast" aria-label="Close"></button>
<div class="toast-container">
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false" data-bs-toggle="toast">
<div class="toast-header">
<span class="avatar avatar-xs me-2" style="background-image: url(../static/avatars/003m.jpg)"></span>
<strong class="me-auto">Dunn Slane</strong>
<small>11 mins ago</small>
<button type="button" class="ms-2 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false" data-toggle="toast">
<div class="toast-header">
<span class="avatar avatar-xs mr-2" style="background-image: url(../static/avatars/002m.jpg)"></span>
<strong class="mr-auto">Mallory Hulme</strong>
<small>7 mins ago</small>
<button type="button" class="ml-2 btn-close" data-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
This is another toast message.
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false" data-bs-toggle="toast">
<div class="toast-header">
<span class="avatar avatar-xs me-2" style="background-image: url(../static/avatars/002m.jpg)"></span>
<strong class="me-auto">Mallory Hulme</strong>
<small>7 mins ago</small>
<button type="button" class="ms-2 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
This is another toast message.
</div>
</div>
</div>
</div>
</div>
<div class="example-code">
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast show"</span> <span class="na">role=</span><span class="s">"alert"</span> <span class="na">aria-live=</span><span class="s">"assertive"</span> <span class="na">aria-atomic=</span><span class="s">"true"</span> <span class="na">data-autohide=</span><span class="s">"false"</span> <span class="na">data-toggle=</span><span class="s">"toast"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast-header"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-xs mr-2"</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;strong</span> <span class="na">class=</span><span class="s">"mr-auto"</span><span class="nt">&gt;</span>Dunn Slane<span class="nt">&lt;/strong&gt;</span>
<span class="nt">&lt;small&gt;</span>11 mins ago<span class="nt">&lt;/small&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">"ml-2 btn-close"</span> <span class="na">data-dismiss=</span><span class="s">"toast"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">&gt;&lt;/button&gt;</span>
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast-container"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast show"</span> <span class="na">role=</span><span class="s">"alert"</span> <span class="na">aria-live=</span><span class="s">"assertive"</span> <span class="na">aria-atomic=</span><span class="s">"true"</span> <span class="na">data-autohide=</span><span class="s">"false"</span> <span class="na">data-bs-toggle=</span><span class="s">"toast"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast-header"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-xs me-2"</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;strong</span> <span class="na">class=</span><span class="s">"me-auto"</span><span class="nt">&gt;</span>Dunn Slane<span class="nt">&lt;/strong&gt;</span>
<span class="nt">&lt;small&gt;</span>11 mins ago<span class="nt">&lt;/small&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">"ms-2 btn-close"</span> <span class="na">data-bs-dismiss=</span><span class="s">"toast"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">&gt;&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">"toast-body"</span><span class="nt">&gt;</span>
Hello, world! This is a toast message.
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast-body"</span><span class="nt">&gt;</span>
Hello, world! This is a toast message.
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast show"</span> <span class="na">role=</span><span class="s">"alert"</span> <span class="na">aria-live=</span><span class="s">"assertive"</span> <span class="na">aria-atomic=</span><span class="s">"true"</span> <span class="na">data-autohide=</span><span class="s">"false"</span> <span class="na">data-toggle=</span><span class="s">"toast"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast-header"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-xs mr-2"</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;strong</span> <span class="na">class=</span><span class="s">"mr-auto"</span><span class="nt">&gt;</span>Mallory Hulme<span class="nt">&lt;/strong&gt;</span>
<span class="nt">&lt;small&gt;</span>7 mins ago<span class="nt">&lt;/small&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">"ml-2 btn-close"</span> <span class="na">data-dismiss=</span><span class="s">"toast"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">&gt;&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">"toast-body"</span><span class="nt">&gt;</span>
This is another toast message.
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast show"</span> <span class="na">role=</span><span class="s">"alert"</span> <span class="na">aria-live=</span><span class="s">"assertive"</span> <span class="na">aria-atomic=</span><span class="s">"true"</span> <span class="na">data-autohide=</span><span class="s">"false"</span> <span class="na">data-bs-toggle=</span><span class="s">"toast"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"toast-header"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar avatar-xs me-2"</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;strong</span> <span class="na">class=</span><span class="s">"me-auto"</span><span class="nt">&gt;</span>Mallory Hulme<span class="nt">&lt;/strong&gt;</span>
<span class="nt">&lt;small&gt;</span>7 mins ago<span class="nt">&lt;/small&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">"ms-2 btn-close"</span> <span class="na">data-bs-dismiss=</span><span class="s">"toast"</span> <span class="na">aria-label=</span><span class="s">"Close"</span><span class="nt">&gt;&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">"toast-body"</span><span class="nt">&gt;</span>
This is another toast message.
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</figure>
@@ -703,11 +713,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="../license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -718,7 +728,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -731,8 +741,5 @@
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

125
demo/docs/tooltips.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href="..">
<img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="../cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="../colors.html" >
Colors
</a>
<a class="dropdown-item" href="../dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="../maps.html" >
Maps
</a>
<a class="dropdown-item" href="../map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="../maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="../navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="../tables.html" >
Tables
</a>
<a class="dropdown-item" href="../calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="../carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="../markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="../auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="../layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="../layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="../layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="../layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="../layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="../layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -327,17 +333,17 @@
</div>
</div>
</div>
<div class="row g-5">
<div class="row">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<ul class="nav nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-base">
<ul class="nav nav-pills collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
@@ -366,13 +372,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="true">
<a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-components">
<ul class="nav nav-pills collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
@@ -506,13 +512,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<ul class="nav nav-pills collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
@@ -521,13 +527,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<ul class="nav nav-pills collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
@@ -555,7 +561,7 @@
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
</span>
Changelog
<span class="badge bg-blue-lt ml-auto">1.0.0-alpha.14</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-alpha.18</span>
</a>
</li>
</ul>
@@ -564,12 +570,12 @@
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="mb-5">
<div class="d-flex mb-3">
<div>
<div class="d-flex mb-4">
<h1 class="mt-0">Tooltips</h1>
<p class="ml-auto">
<p class="ms-auto">
<a href="https://getbootstrap.com/docs/4.4/components/tooltips/" 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"><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>
<svg xmlns="http://www.w3.org/2000/svg" class="icon pe-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>
Bootstrap documentation
</a>
</p>
@@ -580,32 +586,32 @@
<p>Use the default markup to create tooltips that will help users understand particular elements of your interface. You can decide where the text label is to be displayed - at the top, bottom or on either side of the element.</p>
<div class="example no_toc_section">
<div class="example-content">
<button type="button" class="btn" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
<button type="button" class="btn" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
<button type="button" class="btn" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
<button type="button" class="btn" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
<button type="button" class="btn" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
Tooltip on left
</button>
</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="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-placement=</span><span class="s">"top"</span> <span class="na">title=</span><span class="s">"Tooltip on top"</span><span class="nt">&gt;</span>
<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="na">data-bs-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-bs-placement=</span><span class="s">"top"</span> <span class="na">title=</span><span class="s">"Tooltip on top"</span><span class="nt">&gt;</span>
Tooltip on top
<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="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-placement=</span><span class="s">"right"</span> <span class="na">title=</span><span class="s">"Tooltip on right"</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"</span> <span class="na">data-bs-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-bs-placement=</span><span class="s">"right"</span> <span class="na">title=</span><span class="s">"Tooltip on right"</span><span class="nt">&gt;</span>
Tooltip on right
<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="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-placement=</span><span class="s">"bottom"</span> <span class="na">title=</span><span class="s">"Tooltip on bottom"</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"</span> <span class="na">data-bs-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-bs-placement=</span><span class="s">"bottom"</span> <span class="na">title=</span><span class="s">"Tooltip on bottom"</span><span class="nt">&gt;</span>
Tooltip on bottom
<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="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-placement=</span><span class="s">"left"</span> <span class="na">title=</span><span class="s">"Tooltip on left"</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"</span> <span class="na">data-bs-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-bs-placement=</span><span class="s">"left"</span> <span class="na">title=</span><span class="s">"Tooltip on left"</span><span class="nt">&gt;</span>
Tooltip on left
<span class="nt">&lt;/button&gt;</span></code></pre>
</figure>
@@ -614,14 +620,14 @@
<p>If the default tooltip is not enough, you can add the option to use HTML code in the text to highlight particular bits of information and make the content more attractive.</p>
<div class="example no_toc_section">
<div class="example-content">
<button type="button" class="btn" data-toggle="tooltip" data-html="true" title="&lt;em&gt;Tooltip&lt;/em&gt; &lt;u&gt;with&lt;/u&gt; &lt;b&gt;HTML&lt;/b&gt;">
<button type="button" class="btn" data-bs-toggle="tooltip" data-html="true" title="&lt;em&gt;Tooltip&lt;/em&gt; &lt;u&gt;with&lt;/u&gt; &lt;b&gt;HTML&lt;/b&gt;">
Tooltip with HTML
</button>
</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="na">data-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-html=</span><span class="s">"true"</span> <span class="na">title=</span><span class="s">"&lt;em&gt;Tooltip&lt;/em&gt; &lt;u&gt;with&lt;/u&gt; &lt;b&gt;HTML&lt;/b&gt;"</span><span class="nt">&gt;</span>
<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="na">data-bs-toggle=</span><span class="s">"tooltip"</span> <span class="na">data-html=</span><span class="s">"true"</span> <span class="na">title=</span><span class="s">"&lt;em&gt;Tooltip&lt;/em&gt; &lt;u&gt;with&lt;/u&gt; &lt;b&gt;HTML&lt;/b&gt;"</span><span class="nt">&gt;</span>
Tooltip with HTML
<span class="nt">&lt;/button&gt;</span></code></pre>
</figure>
@@ -635,11 +641,11 @@ Tooltip with HTML
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="../license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -650,7 +656,7 @@ Tooltip with HTML
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -663,8 +669,5 @@ Tooltip with HTML
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

143
demo/docs/typography.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href="..">
<img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="../cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="../colors.html" >
Colors
</a>
<a class="dropdown-item" href="../dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="../maps.html" >
Maps
</a>
<a class="dropdown-item" href="../map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="../maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="../navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="../tables.html" >
Tables
</a>
<a class="dropdown-item" href="../calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="../carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="../markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="../auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="../layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="../layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="../layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="../layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="../layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="../layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -327,17 +333,17 @@
</div>
</div>
</div>
<div class="row g-5">
<div class="row">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<ul class="nav nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="true">
<a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-base">
<ul class="nav nav-pills collapse show" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
@@ -366,13 +372,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-components">
<ul class="nav nav-pills collapse" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
@@ -506,13 +512,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<ul class="nav nav-pills collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
@@ -521,13 +527,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<ul class="nav nav-pills collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
@@ -555,7 +561,7 @@
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
</span>
Changelog
<span class="badge bg-blue-lt ml-auto">1.0.0-alpha.14</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-alpha.18</span>
</a>
</li>
</ul>
@@ -564,12 +570,12 @@
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="mb-5">
<div class="d-flex mb-3">
<div>
<div class="d-flex mb-4">
<h1 class="mt-0">Typography</h1>
<p class="ml-auto">
<p class="ms-auto">
<a href="https://getbootstrap.com/docs/4.4/content/typography/" 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"><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>
<svg xmlns="http://www.w3.org/2000/svg" class="icon pe-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>
Bootstrap documentation
</a>
</p>
@@ -616,23 +622,23 @@
<p>Use a variety of semantic text elements, depending of how you want to display particular fragments of content.</p>
<div class="example no_toc_section">
<div class="example-content">
<abbr title="Internationalization">I18N</abbr> <code class="ml-2">abbr</code><br />
<strong>Bold</strong> <code class="ml-2">strong</code> <code>b</code><br />
<cite>Citation</cite> <code class="ml-2">cite</code><br />
<code>Hello World!</code> <code class="ml-2">code</code><br />
<del>Deleted</del> <code class="ml-2">del</code><br />
<em>Emphasis</em> <code class="ml-2">em</code><br />
<i>Italic</i> <code class="ml-2">i</code><br />
<ins>Inserted</ins> <code class="ml-2">ins</code><br />
<kbd>Ctrl + S</kbd> <code class="ml-2">kbd</code><br />
<mark>Highlighted</mark> <code class="ml-2">mark</code><br />
<s>Strikethrough</s> <code class="ml-2">s</code><br />
<samp>Sample</samp> <code class="ml-2">samp</code><br />
Text <sub>Subscripted</sub> <code class="ml-2">sub</code><br />
Text <sup>Superscripted</sup> <code class="ml-2">sup</code><br />
<time>20:00</time> <code class="ml-2">time</code><br />
<u>Underline</u> <code class="ml-2">u</code><br />
<var>x</var> = <var>y</var> + 2 <code class="ml-2">var</code><br />
<abbr title="Internationalization">I18N</abbr> <code class="ms-2">abbr</code><br />
<strong>Bold</strong> <code class="ms-2">strong</code> <code>b</code><br />
<cite>Citation</cite> <code class="ms-2">cite</code><br />
<code>Hello World!</code> <code class="ms-2">code</code><br />
<del>Deleted</del> <code class="ms-2">del</code><br />
<em>Emphasis</em> <code class="ms-2">em</code><br />
<i>Italic</i> <code class="ms-2">i</code><br />
<ins>Inserted</ins> <code class="ms-2">ins</code><br />
<kbd>Ctrl + S</kbd> <code class="ms-2">kbd</code><br />
<mark>Highlighted</mark> <code class="ms-2">mark</code><br />
<s>Strikethrough</s> <code class="ms-2">s</code><br />
<samp>Sample</samp> <code class="ms-2">samp</code><br />
Text <sub>Subscripted</sub> <code class="ms-2">sub</code><br />
Text <sup>Superscripted</sup> <code class="ms-2">sup</code><br />
<time>20:00</time> <code class="ms-2">time</code><br />
<u>Underline</u> <code class="ms-2">u</code><br />
<var>x</var> = <var>y</var> + 2 <code class="ms-2">var</code><br />
</div>
</div>
<div class="example-code">
@@ -687,7 +693,7 @@ Text <span class="nt">&lt;sup&gt;</span>Superscripted<span class="nt">&lt;/sup&g
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</p>
<div class="hr-text hr-text-right">
<div class="hr-text hr-text-end">
<span>Rule text</span>
</div>
<p>
@@ -712,7 +718,7 @@ Text <span class="nt">&lt;sup&gt;</span>Superscripted<span class="nt">&lt;/sup&g
<span class="nt">&lt;p&gt;</span>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"hr-text hr-text-right"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"hr-text hr-text-end"</span><span class="nt">&gt;</span>
<span class="nt">&lt;span&gt;</span>Rule text<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;p&gt;</span>
@@ -886,11 +892,11 @@ Text <span class="nt">&lt;sup&gt;</span>Superscripted<span class="nt">&lt;/sup&g
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="../license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -901,7 +907,7 @@ Text <span class="nt">&lt;sup&gt;</span>Superscripted<span class="nt">&lt;/sup&g
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -914,8 +920,5 @@ Text <span class="nt">&lt;sup&gt;</span>Superscripted<span class="nt">&lt;/sup&g
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

101
demo/docs/usage.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="../dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href="..">
<img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="../cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="../colors.html" >
Colors
</a>
<a class="dropdown-item" href="../dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="../maps.html" >
Maps
</a>
<a class="dropdown-item" href="../map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="../maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="../navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="../charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="../tables.html" >
Tables
</a>
<a class="dropdown-item" href="../calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="../carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="../markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="../auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="../layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="../layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="../layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="../layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="../layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="../layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -327,17 +333,17 @@
</div>
</div>
</div>
<div class="row g-5">
<div class="row">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-pills nav-vertical">
<ul class="nav nav-vertical">
<li class="nav-item">
<a href="#menu-base" class="nav-link" data-toggle="collapse" aria-expanded="true">
<a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="true">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 9l3 3l-3 3" /><line x1="13" y1="15" x2="16" y2="15" /><rect x="4" y="4" width="16" height="16" rx="4" /></svg>
</span>
Getting started
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse show" id="menu-base">
<ul class="nav nav-pills collapse show" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
@@ -366,13 +372,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7h3a1 1 0 0 0 1 -1v-1a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0 -1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-1a2 2 0 0 0 -4 0v1a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1h1a2 2 0 0 0 0 -4h-1a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1" /></svg>
</span>
Components
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-components">
<ul class="nav nav-pills collapse" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
@@ -506,13 +512,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.762 4.383 -2.989 5.642c-1.226 1.26 -2.011 2.598 -2.011 4.358a6 6 0 1 0 12 0c0 -1.532 -.77 -2.94 -1.714 -4c-1.786 3 -3.077 3 -4.286 2z" /></svg>
</span>
Utilities
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-utils">
<ul class="nav nav-pills collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
@@ -521,13 +527,13 @@
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-toggle="collapse" aria-expanded="false">
<a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="6" rx="1" /><rect x="4" y="14" width="6" height="6" rx="1" /><rect x="14" y="14" width="6" height="6" rx="1" /><line x1="14" y1="7" x2="20" y2="7" /><line x1="17" y1="4" x2="17" y2="10" /></svg>
</span>
Plugins
<span class="nav-link-toggle"></span>
</a>
<ul class="nav collapse" id="menu-plugins">
<ul class="nav nav-pills collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
@@ -555,7 +561,7 @@
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
</span>
Changelog
<span class="badge bg-blue-lt ml-auto">1.0.0-alpha.14</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-alpha.18</span>
</a>
</li>
</ul>
@@ -564,8 +570,8 @@
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div class="mb-5">
<div class="d-flex mb-3">
<div>
<div class="d-flex mb-4">
<h1 class="mt-0">Usage</h1>
</div>
<p>Tabler distributions are available on npm. Add tabler as a dependency in your npm project or use a specific version directly in your HTML files via CDN includes.</p>
@@ -625,11 +631,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="../license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -640,7 +646,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -653,8 +659,5 @@
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

119
demo/dropdowns.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href=".">
<img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</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" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="./cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="./colors.html" >
Colors
</a>
<a class="dropdown-item active" href="./dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="./maps.html" >
Maps
</a>
<a class="dropdown-item" href="./map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="./maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="./navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="./tables.html" >
Tables
</a>
<a class="dropdown-item" href="./calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="./carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="./markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="./auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="./layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="./layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="./layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="./layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="./layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="./layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -337,25 +343,25 @@
Item 2</a>
<div class="dropdown-item">
<a href="#" class="text-reset">My profile</a>
<label class="form-check m-0 ml-auto">
<label class="form-check m-0 ms-auto">
<input type="checkbox" class="form-check-input">
Public
</label>
</div>
<label class="dropdown-item"><input class="form-check-input m-0 mr-2" type="radio"> Radio input</label>
<label class="dropdown-item"><input class="form-check-input m-0 mr-2" type="checkbox"> Checkbox input</label>
<label class="dropdown-item form-switch"><input class="form-check-input m-0 mr-2" type="checkbox"> Checkbox input</label>
<label class="dropdown-item"><input class="form-check-input m-0 me-2" type="radio"> Radio input</label>
<label class="dropdown-item"><input class="form-check-input m-0 me-2" type="checkbox"> Checkbox input</label>
<label class="dropdown-item form-switch"><input class="form-check-input m-0 me-2" type="checkbox"> Checkbox input</label>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Dropdown item 1</a>
<a href="#" class="dropdown-item">Dropdown item 2</a>
<a href="#" class="dropdown-item disabled">Dropdown disabled</a>
<a href="#" class="dropdown-item active">Dropdown active</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item"><span class="avatar avatar-xs rounded mr-2" style="background-image: url(./static/avatars/000m.jpg)"></span>
<a href="#" class="dropdown-item"><span class="avatar avatar-xs rounded me-2" style="background-image: url(./static/avatars/000m.jpg)"></span>
Paweł Kuna</a>
<a href="#" class="dropdown-item"><span class="avatar avatar-xs rounded mr-2">JL</span>
<a href="#" class="dropdown-item"><span class="avatar avatar-xs rounded me-2">JL</span>
Jeffie Lewzey</a>
<a href="#" class="dropdown-item"><span class="avatar avatar-xs rounded mr-2" style="background-image: url(./static/avatars/002m.jpg)"></span>
<a href="#" class="dropdown-item"><span class="avatar avatar-xs rounded me-2" style="background-image: url(./static/avatars/002m.jpg)"></span>
Mallory Hulme</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item"><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="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2" /><path d="M7 12h14l-3 -3m0 6l3 -3" /></svg>
@@ -487,11 +493,11 @@
<div class="dropdown-menu dropdown-menu-demo">
<a class="dropdown-item" href="#">
Action
<span class="badge bg-primary ml-auto">12</span>
<span class="badge bg-primary ms-auto">12</span>
</a>
<a class="dropdown-item" href="#">
Another action
<span class="badge bg-green ml-auto"></span>
<span class="badge bg-green ms-auto"></span>
</a>
</div>
</div>
@@ -514,7 +520,7 @@
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-demo dropdown-menu-arrow bg-dark text-white">
<div class="dropdown-menu dropdown-menu-end dropdown-menu-demo dropdown-menu-arrow bg-dark text-white">
<a class="dropdown-item" href="#">
Action
</a>
@@ -522,7 +528,7 @@
Another action
</a>
</div>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-demo dropdown-menu-arrow bg-dark text-white">
<div class="dropdown-menu dropdown-menu-end dropdown-menu-demo dropdown-menu-arrow bg-dark text-white">
<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" 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>
Action
@@ -533,25 +539,25 @@
</a>
</div>
<div class="dropdown-menu dropdown-menu-demo">
<label class="dropdown-item"><input class="form-check-input m-0 mr-2" type="checkbox"> Option 1</label>
<label class="dropdown-item"><input class="form-check-input m-0 mr-2" type="checkbox"> Option 2</label>
<label class="dropdown-item"><input class="form-check-input m-0 mr-2" type="checkbox"> Option 3</label>
<label class="dropdown-item"><input class="form-check-input m-0 me-2" type="checkbox"> Option 1</label>
<label class="dropdown-item"><input class="form-check-input m-0 me-2" type="checkbox"> Option 2</label>
<label class="dropdown-item"><input class="form-check-input m-0 me-2" type="checkbox"> Option 3</label>
</div>
<div class="dropdown-menu dropdown-menu-demo">
<label class="dropdown-item"><input class="form-check-input m-0 mr-2" type="radio"> Option 1</label>
<label class="dropdown-item"><input class="form-check-input m-0 mr-2" type="radio"> Option 2</label>
<label class="dropdown-item"><input class="form-check-input m-0 mr-2" type="radio"> Option 3</label>
<label class="dropdown-item"><input class="form-check-input m-0 me-2" type="radio"> Option 1</label>
<label class="dropdown-item"><input class="form-check-input m-0 me-2" type="radio"> Option 2</label>
<label class="dropdown-item"><input class="form-check-input m-0 me-2" type="radio"> Option 3</label>
</div>
<div class="dropdown-menu dropdown-menu-demo">
<a href="#" class="dropdown-item"><span class="avatar avatar-xs rounded mr-2" style="background-image: url(./static/avatars/000m.jpg)"></span>
<a href="#" class="dropdown-item"><span class="avatar avatar-xs rounded me-2" style="background-image: url(./static/avatars/000m.jpg)"></span>
Paweł Kuna</a>
<a href="#" class="dropdown-item"><span class="avatar avatar-xs rounded mr-2">JL</span>
<a href="#" class="dropdown-item"><span class="avatar avatar-xs rounded me-2">JL</span>
Jeffie Lewzey</a>
<a href="#" class="dropdown-item"><span class="avatar avatar-xs rounded mr-2" style="background-image: url(./static/avatars/002m.jpg)"></span>
<a href="#" class="dropdown-item"><span class="avatar avatar-xs rounded me-2" style="background-image: url(./static/avatars/002m.jpg)"></span>
Mallory Hulme</a>
<a href="#" class="dropdown-item"><span class="avatar avatar-xs rounded mr-2" style="background-image: url(./static/avatars/003m.jpg)"></span>
<a href="#" class="dropdown-item"><span class="avatar avatar-xs rounded me-2" style="background-image: url(./static/avatars/003m.jpg)"></span>
Dunn Slane</a>
<a href="#" class="dropdown-item"><span class="avatar avatar-xs rounded mr-2" style="background-image: url(./static/avatars/000f.jpg)"></span>
<a href="#" class="dropdown-item"><span class="avatar avatar-xs rounded me-2" style="background-image: url(./static/avatars/000f.jpg)"></span>
Emmy Levet</a>
</div>
</div>
@@ -560,11 +566,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="./license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -575,7 +581,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -588,8 +594,5 @@
<script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

75
demo/empty.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href=".">
<img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</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" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="./cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="./colors.html" >
Colors
</a>
<a class="dropdown-item" href="./dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="./maps.html" >
Maps
</a>
<a class="dropdown-item" href="./map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="./maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="./navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="./tables.html" >
Tables
</a>
<a class="dropdown-item" href="./calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="./carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="./markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="./auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="./layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="./layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="./layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="./layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="./layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="./layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -332,11 +338,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="./license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -347,7 +353,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -360,8 +366,5 @@
<script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

10
demo/404.html → demo/error-404.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,11 +19,6 @@
<link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-vendors.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">
@@ -47,8 +42,5 @@
<script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

10
demo/500.html → demo/error-500.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,11 +19,6 @@
<link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-vendors.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">
@@ -47,8 +42,5 @@
<script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

10
demo/maintenance.html → demo/error-maintenance.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,11 +19,6 @@
<link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-vendors.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">
@@ -48,8 +43,5 @@
<script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

10
demo/forgot-password.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,11 +19,6 @@
<link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-vendors.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 flex-column justify-content-center py-4">
@@ -56,8 +51,5 @@
<script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

193
demo/form-elements.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -22,29 +22,26 @@
<link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href=".">
<img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -53,14 +50,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -87,11 +84,11 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -112,6 +109,9 @@
<a class="dropdown-item" href="./cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="./colors.html" >
Colors
</a>
<a class="dropdown-item" href="./dropdowns.html" >
Dropdowns
</a>
@@ -124,17 +124,20 @@
<a class="dropdown-item" href="./maps.html" >
Maps
</a>
<a class="dropdown-item" href="./map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="./maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="./navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./charts-heatmap.html" >
Charts heatmap
</a>
@@ -150,9 +153,6 @@
<a class="dropdown-item" href="./tables.html" >
Tables
</a>
<a class="dropdown-item" href="./calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="./carousel.html" >
Carousel
</a>
@@ -165,8 +165,8 @@
<a class="dropdown-item" href="./markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -177,8 +177,8 @@
<a href="./auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -201,7 +201,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -242,7 +242,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -258,6 +258,9 @@
<a class="dropdown-item" href="./layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="./layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="./layout-vertical-right.html" >
Right vertical
</a>
@@ -275,6 +278,9 @@
<a class="dropdown-item" href="./layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="./layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="./layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -310,7 +316,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -394,7 +400,7 @@
<button class="btn" type="button">Go!</button>
</div>
<div class="input-group">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
@@ -413,8 +419,8 @@
<div class="input-group">
<input type="text" class="form-control">
<button type="button" class="btn">Action</button>
<button data-toggle="dropdown" type="button" class="btn dropdown-toggle dropdown-toggle-split"></button>
<div class="dropdown-menu dropdown-menu-right">
<button data-bs-toggle="dropdown" type="button" class="btn dropdown-toggle dropdown-toggle-split"></button>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">
Action
</a>
@@ -474,7 +480,7 @@
<input type="text" class="form-control" placeholder="Search for…">
</div>
<div class="col-auto align-self-center">
<span class="form-help" data-toggle="popover" data-placement="top"
<span class="form-help" data-bs-toggle="popover" data-bs-placement="top"
data-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p>
<p class='mb-0'><a href='#'>USP ZIP codes lookup tools</a></p>
"
@@ -543,13 +549,13 @@
<span class="input-group-text">
https://tabler.io/users/
</span>
<input type="text" class="form-control pl-0" value="yourfancyusername" autocomplete="off">
<input type="text" class="form-control ps-0" value="yourfancyusername" autocomplete="off">
</div>
</div>
<div class="mb-3">
<label class="form-label">Input with appended text</label>
<div class="input-group input-group-flat">
<input type="text" class="form-control text-right pr-0" value="yourfancydomain" autocomplete="off">
<input type="text" class="form-control text-end pe-0" value="yourfancydomain" autocomplete="off">
<span class="input-group-text">
.tabler.io
</span>
@@ -569,11 +575,11 @@
<div class="input-group input-group-flat">
<input type="text" class="form-control" autocomplete="off">
<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"><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>
<a href="#" class="link-secondary" title="Clear search" data-bs-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>
</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"><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>
<a href="#" class="link-secondary ms-2" title="Search settings" data-bs-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>
</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"><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>
<a href="#" class="link-secondary ms-2 disabled" title="Add notification" data-bs-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>
</a>
</span>
</div>
@@ -890,7 +896,7 @@
</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"><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>
<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 3c.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>
</span>
</label>
<label class="form-selectgroup-item">
@@ -914,22 +920,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"><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 class="form-selectgroup-label"><svg xmlns="http://www.w3.org/2000/svg" class="icon me-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>
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"><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>
<span class="form-selectgroup-label"><svg xmlns="http://www.w3.org/2000/svg" class="icon me-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>
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"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="9" /></svg>
<span class="form-selectgroup-label"><svg xmlns="http://www.w3.org/2000/svg" class="icon me-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>
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"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="16" height="16" rx="2" /></svg>
<span class="form-selectgroup-label"><svg xmlns="http://www.w3.org/2000/svg" class="icon me-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>
Square</span>
</label>
</div>
@@ -961,11 +967,11 @@
<label class="form-selectgroup-item flex-fill">
<input type="radio" name="form-payment" value="visa" class="form-selectgroup-input">
<div class="form-selectgroup-label d-flex align-items-center p-3">
<div class="mr-3">
<div class="me-3">
<span class="form-selectgroup-check"></span>
</div>
<div>
<span class="payment payment-provider-visa payment-xs mr-2"></span>
<span class="payment payment-provider-visa payment-xs me-2"></span>
ending in <strong>7998</strong>
</div>
</div>
@@ -973,11 +979,11 @@
<label class="form-selectgroup-item flex-fill">
<input type="radio" name="form-payment" value="mastercard" class="form-selectgroup-input" checked>
<div class="form-selectgroup-label d-flex align-items-center p-3">
<div class="mr-3">
<div class="me-3">
<span class="form-selectgroup-check"></span>
</div>
<div>
<span class="payment payment-provider-mastercard payment-xs mr-2"></span>
<span class="payment payment-provider-mastercard payment-xs me-2"></span>
ending in <strong>2807</strong>
</div>
</div>
@@ -985,11 +991,11 @@
<label class="form-selectgroup-item flex-fill">
<input type="radio" name="form-payment" value="paypal" class="form-selectgroup-input">
<div class="form-selectgroup-label d-flex align-items-center p-3">
<div class="mr-3">
<div class="me-3">
<span class="form-selectgroup-check"></span>
</div>
<div>
<span class="payment payment-provider-paypal payment-xs mr-2"></span>
<span class="payment payment-provider-paypal payment-xs me-2"></span>
</div>
</div>
</label>
@@ -1001,11 +1007,11 @@
<label class="form-selectgroup-item flex-fill">
<input type="checkbox" name="form-project-manager[]" value="1" class="form-selectgroup-input" >
<div class="form-selectgroup-label d-flex align-items-center p-3">
<div class="mr-3">
<div class="me-3">
<span class="form-selectgroup-check"></span>
</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>
<span class="avatar me-3" style="background-image: url(./static/avatars/000m.jpg)"></span>
<div>
<div class="font-weight-medium">Paweł Kuna</div>
<div class="text-muted">UI Designer</div>
@@ -1016,11 +1022,11 @@
<label class="form-selectgroup-item flex-fill">
<input type="checkbox" name="form-project-manager[]" value="2" class="form-selectgroup-input" checked>
<div class="form-selectgroup-label d-flex align-items-center p-3">
<div class="mr-3">
<div class="me-3">
<span class="form-selectgroup-check"></span>
</div>
<div class="form-selectgroup-label-content d-flex align-items-center">
<span class="avatar mr-3">JL</span>
<span class="avatar me-3">JL</span>
<div>
<div class="font-weight-medium">Jeffie Lewzey</div>
<div class="text-muted">Chemical Engineer</div>
@@ -1031,11 +1037,11 @@
<label class="form-selectgroup-item flex-fill">
<input type="checkbox" name="form-project-manager[]" value="3" class="form-selectgroup-input" >
<div class="form-selectgroup-label d-flex align-items-center p-3">
<div class="mr-3">
<div class="me-3">
<span class="form-selectgroup-check"></span>
</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>
<span class="avatar me-3" style="background-image: url(./static/avatars/002m.jpg)"></span>
<div>
<div class="font-weight-medium">Mallory Hulme</div>
<div class="text-muted">Geologist IV</div>
@@ -1046,11 +1052,11 @@
<label class="form-selectgroup-item flex-fill">
<input type="checkbox" name="form-project-manager[]" value="4" class="form-selectgroup-input" >
<div class="form-selectgroup-label d-flex align-items-center p-3">
<div class="mr-3">
<div class="me-3">
<span class="form-selectgroup-check"></span>
</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>
<span class="avatar me-3" style="background-image: url(./static/avatars/003m.jpg)"></span>
<div>
<div class="font-weight-medium">Dunn Slane</div>
<div class="text-muted">Research Nurse</div>
@@ -1061,11 +1067,11 @@
<label class="form-selectgroup-item flex-fill">
<input type="checkbox" name="form-project-manager[]" value="5" class="form-selectgroup-input" >
<div class="form-selectgroup-label d-flex align-items-center p-3">
<div class="mr-3">
<div class="me-3">
<span class="form-selectgroup-check"></span>
</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>
<span class="avatar me-3" style="background-image: url(./static/avatars/000f.jpg)"></span>
<div>
<div class="font-weight-medium">Emmy Levet</div>
<div class="text-muted">VP Product Management</div>
@@ -1091,10 +1097,10 @@
<button type="button" class="btn">Option 2</button>
<button type="button" class="btn btn-primary">Option 3</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<button id="btnGroupDrop1" type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Other
</button>
<div class="dropdown-menu dropdown-menu-right">
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">
Option 4
</a>
@@ -1491,7 +1497,7 @@
</div>
<div class="mb-3">
<label class="form-label">Autosize textarea</label>
<textarea class="form-control" data-toggle="autosize" placeholder="Type something…"></textarea>
<textarea class="form-control" data-bs-toggle="autosize" placeholder="Type something…"></textarea>
</div>
</div>
<div class="col-md-6 col-xl-12">
@@ -1595,26 +1601,26 @@
<div class="mb-3">
<label class="form-label">Select with avatars</label>
<select name="people" id="select-people" class="form-select">
<option value="1" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2\" style=\"background-image: url(./static/avatars/000m.jpg)\"></span>"}'>Paweł Kuna</option>
<option value="2" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2\">JL</span>"}'>Jeffie Lewzey</option>
<option value="3" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2\" style=\"background-image: url(./static/avatars/002m.jpg)\"></span>"}'>Mallory Hulme</option>
<option value="4" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2\" style=\"background-image: url(./static/avatars/003m.jpg)\"></span>"}' selected>Dunn Slane</option>
<option value="5" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2\" style=\"background-image: url(./static/avatars/000f.jpg)\"></span>"}'>Emmy Levet</option>
<option value="6" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2\" style=\"background-image: url(./static/avatars/001f.jpg)\"></span>"}'>Maryjo Lebarree</option>
<option value="7" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2\">EP</span>"}'>Egan Poetz</option>
<option value="8" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2\" style=\"background-image: url(./static/avatars/002f.jpg)\"></span>"}'>Kellie Skingley</option>
<option value="9" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2\" style=\"background-image: url(./static/avatars/003f.jpg)\"></span>"}'>Christabel Charlwood</option>
<option value="10" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2\">HS</span>"}'>Haskel Shelper</option>
<option value="11" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2\" style=\"background-image: url(./static/avatars/006m.jpg)\"></span>"}'>Lorry Mion</option>
<option value="12" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2\" style=\"background-image: url(./static/avatars/004f.jpg)\"></span>"}'>Leesa Beaty</option>
<option value="13" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2\" style=\"background-image: url(./static/avatars/007m.jpg)\"></span>"}'>Perren Keemar</option>
<option value="14" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2\">SA</span>"}'>Sunny Airey</option>
<option value="15" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2\" style=\"background-image: url(./static/avatars/009m.jpg)\"></span>"}'>Geoffry Flaunders</option>
<option value="16" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2\" style=\"background-image: url(./static/avatars/010m.jpg)\"></span>"}'>Thatcher Keel</option>
<option value="17" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2\" style=\"background-image: url(./static/avatars/005f.jpg)\"></span>"}'>Dyann Escala</option>
<option value="18" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2\" style=\"background-image: url(./static/avatars/006f.jpg)\"></span>"}'>Avivah Mugleston</option>
<option value="19" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2\">AA</span>"}'>Arlie Armstead</option>
<option value="20" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded mr-2\" style=\"background-image: url(./static/avatars/008f.jpg)\"></span>"}'>Tessie Curzon</option>
<option value="1" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded me-2\" style=\"background-image: url(./static/avatars/000m.jpg)\"></span>"}'>Paweł Kuna</option>
<option value="2" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded me-2\">JL</span>"}'>Jeffie Lewzey</option>
<option value="3" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded me-2\" style=\"background-image: url(./static/avatars/002m.jpg)\"></span>"}'>Mallory Hulme</option>
<option value="4" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded me-2\" style=\"background-image: url(./static/avatars/003m.jpg)\"></span>"}' selected>Dunn Slane</option>
<option value="5" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded me-2\" style=\"background-image: url(./static/avatars/000f.jpg)\"></span>"}'>Emmy Levet</option>
<option value="6" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded me-2\" style=\"background-image: url(./static/avatars/001f.jpg)\"></span>"}'>Maryjo Lebarree</option>
<option value="7" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded me-2\">EP</span>"}'>Egan Poetz</option>
<option value="8" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded me-2\" style=\"background-image: url(./static/avatars/002f.jpg)\"></span>"}'>Kellie Skingley</option>
<option value="9" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded me-2\" style=\"background-image: url(./static/avatars/003f.jpg)\"></span>"}'>Christabel Charlwood</option>
<option value="10" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded me-2\">HS</span>"}'>Haskel Shelper</option>
<option value="11" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded me-2\" style=\"background-image: url(./static/avatars/006m.jpg)\"></span>"}'>Lorry Mion</option>
<option value="12" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded me-2\" style=\"background-image: url(./static/avatars/004f.jpg)\"></span>"}'>Leesa Beaty</option>
<option value="13" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded me-2\" style=\"background-image: url(./static/avatars/007m.jpg)\"></span>"}'>Perren Keemar</option>
<option value="14" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded me-2\">SA</span>"}'>Sunny Airey</option>
<option value="15" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded me-2\" style=\"background-image: url(./static/avatars/009m.jpg)\"></span>"}'>Geoffry Flaunders</option>
<option value="16" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded me-2\" style=\"background-image: url(./static/avatars/010m.jpg)\"></span>"}'>Thatcher Keel</option>
<option value="17" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded me-2\" style=\"background-image: url(./static/avatars/005f.jpg)\"></span>"}'>Dyann Escala</option>
<option value="18" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded me-2\" style=\"background-image: url(./static/avatars/006f.jpg)\"></span>"}'>Avivah Mugleston</option>
<option value="19" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded me-2\">AA</span>"}'>Arlie Armstead</option>
<option value="20" data-data='{"avatar": "<span class=\"avatar avatar-xs rounded me-2\" style=\"background-image: url(./static/avatars/008f.jpg)\"></span>"}'>Tessie Curzon</option>
</select>
</div>
<div class="mb-3">
@@ -1640,10 +1646,10 @@
</div>
</div>
</div>
<div class="card-footer text-right">
<div class="card-footer text-end">
<div class="d-flex">
<a href="#" class="btn btn-link">Cancel</a>
<button type="submit" class="btn btn-primary ml-auto">Send data</button>
<button type="submit" class="btn btn-primary ms-auto">Send data</button>
</div>
</div>
</form>
@@ -1765,11 +1771,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="./license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -1780,7 +1786,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -1896,10 +1902,10 @@
$('#select-countries').selectize({
render: {
option: function (data, escape) {
return '<div class="option"><span class="flag flag-country-' + data.flag + ' mr-2"></span>' + escape(data.text) + '</div>';
return '<div class="option"><span class="flag flag-country-' + data.flag + ' me-2"></span>' + escape(data.text) + '</div>';
},
item: function (data, escape) {
return '<div class="d-flex align-items-center"><span class="flag flag-country-' + data.flag + ' mr-2"></span>' + escape(data.text) + '</div>';
return '<div class="d-flex align-items-center"><span class="flag flag-country-' + data.flag + ' me-2"></span>' + escape(data.text) + '</div>';
}
}
});
@@ -1910,10 +1916,10 @@
$('#select-states').selectize({
render: {
option: function (data, escape) {
return '<div class="option"><span class="flag flag-country-' + data.flag + ' mr-2"></span>' + escape(data.text) + '</div>';
return '<div class="option"><span class="flag flag-country-' + data.flag + ' me-2"></span>' + escape(data.text) + '</div>';
},
item: function (data, escape) {
return '<div class="d-flex align-items-center"><span class="flag flag-country-' + data.flag + ' mr-2"></span>' + escape(data.text) + '</div>';
return '<div class="d-flex align-items-center"><span class="flag flag-country-' + data.flag + ' me-2"></span>' + escape(data.text) + '</div>';
}
}
});
@@ -1932,8 +1938,5 @@
}
});
</script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

155
demo/gallery.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href=".">
<img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="./cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="./colors.html" >
Colors
</a>
<a class="dropdown-item" href="./dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="./maps.html" >
Maps
</a>
<a class="dropdown-item" href="./map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="./maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="./navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="./tables.html" >
Tables
</a>
<a class="dropdown-item" href="./calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="./carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="./markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="./auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</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" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="./layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="./layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="./layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="./layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="./layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="./layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -327,9 +333,9 @@
<div class="text-muted mt-1">1-12 of 241 photos</div>
</div>
<!-- Page title actions -->
<div class="col-auto ml-auto d-print-none">
<div class="col-auto ms-auto d-print-none">
<div class="d-flex">
<div class="mr-3">
<div class="me-3">
<div class="input-icon">
<input type="text" class="form-control" placeholder="Search…">
<span class="input-icon-addon">
@@ -351,17 +357,17 @@
<a href="#" class="d-block"><img src="./static/photos/1b73704b282a8ec6.jpg" class="card-img-top"></a>
<div class="card-body">
<div class="d-flex align-items-center">
<span class="avatar mr-3 rounded" style="background-image: url(./static/avatars/000m.jpg)"></span>
<span class="avatar me-3 rounded" style="background-image: url(./static/avatars/000m.jpg)"></span>
<div>
<div>Paweł Kuna</div>
<div class="text-muted">3 days ago</div>
</div>
<div class="ml-auto">
<div class="ms-auto">
<a href="#" class="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" fill="none"/><circle cx="12" cy="12" r="2" /><path d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7" /></svg>
467
</a>
<a href="#" class="ml-3 text-muted">
<a href="#" class="ms-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" 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>
67
</a>
@@ -375,17 +381,17 @@
<a href="#" class="d-block"><img src="./static/photos/3d2998219313cd37.jpg" class="card-img-top"></a>
<div class="card-body">
<div class="d-flex align-items-center">
<span class="avatar mr-3 rounded">JL</span>
<span class="avatar me-3 rounded">JL</span>
<div>
<div>Jeffie Lewzey</div>
<div class="text-muted">5 days ago</div>
</div>
<div class="ml-auto">
<div class="ms-auto">
<a href="#" class="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" fill="none"/><circle cx="12" cy="12" r="2" /><path d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7" /></svg>
335
</a>
<a href="#" class="ml-3 text-muted">
<a href="#" class="ms-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" 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>
80
</a>
@@ -399,17 +405,17 @@
<a href="#" class="d-block"><img src="./static/photos/6ab3200b14549f8a.jpg" class="card-img-top"></a>
<div class="card-body">
<div class="d-flex align-items-center">
<span class="avatar mr-3 rounded" style="background-image: url(./static/avatars/002m.jpg)"></span>
<span class="avatar me-3 rounded" style="background-image: url(./static/avatars/002m.jpg)"></span>
<div>
<div>Mallory Hulme</div>
<div class="text-muted">yesterday</div>
</div>
<div class="ml-auto">
<div class="ms-auto">
<a href="#" class="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" fill="none"/><circle cx="12" cy="12" r="2" /><path d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7" /></svg>
369
</a>
<a href="#" class="ml-3 text-muted">
<a href="#" class="ms-3 text-muted">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled text-red" width="24" height="24" viewBox="0 0 24 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>
32
</a>
@@ -423,17 +429,17 @@
<a href="#" class="d-block"><img src="./static/photos/6d35d9a2bd6c63c2.jpg" class="card-img-top"></a>
<div class="card-body">
<div class="d-flex align-items-center">
<span class="avatar mr-3 rounded" style="background-image: url(./static/avatars/003m.jpg)"></span>
<span class="avatar me-3 rounded" style="background-image: url(./static/avatars/003m.jpg)"></span>
<div>
<div>Dunn Slane</div>
<div class="text-muted">1 week and 3 days ago</div>
</div>
<div class="ml-auto">
<div class="ms-auto">
<a href="#" class="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" fill="none"/><circle cx="12" cy="12" r="2" /><path d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7" /></svg>
479
</a>
<a href="#" class="ml-3 text-muted">
<a href="#" class="ms-3 text-muted">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled text-red" width="24" height="24" viewBox="0 0 24 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>
71
</a>
@@ -447,17 +453,17 @@
<a href="#" class="d-block"><img src="./static/photos/8a26974ee6444acd.jpg" class="card-img-top"></a>
<div class="card-body">
<div class="d-flex align-items-center">
<span class="avatar mr-3 rounded" style="background-image: url(./static/avatars/000f.jpg)"></span>
<span class="avatar me-3 rounded" style="background-image: url(./static/avatars/000f.jpg)"></span>
<div>
<div>Emmy Levet</div>
<div class="text-muted">5 days ago</div>
</div>
<div class="ml-auto">
<div class="ms-auto">
<a href="#" class="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" fill="none"/><circle cx="12" cy="12" r="2" /><path d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7" /></svg>
481
</a>
<a href="#" class="ml-3 text-muted">
<a href="#" class="ms-3 text-muted">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled text-red" width="24" height="24" viewBox="0 0 24 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>
57
</a>
@@ -471,17 +477,17 @@
<a href="#" class="d-block"><img src="./static/photos/8c13ad59f739558c.jpg" class="card-img-top"></a>
<div class="card-body">
<div class="d-flex align-items-center">
<span class="avatar mr-3 rounded" style="background-image: url(./static/avatars/001f.jpg)"></span>
<span class="avatar me-3 rounded" style="background-image: url(./static/avatars/001f.jpg)"></span>
<div>
<div>Maryjo Lebarree</div>
<div class="text-muted">3 days ago</div>
</div>
<div class="ml-auto">
<div class="ms-auto">
<a href="#" class="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" fill="none"/><circle cx="12" cy="12" r="2" /><path d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7" /></svg>
405
</a>
<a href="#" class="ml-3 text-muted">
<a href="#" class="ms-3 text-muted">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled text-red" width="24" height="24" viewBox="0 0 24 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>
23
</a>
@@ -495,17 +501,17 @@
<a href="#" class="d-block"><img src="./static/photos/8fdeb4785d2b82ef.jpg" class="card-img-top"></a>
<div class="card-body">
<div class="d-flex align-items-center">
<span class="avatar mr-3 rounded">EP</span>
<span class="avatar me-3 rounded">EP</span>
<div>
<div>Egan Poetz</div>
<div class="text-muted">6 days ago</div>
</div>
<div class="ml-auto">
<div class="ms-auto">
<a href="#" class="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" fill="none"/><circle cx="12" cy="12" r="2" /><path d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7" /></svg>
332
</a>
<a href="#" class="ml-3 text-muted">
<a href="#" class="ms-3 text-muted">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled text-red" width="24" height="24" viewBox="0 0 24 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>
51
</a>
@@ -519,17 +525,17 @@
<a href="#" class="d-block"><img src="./static/photos/9f36332564ca271d.jpg" class="card-img-top"></a>
<div class="card-body">
<div class="d-flex align-items-center">
<span class="avatar mr-3 rounded" style="background-image: url(./static/avatars/002f.jpg)"></span>
<span class="avatar me-3 rounded" style="background-image: url(./static/avatars/002f.jpg)"></span>
<div>
<div>Kellie Skingley</div>
<div class="text-muted">1 week and 2 days ago</div>
</div>
<div class="ml-auto">
<div class="ms-auto">
<a href="#" class="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" fill="none"/><circle cx="12" cy="12" r="2" /><path d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7" /></svg>
369
</a>
<a href="#" class="ml-3 text-muted">
<a href="#" class="ms-3 text-muted">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled text-red" width="24" height="24" viewBox="0 0 24 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>
70
</a>
@@ -543,17 +549,17 @@
<a href="#" class="d-block"><img src="./static/photos/35b88fc04a518c1b.jpg" class="card-img-top"></a>
<div class="card-body">
<div class="d-flex align-items-center">
<span class="avatar mr-3 rounded" style="background-image: url(./static/avatars/003f.jpg)"></span>
<span class="avatar me-3 rounded" style="background-image: url(./static/avatars/003f.jpg)"></span>
<div>
<div>Christabel Charlwood</div>
<div class="text-muted">today</div>
</div>
<div class="ml-auto">
<div class="ms-auto">
<a href="#" class="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" fill="none"/><circle cx="12" cy="12" r="2" /><path d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7" /></svg>
555
</a>
<a href="#" class="ml-3 text-muted">
<a href="#" class="ms-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" 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>
73
</a>
@@ -567,17 +573,17 @@
<a href="#" class="d-block"><img src="./static/photos/36e273986ed577b8.jpg" class="card-img-top"></a>
<div class="card-body">
<div class="d-flex align-items-center">
<span class="avatar mr-3 rounded">HS</span>
<span class="avatar me-3 rounded">HS</span>
<div>
<div>Haskel Shelper</div>
<div class="text-muted">2 days ago</div>
</div>
<div class="ml-auto">
<div class="ms-auto">
<a href="#" class="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" fill="none"/><circle cx="12" cy="12" r="2" /><path d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7" /></svg>
383
</a>
<a href="#" class="ml-3 text-muted">
<a href="#" class="ms-3 text-muted">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled text-red" width="24" height="24" viewBox="0 0 24 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>
37
</a>
@@ -591,17 +597,17 @@
<a href="#" class="d-block"><img src="./static/photos/75b555b99d5b38c4.jpg" class="card-img-top"></a>
<div class="card-body">
<div class="d-flex align-items-center">
<span class="avatar mr-3 rounded" style="background-image: url(./static/avatars/006m.jpg)"></span>
<span class="avatar me-3 rounded" style="background-image: url(./static/avatars/006m.jpg)"></span>
<div>
<div>Lorry Mion</div>
<div class="text-muted">5 days ago</div>
</div>
<div class="ml-auto">
<div class="ms-auto">
<a href="#" class="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" fill="none"/><circle cx="12" cy="12" r="2" /><path d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7" /></svg>
424
</a>
<a href="#" class="ml-3 text-muted">
<a href="#" class="ms-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" 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>
45
</a>
@@ -615,17 +621,17 @@
<a href="#" class="d-block"><img src="./static/photos/546fd146c83f428c.jpg" class="card-img-top"></a>
<div class="card-body">
<div class="d-flex align-items-center">
<span class="avatar mr-3 rounded" style="background-image: url(./static/avatars/004f.jpg)"></span>
<span class="avatar me-3 rounded" style="background-image: url(./static/avatars/004f.jpg)"></span>
<div>
<div>Leesa Beaty</div>
<div class="text-muted">6 days ago</div>
</div>
<div class="ml-auto">
<div class="ms-auto">
<a href="#" class="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" fill="none"/><circle cx="12" cy="12" r="2" /><path d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7" /></svg>
496
</a>
<a href="#" class="ml-3 text-muted">
<a href="#" class="ms-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" 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>
64
</a>
@@ -636,9 +642,9 @@
</div>
</div>
<div class="d-flex">
<ul class="pagination ml-auto">
<ul class="pagination ms-auto">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="15 6 9 12 15 18" /></svg>
prev
</a>
@@ -659,11 +665,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="./license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -674,7 +680,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -687,8 +693,5 @@
<script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

2303
demo/icons.html
View File

File diff suppressed because one or more lines are too long

633
demo/index.html
View File

File diff suppressed because it is too large Load Diff

111
demo/invoice.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href=".">
<img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="./cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="./colors.html" >
Colors
</a>
<a class="dropdown-item" href="./dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="./maps.html" >
Maps
</a>
<a class="dropdown-item" href="./map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="./maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="./navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="./tables.html" >
Tables
</a>
<a class="dropdown-item" href="./calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="./carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="./markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="./auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</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" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="./layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="./layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="./layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="./layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="./layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="./layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -326,7 +332,7 @@
</h2>
</div>
<!-- Page title actions -->
<div class="col-auto ml-auto d-print-none">
<div class="col-auto ms-auto d-print-none">
<button type="button" class="btn btn-primary" onclick="javascript:window.print();">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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 17h2a2 2 0 0 0 2 -2v-4a2 2 0 0 0 -2 -2h-14a2 2 0 0 0 -2 2v4a2 2 0 0 0 2 2h2" /><path d="M17 9v-4a2 2 0 0 0 -2 -2h-6a2 2 0 0 0 -2 2v4" /><rect x="7" y="13" width="10" height="8" rx="2" /></svg>
Print Invoice
@@ -346,7 +352,7 @@
ltd@example.com
</address>
</div>
<div class="col-6 text-right">
<div class="col-6 text-end">
<p class="h3">Client</p>
<address>
Street Address<br>
@@ -365,8 +371,8 @@
<th class="text-center" style="width: 1%"></th>
<th>Product</th>
<th class="text-center" style="width: 1%">Qnt</th>
<th class="text-right" style="width: 1%">Unit</th>
<th class="text-right" style="width: 1%">Amount</th>
<th class="text-end" style="width: 1%">Unit</th>
<th class="text-end" style="width: 1%">Amount</th>
</tr>
</thead>
<tr>
@@ -378,8 +384,8 @@
<td class="text-center">
1
</td>
<td class="text-right">$1.800,00</td>
<td class="text-right">$1.800,00</td>
<td class="text-end">$1.800,00</td>
<td class="text-end">$1.800,00</td>
</tr>
<tr>
<td class="text-center">2</td>
@@ -390,8 +396,8 @@
<td class="text-center">
1
</td>
<td class="text-right">$20.000,00</td>
<td class="text-right">$20.000,00</td>
<td class="text-end">$20.000,00</td>
<td class="text-end">$20.000,00</td>
</tr>
<tr>
<td class="text-center">3</td>
@@ -402,24 +408,24 @@
<td class="text-center">
1
</td>
<td class="text-right">$3.200,00</td>
<td class="text-right">$3.200,00</td>
<td class="text-end">$3.200,00</td>
<td class="text-end">$3.200,00</td>
</tr>
<tr>
<td colspan="4" class="strong text-right">Subtotal</td>
<td class="text-right">$25.000,00</td>
<td colspan="4" class="strong text-end">Subtotal</td>
<td class="text-end">$25.000,00</td>
</tr>
<tr>
<td colspan="4" class="strong text-right">Vat Rate</td>
<td class="text-right">20%</td>
<td colspan="4" class="strong text-end">Vat Rate</td>
<td class="text-end">20%</td>
</tr>
<tr>
<td colspan="4" class="strong text-right">Vat Due</td>
<td class="text-right">$5.000,00</td>
<td colspan="4" class="strong text-end">Vat Due</td>
<td class="text-end">$5.000,00</td>
</tr>
<tr>
<td colspan="4" class="font-weight-bold text-uppercase text-right">Total Due</td>
<td class="font-weight-bold text-right">$30.000,00</td>
<td colspan="4" class="font-weight-bold text-uppercase text-end">Total Due</td>
<td class="font-weight-bold text-end">$30.000,00</td>
</tr>
</table>
<p class="text-muted text-center mt-5">Thank you very much for doing business with us. We look forward to working with
@@ -430,11 +436,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="./license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -445,7 +451,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -458,8 +464,5 @@
<script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

1151
demo/layout-combo.html
View File

File diff suppressed because it is too large Load Diff

633
demo/layout-condensed-dark.html
View File

File diff suppressed because it is too large Load Diff

633
demo/layout-condensed.html
View File

File diff suppressed because it is too large Load Diff

633
demo/layout-dark.html
View File

File diff suppressed because it is too large Load Diff

1129
demo/layout-fluid-vertical.html
View File

File diff suppressed because it is too large Load Diff

633
demo/layout-fluid.html
View File

File diff suppressed because it is too large Load Diff

633
demo/layout-horizontal.html
View File

File diff suppressed because it is too large Load Diff

633
demo/layout-navbar-dark.html
View File

File diff suppressed because it is too large Load Diff

633
demo/layout-navbar-overlap.html
View File

File diff suppressed because it is too large Load Diff

2463
demo/layout-navbar-sticky.html Normal file
View File

File diff suppressed because it is too large Load Diff

633
demo/layout-rtl.html
View File

File diff suppressed because it is too large Load Diff

1129
demo/layout-vertical-right.html
View File

File diff suppressed because it is too large Load Diff

2445
demo/layout-vertical-transparent.html Normal file
View File

File diff suppressed because it is too large Load Diff

1129
demo/layout-vertical.html
View File

File diff suppressed because it is too large Load Diff

77
demo/license.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href=".">
<img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="./cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="./colors.html" >
Colors
</a>
<a class="dropdown-item" href="./dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="./maps.html" >
Maps
</a>
<a class="dropdown-item" href="./map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="./maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="./navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="./tables.html" >
Tables
</a>
<a class="dropdown-item" href="./calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="./carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="./markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="./auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</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" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="./layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="./layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="./layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="./layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="./layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="./layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -364,7 +370,7 @@
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center mb-3">
<div class="mr-3">
<div class="me-3">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-md" width="24" height="24" viewBox="0 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="3" x2="12" y2="21" /><line x1="9" y1="21" x2="15" y2="21" /><polyline points="3 6 6 7 12 5 18 7 21 6" /><path d="M6 7l-3 9a5 5 0 0 0 6 0l-3 -9" /><path d="M18 7l-3 9a5 5 0 0 0 6 0l-3 -9" /></svg>
</div>
<div>
@@ -412,11 +418,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="./license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -427,7 +433,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -440,8 +446,5 @@
<script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

75
demo/lists.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href=".">
<img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</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" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="./cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="./colors.html" >
Colors
</a>
<a class="dropdown-item" href="./dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="./maps.html" >
Maps
</a>
<a class="dropdown-item" href="./map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="./maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="./navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="./tables.html" >
Tables
</a>
<a class="dropdown-item" href="./calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="./carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="./markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="./auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="./layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="./layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="./layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="./layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="./layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="./layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -635,11 +641,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="./license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -650,7 +656,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -663,8 +669,5 @@
<script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

329
demo/map-fullsize.html Normal file
View File

@@ -0,0 +1,329 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.18
* @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>Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
<!-- 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/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<div class="page">
<aside class="navbar navbar-vertical navbar-expand-lg navbar-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
<span class="navbar-toggler-icon"></span>
</button>
<h1 class="navbar-brand navbar-brand-autodark">
<a href=".">
<img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<div class="navbar-nav flex-row d-lg-none">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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-end 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-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block ps-2">
<div>Paweł Kuna</div>
<div class="mt-1 small text-muted">UI Designer</div>
</div>
</a>
<div class="dropdown-menu dropdown-menu-end 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 class="collapse navbar-collapse" id="navbar-menu">
<ul class="navbar-nav pt-lg-3">
<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-bs-toggle="dropdown" role="button" aria-expanded="true" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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">
Interface
</span>
</a>
<div class="dropdown-menu show">
<div class="dropdown-menu-columns">
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./empty.html" >
Empty page
</a>
<a class="dropdown-item" href="./blank.html" >
Blank page
</a>
<a class="dropdown-item" href="./buttons.html" >
Buttons
</a>
<a class="dropdown-item" href="./cards.html" >
Cards
</a>
<a class="dropdown-item" href="./cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="./colors.html" >
Colors
</a>
<a class="dropdown-item" href="./dropdowns.html" >
Dropdowns
</a>
<a class="dropdown-item" href="./icons.html" >
Icons
</a>
<a class="dropdown-item" href="./modals.html" >
Modals
</a>
<a class="dropdown-item" href="./maps.html" >
Maps
</a>
<a class="dropdown-item active" href="./map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="./maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="./navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./charts.html" >
Charts
</a>
<a class="dropdown-item" href="./charts-heatmap.html" >
Charts heatmap
</a>
<a class="dropdown-item" href="./pagination.html" >
Pagination
</a>
<a class="dropdown-item" href="./skeleton.html" >
Skeleton
</a>
<a class="dropdown-item" href="./tabs.html" >
Tabs
</a>
<a class="dropdown-item" href="./tables.html" >
Tables
</a>
<a class="dropdown-item" href="./carousel.html" >
Carousel
</a>
<a class="dropdown-item" href="./lists.html" >
Lists
</a>
<a class="dropdown-item" href="./typography.html" >
Typography
</a>
<a class="dropdown-item" href="./markdown.html" >
Markdown
</a>
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-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>
<a href="./auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-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>
</div>
</div>
</div>
</div>
</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">
Forms
</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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>
<div class="dropdown-menu">
<a class="dropdown-item" href="./activity.html" >
Activity
</a>
<a class="dropdown-item" href="./gallery.html" >
Gallery
</a>
<a class="dropdown-item" href="./invoice.html" >
Invoice
</a>
<a class="dropdown-item" href="./search-results.html" >
Search results
</a>
<a class="dropdown-item" href="./pricing.html" >
Pricing cards
</a>
<a class="dropdown-item" href="./users.html" >
Users
</a>
<a class="dropdown-item" href="./license.html" >
License
</a>
<a class="dropdown-item" href="./music.html" >
Music
</a>
<a class="dropdown-item" href="./widgets.html" >
Widgets
</a>
<a class="dropdown-item" href="./wizard.html" >
Wizard
</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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>
<div class="dropdown-menu">
<div class="dropdown-menu-columns">
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./layout-horizontal.html" >
Horizontal
</a>
<a class="dropdown-item" href="./layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="./layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="./layout-vertical-right.html" >
Right vertical
</a>
<a class="dropdown-item" href="./layout-condensed.html" >
Condensed
</a>
<a class="dropdown-item" href="./layout-condensed-dark.html" >
Condensed dark
</a>
<a class="dropdown-item" href="./layout-combo.html" >
Combined
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="./layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="./layout-navbar-overlap.html" >
Navbar overlap
</a>
<a class="dropdown-item" href="./layout-dark.html" >
Dark mode
</a>
<a class="dropdown-item" href="./layout-rtl.html" >
RTL mode
</a>
<a class="dropdown-item" href="./layout-fluid.html" >
Fluid
</a>
<a class="dropdown-item" href="./layout-fluid-vertical.html" >
Fluid vertical
</a>
</div>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="./docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Documentation
</span>
</a>
</li>
</ul>
</div>
</div>
</aside>
<div class="content content-full">
<div class="map flex-fill" id="map-google"></div>
</div>
</div>
<!-- Libs JS -->
<script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCL-BY8-sq12m0S9H-S_yMqDmcun3A9znw"></script>
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script>
// @formatter:off
let map;
document.addEventListener("DOMContentLoaded", function() {
map = new google.maps.Map(document.getElementById("map-google"), {
center: { lat: -34.397, lng: 150.644 },
zoom: 8,
});
});
// @formatter:on
</script>
</body>
</html>

75
demo/maps-vector.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -20,29 +20,26 @@
<link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href=".">
<img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -51,14 +48,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -85,11 +82,11 @@
</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" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -110,6 +107,9 @@
<a class="dropdown-item" href="./cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="./colors.html" >
Colors
</a>
<a class="dropdown-item" href="./dropdowns.html" >
Dropdowns
</a>
@@ -122,17 +122,20 @@
<a class="dropdown-item" href="./maps.html" >
Maps
</a>
<a class="dropdown-item" href="./map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item active" href="./maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="./navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./charts-heatmap.html" >
Charts heatmap
</a>
@@ -148,9 +151,6 @@
<a class="dropdown-item" href="./tables.html" >
Tables
</a>
<a class="dropdown-item" href="./calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="./carousel.html" >
Carousel
</a>
@@ -163,8 +163,8 @@
<a class="dropdown-item" href="./markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -175,8 +175,8 @@
<a href="./auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -199,7 +199,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -240,7 +240,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -256,6 +256,9 @@
<a class="dropdown-item" href="./layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="./layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="./layout-vertical-right.html" >
Right vertical
</a>
@@ -273,6 +276,9 @@
<a class="dropdown-item" href="./layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="./layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="./layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -308,7 +314,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -370,11 +376,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="./license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -385,7 +391,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -448,8 +454,5 @@
});
// @formatter:off
</script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

75
demo/maps.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -20,29 +20,26 @@
<link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href=".">
<img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -51,14 +48,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -85,11 +82,11 @@
</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" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -110,6 +107,9 @@
<a class="dropdown-item" href="./cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="./colors.html" >
Colors
</a>
<a class="dropdown-item" href="./dropdowns.html" >
Dropdowns
</a>
@@ -122,17 +122,20 @@
<a class="dropdown-item active" href="./maps.html" >
Maps
</a>
<a class="dropdown-item" href="./map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="./maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="./navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./charts-heatmap.html" >
Charts heatmap
</a>
@@ -148,9 +151,6 @@
<a class="dropdown-item" href="./tables.html" >
Tables
</a>
<a class="dropdown-item" href="./calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="./carousel.html" >
Carousel
</a>
@@ -163,8 +163,8 @@
<a class="dropdown-item" href="./markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -175,8 +175,8 @@
<a href="./auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -199,7 +199,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -240,7 +240,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -256,6 +256,9 @@
<a class="dropdown-item" href="./layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="./layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="./layout-vertical-right.html" >
Right vertical
</a>
@@ -273,6 +276,9 @@
<a class="dropdown-item" href="./layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="./layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="./layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -308,7 +314,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -376,11 +382,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="./license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -391,7 +397,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -463,8 +469,5 @@
});
// @formatter:on
</script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

75
demo/markdown.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href=".">
<img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</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" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="./cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="./colors.html" >
Colors
</a>
<a class="dropdown-item" href="./dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="./maps.html" >
Maps
</a>
<a class="dropdown-item" href="./map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="./maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="./navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="./tables.html" >
Tables
</a>
<a class="dropdown-item" href="./calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="./carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item active" href="./markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="./auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="./layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="./layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="./layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="./layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="./layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="./layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -459,11 +465,11 @@ line 3 of code
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="./license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -474,7 +480,7 @@ line 3 of code
All rights reserved.
</li>
<li class="list-inline-item">
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -487,8 +493,5 @@ line 3 of code
<script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

143
demo/modals.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href=".">
<img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</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" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="./cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="./colors.html" >
Colors
</a>
<a class="dropdown-item" href="./dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="./maps.html" >
Maps
</a>
<a class="dropdown-item" href="./map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="./maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="./navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="./tables.html" >
Tables
</a>
<a class="dropdown-item" href="./calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="./carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="./markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="./auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="./layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="./layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="./layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="./layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="./layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="./layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -330,28 +336,28 @@
<div class="card">
<div class="card-body">
<div class="btn-list">
<a href="#" class="btn btn-white" data-toggle="modal" data-target="#modal-simple">
<a href="#" class="btn btn-white" data-bs-toggle="modal" data-bs-target="#modal-simple">
Simple modal
</a>
<a href="#" class="btn btn-white" data-toggle="modal" data-target="#modal-large">
<a href="#" class="btn btn-white" data-bs-toggle="modal" data-bs-target="#modal-large">
Large modal
</a>
<a href="#" class="btn btn-white" data-toggle="modal" data-target="#modal-small">
<a href="#" class="btn btn-white" data-bs-toggle="modal" data-bs-target="#modal-small">
Small modal
</a>
<a href="#" class="btn btn-white" data-toggle="modal" data-target="#modal-full-width">
<a href="#" class="btn btn-white" data-bs-toggle="modal" data-bs-target="#modal-full-width">
Full width modal
</a>
<a href="#" class="btn btn-white" data-toggle="modal" data-target="#modal-scrollable">
<a href="#" class="btn btn-white" data-bs-toggle="modal" data-bs-target="#modal-scrollable">
Scrollable modal
</a>
<a href="#" class="btn btn-white" data-toggle="modal" data-target="#modal-report">
<a href="#" class="btn btn-white" data-bs-toggle="modal" data-bs-target="#modal-report">
Modal with form
</a>
<a href="#" class="btn btn-white" data-toggle="modal" data-target="#modal-info">
<a href="#" class="btn btn-white" data-bs-toggle="modal" data-bs-target="#modal-info">
Info modal
</a>
<a href="#" class="btn btn-white" data-toggle="modal" data-target="#modal-team">
<a href="#" class="btn btn-white" data-bs-toggle="modal" data-bs-target="#modal-team">
Modal with simple form
</a>
</div>
@@ -361,11 +367,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="./license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -376,7 +382,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -390,14 +396,14 @@
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></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 mr-auto" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
<button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Save changes</button>
</div>
</div>
</div>
@@ -407,14 +413,14 @@
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Large modal</h5>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></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 mr-auto" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
<button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Save changes</button>
</div>
</div>
</div>
@@ -427,8 +433,8 @@
<div>If you proceed, you will lose all your personal data.</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link link-secondary mr-auto" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Yes, delete all my data</button>
<button type="button" class="btn btn-link link-secondary me-auto" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Yes, delete all my data</button>
</div>
</div>
</div>
@@ -438,14 +444,14 @@
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Full width modal</h5>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></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 mr-auto" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
<button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Save changes</button>
</div>
</div>
</div>
@@ -455,7 +461,7 @@
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Scrollable modal</h5>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
@@ -496,8 +502,8 @@
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
<div class="modal-footer">
<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>
<button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Save changes</button>
</div>
</div>
</div>
@@ -507,7 +513,7 @@
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">New report</h5>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="mb-3">
@@ -520,7 +526,7 @@
<label class="form-selectgroup-item">
<input type="radio" name="report-type" value="1" class="form-selectgroup-input" checked>
<span class="form-selectgroup-label d-flex align-items-center p-3">
<span class="mr-3">
<span class="me-3">
<span class="form-selectgroup-check"></span>
</span>
<span class="form-selectgroup-label-content">
@@ -534,7 +540,7 @@
<label class="form-selectgroup-item">
<input type="radio" name="report-type" value="1" class="form-selectgroup-input">
<span class="form-selectgroup-label d-flex align-items-center p-3">
<span class="mr-3">
<span class="me-3">
<span class="form-selectgroup-check"></span>
</span>
<span class="form-selectgroup-label-content">
@@ -553,7 +559,7 @@
<span class="input-group-text">
https://tabler.io/reports/
</span>
<input type="text" class="form-control pl-0" value="report-01" autocomplete="off">
<input type="text" class="form-control ps-0" value="report-01" autocomplete="off">
</div>
</div>
</div>
@@ -592,10 +598,10 @@
</div>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-link link-secondary" data-dismiss="modal">
<a href="#" class="btn btn-link link-secondary" data-bs-dismiss="modal">
Cancel
</a>
<a href="#" class="btn btn-primary ml-auto" data-dismiss="modal">
<a href="#" class="btn btn-primary ms-auto" data-bs-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" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
Create new report
</a>
@@ -606,17 +612,17 @@
<div class="modal modal-blur fade" id="modal-info" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm modal-dialog-centered" role="document">
<div class="modal-content">
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="modal-body text-center py-5">
<svg xmlns="http://www.w3.org/2000/svg" class="icon mb-4 text-green" width="24" height="24" viewBox="0 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 12l2 2l4 -4" /></svg>
<h3>Payment succedeed</h3>
<div class="text-muted">Your payment of $290 has been successfully submitted. Your invoice has been sent to support@tabler.io.</div>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-primary w-100" data-dismiss="modal">
<a href="#" class="btn btn-primary w-100" data-bs-dismiss="modal">
View invoice
</a>
<a href="#" class="btn btn-white w-100" data-dismiss="modal">
<a href="#" class="btn btn-white w-100" data-bs-dismiss="modal">
Go to dashboard
</a>
</div>
@@ -628,7 +634,7 @@
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add a new team</h5>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row mb-3 align-items-end">
@@ -720,8 +726,8 @@
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn mr-auto" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Add Team</button>
<button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Add Team</button>
</div>
</div>
</div>
@@ -730,8 +736,5 @@
<script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

159
demo/music.html
View File

@@ -1,7 +1,7 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.14
* @version 1.0.0-alpha.18
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -19,29 +19,26 @@
<link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
<a href=".">
<img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
</a>
</h1>
<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">
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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="dropdown-menu dropdown-menu-end 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.
@@ -50,14 +47,14 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
<span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div class="d-none d-xl-block ps-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">
<div class="dropdown-menu dropdown-menu-end 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>
@@ -84,11 +81,11 @@
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-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
Interface
</span>
</a>
<div class="dropdown-menu">
@@ -109,6 +106,9 @@
<a class="dropdown-item" href="./cards-masonry.html" >
Cards Masonry
</a>
<a class="dropdown-item" href="./colors.html" >
Colors
</a>
<a class="dropdown-item" href="./dropdowns.html" >
Dropdowns
</a>
@@ -121,17 +121,20 @@
<a class="dropdown-item" href="./maps.html" >
Maps
</a>
<a class="dropdown-item" href="./map-fullsize.html" >
Map fullsize
</a>
<a class="dropdown-item" href="./maps-vector.html" >
Vector maps
</a>
<a class="dropdown-item" href="./navigation.html" >
Navigation
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./charts.html" >
Charts
</a>
</div>
<div class="dropdown-menu-column">
<a class="dropdown-item" href="./charts-heatmap.html" >
Charts heatmap
</a>
@@ -147,9 +150,6 @@
<a class="dropdown-item" href="./tables.html" >
Tables
</a>
<a class="dropdown-item" href="./calendar.html" >
Calendar
</a>
<a class="dropdown-item" href="./carousel.html" >
Carousel
</a>
@@ -162,8 +162,8 @@
<a class="dropdown-item" href="./markdown.html" >
Markdown
</a>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
@@ -174,8 +174,8 @@
<a href="./auth-lock.html" class="dropdown-item">Lock screen</a>
</div>
</div>
<div class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
<div class="dropend">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
@@ -198,7 +198,7 @@
</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" >
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-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">
@@ -239,7 +239,7 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-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">
@@ -255,6 +255,9 @@
<a class="dropdown-item" href="./layout-vertical.html" >
Vertical
</a>
<a class="dropdown-item" href="./layout-vertical-transparent.html" >
Vertical transparent
</a>
<a class="dropdown-item" href="./layout-vertical-right.html" >
Right vertical
</a>
@@ -272,6 +275,9 @@
<a class="dropdown-item" href="./layout-navbar-dark.html" >
Navbar dark
</a>
<a class="dropdown-item" href="./layout-navbar-sticky.html" >
Navbar sticky
</a>
<a class="dropdown-item" href="./layout-navbar-overlap.html" >
Navbar overlap
</a>
@@ -307,7 +313,7 @@
<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…">
<input type="text" class="form-control" placeholder="Search…" aria-label="Search in website">
</div>
</form>
</div>
@@ -352,7 +358,7 @@
</div>
<div class="col-auto">
<a href="#" class="link-secondary">
<button class="switch-icon" data-toggle="switch-icon">
<button class="switch-icon" data-bs-toggle="switch-icon">
<span class="switch-icon-a 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" fill="none"/><path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
</span>
@@ -364,9 +370,9 @@
</div>
<div class="col-auto lh-1">
<div class="dropdown">
<a href="#" class="link-secondary" data-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="12" r="1" /><circle cx="12" cy="12" r="1" /><circle cx="19" cy="12" r="1" /></svg>
<a href="#" class="link-secondary" data-bs-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="12" r="1" /><circle cx="12" cy="12" r="1" /><circle cx="19" cy="12" r="1" /></svg>
</a>
<div class="dropdown-menu dropdown-menu-right">
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">
Action
</a>
@@ -397,7 +403,7 @@
</div>
<div class="col-auto">
<a href="#" class="link-secondary">
<button class="switch-icon" data-toggle="switch-icon">
<button class="switch-icon" data-bs-toggle="switch-icon">
<span class="switch-icon-a 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" fill="none"/><path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
</span>
@@ -409,9 +415,9 @@
</div>
<div class="col-auto lh-1">
<div class="dropdown">
<a href="#" class="link-secondary" data-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="12" r="1" /><circle cx="12" cy="12" r="1" /><circle cx="19" cy="12" r="1" /></svg>
<a href="#" class="link-secondary" data-bs-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="12" r="1" /><circle cx="12" cy="12" r="1" /><circle cx="19" cy="12" r="1" /></svg>
</a>
<div class="dropdown-menu dropdown-menu-right">
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">
Action
</a>
@@ -442,7 +448,7 @@
</div>
<div class="col-auto">
<a href="#" class="link-secondary">
<button class="switch-icon" data-toggle="switch-icon">
<button class="switch-icon" data-bs-toggle="switch-icon">
<span class="switch-icon-a 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" fill="none"/><path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
</span>
@@ -454,9 +460,9 @@
</div>
<div class="col-auto lh-1">
<div class="dropdown">
<a href="#" class="link-secondary" data-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="12" r="1" /><circle cx="12" cy="12" r="1" /><circle cx="19" cy="12" r="1" /></svg>
<a href="#" class="link-secondary" data-bs-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="12" r="1" /><circle cx="12" cy="12" r="1" /><circle cx="19" cy="12" r="1" /></svg>
</a>
<div class="dropdown-menu dropdown-menu-right">
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">
Action
</a>
@@ -487,7 +493,7 @@
</div>
<div class="col-auto">
<a href="#" class="link-secondary">
<button class="switch-icon" data-toggle="switch-icon">
<button class="switch-icon" data-bs-toggle="switch-icon">
<span class="switch-icon-a 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" fill="none"/><path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
</span>
@@ -499,9 +505,9 @@
</div>
<div class="col-auto lh-1">
<div class="dropdown">
<a href="#" class="link-secondary" data-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="12" r="1" /><circle cx="12" cy="12" r="1" /><circle cx="19" cy="12" r="1" /></svg>
<a href="#" class="link-secondary" data-bs-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="12" r="1" /><circle cx="12" cy="12" r="1" /><circle cx="19" cy="12" r="1" /></svg>
</a>
<div class="dropdown-menu dropdown-menu-right">
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">
Action
</a>
@@ -532,7 +538,7 @@
</div>
<div class="col-auto">
<a href="#" class="link-secondary">
<button class="switch-icon" data-toggle="switch-icon">
<button class="switch-icon" data-bs-toggle="switch-icon">
<span class="switch-icon-a 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" fill="none"/><path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
</span>
@@ -544,9 +550,9 @@
</div>
<div class="col-auto lh-1">
<div class="dropdown">
<a href="#" class="link-secondary" data-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="12" r="1" /><circle cx="12" cy="12" r="1" /><circle cx="19" cy="12" r="1" /></svg>
<a href="#" class="link-secondary" data-bs-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="12" r="1" /><circle cx="12" cy="12" r="1" /><circle cx="19" cy="12" r="1" /></svg>
</a>
<div class="dropdown-menu dropdown-menu-right">
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">
Action
</a>
@@ -577,7 +583,7 @@
</div>
<div class="col-auto">
<a href="#" class="link-secondary">
<button class="switch-icon" data-toggle="switch-icon">
<button class="switch-icon" data-bs-toggle="switch-icon">
<span class="switch-icon-a 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" fill="none"/><path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
</span>
@@ -589,9 +595,9 @@
</div>
<div class="col-auto lh-1">
<div class="dropdown">
<a href="#" class="link-secondary" data-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="12" r="1" /><circle cx="12" cy="12" r="1" /><circle cx="19" cy="12" r="1" /></svg>
<a href="#" class="link-secondary" data-bs-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="12" r="1" /><circle cx="12" cy="12" r="1" /><circle cx="19" cy="12" r="1" /></svg>
</a>
<div class="dropdown-menu dropdown-menu-right">
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">
Action
</a>
@@ -624,7 +630,7 @@
</div>
<div class="col-auto">
<a href="#" class="link-secondary">
<button class="switch-icon" data-toggle="switch-icon">
<button class="switch-icon" data-bs-toggle="switch-icon">
<span class="switch-icon-a 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" fill="none"/><path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
</span>
@@ -636,9 +642,9 @@
</div>
<div class="col-auto lh-1">
<div class="dropdown">
<a href="#" class="link-secondary" data-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="12" r="1" /><circle cx="12" cy="12" r="1" /><circle cx="19" cy="12" r="1" /></svg>
<a href="#" class="link-secondary" data-bs-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="12" r="1" /><circle cx="12" cy="12" r="1" /><circle cx="19" cy="12" r="1" /></svg>
</a>
<div class="dropdown-menu dropdown-menu-right">
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">
Action
</a>
@@ -670,7 +676,7 @@
</div>
<div class="col-auto">
<a href="#" class="link-secondary">
<button class="switch-icon" data-toggle="switch-icon">
<button class="switch-icon" data-bs-toggle="switch-icon">
<span class="switch-icon-a 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" fill="none"/><path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
</span>
@@ -682,9 +688,9 @@
</div>
<div class="col-auto lh-1">
<div class="dropdown">
<a href="#" class="link-secondary" data-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="12" r="1" /><circle cx="12" cy="12" r="1" /><circle cx="19" cy="12" r="1" /></svg>
<a href="#" class="link-secondary" data-bs-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="12" r="1" /><circle cx="12" cy="12" r="1" /><circle cx="19" cy="12" r="1" /></svg>
</a>
<div class="dropdown-menu dropdown-menu-right">
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">
Action
</a>
@@ -715,7 +721,7 @@
</div>
<div class="col-auto">
<a href="#" class="link-secondary">
<button class="switch-icon" data-toggle="switch-icon">
<button class="switch-icon" data-bs-toggle="switch-icon">
<span class="switch-icon-a 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" fill="none"/><path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
</span>
@@ -727,9 +733,9 @@
</div>
<div class="col-auto lh-1">
<div class="dropdown">
<a href="#" class="link-secondary" data-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="12" r="1" /><circle cx="12" cy="12" r="1" /><circle cx="19" cy="12" r="1" /></svg>
<a href="#" class="link-secondary" data-bs-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="12" r="1" /><circle cx="12" cy="12" r="1" /><circle cx="19" cy="12" r="1" /></svg>
</a>
<div class="dropdown-menu dropdown-menu-right">
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">
Action
</a>
@@ -760,7 +766,7 @@
</div>
<div class="col-auto">
<a href="#" class="link-secondary">
<button class="switch-icon" data-toggle="switch-icon">
<button class="switch-icon" data-bs-toggle="switch-icon">
<span class="switch-icon-a 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" fill="none"/><path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
</span>
@@ -772,9 +778,9 @@
</div>
<div class="col-auto lh-1">
<div class="dropdown">
<a href="#" class="link-secondary" data-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="12" r="1" /><circle cx="12" cy="12" r="1" /><circle cx="19" cy="12" r="1" /></svg>
<a href="#" class="link-secondary" data-bs-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="12" r="1" /><circle cx="12" cy="12" r="1" /><circle cx="19" cy="12" r="1" /></svg>
</a>
<div class="dropdown-menu dropdown-menu-right">
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">
Action
</a>
@@ -805,7 +811,7 @@
</div>
<div class="col-auto">
<a href="#" class="link-secondary">
<button class="switch-icon" data-toggle="switch-icon">
<button class="switch-icon" data-bs-toggle="switch-icon">
<span class="switch-icon-a 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" fill="none"/><path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
</span>
@@ -817,9 +823,9 @@
</div>
<div class="col-auto lh-1">
<div class="dropdown">
<a href="#" class="link-secondary" data-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="12" r="1" /><circle cx="12" cy="12" r="1" /><circle cx="19" cy="12" r="1" /></svg>
<a href="#" class="link-secondary" data-bs-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="12" r="1" /><circle cx="12" cy="12" r="1" /><circle cx="19" cy="12" r="1" /></svg>
</a>
<div class="dropdown-menu dropdown-menu-right">
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">
Action
</a>
@@ -850,7 +856,7 @@
</div>
<div class="col-auto">
<a href="#" class="link-secondary">
<button class="switch-icon" data-toggle="switch-icon">
<button class="switch-icon" data-bs-toggle="switch-icon">
<span class="switch-icon-a 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" fill="none"/><path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
</span>
@@ -862,9 +868,9 @@
</div>
<div class="col-auto lh-1">
<div class="dropdown">
<a href="#" class="link-secondary" data-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="12" r="1" /><circle cx="12" cy="12" r="1" /><circle cx="19" cy="12" r="1" /></svg>
<a href="#" class="link-secondary" data-bs-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="12" r="1" /><circle cx="12" cy="12" r="1" /><circle cx="19" cy="12" r="1" /></svg>
</a>
<div class="dropdown-menu dropdown-menu-right">
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">
Action
</a>
@@ -886,7 +892,7 @@
<div class="card">
<div class="row row-0">
<div class="col-auto">
<img src="./static/tracks/c976bfc96d5e44820e553a16a6097cd02a61fd2f.jpg" class="rounded-left" alt="Shape of You" width="80" height="80">
<img src="./static/tracks/c976bfc96d5e44820e553a16a6097cd02a61fd2f.jpg" class="rounded-start" alt="Shape of You" width="80" height="80">
</div>
<div class="col">
<div class="card-body">
@@ -903,7 +909,7 @@
<div class="card">
<div class="row row-0">
<div class="col-auto">
<img src="./static/tracks/c9a8350feee77e9345eec4155cddc96694803d1a.jpg" class="rounded-left" alt="Alone" width="80" height="80">
<img src="./static/tracks/c9a8350feee77e9345eec4155cddc96694803d1a.jpg" class="rounded-start" alt="Alone" width="80" height="80">
</div>
<div class="col">
<div class="card-body">
@@ -920,7 +926,7 @@
<div class="card">
<div class="row row-0">
<div class="col-auto">
<img src="./static/tracks/fe4ee21d30450829e5b172e806b3c1e14ca1e5f3.jpg" class="rounded-left" alt="Langrennsfar" width="80" height="80">
<img src="./static/tracks/fe4ee21d30450829e5b172e806b3c1e14ca1e5f3.jpg" class="rounded-start" alt="Langrennsfar" width="80" height="80">
</div>
<div class="col">
<div class="card-body">
@@ -937,7 +943,7 @@
<div class="card">
<div class="row row-0">
<div class="col-auto">
<img src="./static/tracks/f4e96086f44c4dff1758b1fc1338cd88c1b5ce9c.jpg" class="rounded-left" alt="Skibidi - Romantic Edition" width="80" height="80">
<img src="./static/tracks/f4e96086f44c4dff1758b1fc1338cd88c1b5ce9c.jpg" class="rounded-start" alt="Skibidi - Romantic Edition" width="80" height="80">
</div>
<div class="col">
<div class="card-body">
@@ -954,7 +960,7 @@
<div class="card">
<div class="row row-0">
<div class="col-auto">
<img src="./static/tracks/73f4938130140174efb1cc0a82ececb277e40932.jpg" class="rounded-left" alt="Miracle" width="80" height="80">
<img src="./static/tracks/73f4938130140174efb1cc0a82ececb277e40932.jpg" class="rounded-start" alt="Miracle" width="80" height="80">
</div>
<div class="col">
<div class="card-body">
@@ -971,7 +977,7 @@
<div class="card">
<div class="row row-0">
<div class="col-auto">
<img src="./static/tracks/cfb2a532996512eff95c4b0d566d067384aaa441.jpg" class="rounded-left" alt="Different World (feat. CORSAK)" width="80" height="80">
<img src="./static/tracks/cfb2a532996512eff95c4b0d566d067384aaa441.jpg" class="rounded-start" alt="Different World (feat. CORSAK)" width="80" height="80">
</div>
<div class="col">
<div class="card-body">
@@ -994,11 +1000,11 @@
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<div class="col-lg-auto ms-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="./license.html" class="link-secondary">License</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
@@ -1009,7 +1015,7 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.14</a>
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-alpha.18</a>
</li>
</ul>
</div>
@@ -1022,8 +1028,5 @@
<script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

Some files were not shown because too many files have changed in this diff Show More