Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-08-02 08:25:32 +04:00
Code Issues Projects Releases Wiki Activity

Merge branch 'dev' into dev-daterangepicker

Browse Source
This commit is contained in:
Dawid Harat
2019-12-13 19:13:07 +01:00
parent 18ec7afcf2 168437d871
commit c1d2347f39
39 changed files with 380 additions and 275 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_data/charts.yml
+7
View File
@@ -1,3 +1,10 @@
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
pages/_data/docs.yml
+1
View File
@@ -7,6 +7,7 @@
- page: buttons
- page: cards
- page: carousel
- page: colors
- page: cursors
- page: charts
- page: divider
pages/_docs/alerts.md
+2 -2
View File
@@ -1,11 +1,11 @@
---
title: Alerts
menu: docs.alerts
description: Bootstrap provides an easy way to create predefined alert messages.
bootstrap-link: https://getbootstrap.com/docs/4.4/components/alerts/
done: true
---
Bootstrap provides an easy way to create predefined alert messages.
### Default markup
{% example %}
pages/_docs/autosize.md
+1 -2
View File
@@ -1,11 +1,10 @@
---
title: Autosize
menu: docs.autosize
description: A small, stand-alone script to automatically adjust textarea height.
done: true
---
A small, stand-alone script to automatically adjust textarea height.
### Default markup
{% example html %}
pages/_docs/avatars.md
+1 -2
View File
@@ -1,11 +1,10 @@
---
title: Avatars
menu: docs.avatars
description: Create and group avatars of various shapes and sizes with one component.
done: true
---
Create and group avatars of various shapes and sizes with one component.
### Default markup
{% example html wrapper=avatar-list %}
pages/_docs/badges.md
+12 -4
View File
@@ -1,30 +1,34 @@
---
title: Badges
menu: docs.badges
description: A small count and labeling component.
bootstrap-link: https://getbootstrap.com/docs/4.4/components/badge/
done: true
---
A small count and labeling component. Please read the [official Bootstrap documentation](https://getbootstrap.com/docs/4.3/components/badge/) for a full list of options.
### Default markup
{% 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 @@ A small count and labeling component. Please read the [official Bootstrap docume
### 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 @@ A small count and labeling component. Please read the [official Bootstrap docume
### 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>
pages/_docs/breadcrumb.md
+1
View File
@@ -2,6 +2,7 @@
title: Breadcrumb
menu: docs.breadcrumb
description: Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.
bootstrap-link: https://getbootstrap.com/docs/4.4/components/breadcrumb/
done: true
---
pages/_docs/buttons.md
+78 -31
View File
@@ -2,6 +2,8 @@
title: Buttons
icon: fe fe-plus-square
description: Use Bootstrap’s custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more.
bootstrap-link: https://getbootstrap.com/docs/4.4/components/buttons/
done: true
---
@@ -12,9 +14,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
@@ -23,18 +25,22 @@ Use any of the available button classes to quickly create a styled button . We p
{% example html wrapper=btn-list %}
{% for button in site.button-variants %}
<a href="#" class="btn btn-{{ button[0] }}">{{ button[1].title }}</a>
{% assign btn-color = button[1].class %}
{% assign btn-title = button[1].title %}
{% include_cached ui/button.html color=btn-color text=btn-title %}
{% endfor %}
{% endexample %}
### Disabled buttons
Make buttons look inactive by adding the disabled boolean attribute to any `.btn` element. `<a>`s don’t support the disabled attribute, so you must add the `.disabled` class to make it visually appear disabled.
{% example html wrapper=btn-list %}
{% for button in site.button-variants %}
{% include_cached ui/button.html color=button.1.class text=button.title disabled=true %}
{% assign btn-color = button[1].class %}
{% assign btn-title = button[1].title %}
{% include_cached ui/button.html color=btn-color text=btn-title disabled=true %}
{% endfor %}
{% endexample %}
@@ -54,7 +60,9 @@ Add `.btn-square` to button to remove border-radius.
{% example html wrapper=btn-list %}
{% for button in site.button-variants %}
{% include_cached ui/button.html text=button.title color=button.class square=true %}
{% assign btn-color = button[1].class %}
{% assign btn-title = button[1].title %}
{% include_cached ui/button.html color=btn-color text=btn-title square=true %}
{% endfor %}
{% endexample %}
@@ -64,7 +72,9 @@ Add `.btn-pill` class to any button to make them more rounded.
{% example html wrapper=btn-list %}
{% for button in site.button-variants %}
{% include_cached ui/button.html text=button.title color=button.class pill=true %}
{% assign btn-color = button[1].class %}
{% assign btn-title = button[1].title %}
{% include_cached ui/button.html color=btn-color text=btn-title pill=true %}
{% endfor %}
{% endexample %}
@@ -74,7 +84,9 @@ In need of a button, but not the hefty background colors they bring? Replace the
{% example html wrapper=btn-list %}
{% for button in site.button-variants %}
{% include_cached ui/button.html text=button.title color=button.class outline=true %}
{% assign btn-color = button[1].class %}
{% assign btn-title = button[1].title %}
{% include_cached ui/button.html text=btn-title color=btn-color outline=true %}
{% endfor %}
{% endexample %}
@@ -103,13 +115,33 @@ Create block level buttons—those that span the full width of a parent—by add
Basic buttons are traditional buttons with borders and background with an extra commponent like an icon. You can place it either on the left or the right which ever you want with different color opitons.
Icons can be found [**here** {% include_cached ui/icon.html icon="search" class="icon-sm" %}](/docs/icons.html#icons)
{% example html wrapper=btn-list %}
<button type="button" class="btn btn-dark"><i class="icon fe fe-upload mr-2"></i>Upload</button>
<button type="button" class="btn btn-warning"><i class="icon fe fe-heart mr-2"></i>I like</button>
<button type="button" class="btn btn-success"><i class="icon fe fe-check mr-2"></i>I agree</button>
<button type="button" class="btn btn-outline-primary"><i class="icon fe fe-plus mr-2"></i>More</button>
<button type="button" class="btn btn-danger"><i class="icon fe fe-link mr-2"></i>Link</button>
<button type="button" class="btn btn-info"><i class="icon fe fe-message-circle mr-2"></i>Comment</button>
<button type="button" class="btn btn-dark">
{% include_cached ui/icon.html icon="upload" class="icon-sm" %}
Upload
</button>
<button type="button" class="btn btn-warning">
{% include_cached ui/icon.html icon="heart" class="icon-sm" %}
I like
</button>
<button type="button" class="btn btn-success">
{% include_cached ui/icon.html icon="check" class="icon-sm" %}
I agree
</button>
<button type="button" class="btn btn-outline-primary">
{% include_cached ui/icon.html icon="plus" class="icon-sm" %}
More
</button>
<button type="button" class="btn btn-danger">
{% include_cached ui/icon.html icon="link" class="icon-sm" %}
Link
</button>
<button type="button" class="btn btn-info">
{% include_cached ui/icon.html icon="message-circle" class="icon-sm" %}
Comment
</button>
{% endexample %}
### Social buttons
@@ -118,7 +150,10 @@ A button can be formatted to link to a social website
{% example html wrapper=btn-list %}
{% for button in site.socials %}
{% include_cached ui/button.html color=button.name icon=button.icon text=button.title %}
{% assign btn-icon = button[1].icon %}
{% assign btn-title = button[1].title %}
{% assign btn-color = button[0] %}
{% include_cached ui/button.html color=btn-color icon=btn-icon text=btn-title %}
{% endfor %}
{% endexample %}
@@ -126,7 +161,9 @@ You can use only icons.
{% example html wrapper=btn-list %}
{% for button in site.socials %}
{% include_cached ui/button.html color=button.name icon=button.icon %}
{% assign btn-icon = button[1].icon %}
{% assign btn-color = button[0] %}
{% include_cached ui/button.html color=btn-color icon=btn-icon icon-only=true %}
{% endfor %}
{% endexample %}
@@ -135,13 +172,27 @@ You can use only icons.
Icon only button. Add `.btn-icon` class to remove unnecessary padding from button.
{% example html wrapper=btn-list %}
<button type="button" class="btn btn-icon btn-primary"><i class="icon fe fe-activity"></i></button>
<button type="button" class="btn btn-icon btn-primary btn-github"><i class="icon fe fe-github"></i></button>
<button type="button" class="btn btn-icon btn-primary btn-success"><i class="icon fe fe-bell"></i></button>
<button type="button" class="btn btn-icon btn-primary btn-warning"><i class="icon fe fe-star"></i></button>
<button type="button" class="btn btn-icon btn-primary btn-danger"><i class="icon fe fe-trash"></i></button>
<button type="button" class="btn btn-icon btn-primary btn-purple"><i class="icon fe fe-bar-chart"></i></button>
<button type="button" class="btn btn-icon btn-primary btn-secondary"><i class="icon fe fe-git-merge"></i></button>
<button type="button" class="btn btn-icon btn-primary">
{% include_cached ui/icon.html icon="activity" class="icon-sm" %}
</button>
<button type="button" class="btn btn-icon btn-primary btn-github">
{% include_cached ui/icon.html icon="github" class="icon-sm" %}
</button>
<button type="button" class="btn btn-icon btn-primary btn-success">
{% include_cached ui/icon.html icon="bell" class="icon-sm" %}
</button>
<button type="button" class="btn btn-icon btn-primary btn-warning">
{% include_cached ui/icon.html icon="star" class="icon-sm" %}
</button>
<button type="button" class="btn btn-icon btn-primary btn-danger">
{% include_cached ui/icon.html icon="trash-2" class="icon-sm" %}
</button>
<button type="button" class="btn btn-icon btn-primary btn-purple">
{% include_cached ui/icon.html icon="bar-chart" class="icon-sm" %}
</button>
<button type="button" class="btn btn-icon btn-primary btn-secondary">
{% include_cached ui/icon.html icon="git-merge" class="icon-sm" %}
</button>
{% endexample %}
### Button dropdown
@@ -151,7 +202,7 @@ Wrap the dropdown’s toggle (your button or link) and the dropdown menu within
{% example html wrapper=btn-list %}
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
<i class="icon fe fe-calendar"></i>
{% include_cached ui/icon.html icon="calendar" class="icon-sm" %}
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Dropdown link</a>
@@ -161,7 +212,7 @@ Wrap the dropdown’s toggle (your button or link) and the dropdown menu within
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
<i class="icon fe fe-calendar mr-2"></i>Show calendar
{% include_cached ui/icon.html icon="calendar" class="icon-sm" %}Show calendar
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Dropdown link</a>
@@ -187,11 +238,7 @@ Add `.btn-loading` to use a loading state on a button. The width of the button d
Since the loading spinner is implemented using the `:after` pseudo-element, it is not supported by the `<input type="submit">` element.
{% example html wrapper=btn-list %}
{% include_cached ui/button.html spinner=true text="Button" color="primary" %}
{% include_cached ui/button.html spinner=true text="Button" color="danger" %}
{% include_cached ui/button.html spinner=true text="Button" color="warning" %}
{% include_cached ui/button.html spinner=true color="success" %}
{% include_cached ui/button.html spinner=true color="secondary" %}
{% include_cached ui/button.html color="primary" text="Button" spinner=true %}
{% endexample %}
### List of buttons
pages/_docs/cards.md
+2
View File
@@ -2,6 +2,8 @@
title: Cards
menu: docs.cards
description: A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
bootstrap-link: https://getbootstrap.com/docs/4.4/components/card/
done: true
---
The `.card` element is simply a container with a shadow, a border, a radius, and some padding. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components.
pages/_docs/carousel.md
+2 -2
View File
@@ -1,10 +1,10 @@
---
title: Carousel
menu: docs.carousel
description: The Carousel is a slideshow for cycling through elements.
bootstrap-link: https://getbootstrap.com/docs/4.4/components/carousel/
---
The Carousel is a slideshow for cycling through elements.
{% example html columns=1 %}
{% include ui/carousel.html show-indicators=true show-controls=true id="carousel-sample" %}
{% endexample %}
pages/_docs/colors.md
+10
View File
@@ -1,5 +1,15 @@
---
title: Colors
menu: docs.colors
description:
bootstrap-link: https://getbootstrap.com/docs/4.4/utilities/colors/
done: true
---
## Base colors
{% include example/colors-table.html %}
## Light colors
{% include example/colors-table.html light=true %}
pages/_docs/cursors.md
+7
View File
@@ -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">
pages/_docs/divider.md
+22 -8
View File
@@ -1,25 +1,39 @@
---
title: Divider
description: A divider visually segments content into groups
bootstrap-link: https://getbootstrap.com/docs/4.4/components/dropdowns/#dividers
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 %}
pages/_docs/form-elements.md
+1
View File
@@ -1,5 +1,6 @@
---
title: Form Elements
bootstrap-link: https://getbootstrap.com/docs/4.4/components/forms/
---
### Classic Input
pages/_docs/progress.md
+19 -4
View File
@@ -1,6 +1,7 @@
---
title: Progress
description: A progress bar can be used to show a user how far along he is in a process.
bootstrap-link: https://getbootstrap.com/docs/4.4/components/progress/
---
### Default markup
@@ -11,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 %}
@@ -34,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 %}
pages/_docs/spinners.md
+1
View File
@@ -1,6 +1,7 @@
---
title: Spinners
menu: docs.spinners
bootstrap-link: https://getbootstrap.com/docs/4.4/components/spinners/
done: true
---
pages/_docs/tables.md
+1
View File
@@ -1,6 +1,7 @@
---
title: Tables
menu: docs.tables
bootstrap-link: https://getbootstrap.com/docs/4.4/content/tables/
---
### Basic Table
pages/_docs/tabs.md
+1
View File
@@ -1,6 +1,7 @@
---
title: Tabs
menu: docs.tabs
bootstrap-link: https://getbootstrap.com/docs/4.4/components/navs/
---
### Default markup
pages/_docs/toasts.md
+1
View File
@@ -2,6 +2,7 @@
title: Toasts
menu: docs.toasts
description: The toast component is like an alert box that is only shown for a couple of seconds when something happens (i.e. when the user clicks on a button, submits a form, etc.).
bootstrap-link: https://getbootstrap.com/docs/4.4/components/toasts/
---
pages/_docs/tooltips.md
+1
View File
@@ -2,6 +2,7 @@
title: Tooltips
menu: docs.tooltips
description: The Tooltip component is small pop-up box that appears when the user moves the mouse pointer over an element.
bootstrap-link: https://getbootstrap.com/docs/4.4/components/tooltips/
---
### Default markup
pages/_docs/typography.md
+18 -17
View File
@@ -2,6 +2,7 @@
title: Typography
menu: docs.typography
description: Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.
bootstrap-link: https://getbootstrap.com/docs/4.4/content/typography/
---
### Headings
@@ -21,23 +22,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/example/colors-table.html
+20
View 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>
pages/_includes/layout/css.html
+4 -4
View File
@@ -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"/>
pages/_includes/layout/page-title.html
+1 -1
View File
@@ -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
+4 -4
View File
@@ -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>
pages/_includes/parts/input-datalist.html
+2 -2
View File
@@ -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>
pages/_includes/parts/input-image.html
+1 -1
View File
@@ -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
+99 -99
View File
@@ -20,121 +20,121 @@
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.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],
{% if data.sparkline %}
sparkline: {
enabled: true
},
{% endif %}
{% if data.stroke-curve %}
curve: '{{ data.stroke-curve }}',
{% if data.stacked %}
stacked: true,
{% endif %}
},
{% endif %}
},
{% 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 %}],
{% if data.type == 'area' %}
fill: {
opacity: .16
},
{% endif %}
{% else %}
series: [{% for serie in data.series %}{
name: '{{ serie.name }}',
{% 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.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 %}],
{% else %}
series: [{% for serie in data.series %}{
name: '{{ serie.name }}',
data: [{{ serie.data | join: ', '}}]
}{% unless forloop.last %},{% endunless %}{% endfor %}],
{% endif %}
{% endif %}
}{% 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: [
{% 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 %}
pages/_includes/ui/hr.html
+1
View 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>
pages/_includes/ui/input-mask.html
+1 -1
View File
@@ -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"/>
pages/_layouts/base.html
+1 -1
View File
@@ -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"/>
pages/_layouts/docs.html
+34 -24
View File
@@ -7,41 +7,51 @@ page-title: Documentation
<div class="row justify-content-center">
<div class="col-lg-3 order-lg-1 mb-4">
<a href="{{ site.github_url }}" class="btn btn-block btn-primary mb-4" target="_blank">
{% include_cached ui/icon.html icon="github" class="mr-2" %}Browse source code
</a>
<div class="col-lg-3 order-lg-1 mb-4">
<a href="{{ site.github_url }}" class="btn btn-block btn-primary mb-4" target="_blank">
{% include_cached ui/icon.html icon="github" class="mr-2" %}Browse source code
</a>
<div class="list-group list-group-transparent mb-0">
{% for p in site.data.docs %}
{% assign doc = site.docs | where: "slug", p.page | first %}
<a href="{{ site.base }}{{ doc.url | relative_url }}" class="list-group-item list-group-item-action{% if page.url == doc.url %} active{% endif %}">
{{ doc.title }}{% if doc.done %} {% include_cached ui/icon.html icon="check" color="green" %}{% endif %}
</a>
{% endfor %}
</div>
</div>
<div class="list-group list-group-transparent mb-0">
{% for p in site.data.docs %}
{% assign doc = site.docs | where: "slug", p.page | first %}
<a href="{{ site.base }}{{ doc.url | relative_url }}"
class="list-group-item list-group-item-action{% if page.url == doc.url %} active{% endif %}">
{{ doc.title }}{% if doc.done %} {% include_cached ui/icon.html icon="check" color="green" %}{% endif %}
</a>
{% endfor %}
</div>
</div>
<div class="col-lg-9">
<div class="card">
<div class="card-body p-md-6 p-xl-7">
<div class="markdown">
<h2 class="h1 mt-0 mb-4">{{ page.title }}{% if page.done %} {% include_cached ui/icon.html icon="check" color="green" %}{% endif %}</h2>
{% if page.plugin %}
<div class="alert alert-info">This module is available in <code>tabler-{{ page.plugin }}</code> plugin.</div>
{% endif %}
{% if page.description %}
<p>{{ page.description }}</p>
{% if page.bootstrap-link %}
<p class="mb-4 float-right">
<a href="{{ page.bootstrap-link }}" target="_blank">
{% include_cached ui/icon.html icon="external-link" color="blue" class="pr-1" %}
Bootstrap documentation
</a>
</p>
{% endif %}
{% if page.in_progress %}
<div class="alert alert-primary mt-5 mb-6">
<div><strong>Work in progress!</strong> More detailed documentation is coming soon.</div>
<h2 class="h1 mt-0 mb-3">{{ page.title }}
{% if page.done %} {% include_cached ui/icon.html icon="check" color="green" %}{% endif %}
</h2>
{% if page.plugin %}
<div class="alert alert-info">This module is available in <code>tabler-{{ page.plugin }}</code>
plugin.
</div>
{% endif %}
{% if page.description %}
<p>{{ page.description }}</p>
{% endif %}
{% if page.toc %}
{{ content | toc_only }}
{% endif %}
pages/_plugins/jekyll-filters.rb
+5
View File
@@ -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
pages/colors.html
-51
View File
@@ -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"></div>
<div>
<strong>{{ color[1].title }}</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"></div>
<div>
<strong>{{ color[1].title }} lite</strong><br />
<code>.bg-{{ color[0] }}-lt</code>
</div>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
pages/tmp.html
+8 -3
View File
@@ -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">