Add new Icons

4 files changed, 106 insertions, 46 deletions

diff --git a/src/icons.less b/src/icons.less
index dd77944..edcc159 100644
--- a/src/icons.less
+++ b/src/icons.less
@@ -1,8 +1,11 @@
 // CSS Icons
+@icon-border-width: .2rem;
+
 .icon {
   box-sizing: border-box;
   display: inline-block;
   font-size: inherit;
+  font-style: normal;
   height: 1em;
   position: relative;
   text-indent: -999rem;
@@ -159,7 +162,7 @@
     background: currentColor;
     content: "";
     height: @icon-border-width;
-    width: 90%;
+    width: 100%;
   }
 }
 .icon-plus,
@@ -167,7 +170,7 @@
   &::after {
     background: currentColor;
     content: "";
-    height: 90%;
+    height: 100%;
     width: @icon-border-width;
   }
 }
@@ -197,6 +200,33 @@
   }
 }
 
+// Icon stop
+.icon-stop {
+  border: @icon-border-width solid currentColor;
+  border-radius: 50%;
+  &::before {
+    background: currentColor;
+    content: "";
+    height: @icon-border-width;
+    transform: translate(-50%, -50%) rotate(45deg);
+    width: 1em;
+  }
+}
+
+// Icon shutdown
+.icon-shutdown {
+  border: @icon-border-width solid currentColor;
+  border-radius: 50%;
+  border-top-color: transparent;
+  &::before {
+    background: currentColor;
+    content: "";
+    height: .5em;
+    top: .1em;
+    width: @icon-border-width;
+  }
+}
+
 // Icon refresh
 .icon-refresh {
   &::before {
@@ -204,8 +234,8 @@
     border-radius: 50%;
     border-right-color: transparent;
     content: "";
-    height: .9em;
-    width: .9em;
+    height: 1em;
+    width: 1em;
   }
   &::after {
     border: .2em solid currentColor;
@@ -213,8 +243,8 @@
     border-left-color: transparent;
     content: "";
     height: 0;
-    left: 75%;
-    top: 25%;
+    left: 80%;
+    top: 20%;
     width: 0;
   }
 }
@@ -257,7 +287,7 @@
     border-right-color: transparent;
     content: "";
     height: 0;
-    left: 10%;
+    left: 5%;
     top: 95%;
     transform: translate(0, -100%);
     width: 0;
@@ -266,25 +296,23 @@
 
 // Icon delete
 .icon-delete {
-  height: .7em;
-  margin: .15em .1em;
-  width: .8em;
   &::before {
     border: @icon-border-width solid currentColor;
     border-bottom-left-radius: @border-radius;
     border-bottom-right-radius: @border-radius;
     border-top: 0;
     content: "";
-    height: .7em;
-    top: 65%;
+    height: .75em;
+    top: 60%;
     width: .75em;
   }
   &::after {
     background: currentColor;
+    box-shadow: -.25em .2em, .25em .2em;
     content: "";
     height: @icon-border-width;
-    top: 10%;
-    width: .9em;
+    top: @icon-border-width/2;
+    width: .5em;
   }
 }
 
@@ -296,22 +324,22 @@
   border-top: 0;
   &::before {
     border: @icon-border-width solid currentColor;
-    border-bottom: 0;
-    border-right: 0;
+    border-left: 0;
+    border-top: 0;
     content: "";
-    height: .45em;
+    height: .4em;
     left: 100%;
-    top: 36%;
-    transform: translate(-125%, -50%) rotate(135deg);
-    width: .45em;
+    top: .25em;
+    transform: translate(-125%, -50%) rotate(-45deg);
+    width: .4em;
   }
   &::after {
     border: @icon-border-width solid currentColor;
     border-bottom: 0;
     border-right: 0;
-    border-radius: 75% 5%;
+    border-radius: 75% 0;
     content: "";
-    height: .4em;
+    height: .5em;
     width: .6em;
   }
 }
@@ -322,7 +350,7 @@
     background: currentColor;
     content: "";
     height: 1em;
