From 1e7f28b530d5594d599c827a767d669ece2558fd Mon Sep 17 00:00:00 2001 From: codecalm Date: Wed, 10 Jul 2019 17:12:52 +0200 Subject: [PATCH] progress bar, docs fixes --- pages/_data/flags.yml | 6 +--- pages/_docs/badges.md | 10 +++--- pages/_docs/buttons.md | 4 ++- pages/_docs/flags.md | 25 ++++++++++---- pages/_docs/form-elements.md | 38 ++++++++++----------- pages/_docs/form-helpers.md | 2 +- pages/_docs/index.md | 6 ++-- pages/_docs/progress.md | 26 ++++++++++++++ pages/_docs/ribbons.md | 10 +++--- pages/_docs/spinners.md | 11 +++--- pages/_docs/steps.md | 10 +++--- pages/_docs/tables.md | 4 +-- pages/_docs/tabs.md | 12 +++---- pages/_includes/ui/progress.html | 10 +++++- scss/ui/_progress.scss | 58 ++++++++++++++++++++++++++++---- 15 files changed, 162 insertions(+), 70 deletions(-) diff --git a/pages/_data/flags.yml b/pages/_data/flags.yml index 8e838c341..17c3bcb67 100644 --- a/pages/_data/flags.yml +++ b/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,11 +494,9 @@ flag: "ws" - name: "Yemen" flag: "ye" -- name: "Mayotte" - flag: "yt" - name: "South Africa" flag: "za" - name: "Zambia" flag: "zm" - name: "Zimbabwe" - flag: "zw" \ No newline at end of file + flag: "zw" diff --git a/pages/_docs/badges.md b/pages/_docs/badges.md index 6017237d9..f37b5eebf 100644 --- a/pages/_docs/badges.md +++ b/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 %} diff --git a/pages/_docs/buttons.md b/pages/_docs/buttons.md index 22d7f9d5c..85faca7a0 100644 --- a/pages/_docs/buttons.md +++ b/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" %} diff --git a/pages/_docs/flags.md b/pages/_docs/flags.md index 558c91072..dc591d5cc 100644 --- a/pages/_docs/flags.md +++ b/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 + + +{% for flag in site.data.flags %} + + + + + +{% endfor %} +
{% include ui/flag.html name=flag.flag %}{{ flag.flag }}{{ flag.name }}
diff --git a/pages/_docs/form-elements.md b/pages/_docs/form-elements.md index 403b418b6..4ad1eacd6 100644 --- a/pages/_docs/form-elements.md +++ b/pages/_docs/form-elements.md @@ -2,7 +2,7 @@ title: Form Elements --- -## Classic Input +### Classic Input {% example %}
@@ -27,7 +27,7 @@ title: Form Elements
{% endexample %} -## Password and validation +### Password and validation {% example %}
@@ -52,7 +52,7 @@ title: Form Elements
{% endexample %} -## Select +### Select {% example %}
@@ -64,7 +64,7 @@ title: Form Elements
{% endexample %} -## Textarea +### Textarea {% example %}
@@ -72,17 +72,17 @@ title: Form Elements
{% 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 %}
@@ -110,7 +110,7 @@ title: Form Elements
{% endexample %} -## Toggle switches +### Toggle switches {% example %} {% include parts/input-toggle.html %} @@ -123,7 +123,7 @@ title: Form Elements {% endexample %} -## Radios +### Radios {% example %}
Radios
@@ -171,7 +171,7 @@ title: Form Elements
{% endexample %} -## Checkboxes +### Checkboxes {% example %}
Checkboxes
@@ -220,7 +220,7 @@ title: Form Elements
{% endexample%} -## Ratios +### Ratios {% example %}
@@ -228,7 +228,7 @@ title: Form Elements
{% endexample %} -## Sample form +### Sample form {% example %}
@@ -250,7 +250,7 @@ title: Form Elements
{% endexample %} -## Input group +### Input group {% example %}
@@ -286,12 +286,12 @@ title: Form Elements
{% endexample %} -## Input with icon +### Input with icon {% example %} {% include parts/input-icon.html %} {% endexample %} -## Separated inputs +### Separated inputs {% example %}
@@ -305,7 +305,7 @@ title: Form Elements
{% endexample %} -## Custom Input examples +### Custom Input examples {% example %}
@@ -328,7 +328,7 @@ title: Form Elements
{% endexample %} -## Date component +### Date component {% example %}
@@ -368,7 +368,7 @@ title: Form Elements
{% endexample %} -## Input with button +### Input with button {% example %}
@@ -389,4 +389,4 @@ title: Form Elements
-{% endexample %} \ No newline at end of file +{% endexample %} diff --git a/pages/_docs/form-helpers.md b/pages/_docs/form-helpers.md index 9b380478f..34077163d 100644 --- a/pages/_docs/form-helpers.md +++ b/pages/_docs/form-helpers.md @@ -2,7 +2,7 @@ title: Form helpers --- -## Input help +### Input help {% example %} ? diff --git a/pages/_docs/index.md b/pages/_docs/index.md index 77ebbd907..98b6745e1 100644 --- a/pages/_docs/index.md +++ b/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). diff --git a/pages/_docs/progress.md b/pages/_docs/progress.md index 1e82802f9..c795ac88c 100644 --- a/pages/_docs/progress.md +++ b/pages/_docs/progress.md @@ -10,3 +10,29 @@ To create a default progress bar, add a `.progress` class to a `
` 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 `` element. + +{% example html %} + +{% endexample %} diff --git a/pages/_docs/ribbons.md b/pages/_docs/ribbons.md index 578e93439..5fe18237a 100644 --- a/pages/_docs/ribbons.md +++ b/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%" %} diff --git a/pages/_docs/spinners.md b/pages/_docs/spinners.md index feedbf916..a68644bcd 100644 --- a/pages/_docs/spinners.md +++ b/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" %} diff --git a/pages/_docs/steps.md b/pages/_docs/steps.md index bf113e7da..0e09df48c 100644 --- a/pages/_docs/steps.md +++ b/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" %} diff --git a/pages/_docs/tables.md b/pages/_docs/tables.md index 9e2a2613d..2416050d9 100644 --- a/pages/_docs/tables.md +++ b/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. diff --git a/pages/_docs/tabs.md b/pages/_docs/tabs.md index 1817b4e41..55f822467 100644 --- a/pages/_docs/tabs.md +++ b/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" %} diff --git a/pages/_includes/ui/progress.html b/pages/_includes/ui/progress.html index d661e9636..9305e4a36 100644 --- a/pages/_includes/ui/progress.html +++ b/pages/_includes/ui/progress.html @@ -1,6 +1,14 @@ {% assign percentage = include.percentage | default: 38 %}
-
+ {% if include.indeterminate %} +
+ {% else %} +
+ {% if include.show-value %} + {{ percentage }}% + {% else %} {{ percentage }}% Complete + {% endif %}
+ {% endif %}
diff --git a/scss/ui/_progress.scss b/scss/ui/_progress.scss index 18809f774..48fcbe84e 100644 --- a/scss/ui/_progress.scss +++ b/scss/ui/_progress.scss @@ -1,12 +1,58 @@ -.progress { - background: $min-black; - border-radius: 2px; +@keyframes progress-indeterminate { + 0% { + left: -35%; + right: 100% + } + + 100%, 60% { + left: 100%; + right: -90% + } } -.progress-xs { - height: .25rem; +.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; + } }