add labels code

5 files changed, 74 insertions, 3 deletions

diff --git a/demo/index.html b/demo/index.html
index 20a6a54..6080e0a 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -116,7 +116,7 @@
                         <td>Crime, Drama</td>
                         <td>24 March 1972 (USA)</td>
                     </tr>
-                    <tr>
+                    <tr class="selected">
                         <td>Schindler's List</td>
                         <td>3h 15min</td>
                         <td>Biography, Drama, History</td>
@@ -201,10 +201,27 @@
                 </div>
                 <div class="form-group">
                     <button class="btn btn-primary">Submit</button>
-                    <button class="btn">Cancel</button>
+                    <button class="btn btn-link">Cancel</button>
                 </div>
             </form>
         </section>
+        <section class="labels">
+            <header class="text-center"><h4>labels</h4></header>
+            <div class="columns">
+                <div class="column">
+                    <span class="label">default label</span>
+                </div>
+                <div class="column">
+                    <span class="label label-primary">primary label</span>
+                </div>
+                <div class="column">
+                    <span class="label label-lg">large label</span>
+                </div>
+                <div class="column">
+                    <span class="label label-primary label-lg">large label</span>
+                </div>
+            </div>
+        </section>
     </section>
 </body>
 </html>
\ No newline at end of file
diff --git a/dist/spectre.css b/dist/spectre.css
index 81b3692..c5a0c4e 100644
--- a/dist/spectre.css
+++ b/dist/spectre.css
@@ -601,6 +601,10 @@ table td {
 table th {
   border-color: #d6d6d6;
 }
+table tr.selected th,
+table tr.selected td {
+  background-color: #f4f4f4;
+}
 .btn,
 button {
   display: inline-block;
@@ -883,6 +887,26 @@ 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-top: -0.2rem;
+  border-radius: 2px;
+}
+.label.label-primary {
+  background-color: #5764C6;
+}
+.label.label-lg {
+  padding: .4rem .8rem;
+  font-size: 1.4rem;
+}
 .clearfix::after,
 .container::after,
 .columns::after {
diff --git a/spectre.less b/spectre.less
index 7b03e71..5a1989d 100644
--- a/spectre.less
+++ b/spectre.less
@@ -16,7 +16,7 @@
 // Components
 @import 'src/buttons.less';
 @import 'src/forms.less';
-//@import 'src/labels.less';
+@import 'src/labels.less';
 //@import 'src/cards.less';
 //@import 'src/menus.less';
 //@import 'src/modals.less';
diff --git a/src/labels.less b/src/labels.less
new file mode 100644
index 0000000..e586680
--- /dev/null
+++ b/src/labels.less
@@ -0,0 +1,23 @@
+// Labels
+.label {
+  display: inline-block;
+  padding: .2rem .5rem;
+  font-size: 1.2rem;
+  line-height: 1.4rem;
+  color: #fff;
+  background-color: @control-color;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  margin-top: -.2rem;
+  border-radius: 2px;
+
+  &.label-primary {
+    background-color: @core-color;
+  }
+
+  &.label-lg {
+    padding: .4rem .8rem;
+    font-size: 1.4rem;
+  }
+}
\ No newline at end of file
diff --git a/src/tables.less b/src/tables.less
index d212baa..0fb0b4f 100644
--- a/src/tables.less
+++ b/src/tables.less
@@ -12,4 +12,11 @@ table {
   th {
     border-color: darken(@core-border-color, 10%);
   }
+  tr.selected {
+    th,
+    td {
+      background-color: lighten(@core-border-color, 2%);
+    }
+
+  }
 }
\ No newline at end of file