mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
Merge branches 'dev' and 'dev-doc-bootstrap-link' of https://github.com/tabler/tabler into dev-doc-bootstrap-link
Conflicts: .editorconfig pages/_docs/colors.md
This commit is contained in:
codecalm
@@ -12,6 +12,7 @@ tab_width=3
|
||||
[*.html]
|
||||
indent_style=tab
|
||||
indent_size=3
|
||||
insert_final_newline=false
|
||||
|
||||
[*.md]
|
||||
indent_style=tab
|
||||
@@ -20,12 +21,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
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
20
package.json
20
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",
|
||||
|
||||
@@ -1,7 +1,16 @@
|
||||
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'
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
- page: buttons
|
||||
- page: cards
|
||||
- page: carousel
|
||||
- page: colors
|
||||
- page: cursors
|
||||
- page: charts
|
||||
- page: divider
|
||||
|
||||
@@ -13,6 +13,50 @@ done: true
|
||||
{% 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.
|
||||
@@ -50,43 +94,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 %}
|
||||
|
||||
@@ -10,21 +10,25 @@ done: true
|
||||
|
||||
{% example %}
|
||||
{% for color in site.colors %}
|
||||
<span class="badge text-white bg-{{ color[0] }}">{{ color[0] }}</span>
|
||||
<span class="badge bg-{{ color[0] }}">{{ color[0] }}</span>
|
||||
{% endfor %}
|
||||
{% endexample %}
|
||||
|
||||
### Pill badges
|
||||
|
||||
To make a pill bagde (with rounded corners) add `.bagde-pill` class.
|
||||
|
||||
{% example %}
|
||||
{% for color in site.colors %}
|
||||
<span class="badge badge-pill text-white bg-{{ color[0] }}">{{ forloop.index }}</span>
|
||||
<span class="badge badge-pill bg-{{ color[0] }}">{{ forloop.index }}</span>
|
||||
{% endfor %}
|
||||
{% endexample %}
|
||||
|
||||
|
||||
### Soft badges
|
||||
|
||||
Creates a soft variant of a corresponding contextual badge variation. You can click [here]({% docs_url colors %}) to see the list of available colors.
|
||||
|
||||
{% example %}
|
||||
{% for color in site.colors %}
|
||||
<span class="badge bg-{{ color[0] }}-lt">{{ color[0] }}</span>
|
||||
@@ -34,6 +38,8 @@ done: true
|
||||
|
||||
### Links
|
||||
|
||||
Make a badge work as a link by putting it into an `<a>` element.
|
||||
|
||||
{% example %}
|
||||
{% for color in site.colors %}
|
||||
<a href="#" class="badge bg-{{ color[0] }}">{{ color[0] }}</a>
|
||||
@@ -43,6 +49,8 @@ done: true
|
||||
|
||||
### Empty badges
|
||||
|
||||
If you don't want your badge to contain any text you can do it by leaving the html element empty.
|
||||
|
||||
{% example %}
|
||||
{% for color in site.colors %}
|
||||
<a href="#" class="badge bg-{{ color[0] }}"></a>
|
||||
|
||||
@@ -13,9 +13,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
|
||||
|
||||
@@ -4,3 +4,11 @@ menu: docs.colors
|
||||
description:
|
||||
bootstrap-link: https://getbootstrap.com/docs/4.4/utilities/colors/
|
||||
---
|
||||
|
||||
## Base colors
|
||||
|
||||
{% include example/colors-table.html %}
|
||||
|
||||
## Light colors
|
||||
|
||||
{% include example/colors-table.html light=true %}
|
||||
|
||||
@@ -5,6 +5,13 @@ menu: docs.cursors
|
||||
|
||||
### Cursor utilities
|
||||
|
||||
- `.cursor-auto`- cursor style depends on what's inside element
|
||||
- `.cursor-pointer` - pointing cursor
|
||||
- `.cursor-move` - cursor showing that user can move something
|
||||
- `.cursor-not-allowed` - cursor showing that user is not allowed to do something
|
||||
- `.cursor-zoom-in` - cursor showing that user can zoom in
|
||||
- `.cursor-zoom-out` - cursor showing that user can zoom out
|
||||
|
||||
{% example html %}
|
||||
<div class="row text-center">
|
||||
<div class="col-4 mb-3">
|
||||
|
||||
@@ -6,20 +6,34 @@ done: true
|
||||
---
|
||||
### Default markup
|
||||
|
||||
{% example html max-width=300 %}
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequatur maxime quia reprehenderit tempore?
|
||||
</p>
|
||||
<div class="hr-text">Left divider</div>
|
||||
{% example html columns=1 %}
|
||||
<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="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-right">Right 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>
|
||||
{% 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>
|
||||
{% endexample %}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -12,20 +12,26 @@ To create a default progress bar, add a `.progress` class to a `<div>` element:
|
||||
{% include ui/progress.html %}
|
||||
{% endexample %}
|
||||
|
||||
### Small progress
|
||||
### Progress size
|
||||
|
||||
Using Bootstrap’s typical naming structure, you can create a standard progress, or scale it up to different sizes based on what’s needed.
|
||||
|
||||
{% example html %}
|
||||
{% include ui/progress.html value=57 size="sm" %}
|
||||
{% endexample %}
|
||||
|
||||
### Progress with value
|
||||
### Progress without value
|
||||
|
||||
Remove the showed value by adding a class called `.sr-only`.
|
||||
|
||||
{% example html %}
|
||||
{% include ui/progress.html value=75 show-value=true %}
|
||||
{% include ui/progress.html value=75 show-value=false %}
|
||||
{% endexample %}
|
||||
|
||||
### Indeterminate progress
|
||||
|
||||
To create indeterminate progress add `.progress-bar-indeterminate` to the `.progress-bar` element.
|
||||
|
||||
{% example html %}
|
||||
{% include ui/progress.html indeterminate=true size="sm" %}
|
||||
{% endexample %}
|
||||
@@ -35,5 +41,13 @@ 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 %}
|
||||
|
||||
### Progress color
|
||||
|
||||
Customize the color of the progress bar. You can click [here]({% docs_url colors %}) to see the list of available colors.
|
||||
|
||||
{% example %}
|
||||
{% include ui/progress.html size="sm" color="purple"%}
|
||||
{% endexample %}
|
||||
@@ -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 %}
|
||||
|
||||
@@ -22,23 +22,23 @@ bootstrap-link: https://getbootstrap.com/docs/4.4/content/typography/
|
||||
### 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
|
||||
|
||||
@@ -1,10 +0,0 @@
|
||||
{% 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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
20
pages/_includes/example/colors-table.html
Normal file
20
pages/_includes/example/colors-table.html
Normal file
@@ -0,0 +1,20 @@
|
||||
{% assign colors = include.colors | default: site.colors %}
|
||||
{% assign light = include.light %}
|
||||
|
||||
<div class="example">
|
||||
<div class="mb-n3">
|
||||
{% for color in colors %}
|
||||
<div class="row row-sm mb-3 align-items-center">
|
||||
<div class="col-auto">
|
||||
<div class="stamp bg-{{ color[0] }}{% if light %}-lt{% else %} text-white{% endif %}">{{ color[0] | capitalize | first_letter }}</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="font-weight-semibold">{{ color[1].title }}</span><br/>
|
||||
<code>bg-{{ color[0] }}{% if light %}-lt{% endif %}</code>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
{% 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"/>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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…" />
|
||||
<input type="search" class="form-control d-inline-block w-9 mr-3" placeholder="Search user…"/>
|
||||
{% include_cached ui/button.html text="New user" color="primary" icon="plus" %}
|
||||
</div>
|
||||
{% elsif page.page-title-actions == 'calendar' %}
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
<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>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -13,130 +13,129 @@
|
||||
|
||||
{% capture script %}
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
{% if jekyll.environment == 'development' %}window.tabler_chart = window.tabler_chart || {};{% endif %}
|
||||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
{% if jekyll.environment == 'development' %}window.tabler_chart = window.tabler_chart || {};{% endif %}
|
||||
|
||||
window.ApexCharts && ({% if jekyll.environment == 'development' %}window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}new ApexCharts(document.getElementById('chart-{{ id }}'), {
|
||||
chart: {
|
||||
type: '{{ data.type }}',
|
||||
height: {{ height | times: 16 }},
|
||||
{% if data.sparkline %}
|
||||
sparkline: {
|
||||
enabled: true
|
||||
},
|
||||
{% endif %}
|
||||
{% if data.stacked %}
|
||||
stacked: true,
|
||||
{% endif %}
|
||||
},
|
||||
window.ApexCharts && ({% if jekyll.environment == 'development' %}window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}new ApexCharts(document.getElementById('chart-{{ id }}'), {
|
||||
chart: {
|
||||
type: '{{ data.type }}',
|
||||
height: {{ height | times: 16 }},
|
||||
{% if data.sparkline %}
|
||||
sparkline: {
|
||||
enabled: true
|
||||
},
|
||||
{% endif %}
|
||||
{% if data.stacked %}
|
||||
stacked: true,
|
||||
{% endif %}
|
||||
},
|
||||
|
||||
{% if data.type == 'area' %}
|
||||
fill: {
|
||||
opacity: .16
|
||||
},
|
||||
{% endif %}
|
||||
{% if data.type == 'area' %}
|
||||
fill: {
|
||||
opacity: .16
|
||||
},
|
||||
{% endif %}
|
||||
|
||||
{% if data.title %}
|
||||
title: {
|
||||
text: '{{ data.title | escape }}'
|
||||
},
|
||||
{% endif %}
|
||||
{% if data.title %}
|
||||
title: {
|
||||
text: '{{ data.title | escape }}'
|
||||
},
|
||||
{% endif %}
|
||||
|
||||
{% if data.dashed-history or data.stroke-curve %}
|
||||
stroke: {
|
||||
{% if data.dashed-history %}
|
||||
width: [2, 1],
|
||||
dashArray: [0, 3],
|
||||
{% endif %}
|
||||
{% if data.stroke-curve %}
|
||||
curve: '{{ data.stroke-curve }}',
|
||||
{% endif %}
|
||||
},
|
||||
{% endif %}
|
||||
{% if data.dashed-history or data.stroke-curve %}
|
||||
stroke: {
|
||||
{% if data.dashed-history %}
|
||||
width: [2, 1],
|
||||
dashArray: [0, 3],
|
||||
{% endif %}
|
||||
{% if data.stroke-curve %}
|
||||
curve: '{{ data.stroke-curve }}',
|
||||
{% endif %}
|
||||
},
|
||||
{% endif %}
|
||||
|
||||
{% if data.series %}
|
||||
{% if data.type == 'pie' or data.type == 'donut' %}
|
||||
series: [{% for serie in data.series %}{{ serie.data }}{% unless forloop.last %}, {% endunless %}{% endfor %}],
|
||||
{% if data.series %}
|
||||
{% 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 %}],
|
||||
|
||||
labels: [{% for serie in data.series %}"{{ serie.name }}"{% unless forloop.last %},{% endunless %}{% endfor %}],
|
||||
{% else %}
|
||||
series: [{% for serie in data.series %}{
|
||||
name: '{{ serie.name }}',
|
||||
data: [{{ serie.data | join: ', '}}]
|
||||
}{% unless forloop.last %},{% endunless %}{% endfor %}],
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% else %}
|
||||
series: [{% for serie in data.series %}{
|
||||
name: '{{ serie.name }}',
|
||||
data: [{{ serie.data | join: ', '}}]
|
||||
}{% unless forloop.last %},{% endunless %}{% endfor %}],
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% if data.show-grid %}
|
||||
grid: {
|
||||
show: true,
|
||||
},
|
||||
{% endif %}
|
||||
|
||||
{% if data.show-grid %}
|
||||
grid: {
|
||||
show: true,
|
||||
},
|
||||
{% endif %}
|
||||
{% if data.show-data-labels %}
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
},
|
||||
{% endif %}
|
||||
|
||||
{% if data.show-data-labels %}
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
},
|
||||
{% endif %}
|
||||
{% if data.categories or data.days-labels-count %}
|
||||
xaxis: {
|
||||
{% if data.categories %}categories: [{% for category in data.categories %}'{{ category }}'{% unless forloop.last %}, {% endunless %}{% endfor %}],{% endif %}
|
||||
{% if data.days-labels-count %}type: 'datetime',{% endif %}
|
||||
},
|
||||
{% endif %}
|
||||
|
||||
{% if data.categories or data.days-labels-count %}
|
||||
xaxis: {
|
||||
{% if data.categories %}categories: [{% for category in data.categories %}'{{ category }}'{% unless forloop.last %}, {% endunless %}{% endfor %}],{% endif %}
|
||||
{% if data.days-labels-count %}type: 'datetime',{% endif %}
|
||||
},
|
||||
{% endif %}
|
||||
{% if data.auto-min %}
|
||||
yaxis: {
|
||||
min: function(min) { return min },
|
||||
},
|
||||
{% endif %}
|
||||
|
||||
{% if data.auto-min %}
|
||||
yaxis: {
|
||||
min: function(min) { return min },
|
||||
},
|
||||
{% endif %}
|
||||
{% if data.days-labels-count %}
|
||||
labels: [...Array({{ data.days-labels-count }}).keys()].map(n => `2019-09-${n+1}`),
|
||||
{% endif %}
|
||||
|
||||
{% if data.days-labels-count %}
|
||||
labels: [...Array({{ data.days-labels-count }}).keys()].map(n => `2019-09-${n+1}`),
|
||||
{% endif %}
|
||||
{% if data.rotated %}
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
}
|
||||
},
|
||||
{% endif %}
|
||||
|
||||
{% if data.rotated %}
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
}
|
||||
},
|
||||
{% endif %}
|
||||
{% if data.series %}
|
||||
colors: [
|
||||
{% for serie in data.series %}
|
||||
{{ serie.color | default: 'blue' | tabler_js_color }}{% unless forloop.last %},{% endunless %}{% endfor %}
|
||||
],
|
||||
{% endif %}
|
||||
|
||||
{% if data.series %}
|
||||
colors: [ //chart colors
|
||||
{% for serie in data.series %}
|
||||
{{ serie.color | default: 'blue' | tabler_js_color }}{% unless forloop.last %},{% endunless %}{% endfor %}
|
||||
],
|
||||
{% endif %}
|
||||
{% if data.hide-legend %}
|
||||
legend: {
|
||||
show: false, //hide legend
|
||||
},
|
||||
{% endif %}
|
||||
|
||||
{% if data.hide-legend %}
|
||||
legend: {
|
||||
show: false, //hide legend
|
||||
},
|
||||
{% endif %}
|
||||
{% if data.hide-tooltip %}
|
||||
tooltip: {
|
||||
enabled: false
|
||||
},
|
||||
{% endif %}
|
||||
|
||||
{% if data.hide-tooltip %}
|
||||
tooltip: {
|
||||
enabled: false
|
||||
},
|
||||
{% endif %}
|
||||
{% if data.hide-points %}
|
||||
point: {
|
||||
show: false
|
||||
},
|
||||
{% endif %}
|
||||
|
||||
{% if data.hide-points %}
|
||||
point: {
|
||||
show: false
|
||||
},
|
||||
{% endif %}
|
||||
|
||||
{% if data.show-markers %}
|
||||
markers: {
|
||||
size: 2
|
||||
},
|
||||
{% endif %}
|
||||
})).render();
|
||||
});
|
||||
{% if data.show-markers %}
|
||||
markers: {
|
||||
size: 2
|
||||
},
|
||||
{% endif %}
|
||||
})).render();
|
||||
});
|
||||
</script>
|
||||
{% endcapture %}
|
||||
|
||||
|
||||
1
pages/_includes/ui/hr.html
Normal file
1
pages/_includes/ui/hr.html
Normal file
@@ -0,0 +1 @@
|
||||
<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>
|
||||
@@ -1 +1 @@
|
||||
<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"/>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<!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"/>
|
||||
|
||||
@@ -84,6 +84,11 @@ module Jekyll
|
||||
|
||||
input.gsub re, repl_str
|
||||
end
|
||||
|
||||
def hex_to_rgb(color)
|
||||
r, g, b = color.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/).captures
|
||||
"rgb(#{r.hex}, #{g.hex}, #{b.hex})"
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
|
||||
@@ -1,16 +1,25 @@
|
||||
---
|
||||
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>
|
||||
|
||||
@@ -1,51 +0,0 @@
|
||||
---
|
||||
title: Colors
|
||||
done: true
|
||||
---
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">
|
||||
Default colors
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="list-unstyled">
|
||||
{% for color in site.colors %}
|
||||
<li class="d-flex align-items-center mb-3">
|
||||
<div class="stamp bg-{{ color[0] }} text-white mr-3">{{ color[1].name | first_letters | upcase }}</div>
|
||||
<div>
|
||||
<strong>{{ color[1].name }}</strong><br />
|
||||
<code>.bg-{{ color[0] }}</code>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">
|
||||
Light colors
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="list-unstyled">
|
||||
{% for color in site.colors %}
|
||||
<li class="d-flex align-items-center mb-3">
|
||||
<div class="stamp bg-{{ color[0] }}-lt mr-3">{{ color[1].name | first_letters | upcase }}</div>
|
||||
<div>
|
||||
<strong>{{ color[1].name }} lite</strong><br />
|
||||
<code>.bg-{{ color[0] }}-lt</code>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user