1
0
mirror of https://github.com/tabler/tabler.git synced 2025-12-22 01:44:25 +04:00

Compare commits

...

178 Commits

Author SHA1 Message Date
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
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
0410d39ba9 Release 1.0.0-alpha.14 2020-11-21 16:26:10 +01:00
codecalm
b0b70bcda3 bootstrap update, charts fixes 2020-11-21 16:24:32 +01:00
codecalm
f00c4faa18 select2 fixes 2020-11-21 15:52:32 +01:00
codecalm
cbf94888e6 icon fixes 2020-11-21 15:41:59 +01:00
codecalm
74e8e2086e card header fix 2020-11-21 15:34:10 +01:00
codecalm
6c0d8f7b7b svg fix 2020-11-21 15:31:05 +01:00
codecalm
09a0ea58a2 icons title 2020-11-21 15:15:57 +01:00
codecalm
f1f56beefa fix #722 2020-11-21 15:07:33 +01:00
Paweł Kuna
c976ee9553 Merge pull request #716 from tabler/dev-npm-cdn-info 2020-11-15 21:00:51 +01:00
Michal Wolny
bebab5bd9d separate css and js includes 2020-11-15 19:41:30 +01:00
Michal Wolny
dde02732ef add usage page in getting started guide,
add readme npm and CDN installation guide
2020-11-15 19:29:32 +01:00
Michal Wolny
60f0f4f871 Release 1.0.0-alpha.13 2020-11-15 17:47:40 +01:00
Michał Wolny
13729d4b0f Merge pull request #715 from tabler/dev-package-rename
Package rename
2020-11-15 17:42:19 +01:00
Michal Wolny
2675d28ae8 package rename 2020-11-15 17:16:12 +01:00
Paweł Kuna
ab2e44c30c Merge pull request #714 from tabler/dev-sparkline 2020-11-15 15:08:25 +01:00
codecalm
3ab7200f69 small fixes 2020-11-15 15:04:06 +01:00
codecalm
5f2983102d peity remove 2020-11-15 14:59:30 +01:00
codecalm
78c4e6dd31 fix #712 2020-11-15 12:09:40 +01:00
codecalm
1924310ee5 form elements fixes 2020-11-14 21:55:55 +01:00
codecalm
c8b74c9b4b variables rename, dropdown menu min-width 2020-11-14 21:54:23 +01:00
codecalm
a18b4d4180 dropdown menu items unnecessary divs 2020-11-14 21:52:37 +01:00
codecalm
43dc058176 dropdown menu columns rebuild 2020-11-14 21:49:12 +01:00
codecalm
08a126052d tabler vendors 2020-11-14 21:26:19 +01:00
codecalm
e22eb52c8b single pages 2020-11-14 21:17:43 +01:00
codecalm
a64dc02e30 license 2020-11-14 20:44:12 +01:00
codecalm
8cd54e9c74 wizard 2020-11-14 20:24:24 +01:00
codecalm
887e23afe1 seo fixes 2020-11-14 16:51:40 +01:00
codecalm
60723e62c8 fix #137 2020-11-14 16:43:42 +01:00
codecalm
223a69ec37 ribbons, container classes 2020-11-14 16:35:30 +01:00
codecalm
71d76c230d invoice fixes 2020-11-14 16:03:56 +01:00
codecalm
d7514fbef2 widgets fixes 2020-11-14 15:32:34 +01:00
codecalm
fa6ff7479e preview css fixes 2020-11-14 12:30:02 +01:00
codecalm
483182f5f6 tabler-icons fixes 2020-11-14 12:21:12 +01:00
codecalm
74df267ff4 tabler-icons upgate, bootstrap update 2020-11-13 22:36:59 +01:00
codecalm
a6d37db55d missing files fixes 2020-11-13 22:20:54 +01:00
codecalm
a7d90607bc sitemap fix 2020-11-13 13:47:37 +01:00
codecalm
8cb51f8071 sitemap 2020-11-13 13:41:21 +01:00
codecalm
9f342786a3 sitemap 2020-11-13 13:32:53 +01:00
codecalm
6262c262a5 ribbon fixes 2020-11-12 15:18:28 +01:00
codecalm
31cfbd25f5 image preview 2020-11-12 15:06:05 +01:00
codecalm
0cccfa3a94 404 page 2020-11-12 14:59:01 +01:00
codecalm
cf2241c234 seo fix 2020-11-12 14:55:06 +01:00
codecalm
d47077deb7 preview-dev -> preview 2020-11-12 14:50:54 +01:00
codecalm
6c8567c6f9 analytics tag 2020-11-12 14:38:17 +01:00
codecalm
cb0f68bc34 site build fixes 2020-11-12 14:21:59 +01:00
codecalm
3cce1c5963 vertical transparent layout 2020-11-12 13:47:51 +01:00
codecalm
af7d9d6648 small logo fix 2020-11-10 17:38:44 +01:00
codecalm
8667f80985 icons svg highlight 2020-11-09 23:20:20 +01:00
codecalm
0f671cb2f4 input number fixes 2020-11-09 22:51:33 +01:00
codecalm
134170ee9b Release 1.0.0-alpha.12 2020-11-09 22:38:34 +01:00
codecalm
f04b08415f floating inputs demo 2020-11-09 22:31:47 +01:00
codecalm
f464c60c1a bootstrap upgrade, remove btn-block, bootstrap 5 fixes 2020-11-09 22:03:24 +01:00
codecalm
bc8cde689b invoice fixes, print fixes 2020-11-08 23:11:04 +01:00
codecalm
f0f7c113f5 icon fix 2020-11-08 23:01:52 +01:00
codecalm
05713e7b43 icons fixes 2020-11-08 22:53:11 +01:00
codecalm
0b012d546c Merge remote-tracking branch 'origin/dev' into dev
# Conflicts:
#	src/pages/_includes/ui/icon.html
2020-11-08 22:48:28 +01:00
codecalm
88af16fb11 iconfont fixes 2020-11-08 22:48:10 +01:00
codecalm
145b218386 iconfont fixes 2020-11-08 22:45:17 +01:00
codecalm
52dd843e17 homepage fix 2020-11-08 20:26:55 +01:00
codecalm
43fd43ded8 activity fixes 2020-11-08 20:23:06 +01:00
codecalm
ab38d62d66 homepage charts 2020-11-08 20:16:31 +01:00
codecalm
871ec8b48a homepage activity 2020-11-08 20:06:24 +01:00
codecalm
06125409eb menu fixes, cleanup 2020-11-08 18:16:12 +01:00
codecalm
f76ac3c29a code cleanup 2020-11-08 15:35:01 +01:00
codecalm
64741eed8a Merge branch 'gryevns-modal-anchor-alignment' into dev 2020-11-08 13:42:44 +01:00
codecalm
30440004ee Merge branch 'modal-anchor-alignment' of https://github.com/gryevns/tabler into gryevns-modal-anchor-alignment 2020-11-08 13:42:21 +01:00
codecalm
b80459bc9a Merge branch 'danswiser-dev' into dev 2020-11-08 13:40:09 +01:00
codecalm
e1f20ad1b9 resolve conflicts 2020-11-08 13:39:19 +01:00
codecalm
3cc1dc45cb Merge branch 'dev' of https://github.com/tabler/tabler into danswiser-dev 2020-11-08 13:38:51 +01:00
codecalm
b0fde34e31 Merge branch 'dev' of https://github.com/danswiser/tabler-1 into danswiser-dev 2020-11-08 13:38:25 +01:00
Paweł Kuna
1c11fbcdb6 Merge pull request #681 from rajan-31/first_contribution 2020-11-08 13:36:57 +01:00
Paweł Kuna
d8f7d64e4f Merge branch 'dev' into first_contribution 2020-11-08 13:36:46 +01:00
codecalm
6c5b3bd36f cross-spawn #705 2020-11-08 13:32:09 +01:00
codecalm
8be915e1e9 cross-spawn #705 2020-11-08 13:31:45 +01:00
codecalm
08449c3372 tabler-icons upgrade 2020-11-08 13:13:55 +01:00
codecalm
0acc7ee934 pre font smoothing 2020-11-08 12:29:30 +01:00
codecalm
52a2ff974f playground init 2020-11-08 10:17:43 +01:00
codecalm
b998a6bc2c Release 1.0.0-alpha.11 2020-11-07 01:53:22 +01:00
codecalm
6ee1d90573 percy config 2020-11-07 01:51:59 +01:00
codecalm
d4ed037322 switch icon docs 2020-11-07 01:40:03 +01:00
codecalm
6c83cc06d5 switch icon component 2020-11-07 01:34:08 +01:00
codecalm
04237729ec single page fixes 2020-11-07 00:09:30 +01:00
codecalm
9c4fac6eac layout fixes 2020-11-07 00:08:00 +01:00
codecalm
d9df96f117 packages update 2020-11-07 00:01:20 +01:00
codecalm
e76106a3dd docs fixes 2020-11-06 23:49:13 +01:00
codecalm
5dd7d6b3e1 docs rewrite 2020-11-06 23:04:40 +01:00
codecalm
a7df03a57a nested dropdowns 2020-11-06 12:59:28 +01:00
codecalm
a9adb7452f bg fix 2020-11-06 00:46:12 +01:00
codecalm
a5a0d384a0 Release 1.0.0-alpha.10 2020-11-05 23:49:52 +01:00
Paweł Kuna
d811c3ea24 Merge pull request #706 from tabler/dev-skeleton 2020-11-05 23:33:57 +01:00
codecalm
613768ed1d skeleton demo menu 2020-11-05 23:31:26 +01:00
codecalm
68b23e0eb6 skeleton feature 2020-11-05 23:27:08 +01:00
codecalm
eb7767ccd2 Release 1.0.0-alpha.9 2020-11-04 12:34:30 +01:00
codecalm
a5eacf14be build fixes 2020-11-04 12:30:45 +01:00
codecalm
3a843a7dab homepage chart 2020-11-04 00:57:21 +01:00
codecalm
018fcc7545 user dropdown, dropdown fixes 2020-11-04 00:41:10 +01:00
codecalm
11ccc0ee49 bg color 2020-11-04 00:29:21 +01:00
codecalm
ee3fc91d3d toast demo 2020-11-04 00:23:18 +01:00
codecalm
18c61cab04 homepage fixes 2020-11-04 00:09:00 +01:00
codecalm
358c018031 flag, payments fixes 2020-11-04 00:07:39 +01:00
codecalm
1d928f747f steps fixes 2020-11-04 00:00:05 +01:00
codecalm
6de02962e4 config fixes 2020-11-03 23:58:45 +01:00
codecalm
50a3402dcd footer version. homepage fixes 2020-11-03 23:56:10 +01:00
codecalm
35c591d989 responsive containers fixes 2020-11-03 23:50:29 +01:00
codecalm
93f8376a63 Merge remote-tracking branch 'origin/dev' into dev
# Conflicts:
#	src/pages/_includes/layout/homepage.html
2020-11-03 23:37:38 +01:00
codecalm
6a8378175f homepage chart 2020-11-03 23:37:12 +01:00
codecalm
274be560de homepage chart 2020-11-03 23:36:47 +01:00
codecalm
75d8e017e6 navbar dark fixes 2020-11-03 23:21:13 +01:00
codecalm
fd16593cfe homepage fixes 2020-11-03 23:15:32 +01:00
codecalm
85bad48fc1 dark mode fixes 2020-11-03 22:21:28 +01:00
codecalm
7949f9216e page header fixes 2020-11-02 15:18:25 +01:00
codecalm
7402edc748 table fixes, homepage fixes 2020-11-02 02:38:39 +01:00
codecalm
6409a25b16 grid fixes 2020-11-02 02:20:26 +01:00
codecalm
45ee44a209 form fixes 2020-11-02 01:58:01 +01:00
codecalm
1a30f78307 bootstrap update, form elements fixes 2020-11-02 01:32:56 +01:00
codecalm
667327a0d9 tabler v1 2020-11-02 00:43:03 +01:00
codecalm
39156c1141 tabler v1.0 improvements 2020-11-01 22:40:47 +01:00
codecalm
afebee8a33 modals fixes, unify avatars and stamps 2020-11-01 01:36:44 +01:00
codecalm
b64f616519 tabler v1 fixes 2020-11-01 00:56:18 +01:00
codecalm
3aa23ffb66 tabler v1 fixes 2020-11-01 00:32:29 +01:00
codecalm
4531ba200c font-weight unify 2020-10-31 20:41:27 +01:00
codecalm
6312bcfcd3 percy script 2020-10-30 00:11:35 +01:00
codecalm
4b9baea1d2 readme fixes 2020-10-30 00:02:32 +01:00
codecalm
a6c9c957ca bootstrap fixes 2020-10-29 23:58:57 +01:00
codecalm
32f8e8be1d btn-close fix 2020-10-29 23:40:38 +01:00
codecalm
e99982daf9 bootstrap upgrade, js fix 2020-10-29 23:38:55 +01:00
codecalm
4860980b03 icons stroke 2020-10-29 23:37:18 +01:00
codecalm
aa451f275d homepage fixes 2020-10-29 23:09:16 +01:00
codecalm
7e421c4639 gitignore fixes 2020-10-29 22:50:44 +01:00
codecalm
eeced21337 build test 2020-10-29 22:27:47 +01:00
codecalm
fc09ee1405 build fixes 2020-10-28 15:15:54 +01:00
Rajan Khade
6730be419e Readme: status changes2 2020-09-03 11:58:47 +05:30
Rajan Khade
97478b062d Readme: status Changes 2020-09-02 15:24:50 +05:30
Daniel Wiser
3a50f89309 Avatar badge sizes 2020-05-08 15:14:01 -04:00
Gary Evans
e20cc7126d Remove vertical-align for alert anchor elements 2020-05-04 19:23:57 +01:00
1225 changed files with 82990 additions and 84540 deletions

3
.gitignore vendored
View File

@@ -21,3 +21,6 @@ node_modules/
/svg-tmp/
/components/
/percy.sh
/Gemfile.lock
/package-lock.json
/src/pages/playground.html

3
.percy.yml Normal file
View File

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

View File

@@ -3,7 +3,6 @@ source "https://rubygems.org"
gem "jekyll", "4.1.1"
group :jekyll_plugins do
gem 'jekyll-toc'
gem "jekyll-random"
gem "jekyll-tidy"
gem "jekyll-timeago"

View File

@@ -1,91 +0,0 @@
GEM
remote: https://rubygems.org/
specs:
addressable (2.7.0)
public_suffix (>= 2.0.2, < 5.0)
colorator (1.1.0)
concurrent-ruby (1.1.7)
em-websocket (0.5.2)
eventmachine (>= 0.12.9)
http_parser.rb (~> 0.6.0)
eventmachine (1.2.7)
ffi (1.13.1)
forwardable-extended (2.6.0)
htmlbeautifier (1.3.1)
htmlcompressor (0.4.0)
http_parser.rb (0.6.0)
i18n (1.8.5)
concurrent-ruby (~> 1.0)
jekyll (4.1.1)
addressable (~> 2.4)
colorator (~> 1.0)
em-websocket (~> 0.5)
i18n (~> 1.0)
jekyll-sass-converter (~> 2.0)
jekyll-watch (~> 2.0)
kramdown (~> 2.1)
kramdown-parser-gfm (~> 1.0)
liquid (~> 4.0)
mercenary (~> 0.4.0)
pathutil (~> 0.9)
rouge (~> 3.0)
safe_yaml (~> 1.0)
terminal-table (~> 1.8)
jekyll-random (0.1)
jekyll (>= 3.3, < 5.0)
jekyll-redirect-from (0.16.0)
jekyll (>= 3.3, < 5.0)
jekyll-sass-converter (2.1.0)
sassc (> 2.0.1, < 3.0)
jekyll-tidy (0.2.2)
htmlbeautifier
htmlcompressor
jekyll
jekyll-timeago (0.13.1)
mini_i18n (>= 0.8.0)
jekyll-toc (0.14.0)
jekyll (>= 3.8)
nokogiri (~> 1.10)
jekyll-watch (2.2.1)
listen (~> 3.0)
kramdown (2.3.0)
rexml
kramdown-parser-gfm (1.1.0)
kramdown (~> 2.0)
liquid (4.0.3)
listen (3.2.1)
rb-fsevent (~> 0.10, >= 0.10.3)
rb-inotify (~> 0.9, >= 0.9.10)
mercenary (0.4.0)
mini_i18n (0.8.0)
mini_portile2 (2.4.0)
nokogiri (1.10.10)
mini_portile2 (~> 2.4.0)
pathutil (0.16.2)
forwardable-extended (~> 2.6)
public_suffix (4.0.6)
rb-fsevent (0.10.4)
rb-inotify (0.10.1)
ffi (~> 1.0)
rexml (3.2.4)
rouge (3.23.0)
safe_yaml (1.0.5)
sassc (2.4.0)
ffi (~> 1.9)
terminal-table (1.8.0)
unicode-display_width (~> 1.1, >= 1.1.1)
unicode-display_width (1.7.0)
PLATFORMS
ruby
DEPENDENCIES
jekyll (= 4.1.1)
jekyll-random
jekyll-redirect-from
jekyll-tidy
jekyll-timeago
jekyll-toc
BUNDLED WITH
2.1.4

View File

