feat(badges): storybook corrections and order of properties

docs/badge.stories.js

@@ -8,26 +8,29 @@ stories.addDecorator(withKnobs);
 
 stories.add('badges', () => {
   const optionsLeft = radios('class-left', {
+    default: 'is-dark',
     'is-dark': 'is-dark',
     'is-success': 'is-success',
     'is-primary': 'is-primary',
     'is-warning': 'is-warning',
     'is-error': 'is-error',
-  }, '');
+  }, 'is-dark');
 
   const optionsRight = radios('class-right', {
+    default: 'is-success',
     'is-dark': 'is-dark',
     'is-success': 'is-success',
     'is-primary': 'is-primary',
     'is-warning': 'is-warning',
     'is-error': 'is-error',
-  }, '');
+  }, 'is-success');
 
   const sizes = radios('size', {
+    default: 'is-medium',
     'is-small': 'is-small',
     'is-medium': 'is-medium',
     'is-large': 'is-large',
-  }, '');
+  }, 'is-medium');
 
   return `<span class="nes-badge ${sizes}">
               <span class="${optionsLeft}">npm</span>

scss/elements/badges.scss

@@ -1,9 +1,9 @@
 @mixin span-style($color, $background, $left) {
   position: absolute;
-  color: $color;
-  background-color: $background;
   top: 0;
   width: 50%;
+  color: $color;
+  background-color: $background;
 
   @if $left == 0 {
     left: 0;
@@ -46,6 +46,7 @@
   $border-size: 4px;
 
   position: relative;
+  box-sizing: border-box;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -55,7 +56,6 @@
   white-space: nowrap;
   vertical-align: middle;
   cursor: $cursor-click-url;
-  box-sizing: border-box;
   user-select: none;
   border: none;