-    left: 10%;
+    left: 15%;
     width: @icon-border-width;
   }
   &::after {
@@ -333,8 +361,8 @@
     content: "";
     height: .65em;
     top: 35%;
-    left: 55%;
-    width: .75em;
+    left: 60%;
+    width: .8em;
   }
 }
 
@@ -346,8 +374,8 @@
     border-top-left-radius: @border-radius;
     border-top-right-radius: @border-radius;
     content: "";
-    height: 90%;
-    width: 90%;
+    height: .9em;
+    width: .8em;
   }
   &::after {
     border: @icon-border-width solid currentColor;
@@ -355,9 +383,9 @@
     border-left: 0;
     border-radius: @border-radius;
     content: "";
-    height: 50%;
+    height: .5em;
     transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg);
-    width: 50%;
+    width: .5em;
   }
 }
 
@@ -453,24 +481,57 @@
   }
 }
 
-// Icon file
-.icon-file {
+// Icon message
+.icon-message {
+  border: @icon-border-width solid currentColor;
+  border-bottom: 0;
+  border-radius: @border-radius;
+  border-right: 0;
   &::before {
     border: @icon-border-width solid currentColor;
-    border-radius: @border-radius .4em @border-radius @border-radius;
+    border-left: 0;
+    border-bottom-right-radius: @border-radius;
+    border-top: 0;
     content: "";
-    height: 1em;
-    width: .9em;
+    height: .8em;
+    left: 65%;
+    top: 40%;
+    width: .7em;
   }
   &::after {
-    border: .2em solid currentColor;
-    border-top-color: transparent;
-    border-right-color: transparent;
+    background: currentColor;
+    border-radius: @border-radius;
     content: "";
-    height: 0;
-    left: .8em;
-    top: .2em;
-    width: 0;
+    height: .3em;
+    left: 10%;
+    top: 100%;
+    transform: translate(0, -90%) rotate(45deg);
+    width: @icon-border-width;
+  }
+}
+
+// Icon photo
+.icon-photo {
+  border: @icon-border-width solid currentColor;
+  border-radius: @border-radius;
+  &::before {
+    border: @icon-border-width solid currentColor;
+    border-radius: 50%;
+    content: "";
+    height: .25em;
+    left: 35%;
+    top: 35%;
+    width: .25em;
+  }
+  &::after {
+    border: @icon-border-width solid currentColor;
+    border-bottom: 0;
+    border-left: 0;
+    content: "";
+    height: .5em;
+    left: 60%;
+    transform: translate(-50%, 25%) rotate(-45deg);
+    width: .5em;
   }
 }
 
@@ -479,8 +540,8 @@
   &::before,
   &::after {
     border: @icon-border-width solid currentColor;
-    border-radius: 5em;
-    border-right-color: transparent;
+    border-radius: 5em 0 0 5em;
+    border-right: 0;
     content: "";
     height: .5em;
     width: .75em;
diff --git a/src/labels.less b/src/labels.less
index f6dc24d..970cd3c 100644
--- a/src/labels.less
+++ b/src/labels.less
@@ -1,7 +1,7 @@
 // Labels
 .label {
   background: @bg-color;
-  color: inherit;
+  color: lighten(@body-font-color, 15%);
   .label-base();
 
   &.label-primary {
diff --git a/src/timelines.less b/src/timelines.less
index a1d53ae..277d10c 100644
--- a/src/timelines.less
+++ b/src/timelines.less
@@ -31,7 +31,7 @@
       text-align: center;
       width: 2.4rem;
       &::before {
-        border: @icon-border-width solid @primary-color;
+        border: .2rem solid @primary-color;
         border-radius: 50%;
         content: "";
         display: block;
diff --git a/src/variables.less b/src/variables.less
index 9547cfd..4217610 100644
--- a/src/variables.less
+++ b/src/variables.less
@@ -22,7 +22,6 @@
 @control-min-width: 18rem;
 @border-radius: .2rem;
 @border-width: .1rem;
-@icon-border-width: .2rem;
 
 // Colors
 // Core colors