@@ -2,18 +2,14 @@
A premium and open source dashboard template with a responsive and high-quality UI.
<strong><a href="https://preview-dev.tabler.io">View Demo</a> | <a href="https://github.com/tabler/tabler-react">View React Version</a> | <a href="https://github.com/tabler/tabler/archive/master.zip">Download ZIP</a> | <a href="https://join.slack.com/t/tabler-ui/shared_invite/enQtMzQxMTYxODk5NDYwLWU4Y2FiNWYxN2UyNWUzOTBjNmU0ZGM2ZDViMjQzMWMyZWM0ZDFkMGRhZGFiYzFhZjM1NmIxOGQ2ZDUwZjlhMTU">Join us on Slack</a></strong>
<a href="https://preview.tabler.io">View Demo</a> | <a href="https://github.com/tabler/tabler/archive/dev.zip">Download ZIP</a>
![Tabler preview](/static/tabler-preview.png?raw=true)
![Tabler preview](/src/static/tabler-preview.png?raw=true)
## Status
<a href="#backers" alt="sponsors on Open Collective"><img src="https://opencollective.com/tabler/backers/badge.svg"></a>
<a href="#sponsors" alt="Sponsors on Open Collective"><img src="https://opencollective.com/tabler/sponsors/badge.svg"></a>
<a href="https://www.npmjs.com/package/tabler"><img src="https://img.shields.io/npm/dt/tabler.svg" alt="Total Downloads"></a>
<a href="https://github.com/tabler/tabler/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tabler.svg" alt="License"></a>
<a href="https://github.com/tabler/tabler/releases"><img src="https://img.shields.io/npm/v/tabler.svg" alt="Latest Release"></a>
<a href="#backers" alt="Backers Open Collective"><img src="https://opencollective.com/tabler/backers/badge.svg"/></a> <a href="#sponsors" alt="Sponsors on Open Collective"><img src="https://opencollective.com/tabler/sponsors/badge.svg"/></a> <a href="https://www.npmjs.com/package/tabler"><img src="https://img.shields.io/npm/dt/tabler.svg" alt="Total Downloads"></a> <a href="https://github.com/tabler/tabler/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tabler.svg" alt="License"></a> <a href="https://github.com/tabler/tabler/releases"><img src="https://img.shields.io/npm/v/@tabler/core.svg" alt="Latest Release"></a>
## Features
@@ -30,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
@@ -71,12 +67,35 @@ 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.
Open [http://localhost:3001](http://localhost:3001) to configure the Web server.
## Installation
Tabler is distributed via npm.
```sh
npm install --save @tabler/core
```
### CDN support
All files included in `@tabler/core` npm package are available over a CDN.
#### Javascript
```html
<script src="https://unpkg.com/@tabler/core@latest/dist/js/tabler.min.js"></script>
```
#### Styles
```html
<link rel="stylesheet" href="https://unpkg.com/@tabler/core@latest/dist/css/tabler.min.css">
```
## Feature requests

View File

@@ -7,14 +7,21 @@ keep_files:
- img
- dist
- static
- playground.html
use-iconfont: false
title: Tabler
description: Premium and Open Source dashboard template with responsive and high quality UI.
homepage: https://tabler.io
github_url: https://github.com/tabler/tabler
sponsor_url: https://github.com/sponsors/codecalm
github-url: https://github.com/tabler/tabler
changelog-url: https://github.com/tabler/tabler/releases
sponsor-url: https://github.com/sponsors/codecalm
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
@@ -22,7 +29,6 @@ layout-dark: false
plugins:
- jekyll-random
- jekyll-toc
- jekyll-tidy
- jekyll-timeago
- jekyll-redirect-from
@@ -30,7 +36,7 @@ plugins:
tabler-plugins:
- tabler-flags
- tabler-payments
- tabler-buttons
- tabler-vendors
exclude:
- .jekyll-cache
@@ -45,11 +51,6 @@ jekyll_tidy:
compress_html: false
ignore_env: development
toc:
min_level: 2
max_level: 3
list_class: list-unstyled
collections:
docs:
output: true
@@ -69,7 +70,6 @@ defaults:
type: "docs"
values:
layout: docs
toc: true
colors:
blue:
@@ -108,9 +108,6 @@ colors:
cyan:
hex: '#17a2b8'
title: Cyan
gray:
hex: '#868e96'
title: Gray
colors-extra:
white:
@@ -119,6 +116,9 @@ colors-extra:
dark:
hex: '#303645'
title: Dark
gray:
hex: '#868e96'
title: Gray
variants:
- name: success
@@ -155,9 +155,6 @@ button-variants:
dark:
class: dark
title: Dark
link:
class: link
title: Link
button-states:
- class:
@@ -169,46 +166,46 @@ button-states:
socials:
facebook:
icon: brand/facebook
icon: brand-facebook
title: Facebook
twitter:
icon: brand/twitter
icon: brand-twitter
title: Twitter
google:
icon: brand/google
icon: brand-google
title: Google
youtube:
icon: brand/youtube
icon: brand-youtube
title: Youtube
vimeo:
icon: brand/vimeo
icon: brand-vimeo
title: Vimeo
dribbble:
icon: brand/dribbble
icon: brand-dribbble
title: Dribbble
github:
icon: brand/github
icon: brand-github
title: Github
instagram:
icon: brand/instagram
icon: brand-instagram
title: Instagram
pinterest:
icon: brand/pinterest
icon: brand-pinterest
title: Pinterest
vk:
icon: brand/vk
icon: brand-vk
title: VK
rss:
icon: brand/rss
icon: rss
title: RSS
flickr:
icon: brand/flickr
icon: brand-flickr
title: Flickr
bitbucket:
icon: brand/bitbucket
icon: brand-bitbucket
title: Bitbucker
tabler:
icon: brand/tabler
icon: brand-tabler
title: Tabler
months-short: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

634
demo/activity.html Normal file
View File

@@ -0,0 +1,634 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.16
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
-->
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Activity - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
<!-- 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"/>
<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-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 pr-0 pr-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-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="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 pl-2">
<div>Paweł Kuna</div>
<div class="mt-1 small text-muted">UI Designer</div>
</div>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a href="#" class="dropdown-item">Set status</a>
<a href="#" class="dropdown-item">Profile & account</a>
<a href="#" class="dropdown-item">Feedback</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Settings</a>
<a href="#" class="dropdown-item">Logout</a>
</div>
</div>
</div>
</div>
</header>
<div class="navbar-expand-md">
<div class="collapse navbar-collapse" id="navbar-menu">
<div class="navbar navbar-light">
<div class="container-xl">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="./index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
</span>
<span class="nav-link-title">
Home
</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-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="./calendar.html" >
Calendar
</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="dropright">
<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="dropright">
<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">
Activity
</h2>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-8">
<div class="card">
<div class="card-body">
<div class="divide-y-4">
<div>
<div class="row">
<div class="col-auto">
<span class="avatar">JL</span>
</div>
<div class="col">
<div class="text-truncate">
<strong>Jeffie Lewzey</strong> commented on your <strong>"I'm not a witch."</strong> post.
</div>
<div class="text-muted">yesterday</div>
</div>
<div class="col-auto align-self-center">
<div class="badge bg-primary"></div>
</div>
</div>
</div>
<div>
<div class="row">
<div class="col-auto">
<span class="avatar" style="background-image: url(./static/avatars/002m.jpg)"></span>
</div>
<div class="col">
<div class="text-truncate">
It's <strong>Mallory Hulme</strong>'s birthday. Wish him well!
</div>
<div class="text-muted">2 days ago</div>
</div>
<div class="col-auto align-self-center">
<div class="badge bg-primary"></div>
</div>
</div>
</div>
<div>
<div class="row">
<div class="col-auto">
<span class="avatar" style="background-image: url(./static/avatars/003m.jpg)"></span>
</div>
<div class="col">
<div class="text-truncate">
<strong>Dunn Slane</strong> posted <strong>"Well, what do you want?"</strong>.
</div>
<div class="text-muted">today</div>
</div>
<div class="col-auto align-self-center">
<div class="badge bg-primary"></div>
</div>
</div>
</div>
<div>
<div class="row">
<div class="col-auto">
<span class="avatar" style="background-image: url(./static/avatars/000f.jpg)"></span>
</div>
<div class="col">
<div class="text-truncate">
<strong>Emmy Levet</strong> created a new project <strong>Morning alarm clock</strong>.
</div>
<div class="text-muted">4 days ago</div>
</div>
<div class="col-auto align-self-center">
<div class="badge bg-primary"></div>
</div>
</div>
</div>
<div>
<div class="row">
<div class="col-auto">
<span class="avatar" style="background-image: url(./static/avatars/001f.jpg)"></span>
</div>
<div class="col">
<div class="text-truncate">
<strong>Maryjo Lebarree</strong> liked your photo.
</div>
<div class="text-muted">2 days ago</div>
</div>
</div>
</div>
<div>
<div class="row">
<div class="col-auto">
<span class="avatar">EP</span>
</div>
<div class="col">
<div class="text-truncate">
<strong>Egan Poetz</strong> registered new client as <strong>Trilia</strong>.
</div>
<div class="text-muted">yesterday</div>
</div>
</div>
</div>
<div>
<div class="row">
<div class="col-auto">
<span class="avatar" style="background-image: url(./static/avatars/002f.jpg)"></span>
</div>
<div class="col">
<div class="text-truncate">
<strong>Kellie Skingley</strong> closed a new deal on project <strong>Pen Pineapple Apple Pen</strong>.
</div>
<div class="text-muted">2 days ago</div>
</div>
</div>
</div>
<div>
<div class="row">
<div class="col-auto">
<span class="avatar" style="background-image: url(./static/avatars/003f.jpg)"></span>
</div>
<div class="col">
<div class="text-truncate">
<strong>Christabel Charlwood</strong> created a new project for <strong>Wikibox</strong>.
</div>
<div class="text-muted">4 days ago</div>
</div>
</div>
</div>
<div>
<div class="row">
<div class="col-auto">
<span class="avatar">HS</span>
</div>
<div class="col">
<div class="text-truncate">
<strong>Haskel Shelper</strong> change status of <strong>Tabler Icons</strong> from <strong>open</strong> to <strong>closed</strong>.
</div>
<div class="text-muted">today</div>
</div>
</div>
</div>
<div>
<div class="row">
<div class="col-auto">
<span class="avatar" style="background-image: url(./static/avatars/006m.jpg)"></span>
</div>
<div class="col">
<div class="text-truncate">
<strong>Lorry Mion</strong> liked <strong>Tabler UI Kit</strong>.
</div>
<div class="text-muted">yesterday</div>
</div>
</div>
</div>
<div>
<div class="row">
<div class="col-auto">
<span class="avatar" style="background-image: url(./static/avatars/004f.jpg)"></span>
</div>
<div class="col">
<div class="text-truncate">
<strong>Leesa Beaty</strong> posted new video.
</div>
<div class="text-muted">2 days ago</div>
</div>
</div>
</div>
<div>
<div class="row">
<div class="col-auto">
<span class="avatar" style="background-image: url(./static/avatars/007m.jpg)"></span>
</div>
<div class="col">
<div class="text-truncate">
<strong>Perren Keemar</strong> and 3 others followed you.
</div>
<div class="text-muted">2 days ago</div>
</div>
</div>
</div>
<div>
<div class="row">
<div class="col-auto">
<span class="avatar">SA</span>
</div>
<div class="col">
<div class="text-truncate">
<strong>Sunny Airey</strong> upload 3 new photos to category <strong>Inspirations</strong>.
</div>
<div class="text-muted">2 days ago</div>
</div>
</div>
</div>
<div>
<div class="row">
<div class="col-auto">
<span class="avatar" style="background-image: url(./static/avatars/009m.jpg)"></span>
</div>
<div class="col">
<div class="text-truncate">
<strong>Geoffry Flaunders</strong> made a <strong>$10</strong> donation.
</div>
<div class="text-muted">2 days ago</div>
</div>
</div>
</div>
<div>
<div class="row">
<div class="col-auto">
<span class="avatar" style="background-image: url(./static/avatars/010m.jpg)"></span>
</div>
<div class="col">
<div class="text-truncate">
<strong>Thatcher Keel</strong> created a profile.
</div>
<div class="text-muted">3 days ago</div>
</div>
</div>
</div>
<div>
<div class="row">
<div class="col-auto">
<span class="avatar" style="background-image: url(./static/avatars/005f.jpg)"></span>
</div>
<div class="col">
<div class="text-truncate">
<strong>Dyann Escala</strong> hosted the event <strong>Tabler UI Birthday</strong>.
</div>
<div class="text-muted">4 days ago</div>
</div>
</div>
</div>
<div>
<div class="row">
<div class="col-auto">
<span class="avatar" style="background-image: url(./static/avatars/006f.jpg)"></span>
</div>
<div class="col">
<div class="text-truncate">
<strong>Avivah Mugleston</strong> mentioned you on <strong>Best of 2020</strong>.
</div>
<div class="text-muted">2 days ago</div>
</div>
</div>
</div>
<div>
<div class="row">
<div class="col-auto">
<span class="avatar">AA</span>
</div>
<div class="col">
<div class="text-truncate">
<strong>Arlie Armstead</strong> sent a Review Request to <strong>Amanda Blake</strong>.
</div>
<div class="text-muted">2 days ago</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li>
<li class="list-inline-item"><a href="./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.16</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
</div>
</div>
<!-- Libs JS -->
<script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

File diff suppressed because it is too large Load Diff

63
demo/auth-lock.html Normal file
View File

@@ -0,0 +1,63 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.16
* @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>Forgot password - 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"/>
<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">
<div class="container-tight py-6">
<div class="text-center mb-4">
<a href="."><img src="./static/logo.svg" height="36" alt=""></a>
</div>
<form class="card card-md" action="." method="get" autocomplete="off">
<div class="card-body text-center">
<div class="mb-4">
<h2 class="card-title">Account Locked</h2>
<p class="text-muted">Please enter your password to unlock your account</p>
</div>
<div class="mb-4">
<span class="avatar avatar-xl mb-3" style="background-image: url(./static/avatars/000m.jpg)"></span>
<h3>Paweł Kuna</h3>
</div>
<div class="mb-4">
<input type="password" class="form-control" placeholder="Password&hellip;">
</div>
<div>
<a href="#" class="btn btn-primary w-100">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="5" y="11" width="14" height="10" rx="2" /><circle cx="12" cy="16" r="1" /><path d="M8 11v-5a4 4 0 0 1 8 0" /></svg>
Unlock
</a>
</div>
</div>
</form>
</div>
</div>
<!-- Libs JS -->
<script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

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.8
* @version 1.0.0-alpha.16
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -13,39 +13,31 @@
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Blank page - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<meta name="msapplication-TileColor" content="#206bc4"/>
<meta name="theme-color" content="#206bc4"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="mobile-web-app-capable" content="yes"/>
<meta name="HandheldFriendly" content="True"/>
<meta name="MobileOptimized" content="320"/>
<meta name="robots" content="noindex,nofollow,noarchive"/>
<link rel="icon" href="./favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
<!-- CSS files -->
<link href="./dist/css/tabler.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
body { display: none; }
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<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" alt="Tabler" class="navbar-brand-image">
</a>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-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">
<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>
@@ -58,25 +50,20 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
<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>Paweł Kuna</div>
<div class="mt-1 small text-muted">UI Designer</div>
</div>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" 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="#">
<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>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a href="#" class="dropdown-item">Set status</a>
<a href="#" class="dropdown-item">Profile & account</a>
<a href="#" class="dropdown-item">Feedback</a>
<div class="dropdown-divider"></div>
<a 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"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
Separated link</a>
<a href="#" class="dropdown-item">Settings</a>
<a href="#" class="dropdown-item">Logout</a>
</div>
</div>
</div>
@@ -97,121 +84,115 @@
</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>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-2">
<li >
<a class="dropdown-item" href="./empty.html" >
Empty page
</a>
</li>
<li >
<a class="dropdown-item active" href="./blank.html" >
Blank page
</a>
</li>
<li >
<a class="dropdown-item" href="./buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./cards-masonry.html" >
Cards Masonry
</a>
</li>
<li >
<a class="dropdown-item" href="./dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./icons.html" >
Icons
</a>
</li>
<li >
<a class="dropdown-item" href="./modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./maps.html" >
Maps
</a>
</li>
<li >
<a class="dropdown-item" href="./maps-vector.html" >
Vector maps
</a>
</li>
<li >
<a class="dropdown-item" href="./navigation.html" >
Navigation
</a>
</li>
<li >
<a class="dropdown-item" href="./charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./pagination.html" >
Pagination
</a>
</li>
<li >
<a class="dropdown-item" href="./tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./calendar.html" >
Calendar
</a>
</li>
<li >
<a class="dropdown-item" href="./carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./lists.html" >
Lists
</a>
</li>
<li class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
<a href="./sign-in.html" class="dropdown-item">Sign in</a>
<a href="./sign-up.html" class="dropdown-item">Sign up</a>
<a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
<a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
<div 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 active" 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>
</li>
<li class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
<a href="./error-404.html" class="dropdown-item">404 page</a>
<a href="./error-500.html" class="dropdown-item">500 page</a>
<a href="./error-maintenance.html" class="dropdown-item">Maintenance page</a>
<div 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="./calendar.html" >
Calendar
</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="dropright">
<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="dropright">
<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>
</li>
</ul>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="./form-elements.html" >
@@ -223,302 +204,113 @@
</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">
Extra
</span>
</a>
<ul class="dropdown-menu">
<li >
<a class="dropdown-item" href="./invoice.html" >
Invoice
</a>
</li>
<li >
<a class="dropdown-item" href="./blog.html" >
Blog cards
</a>
</li>
<li >
<a class="dropdown-item" href="./snippets.html" >
Snippets
</a>
</li>
<li >
<a class="dropdown-item" href="./search-results.html" >
Search results
</a>
</li>
<li >
<a class="dropdown-item" href="./pricing.html" >
Pricing cards
</a>
</li>
<li >
<a class="dropdown-item" href="./users.html" >
Users
</a>
</li>
<li >
<a class="dropdown-item" href="./gallery.html" >
Gallery
</a>
</li>
<li >
<a class="dropdown-item" href="./profile.html" >
Profile
</a>
</li>
<li >
<a class="dropdown-item" href="./music.html" >
Music
</a>
</li>
<li >
<a class="dropdown-item" href="./welcome.html" >
Welcome
</a>
</li>
</ul>
<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-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">
Layout
</span>
</a>
<ul class="dropdown-menu">
<li >
<a class="dropdown-item" href="./layout-horizontal.html" >
Horizontal
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-vertical.html" >
Vertical
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-vertical-right.html" >
Right vertical
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-condensed.html" >
Condensed
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-condensed-dark.html" >
Condensed dark
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-combo.html" >
Combined
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-navbar-dark.html" >
Navbar dark
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-navbar-overlap.html" >
Navbar overlap
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-dark.html" >
Dark mode
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-fluid.html" >
Fluid
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-fluid-vertical.html" >
Fluid vertical
</a>
</li>
</ul>
<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 dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<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">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -527,7 +319,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>
@@ -538,10 +330,9 @@
<div class="content">
<div class="container-xl d-flex flex-column justify-content-center">
<div class="empty">
<div class="empty-icon">
<img src="./static/illustrations/undraw_printing_invoices_5r4r.svg" height="128" class="mb-4" alt="">
<div class="empty-img"><img src="./static/illustrations/undraw_printing_invoices_5r4r.svg" height="128" alt="">
</div>
<p class="empty-title h3">No results found</p>
<p class="empty-title">No results found</p>
<p class="empty-subtitle text-muted">
Try adjusting your search or filter to find what you're looking for.
</p>
@@ -553,20 +344,27 @@
</div>
</div>
</div>
<footer class="footer footer-transparent">
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li>
<li class="list-inline-item"><a href="./faq.html" class="link-secondary">FAQ</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<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">
Copyright © 2020
<a href="." class="link-secondary">Tabler</a>.
All rights reserved.
<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.16</a>
</li>
</ul>
</div>
</div>
</div>

File diff suppressed because it is too large Load Diff

View File

@@ -1,780 +0,0 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.8
* @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>Calendar - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<meta name="msapplication-TileColor" content="#206bc4"/>
<meta name="theme-color" content="#206bc4"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="mobile-web-app-capable" content="yes"/>
<meta name="HandheldFriendly" content="True"/>
<meta name="MobileOptimized" content="320"/>
<meta name="robots" content="noindex,nofollow,noarchive"/>
<link rel="icon" href="./favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
<!-- CSS files -->
<link href="./dist/libs/fullcalendar/core/main.min.css" rel="stylesheet"/>
<link href="./dist/libs/fullcalendar/daygrid/main.min.css" rel="stylesheet"/>
<link href="./dist/libs/fullcalendar/timegrid/main.min.css" rel="stylesheet"/>
<link href="./dist/libs/fullcalendar/list/main.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<span class="navbar-toggler-icon"></span>
</button>
<a href="." class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-md-3">
<img src="./static/logo.svg" alt="Tabler" class="navbar-brand-image">
</a>
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item dropdown d-none d-md-flex mr-3">
<a href="#" class="nav-link px-0" data-toggle="dropdown" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
<span class="badge bg-red"></span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-card">
<div class="card">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam.
</div>
</div>
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
<div class="d-none d-xl-block pl-2">
<div>Paweł Kuna</div>
<div class="mt-1 small text-muted">UI Designer</div>
</div>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" 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="#">
<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>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
Separated link</a>
</div>
</div>
</div>
</div>
</header>
<div class="navbar-expand-md">
<div class="collapse navbar-collapse" id="navbar-menu">
<div class="navbar navbar-light">
<div class="container-xl">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="./index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
</span>
<span class="nav-link-title">
Home
</span>
</a>
</li>
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-toggle="dropdown" role="button" aria-expanded="false" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
</span>
<span class="nav-link-title">
User Interface
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-2">
<li >
<a class="dropdown-item" href="./empty.html" >
Empty page
</a>
</li>
<li >
<a class="dropdown-item" href="./blank.html" >
Blank page
</a>
</li>
<li >
<a class="dropdown-item" href="./buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./cards-masonry.html" >
Cards Masonry
</a>
</li>
<li >
<a class="dropdown-item" href="./dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./icons.html" >
Icons
</a>
</li>
<li >
<a class="dropdown-item" href="./modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./maps.html" >
Maps
</a>
</li>
<li >
<a class="dropdown-item" href="./maps-vector.html" >
Vector maps
</a>
</li>
<li >
<a class="dropdown-item" href="./navigation.html" >
Navigation
</a>
</li>
<li >
<a class="dropdown-item" href="./charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./pagination.html" >
Pagination
</a>
</li>
<li >
<a class="dropdown-item" href="./tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item active" href="./calendar.html" >
Calendar
</a>
</li>
<li >
<a class="dropdown-item" href="./carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./lists.html" >
Lists
</a>
</li>
<li class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
<a href="./sign-in.html" class="dropdown-item">Sign in</a>
<a href="./sign-up.html" class="dropdown-item">Sign up</a>
<a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
<a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
</div>
</li>
<li class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
<a href="./error-404.html" class="dropdown-item">404 page</a>
<a href="./error-500.html" class="dropdown-item">500 page</a>
<a href="./error-maintenance.html" class="dropdown-item">Maintenance page</a>
</div>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="./form-elements.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
</span>
<span class="nav-link-title">
Form elements
</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-extra" data-toggle="dropdown" role="button" aria-expanded="false" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
</span>
<span class="nav-link-title">
Extra
</span>
</a>
<ul class="dropdown-menu">
<li >
<a class="dropdown-item" href="./invoice.html" >
Invoice
</a>
</li>
<li >
<a class="dropdown-item" href="./blog.html" >
Blog cards
</a>
</li>
<li >
<a class="dropdown-item" href="./snippets.html" >
Snippets
</a>
</li>
<li >
<a class="dropdown-item" href="./search-results.html" >
Search results
</a>
</li>
<li >
<a class="dropdown-item" href="./pricing.html" >
Pricing cards
</a>
</li>
<li >
<a class="dropdown-item" href="./users.html" >
Users
</a>
</li>
<li >
<a class="dropdown-item" href="./gallery.html" >
Gallery
</a>
</li>
<li >
<a class="dropdown-item" href="./profile.html" >
Profile
</a>
</li>
<li >
<a class="dropdown-item" href="./music.html" >
Music
</a>
</li>
<li >
<a class="dropdown-item" href="./welcome.html" >
Welcome
</a>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-layout" data-toggle="dropdown" role="button" aria-expanded="false" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
</span>
<span class="nav-link-title">
Layout
</span>
</a>
<ul class="dropdown-menu">
<li >
<a class="dropdown-item" href="./layout-horizontal.html" >
Horizontal
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-vertical.html" >
Vertical
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-vertical-right.html" >
Right vertical
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-condensed.html" >
Condensed
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-condensed-dark.html" >
Condensed dark
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-combo.html" >
Combined
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-navbar-dark.html" >
Navbar dark
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-navbar-overlap.html" >
Navbar overlap
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-dark.html" >
Dark mode
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-fluid.html" >
Fluid
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-fluid-vertical.html" >
Fluid vertical
</a>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Docs
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
<form action="." method="get">
<div class="input-icon">
<span class="input-icon-addon">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
</span>
<input type="text" class="form-control" placeholder="Search…">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="content">
<div class="container-xl">
<!-- Page title -->
<div class="page-header">
<div class="row align-items-center">
<div class="col-auto">
<h2 class="page-title">
Calendar
</h2>
</div>
<!-- Page title actions -->
<div class="col-auto ml-auto d-print-none">
<div class="d-flex">
<a href="#" class="btn btn-primary">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><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>
Add event
</a>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<div id="calendar-main" class="card-calendar"></div>
</div>
</div>
</div>
<footer class="footer footer-transparent">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li>
<li class="list-inline-item"><a href="./faq.html" class="link-secondary">FAQ</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
</ul>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0">
Copyright © 2020
<a href="." class="link-secondary">Tabler</a>.
All rights reserved.
</div>
</div>
</div>
</footer>
</div>
</div>
<div class="modal modal-blur fade" id="modal-report" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">New report</h5>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>
</button>
</div>
<div class="modal-body">
<div class="mb-3">
<label class="form-label">Name</label>
<input type="text" class="form-control" name="example-text-input" placeholder="Your report name">
</div>
<label class="form-label">Report type</label>
<div class="form-selectgroup-boxes row mb-3">
<div class="col-lg-6">
<label class="form-selectgroup-item">
<input type="radio" name="report-type" value="1" class="form-selectgroup-input" checked>
<span class="form-selectgroup-label d-flex align-items-center p-3">
<span class="mr-3">
<span class="form-selectgroup-check"></span>
</span>
<span class="form-selectgroup-label-content">
<span class="form-selectgroup-title strong mb-1">Simple</span>
<span class="d-block text-muted">Provide only basic data needed for the report</span>
</span>
</span>
</label>
</div>
<div class="col-lg-6">
<label class="form-selectgroup-item">
<input type="radio" name="report-type" value="1" class="form-selectgroup-input">
<span class="form-selectgroup-label d-flex align-items-center p-3">
<span class="mr-3">
<span class="form-selectgroup-check"></span>
</span>
<span class="form-selectgroup-label-content">
<span class="form-selectgroup-title strong mb-1">Advanced</span>
<span class="d-block text-muted">Insert charts and additional advanced analyses to be inserted in the report</span>
</span>
</span>
</label>
</div>
</div>
<div class="row">
<div class="col-lg-8">
<div class="mb-3">
<label class="form-label">Report url</label>
<div class="input-group input-group-flat">
<span class="input-group-text">
https://tabler.io/reports/
</span>
<input type="text" class="form-control pl-0" value="report-01">
</div>
</div>
</div>
<div class="col-lg-4">
<div class="mb-3">
<label class="form-label">Visibility</label>
<select class="form-select">
<option value="1" selected>Private</option>
<option value="2">Public</option>
<option value="3">Hidden</option>
</select>
</div>
</div>
</div>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-6">
<div class="mb-3">
<label class="form-label">Client name</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-lg-6">
<div class="mb-3">
<label class="form-label">Reporting period</label>
<input type="date" class="form-control">
</div>
</div>
<div class="col-lg-12">
<div>
<label class="form-label">Additional information</label>
<textarea class="form-control" rows="3"></textarea>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<a href="#" class="btn btn-link link-secondary" data-dismiss="modal">
Cancel
</a>
<a href="#" class="btn btn-primary ml-auto" data-dismiss="modal">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" 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>
</div>
</div>
</div>
</div>
<!-- Libs JS -->
<script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="./dist/libs/fullcalendar/core/main.min.js"></script>
<script src="./dist/libs/fullcalendar/daygrid/main.min.js"></script>
<script src="./dist/libs/fullcalendar/interaction/main.min.js"></script>
<script src="./dist/libs/fullcalendar/timegrid/main.min.js"></script>
<script src="./dist/libs/fullcalendar/list/main.min.js"></script>
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar-main'),
today = new Date(),
y = today.getFullYear(),
m = today.getMonth(),
d = today.getDate();
window.FullCalendar && (new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid' ],
themeSystem: 'standard',
header: {
left: 'title',
center: '',
right: 'prev,next'
},
selectable: true,
selectHelper: true,
nowIndicator: true,
views: {
dayGridMonth: { buttonText: 'month' },
timeGridWeek: { buttonText: 'week' },
timeGridDay: { buttonText: 'day' }
},
defaultView: 'dayGridMonth',
timeFormat: 'H(:mm)',
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1),
className: 'bg-blue-lt'
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, 7, 6, 0),
allDay: false,
className: 'bg-blue-lt'
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, 14, 6, 0),
allDay: false,
className: 'bg-lime-lt'
},
{
title: 'Meeting',
start: new Date(y, m, 4, 10, 30),
allDay: false,
className: 'bg-green-lt'
},
{
title: 'Lunch',
start: new Date(y, m, 5, 12, 0),
end: new Date(y, m, 5, 14, 0),
allDay: false,
className: 'bg-red-lt'
},
{
title: 'LBD Launch',
start: new Date(y, m, 19, 12, 0),
allDay: true,
className: 'bg-azure-lt'
},
{
title: 'Birthday Party',
start: new Date(y, m, 16, 19, 0),
end: new Date(y, m, 16, 22, 30),
allDay: false,
className: 'bg-orange-lt'
}
]
})).render();
});
</script>
<script>
document.body.style.display = "block"
</script>
</body>
</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.8
* @version 1.0.0-alpha.16
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -13,39 +13,31 @@
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Cards Masonry - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<meta name="msapplication-TileColor" content="#206bc4"/>
<meta name="theme-color" content="#206bc4"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="mobile-web-app-capable" content="yes"/>
<meta name="HandheldFriendly" content="True"/>
<meta name="MobileOptimized" content="320"/>
<meta name="robots" content="noindex,nofollow,noarchive"/>
<link rel="icon" href="./favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
<!-- CSS files -->
<link href="./dist/css/tabler.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
body { display: none; }
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<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" alt="Tabler" class="navbar-brand-image">
</a>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-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">
<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>
@@ -58,25 +50,20 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
<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>Paweł Kuna</div>
<div class="mt-1 small text-muted">UI Designer</div>
</div>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" 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="#">
<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>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a href="#" class="dropdown-item">Set status</a>
<a href="#" class="dropdown-item">Profile & account</a>
<a href="#" class="dropdown-item">Feedback</a>
<div class="dropdown-divider"></div>
<a 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"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
Separated link</a>
<a href="#" class="dropdown-item">Settings</a>
<a href="#" class="dropdown-item">Logout</a>
</div>
</div>
</div>
@@ -97,121 +84,115 @@
</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>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-2">
<li >
<a class="dropdown-item" href="./empty.html" >
Empty page
</a>
</li>
<li >
<a class="dropdown-item" href="./blank.html" >
Blank page
</a>
</li>
<li >
<a class="dropdown-item" href="./buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item active" href="./cards-masonry.html" >
Cards Masonry
</a>
</li>
<li >
<a class="dropdown-item" href="./dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./icons.html" >
Icons
</a>
</li>
<li >
<a class="dropdown-item" href="./modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./maps.html" >
Maps
</a>
</li>
<li >
<a class="dropdown-item" href="./maps-vector.html" >
Vector maps
</a>
</li>
<li >
<a class="dropdown-item" href="./navigation.html" >
Navigation
</a>
</li>
<li >
<a class="dropdown-item" href="./charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./pagination.html" >
Pagination
</a>
</li>
<li >
<a class="dropdown-item" href="./tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./calendar.html" >
Calendar
</a>
</li>
<li >
<a class="dropdown-item" href="./carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./lists.html" >
Lists
</a>
</li>
<li class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
<a href="./sign-in.html" class="dropdown-item">Sign in</a>
<a href="./sign-up.html" class="dropdown-item">Sign up</a>
<a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
<a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
<div 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 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>
<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>
</li>
<li class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
<a href="./error-404.html" class="dropdown-item">404 page</a>
<a href="./error-500.html" class="dropdown-item">500 page</a>
<a href="./error-maintenance.html" class="dropdown-item">Maintenance page</a>
<div 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="./calendar.html" >
Calendar
</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="dropright">
<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="dropright">
<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>
</li>
</ul>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="./form-elements.html" >
@@ -223,302 +204,113 @@
</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">
Extra
</span>
</a>
<ul class="dropdown-menu">
<li >
<a class="dropdown-item" href="./invoice.html" >
Invoice
</a>
</li>
<li >
<a class="dropdown-item" href="./blog.html" >
Blog cards
</a>
</li>
<li >
<a class="dropdown-item" href="./snippets.html" >
Snippets
</a>
</li>
<li >
<a class="dropdown-item" href="./search-results.html" >
Search results
</a>
</li>
<li >
<a class="dropdown-item" href="./pricing.html" >
Pricing cards
</a>
</li>
<li >
<a class="dropdown-item" href="./users.html" >
Users
</a>
</li>
<li >
<a class="dropdown-item" href="./gallery.html" >
Gallery
</a>
</li>
<li >
<a class="dropdown-item" href="./profile.html" >
Profile
</a>
</li>
<li >
<a class="dropdown-item" href="./music.html" >
Music
</a>
</li>
<li >
<a class="dropdown-item" href="./welcome.html" >
Welcome
</a>
</li>
</ul>
<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-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">
Layout
</span>
</a>
<ul class="dropdown-menu">
<li >
<a class="dropdown-item" href="./layout-horizontal.html" >
Horizontal
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-vertical.html" >
Vertical
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-vertical-right.html" >
Right vertical
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-condensed.html" >
Condensed
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-condensed-dark.html" >
Condensed dark
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-combo.html" >
Combined
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-navbar-dark.html" >
Navbar dark
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-navbar-overlap.html" >
Navbar overlap
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-dark.html" >
Dark mode
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-fluid.html" >
Fluid
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-fluid-vertical.html" >
Fluid vertical
</a>
</li>
</ul>
<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 dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<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">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -527,7 +319,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>
@@ -538,16 +330,16 @@
<div class="content">
<div class="container-xl">
<!-- Page title -->
<div class="page-header">
<div class="page-header d-print-none">
<div class="row align-items-center">
<div class="col-auto">
<div class="col">
<h2 class="page-title">
Cards Masonry
</h2>
</div>
</div>
</div>
<div class="row" data-masonry='{"percentPosition": true }'>
<div class="row row-cards" data-masonry='{"percentPosition": true }'>
<div class="col-sm-6 col-lg-4">
<div class="card">
<div class="card-body">
@@ -597,12 +389,12 @@
<div class="row align-items-center">
<div class="col-auto ml-auto">
<div class="avatar-list avatar-list-stacked">
<span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
<span class="avatar">JL</span>
<span class="avatar" style="background-image: url(./static/avatars/002m.jpg)"></span>
<span class="avatar" style="background-image: url(./static/avatars/003m.jpg)"></span>
<span class="avatar" style="background-image: url(./static/avatars/000f.jpg)"></span>
<span class="avatar">+3</span>
<span class="avatar avatar-sm avatar-rounded" style="background-image: url(./static/avatars/000m.jpg)"></span>
<span class="avatar avatar-sm avatar-rounded">JL</span>
<span class="avatar avatar-sm avatar-rounded" style="background-image: url(./static/avatars/002m.jpg)"></span>
<span class="avatar avatar-sm avatar-rounded" style="background-image: url(./static/avatars/003m.jpg)"></span>
<span class="avatar avatar-sm avatar-rounded" style="background-image: url(./static/avatars/000f.jpg)"></span>
<span class="avatar avatar-sm avatar-rounded">+3</span>
</div>
</div>
</div>
@@ -678,10 +470,9 @@
<div class="col-sm-6 col-lg-4">
<div class="card">
<div class="empty">
<div class="empty-icon">
<img src="./static/illustrations/undraw_quitting_time_dm8t.svg" height="128" class="mb-4" alt="">
<div class="empty-img"><img src="./static/illustrations/undraw_quitting_time_dm8t.svg" height="128" alt="">
</div>
<p class="empty-title h3">No results found</p>
<p class="empty-title">No results found</p>
<p class="empty-subtitle text-muted">
Try adjusting your search or filter to find what you're looking for.
</p>
@@ -744,7 +535,7 @@
<div class="col-8">
<div class="mb-3">
<label class="form-label">Expiration date</label>
<div class="row row-sm">
<div class="row g-2">
<div class="col">
<select class="form-select">
<option value="1">1</option>
@@ -787,7 +578,7 @@
</div>
</div>
<div class="mt-2">
<a href="#" class="btn btn-primary btn-block">
<a href="#" class="btn btn-primary w-100">
Pay now
</a>
</div>
@@ -796,20 +587,27 @@
</div>
</div>
</div>
<footer class="footer footer-transparent">
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li>
<li class="list-inline-item"><a href="./faq.html" class="link-secondary">FAQ</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<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">
Copyright © 2020
<a href="." class="link-secondary">Tabler</a>.
All rights reserved.
<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.16</a>
</li>
</ul>
</div>
</div>
</div>
@@ -821,20 +619,6 @@
<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>
(function () {
/**
* Input mask
*/
var maskElementList = [].slice.call(document.querySelectorAll('[data-mask]'))
maskElementList.map(function (maskEl) {
return new IMask(maskEl, {
mask: maskEl.dataset.mask,
lazy: maskEl.dataset['mask-visible'] === 'true'
})
});
})();
</script>
<script>
document.body.style.display = "block"
</script>

