update demo and labels

5 files changed, 109 insertions, 87 deletions

diff --git a/demo/index.html b/demo/index.html
index f74aeba..7a4bf3e 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -108,25 +108,25 @@
                         <td>The Shawshank Redemption</td>
                         <td>2h 22min</td>
                         <td>Crime, Drama</td>
-                        <td>14 October 1994 (USA)</td>
+                        <td>14 October 1994 <span class="label">USA</span></td>
                     </tr>
                     <tr>
                         <td>The Godfather</td>
                         <td>2h 55min</td>
                         <td>Crime, Drama</td>
-                        <td>24 March 1972 (USA)</td>
+                        <td>24 March 1972 <span class="label">USA</span></td>
                     </tr>
                     <tr class="selected">
                         <td>Schindler's List</td>
                         <td>3h 15min</td>
                         <td>Biography, Drama, History</td>
-                        <td>4 February 1994 (USA)</td>
+                        <td>4 February 1994 <span class="label">USA</span></td>
                     </tr>
                     <tr>
                         <td>Se7en</td>
                         <td>2h 7min</td>
                         <td>Crime, Drama, Mystery</td>
-                        <td>24 March 1972 (USA)</td>
+                        <td>24 March 1972 <span class="label">USA</span></td>
                     </tr>
                 </tbody>
             </table>
@@ -215,6 +215,15 @@
                     <span class="label label-primary">primary label</span>
                 </div>
                 <div class="column">
+                    <span class="label label-success">primary label</span>
+                </div>
+                <div class="column">
+                    <span class="label label-warning">default label</span>
+                </div>
+                <div class="column">
+                    <span class="label label-danger">primary label</span>
+                </div>
+                <div class="column">
                     <span class="label label-lg">default label</span>
                 </div>
                 <div class="column">
@@ -226,12 +235,6 @@
                         <button class="btn-clear"></button>
                     </span>
                 </div>
-                <div class="column">
-                    <span class="label label-primary label-lg">
-                        large label
-                        <button class="btn-clear"></button>
-                    </span>
-                </div>
             </div>
         </section>
         <section class="toasts">
