Merge pull request #479 from tabler/dev-badges

added bagde-avatar badge-tag and changed color of the dafault badge

pages/_docs/badges.md

@@ -61,3 +61,27 @@ If you don't want your badge to contain any text you can do it by leaving the ht
 {% endfor %}
 {% endcapture %}
 {% include example.html code=code %}
+
+### Badge addons
+
+You can add badge addon by adding `.badge-addon` class.
+
+{% capture code %}
+{% include ui/badge.html text="task" color="green" addon="finished" %}
+{% include ui/badge.html text="bundle" color="purple" addon="passing" %}
+{% include ui/badge.html text="CSS gzip size" color="red-lt" addon="20.9kB" addon-color="red" %}
+{% endcapture %}
+{% include example.html code=code %}
+
+### Badge avatars
+
+If you want to add an avatar to your badge just create `.badge-avatar` class.
+
+{% capture code %}
+{% include ui/badge.html person-id=1 color="blue" %}
+{% include ui/badge.html person-id=2 color="blue" %}
+{% include ui/badge.html person-id=3 color="blue" %}
+{% include ui/badge.html person-id=4 color="blue" %}
+{% include ui/badge.html person-id=5 color="blue" %}
+{% endcapture %}
+{% include example.html code=code %}

pages/_includes/ui/badge.html

@@ -1 +1,18 @@
-<span class="badge bg-{{ include.color | default: 'primary' }}{% if include.class %} {{ include.class }}{% endif %}">{{ include.text }}</span>
+{% assign el = 'span' %}
+<{{ el }} class="badge bg-{{ include.color | default: 'primary' }}{% if include.class %} {{ include.class }}{% endif %}">
+{% if include.person-id %}
+    {% assign person-id = include.person-id | minus: 1 %}
+    {% assign person = site.data.people[person-id] %}
+    {% assign src = person.photo %}
+    {% unless src %}
+        {% assign placeholder = person.full_name | first_letters %}
+    {% endunless %}
+    <{{ el }} class="badge-avatar" style="background-image: url({{ site.base }}/{{ src }})">{% unless src %}{{ person.full_name | first_letters }}{% endunless %}</{{ el }}>
+ {% endif %}
+{% if include.text %}
+    {{ include.text }}
+{% else %}
+    {{ person.full_name }}
+{% endif %}
+{% if include.addon %}<{{ el }} class="badge-addon {% if include.addon-color%}bg-{{ include.addon-color }}{% endif %}">{{ include.addon }}</{{ el }}>{% endif %}
+</{{ el }}>

scss/ui/_badges.scss

@@ -1,9 +1,13 @@
-
-
 .badge {
   @include subheader(false);
-  background: $gray-200;
-
+  display: inline-flex;
+  justify-content: center;
+  padding: 0 .5em;
+  line-height: 1.75em;
+  background: $gray-500;
+  overflow: hidden;
+  vertical-align: text-bottom;
+  
   @at-root a#{&} {
     color: $white;
   }
@@ -23,8 +27,8 @@
   position: absolute;
   top: 25%;
   right: 0;
-  min-width: 1rem;
-  min-height: 1rem;
+  min-width: 1.75em;
+  min-height: 1.75em;
   padding: 0 .25rem;
   line-height: 1rem;
   background-clip: padding-box;
@@ -39,4 +43,24 @@
 
 .badge-pill {
   border-radius: 100px;
+  min-width: 1.75em;
 }
+
+.badge-avatar {
+  box-sizing: content-box;
+  width: 1.75em;
+  margin: 0 .5em 0 -.5em;
+  color: $light-white;
+  background: $light-black no-repeat center/cover;
+  vertical-align: text-bottom;
+}
+
+.badge-addon {
+  padding: 0 .5rem;
+  margin: 0 -.5em 0 .5em;
+  min-width: 1.75em;
+  background: $light-black;
+  text-align: center;
+  color: $white;
+  text-decoration: none;
+}