Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-22 18:04:26 +04:00
Code Issues Projects Releases Wiki Activity

fix #973 badge fixes

Browse Source
This commit is contained in:
codecalm
2022-01-03 19:10:38 +01:00
parent d2d9eb0146
commit e432599f68
2 changed files with 4 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/pages/_docs/badges.md
View File

@@ -12,7 +12,7 @@ The default badges are square and come in the basic set of colors.
{% capture code %} {% capture code %}
{% for color in site.colors %} {% for color in site.colors %}
<span class="badge bg-{{ color[0] }}">{{ color[0] }}</span> <span class="badge bg-{{ color[0] }}">{{ color[1].title }}</span>
{% endfor %} {% endfor %}
{% endcapture %} {% endcapture %}
{% include example.html code=code centered=true %} {% include example.html code=code centered=true %}
@@ -36,7 +36,7 @@ You can create a soft colour variant of a corresponding contextual badge variati
{% capture code %} {% capture code %}
{% for color in site.colors %} {% for color in site.colors %}
<span class="badge bg-{{ color[0] }}-lt">{{ color[0] }}</span> <span class="badge bg-{{ color[0] }}-lt">{{ color[1].title }}</span>
{% endfor %} {% endfor %}
{% endcapture %} {% endcapture %}
{% include example.html code=code centered=true %} {% include example.html code=code centered=true %}
@@ -48,7 +48,7 @@ Place the badge within an `<a>` element if you want it to perform the function o
{% capture code %} {% capture code %}
{% for color in site.colors %} {% for color in site.colors %}
<a href="#" class="badge bg-{{ color[0] }}">{{ color[0] }}</a> <a href="#" class="badge bg-{{ color[0] }}">{{ color[1].title }}</a>
{% endfor %} {% endfor %}
{% endcapture %} {% endcapture %}
{% include example.html code=code centered=true %} {% include example.html code=code centered=true %}
@@ -66,19 +66,6 @@ Leave the HTML element empty if you want to create badges without any text. Empt
{% include example.html code=code centered=true %} {% include example.html code=code centered=true %}
## Badge avatars
Create the `.badge-avatar` class to add an avatar that will make a badge more personalized.
{% capture code %}
{% include ui/badge.html person-id=1 %}
{% include ui/badge.html person-id=2 %}
{% include ui/badge.html person-id=3 %}
{% include ui/badge.html person-id=4 %}
{% include ui/badge.html person-id=5 %}
{% endcapture %}
{% include example.html code=code %}
## Button with badge ## Button with badge
Badges can be used as part of links or buttons to provide a counter. Badges can be used as part of links or buttons to provide a counter.

11
src/scss/ui/_badges.scss
View File

@@ -12,7 +12,6 @@
font-weight: $headings-font-weight; font-weight: $headings-font-weight;
font-size: $h6-font-size; font-size: $h6-font-size;
letter-spacing: .04em; letter-spacing: .04em;
text-transform: uppercase;
@at-root a#{&} { @at-root a#{&} {
color: $white; color: $white;
@@ -28,13 +27,6 @@
border-radius: $border-radius-pill; border-radius: $border-radius-pill;
} }
.avatar {
box-sizing: content-box;
width: 1.25rem;
height: 1.25rem;
margin: 0 .5rem 0 -.5rem;
}
.icon { .icon {
width: 1em; width: 1em;
height: 1em; height: 1em;
@@ -50,6 +42,5 @@
} }
.badge-pill { .badge-pill {
border-radius: 100px; border-radius: $border-radius-pill;
min-width: 1.75em;
} }