File diff suppressed because it is too large Load Diff

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.8
* @version 1.0.0-alpha.16
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -13,39 +13,31 @@
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Carousel - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<meta name="msapplication-TileColor" content="#206bc4"/>
<meta name="theme-color" content="#206bc4"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="mobile-web-app-capable" content="yes"/>
<meta name="HandheldFriendly" content="True"/>
<meta name="MobileOptimized" content="320"/>
<meta name="robots" content="noindex,nofollow,noarchive"/>
<link rel="icon" href="./favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
<!-- CSS files -->
<link href="./dist/css/tabler.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
body { display: none; }
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<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" alt="Tabler" class="navbar-brand-image">
</a>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-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">
<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>
@@ -58,25 +50,20 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
<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>Paweł Kuna</div>
<div class="mt-1 small text-muted">UI Designer</div>
</div>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" 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="#">
<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>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a href="#" class="dropdown-item">Set status</a>
<a href="#" class="dropdown-item">Profile & account</a>
<a href="#" class="dropdown-item">Feedback</a>
<div class="dropdown-divider"></div>
<a 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"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
Separated link</a>
<a href="#" class="dropdown-item">Settings</a>
<a href="#" class="dropdown-item">Logout</a>
</div>
</div>
</div>
@@ -97,121 +84,115 @@
</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>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-2">
<li >
<a class="dropdown-item" href="./empty.html" >
Empty page
</a>
</li>
<li >
<a class="dropdown-item" href="./blank.html" >
Blank page
</a>
</li>
<li >
<a class="dropdown-item" href="./buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./cards-masonry.html" >
Cards Masonry
</a>
</li>
<li >
<a class="dropdown-item" href="./dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./icons.html" >
Icons
</a>
</li>
<li >
<a class="dropdown-item" href="./modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./maps.html" >
Maps
</a>
</li>
<li >
<a class="dropdown-item" href="./maps-vector.html" >
Vector maps
</a>
</li>
<li >
<a class="dropdown-item" href="./navigation.html" >
Navigation
</a>
</li>
<li >
<a class="dropdown-item" href="./charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./pagination.html" >
Pagination
</a>
</li>
<li >
<a class="dropdown-item" href="./tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./calendar.html" >
Calendar
</a>
</li>
<li >
<a class="dropdown-item active" href="./carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./lists.html" >
Lists
</a>
</li>
<li class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
<a href="./sign-in.html" class="dropdown-item">Sign in</a>
<a href="./sign-up.html" class="dropdown-item">Sign up</a>
<a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
<a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
<div 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>
</li>
<li class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
<a href="./error-404.html" class="dropdown-item">404 page</a>
<a href="./error-500.html" class="dropdown-item">500 page</a>
<a href="./error-maintenance.html" class="dropdown-item">Maintenance page</a>
<div 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="./calendar.html" >
Calendar
</a>
<a class="dropdown-item active" 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="dropright">
<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="dropright">
<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>
</li>
</ul>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="./form-elements.html" >
@@ -223,302 +204,113 @@
</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">
Extra
</span>
</a>
<ul class="dropdown-menu">
<li >
<a class="dropdown-item" href="./invoice.html" >
Invoice
</a>
</li>
<li >
<a class="dropdown-item" href="./blog.html" >
Blog cards
</a>
</li>
<li >
<a class="dropdown-item" href="./snippets.html" >
Snippets
</a>
</li>
<li >
<a class="dropdown-item" href="./search-results.html" >
Search results
</a>
</li>
<li >
<a class="dropdown-item" href="./pricing.html" >
Pricing cards
</a>
</li>
<li >
<a class="dropdown-item" href="./users.html" >
Users
</a>
</li>
<li >
<a class="dropdown-item" href="./gallery.html" >
Gallery
</a>
</li>
<li >
<a class="dropdown-item" href="./profile.html" >
Profile
</a>
</li>
<li >
<a class="dropdown-item" href="./music.html" >
Music
</a>
</li>
<li >
<a class="dropdown-item" href="./welcome.html" >
Welcome
</a>
</li>
</ul>
<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-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">
Layout
</span>
</a>
<ul class="dropdown-menu">
<li >
<a class="dropdown-item" href="./layout-horizontal.html" >
Horizontal
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-vertical.html" >
Vertical
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-vertical-right.html" >
Right vertical
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-condensed.html" >
Condensed
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-condensed-dark.html" >
Condensed dark
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-combo.html" >
Combined
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-navbar-dark.html" >
Navbar dark
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-navbar-overlap.html" >
Navbar overlap
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-dark.html" >
Dark mode
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-fluid.html" >
Fluid
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-fluid-vertical.html" >
Fluid vertical
</a>
</li>
</ul>
<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 dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<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">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -527,7 +319,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>
@@ -538,9 +330,9 @@
<div class="content">
<div class="container-xl">
<!-- Page title -->
<div class="page-header">
<div class="page-header d-print-none">
<div class="row align-items-center">
<div class="col-auto">
<div class="col">
<h2 class="page-title">
Carousel
</h2>
@@ -554,22 +346,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>
@@ -582,29 +374,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>
@@ -617,29 +409,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>
@@ -653,10 +445,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>
@@ -664,7 +456,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>
@@ -672,7 +464,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>
@@ -680,7 +472,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>
@@ -688,7 +480,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>
@@ -696,11 +488,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>
@@ -710,20 +502,27 @@
</div>
</div>
</div>
<footer class="footer footer-transparent">
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li>
<li class="list-inline-item"><a href="./faq.html" class="link-secondary">FAQ</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<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">
Copyright © 2020
<a href="." class="link-secondary">Tabler</a>.
All rights reserved.
<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.16</a>
</li>
</ul>
</div>
</div>
</div>

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

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.8
* @version 1.0.0-alpha.16
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -13,39 +13,31 @@
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Charts - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<meta name="msapplication-TileColor" content="#206bc4"/>
<meta name="theme-color" content="#206bc4"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="mobile-web-app-capable" content="yes"/>
<meta name="HandheldFriendly" content="True"/>
<meta name="MobileOptimized" content="320"/>
<meta name="robots" content="noindex,nofollow,noarchive"/>
<link rel="icon" href="./favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
<!-- CSS files -->
<link href="./dist/css/tabler.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
body { display: none; }
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<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" alt="Tabler" class="navbar-brand-image">
</a>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-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">
<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>
@@ -58,25 +50,20 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
<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>Paweł Kuna</div>
<div class="mt-1 small text-muted">UI Designer</div>
</div>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" 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="#">
<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>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a href="#" class="dropdown-item">Set status</a>
<a href="#" class="dropdown-item">Profile & account</a>
<a href="#" class="dropdown-item">Feedback</a>
<div class="dropdown-divider"></div>
<a 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"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
Separated link</a>
<a href="#" class="dropdown-item">Settings</a>
<a href="#" class="dropdown-item">Logout</a>
</div>
</div>
</div>
@@ -97,121 +84,115 @@
</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>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-2">
<li >
<a class="dropdown-item" href="./empty.html" >
Empty page
</a>
</li>
<li >
<a class="dropdown-item" href="./blank.html" >
Blank page
</a>
</li>
<li >
<a class="dropdown-item" href="./buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./cards-masonry.html" >
Cards Masonry
</a>
</li>
<li >
<a class="dropdown-item" href="./dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./icons.html" >
Icons
</a>
</li>
<li >
<a class="dropdown-item" href="./modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./maps.html" >
Maps
</a>
</li>
<li >
<a class="dropdown-item" href="./maps-vector.html" >
Vector maps
</a>
</li>
<li >
<a class="dropdown-item" href="./navigation.html" >
Navigation
</a>
</li>
<li >
<a class="dropdown-item active" href="./charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./pagination.html" >
Pagination
</a>
</li>
<li >
<a class="dropdown-item" href="./tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./calendar.html" >
Calendar
</a>
</li>
<li >
<a class="dropdown-item" href="./carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./lists.html" >
Lists
</a>
</li>
<li class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
<a href="./sign-in.html" class="dropdown-item">Sign in</a>
<a href="./sign-up.html" class="dropdown-item">Sign up</a>
<a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
<a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
<div 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>
</li>
<li class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
<a href="./error-404.html" class="dropdown-item">404 page</a>
<a href="./error-500.html" class="dropdown-item">500 page</a>
<a href="./error-maintenance.html" class="dropdown-item">Maintenance page</a>
<div class="dropdown-menu-column">
<a class="dropdown-item active" 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="./calendar.html" >
Calendar
</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="dropright">
<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="dropright">
<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>
</li>
</ul>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="./form-elements.html" >
@@ -223,302 +204,113 @@
</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">
Extra
</span>
</a>
<ul class="dropdown-menu">
<li >
<a class="dropdown-item" href="./invoice.html" >
Invoice
</a>
</li>
<li >
<a class="dropdown-item" href="./blog.html" >
Blog cards
</a>
</li>
<li >
<a class="dropdown-item" href="./snippets.html" >
Snippets
</a>
</li>
<li >
<a class="dropdown-item" href="./search-results.html" >
Search results
</a>
</li>
<li >
<a class="dropdown-item" href="./pricing.html" >
Pricing cards
</a>
</li>
<li >
<a class="dropdown-item" href="./users.html" >
Users
</a>
</li>
<li >
<a class="dropdown-item" href="./gallery.html" >
Gallery
</a>
</li>
<li >
<a class="dropdown-item" href="./profile.html" >
Profile
</a>
</li>
<li >
<a class="dropdown-item" href="./music.html" >
Music
</a>
</li>
<li >
<a class="dropdown-item" href="./welcome.html" >
Welcome
</a>
</li>
</ul>
<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-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">
Layout
</span>
</a>
<ul class="dropdown-menu">
<li >
<a class="dropdown-item" href="./layout-horizontal.html" >
Horizontal
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-vertical.html" >
Vertical
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-vertical-right.html" >
Right vertical
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-condensed.html" >
Condensed
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-condensed-dark.html" >
Condensed dark
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-combo.html" >
Combined
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-navbar-dark.html" >
Navbar dark
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-navbar-overlap.html" >
Navbar overlap
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-dark.html" >
Dark mode
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-fluid.html" >
Fluid
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-fluid-vertical.html" >
Fluid vertical
</a>
</li>
</ul>
<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 dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<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">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -527,7 +319,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>
@@ -538,39 +330,41 @@
<div class="content">
<div class="container-xl">
<!-- Page title -->
<div class="page-header">
<div class="page-header d-print-none">
<div class="row align-items-center">
<div class="col-auto">
<div class="col">
<h2 class="page-title">
Charts
</h2>
</div>
</div>
</div>
<div class="row">
<div class="card">
<div class="card-body">
<div class="d-flex">
<h3 class="card-title">Social referrals</h3>
<div class="ml-auto">
<div class="dropdown">
<a class="dropdown-toggle text-muted" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Last 7 days
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item active" href="#">Last 7 days</a>
<a class="dropdown-item" href="#">Last 30 days</a>
<a class="dropdown-item" href="#">Last 3 months</a>
<div class="row row-cards">
<div class="col-12">
<div class="card">
<div class="card-body">
<div class="d-flex">
<h3 class="card-title">Social referrals</h3>
<div class="ml-auto">
<div class="dropdown">
<a class="dropdown-toggle text-muted" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Last 7 days</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item active" href="#">Last 7 days</a>
<a class="dropdown-item" href="#">Last 30 days</a>
<a class="dropdown-item" href="#">Last 3 months</a>
</div>
</div>
</div>
</div>
<div id="chart-social-referrals"></div>
</div>
<div id="chart-social-referrals"></div>
</div>
</div>
<div class="card">
<div class="card-body">
<div id="chart-tasks-overview"></div>
<div class="col-12">
<div class="card">
<div class="card-body">
<div id="chart-tasks-overview"></div>
</div>
</div>
</div>
<div class="col-lg-6 col-xl-4">
@@ -729,20 +523,27 @@
</div>
</div>
</div>
<footer class="footer footer-transparent">
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li>
<li class="list-inline-item"><a href="./faq.html" class="link-secondary">FAQ</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<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">
Copyright © 2020
<a href="." class="link-secondary">Tabler</a>.
All rights reserved.
<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.16</a>
</li>
</ul>
</div>
</div>
</div>

