source/stylesheets/refills/_badges.scss in refills-0.0.2 vs source/stylesheets/refills/_badges.scss in refills-0.1.0

@@ -1,44 +1,37 @@
-.badges {
-  $badge-background: $medium-gray;
-  $badge-dark-color: $dark-gray;
-  $badge-error-color: $error-color;
-  $badge-notice-color: $notice-color;
-  $badge-success-color: $success-color;
-  $badge-font-color: #fff;
-  $badge-font-size: $base-font-size * .75;
+$badge-font-size: 0.75em !default;
+$medium-gray: #999 !default;
+$alert-color: #fff6bf !default;
+$error-color: #fbe3e4 !default;
+$notice-color: #e5edf8 !default;
+$success-color: #e6efc2 !default;
 
-  display: block;
-  margin-bottom: $base-line-height;
+@mixin badge($color: $medium-gray) {
+  background-color: $color;
+  border-radius: $badge-font-size * 5;
+  color: darken($color, 60%);
+  display: inline-block;
+  font-size: $badge-font-size;
+  font-weight: 600;
+  line-height: 1;
+  padding: 0.4em 1.2em;
+}
 
-  .badge {
-    @include inline-block;
-    background: $badge-background;
-    border-radius: 2em;
-    color: $badge-font-color;
-    font-size: $badge-font-size;
-    font-weight: 600;
-    line-height: 1;
-    padding: .25em 1em;
-    text-align: center;
+.badge {
+  @include badge;
+}
 
-    &.dark {
-      background: $badge-dark-color;
-    }
+.badge-alert {
+  @include badge($alert-color);
+}
 
-    &.error {
-      background: $badge-error-color;
-      color: darken($badge-error-color, 60);
-    }
+.badge-error {
+  @include badge($error-color);
+}
 
-    &.notice {
-      background: $badge-notice-color;
-      color: darken($badge-error-color, 60);
-    }
-
-    &.success {
-      background: $badge-success-color;
-      color: darken($badge-success-color, 60);
-    }
-  }
+.badge-notice {
+  @include badge($notice-color);
 }
 
+.badge-success {
+  @include badge($success-color);
+}