From 20abd54fea8319f7f55721989c3b69c29e4e2280 Mon Sep 17 00:00:00 2001
From: Igor Guastalla de Lima <limaguastallaigor@gmail.com>
Date: Sat, 22 Dec 2018 20:32:14 -0200
Subject: [PATCH] feat(badges): added is-icon class to badges and new mixin

---
 scss/elements/badges.scss | 37 +++++++++++++++++++++++++++++++++----
 1 file changed, 33 insertions(+), 4 deletions(-)

diff --git a/scss/elements/badges.scss b/scss/elements/badges.scss
index a9305c7..38d6c98 100644
--- a/scss/elements/badges.scss
+++ b/scss/elements/badges.scss
@@ -1,3 +1,11 @@
+@mixin span-style-is-icon($color, $background-color, $display, $width, $font-size) {
+  display: $display;
+  width: $width;
+  font-size: $font-size;
+  color: $color;
+  background-color: $background-color;
+}
+
 @mixin span-style($color, $background, $option, $width: 50%) {
   position: absolute;
   top: 0;
@@ -12,10 +20,10 @@
   }
 }
 
-@mixin badge-style($color, $background, $is-splited: true) {
+@mixin badge-style($color, $background, $option: is-default) {
   $box-shadow-first-two: 0 0.5em $background, 0 -0.5em $background;
 
-  @if $is-splited == true {
+  @if $option == is-splited {
     &:first-child {
       @include span-style($color, $background, left);
 
@@ -26,6 +34,21 @@
 
       box-shadow: $box-shadow-first-two, 0.5em 0 $background, 0 0 $background;
     }
+  } @else if $option == is-icon {
+    &:first-child {
+      @include span-style-is-icon($color, $background, flex, 2.7em, 0.5em);
+
+      position: absolute;
+      top: -1.7em;
+      left: 2.5em;
+      align-items: center;
+      height: 2.7em;
+    }
+    &:last-child {
+      @include span-style-is-icon($color, $background, inline-block, 6em, 0.88em);
+
+      box-shadow: $box-shadow-first-two, 0.5em 0 $background, -0.5em 0 $background;
+    }
   } @else {
     &:first-child {
       @include span-style($color, $background, 0, 100%);
@@ -63,12 +86,18 @@
   @each $type in $types {
     &.is-splited {
       & span.is-#{nth($type, 1)} {
-        @include badge-style(nth($type, 2), nth($type, 3));
+        @include badge-style(nth($type, 2), nth($type, 3), is-splited);
+      }
+    }
+
+    &.is-icon {
+      & span.is-#{nth($type, 1)} {
+        @include badge-style(nth($type, 2), nth($type, 3), is-icon);
       }
     }
 
     & span.is-#{nth($type, 1)} {
-      @include badge-style(nth($type, 2), nth($type, 3), false);
+      @include badge-style(nth($type, 2), nth($type, 3));
     }
   }
 }