Merge branches 'dev' and 'dev-cursors-badges-colors' of...

Merge branches 'dev' and 'dev-cursors-badges-colors' of https://github.com/tabler/tabler into dev-cursors-badges-colors

 Conflicts:
	pages/colors.html

.editorconfig

@@ -10,8 +10,8 @@ indent_style=tab
 tab_width=3
 
 [*.html]
-indent_style=space
 indent_size=3
+insert_final_newline=false
 
 [*.md]
 indent_style=tab
@@ -20,12 +20,3 @@ tab_width=3
 [*.js.map]
 indent_style=tab
 indent_size=3
-
-[{*.css,*.scss}]
-indent_style=space
-indent_size=2
-insert_final_newline = true
-
-[{*.yml,*.yaml}]
-indent_style=space
-indent_size=2

README.md

@@ -16,7 +16,7 @@ Premium and Open Source dashboard template with responsive and high-quality UI.
 
 ## Status
 
-<a href="https://www.npmjs.com/package/tabler-ui"><a href="#backers" alt="sponsors on Open Collective"><img src="https://opencollective.com/tabler/backers/badge.svg" /></a> <a href="#sponsors" alt="Sponsors on Open Collective"><img src="https://opencollective.com/tabler/sponsors/badge.svg" /></a> <img src="https://img.shields.io/npm/dt/tabler-ui.svg" alt="Total Downloads"></a> <a href="https://github.com/tabler/tabler/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tabler-ui.svg" alt="License"></a> <a href="https://github.com/tabler/tabler/releases"><img src="https://img.shields.io/npm/v/tabler-ui.svg" alt="Latest Release"></a>
+<a href="https://www.npmjs.com/package/tabler-ui"><a href="#backers" alt="sponsors on Open Collective"><img src="https://opencollective.com/tabler/backers/badge.svg"/></a> <a href="#sponsors" alt="Sponsors on Open Collective"><img src="https://opencollective.com/tabler/sponsors/badge.svg"/></a> <img src="https://img.shields.io/npm/dt/tabler-ui.svg" alt="Total Downloads"></a> <a href="https://github.com/tabler/tabler/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tabler-ui.svg" alt="License"></a> <a href="https://github.com/tabler/tabler/releases"><img src="https://img.shields.io/npm/v/tabler-ui.svg" alt="Latest Release"></a>
 
 ## Features
 

js/tabler-charts.js

@@ -7,7 +7,7 @@
         color = $this.attr('data-spark-color') || 'blue',
         type = $this.attr('data-spark-type') || 'line';
 
-      const $div = $('<div />').html(data);
+      const $div = $('<div/>').html(data);
       $this.append($div);
 
       let strokeColor = tabler.colors[color],
@@ -169,9 +169,6 @@ if (window.Apex) {
 
     yaxis: {
       show: false,
-      labels: {
-        show: false,
-      },
     },
   };
 }

package.json

