feat(badge): add sizes variants to badges and include a white info ve…

…rsion when badge is large enough
Orange-OpenSource · Aug 30, 2019 · 859cc5e · 859cc5e
1 parent f20de5b
commit 859cc5e
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 2 deletions.
diff --git a/scss/_badge.scss b/scss/_badge.scss
@@ -50,6 +50,12 @@
 @each $color, $value in $theme-colors {
   .badge-#{$color} {
     @include badge-variant($value);
+
+    @if $color == "info" {
+      &.badge-lg {
+        color: $white;
+      }
+    }
   }
 }
 
@@ -64,3 +70,11 @@
     }
   }
 }
+
+.badge-xlg {
+  @include font-size($badge-font-size-xlg);
+}
+
+.badge-lg {
+  @include font-size($badge-font-size-lg);
+}
diff --git a/scss/_o-navbar.scss b/scss/_o-navbar.scss
@@ -29,7 +29,6 @@
     .badge {
       left: 50%;
       z-index: 1;
-      font-size: .75rem;
     }
   }
 

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1022,7 +1022,9 @@ $toast-header-border-color:         rgba(0, 0, 0, .05) !default;
 
 // Badges
 
-$badge-font-size:                   .875rem !default;
+$badge-font-size:                   $font-size-sm !default;
+$badge-font-size-lg:                $font-size-base !default;
+$badge-font-size-xlg:               $font-size-lg !default;
 $badge-font-weight:                 $font-weight-bold !default;
 $badge-padding-y:                   .1875rem !default;
 $badge-padding-x:                   .625rem !default;