Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-07-29 14:34:37 +04:00
Code Issues Projects Releases Wiki Activity

Merge branches 'dev' and 'dev-doc-bootstrap-link' of https://github.com/tabler/tabler into dev-doc-bootstrap-link

Browse Source 
 Conflicts:
	.editorconfig
	pages/_docs/colors.md
This commit is contained in:
codecalm
2019-12-09 18:34:11 +01:00
parent 3b32ff48ba 770717035a
commit fb183df28c
34 changed files with 377 additions and 313 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_docs/badges.md
+10 -2
View File
@@ -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>