@@ -68,24 +68,24 @@
   "main": "dist/js/tabler.js",
   "homepage": "https://tabler.io",
   "devDependencies": {
-    "@babel/preset-env": "7.7.4",
+    "@babel/preset-env": "7.7.6",
     "browser-sync": "2.26.7",
     "bundlesize": "0.18.0",
     "clean-css-cli": "4.3.0",
     "cross-env": "6.0.3",
-    "eslint": "6.7.1",
+    "eslint": "6.7.2",
     "eslint-config-xo": "0.27.2",
-    "eslint-plugin-import": "2.18.2",
-    "eslint-plugin-unicorn": "13.0.0",
-    "glob": "^7.1.6",
-    "http-server": "0.11.1",
+    "eslint-plugin-import": "2.19.1",
+    "eslint-plugin-unicorn": "14.0.1",
+    "glob": "7.1.6",
+    "http-server": "0.12.0",
     "icon-font-generator": "2.1.10",
     "node-sass": "4.13.0",
     "node-sass-package-importer": "5.3.2",
-    "nodemon": "^2.0.1",
+    "nodemon": "2.0.1",
     "npm-run-all": "4.1.5",
     "postcss-cli": "6.1.3",
-    "rollup": "1.27.5",
+    "rollup": "1.27.9",
     "rollup-plugin-babel": "4.3.3",
     "rollup-plugin-babel-minify": "9.1.1",
     "rollup-plugin-commonjs": "10.1.0",
@@ -95,7 +95,7 @@
     "stylelint": "12.0.0",
     "stylelint-config-twbs-bootstrap": "1.0.0",
     "svgo": "1.3.2",
-    "terser": "4.4.0",
+    "terser": "4.4.2",
     "yaml": "1.7.2"
   },
   "dependencies": {
@@ -106,7 +106,7 @@
     "@fullcalendar/timegrid": "4.3.0",
     "apexcharts": "3.10.1",
     "autosize": "4.0.2",
-    "bootstrap": "twbs/bootstrap#76fd85b",
+    "bootstrap": "twbs/bootstrap#dde55d1",
     "fullcalendar": "3.10.1",
     "imask": "5.2.1",
     "jquery": "3.4.1",

pages/_data/charts.yml

+tasks-overview:
+  type: bar
+  categories: ['Sprint 1','Sprint 2','Sprint 3','Sprint 4','Sprint 5','Sprint 6','Sprint 7','Sprint 8','Sprint 9','Sprint 10','Sprint 11','Sprint 12','Sprint 13','Sprint 14','Sprint 15','Sprint 16','Sprint 17','Sprint 18','Sprint 19','Sprint 20','Sprint 21','Sprint 22','Sprint 23','Sprint 24']
+  series:
+    - name: A
+      data: [44, 32, 48, 72, 60, 16, 44, 32, 78, 50, 68, 34, 26, 48, 72, 60, 84, 64, 74, 52, 62, 50, 32, 22]
+
 total-sales:
   type: donut
+  demo: true
   sparkline: true
   hide-legend: true
+  name: Total sales
   series:
     - name: Direct
       color: blue
@@ -16,26 +25,26 @@ total-sales:
       color: yellow
       data: 12
 
-total-sales2:
-  type: radalBar
+campaigns:
+  name: Campaigns
+  demo: true
+  type: radialBar
   sparkline: true
   hide-legend: true
   series:
-    - name: Direct
+    - name: Total Sent
       color: blue
       data: 44
-    - name: Affilliate
-      color: green
-      data: 55
-    - name: Sponsored
-      color: red
-      data: 35
-    - name: E-mail
-      color: yellow
-      data: 12
+    - name: Reached
+      color: blue-light
+      data: 36
+    - name: Opened
+      color: blue-lighten
+      data: 18
 
 tasks:
   name: Tasks
+  demo: true
   type: line
   categories: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W']
   groups: [1, 2, 3]
@@ -72,7 +81,7 @@ development-activity:
 
 line:
   name: Employment Growth
-  display: true
+  demo: true
   type: line
   show-grid: true
   categories: ['2013', '2014', '2015', '2016', '2017', '2018']
@@ -89,7 +98,7 @@ line:
 
 line-stroke:
   name: Line chart
-  display: true
+  demo: true
   type: line
   stroke-curve: straight
   hide-legend: true
@@ -108,7 +117,7 @@ line-stroke:
 
 stepline:
   name: Stepline
-  display: true
+  demo: true
   type: line
   hide-legend: true
   stroke-curve: stepline
@@ -120,7 +129,7 @@ stepline:
 
 temperature:
   name: Monthly Average Temperature
-  display: true
+  demo: true
   type: line
   show-labels: true
   show-data-labels: true
@@ -139,7 +148,7 @@ temperature:
 
 area:
   name: Lorem ipsum
-  display: true
+  demo: true
   type: area
   hide-legend: true
   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
@@ -154,7 +163,7 @@ area:
 
 area-spline:
   name: Lorem ipsum
-  display: true
+  demo: true
   type: area
   spline: true
   hide-legend: true
@@ -170,12 +179,11 @@ area-spline:
 
 area-spline-stacked:
   name: Lorem ipsum
-  display: true
+  demo: true
   type: area
   spline: true
   hide-legend: true
   stacked: true
-#  groups: [1, 2]
   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
   series:
     - name: Maximum
@@ -188,7 +196,7 @@ area-spline-stacked:
 
 spline:
   name: Wind speed during two days
-  display: true
+  demo: true
   type: line
   spline: true
   show-labels: true
@@ -205,7 +213,7 @@ spline:
 
 spline-rotated:
   name: Lorem ipsum
-  display: true
+  demo: true
   type: line
   spline: true
   rotated: true
@@ -222,7 +230,7 @@ spline-rotated:
 
 bar:
   name: Lorem ipsum
-  display: true
+  demo: true
   type: bar
   hide-legend: true
   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
@@ -236,7 +244,7 @@ bar:
 
 bar-rotated:
   name: Lorem ipsum
-  display: true
+  demo: true
   type: bar
   rotated: true
   hide-legend: true
@@ -252,10 +260,9 @@ bar-rotated:
 
 bar-stacked:
   name: Lorem ipsum
-  display: true
+  demo: true
   type: bar
   stacked: true
-#  groups: [1, 2]
   hide-legend: true
   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
   series:
@@ -269,7 +276,7 @@ bar-stacked:
 
 pie:
   name: Lorem ipsum
-  display: true
+  demo: true
   type: pie
   hide-legend: true
   show-data-labels: true
@@ -290,7 +297,7 @@ pie:
 
 donut:
   name: Lorem ipsum
-  display: true
+  demo: true
   type: donut
   sparkline: true
   hide-legend: true
@@ -305,7 +312,7 @@ donut:
 
 scatter:
   name: Lorem ipsum
-  display: true
+  demo: true
   type: scatter
   hide-legend: true
   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
@@ -320,7 +327,7 @@ scatter:
 
 combination:
   name: Combination chart
-  display: true
+  demo: true
   type: bar
   types:
     2: 'line'

pages/_docs/avatars.md

@@ -14,6 +14,50 @@ Create and group avatars of various shapes and sizes with one component.
 {% include ui/avatar.html person-id=3 %}
 {% endexample %}
 
+### Avatar image
+
+Set an image as the background.
+
+{% example html wrapper=avatar-list %}
+{% include ui/avatar.html person-id=1 %}
+{% include ui/avatar.html person-id=3 %}
+{% include ui/avatar.html person-id=4 %}
+{% endexample %}
+
+### Initials
+
+You can easily use initials instead of images.
+
+{% example html wrapper=avatar-list %}
+{% include ui/avatar.html placeholder="AB" %}
+{% include ui/avatar.html placeholder="CD" %}
+{% include ui/avatar.html placeholder="EF" %}
+{% include ui/avatar.html placeholder="GH" %}
+{% include ui/avatar.html placeholder="IJ" %}
+{% endexample %}
+
+### Avatar icons
+
+You can also use icons in avatars.
+
+{% example html wrapper=avatar-list %}
+{% include ui/avatar.html icon="user" %}
+{% include ui/avatar.html icon="plus" %}
+{% include ui/avatar.html icon="user-plus" %}
+{% endexample %}
+
+### Avatar initials color
+
+Customize the color of the avatars' background. You can click [here]({% docs_url colors %}) to see the list of available colors.
+
+{% example html wrapper=avatar-list %}
+{% include ui/avatar.html placeholder="AB" color="green" %}
+{% include ui/avatar.html placeholder="CD" color="red" %}
+{% include ui/avatar.html placeholder="EF" color="yellow" %}
+{% include ui/avatar.html placeholder="GH" color="blue" %}
+{% include ui/avatar.html placeholder="IJ" color="purple" %}
+{% endexample %}
+
 ### Avatar size
 
 Using Bootstrap’s typical naming structure, you can create a standard avatar, or scale it up to different sizes based on what’s needed.
@@ -51,43 +95,18 @@ Change the shape of an avatar with the default Bootstrap image classes.
 {% include ui/avatar.html person-id=21 shape="rounded-lg" %}
 {% endexample %}
 
-### Initials
-
-{% example html wrapper=avatar-list %}
-{% include ui/avatar.html placeholder="AB" size="xl" %}
-{% include ui/avatar.html placeholder="CD" size="lg" %}
-{% include ui/avatar.html placeholder="EF" size="md" %}
-{% include ui/avatar.html placeholder="GH" %}
-{% include ui/avatar.html placeholder="IJ" size="sm" %}
-{% endexample %}
-
-
-### Avatar initials color
-
-[See more]({% docs_url colors %})
-
-{% example html wrapper=avatar-list %}
-{% include ui/avatar.html placeholder="AB" color="green" %}
-{% include ui/avatar.html placeholder="CD" color="red" %}
-{% include ui/avatar.html placeholder="EF" color="yellow" %}
-{% include ui/avatar.html placeholder="GH" color="blue" %}
-{% include ui/avatar.html placeholder="IJ" color="purple" %}
-{% endexample %}
-
-### Avatar initials icons
-
-{% example html wrapper=avatar-list %}
-{% include ui/avatar.html icon="user" %}
-{% include ui/avatar.html icon="plus" %}
-{% include ui/avatar.html icon="user-plus" %}
-{% endexample %}
-
 ### Avatars list
 
+You can easily create a list of avatars.
+
 {% example %}
 {% include ui/avatar-list.html %}
 {% endexample %}
 
+### Stacked list
+
+Make the list stack when it reaches a certain length.
+
 {% example %}
 <div class="avatar-list avatar-list-stacked">
   {% for person in site.data.people limit: 5 offset: 30 %}

pages/_docs/buttons.md

@@ -12,9 +12,9 @@ The `.btn` classes are designed to be used with the `<button>` element. However,
 {% example html wrapper=btn-list %}
 <a href="#" class="btn btn-primary" role="button">Link</a>
 <button class="btn btn-primary">Button</button>
-<input type="button" class="btn btn-primary" value="Input" />
-<input type="submit" class="btn btn-primary" value="Submit" />
-<input type="reset" class="btn btn-primary" value="Reset" />
+<input type="button" class="btn btn-primary" value="Input"/>
+<input type="submit" class="btn btn-primary" value="Submit"/>
+<input type="reset" class="btn btn-primary" value="Reset"/>
 {% endexample %}
 
 ### Button variations

pages/_docs/divider.md

@@ -6,19 +6,33 @@ done: true
 
 ### Default markup
 
-{% example html max-width=300 %}
+{% example html columns=1 %}
 <p>
-  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequatur maxime quia reprehenderit tempore? 
+  Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
 </p>
-<div class="hr-text">Left divider</div>
+{% include ui/hr.html text="Left divider" %}
 <p>
   Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
 </p>
-<div class="hr-text hr-text-center">Centered divider</div>
+{% include ui/hr.html text="Centered divider" position="center" %}
 <p>
   Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
 </p>
-<div class="hr-text hr-text-right">Right divider</div>
+{% include ui/hr.html text="Right divider" position="right" %}
+<p>
+  Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
+</p>
+{% endexample %}
+
+### Divider color
+
+Customize the color of the divider. You can click [here]({% docs_url colors %}) to see the list of available colors.
+
+{% example html columns=1 %}
+<p>
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
+</p>
+{% include ui/hr.html text="Green divider" color="green" %}
 <p>
    Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
 </p>

pages/_docs/flags.md

@@ -15,6 +15,8 @@ done: true
 
 ### Flag sizes
 
+Using Bootstrap’s typical naming structure, you can create a standard flag, or scale it up to different sizes based on what’s needed.
+
 {% example html %}
 {% include ui/flag.html flag="pl" class="flag-size-xl mr-1" %}
 {% include ui/flag.html flag="pl" class="flag-size-lg mr-1" %}
@@ -24,6 +26,8 @@ done: true
 
 ### Types
 
+To set the flag of the country you want add a class `flag-(country name)`. For example to create a flag of Andorra your class should look like this: `.flag-ad`.
+
 <table>
 {% for flag in site.data.flags %}
 <tr>

pages/_docs/progress.md

@@ -34,5 +34,5 @@ To create a default progress bar, add a `.progress` class to a `<div>` element:
 You can also use native HTML5 `<progress>` element.
 
 {% example html %}
-<progress class="progress progress-sm" value="15" max="100" />
+<progress class="progress progress-sm" value="15" max="100"/>
 {% endexample %}

pages/_docs/ribbons.md

@@ -12,24 +12,39 @@ new: true
 
 ### Ribbon position
 
+You can easily change the position of a ribbon by adding a class to the element.
+
+    `ribbon-top` - moves it to the top
+    `ribbon-right` - moves it to the right
+    `ribbon-bottom` - moves it to the bottom
+    `ribbon-left` - moves it to the lefg
+
+You can also use multiple classes at once for example: `.ribbon.ribbon-top.ribbon-left` moves the ribbon to the top left corner.
+
 {% example html columns=1 %}
 {% include cards/ribbon.html top=true left=true %}
 {% endexample %}
 
 ### Ribbon color
 
+Customize the ribbon's background color. You can click [here]({% docs_url colors %}) to see the list of available colors.
+
 {% example html columns=1 %}
 {% include cards/ribbon.html color="red" %}
 {% endexample %}
 
 ### Ribbon text
 
+Set your own text in a ribbon.
+
 {% example html columns=1 %}
 {% include cards/ribbon.html color="green" text="-50%" %}
 {% endexample %}
 
 ### Ribbon style
 
+Change the style of a ribbon. 
+
 {% example html columns=1 %}
 {% include cards/ribbon.html bookmark=true color="orange" text="-50%" %}
 {% endexample %}

pages/_docs/typography.md

@@ -21,23 +21,23 @@ description: Documentation and examples for common text utilities to control ali
 ### Semantic text elements
 
 {% example %}
-<abbr title="Internationalization">I18N</abbr><hide> <code class="ml-2">abbr</code><br /></hide>
-<strong>Bold</strong><hide> <code class="ml-2">strong</code> <code>b</code><br /></hide>
-<cite>Citation</cite><hide> <code class="ml-2">cite</code><br /></hide>
-<code>Hello World!</code><hide> <code class="ml-2">code</code><br /></hide>
-<del>Deleted</del><hide> <code class="ml-2">del</code><br /></hide>
-<em>Emphasis</em><hide> <code class="ml-2">em</code><br /></hide>
-<i>Italic</i><hide> <code class="ml-2">i</code><br /></hide>
-<ins>Inserted</ins><hide> <code class="ml-2">ins</code><br /></hide>
-<kbd>Ctrl + S</kbd><hide> <code class="ml-2">kbd</code><br /></hide>
-<mark>Highlighted</mark><hide> <code class="ml-2">mark</code><br /></hide>
-<s>Strikethrough</s<hide>> <code class="ml-2">s</code><br /></hide>
-<samp>Sample</samp><hide> <code class="ml-2">samp</code><br /></hide>
-Text <sub>Subscripted</sub><hide> <code class="ml-2">sub</code><br /></hide>
-Text <sup>Superscripted</sup><hide> <code class="ml-2">sup</code><br /></hide>
-<time>20:00</time><hide> <code class="ml-2">time</code><br /></hide>
-<u>Underline</u><hide> <code class="ml-2">u</code><br /></hide>
-<var>x</var> = <var>y</var> + 2<hide> <code class="ml-2">var</code><br /></hide>
+<abbr title="Internationalization">I18N</abbr><hide> <code class="ml-2">abbr</code><br/></hide>
+<strong>Bold</strong><hide> <code class="ml-2">strong</code> <code>b</code><br/></hide>
+<cite>Citation</cite><hide> <code class="ml-2">cite</code><br/></hide>
+<code>Hello World!</code><hide> <code class="ml-2">code</code><br/></hide>
+<del>Deleted</del><hide> <code class="ml-2">del</code><br/></hide>
+<em>Emphasis</em><hide> <code class="ml-2">em</code><br/></hide>
+<i>Italic</i><hide> <code class="ml-2">i</code><br/></hide>
+<ins>Inserted</ins><hide> <code class="ml-2">ins</code><br/></hide>
+<kbd>Ctrl + S</kbd><hide> <code class="ml-2">kbd</code><br/></hide>
+<mark>Highlighted</mark><hide> <code class="ml-2">mark</code><br/></hide>
+<s>Strikethrough</s<hide>> <code class="ml-2">s</code><br/></hide>
+<samp>Sample</samp><hide> <code class="ml-2">samp</code><br/></hide>
+Text <sub>Subscripted</sub><hide> <code class="ml-2">sub</code><br/></hide>
+Text <sup>Superscripted</sup><hide> <code class="ml-2">sup</code><br/></hide>
+<time>20:00</time><hide> <code class="ml-2">time</code><br/></hide>
+<u>Underline</u><hide> <code class="ml-2">u</code><br/></hide>
+<var>x</var> = <var>y</var> + 2<hide> <code class="ml-2">var</code><br/></hide>
 {% endexample %}
 
 ### Horizontal rules

pages/_includes/cards/charts/card.html

-{% assign data = site.data.charts[include.chart-id] %}
-{% assign height = include.height | default: 10 %}
-<div class="card">
-   <div class="card-body">
-      {% if include.title %}
-         <h3 class="card-title">{{ include.title }}</h3>
-      {% endif %}
-      {% include ui/chart.html height=height chart-id=include.chart-id %}
-   </div>
-</div>

pages/_includes/cards/charts/total-sales.html

@@ -4,6 +4,6 @@
       <h3 class="card-title">Total sales</h3>
 
       {% include ui/chart.html chart-id="total-sales" height=15 %}
-      {% include ui/chart.html chart-id="total-sales2" height=15 %}
+      {% include ui/chart.html chart-id="campaigns" height=15 %}
    </div>
 </div>

pages/_includes/cards/invoices.html

@@ -3,7 +3,7 @@
       <h3 class="card-title">Invoices</h3>
    </div>
    <div class="table-responsive">
-      <table class="table card-table table-vcenter text-nowrap datatable">
+      <table class="table card-table table-vcenter text-nowrap datatable overflow-hidden">
          <thead>
             <tr>
                <th class="w-1p"><input class="form-check-input m-0 align-middle" type="checkbox"></th>

pages/_includes/layout/css.html

 {% if site.data.libs %}
    <!-- Libs CSS -->
    {% for lib in site.data.libs.css %}
-   <link href="{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{% if jekyll.environment == 'production' %}{{ lib | replace: '@', '' }}{% else %}{{ lib }}{% endif %}?{{ site.time | date: '%s' }}" rel="stylesheet" />
+   <link href="{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{% if jekyll.environment == 'production' %}{{ lib | replace: '@', '' }}{% else %}{{ lib }}{% endif %}?{{ site.time | date: '%s' }}" rel="stylesheet"/>
    {% endfor %}
 {% endif %}
 
 <!-- Tabler Core -->
-<link href="{{ site.base }}/dist/css/tabler{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet" />
+<link href="{{ site.base }}/dist/css/tabler{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet"/>
 
 <!-- Tabler Plugins -->
-<link href="{{ site.base }}/dist/css/tabler-flags{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet" />
-<link href="{{ site.base }}/dist/css/tabler-charts{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet" />
+<link href="{{ site.base }}/dist/css/tabler-flags{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet"/>
+<link href="{{ site.base }}/dist/css/tabler-charts{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet"/>

pages/_includes/layout/homepage.html

@@ -43,10 +43,10 @@
    <div class="col-lg-6">
       <div class="row row-deck">
          <div class="col-md-12">
-            {% include cards/charts/card.html chart-id="temperature" height=10 %}
+            {% comment %}{% include cards/charts/card.html chart-id="temperature" height=10 %}{% endcomment %}
          </div>
          <div class="col-md-12">
-            {% include cards/charts/card.html chart-id="donut" height=10 %}
+            {% comment %}{% include cards/charts/card.html chart-id="donut" height=10 %}{% endcomment %}
          </div>
       </div>
    </div>

pages/_includes/layout/page-title.html

@@ -26,7 +26,7 @@
       <div class="col-auto ml-auto">
          {% if page.page-title-actions == 'users' %}
          <div class="d-flex">
-            <input type="search" class="form-control d-inline-block w-9 mr-3" placeholder="Search user&hellip;" />
+            <input type="search" class="form-control d-inline-block w-9 mr-3" placeholder="Search user&hellip;"/>
             {% include_cached ui/button.html text="New user" color="primary" icon="plus" %}
          </div>
          {% elsif page.page-title-actions == 'calendar' %}

pages/_includes/parts/form-fieldset.html

 <fieldset class="form-fieldset">
 	<div class="mb-3">
 		<label class="form-label">Full name<span class="form-required">*</span></label>
-		<input type="text" class="form-control" autocomplete="off" />
+		<input type="text" class="form-control" autocomplete="off"/>
 	</div>
 	<div class="mb-3">
 		<label class="form-label">Company<span class="form-required">*</span></label>
-		<input type="text" class="form-control"  autocomplete="off" />
+		<input type="text" class="form-control"  autocomplete="off"/>
 	</div>
 	<div class="mb-3">
 		<label class="form-label">Email<span class="form-required">*</span></label>
-		<input type="email" class="form-control"  autocomplete="off" />
+		<input type="email" class="form-control"  autocomplete="off"/>
 	</div>
 	<div class="">
 		<label class="form-label">Phone number</label>
-		<input type="tel" class="form-control" autocomplete="off" />
+		<input type="tel" class="form-control" autocomplete="off"/>
 	</div>
 </fieldset>

pages/_includes/parts/input-datalist.html

 <div class="mb-3">
    <label class="form-label">Datalist example</label>
-   <input class="form-control" list="datalistOptions" placeholder="Type to search..." />
+   <input class="form-control" list="datalistOptions" placeholder="Type to search..."/>
    <datalist id="datalistOptions">
       {% for country in site.data.countries limit: 10 %}
-      <option value="{{ country | escape }}" />{% endfor %}
+      <option value="{{ country | escape }}"/>{% endfor %}
    </datalist>
 </div>

pages/_includes/parts/input-image.html

@@ -5,7 +5,7 @@
 		{% for photo in site.data.photos limit: limit offset: 30 %}
 		<div class="{{ include.row-class | default: 'col-6 col-sm-4' }}">
 			<label class="imagecheck mb-2">
-				<input name="imagecheck" type="checkbox" value="{{ forloop.index }}" class="imagecheck-input" {% if forloop.index == 2 or forloop.index == 4  or forloop.index == 7 %} checked{% endif %} />
+				<input name="imagecheck" type="checkbox" value="{{ forloop.index }}" class="imagecheck-input" {% if forloop.index == 2 or forloop.index == 4  or forloop.index == 7 %} checked{% endif %}/>
 				<span class="imagecheck-figure">
 					<img src="{{ site.base }}/img/photos/{{ photo.file }}" alt="" class="imagecheck-image">
 				</span>

pages/_includes/ui/chart.html

@@ -55,9 +55,8 @@
          {% endif %}
 
          {% if data.series %}
-		{% if data.type == 'pie' or data.type == 'donut' %}
+         {% if data.type == 'pie' or data.type == 'donut' or data.type == 'radialBar' %}
          series: [{% for serie in data.series %}{{ serie.data }}{% unless forloop.last %}, {% endunless %}{% endfor %}],
-
          labels: [{% for serie in data.series %}"{{ serie.name }}"{% unless forloop.last %},{% endunless %}{% endfor %}],
 
          {% else %}
@@ -106,7 +105,7 @@
          {% endif %}
 
          {% if data.series %}
-		colors: [ //chart colors
+         colors: [
             {% for serie in data.series %}
             {{ serie.color | default: 'blue' | tabler_js_color }}{% unless forloop.last %},{% endunless %}{% endfor %}
          ],

pages/_includes/ui/hr.html

+<div class="hr-text{% if include.position %} hr-text-{{ include.position | downcase }}{% endif %}{% if include.color %} text-{{ include.color }}{% endif %}">{{ include.text | default: 'Label' }}</div>

pages/_includes/ui/input-mask.html

-<input type="text" name="input-{{ include.name | default: 'mask' }}" class="form-control" data-mask="{{ include.mask | default: '00/00/0000' }}"{% if include.visible %} data-mask-visible="true"{% endif %}{% if include.placeholder %} placeholder="{{ include.placeholder }}"{% endif %} autocomplete="off" />
+<input type="text" name="input-{{ include.name | default: 'mask' }}" class="form-control" data-mask="{{ include.mask | default: '00/00/0000' }}"{% if include.visible %} data-mask-visible="true"{% endif %}{% if include.placeholder %} placeholder="{{ include.placeholder }}"{% endif %} autocomplete="off"/>

pages/_layouts/base.html

 <!doctype html>
 {% include_cached layout/banner.html %}
-<html lang="en" {% if page.rtl %} dir="rtl" {% endif %}>
+<html lang="en"{% if page.rtl %} dir="rtl" {% endif %}>
 <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>

pages/charts.html

 ---
 title: Charts
+page-title: Charts
 menu: charts
 ---
 
 <div class="row">
    {% for chart in site.data.charts %}
-   {% if chart[1].display %}
-   {% assign chart-name = chart[0] %}
+   {% if chart[1].demo %}
+   {% assign chart-id = chart[0] %}
    <div class="col-lg-6 col-xl-4">
-      {% include cards/charts/card.html chart-id=chart-name %}
+      <div class="card">
+         {% if chart[1].name %}
+         <div class="card-header">
+            <h3 class="card-title">{{ chart[1].name }}</h3>
+         </div>
+         {% endif %}
+         <div class="card-body">
+            {% include ui/chart.html chart-id=chart-id height=15 %}
+         </div>
+      </div>
    </div>
    {% endif %}
    {% endfor %}
-
 </div>

pages/tmp.html

@@ -2,12 +2,17 @@
 ---
 
 <div class="row">
+   <div class="col-12">
+      <div class="card">
+         <div class="card-body">
+            {% include ui/chart.html chart-id="tasks-overview" height=20 %}
+         </div>
+      </div>
+   </div>
    <div class="col-4">
       {% include cards/charts/total-sales.html %}
    </div>
-   <div class="col-8">
-
-   </div>
+   <div class="col-8"></div>
 </div>
 <div class="row">
    <div class="col-md-6">