update labels and toasts

5 files changed, 69 insertions, 51 deletions

diff --git a/demo/index.html b/demo/index.html
index 18b7714..2174abf 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -14,12 +14,12 @@
     <section class="container grid-960">
         <section class="typography">
             <header class="text-center"><h4>headings</h4></header>
-            <h1>H1 Title</h1>
-            <h2>H2 Title</h2>
-            <h3>H3 Title</h3>
-            <h4>H4 Title</h4>
-            <h5>H5 Title</h5>
-            <h6>H6 Title</h6>
+            <h1>H1 Title <span class="label">default label</span></h1>
+            <h2>H2 Title <span class="label">default label</span></h2>
+            <h3>H3 Title <span class="label">default label</span></h3>
+            <h4>H4 Title <span class="label">default label</span></h4>
+            <h5>H5 Title <span class="label">default label</span></h5>
+            <h6>H6 Title <span class="label">default label</span></h6>
 
             <header class="text-center"><h4>paragraphs</h4></header>
             <p>Lorem ipsum dolor sit amet, <span class="highlight">consectetur</span> adipiscing elit. <a href="#">Integer</a> posuere erat a ante.</p>
@@ -357,25 +357,22 @@
                     <span class="label label-primary">primary label</span>
                 </div>
                 <div class="column">
-                    <span class="label label-success">primary label</span>
+                    <span class="label label-success">success label</span>
                 </div>
                 <div class="column">
-                    <span class="label label-warning">default label</span>
+                    <span class="label label-info">info label</span>
                 </div>
                 <div class="column">
-                    <span class="label label-danger">primary label</span>
+                    <span class="label label-warning">warning label</span>
                 </div>
                 <div class="column">
-                    <span class="label label-lg">default label</span>
+                    <span class="label label-danger">danger label</span>
                 </div>
                 <div class="column">
-                    <span class="label label-primary label-lg">primary label</span>
+                    <span class="label label-lg">default label</span>
                 </div>
                 <div class="column">
-                    <span class="label label-lg">
-                        large label
-                        <button class="btn-clear"></button>
-                    </span>
+                    <span class="label label-primary label-lg">primary label</span>
                 </div>
             </div>
         </section>
@@ -398,19 +395,21 @@
             <div class="columns">
                 <div class="column">
                     <div class="toast toast-success">
-                        <button class="btn-clear pull-right"></button>
+                        Efficiently unleash cross-media information without cross-media value.
+                    </div>
+                </div>
+                <div class="column">
+                    <div class="toast toast-info">
                         Efficiently unleash cross-media information without cross-media value.
                     </div>
                 </div>
                 <div class="column">
                     <div class="toast toast-warning">
-                        <button class="btn-clear pull-right"></button>
                         Efficiently unleash cross-media information without cross-media value.
                     </div>
                 </div>
                 <div class="column">
                     <div class="toast toast-danger">
-                        <button class="btn-clear pull-right"></button>
                         Efficiently unleash cross-media information without cross-media value.
                     </div>
                 </div>
@@ -530,7 +529,7 @@
                     </span>
                 </div>
                 <div class="column">
-                    <span class="badge" data-badge="●">
+                    <span class="badge" data-badge="♀">
                         Notifications
                     </span>
                 </div>