678
demo/colors.html Normal file
View File

@@ -0,0 +1,678 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.16
* @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"/>
<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-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 pr-0 pr-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-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="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 pl-2">
<div>Paweł Kuna</div>
<div class="mt-1 small text-muted">UI Designer</div>
</div>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a href="#" class="dropdown-item">Set status</a>
<a href="#" class="dropdown-item">Profile & account</a>
<a href="#" class="dropdown-item">Feedback</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Settings</a>
<a href="#" class="dropdown-item">Logout</a>
</div>
</div>
</div>
</div>
</header>
<div class="navbar-expand-md">
<div class="collapse navbar-collapse" id="navbar-menu">
<div class="navbar navbar-light">
<div class="container-xl">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="./index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
</span>
<span class="nav-link-title">
Home
</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-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="./calendar.html" >
Calendar
</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="dropright">
<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="dropright">
<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 ml-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li>
<li class="list-inline-item"><a href="./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.16</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
</div>
</div>
<!-- Libs JS -->
<script src="./dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

File diff suppressed because it is too large Load Diff

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

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

File diff suppressed because one or more lines are too long

View File

@@ -1,8 +0,0 @@
/*!
* Tabler v1.0.0-alpha.8 (https://tabler.io)
* @version 1.0.0-alpha.8
* @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)
*/

