add label delete button

4 files changed, 100 insertions, 4 deletions

diff --git a/demo/index.html b/demo/index.html
index 6080e0a..c5eedb9 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -215,10 +215,22 @@
                     <span class="label label-primary">primary label</span>
                 </div>
                 <div class="column">
-                    <span class="label label-lg">large label</span>
+                    <span class="label label-lg">default label</span>
                 </div>
                 <div class="column">
-                    <span class="label label-primary label-lg">large label</span>
+                    <span class="label label-primary label-lg">primary label</span>
+                </div>
+                <div class="column">
+                    <span class="label label-lg">
+                        large label
+                        <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>
diff --git a/dist/spectre.css b/dist/spectre.css
index c5a0c4e..53c8ef8 100644
--- a/dist/spectre.css
+++ b/dist/spectre.css
@@ -738,6 +738,48 @@ button.btn-block {
   width: 100%;
   display: block;
 }
+.btn.btn-clear,
+button.btn-clear {
+  width: 1.4rem;
+  height: 1.4rem;
+  padding: 0;
+  margin: 0.1rem -0.2rem 0.1rem 0.2rem;
+  border: 0;
+  border-radius: .7rem;
+  vertical-align: top;
+  background-color: rgba(0, 0, 0, 0.15);
+  -webkit-transform: rotate(-45deg);
+          transform: rotate(-45deg);
+}
+.btn.btn-clear:hover,
+button.btn-clear:hover {
+  background-color: rgba(0, 0, 0, 0.35);
+}
+.btn.btn-clear::before,
+button.btn-clear::before,
+.btn.btn-clear::after,
+button.btn-clear::after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  background-color: #fff;
+}
+.btn.btn-clear::before,
+button.btn-clear::before {
+  width: .8rem;
+  height: .2rem;
+  margin-left: -0.4rem;
+  margin-top: -0.1rem;
+}
+.btn.btn-clear::after,
+button.btn-clear::after {
+  width: .2rem;
+  height: .8rem;
+  margin-left: -0.1rem;
+  margin-top: -0.4rem;
+}
 .form-group:not(:last-child) {
   margin-bottom: 1rem;
 }
@@ -904,8 +946,9 @@ textarea.form-input {
   background-color: #5764C6;
 }
 .label.label-lg {
-  padding: .4rem .8rem;
+  padding: .2rem .8rem;
   font-size: 1.4rem;
+  line-height: 1.6rem;
 }
 .clearfix::after,
 .container::after,
diff --git a/src/buttons.less b/src/buttons.less
index b3cf357..e04aaa9 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -126,6 +126,46 @@ button {
     display: block;
   }
 
+  // Button Clear
+  &.btn-clear {
+    width: 1.4rem;
+    height: 1.4rem;
+    padding: 0;
+    margin: .1rem -.2rem .1rem .2rem;
+    border: 0;
+    border-radius: .7rem;
+    vertical-align: top;
+    background-color: rgba(0, 0, 0, .15);
+    transform: rotate(-45deg);
+
+    &:hover {
+      background-color: rgba(0, 0, 0, .35);
+    }
+
+    &::before,
+    &::after {
+      content: "";
+      display: block;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      background-color: #fff;
+    }
+
+    &::before {
+      width: .8rem;
+      height: .2rem;
+      margin-left: -.4rem;
+      margin-top: -.1rem;
+    }
+    &::after {
+      width: .2rem;
+      height: .8rem;
+      margin-left: -.1rem;
+      margin-top: -.4rem;
+    }
+  }
+
   // TODO: Button with icons
   // TODO: Button groups
 }
\ No newline at end of file
diff --git a/src/labels.less b/src/labels.less
index e586680..57995ee 100644
--- a/src/labels.less
+++ b/src/labels.less
@@ -17,7 +17,8 @@
   }
 
   &.label-lg {
-    padding: .4rem .8rem;
+    padding: .2rem .8rem;
     font-size: 1.4rem;
+    line-height: 1.6rem;
   }
 }
\ No newline at end of file