badges docs

_config.yml

@@ -91,9 +91,9 @@ colors:
   gray:
     hex: '#868e96'
     name: Gray
-  black:
+  dark:
     hex: '#354051'
-    name: Black
+    name: Dark
 
 variants: [primary, secondary, success, info, warning, danger, dark]
 socials: [facebook, twitter, google, youtube, vimeo, dribbble, github, instagram, pinterest, vk, rss, flickr, bitbucket]
@@ -106,4 +106,4 @@ docs-menu:
 - title: Getting started
   pages: [index]
 - title: Components
-  pages: [avatars, typography, alerts, buttons, colors, cards]
+  pages: [avatars, badges, buttons]

pages/_docs/badges.md

+---
+title: Badges
+---
+
+### Default markup
+
+{% example html %}
+{% for color in site.colors %}
+<span class="badge text-white bg-{{ color[0] }}">{{ color[0] }}</span>
+{% endfor %}
+{% endexample %}
+
+### Pill badges
+
+{% example html %}
+{% for color in site.colors %}
+<span class="badge badge-pill text-white bg-{{ color[0] }}">{{ forloop.index }}</span>
+{% endfor %}
+{% endexample %}
+
+
+### Soft badges
+
+{% example html %}
+{% for color in site.colors %}
+<span class="badge bg-{{ color[0] }}-lt">{{ color[0] }}</span>
+{% endfor %}
+{% endexample %}
+
+
+### Links
+
+{% example html %}
+{% for color in site.colors %}
+<a href="#" class="badge bg-{{ color[0] }}">{{ color[0] }}</a>
+{% endfor %}
+{% endexample %}
+
+
+### Empty badges
+
+{% example html %}
+{% for color in site.colors %}
+<a href="#" class="badge bg-{{ color[0] }}"></a>
+{% endfor %}
+{% endexample %}

pages/_layouts/docs.html

@@ -8,15 +8,16 @@ page-title: Documentation
 
 <div class="row">
 	<div class="col-lg-3 order-lg-1 mb-4">
-		<a href="{{ site.github_url }}" class="btn btn-block btn-primary mb-4">
+		<a href="{{ site.github_url }}" class="btn btn-block btn-primary mb-4" target="_blank">
 			{% include ui/icon.html icon="github" class="mr-2" %}Browse source code
 		</a>
 
 		{% for group in site.docs-menu %}
+      {{ group.title }}
 		<div class="list-group list-group-transparent mb-0">
 			{% for p in group.pages %}
 			{% assign doc = site.docs | where: "slug", p | first %}
-			<a href="{{ site.base }}{{ doc.url }}" class="list-group-item list-group-item-action{% if page.url == doc.url %} active{% endif %}">
+			<a href="{{ site.base }}/{{ doc.url }}" class="list-group-item list-group-item-action{% if page.url == doc.url %} active{% endif %}">
 				{{ doc.title }}
 			</a>
 			{% endfor %}

scss/_variables.scss

@@ -93,7 +93,8 @@ $colors: (
   "cyan": $cyan,
   "white": $white,
   "gray": $gray-600,
-  "gray-dark": $gray-800
+  "gray-dark": $gray-800,
+  "dark": $dark
 ) !default;
 
 $avatar-sizes: (
@@ -153,6 +154,9 @@ $container-max-widths: (
   xl: 1200px
 ) !default;
 
+//badges
+$badge-font-weight: 600 !default;
+
 //pagination
 $pagination-border-width: 0 !default;
 $pagination-padding-y: .25rem !default;

scss/ui/_badges.scss

 .badge {
-  //color: #ffffff;
-  //color: $text-muted;
-  //background: theme-color-lightest($text-muted);
-  font-weight: 600;
+  //font-weight: 600;
+
+  @at-root a#{&} {
+    color: $white;
+  }
 
   &:empty {
-    display: block;
+    display: inline-block;
     width: 8px;
     min-width: 0;
     height: 8px;
@@ -26,41 +27,8 @@
   transform: translate(0%, -50%);
 }
 
-//light
-@each $name, $color in $status-colors {
-  .badge-#{$name}-lt {
-    color: $color;
-    background-color: theme-color-lighter($color);
-  }
-}
-
 //bordered
-@each $name, $color in $status-colors {
-  .badge-#{$name}.badge-outline {
-    color: $color;
-    background-color: transparent;
-    border: 1px solid $color;
-  }
-}
-
-// rest colors
-@if $generate-colors {
-  @each $name, $color in $colors {
-    .badge-#{$name}-lt {
-      color: $color;
-      background-color: theme-color-lighter($color);
-    }
-
-    .badge-#{$name}.badge-outline {
-      color: $color;
-      background-color: transparent;
-      border: 1px solid $color;
-    }
-
-    .badge-#{$name} {
-      color: #fff;
-      background-color: $color;
-    }
-  }
-
+.badge-outline {
+  background-color: transparent;
+  border: 1px solid currentColor;
 }