Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-07-26 04:54:40 +04:00
Code Issues Projects Releases Wiki Activity

Release 1.0.0-beta5

Browse Source
This commit is contained in:
codecalm
2021-12-07 20:46:16 +01:00
parent 45268ff596
commit d2d9eb0146
164 changed files with 6741 additions and 8427 deletions
Download Patch File Download Diff File Expand all files Collapse all files
demo/accordion.html
+17 -12
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -418,7 +420,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -442,7 +444,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="./changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -454,5 +458,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script src="./dist/js/demo.min.js"></script>
</body>
</html>
demo/activity.html
+17 -12
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -620,7 +622,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -644,7 +646,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="./changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -656,5 +660,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script src="./dist/js/demo.min.js"></script>
</body>
</html>
demo/auth-lock.html
+4 -3
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,11 +20,11 @@
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased border-top-wide border-primary d-flex flex-column">
<body class=" border-top-wide border-primary d-flex flex-column">
<div class="page page-center">
<div class="container-tight py-4">
<div class="text-center mb-4">
<a href="."><img src="./static/logo.svg" height="36" alt=""></a>
<a href="." class="navbar-brand navbar-brand-autodark"><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">
@@ -53,5 +53,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script src="./dist/js/demo.min.js"></script>
</body>
</html>
demo/blank.html
+17 -12
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -369,7 +371,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -393,7 +395,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="./changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -405,5 +409,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script src="./dist/js/demo.min.js"></script>
</body>
</html>
demo/buttons.html
+17 -12
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -1167,7 +1169,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -1191,7 +1193,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="./changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -1203,5 +1207,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script src="./dist/js/demo.min.js"></script>
</body>
</html>
demo/cards-masonry.html
+17 -12
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -616,7 +618,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -640,7 +642,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="./changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -653,5 +657,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 src="./dist/js/demo.min.js"></script>
</body>
</html>
demo/cards.html
+17 -12
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -961,7 +963,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -985,7 +987,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="./changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -997,5 +1001,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script src="./dist/js/demo.min.js"></script>
</body>
</html>
demo/carousel.html
+17 -12
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -526,7 +528,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -550,7 +552,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="./changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -562,5 +566,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script src="./dist/js/demo.min.js"></script>
</body>
</html>
demo/changelog.html
+18 -13
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -658,7 +660,7 @@
<li class="nav-item">
<a href="./changelog.html" class="nav-link active">
Changelog
<span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
</a>
</li>
</ul>
@@ -691,7 +693,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -715,7 +717,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="./changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -727,5 +731,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script src="./dist/js/demo.min.js"></script>
</body>
</html>
demo/charts.html
+17 -12
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -547,7 +549,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -571,7 +573,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="./changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -584,6 +588,7 @@
<script src="./dist/libs/apexcharts/dist/apexcharts.min.js"></script>
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script src="./dist/js/demo.min.js"></script>
<script>
// @formatter:off
document.addEventListener("DOMContentLoaded", function () {
demo/colors.html
+17 -12
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -664,7 +666,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -688,7 +690,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="./changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -700,5 +704,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script src="./dist/js/demo.min.js"></script>
</body>
</html>
demo/dist/css/demo.css
Vendored
+45 -18
View File
@@ -1,6 +1,6 @@
/*!
* Tabler v1.0.0-beta4 (https://tabler.io)
* @version 1.0.0-beta4
* Tabler v1.0.0-beta5 (https://tabler.io)
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -11,7 +11,7 @@ pre.highlight,
max-height: 30rem;
margin: 1.5rem 0;
overflow: auto;
font-size: 80%;
font-size: 85.7142857%;
border-radius: 4px; }
pre.highlight::-webkit-scrollbar,
.highlight pre::-webkit-scrollbar {
@@ -27,16 +27,16 @@ pre.highlight,
pre.highlight::-webkit-scrollbar-thumb,
.highlight pre::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #475569; }
background: rgba(var(--tblr-body-color-rgb), 0.16); }
pre.highlight::-webkit-scrollbar-track,
.highlight pre::-webkit-scrollbar-track {
background: #cbd5e1; }
background: rgba(var(--tblr-body-color-rgb), 0.06); }
pre.highlight:hover::-webkit-scrollbar-thumb,
.highlight pre:hover::-webkit-scrollbar-thumb {
background: rgba(var(--tblr-body-color-rgb), 0.32); }
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: #475569; }
.highlight {
margin: 0; }
@@ -203,8 +203,8 @@ pre.highlight,
flex: 0 auto; }
.example-content {
font-size: 0.9375rem;
line-height: 1.3333333;
font-size: 0.875rem;
line-height: 1.4285714;
color: #1e293b;
flex: 1;
max-width: 100%; }
@@ -247,13 +247,13 @@ pre.highlight,
border-radius: 2px 2px 0 0; }
@media not print {
.theme-dark .example {
background-color: #1b2434;
border-color: #2c3c56; }
.theme-dark .example-content {
color: #f8fafc; }
.theme-dark .example-code {
border: 1px solid #e6e7e9;
border-top: none; } }
@media not print and (prefers-color-scheme: dark) {
.theme-dark-auto .example-code {
border: 1px solid #e6e7e9;
border-color: #2c3c56;
border-top: none; } }
.card-sponsor {
@@ -323,8 +323,8 @@ body.no-transitions * {
height: 7rem;
text-align: center;
padding: .5rem;
border-right: 1px solid #e6e7e9;
border-bottom: 1px solid #e6e7e9;
border-right: 1px solid var(--tblr-border-color);
border-bottom: 1px solid var(--tblr-border-color);
color: inherit;
cursor: pointer; }
.demo-icons-list-item .icon {
@@ -333,3 +333,30 @@ body.no-transitions * {
font-size: 1.5rem; }
.demo-icons-list-item:hover {
text-decoration: none; }
.settings-btn {
position: fixed;
right: -1px;
top: 10rem;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
box-shadow: rgba(30, 41, 59, 0.04) 0 2px 4px 0; }
.settings-scheme {
display: inline-block;
border-radius: 50%;
height: 3rem;
width: 3rem;
position: relative;
border: 1px solid var(--tblr-border-color);
box-shadow: rgba(30, 41, 59, 0.04) 0 2px 4px 0; }
.settings-scheme-light {
background: linear-gradient(135deg, #ffffff 50%, #f8fafc 50%); }
.settings-scheme-mixed {
background-image: linear-gradient(135deg, #1e293b 50%, #fff 50%); }
.settings-scheme-transparent {
background: #f8fafc; }
.settings-scheme-dark {
background: #1e293b; }
.settings-scheme-colored {
background-image: linear-gradient(135deg, var(--tblr-primary) 50%, #f8fafc 50%); }
demo/dist/css/demo.min.css
Vendored
+3 -3
View File
File diff suppressed because one or more lines are too long
demo/dist/css/demo.rtl.css
Vendored
+45 -18
View File
@@ -1,6 +1,6 @@
/*!
* Tabler v1.0.0-beta4 (https://tabler.io)
* @version 1.0.0-beta4
* Tabler v1.0.0-beta5 (https://tabler.io)
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -11,7 +11,7 @@ pre.highlight,
max-height: 30rem;
margin: 1.5rem 0;
overflow: auto;
font-size: 80%;
font-size: 85.7142857%;
border-radius: 4px; }
pre.highlight::-webkit-scrollbar,
.highlight pre::-webkit-scrollbar {
@@ -27,16 +27,16 @@ pre.highlight,
pre.highlight::-webkit-scrollbar-thumb,
.highlight pre::-webkit-scrollbar-thumb {
border-radius: 5px;
background: #475569; }
background: rgba(var(--tblr-body-color-rgb), 0.16); }
pre.highlight::-webkit-scrollbar-track,
.highlight pre::-webkit-scrollbar-track {
background: #cbd5e1; }
background: rgba(var(--tblr-body-color-rgb), 0.06); }
pre.highlight:hover::-webkit-scrollbar-thumb,
.highlight pre:hover::-webkit-scrollbar-thumb {
background: rgba(var(--tblr-body-color-rgb), 0.32); }
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: #475569; }
.highlight {
margin: 0; }
@@ -203,8 +203,8 @@ pre.highlight,
flex: 0 auto; }
.example-content {
font-size: 0.9375rem;
line-height: 1.3333333;
font-size: 0.875rem;
line-height: 1.4285714;
color: #1e293b;
flex: 1;
max-width: 100%; }
@@ -247,13 +247,13 @@ pre.highlight,
border-radius: 2px 2px 0 0; }
@media not print {
.theme-dark .example {
background-color: #1b2434;
border-color: #2c3c56; }
.theme-dark .example-content {
color: #f8fafc; }
.theme-dark .example-code {
border: 1px solid #e6e7e9;
border-top: none; } }
@media not print and (prefers-color-scheme: dark) {
.theme-dark-auto .example-code {
border: 1px solid #e6e7e9;
border-color: #2c3c56;
border-top: none; } }
.card-sponsor {
@@ -323,8 +323,8 @@ body.no-transitions * {
height: 7rem;
text-align: center;
padding: .5rem;
border-left: 1px solid #e6e7e9;
border-bottom: 1px solid #e6e7e9;
border-left: 1px solid var(--tblr-border-color);
border-bottom: 1px solid var(--tblr-border-color);
color: inherit;
cursor: pointer; }
.demo-icons-list-item .icon {
@@ -333,3 +333,30 @@ body.no-transitions * {
font-size: 1.5rem; }
.demo-icons-list-item:hover {
text-decoration: none; }
.settings-btn {
position: fixed;
left: -1px;
top: 10rem;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
box-shadow: rgba(30, 41, 59, 0.04) 0 2px 4px 0; }
.settings-scheme {
display: inline-block;
border-radius: 50%;
height: 3rem;
width: 3rem;
position: relative;
border: 1px solid var(--tblr-border-color);
box-shadow: rgba(30, 41, 59, 0.04) 0 2px 4px 0; }
.settings-scheme-light {
background: linear-gradient(-135deg, #ffffff 50%, #f8fafc 50%); }
.settings-scheme-mixed {
background-image: linear-gradient(-135deg, #1e293b 50%, #fff 50%); }
.settings-scheme-transparent {
background: #f8fafc; }
.settings-scheme-dark {
background: #1e293b; }
.settings-scheme-colored {
background-image: linear-gradient(-135deg, var(--tblr-primary) 50%, #f8fafc 50%); }
demo/dist/css/demo.rtl.min.css
Vendored
+3 -3
View File
File diff suppressed because one or more lines are too long
demo/dist/css/tabler-flags.css
Vendored
+3 -3
View File
@@ -1,6 +1,6 @@
/*!
* Tabler v1.0.0-beta4 (https://tabler.io)
* @version 1.0.0-beta4
* Tabler v1.0.0-beta5 (https://tabler.io)
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -15,7 +15,7 @@
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: 1px solid #e6e7e9;
border: 1px solid var(--tblr-border-color);
border-radius: 3px; }
.flag-country-ad {
demo/dist/css/tabler-flags.min.css
Vendored
+3 -3
View File
File diff suppressed because one or more lines are too long
demo/dist/css/tabler-flags.rtl.css
Vendored
+3 -3
View File
@@ -1,6 +1,6 @@
/*!
* Tabler v1.0.0-beta4 (https://tabler.io)
* @version 1.0.0-beta4
* Tabler v1.0.0-beta5 (https://tabler.io)
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -15,7 +15,7 @@
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border: 1px solid #e6e7e9;
border: 1px solid var(--tblr-border-color);
border-radius: 3px; }
.flag-country-ad {
demo/dist/css/tabler-flags.rtl.min.css
Vendored
+3 -3
View File
File diff suppressed because one or more lines are too long
demo/dist/css/tabler-payments.css
Vendored
+2 -2
View File
@@ -1,6 +1,6 @@
/*!
* Tabler v1.0.0-beta4 (https://tabler.io)
* @version 1.0.0-beta4
* Tabler v1.0.0-beta5 (https://tabler.io)
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
demo/dist/css/tabler-payments.min.css
Vendored
+2 -2
View File
@@ -1,6 +1,6 @@
/*!
* Tabler v1.0.0-beta4 (https://tabler.io)
* @version 1.0.0-beta4
* Tabler v1.0.0-beta5 (https://tabler.io)
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
demo/dist/css/tabler-payments.rtl.css
Vendored
+2 -2
View File
@@ -1,6 +1,6 @@
/*!
* Tabler v1.0.0-beta4 (https://tabler.io)
* @version 1.0.0-beta4
* Tabler v1.0.0-beta5 (https://tabler.io)
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
demo/dist/css/tabler-payments.rtl.min.css
Vendored
+2 -2
View File
@@ -1,6 +1,6 @@
/*!
* Tabler v1.0.0-beta4 (https://tabler.io)
* @version 1.0.0-beta4
* Tabler v1.0.0-beta5 (https://tabler.io)
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
demo/dist/css/tabler-vendors.css
Vendored
+19 -13
View File
@@ -1,6 +1,6 @@
/*!
* Tabler v1.0.0-beta4 (https://tabler.io)
* @version 1.0.0-beta4
* Tabler v1.0.0-beta5 (https://tabler.io)
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -310,13 +310,13 @@
padding: .5rem 0; }
.noUi-base {
background: #e2e8f0;
background: var(--tblr-border-color-light);
border-radius: 1rem; }
.noUi-handle {
width: 1rem;
height: 1rem;
border: 2px solid #ffffff;
border: 2px solid var(--tblr-border-color-light);
box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.1);
border-radius: 1rem;
background: currentColor;
@@ -341,9 +341,12 @@
--litepicker-button-next-month-color: #626976;
--litepicker-button-prev-month-color-hover: #206bc4;
--litepicker-button-next-month-color-hover: #206bc4;
--litepicker-day-color: var(--tblr-body-color);
--litepicker-day-color-hover: #206bc4;
--litepicker-is-end-color-bg: #206bc4;
--litepicker-is-today-color: #206bc4;
--litepicker-month-header-color: var(--tblr-body-color);
--litepicker-container-months-color-bg: var(--tblr-card-bg);
font: inherit;
-webkit-user-select: none;
-moz-user-select: none;
@@ -352,7 +355,7 @@
.litepicker svg {
fill: none !important; }
.litepicker .container__months {
border: 1px solid rgba(98, 105, 118, 0.16);
border: 1px solid var(--tblr-border-color);
border-radius: 4px;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); }
.litepicker .container__months .month-item-name,
@@ -545,7 +548,7 @@
color: #1e293b;
font-family: inherit;
font-size: inherit;
line-height: 1.3333333;
line-height: 1.4285714;
font-smoothing: inherit; }
.ts-input,
@@ -739,8 +742,8 @@
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); }
.ts-dropdown .optgroup-header {
font-size: 0.8203125rem;
line-height: 1.3333333; }
font-size: 0.765625rem;
line-height: 1.4285714; }
.ts-dropdown .optgroup:first-child:before {
display: none; }
@@ -762,7 +765,7 @@
padding: 5px 0; }
.ts-input {
min-height: calc(1.3333333em + 0.875rem + 2px);
min-height: calc(1.4285714em + 0.875rem + 2px);
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
display: flex;
align-items: center; }
@@ -796,18 +799,18 @@
box-shadow: 0 0 0 0.25rem rgba(47, 179, 68, 0.25); }
.input-group-sm > .ts-control .ts-input, .ts-control.form-select-sm .ts-input, .ts-control.form-control-sm .ts-input {
min-height: calc(1.3333333em + 0.25rem + 2px);
min-height: calc(1.4285714em + 0.25rem + 2px);
padding: 0 .75rem;
border-radius: 2px;
font-size: 0.75rem; }
.input-group-sm > .ts-control .ts-input.has-items, .ts-control.form-select-sm .ts-input.has-items, .ts-control.form-control-sm .ts-input.has-items {
min-height: calc(1.3333333em + 0.25rem + 2px) !important;
min-height: calc(1.4285714em + 0.25rem + 2px) !important;
font-size: 0.75rem;
padding-bottom: 0; }
.input-group-sm > .ts-control.multi .ts-input.has-items, .ts-control.form-select-sm.multi .ts-input.has-items, .ts-control.form-control-sm.multi .ts-input.has-items {
padding-top: calc( (calc(1.3333333em + 0.25rem + 2px) - (1.3333333 * 0.75rem) - 4px)/2) !important; }
padding-top: calc( (calc(1.4285714em + 0.25rem + 2px) - (1.4285714 * 0.75rem) - 4px)/2) !important; }
.ts-control.multi .ts-input.has-items {
padding-left: calc(0.75rem - 5px);
@@ -817,7 +820,7 @@
border-radius: calc(4px - 1px); }
.input-group-lg > .ts-control > .ts-input, .ts-control.form-control-lg .ts-input, .ts-control.form-select-lg .ts-input {
min-height: calc(1.3333333em + 1rem + 2px);
min-height: calc(1.4285714em + 1rem + 2px);
border-radius: 8px;
font-size: 1.25rem; }
@@ -854,6 +857,9 @@
border-top-right-radius: 0;
border-bottom-right-radius: 0; }
.ts-input {
color: inherit; }
.ts-control .dropdown-menu {
width: 100%;
height: auto; }
demo/dist/css/tabler-vendors.min.css
Vendored
+3 -3
View File
File diff suppressed because one or more lines are too long
demo/dist/css/tabler-vendors.rtl.css
Vendored
+19 -13
View File
@@ -1,6 +1,6 @@
/*!
* Tabler v1.0.0-beta4 (https://tabler.io)
* @version 1.0.0-beta4
* Tabler v1.0.0-beta5 (https://tabler.io)
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -310,13 +310,13 @@
padding: .5rem 0; }
.noUi-base {
background: #e2e8f0;
background: var(--tblr-border-color-light);
border-radius: 1rem; }
.noUi-handle {
width: 1rem;
height: 1rem;
border: 2px solid #ffffff;
border: 2px solid var(--tblr-border-color-light);
box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.1);
border-radius: 1rem;
background: currentColor;
@@ -341,9 +341,12 @@
--litepicker-button-next-month-color: #626976;
--litepicker-button-prev-month-color-hover: #206bc4;
--litepicker-button-next-month-color-hover: #206bc4;
--litepicker-day-color: var(--tblr-body-color);
--litepicker-day-color-hover: #206bc4;
--litepicker-is-end-color-bg: #206bc4;
--litepicker-is-today-color: #206bc4;
--litepicker-month-header-color: var(--tblr-body-color);
--litepicker-container-months-color-bg: var(--tblr-card-bg);
font: inherit;
-webkit-user-select: none;
-moz-user-select: none;
@@ -352,7 +355,7 @@
.litepicker svg {
fill: none !important; }
.litepicker .container__months {
border: 1px solid rgba(98, 105, 118, 0.16);
border: 1px solid var(--tblr-border-color);
border-radius: 4px;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); }
.litepicker .container__months .month-item-name,
@@ -545,7 +548,7 @@
color: #1e293b;
font-family: inherit;
font-size: inherit;
line-height: 1.3333333;
line-height: 1.4285714;
font-smoothing: inherit; }
.ts-input,
@@ -739,8 +742,8 @@
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); }
.ts-dropdown .optgroup-header {
font-size: 0.8203125rem;
line-height: 1.3333333; }
font-size: 0.765625rem;
line-height: 1.4285714; }
.ts-dropdown .optgroup:first-child:before {
display: none; }
@@ -762,7 +765,7 @@
padding: 5px 0; }
.ts-input {
min-height: calc(1.3333333em + 0.875rem + 2px);
min-height: calc(1.4285714em + 0.875rem + 2px);
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
display: flex;
align-items: center; }
@@ -796,18 +799,18 @@
box-shadow: 0 0 0 0.25rem rgba(47, 179, 68, 0.25); }
.input-group-sm > .ts-control .ts-input, .ts-control.form-select-sm .ts-input, .ts-control.form-control-sm .ts-input {
min-height: calc(1.3333333em + 0.25rem + 2px);
min-height: calc(1.4285714em + 0.25rem + 2px);
padding: 0 .75rem;
border-radius: 2px;
font-size: 0.75rem; }
.input-group-sm > .ts-control .ts-input.has-items, .ts-control.form-select-sm .ts-input.has-items, .ts-control.form-control-sm .ts-input.has-items {
min-height: calc(1.3333333em + 0.25rem + 2px) !important;
min-height: calc(1.4285714em + 0.25rem + 2px) !important;
font-size: 0.75rem;
padding-bottom: 0; }
.input-group-sm > .ts-control.multi .ts-input.has-items, .ts-control.form-select-sm.multi .ts-input.has-items, .ts-control.form-control-sm.multi .ts-input.has-items {
padding-top: calc( (calc(1.3333333em + 0.25rem + 2px) - (1.3333333 * 0.75rem) - 4px)/2) !important; }
padding-top: calc( (calc(1.4285714em + 0.25rem + 2px) - (1.4285714 * 0.75rem) - 4px)/2) !important; }
.ts-control.multi .ts-input.has-items {
padding-right: calc(0.75rem - 5px);
@@ -817,7 +820,7 @@
border-radius: calc(4px - 1px); }
.input-group-lg > .ts-control > .ts-input, .ts-control.form-control-lg .ts-input, .ts-control.form-select-lg .ts-input {
min-height: calc(1.3333333em + 1rem + 2px);
min-height: calc(1.4285714em + 1rem + 2px);
border-radius: 8px;
font-size: 1.25rem; }
@@ -854,6 +857,9 @@
border-top-left-radius: 0;
border-bottom-left-radius: 0; }
.ts-input {
color: inherit; }
.ts-control .dropdown-menu {
width: 100%;
height: auto; }
demo/dist/css/tabler-vendors.rtl.min.css
Vendored
+3 -3
View File
File diff suppressed because one or more lines are too long
demo/dist/css/tabler.css
Vendored
+440 -488
View File
File diff suppressed because it is too large Load Diff
demo/dist/css/tabler.min.css
Vendored
+8 -3
View File
File diff suppressed because one or more lines are too long
demo/dist/css/tabler.rtl.css
Vendored
+440 -488
View File
File diff suppressed because it is too large Load Diff
demo/dist/css/tabler.rtl.min.css
Vendored
+8 -3
View File
File diff suppressed because one or more lines are too long
demo/dist/js/demo.js
Vendored
+151
View File
@@ -0,0 +1,151 @@
/*!
* Tabler v1.0.0-beta5 (https://tabler.io)
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
*/
(function (factory) {
typeof define === 'function' && define.amd ? define(factory) :
factory();
})((function () { 'use strict';
function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
function _iterableToArrayLimit(arr, i) {
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
if (_i == null) return;
var _arr = [];
var _n = true;
var _d = false;
var _s, _e;
try {
for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);
if (i && _arr.length === i) break;
}
} catch (err) {
_d = true;
_e = err;
} finally {
try {
if (!_n && _i["return"] != null) _i["return"]();
} finally {
if (_d) throw _e;
}
}
return _arr;
}
function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
var items = {
'theme': {
localStorage: 'tablerTheme',
default: 'light'
},
'menu-position': {
localStorage: 'tablerMenuPosition',
default: 'top'
},
'menu-behavior': {
localStorage: 'tablerMenuBehavior',
default: 'sticky'
},
'container-layout': {
localStorage: 'tablerContainerLayout',
default: 'boxed'
}
};
var config = {};
for (var _i = 0, _Object$entries = Object.entries(items); _i < _Object$entries.length; _i++) {
var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
key = _Object$entries$_i[0],
params = _Object$entries$_i[1];
config[key] = localStorage.getItem(params.localStorage) ? localStorage.getItem(params.localStorage) : params.default;
}
var parseUrl = function parseUrl() {
var search = window.location.search.substring(1);
var params = search.split('&');
for (var i = 0; i < params.length; i++) {
var arr = params[i].split('=');
var _key = arr[0];
var value = arr[1];
if (!!items[_key]) {
localStorage.setItem(items[_key].localStorage, value);
config[_key] = value;
}
}
};
var toggleFormControls = function toggleFormControls(form) {
for (var _i2 = 0, _Object$entries2 = Object.entries(items); _i2 < _Object$entries2.length; _i2++) {
var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i2], 2),
_key2 = _Object$entries2$_i[0];
_Object$entries2$_i[1];
var elem = form.querySelector("[name=\"settings-".concat(_key2, "\"][value=\"").concat(config[_key2], "\"]"));
if (elem) {
elem.checked = true;
}
}
};
var updateBodyClasses = function updateBodyClasses() {
document.body.classList.remove('theme-dark');
document.body.classList.remove('theme-light');
document.body.classList.add("theme-".concat(config.theme));
};
var submitForm = function submitForm(form) {
for (var _i3 = 0, _Object$entries3 = Object.entries(items); _i3 < _Object$entries3.length; _i3++) {
var _Object$entries3$_i = _slicedToArray(_Object$entries3[_i3], 2),
_key3 = _Object$entries3$_i[0],
_params2 = _Object$entries3$_i[1];
var value = form.querySelector("[name=\"settings-".concat(_key3, "\"]:checked")).value;
localStorage.setItem(_params2.localStorage, value);
config[_key3] = value;
}
updateBodyClasses();
window.dispatchEvent(new Event('resize'));
new bootstrap.Offcanvas(form).hide();
};
parseUrl();
updateBodyClasses();
var form = document.querySelector('#offcanvasSettings');
if (form) {
form.addEventListener('submit', function (e) {
e.preventDefault();
submitForm(form);
});
toggleFormControls(form);
}
}));
demo/dist/js/demo.min.js
Vendored
+9
View File
@@ -0,0 +1,9 @@
/*!
* Tabler v1.0.0-beta5 (https://tabler.io)
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
*/
!function(e){"function"==typeof define&&define.amd?define(e):e()}(function(){"use strict";function e(e,r){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==r)return;var n,o,a=[],l=!0,c=!1;try{for(r=r.call(e);!(l=(n=r.next()).done)&&(a.push(n.value),!t||a.length!==t);l=!0);}catch(e){c=!0,o=e}finally{try{l||null==r.return||r.return()}finally{if(c)throw o}}return a}(e,r)||function(e,r){if(!e)return;if("string"==typeof e)return t(e,r);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return t(e,r)}(e,r)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function t(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}for(var r={theme:{localStorage:"tablerTheme",default:"light"},"menu-position":{localStorage:"tablerMenuPosition",default:"top"},"menu-behavior":{localStorage:"tablerMenuBehavior",default:"sticky"},"container-layout":{localStorage:"tablerContainerLayout",default:"boxed"}},n={},o=0,a=Object.entries(r);o<a.length;o++){var l=e(a[o],2),c=l[0],i=l[1];n[c]=localStorage.getItem(i.localStorage)?localStorage.getItem(i.localStorage):i.default}var u=function(){document.body.classList.remove("theme-dark"),document.body.classList.remove("theme-light"),document.body.classList.add("theme-".concat(n.theme))};!function(){for(var e=window.location.search.substring(1).split("&"),t=0;t<e.length;t++){var o=e[t].split("="),a=o[0],l=o[1];r[a]&&(localStorage.setItem(r[a].localStorage,l),n[a]=l)}}(),u();var s=document.querySelector("#offcanvasSettings");s&&(s.addEventListener("submit",function(t){t.preventDefault(),function(t){for(var o=0,a=Object.entries(r);o<a.length;o++){var l=e(a[o],2),c=l[0],i=l[1],s=t.querySelector('[name="settings-'.concat(c,'"]:checked')).value;localStorage.setItem(i.localStorage,s),n[c]=s}u(),window.dispatchEvent(new Event("resize")),new bootstrap.Offcanvas(t).hide()}(s)}),function(t){for(var o=0,a=Object.entries(r);o<a.length;o++){var l=e(a[o],2),c=l[0];l[1];var i=t.querySelector('[name="settings-'.concat(c,'"][value="').concat(n[c],'"]'));i&&(i.checked=!0)}}(s))});
demo/dist/js/tabler.esm.js
Vendored
+2 -2
View File
@@ -1,6 +1,6 @@
/*!
* Tabler v1.0.0-beta4 (https://tabler.io)
* @version 1.0.0-beta4
* Tabler v1.0.0-beta5 (https://tabler.io)
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
demo/dist/js/tabler.esm.min.js
Vendored
+2 -2
View File
@@ -1,6 +1,6 @@
/*!
* Tabler v1.0.0-beta4 (https://tabler.io)
* @version 1.0.0-beta4
* Tabler v1.0.0-beta5 (https://tabler.io)
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
demo/dist/js/tabler.js
Vendored
+2 -2
View File
@@ -1,6 +1,6 @@
/*!
* Tabler v1.0.0-beta4 (https://tabler.io)
* @version 1.0.0-beta4
* Tabler v1.0.0-beta5 (https://tabler.io)
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
demo/dist/js/tabler.min.js
Vendored
+2 -2
View File
@@ -1,6 +1,6 @@
/*!
* Tabler v1.0.0-beta4 (https://tabler.io)
* @version 1.0.0-beta4
* Tabler v1.0.0-beta5 (https://tabler.io)
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
demo/dist/libs/litepicker/dist/litepicker.js
Vendored
+3 -3
View File
File diff suppressed because one or more lines are too long
demo/docs/alerts.html
+18 -13
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -658,7 +660,7 @@
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
Changelog
<span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
</a>
</li>
</ul>
@@ -1262,7 +1264,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -1286,7 +1288,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -1298,5 +1302,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script src="../dist/js/demo.min.js"></script>
</body>
</html>
demo/docs/autosize.html
+19 -13
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -658,7 +660,7 @@
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
Changelog
<span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
</a>
</li>
</ul>
@@ -673,6 +675,7 @@
</div>
<p>The autosize element will automatically adjust the textarea height and make it easier for users to follow as they type.</p>
</div>
<p>To be able to use the autosize in your application you will need to install the autosize dependency with <code class="language-plaintext highlighter-rouge">npm install autosize</code>.</p>
<h2 id="default-markup">Default markup</h2>
<p>Add the autosize element to your input to make it automatically adjust to the length of a text as a user types it.</p>
<div class="example no_toc_section">
@@ -695,7 +698,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -719,7 +722,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -731,5 +736,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script src="../dist/js/demo.min.js"></script>
</body>
</html>
demo/docs/avatars.html
+18 -13
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -658,7 +660,7 @@
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
Changelog
<span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
</a>
</li>
</ul>
@@ -905,7 +907,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -929,7 +931,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -941,5 +945,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script src="../dist/js/demo.min.js"></script>
</body>
</html>
demo/docs/badges.html
+18 -13
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -658,7 +660,7 @@
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
Changelog
<span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
</a>
</li>
</ul>
@@ -932,7 +934,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -956,7 +958,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -968,5 +972,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script src="../dist/js/demo.min.js"></script>
</body>
</html>
demo/docs/borders.html
+18 -13
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -658,7 +660,7 @@
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
Changelog
<span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
</a>
</li>
</ul>
@@ -801,7 +803,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -825,7 +827,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -837,5 +841,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script src="../dist/js/demo.min.js"></script>
</body>
</html>
demo/docs/breadcrumb.html
+18 -13
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -658,7 +660,7 @@
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
Changelog
<span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
</a>
</li>
</ul>
@@ -784,7 +786,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -808,7 +810,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -820,5 +824,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script src="../dist/js/demo.min.js"></script>
</body>
</html>
demo/docs/browser-support.html
+18 -13
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -658,7 +660,7 @@
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
Changelog
<span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
</a>
</li>
</ul>
@@ -725,7 +727,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -749,7 +751,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -761,5 +765,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script src="../dist/js/demo.min.js"></script>
</body>
</html>
demo/docs/buttons.html
+70 -18
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -658,7 +660,7 @@
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
Changelog
<span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
</a>
</li>
</ul>
@@ -905,7 +907,7 @@
<div class="example no_toc_section example-centered">
<div class="example-content">
<div class="btn-list">
<a href="javascript:void(0)" class="btn btn-white btn-square">
<a href="javascript:void(0)" class="btn btn-square">
White
</a>
</div>
@@ -913,7 +915,7 @@
</div>
<div class="example-code">
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-white btn-square"</span><span class="nt">&gt;</span>
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-square"</span><span class="nt">&gt;</span>
White
<span class="nt">&lt;/a&gt;</span></code></pre>
</figure>
@@ -923,7 +925,7 @@
<div class="example no_toc_section example-centered">
<div class="example-content">
<div class="btn-list">
<a href="javascript:void(0)" class="btn btn-white btn-pill">
<a href="javascript:void(0)" class="btn btn-pill">
White
</a>
</div>
@@ -931,7 +933,7 @@
</div>
<div class="example-code">
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-white btn-pill"</span><span class="nt">&gt;</span>
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-pill"</span><span class="nt">&gt;</span>
White
<span class="nt">&lt;/a&gt;</span></code></pre>
</figure>
@@ -941,12 +943,59 @@
<div class="example no_toc_section example-centered">
<div class="example-content">
<div class="btn-list">
<a href="javascript:void(0)" class="btn btn-outline-primary">
Primary
</a>
<a href="javascript:void(0)" class="btn btn-outline-secondary">
Secondary
</a>
<a href="javascript:void(0)" class="btn btn-outline-success">
Success
</a>
<a href="javascript:void(0)" class="btn btn-outline-warning">
Warning
</a>
<a href="javascript:void(0)" class="btn btn-outline-danger">
Danger
</a>
<a href="javascript:void(0)" class="btn btn-outline-info">
Info
</a>
<a href="javascript:void(0)" class="btn btn-outline-light">
Light
</a>
<a href="javascript:void(0)" class="btn btn-outline-dark">
Dark
</a>
</div>
</div>
</div>
<div class="example-code">
<figure class="highlight">
<pre><code class="language-html" data-lang="html"></code></pre>
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-outline-primary"</span><span class="nt">&gt;</span>
Primary
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-outline-secondary"</span><span class="nt">&gt;</span>
Secondary
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-outline-success"</span><span class="nt">&gt;</span>
Success
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-outline-warning"</span><span class="nt">&gt;</span>
Warning
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-outline-danger"</span><span class="nt">&gt;</span>
Danger
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-outline-info"</span><span class="nt">&gt;</span>
Info
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-outline-light"</span><span class="nt">&gt;</span>
Light
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-outline-dark"</span><span class="nt">&gt;</span>
Dark
<span class="nt">&lt;/a&gt;</span></code></pre>
</figure>
</div>
<h2 id="button-size">Button size</h2>
@@ -1697,7 +1746,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -1721,7 +1770,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -1733,5 +1784,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script src="../dist/js/demo.min.js"></script>
</body>
</html>
demo/docs/cards.html
+18 -13
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -658,7 +660,7 @@
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
Changelog
<span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
</a>
</li>
</ul>
@@ -1195,7 +1197,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -1219,7 +1221,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -1231,5 +1235,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script src="../dist/js/demo.min.js"></script>
</body>
</html>
demo/docs/carousel.html
+18 -13
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -658,7 +660,7 @@
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
Changelog
<span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
</a>
</li>
</ul>
@@ -768,7 +770,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -792,7 +794,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -804,5 +808,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script src="../dist/js/demo.min.js"></script>
</body>
</html>
demo/docs/charts.html
+20 -14
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -658,7 +660,7 @@
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
Changelog
<span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
</a>
</li>
</ul>
@@ -673,7 +675,8 @@
</div>
<p>Tabler uses ApexCharts - a free and open-source modern charting library that helps developers to create beautiful and interactive visualizations for web pages.</p>
</div>
<p><a href="https://apexcharts.com/">ApexCharts</a> documentation.</p>
<p>To be able to use the charts in your application you will need to install the apexcharts dependency with <code class="language-plaintext highlighter-rouge">npm install apexcharts</code>.</p>
<p>See also the <a href="https://apexcharts.com/">ApexCharts</a> documentation.</p>
<h2 id="line-chart">Line Chart</h2>
<p>Line charts are a typical pictorial representation that depicts trends and behaviors over time.</p>
<div class="example no_toc_section example-bg">
@@ -1223,7 +1226,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -1247,7 +1250,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -1260,6 +1265,7 @@
<script src="../dist/libs/apexcharts/dist/apexcharts.min.js"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script src="../dist/js/demo.min.js"></script>
<script>
// @formatter:off
document.addEventListener("DOMContentLoaded", function () {
demo/docs/colors.html
+18 -13
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -658,7 +660,7 @@
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
Changelog
<span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
</a>
</li>
</ul>
@@ -916,7 +918,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -940,7 +942,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -952,5 +956,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script src="../dist/js/demo.min.js"></script>
</body>
</html>
demo/docs/countup.html
+19 -13
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -658,7 +660,7 @@
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
Changelog
<span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
</a>
</li>
</ul>
@@ -673,6 +675,7 @@
</div>
<p>A countup element is used to display numerical data in an interesting way and make the interface more interactive. All the available options can be found [here](https://inorganik.github.io/countUp.js/)</p>
</div>
<p>To be able to use the countup in your application you will need to install the countup.js dependency with <code class="language-plaintext highlighter-rouge">npm install countup.js</code>.</p>
<h2 id="default-countup">Default countup</h2>
<p>To create a countup, add <code class="language-plaintext highlighter-rouge">data-countup</code> to any HTML text tag and specify the number which is to be reached. The animation will be triggered as soon as the number enters the viewport.</p>
<div class="example no_toc_section">
@@ -850,7 +853,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -874,7 +877,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -887,5 +892,6 @@
<script src="../dist/libs/countup.js/dist/countUp.js"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script src="../dist/js/demo.min.js"></script>
</body>
</html>
demo/docs/cursors.html
+87 -19
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -658,7 +660,7 @@
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
Changelog
<span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
</a>
</li>
</ul>
@@ -682,6 +684,15 @@
<li><code class="language-plaintext highlighter-rouge">.cursor-not-allowed</code> - a cursor which shows that a user is not allowed to perform an action on an element</li>
<li><code class="language-plaintext highlighter-rouge">.cursor-zoom-in</code> - a cursor which shows that a user can zoom in</li>
<li><code class="language-plaintext highlighter-rouge">.cursor-zoom-out</code> - a cursor which shows that a user can zoom out</li>
<li><code class="language-plaintext highlighter-rouge">.cursor-default</code> - the default cursor</li>
<li><code class="language-plaintext highlighter-rouge">.cursor-none</code> - no cursor</li>
<li><code class="language-plaintext highlighter-rouge">.cursor-help</code> - a cursor which shows that help information is available</li>
<li><code class="language-plaintext highlighter-rouge">.cursor-progress</code> - a cursor which shows that an action is in progress</li>
<li><code class="language-plaintext highlighter-rouge">.cursor-wait</code> - a cursor which shows that a user cannot interact with the element because it is busy</li>
<li><code class="language-plaintext highlighter-rouge">.cursor-text</code> - a cursor which shows that a user can type</li>
<li><code class="language-plaintext highlighter-rouge">.cursor-v-text</code> - a cursor which shows that a user can type in a vertical text input</li>
<li><code class="language-plaintext highlighter-rouge">.cursor-grab</code> - a cursor which shows that a user can grab an element</li>
<li><code class="language-plaintext highlighter-rouge">.cursor-grabbing</code> - a cursor which shows that a user is grabbing an element</li>
</ul>
<div class="example no_toc_section">
<div class="example-content">
@@ -695,15 +706,42 @@
<div class="col-4 mb-3">
<div class="cursor-move bg-light py-3">Cursor move</div>
</div>
<div class="col-4">
<div class="col-4 mb-3">
<div class="cursor-not-allowed bg-light py-3">Cursor not allowed</div>
</div>
<div class="col-4">
<div class="col-4 mb-3">
<div class="cursor-zoom-in bg-light py-3">Cursor zoom in</div>
</div>
<div class="col-4">
<div class="col-4 mb-3">
<div class="cursor-zoom-out bg-light py-3">Cursor zoom out</div>
</div>
<div class="col-4 mb-3">
<div class="cursor-default bg-light py-3">Cursor default</div>
</div>
<div class="col-4 mb-3">
<div class="cursor-none bg-light py-3">Cursor none</div>
</div>
<div class="col-4 mb-3">
<div class="cursor-help bg-light py-3">Cursor help</div>
</div>
<div class="col-4 mb-3">
<div class="cursor-progress bg-light py-3">Cursor progress</div>
</div>
<div class="col-4 mb-3">
<div class="cursor-wait bg-light py-3">Cursor wait</div>
</div>
<div class="col-4 mb-3">
<div class="cursor-text bg-light py-3">Cursor text</div>
</div>
<div class="col-4">
<div class="cursor-v-text bg-light py-3">Cursor vertical text</div>
</div>
<div class="col-4">
<div class="cursor-grab bg-light py-3">Cursor grab</div>
</div>
<div class="col-4">
<div class="cursor-grabbing bg-light py-3">Cursor grabbing</div>
</div>
</div>
</div>
</div>
@@ -719,15 +757,42 @@
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-4 mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"cursor-move bg-light py-3"</span><span class="nt">&gt;</span>Cursor move<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-4"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-4 mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"cursor-not-allowed bg-light py-3"</span><span class="nt">&gt;</span>Cursor not allowed<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-4"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-4 mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"cursor-zoom-in bg-light py-3"</span><span class="nt">&gt;</span>Cursor zoom in<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-4"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-4 mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"cursor-zoom-out bg-light py-3"</span><span class="nt">&gt;</span>Cursor zoom out<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-4 mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"cursor-default bg-light py-3"</span><span class="nt">&gt;</span>Cursor default<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-4 mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"cursor-none bg-light py-3"</span><span class="nt">&gt;</span>Cursor none<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-4 mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"cursor-help bg-light py-3"</span><span class="nt">&gt;</span>Cursor help<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-4 mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"cursor-progress bg-light py-3"</span><span class="nt">&gt;</span>Cursor progress<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-4 mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"cursor-wait bg-light py-3"</span><span class="nt">&gt;</span>Cursor wait<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-4 mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"cursor-text bg-light py-3"</span><span class="nt">&gt;</span>Cursor text<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-4"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"cursor-v-text bg-light py-3"</span><span class="nt">&gt;</span>Cursor vertical text<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-4"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"cursor-grab bg-light py-3"</span><span class="nt">&gt;</span>Cursor grab<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-4"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"cursor-grabbing bg-light py-3"</span><span class="nt">&gt;</span>Cursor grabbing<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</figure>
</div>
@@ -739,7 +804,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -763,7 +828,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -775,5 +842,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script src="../dist/js/demo.min.js"></script>
</body>
</html>
demo/docs/divider.html
+18 -13
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -658,7 +660,7 @@
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
Changelog
<span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
</a>
</li>
</ul>
@@ -798,7 +800,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -822,7 +824,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -834,5 +838,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script src="../dist/js/demo.min.js"></script>
</body>
</html>
demo/docs/download.html
+37 -18
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -658,7 +660,7 @@
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
Changelog
<span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
</a>
</li>
</ul>
@@ -677,17 +679,17 @@
<p>All files included in <code class="language-plaintext highlighter-rouge">@tabler/core</code> npm package are available over a unpkg CDN. Use it to deliver cached version of Tabler’s compiled CSS and JS to your project.</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@1.0.0-beta4/dist/js/tabler.min.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
<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-beta4/dist/css/tabler.min.css"</span><span class="nt">&gt;</span>
<pre class="highlight"><code><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://unpkg.com/@tabler/core@1.0.0-beta5/dist/js/tabler.min.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
<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-beta5/dist/css/tabler.min.css"</span><span class="nt">&gt;</span>
</code></pre>
</div>
</div>
<p>You can also include additional Tabler plugins:</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-beta4/dist/css/tabler-flags.min.css"</span><span class="nt">&gt;</span>
<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-beta4/dist/css/tabler-payments.min.css"</span><span class="nt">&gt;</span>
<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-beta4/dist/css/tabler-vendors.min.css"</span><span class="nt">&gt;</span>
<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-beta5/dist/css/tabler-flags.min.css"</span><span class="nt">&gt;</span>
<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-beta5/dist/css/tabler-payments.min.css"</span><span class="nt">&gt;</span>
<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-beta5/dist/css/tabler-vendors.min.css"</span><span class="nt">&gt;</span>
</code></pre>
</div>
</div>
@@ -699,6 +701,20 @@
</code></pre>
</div>
</div>
<p>Tabler uses other packages to enhance the functionality for example charts and input masks. These are not automatically installed to avoid huge
dependency trees and need to be installed by using npm install. We support the following packages as of writing.</p>
<ul>
<li><a href="https://apexcharts.com/">apexcharts</a></li>
<li><a href="http://www.jacklmoore.com/autosize/">autosize</a></li>
<li><a href="https://github.com/Choices-js/Choices">choices.js</a></li>
<li><a href="https://inorganik.github.io/countUp.js/">countup.js</a></li>
<li><a href="https://flatpickr.js.org/">flatpickr</a></li>
<li><a href="https://imask.js.org/">imask</a></li>
<li><a href="https://litepicker.com/">litepicker</a></li>
<li><a href="https://refreshless.com/nouislider/">nouislider</a></li>
<li><a href="https://tom-select.js.org/">tom-select</a></li>
</ul>
<p>For the complete list of supported packages you can check the peerDependencies section in our <a href="https://github.com/tabler/tabler/blob/dev/package.json">package.json</a></p>
</div>
</div>
</div>
@@ -707,7 +723,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -731,7 +747,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -743,5 +761,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script src="../dist/js/demo.min.js"></script>
</body>
</html>
demo/docs/dropdowns.html
+18 -13
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -658,7 +660,7 @@
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
Changelog
<span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
</a>
</li>
</ul>
@@ -1066,7 +1068,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -1090,7 +1092,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -1102,5 +1106,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script src="../dist/js/demo.min.js"></script>
</body>
</html>
demo/docs/empty.html
+18 -13
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -658,7 +660,7 @@
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
Changelog
<span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
</a>
</li>
</ul>
@@ -801,7 +803,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -825,7 +827,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -837,5 +841,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script src="../dist/js/demo.min.js"></script>
</body>
</html>
demo/docs/flags.html
+19 -14
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -658,7 +660,7 @@
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
Changelog
<span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
</a>
</li>
</ul>
@@ -676,7 +678,7 @@
<p>This part of Tabler is distributed as plugin. To enable it you should include <code>tabler-flags.css</code> or <code>tabler-flags.min.css</code> file to your page.</p>
<p>You can also include plugin via CDN:</p>
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><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-beta4/dist/css/tabler-flags.min.css"</span><span class="nt">&gt;</span></code></pre>
<pre><code class="language-html" data-lang="html"><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-beta5/dist/css/tabler-flags.min.css"</span><span class="nt">&gt;</span></code></pre>
</figure>
</div>
<h2 id="flag">Flag</h2>
@@ -2233,7 +2235,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -2257,7 +2259,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -2269,5 +2273,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script src="../dist/js/demo.min.js"></script>
</body>
</html>
demo/docs/form-color-check.html
+18 -13
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -658,7 +660,7 @@
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
Changelog
<span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
</a>
</li>
</ul>
@@ -999,7 +1001,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -1023,7 +1025,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -1035,5 +1039,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script src="../dist/js/demo.min.js"></script>
</body>
</html>
demo/docs/form-elements.html
+18 -13
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -658,7 +660,7 @@
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
Changelog
<span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
</a>
</li>
</ul>
@@ -1509,7 +1511,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -1533,7 +1535,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -1546,6 +1550,7 @@
<script src="../dist/libs/nouislider/dist/nouislider.min.js"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script src="../dist/js/demo.min.js"></script>
<script>
// @formatter:off
noUiSlider.create(document.getElementById('range-simple'), {
demo/docs/form-fieldset.html
+18 -13
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -658,7 +660,7 @@
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
Changelog
<span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
</a>
</li>
</ul>
@@ -733,7 +735,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -757,7 +759,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -769,5 +773,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script src="../dist/js/demo.min.js"></script>
</body>
</html>
demo/docs/form-helpers.html
+18 -13
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -658,7 +660,7 @@
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
Changelog
<span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
</a>
</li>
</ul>
@@ -695,7 +697,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -719,7 +721,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -731,5 +735,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script src="../dist/js/demo.min.js"></script>
</body>
</html>
demo/docs/form-image-check.html
+18 -13
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -658,7 +660,7 @@
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
Changelog
<span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
</a>
</li>
</ul>
@@ -1043,7 +1045,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -1067,7 +1069,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -1079,5 +1083,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script src="../dist/js/demo.min.js"></script>
</body>
</html>
demo/docs/form-selectboxes.html
+18 -13
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -658,7 +660,7 @@
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
Changelog
<span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
</a>
</li>
</ul>
@@ -1147,7 +1149,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -1171,7 +1173,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -1183,5 +1187,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script src="../dist/js/demo.min.js"></script>
</body>
</html>
demo/docs/form-validation.html
+18 -13
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -658,7 +660,7 @@
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
Changelog
<span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
</a>
</li>
</ul>
@@ -721,7 +723,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -745,7 +747,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -757,5 +761,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script src="../dist/js/demo.min.js"></script>
</body>
</html>
demo/docs/getting-started.html
+18 -13
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -658,7 +660,7 @@
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
Changelog
<span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
</a>
</li>
</ul>
@@ -705,7 +707,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -729,7 +731,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -741,5 +745,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script src="../dist/js/demo.min.js"></script>
</body>
</html>
demo/docs/icons.html
+18 -13
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -658,7 +660,7 @@
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
Changelog
<span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
</a>
</li>
</ul>
@@ -772,7 +774,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -796,7 +798,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -808,5 +812,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script src="../dist/js/demo.min.js"></script>
</body>
</html>
demo/docs/index.html
+18 -13
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -658,7 +660,7 @@
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
Changelog
<span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
</a>
</li>
</ul>
@@ -858,7 +860,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -882,7 +884,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -894,5 +898,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script src="../dist/js/demo.min.js"></script>
</body>
</html>
demo/docs/input-mask.html
+19 -13
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -658,7 +660,7 @@
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
Changelog
<span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
</a>
</li>
</ul>
@@ -673,6 +675,7 @@
</div>
<p>An input mask is a used to clarify the input format required in a given field and is helpful for users, removing confusion and reducing the number of validation errors.</p>
</div>
<p>To be able to use the input mask in your application you will need to install the imask dependency with <code class="language-plaintext highlighter-rouge">npm install imask</code>.</p>
<h2 id="default-markup">Default markup</h2>
<p>Use an input mask in the fields where users have to enter their phone number, to make the formatting rules clear and help them avoid confusion.</p>
<div class="example no_toc_section">
@@ -695,7 +698,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -719,7 +722,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -731,5 +736,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script src="../dist/js/demo.min.js"></script>
</body>
</html>
demo/docs/interactions.html
+18 -13
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -658,7 +660,7 @@
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
Changelog
<span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
</a>
</li>
</ul>
@@ -711,7 +713,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -735,7 +737,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -747,5 +751,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script src="../dist/js/demo.min.js"></script>
</body>
</html>
demo/docs/modals.html
+22 -17
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -658,7 +660,7 @@
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
Changelog
<span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
</a>
</li>
</ul>
@@ -730,7 +732,7 @@
<div class="modal-footer">
<div class="w-100">
<div class="row">
<div class="col"><a href="javascript:void(0)" class="btn btn-white w-100" data-bs-dismiss="modal">
<div class="col"><a href="javascript:void(0)" class="btn w-100" data-bs-dismiss="modal">
Cancel
</a></div>
<div class="col"><a href="javascript:void(0)" class="btn btn-danger w-100" data-bs-dismiss="modal">
@@ -758,7 +760,7 @@
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-footer"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"w-100"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-white w-100"</span> <span class="na">data-bs-dismiss=</span><span class="s">"modal"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn w-100"</span> <span class="na">data-bs-dismiss=</span><span class="s">"modal"</span><span class="nt">&gt;</span>
Cancel
<span class="nt">&lt;/a&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-danger w-100"</span> <span class="na">data-bs-dismiss=</span><span class="s">"modal"</span><span class="nt">&gt;</span>
@@ -787,7 +789,7 @@
<div class="modal-footer">
<div class="w-100">
<div class="row">
<div class="col"><a href="javascript:void(0)" class="btn btn-white w-100" data-bs-dismiss="modal">
<div class="col"><a href="javascript:void(0)" class="btn w-100" data-bs-dismiss="modal">
Go to dashboard
</a></div>
<div class="col"><a href="javascript:void(0)" class="btn btn-success w-100" data-bs-dismiss="modal">
@@ -815,7 +817,7 @@
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"modal-footer"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"w-100"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-white w-100"</span> <span class="na">data-bs-dismiss=</span><span class="s">"modal"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn w-100"</span> <span class="na">data-bs-dismiss=</span><span class="s">"modal"</span><span class="nt">&gt;</span>
Go to dashboard
<span class="nt">&lt;/a&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">&gt;&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-success w-100"</span> <span class="na">data-bs-dismiss=</span><span class="s">"modal"</span><span class="nt">&gt;</span>
@@ -1046,7 +1048,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -1070,7 +1072,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -1082,5 +1086,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script src="../dist/js/demo.min.js"></script>
</body>
</html>
demo/docs/page-headers.html
+24 -19
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -658,7 +660,7 @@
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
Changelog
<span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
</a>
</li>
</ul>
@@ -906,12 +908,12 @@
</div>
<div class="col-auto">
<div class="btn-list">
<a href="javascript:void(0)" class="btn btn-white">
<a href="javascript:void(0)" class="btn">
<!-- Download SVG icon from http://tabler-icons.io/i/edit -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
Edit
</a>
<a href="javascript:void(0)" class="btn btn-white d-none d-md-inline-flex">
<a href="javascript:void(0)" class="btn d-none d-md-inline-flex">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
Subscribe
@@ -937,12 +939,12 @@
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-list"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-white"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/edit --&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
Edit
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-white d-none d-md-inline-flex"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn d-none d-md-inline-flex"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/bell --&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
Subscribe
@@ -973,7 +975,7 @@
</div>
<div class="col-auto">
<div class="btn-list">
<a href="javascript:void(0)" class="btn btn-white d-none d-md-inline-flex">
<a href="javascript:void(0)" class="btn d-none d-md-inline-flex">
<!-- Download SVG icon from http://tabler-icons.io/i/edit -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 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>
Edit
@@ -1006,7 +1008,7 @@
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"btn-list"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-white d-none d-md-inline-flex"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn d-none d-md-inline-flex"</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- Download SVG icon from http://tabler-icons.io/i/edit --&gt;</span>
<span class="c">&lt;!-- SVG icon code --&gt;</span>
Edit
@@ -1028,7 +1030,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -1052,7 +1054,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -1166,5 +1170,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script src="../dist/js/demo.min.js"></script>
</body>
</html>
demo/docs/payments.html
+19 -14
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -658,7 +660,7 @@
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
Changelog
<span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
</a>
</li>
</ul>
@@ -676,7 +678,7 @@
<p>This part of Tabler is distributed as plugin. To enable it you should include <code>tabler-payments.css</code> or <code>tabler-payments.min.css</code> file to your page.</p>
<p>You can also include plugin via CDN:</p>
<figure class="highlight">
<pre><code class="language-html" data-lang="html"><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-beta4/dist/css/tabler-payments.min.css"</span><span class="nt">&gt;</span></code></pre>
<pre><code class="language-html" data-lang="html"><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-beta5/dist/css/tabler-payments.min.css"</span><span class="nt">&gt;</span></code></pre>
</figure>
</div>
<h2 id="payment">Payment</h2>
@@ -1197,7 +1199,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -1221,7 +1223,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -1233,5 +1237,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script src="../dist/js/demo.min.js"></script>
</body>
</html>
demo/docs/progress.html
+18 -13
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -658,7 +660,7 @@
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
Changelog
<span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
</a>
</li>
</ul>
@@ -826,7 +828,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -850,7 +852,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -862,5 +866,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script src="../dist/js/demo.min.js"></script>
</body>
</html>
demo/docs/range-slider.html
+19 -13
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -658,7 +660,7 @@
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
Changelog
<span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
</a>
</li>
</ul>
@@ -672,6 +674,7 @@
<h1 class="m-0">Range slider</h1>
</div>
</div>
<p>To be able to use the range slider in your application you will need to install the nouislider dependency with <code class="language-plaintext highlighter-rouge">npm install nouislider</code>.</p>
<p>All options and features can be found <a href="https://refreshless.com/nouislider/"><strong>here</strong></a>.</p>
<h2 id="basic-range-slider">Basic range slider</h2>
<div class="example no_toc_section">
@@ -864,7 +867,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -888,7 +891,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -901,6 +906,7 @@
<script src="../dist/libs/nouislider/dist/nouislider.min.js"></script>
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script src="../dist/js/demo.min.js"></script>
<script>
let sliderTriggerList = [].slice.call(document.querySelectorAll("[data-slider]"));
sliderTriggerList.map(function (sliderTriggerEl) {
demo/docs/ribbons.html
+18 -13
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -658,7 +660,7 @@
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
Changelog
<span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
</a>
</li>
</ul>
@@ -828,7 +830,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -852,7 +854,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -864,5 +868,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script src="../dist/js/demo.min.js"></script>
</body>
</html>
demo/docs/skeleton.html
+18 -13
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -658,7 +660,7 @@
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
Changelog
<span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
</a>
</li>
</ul>
@@ -1109,7 +1111,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -1133,7 +1135,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -1145,5 +1149,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script src="../dist/js/demo.min.js"></script>
</body>
</html>
demo/docs/spinners.html
+18 -13
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -658,7 +660,7 @@
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
Changelog
<span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
</a>
</li>
</ul>
@@ -876,7 +878,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -900,7 +902,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -912,5 +916,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script src="../dist/js/demo.min.js"></script>
</body>
</html>
demo/docs/steps.html
+18 -13
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -658,7 +660,7 @@
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
Changelog
<span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
</a>
</li>
</ul>
@@ -870,7 +872,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -894,7 +896,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -906,5 +910,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script src="../dist/js/demo.min.js"></script>
</body>
</html>
demo/docs/switch-icon.html
+18 -13
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -658,7 +660,7 @@
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
Changelog
<span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
</a>
</li>
</ul>
@@ -885,7 +887,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -909,7 +911,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -921,5 +925,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script src="../dist/js/demo.min.js"></script>
</body>
</html>
demo/docs/tables.html
+18 -13
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -658,7 +660,7 @@
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
Changelog
<span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
</a>
</li>
</ul>
@@ -1173,7 +1175,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -1197,7 +1199,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -1209,5 +1213,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script src="../dist/js/demo.min.js"></script>
</body>
</html>
demo/docs/tabs.html
+18 -13
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -658,7 +660,7 @@
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
Changelog
<span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
</a>
</li>
</ul>
@@ -1118,7 +1120,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -1142,7 +1144,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -1154,5 +1158,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script src="../dist/js/demo.min.js"></script>
</body>
</html>
demo/docs/timelines.html
+18 -13
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -658,7 +660,7 @@
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
Changelog
<span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
</a>
</li>
</ul>
@@ -1105,7 +1107,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -1129,7 +1131,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -1141,5 +1145,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script src="../dist/js/demo.min.js"></script>
</body>
</html>
demo/docs/toasts.html
+18 -13
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -658,7 +660,7 @@
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
Changelog
<span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
</a>
</li>
</ul>
@@ -810,7 +812,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -834,7 +836,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -846,5 +850,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script src="../dist/js/demo.min.js"></script>
</body>
</html>
demo/docs/tooltips.html
+18 -13
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -658,7 +660,7 @@
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
Changelog
<span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
</a>
</li>
</ul>
@@ -738,7 +740,7 @@ Tooltip with HTML
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -762,7 +764,9 @@ Tooltip with HTML
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -774,5 +778,6 @@ Tooltip with HTML
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script src="../dist/js/demo.min.js"></script>
</body>
</html>
demo/docs/typography.html
+18 -13
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="../dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="../dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -658,7 +660,7 @@
<li class="nav-item">
<a href="../changelog.html" class="nav-link">
Changelog
<span class="badge bg-blue-lt ms-auto">1.0.0-beta4</span>
<span class="badge bg-blue-lt ms-auto">1.0.0-beta5</span>
</a>
</li>
</ul>
@@ -989,7 +991,7 @@ Text <span class="nt">&lt;sup&gt;</span>Superscripted<span class="nt">&lt;/sup&g
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -1013,7 +1015,9 @@ Text <span class="nt">&lt;sup&gt;</span>Superscripted<span class="nt">&lt;/sup&g
All rights reserved.
</li>
<li class="list-inline-item">
<a href="../changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="../changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -1025,5 +1029,6 @@ Text <span class="nt">&lt;sup&gt;</span>Superscripted<span class="nt">&lt;/sup&g
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="../dist/js/tabler.min.js"></script>
<script src="../dist/js/demo.min.js"></script>
</body>
</html>
demo/dropdowns.html
+17 -12
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -602,7 +604,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -626,7 +628,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="./changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -638,5 +642,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script src="./dist/js/demo.min.js"></script>
</body>
</html>
demo/empty.html
+17 -12
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -365,7 +367,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -389,7 +391,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="./changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -401,5 +405,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script src="./dist/js/demo.min.js"></script>
</body>
</html>
demo/error-404.html
+3 -2
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased border-top-wide border-primary d-flex flex-column">
<body class=" border-top-wide border-primary d-flex flex-column">
<div class="page page-center">
<div class="container-tight py-4">
<div class="empty">
@@ -42,5 +42,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script src="./dist/js/demo.min.js"></script>
</body>
</html>
demo/error-500.html
+3 -2
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased border-top-wide border-primary d-flex flex-column">
<body class=" border-top-wide border-primary d-flex flex-column">
<div class="page page-center">
<div class="container-tight py-4">
<div class="empty">
@@ -42,5 +42,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script src="./dist/js/demo.min.js"></script>
</body>
</html>
demo/error-maintenance.html
+3 -2
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased border-top-wide border-primary d-flex flex-column">
<body class=" border-top-wide border-primary d-flex flex-column">
<div class="page page-center">
<div class="container-tight py-4">
<div class="empty">
@@ -43,5 +43,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script src="./dist/js/demo.min.js"></script>
</body>
</html>
demo/forgot-password.html
+4 -3
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,11 +20,11 @@
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased border-top-wide border-primary d-flex flex-column">
<body class=" border-top-wide border-primary d-flex flex-column">
<div class="page page-center">
<div class="container-tight py-4">
<div class="text-center mb-4">
<a href="."><img src="./static/logo.svg" height="36" alt=""></a>
<a href="." class="navbar-brand navbar-brand-autodark"><img src="./static/logo.svg" height="36" alt=""></a>
</div>
<form class="card card-md" action="." method="get">
<div class="card-body">
@@ -51,5 +51,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script src="./dist/js/demo.min.js"></script>
</body>
</html>
demo/form-elements.html
+17 -12
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -1843,7 +1845,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -1867,7 +1869,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="./changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -1882,6 +1886,7 @@
<script src="./dist/libs/tom-select/dist/js/tom-select.base.min.js"></script>
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script src="./dist/js/demo.min.js"></script>
<script>
// @formatter:off
noUiSlider.create(document.getElementById('range-simple'), {
demo/gallery.html
+17 -12
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -720,7 +722,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -744,7 +746,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="./changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -756,5 +760,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script src="./dist/js/demo.min.js"></script>
</body>
</html>
demo/icons.html
+604 -47
View File
File diff suppressed because one or more lines are too long
demo/index.html
+18 -13
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -600,7 +602,7 @@
<div class="card-title">Development activity</div>
</div>
<div class="position-relative">
<div class="position-absolute top-0 left-0 px-3 mt-1 w-50">
<div class="position-absolute top-0 left-0 px-3 mt-1 w-75">
<div class="row g-2">
<div class="col-auto">
<div class="chart-sparkline chart-sparkline-square" id="sparkline-activity"></div>
@@ -1760,7 +1762,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -1784,7 +1786,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="./changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -1899,6 +1903,7 @@
<script src="./dist/libs/apexcharts/dist/apexcharts.min.js"></script>
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script src="./dist/js/demo.min.js"></script>
<script>
// @formatter:off
document.addEventListener("DOMContentLoaded", function () {
demo/invoice.html
+17 -12
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -287,9 +295,6 @@
<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>
@@ -304,9 +309,6 @@
<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>
@@ -464,7 +466,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -488,7 +490,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="./changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -500,5 +504,6 @@
<!-- Libs JS -->
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script src="./dist/js/demo.min.js"></script>
</body>
</html>
demo/layout-combo.html
+26 -13
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<aside class="navbar navbar-vertical navbar-expand-lg navbar-dark">
<div class="container-fluid">
@@ -35,18 +35,26 @@
<div class="navbar-nav flex-row d-lg-none">
<div class="nav-item d-none d-md-flex me-3">
<div class="btn-list">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
Source code
</a>
<a href="https://github.com/sponsors/codecalm" class="btn btn-outline-white" target="_blank" rel="noreferrer">
<a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
<!-- Download SVG icon from http://tabler-icons.io/i/heart -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 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>
Sponsor
</a>
</div>
</div>
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -282,9 +290,6 @@
<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 active" href="./layout-combo.html" >
Combined
</a>
@@ -299,9 +304,6 @@
<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>
@@ -335,6 +337,14 @@
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-nav flex-row order-md-last">
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -636,7 +646,7 @@
<div class="card-title">Development activity</div>
</div>
<div class="position-relative">
<div class="position-absolute top-0 left-0 px-3 mt-1 w-50">
<div class="position-absolute top-0 left-0 px-3 mt-1 w-75">
<div class="row g-2">
<div class="col-auto">
<div class="chart-sparkline chart-sparkline-square" id="sparkline-activity"></div>
@@ -1796,7 +1806,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -1820,7 +1830,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="./changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -1935,6 +1947,7 @@
<script src="./dist/libs/apexcharts/dist/apexcharts.min.js"></script>
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script src="./dist/js/demo.min.js"></script>
<script>
// @formatter:off
document.addEventListener("DOMContentLoaded", function () {
demo/layout-condensed-dark.html
-2420
View File
File diff suppressed because it is too large Load Diff
demo/layout-condensed.html
+16 -11
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-beta4
* @version 1.0.0-beta5
* @link https://tabler.io
* Copyright 2018-2021 The Tabler Authors
* Copyright 2018-2021 codecalm.net Paweł Kuna
@@ -20,7 +20,7 @@
<link href="./dist/css/tabler-vendors.min.css" rel="stylesheet"/>
<link href="./dist/css/demo.min.css" rel="stylesheet"/>
</head>
<body class="antialiased">
<body >
<div class="wrapper">
<header class="navbar navbar-expand-md navbar-light d-print-none">
<div class="container-xl">
@@ -33,6 +33,14 @@
</a>
</h1>
<div class="navbar-nav flex-row order-md-last">
<a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/moon -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
</a>
<a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip" data-bs-placement="bottom">
<!-- Download SVG icon from http://tabler-icons.io/i/sun -->
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
</a>
<div class="nav-item dropdown d-none d-md-flex me-3">
<a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
<!-- Download SVG icon from http://tabler-icons.io/i/bell -->
@@ -269,9 +277,6 @@
<a class="dropdown-item active" 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>
@@ -286,9 +291,6 @@
<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>
@@ -571,7 +573,7 @@
<div class="card-title">Development activity</div>
</div>
<div class="position-relative">
<div class="position-absolute top-0 left-0 px-3 mt-1 w-50">
<div class="position-absolute top-0 left-0 px-3 mt-1 w-75">
<div class="row g-2">
<div class="col-auto">
<div class="chart-sparkline chart-sparkline-square" id="sparkline-activity"></div>
@@ -1731,7 +1733,7 @@
</div>
</div>
<footer class="footer footer-transparent d-print-none">
<div class="container">
<div class="container-xl">
<div class="row text-center align-items-center flex-row-reverse">
<div class="col-lg-auto ms-lg-auto">
<ul class="list-inline list-inline-dots mb-0">
@@ -1755,7 +1757,9 @@
All rights reserved.
</li>
<li class="list-inline-item">
<a href="./changelog.html" class="link-secondary" rel="noopener">v1.0.0-beta4</a>
<a href="./changelog.html" class="link-secondary" rel="noopener">
v1.0.0-beta5
</a>
</li>
</ul>
</div>
@@ -1870,6 +1874,7 @@
<script src="./dist/libs/apexcharts/dist/apexcharts.min.js"></script>
<!-- Tabler Core -->
<script src="./dist/js/tabler.min.js"></script>
<script src="./dist/js/demo.min.js"></script>
<script>
// @formatter:off
document.addEventListener("DOMContentLoaded", function () {
demo/layout-dark.html
-2449
View File
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