diff --git a/dist/spectre.css b/dist/spectre.css
index 9670d09..f74460a 100644
--- a/dist/spectre.css
+++ b/dist/spectre.css
@@ -433,6 +433,32 @@ blockquote {
 blockquote p:last-child {
   margin-bottom: 0;
 }
+ul,
+ol {
+  margin: 0 0 1rem;
+}
+ul ul,
+ol ul,
+ul ol,
+ol ol {
+  margin-left: 2rem;
+}
+ul li,
+ol li {
+  margin-top: 1rem;
+}
+ul {
+  list-style: disc inside;
+}
+ul ul {
+  list-style-type: circle;
+}
+ol {
+  list-style: decimal inside;
+}
+ol ol {
+  list-style-type: lower-alpha;
+}
 .text-left {
   text-align: left;
 }
@@ -478,32 +504,6 @@ blockquote p:last-child {
       -ms-hyphens: auto;
           hyphens: auto;
 }
-ul,
-ol {
-  margin: 0 0 1rem;
-}
-ul ul,
-ol ul,
-ul ol,
-ol ol {
-  margin-left: 2rem;
-}
-ul li,
-ol li {
-  margin-top: 1rem;
-}
-ul {
-  list-style: disc inside;
-}
-ul ul {
-  list-style-type: circle;
-}
-ol {
-  list-style: decimal inside;
-}
-ol ol {
-  list-style-type: lower-alpha;
-}
 .container {
   width: 100%;
   margin-left: auto;
@@ -929,6 +929,37 @@ textarea.form-input {
   border-radius: .2rem;
   background-color: #fff;
 }
+.label {
+  display: inline-block;
+  padding: .2rem .5rem;
+  font-size: 1.2rem;
+  line-height: 1.4rem;
+  color: #fff;
+  background-color: #c5c5c5;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  margin: -0.2rem 0.5rem 0 0;
+  border-radius: 2px;
+}
+.label.label-primary {
+  background-color: #5764C6;
+}
+.label.label-success {
+  background-color: #00c372;
+}
+.label.label-warning {
+  color: #896902;
+  background-color: #fccf42;
+}
+.label.label-danger {
+  background-color: #e74c3c;
+}
+.label.label-lg {
+  padding: .2rem .8rem;
+  font-size: 1.4rem;
+  line-height: 1.6rem;
+}
 .toast {
   display: block;
   width: 100%;
@@ -958,27 +989,6 @@ textarea.form-input {
   background-color: #e74c3c;
   border-color: #e64433;
 }
-.label {
-  display: inline-block;
-  padding: .2rem .5rem;
-  font-size: 1.2rem;
-  line-height: 1.4rem;
-  color: #fff;
-  background-color: #c5c5c5;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: middle;
-  margin-top: -0.2rem;
-  border-radius: 2px;
-}
-.label.label-primary {
-  background-color: #5764C6;
-}
-.label.label-lg {
-  padding: .2rem .8rem;
-  font-size: 1.4rem;
-  line-height: 1.6rem;
-}
 .clearfix::after,
 .container::after,
 .columns::after {
diff --git a/spectre.less b/spectre.less
index 4dd4231..20e3ae9 100644
--- a/spectre.less
+++ b/spectre.less
@@ -14,10 +14,10 @@
 @import 'src/tables.less';
 @import 'src/buttons.less';
 @import 'src/forms.less';
-@import 'src/toasts.less';
 
 // Components
 @import 'src/labels.less';
+@import 'src/toasts.less';
 //@import 'src/cards.less';
 //@import 'src/menus.less';
 //@import 'src/modals.less';
diff --git a/src/labels.less b/src/labels.less
index 57995ee..1550a93 100644
--- a/src/labels.less
+++ b/src/labels.less
@@ -9,12 +9,22 @@
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
-  margin-top: -.2rem;
+  margin: -.2rem .5rem 0 0;
   border-radius: 2px;
 
   &.label-primary {
     background-color: @core-color;
   }
+  &.label-success {
+    background-color: @control-color-success;
+  }
+  &.label-warning {
+    color: darken(@control-color-warning, 35%);
+    background-color: @control-color-warning;
+  }
+  &.label-danger {
+    background-color: @control-color-danger;
+  }
 
   &.label-lg {
     padding: .2rem .8rem;
diff --git a/src/typography.less b/src/typography.less
index a15b132..dc7da3d 100644
--- a/src/typography.less
+++ b/src/typography.less
@@ -44,6 +44,33 @@ blockquote {
     margin-bottom: 0;
   }
 }
+ul,
+ol {
+  margin: 0 0 1rem;
+
+  ul,
+  ol {
+    margin-left: 2rem;
+  }
+
+  li {
+    margin-top: 1rem;
+  }
+}
+ul {
+  list-style: disc inside;
+
+  ul {
+    list-style-type: circle;
+  }
+}
+ol {
+  list-style: decimal inside;
+
+  ol {
+    list-style-type: lower-alpha;
+  }
+}
 
 .text-left {
   text-align: left;
@@ -89,32 +116,4 @@ blockquote {
   word-break: break-word;
   word-wrap: break-word;
   hyphens: auto;
-}
-
-ul,
-ol {
-  margin: 0 0 1rem;
-
-  ul,
-  ol {
-    margin-left: 2rem;
-  }
-
-  li {
-    margin-top: 1rem;
-  }
-}
-ul {
-  list-style: disc inside;
-
-  ul {
-    list-style-type: circle;
-  }
-}
-ol {
-  list-style: decimal inside;
-
-  ol {
-    list-style-type: lower-alpha;
-  }
 }
\ No newline at end of file