Merge branches 'dev' and 'dev-docs' of https://github.com/tabler/tabler into dev-docs

Conflicts: pages/_docs/badges.md

Merge branches 'dev' and 'dev-docs' of https://github.com/tabler/tabler into dev-docs
Conflicts: pages/_docs/badges.md
f8db48d7 · codecalm · 0d36f298 · 5544589c · f8db48d7 · f8db48d7
4 changed file
--- a/pages/_docs/badges.md
+++ b/pages/_docs/badges.md
@@ -60,3 +60,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 centered=true %}
+
+### 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 %}
--- a/pages/_includes/ui/badge.html
+++ b/pages/_includes/ui/badge.html
-<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 }}>
--- a/pages/_layouts/base.html
+++ b/pages/_layouts/base.html
@@ -2,34 +2,36 @@
 {% include layout/banner.html %}
 <html lang="en"{% if page.rtl %} dir="rtl" {% endif %}>
 <head>
-   <meta charset="utf-8"/>
-   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
-   <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+	<meta charset="utf-8"/>
+	<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
+	<meta http-equiv="X-UA-Compatible" content="ie=edge"/>

-   <title>{% if page.title %}{{ page.title }} - {% endif %}{% if layout.title %}{{ layout.title }} - {% endif %}{% if site.title %}{{ site.title }} - {% endif %}{{ site.description }}</title>
+	<title>{% if page.title %}{{ page.title }} - {% endif %}{% if layout.title %}{{ layout.title }} - {% endif %}{% if site.title %}{{ site.title }} - {% endif %}{{ site.description }}</title>

 	<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>

 	<meta name="msapplication-TileColor" content="{{ site.data.colors.blue }}"/>
-   <meta name="theme-color" content="{{ site.data.colors.blue }}"/>
+	<meta name="theme-color" content="{{ site.data.colors.blue }}"/>

-   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
-   <meta name="apple-mobile-web-app-capable" content="yes"/>
-   <meta name="mobile-web-app-capable" content="yes"/>
-   <meta name="HandheldFriendly" content="True"/>
-   <meta name="MobileOptimized" content="320"/>
-   <meta name="robots" content="noindex,nofollow,noarchive"/>
+	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+	<meta name="apple-mobile-web-app-capable" content="yes"/>
+	<meta name="mobile-web-app-capable" content="yes"/>
+	<meta name="HandheldFriendly" content="True"/>
+	<meta name="MobileOptimized" content="320"/>
+	<meta name="robots" content="noindex,nofollow,noarchive"/>

-   <link rel="icon" href="{{ site.base }}/favicon.ico" type="image/x-icon"/>
-   <link rel="shortcut icon" href="{{ site.base }}/favicon.ico" type="image/x-icon"/>
+	<link rel="icon" href="{{ site.base }}/favicon.ico" type="image/x-icon"/>
+	<link rel="shortcut icon" href="{{ site.base }}/favicon.ico" type="image/x-icon"/>


-   {% if page.description %}
-      <meta name="description" content="{{ page.description | escape }}"/>
-   {% endif %}
+	{% if page.description %}
+		<meta name="description" content="{{ page.description | escape }}"/>
+	{% endif %}
+
+	{% include layout/og.html show=layout.og-component %}
+	{% include layout/css.html %}

-   {% include layout/og.html show=layout.og-component %}
-   {% include layout/css.html %}
+	{% include layout/js.html %}
 </head>

 {% assign dark-theme = page.dark-theme | default: site.dark-theme %}
@@ -39,7 +41,6 @@

 	{% include layout/modals-capture.html %}

-	{% include layout/js.html %}
 	{% include layout/js-capture.html %}

 	{% if site.debug and jekyll.environment == 'development' %}

--- a/scss/ui/_badges.scss
+++ b/scss/ui/_badges.scss
-
-
 .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;
+}
\ No newline at end of file