View File

@@ -1,8 +0,0 @@
/*!
* Tabler v1.0.0-alpha.8 (https://tabler.io)
* @version 1.0.0-alpha.8
* @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)
*/

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@@ -1,6 +1,6 @@
/*!
* Tabler v1.0.0-alpha.8 (https://tabler.io)
* @version 1.0.0-alpha.8
* Tabler v1.0.0-alpha.16 (https://tabler.io)
* @version 1.0.0-alpha.16
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -15,7 +15,7 @@
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: 1px solid rgba(95, 102, 110, 0.2);
border: 1px solid #e6e8e9;
border-radius: 3px; }
.flag-country-ad {
@@ -786,14 +786,22 @@
.flag-country-un {
background-image: url("../img/flags/un.svg"); }
.flag-md {
.flag-xs {
width: 1.6666625rem;
height: 1.25rem; }
.flag-sm {
width: 2.66666rem;
height: 2rem; }
.flag-md {
width: 4.9999875rem;
height: 3.75rem; }
.flag-lg {
width: 3.99999rem;
height: 3rem; }
width: 6.66665rem;
height: 5rem; }
.flag-xl {
width: 5.33332rem;
height: 4rem; }
width: 9.33331rem;
height: 7rem; }

File diff suppressed because one or more lines are too long

View File

@@ -1,6 +1,6 @@
/*!
* Tabler v1.0.0-alpha.8 (https://tabler.io)
* @version 1.0.0-alpha.8
* Tabler v1.0.0-alpha.16 (https://tabler.io)
* @version 1.0.0-alpha.16
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -370,14 +370,22 @@
.payment-provider-worldpay-dark {
background-image: url("../img/payments/worldpay-dark.svg"); }
.payment-xs {
width: 2.083325rem;
height: 1.25rem; }
.payment-sm {
width: 2.49999rem;
height: 1.5rem; }
width: 3.33332rem;
height: 2rem; }
.payment-md {
width: 6.249975rem;
height: 3.75rem; }
.payment-lg {
width: 4.99998rem;
height: 3rem; }
width: 8.3333rem;
height: 5rem; }
.payment-xl {
width: 6.66664rem;
height: 4rem; }
width: 11.66662rem;
height: 7rem; }

File diff suppressed because one or more lines are too long

322
demo/dist/css/tabler-vendors.css vendored Normal file
View File

@@ -0,0 +1,322 @@
/*!
* Tabler v1.0.0-alpha.16 (https://tabler.io)
* @version 1.0.0-alpha.16
* @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)
*/
.selectize-control {
padding: 0;
border: 0;
height: auto; }
.selectize-control.multi .selectize-input.has-items {
padding-left: 6px; }
.selectize-control.multi .selectize-input > div {
font-size: 0.75rem;
margin: 0 6px 2px 0;
padding: 2px 8px;
border-radius: 3px;
background-color: rgba(135, 142, 151, 0.1);
color: inherit; }
.selectize-control .remove {
font-size: inherit !important;
font-weight: normal !important;
border-left: 0 !important;
color: #656d77 !important; }
.selectize-control.is-valid {
padding: 0; }
.selectize-control.is-valid .selectize-input {
border-color: #2fb344; }
.selectize-control.is-valid .selectize-input.focus {
box-shadow: 0 0 0 0.25rem rgba(47, 179, 68, 0.25); }
.selectize-control.is-valid .selectize-dropdown {
background: none;
background-color: inherit;
border-color: #e6e8e9;
padding-right: 0; }
.selectize-control.is-invalid {
padding: 0; }
.selectize-control.is-invalid .selectize-input {
border-color: #d63939; }
.selectize-control.is-invalid .selectize-input.focus {
box-shadow: 0 0 0 0.25rem rgba(214, 57, 57, 0.25); }
.selectize-control.is-invalid .selectize-dropdown {
background: none;
background-color: inherit;
border-color: #e6e8e9;
padding-right: 0; }
.selectize-input {
display: flex !important;
border: 1px solid #e6e8e9;
padding: 0.4375rem 0.75rem;
font-size: 0.875rem;
box-shadow: none;
line-height: 1.4285714;
background-color: inherit !important;
color: inherit !important;
flex-wrap: wrap; }
.selectize-input.full {
background-color: inherit; }
.selectize-input.dropdown-active {
border-radius: 3px; }
.selectize-control.single .selectize-input {
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dadcde' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") no-repeat right 0.75rem center/16px 12px; }
.selectize-input.focus {
border-color: #90b5e2;
box-shadow: 0 0 0 0.25rem rgba(32, 107, 196, 0.25); }
.selectize-input:after {
content: none !important; }
.selectize-dropdown {
height: auto;
background: #ffffff;
padding: 0.4375rem 0;
margin-top: 1px; }
.selectize-dropdown .option,
.selectize-dropdown .option-header {
padding: 0.25rem 0.75rem; }
.selectize-dropdown .active {
background: rgba(101, 109, 119, 0.06);
color: inherit;
cursor: pointer; }
.jqvmap-zoomin,
.jqvmap-zoomout {
height: 1.5rem;
width: 1.5rem;
left: .5rem;
border: 1px solid #e6e8e9;
background: #ffffff;
color: #232e3c;
display: flex;
align-items: center;
justify-content: center;
line-height: 1; }
.jqvmap-zoomin {
top: .5rem; }
.jqvmap-zoomout {
top: 2.5rem; }
.jqvmap-label {
font-family: inherit;
font-size: 0.625rem;
line-height: 1;
padding: .25rem;
background: #232e3c; }
.apexcharts-title-text {
font-weight: 600 !important; }
.apexcharts-tooltip-title {
font-weight: 600 !important;
padding-bottom: .25rem !important; }
.apexcharts-gridline,
.apexcharts-ycrosshairs,
.apexcharts-xaxis-tick {
stroke: #e6e8e9 !important; }
.apexcharts-tooltip {
line-height: 1;
color: #ffffff;
background: #232e3c !important;
border: 0 !important;
border-radius: 3px !important; }
.apexcharts-tooltip-title {
margin: 0 !important;
background: transparent !important;
border: 0 !important; }
.apexcharts-tooltip-series-group {
padding: 0 8px !important; }
.apexcharts-tooltip-marker {
width: .5rem;
height: .5rem; }
.apexcharts-gridline,
.apexcharts-ycrosshairs,
.apexcharts-xaxis-tick {
stroke: #e7eaef; }
.apexcharts-yaxis-label,
.apexcharts-xaxis-label {
fill: #656d77; }
.fc-unthemed .fc-content,
.fc-unthemed .fc-divider,
.fc-unthemed .fc-list-heading td,
.fc-unthemed .fc-list-view,
.fc-unthemed .fc-popover,
.fc-unthemed .fc-row,
.fc-unthemed tbody,
.fc-unthemed td,
.fc-unthemed th,
.fc-unthemed thead {
border-color: #e6e8e9; }
.fc-unthemed .fc-toolbar h2 {
font-size: 1.125rem;
margin: 0; }
.fc-unthemed .fc-widget-header {
border: 0; }
.fc-unthemed .fc-day-header {
padding-bottom: .25rem;
font-weight: 600; }
.fc-unthemed.card-calendar .fc-day-grid-container {
border-bottom: 0;
border-left: 0; }
.fc-unthemed .fc-time {
font-weight: 600; }
.fc-unthemed .fc-event {
border-color: rgba(0, 0, 0, 0.05);
color: #206bc4;
background-color: #e9f0f9;
padding: 0 .25rem; }
.flatpickr-input.flatpickr-input {
background: #ffffff; }
.flatpickr-input.flatpickr-input.active {
border-color: #90b5e2;
box-shadow: 0 0 0 0.25rem rgba(32, 107, 196, 0.25); }
.flatpickr-calendar {
background: #ffffff;
border: 1px solid rgba(101, 109, 119, 0.24);
border-radius: 3px;
padding: .5rem;
font-size: inherit;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin-top: -1px; }
.flatpickr-calendar:before, .flatpickr-calendar:after {
content: none; }
.flatpickr-calendar .flatpickr-innerContainer,
.flatpickr-calendar .flatpickr-rContainer,
.flatpickr-calendar .dayContainer,
.flatpickr-calendar .flatpickr-days {
width: 100%; }
.flatpickr-calendar .dayContainer,
.flatpickr-calendar .flatpickr-day {
max-width: 100%;
min-width: 0; }
.flatpickr-calendar.inline {
width: 100%;
box-shadow: none;
margin: 0; }
.flatpickr-day {
color: inherit;
border-radius: 3px;
display: flex;
align-items: center;
line-height: 1; }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.notAllowed, .flatpickr-day.notAllowed.prevMonthDay, .flatpickr-day.notAllowed.nextMonthDay {
color: inherit;
opacity: .2; }
.flatpickr-day.today {
border-color: #e6e8e9; }
.flatpickr-day.selected {
background-color: #206bc4; }
span.flatpickr-weekday {
font-size: 0.625rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
line-height: 1.6;
color: #656d77; }
.flatpickr-months {
margin-bottom: .5rem; }
.flatpickr-months .flatpickr-month {
color: currentColor;
fill: currentColor; }
.flatpickr-months .flatpickr-current-month {
font-weight: 400; }
.flatpickr-months .flatpickr-monthDropdown-months {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-weight: inherit; }
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
position: static;
color: #656d77; }
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
color: #232e3c; }
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
display: block;
fill: currentColor !important; }
.flatpickr-months .numInputWrapper .cur-year {
font-weight: inherit; }
.flatpickr-months .numInputWrapper .arrowUp,
.flatpickr-months .numInputWrapper .arrowDown {
display: none; }
.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange,
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
background: rgba(101, 109, 119, 0.06);
border-color: transparent; }
.noUi-target {
border: 0;
box-shadow: none;
background: none;
border-radius: 0;
color: #206bc4; }
.noUi-horizontal {
height: 1.25rem;
padding: .5rem 0; }
.noUi-base {
background: rgba(169, 174, 182, 0.24);
border-radius: 1rem; }
.noUi-handle {
width: 1rem;
height: 1rem;
border: 2px solid #ffffff;
box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.1);
border-radius: 1rem;
background: currentColor;
outline: 0; }
.noUi-handle:before, .noUi-handle:after {
content: none; }
.noUi-horizontal .noUi-handle {
width: 1rem;
height: 1rem;
top: -0.5rem;
right: -0.5rem;
margin: 1px 1px 0 0; }
.noUi-handle.noUi-active, .noUi-handle:focus {
box-shadow: 0 0 0 1px #f4f6fa, 0 0 0 0.25rem rgba(32, 107, 196, 0.25); }
.noUi-connect {
background: currentColor; }

9
demo/dist/css/tabler-vendors.min.css vendored Normal file

File diff suppressed because one or more lines are too long

6766
demo/dist/css/tabler.css vendored

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

8076
demo/dist/js/tabler.js vendored

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

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

File diff suppressed because one or more lines are too long

View File

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

View File

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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

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}

File diff suppressed because one or more lines are too long

View File

@@ -1,7 +0,0 @@
// Peity jQuery plugin version 3.3.0
// (c) 2018 Ben Pickles
//
// http://benpickles.github.io/peity
//
// Released under MIT license.
!function(t,i,e,n){var a=t.fn.peity=function(i,e){return l&&this.each(function(){var n=t(this),h=n.data("_peity");h?(i&&(h.type=i),t.extend(h.opts,e)):(h=new r(n,i,t.extend({},a.defaults[i],n.data("peity"),e)),n.change(function(){h.draw()}).data("_peity",h)),h.draw()}),this},r=function(t,i,e){this.$el=t,this.type=i,this.opts=e},h=r.prototype,s=h.svgElement=function(e,n){return t(i.createElementNS("http://www.w3.org/2000/svg",e)).attr(n)},l="createElementNS"in i&&s("svg",{})[0].createSVGRect;h.draw=function(){var t=this.opts;a.graphers[this.type].call(this,t),t.after&&t.after.call(this,t)},h.fill=function(){var i=this.opts.fill;return t.isFunction(i)?i:function(t,e){return i[e%i.length]}},h.prepare=function(t,i){return this.$svg||this.$el.hide().after(this.$svg=s("svg",{class:"peity"})),this.$svg.empty().data("_peity",this).attr({height:i,width:t})},h.values=function(){return t.map(this.$el.text().split(this.opts.delimiter),function(t){return parseFloat(t)})},a.defaults={},a.graphers={},a.register=function(t,i,e){this.defaults[t]=i,this.graphers[t]=e},a.register("pie",{fill:["#ff9900","#fff4dd","#ffc66e"],radius:8},function(i){if(!i.delimiter){var n=this.$el.text().match(/[^0-9\.]/);i.delimiter=n?n[0]:","}var a=t.map(this.values(),function(t){return t>0?t:0});if("/"==i.delimiter){var r=a[0],h=a[1];a=[r,e.max(0,h-r)]}for(var l=0,p=a.length,o=0;l<p;l++)o+=a[l];o||(p=2,o=1,a=[0,1]);var f=2*i.radius,c=this.prepare(i.width||f,i.height||f),u=c.width()/2,d=c.height()/2,g=e.min(u,d),v=i.innerRadius;"donut"!=this.type||v||(v=.5*g);var m=e.PI,y=this.fill(),w=this.scale=function(t,i){var n=t/o*m*2-m/2;return[i*e.cos(n)+u,i*e.sin(n)+d]},x=0;for(l=0;l<p;l++){var k,$=a[l],j=$/o;if(0!=j){if(1==j)if(v){var A=u-.01,E=d-g,F=d-v;k=s("path",{d:["M",u,E,"A",g,g,0,1,1,A,E,"L",A,F,"A",v,v,0,1,0,u,F].join(" "),"data-value":$})}else k=s("circle",{cx:u,cy:d,"data-value":$,r:g});else{var M=x+$,S=["M"].concat(w(x,g),"A",g,g,0,j>.5?1:0,1,w(M,g),"L");v?S=S.concat(w(M,v),"A",v,v,0,j>.5?1:0,0,w(x,v)):S.push(u,d),x+=$,k=s("path",{d:S.join(" "),"data-value":$})}k.attr("fill",y.call(this,$,l,a)),c.append(k)}}}),a.register("donut",t.extend(!0,{},a.defaults.pie),function(t){a.graphers.pie.call(this,t)}),a.register("line",{delimiter:",",fill:"#c6d9fd",height:16,min:0,stroke:"#4d89f9",strokeWidth:1,width:32},function(t){var i=this.values();1==i.length&&i.push(i[0]);for(var a=e.max.apply(e,t.max==n?i:i.concat(t.max)),r=e.min.apply(e,t.min==n?i:i.concat(t.min)),h=this.prepare(t.width,t.height),l=t.strokeWidth,p=h.width(),o=h.height()-l,f=a-r,c=this.x=function(t){return t*(p/(i.length-1))},u=this.y=function(t){var i=o;return f&&(i-=(t-r)/f*o),i+l/2},d=u(e.max(r,0)),g=[0,d],v=0;v<i.length;v++)g.push(c(v),u(i[v]));g.push(p,d),t.fill&&h.append(s("polygon",{fill:t.fill,points:g.join(" ")})),l&&h.append(s("polyline",{fill:"none",points:g.slice(2,g.length-2).join(" "),stroke:t.stroke,"stroke-width":l,"stroke-linecap":"square"}))}),a.register("bar",{delimiter:",",fill:["#4D89F9"],height:16,min:0,padding:.1,width:32},function(t){for(var i=this.values(),a=e.max.apply(e,t.max==n?i:i.concat(t.max)),r=e.min.apply(e,t.min==n?i:i.concat(t.min)),h=this.prepare(t.width,t.height),l=h.width(),p=h.height(),o=a-r,f=t.padding,c=this.fill(),u=this.x=function(t){return t*l/i.length},d=this.y=function(t){return p-(o?(t-r)/o*p:1)},g=0;g<i.length;g++){var v,m=u(g+f),y=u(g+1-f)-m,w=i[g],x=d(w),k=x,$=x;o?w<0?k=d(e.min(a,0)):$=d(e.max(r,0)):v=1,0==(v=$-k)&&(v=1,a>0&&o&&k--),h.append(s("rect",{"data-value":w,fill:c.call(this,w,g,i),x:m,y:k,width:y,height:v}))}})}(jQuery,document,Math);

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

692
demo/docs/icons.html Normal file
View File

@@ -0,0 +1,692 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.16
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
-->
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Icons - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
<!-- 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"/>
<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-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 pr-0 pr-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-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="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 pl-2">
<div>Paweł Kuna</div>
<div class="mt-1 small text-muted">UI Designer</div>
</div>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a href="#" class="dropdown-item">Set status</a>
<a href="#" class="dropdown-item">Profile & account</a>
<a href="#" class="dropdown-item">Feedback</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Settings</a>
<a href="#" class="dropdown-item">Logout</a>
</div>
</div>
</div>
</div>
</header>
<div class="navbar-expand-md">
<div class="collapse navbar-collapse" id="navbar-menu">
<div class="navbar navbar-light">
<div class="container-xl">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="../index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
</span>
<span class="nav-link-title">
Home
</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-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="../calendar.html" >
Calendar
</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="dropright">
<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="dropright">
<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 active">
<a class="nav-link" href="../docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Documentation
</span>
</a>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
<form action="." method="get">
<div class="input-icon">
<span class="input-icon-addon">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
</span>
<input type="text" class="form-control" placeholder="Search…" 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">
Documentation
</h2>
</div>
</div>
</div>
<div class="row">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-vertical">
<li class="nav-item">
<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 nav-pills collapse show" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
</a>
</li>
<li class="nav-item">
<a href="../docs/usage.html" class="nav-link">
Usage
</a>
</li>
<li class="nav-item">
<a href="../docs/colors.html" class="nav-link">
Colors
</a>
</li>
<li class="nav-item">
<a href="../docs/typography.html" class="nav-link">
Typography
</a>
</li>
<li class="nav-item">
<a href="../docs/icons.html" class="nav-link active">
Icons
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-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 nav-pills collapse" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
</a>
</li>
<li class="nav-item">
<a href="../docs/avatars.html" class="nav-link">
Avatars
</a>
</li>
<li class="nav-item">
<a href="../docs/badges.html" class="nav-link">
Badges
</a>
</li>
<li class="nav-item">
<a href="../docs/breadcrumb.html" class="nav-link">
Breadcrumb
</a>
</li>
<li class="nav-item">
<a href="../docs/buttons.html" class="nav-link">
Buttons
</a>
</li>
<li class="nav-item">
<a href="../docs/cards.html" class="nav-link">
Cards
</a>
</li>
<li class="nav-item">
<a href="../docs/carousel.html" class="nav-link">
Carousel
</a>
</li>
<li class="nav-item">
<a href="../docs/dropdowns.html" class="nav-link">
Dropdowns
</a>
</li>
<li class="nav-item">
<a href="../docs/divider.html" class="nav-link">
Divider
</a>
</li>
<li class="nav-item">
<a href="../docs/empty.html" class="nav-link">
Empty states
</a>
</li>
<li class="nav-item">
<a href="../docs/form-elements.html" class="nav-link">
Form elements
</a>
</li>
<li class="nav-item">
<a href="../docs/form-helpers.html" class="nav-link">
Form helpers
</a>
</li>
<li class="nav-item">
<a href="../docs/modals.html" class="nav-link">
Modals
</a>
</li>
<li class="nav-item">
<a href="../docs/progress.html" class="nav-link">
Progress
</a>
</li>
<li class="nav-item">
<a href="../docs/payments.html" class="nav-link">
Payments
</a>
</li>
<li class="nav-item">
<a href="../docs/range-slider.html" class="nav-link">
Range slider
</a>
</li>
<li class="nav-item">
<a href="../docs/ribbons.html" class="nav-link">
Ribbons
</a>
</li>
<li class="nav-item">
<a href="../docs/skeleton.html" class="nav-link">
Skeleton
</a>
</li>
<li class="nav-item">
<a href="../docs/spinners.html" class="nav-link">
Spinners
</a>
</li>
<li class="nav-item">
<a href="../docs/steps.html" class="nav-link">
Steps
</a>
</li>
<li class="nav-item">
<a href="../docs/switch-icon.html" class="nav-link">
Switch icon
</a>
</li>
<li class="nav-item">
<a href="../docs/tables.html" class="nav-link">
Tables
</a>
</li>
<li class="nav-item">
<a href="../docs/tabs.html" class="nav-link">
Tabs
</a>
</li>
<li class="nav-item">
<a href="../docs/timelines.html" class="nav-link">
Timelines
</a>
</li>
<li class="nav-item">
<a href="../docs/toasts.html" class="nav-link">
Toasts
</a>
</li>
<li class="nav-item">
<a href="../docs/tooltips.html" class="nav-link">
Tooltips
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-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 nav-pills collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-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 nav-pills collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
</a>
</li>
<li class="nav-item">
<a href="../docs/input-mask.html" class="nav-link">
Form input mask
</a>
</li>
<li class="nav-item">
<a href="../docs/flags.html" class="nav-link">
Flags
</a>
</li>
<li class="nav-item">
<a href="../docs/charts.html" class="nav-link">
Charts
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
</span>
Changelog
<span class="badge bg-blue-lt ml-auto">1.0.0-alpha.16</span>
</a>
</li>
</ul>
</div>
<div class="col-lg-9">
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<div>
<div class="d-flex mb-4">
<h1 class="mt-0">Icons</h1>
</div>
</div>
<h2 id="base-icon">Base icon</h2>
<div class="example no_toc_section">
<div class="example-content">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><line x1="10" y1="10" x2="10.01" y2="10" /><line x1="14" y1="10" x2="14.01" y2="10" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><circle cx="5" cy="18" r="3" /><circle cx="19" cy="18" r="3" /><polyline points="12 19 12 15 9 12 14 8 16 11 19 11" /><circle cx="17" cy="5" r="1" /></svg>
</div>
</div>
<div class="example-code">
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span></code></pre>
</figure>
</div>
<h2 id="filled-icons">Filled icons</h2>
<div class="example no_toc_section">
<div class="example-content">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><circle cx="12" cy="12" r="9" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><rect x="4" y="4" width="16" height="16" rx="2" /></svg>
</div>
</div>
<div class="example-code">
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- SVG icon code with class="icon-filled" --&gt;</span>
<span class="c">&lt;!-- SVG icon code with class="icon-filled" --&gt;</span>
<span class="c">&lt;!-- SVG icon code with class="icon-filled" --&gt;</span>
<span class="c">&lt;!-- SVG icon code with class="icon-filled" --&gt;</span></code></pre>
</figure>
</div>
<h2 id="icon-colors">Icon colors</h2>
<div class="example no_toc_section">
<div class="example-content">
<span class="text-red">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
</span>
<span class="text-yellow">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
</span>
<span class="text-blue">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><circle cx="12" cy="12" r="9" /></svg>
</span>
<span class="text-green">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><rect x="4" y="4" width="16" height="16" rx="2" /></svg>
</span>
</div>
</div>
<div class="example-code">
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-red"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code with class="icon-filled" --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-yellow"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code with class="icon-filled" --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-blue"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"text-green"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/span&gt;</span></code></pre>
</figure>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="../docs/index.html" class="link-secondary">Documentation</a></li>
<li class="list-inline-item"><a href="../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.16</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
</div>
</div>
<!-- Libs JS -->
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

1054
demo/docs/skeleton.html Normal file

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

794
demo/docs/switch-icon.html Normal file
View File

@@ -0,0 +1,794 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.16
* @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>Switch icon - 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"/>
<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-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 pr-0 pr-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-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="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 pl-2">
<div>Paweł Kuna</div>
<div class="mt-1 small text-muted">UI Designer</div>
</div>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a href="#" class="dropdown-item">Set status</a>
<a href="#" class="dropdown-item">Profile & account</a>
<a href="#" class="dropdown-item">Feedback</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Settings</a>
<a href="#" class="dropdown-item">Logout</a>
</div>
</div>
</div>
</div>
</header>
<div class="navbar-expand-md">
<div class="collapse navbar-collapse" id="navbar-menu">
<div class="navbar navbar-light">
<div class="container-xl">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="../index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
</span>
<span class="nav-link-title">
Home
</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-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="../calendar.html" >
Calendar
</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="dropright">
<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="dropright">
<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 active">
<a class="nav-link" href="../docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Documentation
</span>
</a>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
<form action="." method="get">
<div class="input-icon">
<span class="input-icon-addon">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
</span>
<input type="text" class="form-control" placeholder="Search…" 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">
Documentation
</h2>
</div>
</div>
</div>
<div class="row">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-vertical">
<li class="nav-item">
<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 nav-pills collapse" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
</a>
</li>
<li class="nav-item">
<a href="../docs/usage.html" class="nav-link">
Usage
</a>
</li>
<li class="nav-item">
<a href="../docs/colors.html" class="nav-link">
Colors
</a>
</li>
<li class="nav-item">
<a href="../docs/typography.html" class="nav-link">
Typography
</a>
</li>
<li class="nav-item">
<a href="../docs/icons.html" class="nav-link">
Icons
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-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 nav-pills collapse show" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
</a>
</li>
<li class="nav-item">
<a href="../docs/avatars.html" class="nav-link">
Avatars
</a>
</li>
<li class="nav-item">
<a href="../docs/badges.html" class="nav-link">
Badges
</a>
</li>
<li class="nav-item">
<a href="../docs/breadcrumb.html" class="nav-link">
Breadcrumb
</a>
</li>
<li class="nav-item">
<a href="../docs/buttons.html" class="nav-link">
Buttons
</a>
</li>
<li class="nav-item">
<a href="../docs/cards.html" class="nav-link">
Cards
</a>
</li>
<li class="nav-item">
<a href="../docs/carousel.html" class="nav-link">
Carousel
</a>
</li>
<li class="nav-item">
<a href="../docs/dropdowns.html" class="nav-link">
Dropdowns
</a>
</li>
<li class="nav-item">
<a href="../docs/divider.html" class="nav-link">
Divider
</a>
</li>
<li class="nav-item">
<a href="../docs/empty.html" class="nav-link">
Empty states
</a>
</li>
<li class="nav-item">
<a href="../docs/form-elements.html" class="nav-link">
Form elements
</a>
</li>
<li class="nav-item">
<a href="../docs/form-helpers.html" class="nav-link">
Form helpers
</a>
</li>
<li class="nav-item">
<a href="../docs/modals.html" class="nav-link">
Modals
</a>
</li>
<li class="nav-item">
<a href="../docs/progress.html" class="nav-link">
Progress
</a>
</li>
<li class="nav-item">
<a href="../docs/payments.html" class="nav-link">
Payments
</a>
</li>
<li class="nav-item">
<a href="../docs/range-slider.html" class="nav-link">
Range slider
</a>
</li>
<li class="nav-item">
<a href="../docs/ribbons.html" class="nav-link">
Ribbons
</a>
</li>
<li class="nav-item">
<a href="../docs/skeleton.html" class="nav-link">
Skeleton
</a>
</li>
<li class="nav-item">
<a href="../docs/spinners.html" class="nav-link">
Spinners
</a>
</li>
<li class="nav-item">
<a href="../docs/steps.html" class="nav-link">
Steps
</a>
</li>
<li class="nav-item">
<a href="../docs/switch-icon.html" class="nav-link active">
Switch icon
</a>
</li>
<li class="nav-item">
<a href="../docs/tables.html" class="nav-link">
Tables
</a>
</li>
<li class="nav-item">
<a href="../docs/tabs.html" class="nav-link">
Tabs
</a>
</li>
<li class="nav-item">
<a href="../docs/timelines.html" class="nav-link">
Timelines
</a>
</li>
<li class="nav-item">
<a href="../docs/toasts.html" class="nav-link">
Toasts
</a>
</li>
<li class="nav-item">
<a href="../docs/tooltips.html" class="nav-link">
Tooltips
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-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 nav-pills collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-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 nav-pills collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
</a>
</li>
<li class="nav-item">
<a href="../docs/input-mask.html" class="nav-link">
Form input mask
</a>
</li>
<li class="nav-item">
<a href="../docs/flags.html" class="nav-link">
Flags
</a>
</li>
<li class="nav-item">
<a href="../docs/charts.html" class="nav-link">
Charts
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
</span>
Changelog
<span class="badge bg-blue-lt ml-auto">1.0.0-alpha.16</span>
</a>
</li>
</ul>
</div>
<div class="col-lg-9">
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<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>
</div>
<h2 id="default-markup">Default markup</h2>
<p>To replace the icons, all should add <code class="language-plaintext highlighter-rouge">active</code> class to the <code class="language-plaintext highlighter-rouge">switch-icon</code> component.</p>
<div class="example no_toc_section">
<div class="example-content">
<div class="d-flex space-x-2">
<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>
<span class="switch-icon-b text-blue">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><rect x="4" y="4" width="16" height="16" rx="2" /></svg>
</span>
</button>
</div>
</div>
</div>
<div class="example-code">
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">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>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"switch-icon-b text-blue"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span></code></pre>
</figure>
</div>
<h2 id="switch-animations">Switch animations</h2>
<p>You can also add a fancy animation to add variety to your button. See demo below:</p>
<div class="example no_toc_section">
<div class="example-content">
<div class="d-flex space-x-2">
<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>
<span class="switch-icon-b text-blue">
<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-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>
<span class="switch-icon-b text-red">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
</span>
</button>
<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>
<span class="switch-icon-b text-yellow">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
</span>
</button>
<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>
<span class="switch-icon-b text-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 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-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>
<span class="switch-icon-b text-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>
</span>
</button>
<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>
<span class="switch-icon-b 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" /><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-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>
<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" /><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-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>
</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>
</span>
</button>
</div>
</div>
</div>
<div class="example-code">
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">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>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"switch-icon-b text-blue"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code with class="icon-filled" --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/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-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>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"switch-icon-b text-red"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code with class="icon-filled" --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/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-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>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"switch-icon-b text-yellow"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code with class="icon-filled" --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/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-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>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"switch-icon-b text-facebook"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/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-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>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"switch-icon-b text-twitter"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/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-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>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"switch-icon-b text-red"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/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-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>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"switch-icon-b text-muted"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/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-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>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"switch-icon-b text-muted"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span></code></pre>
</figure>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="../docs/index.html" class="link-secondary">Documentation</a></li>
<li class="list-inline-item"><a href="../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.16</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
</div>
</div>
<!-- Libs JS -->
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

672
demo/docs/usage.html Normal file
View File

@@ -0,0 +1,672 @@
<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-alpha.16
* @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>Usage - 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"/>
<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-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 pr-0 pr-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-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="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 pl-2">
<div>Paweł Kuna</div>
<div class="mt-1 small text-muted">UI Designer</div>
</div>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a href="#" class="dropdown-item">Set status</a>
<a href="#" class="dropdown-item">Profile & account</a>
<a href="#" class="dropdown-item">Feedback</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Settings</a>
<a href="#" class="dropdown-item">Logout</a>
</div>
</div>
</div>
</div>
</header>
<div class="navbar-expand-md">
<div class="collapse navbar-collapse" id="navbar-menu">
<div class="navbar navbar-light">
<div class="container-xl">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="../index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
</span>
<span class="nav-link-title">
Home
</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-base" data-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="../calendar.html" >
Calendar
</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="dropright">
<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="dropright">
<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 active">
<a class="nav-link" href="../docs/index.html" >
<span class="nav-link-icon d-md-none d-lg-inline-block"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="9" x2="10" y2="9" /><line x1="9" y1="13" x2="15" y2="13" /><line x1="9" y1="17" x2="15" y2="17" /></svg>
</span>
<span class="nav-link-title">
Documentation
</span>
</a>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
<form action="." method="get">
<div class="input-icon">
<span class="input-icon-addon">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
</span>
<input type="text" class="form-control" placeholder="Search…" 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">
Documentation
</h2>
</div>
</div>
</div>
<div class="row">
<div class="d-none d-lg-block col-lg-3">
<ul class="nav nav-vertical">
<li class="nav-item">
<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 nav-pills collapse show" id="menu-base">
<li class="nav-item">
<a href="../docs/index.html" class="nav-link">
Introduction
</a>
</li>
<li class="nav-item">
<a href="../docs/usage.html" class="nav-link active">
Usage
</a>
</li>
<li class="nav-item">
<a href="../docs/colors.html" class="nav-link">
Colors
</a>
</li>
<li class="nav-item">
<a href="../docs/typography.html" class="nav-link">
Typography
</a>
</li>
<li class="nav-item">
<a href="../docs/icons.html" class="nav-link">
Icons
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-components" class="nav-link" data-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 nav-pills collapse" id="menu-components">
<li class="nav-item">
<a href="../docs/alerts.html" class="nav-link">
Alerts
</a>
</li>
<li class="nav-item">
<a href="../docs/avatars.html" class="nav-link">
Avatars
</a>
</li>
<li class="nav-item">
<a href="../docs/badges.html" class="nav-link">
Badges
</a>
</li>
<li class="nav-item">
<a href="../docs/breadcrumb.html" class="nav-link">
Breadcrumb
</a>
</li>
<li class="nav-item">
<a href="../docs/buttons.html" class="nav-link">
Buttons
</a>
</li>
<li class="nav-item">
<a href="../docs/cards.html" class="nav-link">
Cards
</a>
</li>
<li class="nav-item">
<a href="../docs/carousel.html" class="nav-link">
Carousel
</a>
</li>
<li class="nav-item">
<a href="../docs/dropdowns.html" class="nav-link">
Dropdowns
</a>
</li>
<li class="nav-item">
<a href="../docs/divider.html" class="nav-link">
Divider
</a>
</li>
<li class="nav-item">
<a href="../docs/empty.html" class="nav-link">
Empty states
</a>
</li>
<li class="nav-item">
<a href="../docs/form-elements.html" class="nav-link">
Form elements
</a>
</li>
<li class="nav-item">
<a href="../docs/form-helpers.html" class="nav-link">
Form helpers
</a>
</li>
<li class="nav-item">
<a href="../docs/modals.html" class="nav-link">
Modals
</a>
</li>
<li class="nav-item">
<a href="../docs/progress.html" class="nav-link">
Progress
</a>
</li>
<li class="nav-item">
<a href="../docs/payments.html" class="nav-link">
Payments
</a>
</li>
<li class="nav-item">
<a href="../docs/range-slider.html" class="nav-link">
Range slider
</a>
</li>
<li class="nav-item">
<a href="../docs/ribbons.html" class="nav-link">
Ribbons
</a>
</li>
<li class="nav-item">
<a href="../docs/skeleton.html" class="nav-link">
Skeleton
</a>
</li>
<li class="nav-item">
<a href="../docs/spinners.html" class="nav-link">
Spinners
</a>
</li>
<li class="nav-item">
<a href="../docs/steps.html" class="nav-link">
Steps
</a>
</li>
<li class="nav-item">
<a href="../docs/switch-icon.html" class="nav-link">
Switch icon
</a>
</li>
<li class="nav-item">
<a href="../docs/tables.html" class="nav-link">
Tables
</a>
</li>
<li class="nav-item">
<a href="../docs/tabs.html" class="nav-link">
Tabs
</a>
</li>
<li class="nav-item">
<a href="../docs/timelines.html" class="nav-link">
Timelines
</a>
</li>
<li class="nav-item">
<a href="../docs/toasts.html" class="nav-link">
Toasts
</a>
</li>
<li class="nav-item">
<a href="../docs/tooltips.html" class="nav-link">
Tooltips
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-utils" class="nav-link" data-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 nav-pills collapse" id="menu-utils">
<li class="nav-item">
<a href="../docs/cursors.html" class="nav-link">
Cursors
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#menu-plugins" class="nav-link" data-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 nav-pills collapse" id="menu-plugins">
<li class="nav-item">
<a href="../docs/autosize.html" class="nav-link">
Autosize
</a>
</li>
<li class="nav-item">
<a href="../docs/input-mask.html" class="nav-link">
Form input mask
</a>
</li>
<li class="nav-item">
<a href="../docs/flags.html" class="nav-link">
Flags
</a>
</li>
<li class="nav-item">
<a href="../docs/charts.html" class="nav-link">
Charts
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
<span class="nav-link-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="7" cy="18" r="2" /><circle cx="7" cy="6" r="2" /><circle cx="17" cy="6" r="2" /><line x1="7" y1="8" x2="7" y2="16" /><path d="M9 18h6a2 2 0 0 0 2 -2v-5" /><polyline points="14 14 17 11 20 14" /></svg>
</span>
Changelog
<span class="badge bg-blue-lt ml-auto">1.0.0-alpha.16</span>
</a>
</li>
</ul>
</div>
<div class="col-lg-9">
<div class="card card-lg">
<div class="card-body">
<div class="markdown">
<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>
</div>
<h2 id="installation">Installation</h2>
<p>To install the latest <code class="language-plaintext highlighter-rouge">tabler</code> npm package in your project run:</p>
<div class="language-sh highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code>npm <span class="nb">install</span> @tabler/core
</code></pre>
</div>
</div>
<p>Tabler <code class="language-plaintext highlighter-rouge">1.0.0</code> major version is now in active development. To get the latest <code class="language-plaintext highlighter-rouge">alpha</code> version run:</p>
<div class="language-sh highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code>npm <span class="nb">install</span> @tabler/core@alpha
</code></pre>
</div>
</div>
<h2 id="cdn-support">CDN support</h2>
<p>All files included in <code class="language-plaintext highlighter-rouge">@tabler/core</code> npm package are available over a CDN.</p>
<h3 id="javascript">Javascript</h3>
<div class="language-html highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://unpkg.com/@tabler/core@latest/dist/js/tabler.min.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
</code></pre>
</div>
</div>
<h3 id="styles">Styles</h3>
<div class="language-html highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code><span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://unpkg.com/@tabler/core@latest/dist/css/tabler.min.css"</span><span class="nt">&gt;</span>
</code></pre>
</div>
</div>
<h3 id="other-versions">Other versions</h3>
<p>To load a specific version replace <code class="language-plaintext highlighter-rouge">latest</code> with the desired version number.</p>
<div class="language-html highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code><span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://unpkg.com/@tabler/core@1.0.0-alpha.13/dist/css/tabler.min.css"</span><span class="nt">&gt;</span>
</code></pre>
</div>
</div>
<p>To load the latest <code class="language-plaintext highlighter-rouge">alpha</code> version replace <code class="language-plaintext highlighter-rouge">latest</code> with <code class="language-plaintext highlighter-rouge">alpha</code>.</p>
<div class="language-html highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://unpkg.com/@tabler/core@alpha/dist/js/tabler.min.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
</code></pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="../docs/index.html" class="link-secondary">Documentation</a></li>
<li class="list-inline-item"><a href="../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.16</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
</div>
</div>
<!-- Libs JS -->
<script src="../dist/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script>
document.body.style.display = "block"
</script>
</body>
</html>

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.8
* @version 1.0.0-alpha.16
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -13,39 +13,31 @@
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Dropdowns - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<meta name="msapplication-TileColor" content="#206bc4"/>
<meta name="theme-color" content="#206bc4"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="mobile-web-app-capable" content="yes"/>
<meta name="HandheldFriendly" content="True"/>
<meta name="MobileOptimized" content="320"/>
<meta name="robots" content="noindex,nofollow,noarchive"/>
<link rel="icon" href="./favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
<!-- CSS files -->
<link href="./dist/css/tabler.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
body { display: none; }
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<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" alt="Tabler" class="navbar-brand-image">
</a>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-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">
<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>
@@ -58,25 +50,20 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
<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>Paweł Kuna</div>
<div class="mt-1 small text-muted">UI Designer</div>
</div>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" 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="#">
<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>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a href="#" class="dropdown-item">Set status</a>
<a href="#" class="dropdown-item">Profile & account</a>
<a href="#" class="dropdown-item">Feedback</a>
<div class="dropdown-divider"></div>
<a 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"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
Separated link</a>
<a href="#" class="dropdown-item">Settings</a>
<a href="#" class="dropdown-item">Logout</a>
</div>
</div>
</div>
@@ -97,121 +84,115 @@
</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>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-2">
<li >
<a class="dropdown-item" href="./empty.html" >
Empty page
</a>
</li>
<li >
<a class="dropdown-item" href="./blank.html" >
Blank page
</a>
</li>
<li >
<a class="dropdown-item" href="./buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./cards-masonry.html" >
Cards Masonry
</a>
</li>
<li >
<a class="dropdown-item active" href="./dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./icons.html" >
Icons
</a>
</li>
<li >
<a class="dropdown-item" href="./modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./maps.html" >
Maps
</a>
</li>
<li >
<a class="dropdown-item" href="./maps-vector.html" >
Vector maps
</a>
</li>
<li >
<a class="dropdown-item" href="./navigation.html" >
Navigation
</a>
</li>
<li >
<a class="dropdown-item" href="./charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./pagination.html" >
Pagination
</a>
</li>
<li >
<a class="dropdown-item" href="./tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./calendar.html" >
Calendar
</a>
</li>
<li >
<a class="dropdown-item" href="./carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./lists.html" >
Lists
</a>
</li>
<li class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
<a href="./sign-in.html" class="dropdown-item">Sign in</a>
<a href="./sign-up.html" class="dropdown-item">Sign up</a>
<a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
<a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
<div 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 active" 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>
</li>
<li class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
<a href="./error-404.html" class="dropdown-item">404 page</a>
<a href="./error-500.html" class="dropdown-item">500 page</a>
<a href="./error-maintenance.html" class="dropdown-item">Maintenance page</a>
<div 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="./calendar.html" >
Calendar
</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="dropright">
<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="dropright">
<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>
</li>
</ul>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="./form-elements.html" >
@@ -223,302 +204,113 @@
</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">
Extra
</span>
</a>
<ul class="dropdown-menu">
<li >
<a class="dropdown-item" href="./invoice.html" >
Invoice
</a>
</li>
<li >
<a class="dropdown-item" href="./blog.html" >
Blog cards
</a>
</li>
<li >
<a class="dropdown-item" href="./snippets.html" >
Snippets
</a>
</li>
<li >
<a class="dropdown-item" href="./search-results.html" >
Search results
</a>
</li>
<li >
<a class="dropdown-item" href="./pricing.html" >
Pricing cards
</a>
</li>
<li >
<a class="dropdown-item" href="./users.html" >
Users
</a>
</li>
<li >
<a class="dropdown-item" href="./gallery.html" >
Gallery
</a>
</li>
<li >
<a class="dropdown-item" href="./profile.html" >
Profile
</a>
</li>
<li >
<a class="dropdown-item" href="./music.html" >
Music
</a>
</li>
<li >
<a class="dropdown-item" href="./welcome.html" >
Welcome
</a>
</li>
</ul>
<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-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">
Layout
</span>
</a>
<ul class="dropdown-menu">
<li >
<a class="dropdown-item" href="./layout-horizontal.html" >
Horizontal
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-vertical.html" >
Vertical
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-vertical-right.html" >
Right vertical
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-condensed.html" >
Condensed
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-condensed-dark.html" >
Condensed dark
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-combo.html" >
Combined
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-navbar-dark.html" >
Navbar dark
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-navbar-overlap.html" >
Navbar overlap
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-dark.html" >
Dark mode
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-fluid.html" >
Fluid
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-fluid-vertical.html" >
Fluid vertical
</a>
</li>
</ul>
<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 dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<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">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -527,7 +319,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>
@@ -538,9 +330,9 @@
<div class="content">
<div class="container-xl">
<!-- Page title -->
<div class="page-header">
<div class="page-header d-print-none">
<div class="row align-items-center">
<div class="col-auto">
<div class="col">
<h2 class="page-title">
Dropdowns
</h2>
@@ -571,11 +363,11 @@
<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-sm rounded mr-2" style="background-image: url(./static/avatars/000m.jpg)"></span>
<a href="#" class="dropdown-item"><span class="avatar avatar-xs rounded mr-2" style="background-image: url(./static/avatars/000m.jpg)"></span>
Paweł Kuna</a>
<a href="#" class="dropdown-item"><span class="avatar avatar-sm rounded mr-2">JL</span>
<a href="#" class="dropdown-item"><span class="avatar avatar-xs rounded mr-2">JL</span>
Jeffie Lewzey</a>
<a href="#" class="dropdown-item"><span class="avatar avatar-sm rounded mr-2" style="background-image: url(./static/avatars/002m.jpg)"></span>
<a href="#" class="dropdown-item"><span class="avatar avatar-xs rounded mr-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>
@@ -763,34 +555,41 @@
<label class="dropdown-item"><input class="form-check-input m-0 mr-2" type="radio"> Option 3</label>
</div>
<div class="dropdown-menu dropdown-menu-demo">
<a href="#" class="dropdown-item"><span class="avatar rounded mr-2" style="background-image: url(./static/avatars/000m.jpg)"></span>
<a href="#" class="dropdown-item"><span class="avatar avatar-xs rounded mr-2" style="background-image: url(./static/avatars/000m.jpg)"></span>
Paweł Kuna</a>
<a href="#" class="dropdown-item"><span class="avatar rounded mr-2">JL</span>
<a href="#" class="dropdown-item"><span class="avatar avatar-xs rounded mr-2">JL</span>
Jeffie Lewzey</a>
<a href="#" class="dropdown-item"><span class="avatar rounded mr-2" style="background-image: url(./static/avatars/002m.jpg)"></span>
<a href="#" class="dropdown-item"><span class="avatar avatar-xs rounded mr-2" style="background-image: url(./static/avatars/002m.jpg)"></span>
Mallory Hulme</a>
<a href="#" class="dropdown-item"><span class="avatar rounded mr-2" style="background-image: url(./static/avatars/003m.jpg)"></span>
<a href="#" class="dropdown-item"><span class="avatar avatar-xs rounded mr-2" style="background-image: url(./static/avatars/003m.jpg)"></span>
Dunn Slane</a>
<a href="#" class="dropdown-item"><span class="avatar rounded mr-2" style="background-image: url(./static/avatars/000f.jpg)"></span>
<a href="#" class="dropdown-item"><span class="avatar avatar-xs rounded mr-2" style="background-image: url(./static/avatars/000f.jpg)"></span>
Emmy Levet</a>
</div>
</div>
</div>
</div>
<footer class="footer footer-transparent">
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li>
<li class="list-inline-item"><a href="./faq.html" class="link-secondary">FAQ</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<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">
Copyright © 2020
<a href="." class="link-secondary">Tabler</a>.
All rights reserved.
<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.16</a>
</li>
</ul>
</div>
</div>
</div>

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.8
* @version 1.0.0-alpha.16
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -13,39 +13,31 @@
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Empty page - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<meta name="msapplication-TileColor" content="#206bc4"/>
<meta name="theme-color" content="#206bc4"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="mobile-web-app-capable" content="yes"/>
<meta name="HandheldFriendly" content="True"/>
<meta name="MobileOptimized" content="320"/>
<meta name="robots" content="noindex,nofollow,noarchive"/>
<link rel="icon" href="./favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
<!-- CSS files -->
<link href="./dist/css/tabler.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
body { display: none; }
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<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" alt="Tabler" class="navbar-brand-image">
</a>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-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">
<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>
@@ -58,25 +50,20 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
<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>Paweł Kuna</div>
<div class="mt-1 small text-muted">UI Designer</div>
</div>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" 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="#">
<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>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a href="#" class="dropdown-item">Set status</a>
<a href="#" class="dropdown-item">Profile & account</a>
<a href="#" class="dropdown-item">Feedback</a>
<div class="dropdown-divider"></div>
<a 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"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
Separated link</a>
<a href="#" class="dropdown-item">Settings</a>
<a href="#" class="dropdown-item">Logout</a>
</div>
</div>
</div>
@@ -97,121 +84,115 @@
</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>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-2">
<li >
<a class="dropdown-item active" href="./empty.html" >
Empty page
</a>
</li>
<li >
<a class="dropdown-item" href="./blank.html" >
Blank page
</a>
</li>
<li >
<a class="dropdown-item" href="./buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./cards-masonry.html" >
Cards Masonry
</a>
</li>
<li >
<a class="dropdown-item" href="./dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./icons.html" >
Icons
</a>
</li>
<li >
<a class="dropdown-item" href="./modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./maps.html" >
Maps
</a>
</li>
<li >
<a class="dropdown-item" href="./maps-vector.html" >
Vector maps
</a>
</li>
<li >
<a class="dropdown-item" href="./navigation.html" >
Navigation
</a>
</li>
<li >
<a class="dropdown-item" href="./charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./pagination.html" >
Pagination
</a>
</li>
<li >
<a class="dropdown-item" href="./tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./calendar.html" >
Calendar
</a>
</li>
<li >
<a class="dropdown-item" href="./carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./lists.html" >
Lists
</a>
</li>
<li class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
<a href="./sign-in.html" class="dropdown-item">Sign in</a>
<a href="./sign-up.html" class="dropdown-item">Sign up</a>
<a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
<a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
<div class="dropdown-menu">
<div class="dropdown-menu-columns">
<div class="dropdown-menu-column">
<a class="dropdown-item active" 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>
</li>
<li class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
<a href="./error-404.html" class="dropdown-item">404 page</a>
<a href="./error-500.html" class="dropdown-item">500 page</a>
<a href="./error-maintenance.html" class="dropdown-item">Maintenance page</a>
<div 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="./calendar.html" >
Calendar
</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="dropright">
<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="dropright">
<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>
</li>
</ul>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="./form-elements.html" >
@@ -223,302 +204,113 @@
</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">
Extra
</span>
</a>
<ul class="dropdown-menu">
<li >
<a class="dropdown-item" href="./invoice.html" >
Invoice
</a>
</li>
<li >
<a class="dropdown-item" href="./blog.html" >
Blog cards
</a>
</li>
<li >
<a class="dropdown-item" href="./snippets.html" >
Snippets
</a>
</li>
<li >
<a class="dropdown-item" href="./search-results.html" >
Search results
</a>
</li>
<li >
<a class="dropdown-item" href="./pricing.html" >
Pricing cards
</a>
</li>
<li >
<a class="dropdown-item" href="./users.html" >
Users
</a>
</li>
<li >
<a class="dropdown-item" href="./gallery.html" >
Gallery
</a>
</li>
<li >
<a class="dropdown-item" href="./profile.html" >
Profile
</a>
</li>
<li >
<a class="dropdown-item" href="./music.html" >
Music
</a>
</li>
<li >
<a class="dropdown-item" href="./welcome.html" >
Welcome
</a>
</li>
</ul>
<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-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">
Layout
</span>
</a>
<ul class="dropdown-menu">
<li >
<a class="dropdown-item" href="./layout-horizontal.html" >
Horizontal
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-vertical.html" >
Vertical
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-vertical-right.html" >
Right vertical
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-condensed.html" >
Condensed
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-condensed-dark.html" >
Condensed dark
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-combo.html" >
Combined
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-navbar-dark.html" >
Navbar dark
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-navbar-overlap.html" >
Navbar overlap
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-dark.html" >
Dark mode
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-fluid.html" >
Fluid
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-fluid-vertical.html" >
Fluid vertical
</a>
</li>
</ul>
<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 dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<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">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -527,7 +319,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>
@@ -538,9 +330,9 @@
<div class="content">
<div class="container-xl">
<!-- Page title -->
<div class="page-header">
<div class="page-header d-print-none">
<div class="row align-items-center">
<div class="col-auto">
<div class="col">
<h2 class="page-title">
Empty page
</h2>
@@ -549,20 +341,27 @@
</div>
<!-- Content here -->
</div>
<footer class="footer footer-transparent">
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li>
<li class="list-inline-item"><a href="./faq.html" class="link-secondary">FAQ</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<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">
Copyright © 2020
<a href="." class="link-secondary">Tabler</a>.
All rights reserved.
<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.16</a>
</li>
</ul>
</div>
</div>
</div>

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.8
* @version 1.0.0-alpha.16
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -13,34 +13,22 @@
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Page 404 - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<meta name="msapplication-TileColor" content="#206bc4"/>
<meta name="theme-color" content="#206bc4"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="mobile-web-app-capable" content="yes"/>
<meta name="HandheldFriendly" content="True"/>
<meta name="MobileOptimized" content="320"/>
<meta name="robots" content="noindex,nofollow,noarchive"/>
<link rel="icon" href="./favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
<!-- CSS files -->
<link href="./dist/css/tabler.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
body { display: none; }
</style>
</head>
<body class="antialiased border-top-wide border-primary d-flex flex-column">
<div class="flex-fill d-flex align-items-center justify-content-center">
<div class="container-tight py-6">
<div class="empty">
<div class="empty-icon">
<div class="display-4">404</div>
</div>
<p class="empty-title h3">Oops… You just found an error page</p>
<div class="empty-header">404</div>
<p class="empty-title">Oops… You just found an error page</p>
<p class="empty-subtitle text-muted">
We are sorry but the page you are looking for was not found
</p>

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.8
* @version 1.0.0-alpha.16
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -13,34 +13,22 @@
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Page 500 - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<meta name="msapplication-TileColor" content="#206bc4"/>
<meta name="theme-color" content="#206bc4"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="mobile-web-app-capable" content="yes"/>
<meta name="HandheldFriendly" content="True"/>
<meta name="MobileOptimized" content="320"/>
<meta name="robots" content="noindex,nofollow,noarchive"/>
<link rel="icon" href="./favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
<!-- CSS files -->
<link href="./dist/css/tabler.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
body { display: none; }
</style>
</head>
<body class="antialiased border-top-wide border-primary d-flex flex-column">
<div class="flex-fill d-flex align-items-center justify-content-center">
<div class="container-tight py-6">
<div class="empty">
<div class="empty-icon">
<div class="display-4">500</div>
</div>
<p class="empty-title h3">Oops… You just found an error page</p>
<div class="empty-header">500</div>
<p class="empty-title">Oops… You just found an error page</p>
<p class="empty-subtitle text-muted">
We are sorry but our server encountered an internal error
</p>

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.8
* @version 1.0.0-alpha.16
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -13,34 +13,23 @@
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Maintenance mode - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<meta name="msapplication-TileColor" content="#206bc4"/>
<meta name="theme-color" content="#206bc4"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="mobile-web-app-capable" content="yes"/>
<meta name="HandheldFriendly" content="True"/>
<meta name="MobileOptimized" content="320"/>
<meta name="robots" content="noindex,nofollow,noarchive"/>
<link rel="icon" href="./favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
<!-- CSS files -->
<link href="./dist/css/tabler.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
body { display: none; }
</style>
</head>
<body class="antialiased border-top-wide border-primary d-flex flex-column">
<div class="flex-fill d-flex align-items-center justify-content-center">
<div class="container-tight py-6">
<div class="empty">
<div class="empty-icon">
<img src="./static/illustrations/undraw_quitting_time_dm8t.svg" height="128" class="mb-4" alt="">
<div class="empty-img"><img src="./static/illustrations/undraw_quitting_time_dm8t.svg" height="128" alt="">
</div>
<p class="empty-title h3">Temporarily down for maintenance</p>
<p class="empty-title">Temporarily down for maintenance</p>
<p class="empty-subtitle text-muted">
Sorry for the inconvenience but were performing some maintenance at the moment. Well be back online shortly!
</p>

File diff suppressed because it is too large Load Diff

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.8
* @version 1.0.0-alpha.16
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -13,46 +13,39 @@
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Forgot password - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<meta name="msapplication-TileColor" content="#206bc4"/>
<meta name="theme-color" content="#206bc4"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="mobile-web-app-capable" content="yes"/>
<meta name="HandheldFriendly" content="True"/>
<meta name="MobileOptimized" content="320"/>
<meta name="robots" content="noindex,nofollow,noarchive"/>
<link rel="icon" href="./favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
<!-- CSS files -->
<link href="./dist/css/tabler.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
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">
<div class="flex-fill d-flex flex-column justify-content-center py-4">
<div class="container-tight py-6">
<div class="text-center mb-4">
<img src="./static/logo.svg" height="36" alt="">
<a href="."><img src="./static/logo.svg" height="36" alt=""></a>
</div>
<form class="card card-md" action="." method="get">
<div class="card-body">
<h2 class="mb-5 text-center">Forgot password</h2>
<p class="text-muted">Enter your email address and your password will be reset and emailed to you.</p>
<h2 class="card-title text-center mb-4">Forgot password</h2>
<p class="text-muted mb-4">Enter your email address and your password will be reset and emailed to you.</p>
<div class="mb-3">
<label class="form-label">Email address</label>
<input type="email" class="form-control" placeholder="Enter email">
</div>
<div class="form-footer">
<button type="submit" class="btn btn-primary btn-block">Send me new password</button>
<a href="#" class="btn btn-primary w-100">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 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="2" /><polyline points="3 7 12 13 21 7" /></svg>
Send me new password
</a>
</div>
</div>
</form>
<div class="text-center text-muted">
<div class="text-center text-muted mt">
Forget it, <a href="./sign-in.html">send me back</a> to the sign in screen.
</div>
</div>

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

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.8
* @version 1.0.0-alpha.16
* @link https://tabler.io
* Copyright 2018-2020 The Tabler Authors
* Copyright 2018-2020 codecalm.net Paweł Kuna
@@ -13,39 +13,31 @@
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Invoice - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<meta name="msapplication-TileColor" content="#206bc4"/>
<meta name="theme-color" content="#206bc4"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="mobile-web-app-capable" content="yes"/>
<meta name="HandheldFriendly" content="True"/>
<meta name="MobileOptimized" content="320"/>
<meta name="robots" content="noindex,nofollow,noarchive"/>
<link rel="icon" href="./favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
<!-- CSS files -->
<link href="./dist/css/tabler.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-flags.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-payments.min.css" rel="stylesheet"/>
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
<style>
body {
display: none;
}
body { display: none; }
</style>
</head>
<body class="antialiased">
<div class="page">
<header class="navbar navbar-expand-md navbar-light">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-menu">
<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" alt="Tabler" class="navbar-brand-image">
</a>
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pr-0 pr-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">
<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>
@@ -58,25 +50,20 @@
</div>
</div>
<div class="nav-item dropdown">
<a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-toggle="dropdown">
<span class="avatar" style="background-image: url(./static/avatars/000m.jpg)"></span>
<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>Paweł Kuna</div>
<div class="mt-1 small text-muted">UI Designer</div>
</div>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">
<svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" 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="#">
<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>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a href="#" class="dropdown-item">Set status</a>
<a href="#" class="dropdown-item">Profile & account</a>
<a href="#" class="dropdown-item">Feedback</a>
<div class="dropdown-divider"></div>
<a 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"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
Separated link</a>
<a href="#" class="dropdown-item">Settings</a>
<a href="#" class="dropdown-item">Logout</a>
</div>
</div>
</div>
@@ -97,121 +84,115 @@
</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>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-2">
<li >
<a class="dropdown-item" href="./empty.html" >
Empty page
</a>
</li>
<li >
<a class="dropdown-item" href="./blank.html" >
Blank page
</a>
</li>
<li >
<a class="dropdown-item" href="./buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./cards-masonry.html" >
Cards Masonry
</a>
</li>
<li >
<a class="dropdown-item" href="./dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./icons.html" >
Icons
</a>
</li>
<li >
<a class="dropdown-item" href="./modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./maps.html" >
Maps
</a>
</li>
<li >
<a class="dropdown-item" href="./maps-vector.html" >
Vector maps
</a>
</li>
<li >
<a class="dropdown-item" href="./navigation.html" >
Navigation
</a>
</li>
<li >
<a class="dropdown-item" href="./charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./pagination.html" >
Pagination
</a>
</li>
<li >
<a class="dropdown-item" href="./tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./calendar.html" >
Calendar
</a>
</li>
<li >
<a class="dropdown-item" href="./carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./lists.html" >
Lists
</a>
</li>
<li class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-toggle="dropdown" role="button" aria-expanded="false" >
Authentication
</a>
<div class="dropdown-menu">
<a href="./sign-in.html" class="dropdown-item">Sign in</a>
<a href="./sign-up.html" class="dropdown-item">Sign up</a>
<a href="./forgot-password.html" class="dropdown-item">Forgot password</a>
<a href="./terms-of-service.html" class="dropdown-item">Terms of service</a>
<div 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>
</li>
<li class="dropright">
<a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-toggle="dropdown" role="button" aria-expanded="false" >
Error pages
</a>
<div class="dropdown-menu">
<a href="./error-404.html" class="dropdown-item">404 page</a>
<a href="./error-500.html" class="dropdown-item">500 page</a>
<a href="./error-maintenance.html" class="dropdown-item">Maintenance page</a>
<div 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="./calendar.html" >
Calendar
</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="dropright">
<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="dropright">
<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>
</li>
</ul>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="./form-elements.html" >
@@ -223,302 +204,113 @@
</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">
Extra
</span>
</a>
<ul class="dropdown-menu">
<li >
<a class="dropdown-item active" href="./invoice.html" >
Invoice
</a>
</li>
<li >
<a class="dropdown-item" href="./blog.html" >
Blog cards
</a>
</li>
<li >
<a class="dropdown-item" href="./snippets.html" >
Snippets
</a>
</li>
<li >
<a class="dropdown-item" href="./search-results.html" >
Search results
</a>
</li>
<li >
<a class="dropdown-item" href="./pricing.html" >
Pricing cards
</a>
</li>
<li >
<a class="dropdown-item" href="./users.html" >
Users
</a>
</li>
<li >
<a class="dropdown-item" href="./gallery.html" >
Gallery
</a>
</li>
<li >
<a class="dropdown-item" href="./profile.html" >
Profile
</a>
</li>
<li >
<a class="dropdown-item" href="./music.html" >
Music
</a>
</li>
<li >
<a class="dropdown-item" href="./welcome.html" >
Welcome
</a>
</li>
</ul>
<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 active" 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-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">
Layout
</span>
</a>
<ul class="dropdown-menu">
<li >
<a class="dropdown-item" href="./layout-horizontal.html" >
Horizontal
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-vertical.html" >
Vertical
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-vertical-right.html" >
Right vertical
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-condensed.html" >
Condensed
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-condensed-dark.html" >
Condensed dark
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-combo.html" >
Combined
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-navbar-dark.html" >
Navbar dark
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-navbar-overlap.html" >
Navbar overlap
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-dark.html" >
Dark mode
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-fluid.html" >
Fluid
</a>
</li>
<li >
<a class="dropdown-item" href="./layout-fluid-vertical.html" >
Fluid vertical
</a>
</li>
</ul>
<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 dropdown">
<a class="nav-link dropdown-toggle" href="#navbar-docs" data-toggle="dropdown" role="button" aria-expanded="false" >
<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">
Docs
Documentation
</span>
</a>
<ul class="dropdown-menu dropdown-menu-columns dropdown-menu-columns-3">
<li >
<a class="dropdown-item" href="./docs/index.html" >
Introduction
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/alerts.html" >
Alerts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/autosize.html" >
Autosize
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/avatars.html" >
Avatars
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/badges.html" >
Badges
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/breadcrumb.html" >
Breadcrumb
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/buttons.html" >
Buttons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cards.html" >
Cards
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/carousel.html" >
Carousel
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/colors.html" >
Colors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/cursors.html" >
Cursors
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/charts.html" >
Charts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/dropdowns.html" >
Dropdowns
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/divider.html" >
Divider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/empty.html" >
Empty states
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/flags.html" >
Flags
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-elements.html" >
Form elements
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/form-helpers.html" >
Form helpers
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/input-mask.html" >
Form input mask
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/modals.html" >
Modals
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/progress.html" >
Progress
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/payments.html" >
Payments
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/range-slider.html" >
Range slider
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/ribbons.html" >
Ribbons
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/spinners.html" >
Spinners
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/steps.html" >
Steps
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tables.html" >
Tables
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tabs.html" >
Tabs
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/timelines.html" >
Timelines
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/toasts.html" >
Toasts
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/tooltips.html" >
Tooltips
</a>
</li>
<li >
<a class="dropdown-item" href="./docs/typography.html" >
Typography
</a>
</li>
</ul>
</li>
</ul>
<div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
@@ -527,7 +319,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>
@@ -537,15 +329,24 @@
</div>
<div class="content">
<div class="container-xl">
<div class="card">
<div class="card-header d-print-none">
<h3 class="card-title">Invoice</h3>
<div class="card-options">
<button type="button" class="btn btn-primary" onclick="javascript:window.print();"><i
class="si si-printer"></i> Print Invoice
<!-- Page title -->
<div class="page-header d-print-none">
<div class="row align-items-center">
<div class="col">
<h2 class="page-title">
Invoice
</h2>
</div>
<!-- Page title actions -->
<div class="col-auto ml-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
</button>
</div>
</div>
</div>
<div class="card card-lg">
<div class="card-body">
<div class="row">
<div class="col-6">
@@ -570,90 +371,95 @@
<h1>Invoice INV/001/15</h1>
</div>
</div>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<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>
</tr>
</thead>
<table class="table table-transparent table-responsive">
<thead>
<tr>
<td class="text-center">1</td>
<td>
<p class="strong mb-1">Logo Creation</p>
<div class="text-muted">Logo and business cards design</div>
</td>
<td class="text-center">
1
</td>
<td class="text-right">$1.800,00</td>
<td class="text-right">$1.800,00</td>
<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>
</tr>
<tr>
<td class="text-center">2</td>
<td>
<p class="strong mb-1">Online Store Design &amp; Development</p>
<div class="text-muted">Design/Development for all popular modern browsers</div>
</td>
<td class="text-center">
1
</td>
<td class="text-right">$20.000,00</td>
<td class="text-right">$20.000,00</td>
</tr>
<tr>
<td class="text-center">3</td>
<td>
<p class="strong mb-1">App Design</p>
<div class="text-muted">Promotional mobile application</div>
</td>
<td class="text-center">
1
</td>
<td class="text-right">$3.200,00</td>
<td class="text-right">$3.200,00</td>
</tr>
<tr>
<td colspan="4" class="strong text-right">Subtotal</td>
<td class="text-right">$25.000,00</td>
</tr>
<tr>
<td colspan="4" class="strong text-right">Vat Rate</td>
<td class="text-right">20%</td>
</tr>
<tr>
<td colspan="4" class="strong text-right">Vat Due</td>
<td class="text-right">$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>
</tr>
</table>
</div>
<p class="text-muted text-center">Thank you very much for doing business with us. We look forward to working with
</thead>
<tr>
<td class="text-center">1</td>
<td>
<p class="strong mb-1">Logo Creation</p>
<div class="text-muted">Logo and business cards design</div>
</td>
<td class="text-center">
1
</td>
<td class="text-right">$1.800,00</td>
<td class="text-right">$1.800,00</td>
</tr>
<tr>
<td class="text-center">2</td>
<td>
<p class="strong mb-1">Online Store Design &amp; Development</p>
<div class="text-muted">Design/Development for all popular modern browsers</div>
</td>
<td class="text-center">
1
</td>
<td class="text-right">$20.000,00</td>
<td class="text-right">$20.000,00</td>
</tr>
<tr>
<td class="text-center">3</td>
<td>
<p class="strong mb-1">App Design</p>
<div class="text-muted">Promotional mobile application</div>
</td>
<td class="text-center">
1
</td>
<td class="text-right">$3.200,00</td>
<td class="text-right">$3.200,00</td>
</tr>
<tr>
<td colspan="4" class="strong text-right">Subtotal</td>
<td class="text-right">$25.000,00</td>
</tr>
<tr>
<td colspan="4" class="strong text-right">Vat Rate</td>
<td class="text-right">20%</td>
</tr>
<tr>
<td colspan="4" class="strong text-right">Vat Due</td>
<td class="text-right">$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>
</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
you again!</p>
</div>
</div>
</div>
<footer class="footer footer-transparent">
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ml-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="./docs/index.html" class="link-secondary">Documentation</a></li>
<li class="list-inline-item"><a href="./faq.html" class="link-secondary">FAQ</a></li>
<li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary">Source code</a></li>
<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">
Copyright © 2020
<a href="." class="link-secondary">Tabler</a>.
All rights reserved.
<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.16</a>
</li>
</ul>
</div>
</div>
</div>

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

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