diff --git a/dist/spectre.css b/dist/spectre.css
index 7522e88..69d5c82 100644
--- a/dist/spectre.css
+++ b/dist/spectre.css
@@ -906,11 +906,11 @@ textarea.form-input {
 }
 .has-success .form-input,
 .form-input.input-success {
-  border-color: #00c372;
+  border-color: #32B643;
 }
 .has-danger .form-input,
 .form-input.input-danger {
-  border-color: #e74c3c;
+  border-color: #E85600;
 }
 .form-label {
   display: block;
@@ -1051,15 +1051,15 @@ textarea.form-input {
 }
 .label {
   display: inline-block;
-  padding: .2rem .5rem;
-  font-size: 1.2rem;
-  line-height: 1.4rem;
+  padding: .3rem .5rem;
+  font-size: 80%;
+  line-height: 1;
   color: #666;
   background-color: #efefef;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
-  margin: -0.2rem 0.5rem 0 0;
+  margin: -0.3rem 0.5rem 0 0.5rem;
   border-radius: .2rem;
 }
 .label.label-primary {
@@ -1068,20 +1068,24 @@ textarea.form-input {
 }
 .label.label-success {
   color: #fff;
-  background-color: #00c372;
+  background-color: #32B643;
+}
+.label.label-info {
+  color: #fff;
+  background-color: #0193eb;
 }
 .label.label-warning {
-  color: #896902;
-  background-color: #fccf42;
+  color: #fff;
+  background-color: #ffb700;
 }
 .label.label-danger {
   color: #fff;
-  background-color: #e74c3c;
+  background-color: #E85600;
 }
 .label.label-lg {
-  padding: .2rem .8rem;
-  font-size: 1.4rem;
-  line-height: 1.8rem;
+  font-size: 100%;
+  line-height: 1.2;
+  padding: .3rem .8rem;
 }
 .badge {
   position: relative;
@@ -1122,18 +1126,23 @@ textarea.form-input {
 }
 .toast.toast-success {
   color: #fff;
-  background-color: #00c372;
-  border-color: #00b96c;
+  background-color: #32B643;
+  border-color: #30ae40;
+}
+.toast.toast-info {
+  color: #fff;
+  background-color: #0193eb;
+  border-color: #018de1;
 }
 .toast.toast-warning {
-  color: #896902;
-  background-color: #fccf42;
-  border-color: #fccc38;
+  color: #fff;
+  background-color: #ffb700;
+  border-color: #f5b000;
 }
 .toast.toast-danger {
   color: #fff;
-  background-color: #e74c3c;
-  border-color: #e64433;
+  background-color: #E85600;
+  border-color: #de5200;
 }
 .menu {
   display: block;
diff --git a/src/labels.less b/src/labels.less
index 3288065..ac11630 100644
--- a/src/labels.less
+++ b/src/labels.less
@@ -1,15 +1,15 @@
 // Labels
 .label {
   display: inline-block;
-  padding: .2rem .5rem;
-  font-size: 1.2rem;
-  line-height: 1.4rem;
+  padding: .3rem .5rem;
+  font-size: 80%;
+  line-height: 1;
   color: #666;
   background-color: @core-border-color;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
-  margin: -.2rem .5rem 0 0;
+  margin: -.3rem .5rem 0 .5rem;
   border-radius: .2rem;
 
   &.label-primary {
@@ -20,8 +20,12 @@
     color: #fff;
     background-color: @control-color-success;
   }
+  &.label-info {
+    color: #fff;
+    background-color: @control-color-info;
+  }
   &.label-warning {
-    color: darken(@control-color-warning, 35%);
+    color: #fff;
     background-color: @control-color-warning;
   }
   &.label-danger {
@@ -30,8 +34,8 @@
   }
 
   &.label-lg {
-    padding: .2rem .8rem;
-    font-size: 1.4rem;
-    line-height: 1.8rem;
+    font-size: 100%;
+    line-height: 1.2;
+    padding: .3rem .8rem;
   }
 }
\ No newline at end of file
diff --git a/src/toasts.less b/src/toasts.less
index 6d4b03d..9792e50 100644
--- a/src/toasts.less
+++ b/src/toasts.less
@@ -19,8 +19,13 @@
     background-color: @control-color-success;
     border-color: darken(@control-color-success, 2%);
   }
+  &.toast-info {
+    color: #fff;
+    background-color: @control-color-info;
+    border-color: darken(@control-color-info, 2%);
+  }
   &.toast-warning {
-    color: darken(@control-color-warning, 35%);
+    color: #fff;
     background-color: @control-color-warning;
     border-color: darken(@control-color-warning, 2%);
   }
diff --git a/src/variables.less b/src/variables.less
index 5b6e4ba..23220df 100644
--- a/src/variables.less
+++ b/src/variables.less
@@ -11,9 +11,10 @@
 @core-link-color: #5764C6;
 @core-border-color: #efefef;
 @control-color: #c5c5c5;
-@control-color-success: #00c372;
-@control-color-warning: #fccf42;
-@control-color-danger: #e74c3c;
+@control-color-success: #32B643;
+@control-color-info: #0193eb;
+@control-color-warning: #ffb700;
+@control-color-danger: #E85600;
 
 
 // Mixins