feat: add badges into index.html and some corrections to support it

nostalgic-css · Jan 3, 2019 · bce3d7b · bce3d7b
1 parent 44a1fb2
commit bce3d7b
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -272,6 +272,43 @@ <h2 class="title">Progress</h2>
       <progress class="nes-progress is-pattern" value="50" max="100"></progress>
     </section>
 
+    <section class="nes-container with-title">
+      <h2 class="title">Badges</h2>
+      <a href="#" class="nes-badge">
+          <span class="is-dark">NES.css</span>
+      </a>
+      <a href="#" class="nes-badge">
+          <span class="is-primary">is</span>
+      </a>
+      <a href="#" class="nes-badge">
+          <span class="is-success">a</span>
+      </a>
+      <a href="#" class="nes-badge">
+          <span class="is-warning">great</span>
+      </a>
+      <a href="#" class="nes-badge">
+          <span class="is-error">framework!</span>
+      </a>
+      <a href="#" class="nes-badge is-splited">
+          <span class="is-dark">npm</span>
+          <span class="is-primary">1.1.0</span>
+      </a>
+      <a href="#" class="nes-badge is-splited">
+          <span class="is-dark">test</span>
+          <span class="is-success">100%</span>
+      </a>
+      <a href="#" class="nes-badge is-icon">
+          <span class="is-warning">
+              <i class="nes-icon star is-small"></i>
+          </span>
+          <span class="is-primary">Icons</span>
+      </a>
+      <a href="#" class="nes-badge is-icon">
+          <span class="is-dark">hi</span>
+          <span class="is-warning">Text</span>
+      </a>
+    </section>
+
     <section class="nes-container with-title">
       <h2 class="title">Icons</h2>
       <section class="nes-container with-title">

diff --git a/scss/elements/badges.scss b/scss/elements/badges.scss
@@ -1,8 +1,11 @@
 @mixin span-style-is-icon($color, $background-color, $display, $width, $font-size) {
   display: $display;
+  align-items: center;
+  justify-content: center;
   width: $width;
   font-size: $font-size;
   color: $color;
+  text-align: center;
   background-color: $background-color;
 }
 
@@ -11,6 +14,7 @@
   top: 0;
   width: $width;
   color: $color;
+  text-align: center;
   background-color: $background;
 
   @if $option == left {
@@ -39,9 +43,8 @@
       @include span-style-is-icon($color, $background, flex, 2.7em, 0.5em);
 
       position: absolute;
-      top: -1.7em;
-      left: 2.5em;
-      align-items: center;
+      top: -2.8em;
+      left: -2.7em;
       height: 2.7em;
     }
     &:last-child {
@@ -65,13 +68,11 @@
   position: relative;
   display: inline-block;
   width: $em * 14;
-  height: $em;
-  padding: 0.75em;
+  height: $em * 2.5;
   margin: 0.5em;
   font-size: $em * 1.2;
-  text-align: center;
   white-space: nowrap;
-  vertical-align: middle;
+  vertical-align: top;
   user-select: none;
 
   // Other styles
@@ -91,6 +92,7 @@
     }
 
     &.is-icon {
+      width: $em * 7;
       & span.is-#{nth($type, 1)} {
         @include badge-style(nth($type, 2), nth($type, 3), is-icon);
       }