progress bar, docs fixes

pages/_data/flags.yml

@@ -458,8 +458,6 @@
   flag: "tt"
 - name: "Tuvalu"
   flag: "tv"
-- name: "Taiwan"
-  flag: "tw"
 - name: "Tanzania"
   flag: "tz"
 - name: "Ukraine"
@@ -496,8 +494,6 @@
   flag: "ws"
 - name: "Yemen"
   flag: "ye"
-- name: "Mayotte"
-  flag: "yt"
 - name: "South Africa"
   flag: "za"
 - name: "Zambia"

pages/_docs/badges.md

@@ -6,7 +6,7 @@ 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
+### Default markup
 
 {% example %}
 {% for color in site.colors %}
@@ -14,7 +14,7 @@ A small count and labeling component. Please read the [official Bootstrap docume
 {% endfor %}
 {% endexample %}
 
-## Pill badges
+### Pill badges
 
 {% example %}
 {% for color in site.colors %}
@@ -23,7 +23,7 @@ A small count and labeling component. Please read the [official Bootstrap docume
 {% endexample %}
 
 
-## Soft badges
+### Soft badges
 
 {% example %}
 {% for color in site.colors %}
@@ -32,7 +32,7 @@ A small count and labeling component. Please read the [official Bootstrap docume
 {% endexample %}
 
 
-## Links
+### Links
 
 {% example %}
 {% for color in site.colors %}
@@ -41,7 +41,7 @@ A small count and labeling component. Please read the [official Bootstrap docume
 {% endexample %}
 
 
-## Empty badges
+### Empty badges
 
 {% example %}
 {% for color in site.colors %}

pages/_docs/buttons.md

@@ -79,7 +79,7 @@ In need of a button, but not the hefty background colors they bring? Replace the
 {% endfor %}
 {% endexample %}
 
-## Button with star
+### Button with star
 
 {% example html %}
 {% for button in site.button_variants %}
@@ -123,6 +123,8 @@ Basic buttons are traditional buttons with borders and background with an extra
 
 ### Social buttons
 
+A button can be formatted to link to a social website
+
 {% example html wrapper=btn-list %} 
 {% for button in site.socials %}
 {% include ui/button.html color=button.name icon=button.name text=button.title provider="brand" %}

pages/_docs/flags.md

@@ -2,9 +2,10 @@
 title: Flags
 menu: docs.flags
 plugin: flags
+done: true
 ---
 
-## Flag
+### Flag
 
 {% example html %}
 {% include ui/flag.html name="tg" class="mr-1" %}
@@ -12,11 +13,23 @@ plugin: flags
 {% include ui/flag.html name="pt" %}
 {% endexample %}
 
-## Flag sizes
+### Flag sizes
 
 {% example html %}
-{% include ui/flag.html name="tg" class="flag-size-xl mr-1" %}
-{% include ui/flag.html name="br" class="flag-size-lg mr-1" %}
-{% include ui/flag.html name="pt" class="flag-size-md" %}
-{% include ui/flag.html name="gb" class="mr-1" %}
+{% include ui/flag.html name="pl" class="flag-size-xl mr-1" %}
+{% include ui/flag.html name="pl" class="flag-size-lg mr-1" %}
+{% include ui/flag.html name="pl" class="flag-size-md" %}
+{% include ui/flag.html name="pl" class="mr-1" %}
 {% endexample %}
+
+### Types
+
+<table>
+{% for flag in site.data.flags %}
+<tr>
+<td>{% include ui/flag.html name=flag.flag %}</td>
+<td><code>{{ flag.flag }}</code></td>
+<td>{{ flag.name }}</td>
+</tr>
+{% endfor %}
+</table>

pages/_docs/form-elements.md

@@ -2,7 +2,7 @@
 title: Form Elements
 ---
 
-## Classic Input
+### Classic Input
 
 {% example %}
 <div class="form-group">
@@ -27,7 +27,7 @@ title: Form Elements
 </div>
 {% endexample %}
 
-## Password and validation
+### Password and validation
 {% example %}
 <div class="form-group">
    <label class="form-label">Password</label>
@@ -52,7 +52,7 @@ title: Form Elements
 </div>
 {% endexample %}
 
-## Select
+### Select
 {% example %}
 <div class="form-group">
    <label class="form-label">Country</label>
@@ -64,7 +64,7 @@ title: Form Elements
 </div>
 {% endexample %}
 
-## Textarea
+### Textarea
 {% example %}
 <div class="form-group">
    <label class="form-label">Textarea <span class="float-right text-muted-light">56/100</span></label>
@@ -72,17 +72,17 @@ title: Form Elements
 </div>
 {% endexample %}
 
-## Image check
+### Image check
 {% example %}
 {% include parts/input-image.html %}
 {% endexample %}
 
-## Input color
+### Input color
 {% example %}
 {% include parts/input-color.html %}
 {% endexample %}
 
-## Custom Checkbox examples
+### Custom Checkbox examples
 {% example %}
 <div class="form-group">
    <label class="form-label">Icons input</label>
@@ -110,7 +110,7 @@ title: Form Elements
 </div>
 {% endexample %}
 
-## Toggle switches
+### Toggle switches
 {% example %}
 {% include parts/input-toggle.html %}
 
@@ -123,7 +123,7 @@ title: Form Elements
 </div>
 {% endexample %}
 
-## Radios
+### Radios
 {% example %}
 <div class="form-group">
    <div class="form-label">Radios</div>
@@ -171,7 +171,7 @@ title: Form Elements
 </div>
 {% endexample %}
 
-## Checkboxes
+### Checkboxes
 {% example %}
 <div class="form-group">
    <div class="form-label">Checkboxes</div>
@@ -220,7 +220,7 @@ title: Form Elements
 </div>
 {% endexample%}
 
-## Ratios
+### Ratios
 {% example %}
 <div class="form-group">
    <label class="form-label">Ratios</label>
@@ -228,7 +228,7 @@ title: Form Elements
 </div>
 {% endexample %}
 
-## Sample form
+### Sample form
 {% example %}
 <fieldset class="form-fieldset">
 	<div class="form-group">
@@ -250,7 +250,7 @@ title: Form Elements
 </fieldset>
 {% endexample %}
 
-## Input group
+### Input group
 {% example %}
 <div class="form-group">
    <label class="form-label">Input group</label>
@@ -286,12 +286,12 @@ title: Form Elements
 </div>
 {% endexample %}
 
-## Input with icon
+### Input with icon
 {% example %}
 {% include parts/input-icon.html %}
 {% endexample %}
 
-## Separated inputs
+### Separated inputs
 {% example %}
 <div class="form-group">
    <label class="form-label">Separated inputs</label>
@@ -305,7 +305,7 @@ title: Form Elements
 </div>
 </div>{% endexample %}
 
-## Custom Input examples
+### Custom Input examples
 {% example %}
 <div class="form-group">
    <label class="form-label">Username</label>
@@ -328,7 +328,7 @@ title: Form Elements
 </div>
 {% endexample %}
 
-## Date component
+### Date component
 {% example %}
 <div class="form-group">
    <label class="form-label">Date of birth</label>
@@ -368,7 +368,7 @@ title: Form Elements
 </div>
 {% endexample %}
 
-## Input with button
+### Input with button
 {% example %}
 <div class="form-group">
    <label class="form-label">Button input</label>

pages/_docs/form-helpers.md

@@ -2,7 +2,7 @@
 title: Form helpers
 ---
 
-## Input help
+### Input help
 
 {% example %}
 <span class="form-help" data-toggle="popover" data-placement="top" data-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p><p class='mb-0'><a href=''>USP ZIP codes lookup tools</a></p>">?</span>

pages/_docs/index.md

@@ -9,7 +9,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:
 
@@ -21,13 +21,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).

pages/_docs/progress.md

@@ -10,3 +10,29 @@ To create a default progress bar, add a `.progress` class to a `<div>` element:
 {% example html %}
 {% include ui/progress.html %}
 {% endexample %}
+
+### Small progress
+
+{% example html %}
+{% include ui/progress.html percentage=57 size="sm" %}
+{% endexample %}
+
+### Progress with value
+
+{% example html %}
+{% include ui/progress.html percentage=75 show-value=true %}
+{% endexample %}
+
+### Indeterminate progress
+
+{% example html %}
+{% include ui/progress.html indeterminate=true size="sm" %}
+{% endexample %}
+
+### Native progress element
+
+You can also use native HTML5 `<progress>` element.
+
+{% example html %}
+<progress class="progress progress-sm" value="15" max="100" />
+{% endexample %}

pages/_docs/ribbons.md

@@ -4,31 +4,31 @@ menu: docs.ribbons
 new: true
 ---
 
-## Default markup
+### Default markup
 
 {% example html columns=1 %}
 {% include cards/ribbon.html %}
 {% endexample %}
 
-## Ribbon position
+### Ribbon position
 
 {% example html columns=1 %}
 {% include cards/ribbon.html top=true left=true %}
 {% endexample %}
 
-## Ribbon color
+### Ribbon color
 
 {% example html columns=1 %}
 {% include cards/ribbon.html color="red" %}
 {% endexample %}
 
-## Ribbon text
+### Ribbon text
 
 {% example html columns=1 %}
 {% include cards/ribbon.html color="green" text="-50%" %}
 {% endexample %}
 
-## Ribbon style
+### Ribbon style
 
 {% example html columns=1 %}
 {% include cards/ribbon.html bookmark=true color="orange" text="-50%" %}

pages/_docs/spinners.md

@@ -1,16 +1,17 @@
 ---
 title: Spinners
 menu: docs.spinners
+done: true
 ---
 
-## Default markup
+### Default markup
 
 {% example %}
 {% include ui/spinner.html %}
 {% endexample %}
 
 
-## Colors
+### Colors
 
 {% example %}
 {% for color in site.colors %}
@@ -19,14 +20,14 @@ menu: docs.spinners
 {% endfor %}
 {% endexample %}
 
-## Size
+### Size
 
 {% example %}
 {% include ui/spinner.html %}
 {% include ui/spinner.html size="sm" %}
 {% endexample %}
 
-## Growing spinner
+### Growing spinner
 
 {% example %}
 {% include ui/spinner.html type="grow" %}
@@ -39,7 +40,7 @@ menu: docs.spinners
 {% endfor %}
 {% endexample %}
 
-## Buttons
+### Buttons
 
 {% example html wrapper=btn-list %}
 {% include ui/button.html spinner=true text="Button" color="primary" %}

pages/_docs/steps.md

@@ -6,32 +6,32 @@ new: true
 
 Steps are progress indicators of a sequence of task steps.
 
-## Default markup
+### Default markup
 
 {% example %}
 {% include ui/steps.html show-title=true %}
 {% endexample %}
 
-## Tooltips
+### Tooltips
 
 {% example %}
 {% include ui/steps.html show-title=true show-tooltip=true %}
 {% endexample %}
 
-## Color
+### Color
 
 {% example %}
 {% 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 %}
 {% include ui/steps.html show-tooltip=true %}
 {% endexample %}
 
-## Steps with numbers
+### Steps with numbers
 
 {% example %}
 {% include ui/steps.html count=5 active=2 numbers=true color="lime" %}

pages/_docs/tables.md

@@ -3,7 +3,7 @@ title: Tables
 menu: docs.tables
 ---
 
-## Basic Table
+### Basic Table
 
 A basic Bootstrap table has a light padding and only horizontal dividers.
 
@@ -13,7 +13,7 @@ The `.table` class adds basic styling to a table:
 {% include ui/table.html %}
 {% endexample %}
 
-## No wrap
+### No wrap
 
 Prevents table cell content from wrapping to another line.
 

pages/_docs/tabs.md

@@ -3,37 +3,37 @@ title: Tabs
 menu: docs.tabs
 ---
 
-## Default markup
+### Default markup
 
 {% example html columns=1 %}
 {% include cards/tabs.html id="ex1" %}
 {% endexample %}
 
-## Tabs with icons
+### Tabs with icons
 
 {% example html columns=1 %}
 {% include cards/tabs.html icons=true settings=true id="ex2" %}
 {% endexample %}
 
-## Tabs only with icons
+### 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
+### Tabs with dropdown
 
 {% example html columns=1 %}
 {% include cards/tabs.html dropdown=true id="ex4" %}
 {% endexample %}
 
-## Full-width tabs
+### 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
+### Alternate style
 
 {% example html columns=1 %}
 {% include cards/tabs.html icons=true alternative=true settings=true id="ex6" %}

pages/_includes/ui/progress.html

@@ -1,6 +1,14 @@
 {% assign percentage = include.percentage | default: 38 %}
 <div class="progress{% if include['size'] %} progress-{{ include['size'] }}{% endif %}{% if include.class %}{{ include.class }}{% endif %}">
+   {% if include.indeterminate %}
+   <div class="progress-bar progress-bar-indeterminate"></div>
+   {% else %}
    <div class="progress-bar{% if include.color %} bg-{{ include.color }}{% endif %}" style="width: {{ percentage }}%" role="progressbar" aria-valuenow="{{ percentage }}" aria-valuemin="0" aria-valuemax="100">
+      {% if include.show-value %}
+      {{ percentage }}%
+      {% else %}
       <span class="sr-only">{{ percentage }}% Complete</span>
+      {% endif %}
    </div>
+   {% endif %}
 </div>

scss/ui/_progress.scss

@@ -1,12 +1,58 @@
-.progress {
-  background: $min-black;
-  border-radius: 2px;
+@keyframes progress-indeterminate {
+  0% {
+    left: -35%;
+    right: 100%
   }
 
-.progress-xs {
-  height: .25rem;
+  100%, 60% {
+    left: 100%;
+    right: -90%
+  }
+}
+
+.progress {
+  appearance: none;
+  background: $min-black;
+  height: .75rem;
+  line-height: .75rem;
+  position: relative;
+  width: 100%;
+
+  &::-webkit-progress-bar {
+    background: $min-black;
+  }
+
+  &::-webkit-progress-value {
+    background-color: $primary
+  }
+
+  &::-moz-progress-bar {
+    background-color: $primary
+  }
+
+  &::-ms-fill {
+    background-color: $primary;
+    border: none
+  }
 }
 
 .progress-sm {
-  height: .5rem;
+  height: .25rem;
+}
+
+.progress-bar-indeterminate {
+  &:after,
+  &:before {
+    content: '';
+    position: absolute;
+    background-color: inherit;
+    left: 0;
+    will-change: left, right;
+    top: 0;
+    bottom: 0;
+  }
+
+  &:before {
+    animation: progress-indeterminate 2.1s cubic-bezier(.65, .815, .735, .395) infinite;
+  }
 }