diff --git a/_config.yml b/_config.yml
index 29a26f4d89096cb48084a148991089ed79d69411..e0e577de82d798aefe4038a672ada5a2ac367a93 100644
--- a/_config.yml
+++ b/_config.yml
@@ -97,7 +97,12 @@ colors:
hex: '#354051'
name: Dark
-variants: [primary, secondary, success, info, warning, danger, dark]
+variants:
+ success: danger
+ info: danger
+ warning: danger
+ danger: danger
+
socials: [facebook, twitter, google, youtube, vimeo, dribbble, github, instagram, pinterest, vk, rss, flickr, bitbucket]
months_short: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
@@ -108,6 +113,6 @@ docs-menu:
- title: Getting started
pages: [index]
- title: Components
- pages: [avatars, badges, buttons, carousel, spinners, steps, toasts, tooltips, typography]
+ pages: [alerts, avatars, badges, buttons, carousel, spinners, steps, tabs, toasts, tooltips, typography]
diff --git a/package.json b/package.json
index 11dea040191b242c22921ece3159b8f7e3b42a4c..85914b33b9e8cd7f374ab0ed1f93ebad5dafdec9 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
"css-minify": "cleancss --level 1 --format breakWith=lf --source-map --source-map-inline-sources --output dist/css/tabler.min.css dist/css/tabler.css",
"css-copy": "cross-env-shell shx mkdir -p site/static/dist/ && cross-env-shell shx cp -r dist/css/ site/static/dist/",
"css-lint": "stylelint \"scss/**/*.scss\" --cache --cache-location .cache/.stylelintcache",
- "css-main": "npm-run-all css-compile",
+ "css-main": "npm-run-all css-compile css-prefix",
"css-main-build": "npm-run-all css-lint css-compile css-prefix css-minify",
"watch": "npm-run-all --parallel watch-*",
"watch-css": "nodemon --watch scss/ --ext scss --exec \"npm run css-main\"",
diff --git a/pages/400.html b/pages/400.html
deleted file mode 100644
index 6d925f1cff293613ea08485e21528751a7ccddad..0000000000000000000000000000000000000000
--- a/pages/400.html
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: Page 400
-layout: error
-error: 400
-done: true
----
diff --git a/pages/401.html b/pages/401.html
deleted file mode 100644
index 9b770b48aaf35217c988402edcb6ffa63f81ef8c..0000000000000000000000000000000000000000
--- a/pages/401.html
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: Page 401
-layout: error
-error: 401
-done: true
----
diff --git a/pages/403.html b/pages/403.html
deleted file mode 100644
index 8c44b7978b4b4476f7a0f1d24ee8dff91e100386..0000000000000000000000000000000000000000
--- a/pages/403.html
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: Page 403
-layout: error
-error: 403
-done: true
----
diff --git a/pages/500.html b/pages/500.html
deleted file mode 100644
index 5dafb102e6088fd3b2b2c0236bb29ded260b91c8..0000000000000000000000000000000000000000
--- a/pages/500.html
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: Page 500
-layout: error
-error: 500
-done: true
----
diff --git a/pages/503.html b/pages/503.html
deleted file mode 100644
index 7aca95c76c00b76fe515017003d807f8d7efd978..0000000000000000000000000000000000000000
--- a/pages/503.html
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: Page 503
-layout: error
-error: 503
-done: true
----
diff --git a/pages/_docs/alerts.md b/pages/_docs/alerts.md
new file mode 100644
index 0000000000000000000000000000000000000000..98086da32c5d20ad92bf608301644f889bcf6135
--- /dev/null
+++ b/pages/_docs/alerts.md
@@ -0,0 +1,42 @@
+---
+title: Alerts
+---
+
+Bootstrap provides an easy way to create predefined alert messages.
+
+## Default markup
+
+{% example html %}
+{% for variant in site.variants %}
+ {% capture text_with_variant %}
+ This is a {{ variant }} alert — check it out!
+ {% endcapture %}
+ {% include ui/alert.html type=variant text=text_with_variant %}
+{% endfor %}
+{% endexample %}
+
+
+## Alert Links
+
+Add the `alert-link` class to any links inside the alert box to create "matching colored links":
+
+{% example html %}
+{% for variant in site.variants %}
+ {% capture text_with_variant %}
+ This is a {{ variant }} alert — check it out!
+ {% endcapture %}
+ {% include ui/alert.html type=variant text=text_with_variant %}
+{% endfor %}
+{% endexample %}
+
+
+## Closing Alerts
+
+{% example html %}
+{% for variant in site.variants %}
+ {% capture text_with_variant %}
+ This is a {{ variant }} alert — check it out!
+ {% endcapture %}
+ {% include ui/alert.html type=variant text=text_with_variant close=true %}
+{% endfor %}
+{% endexample %}
diff --git a/pages/_docs/avatars.md b/pages/_docs/avatars.md
index 65b4626186880e8869a01f2599b7c52c37ca7348..e0e5eafe4ddcf4399dfedcdab1443c1a1ac39034 100644
--- a/pages/_docs/avatars.md
+++ b/pages/_docs/avatars.md
@@ -4,7 +4,7 @@ title: Avatars
Create and group avatars of various shapes and sizes with one component.
-### Default markup
+## Default markup
{% example html wrapper=avatar-list %}
{% include ui/avatar.html person-id=1 %}
@@ -12,7 +12,7 @@ Create and group avatars of various shapes and sizes with one component.
{% include ui/avatar.html person-id=3 %}
{% endexample %}
-### Avatar size
+## 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.
@@ -24,7 +24,7 @@ Using Bootstrap’s typical naming structure, you can create a standard avatar,
{% include ui/avatar.html person-id=6 size="sm" %}
{% endexample %}
-### Avatar status
+## Avatar status
Add an online or offline status indicator to show user's availability.
@@ -37,7 +37,7 @@ Add an online or offline status indicator to show user's availability.
{% include ui/avatar.html person-id=16 status="gray" %}
{% endexample %}
-### Avatar shape
+## Avatar shape
Change the shape of an avatar with the default Bootstrap image classes.
@@ -49,7 +49,7 @@ Change the shape of an avatar with the default Bootstrap image classes.
{% include ui/avatar.html person-id=21 shape="rounded-lg" %}
{% endexample %}
-### Initials
+## Initials
{% example html wrapper=avatar-list %}
{% include ui/avatar.html placeholder="AB" size="xl" %}
@@ -60,7 +60,7 @@ Change the shape of an avatar with the default Bootstrap image classes.
{% endexample %}
-### Avatar initials color
+## Avatar initials color
[See more]({% docs_url colors %})
@@ -72,7 +72,7 @@ Change the shape of an avatar with the default Bootstrap image classes.
{% include ui/avatar.html placeholder="IJ" color="purple" %}
{% endexample %}
-### Avatar initials icons
+## Avatar initials icons
{% example html wrapper=avatar-list %}
{% include ui/avatar.html icon="user" %}
@@ -80,7 +80,7 @@ Change the shape of an avatar with the default Bootstrap image classes.
{% include ui/avatar.html icon="user-plus" %}
{% endexample %}
-### Avatars list
+## Avatars list
{% example html %}
diff --git a/pages/_docs/badges.md b/pages/_docs/badges.md
index 71e0287f9a04d14139d1948507684cac1b93bb87..4a7b32b490d45e4889d647f0bf1e2ec6d48f7cd0 100644
--- a/pages/_docs/badges.md
+++ b/pages/_docs/badges.md
@@ -4,7 +4,7 @@ title: Badges
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
+## Default markup
{% example html %}
{% for color in site.colors %}
@@ -12,7 +12,7 @@ A small count and labeling component. Please read the [official Bootstrap docume
{% endfor %}
{% endexample %}
-### Pill badges
+## Pill badges
{% example html %}
{% for color in site.colors %}
@@ -21,7 +21,7 @@ A small count and labeling component. Please read the [official Bootstrap docume
{% endexample %}
-### Soft badges
+## Soft badges
{% example html %}
{% for color in site.colors %}
@@ -30,7 +30,7 @@ A small count and labeling component. Please read the [official Bootstrap docume
{% endexample %}
-### Links
+## Links
{% example html %}
{% for color in site.colors %}
@@ -39,7 +39,7 @@ A small count and labeling component. Please read the [official Bootstrap docume
{% endexample %}
-### Empty badges
+## Empty badges
{% example html %}
{% for color in site.colors %}
diff --git a/pages/_docs/buttons.md b/pages/_docs/buttons.md
index 953155f27541057c9191f4630cf247e12e551546..baf8af04764e65f9b1977bb4c417b37bfe430c45 100644
--- a/pages/_docs/buttons.md
+++ b/pages/_docs/buttons.md
@@ -2,7 +2,7 @@
title: Buttons
---
-### Default markup
+## Default markup
{% example html wrapper=btn-list %}
{% include ui/button.html color="primary" text="Button" %}
diff --git a/pages/_docs/index.md b/pages/_docs/index.md
index bbd3d41815f2a7af7921aabe526015bcf5d55985..3245fb5bc71ced400b51e37968796fc0c79f1665 100644
--- a/pages/_docs/index.md
+++ b/pages/_docs/index.md
@@ -8,7 +8,7 @@ We’ve created this admin panel for everyone who wants to create any templates
-### Setup environment
+## Setup environment
To use our build system and run our documentation locally, you'll need a copy of Tabler's source files and Node. Follow these steps:
@@ -20,13 +20,13 @@ To use our build system and run our documentation locally, you'll need a copy of
When completed, you'll be able to run the various commands provided from the command line.
-### Build Tabler locally
+## Build Tabler locally
1. From the root `/tabler` directory, run `npm run serve` in the command line.
2. Open [http://localhost:4000](http://localhost:4000) in your browser, and voilà.
3. Any change in `/src` directory will build application and refresh the page.
-### Bugs and feature requests
+## Bugs and feature requests
Have a bug or a feature request? [Please open a new issue](https://github.com/tabler/tabler/issues/new).
diff --git a/pages/_docs/spinners.md b/pages/_docs/spinners.md
index c9922ff8dc5fe69e45207171c7bc62a1c54a6702..6293da16465b207532994857aac817040dbfd3e6 100644
--- a/pages/_docs/spinners.md
+++ b/pages/_docs/spinners.md
@@ -2,14 +2,14 @@
title: Spinners
---
-### Default markup
+## Default markup
{% example html %}
{% include ui/spinner.html %}
{% endexample %}
-### Colors
+## Colors
{% example html %}
{% for color in site.colors %}
@@ -18,14 +18,14 @@ title: Spinners
{% endfor %}
{% endexample %}
-### Size
+## Size
{% example html %}
{% include ui/spinner.html %}
{% include ui/spinner.html size="sm" %}
{% endexample %}
-### Growing spinner
+## Growing spinner
{% example html %}
{% include ui/spinner.html type="grow" %}
@@ -38,7 +38,7 @@ title: Spinners
{% endfor %}
{% endexample %}
-### Buttons
+## Buttons
{% example html wrapper=btn-list %}
{% include ui/button.html spinner=true text="Button" color="primary" %}
diff --git a/pages/_docs/steps.md b/pages/_docs/steps.md
index aeddc4a122137973cbb310b6e2dd05ab9c57d052..bddbf65e11f79816035be00c12936d71aebf80fd 100644
--- a/pages/_docs/steps.md
+++ b/pages/_docs/steps.md
@@ -4,32 +4,32 @@ title: Steps
Steps are progress indicators of a sequence of task steps.
-### Default markup
+## Default markup
{% example html %}
{% include ui/steps.html show-title=true %}
{% endexample %}
-### Tooltips
+## Tooltips
{% example html %}
{% include ui/steps.html show-title=true show-tooltip=true %}
{% endexample %}
-### Color
+## Color
{% example html %}
{% include ui/steps.html color="green" show-title=true %}
{% include ui/steps.html color="red" show-title=true %}
{% endexample %}
-### Steps without title
+## Steps without title
{% example html %}
{% include ui/steps.html show-tooltip=true %}
{% endexample %}
-### Steps with numbers
+## Steps with numbers
{% example html %}
{% include ui/steps.html count=5 active=2 numbers=true color="lime" %}
diff --git a/pages/_docs/tabs.md b/pages/_docs/tabs.md
new file mode 100644
index 0000000000000000000000000000000000000000..095209f8ed5775be436c217540446f50306da7a5
--- /dev/null
+++ b/pages/_docs/tabs.md
@@ -0,0 +1,39 @@
+---
+title: Tabs
+---
+
+## Default markup
+
+{% example html columns=1 %}
+{% include cards/tabs.html id="ex1" %}
+{% endexample %}
+
+## Tabs with icons
+
+{% example html columns=1 %}
+{% include cards/tabs.html icons=true settings=true id="ex2" %}
+{% endexample %}
+
+## Tabs only with icons
+
+{% example html columns=1 %}
+{% include cards/tabs.html icons=true settings=true hide-text=true id="ex3" %}
+{% endexample %}
+
+## Tabs with dropdown
+
+{% example html columns=1 %}
+{% include cards/tabs.html dropdown=true id="ex4" %}
+{% endexample %}
+
+## Full-width tabs
+
+{% example html columns=1 %}
+{% include cards/tabs.html justified=true icons=true hide-text=true activity=true id="ex5" %}
+{% endexample %}
+
+## Alternate style
+
+{% example html columns=1 %}
+{% include cards/tabs.html icons=true alternative=true settings=true id="ex6" %}
+{% endexample %}
diff --git a/pages/_docs/toasts.md b/pages/_docs/toasts.md
index 60cc691bbb7e1a0d01456c73b7af49bf843506c7..26d397f1493e1f96ff58da49171cde247856e03f 100644
--- a/pages/_docs/toasts.md
+++ b/pages/_docs/toasts.md
@@ -4,7 +4,7 @@ title: Toasts
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.).
-### Default markup
+## Default markup
{% example html %}
{% include ui/toast.html %}
diff --git a/pages/_docs/tooltips.md b/pages/_docs/tooltips.md
index 35fcbcee6b57a063ff869e565b7c6f0d2e443533..17db6bd9d011321127b951b2da64845dbb5c10af 100644
--- a/pages/_docs/tooltips.md
+++ b/pages/_docs/tooltips.md
@@ -5,7 +5,7 @@ title: Tooltips
The Tooltip component is small pop-up box that appears when the user moves the mouse pointer over an element:
-### Default markup
+## Default markup
{% example html wrapper=btn-list %}
{% endexample %}
-### Tooltip with HTML
+## Tooltip with HTML
{% example html wrapper=btn-list %}
-
\ No newline at end of file
+
diff --git a/pages/_includes/ui/alert.html b/pages/_includes/ui/alert.html
index 998576ce54d934b198cf61c53342281a2729e8d3..ff2d6e60eeee9d2f070be693f660b2afb6db54c6 100644
--- a/pages/_includes/ui/alert.html
+++ b/pages/_includes/ui/alert.html
@@ -1,3 +1,4 @@
+ {% if include.close %}×{% endif %}
{% if include.icon %}{% include ui/icon.html icon=include.icon %}{% endif %} {{ include.text | default: "This is a custom alert box!" }}
-
\ No newline at end of file
+
diff --git a/pages/_layouts/docs.html b/pages/_layouts/docs.html
index e1695528e181f3b196b310e29fc2afff42c37237..54d6288274c32a59647d3284f50d481b1778143a 100644
--- a/pages/_layouts/docs.html
+++ b/pages/_layouts/docs.html
@@ -29,7 +29,7 @@ page-title: Documentation
-
{{ page.title }}
+
{{ page.title }}
{% if page.description %}
{{ page.description }}
diff --git a/pages/alerts.html b/pages/alerts.html
deleted file mode 100644
index 48527e476a5f0c67a12d778adb53b30227ec7dda..0000000000000000000000000000000000000000
--- a/pages/alerts.html
+++ /dev/null
@@ -1,13 +0,0 @@
----
-title: Alerts
-page-title: Alerts
-done: true
----
-
-{% for variant in site.variants %}
- {% capture text_with_variant %}
- This is a {{ variant }} alert — check it out!
- {% endcapture %}
-
- {% include ui/alert.html type=variant text=text_with_variant %}
-{% endfor %}
diff --git a/pages/forms.html b/pages/forms.html
new file mode 100644
index 0000000000000000000000000000000000000000..2eaafa3710d06d4c601663804cc170533bbef71c
--- /dev/null
+++ b/pages/forms.html
@@ -0,0 +1,45 @@
+---
+layout: default
+---
+
+