Add pure CSS Icons

7 files changed, 70 insertions, 29 deletions

diff --git a/src/base.less b/src/base.less
index f30300b..7b20a39 100644
--- a/src/base.less
+++ b/src/base.less
@@ -39,26 +39,3 @@ a {
   .control-shadow();
   outline: none;
 }
-
-// Icons
-.btn,
-.toast,
-.menu {
-  .icon {
-    font-size: 1.3333em;
-    line-height: .8em;
-    vertical-align: -20%;
-  }
-}
-
-// Caret
-.icon-caret {
-  border-top: .4rem solid currentColor;
-  border-right: .4rem solid transparent;
-  border-left: .4rem solid transparent;
-  display: inline-block;
-  height: 0;
-  margin: 0;
-  vertical-align: middle;
-  width: 0;
-}
diff --git a/src/buttons.less b/src/buttons.less
index a6a42c7..1e06884 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -101,8 +101,8 @@
   // Button Action
   &.btn-action {
     width: 3.2rem;
-    padding-left: .2rem;
-    padding-right: .2rem;
+    padding-left: 0;
+    padding-right: 0;
 
     &.btn-sm {
       width: 2.4rem;
diff --git a/src/forms.less b/src/forms.less
index b2b2d9c..561df6f 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -98,11 +98,12 @@
   color: inherit;
   font-size: @font-size;
   line-height: 2rem;
-  min-width: @control-min-width;
   padding: .5rem .8rem;
   vertical-align: middle;
 
   &[multiple] {
+    width: 100%;
+
     option {
       padding: .2rem .4rem;
     }
diff --git a/src/icons.less b/src/icons.less
new file mode 100644
index 0000000..9c071c5
--- /dev/null
+++ b/src/icons.less
@@ -0,0 +1,63 @@
+// CSS Icons
+.icon {
+  font-size: inherit;
+  vertical-align: middle;
+}
+
+.icon-arrow-down,
+.icon-arrow-left,
+.icon-arrow-right,
+.icon-arrow-up {
+  display: inline-block;
+  height: 1em;
+  margin: 0;
+  position: relative;
+  width: 1em;
+
+  &::before {
+    border: .2rem solid currentColor;
+    border-bottom: 0;
+    border-right: 0;
+    content: "";
+    display: block;
+    height: .65em;
+    left: 50%;
+    position: absolute;
+    top: 50%;
+    width: .65em;
+    transform: translate(-25%, -50%) rotate(-45deg);
+    transform-origin: 50% 50%;
+  }
+}
+
+.icon-arrow-down {
+  transform: rotate(-90deg);
+}
+
+.icon-arrow-right {
+  transform: rotate(180deg);
+}
+
+.icon-arrow-up {
+  transform: rotate(90deg);
+}
+
+.icon-caret {
+  border-top: .4rem solid currentColor;
+  border-right: .4rem solid transparent;
+  border-left: .4rem solid transparent;
+  display: inline-block;
+  height: 0;
+  margin: 0;
+  vertical-align: middle;
+  width: 0;
+}
+
+// Components with icons
+.btn,
+.toast,
+.menu {
+  .icon {
+    vertical-align: -10%;
+  }
+}
diff --git a/src/tables.less b/src/tables.less
index 8a8818c..17c70f3 100644
--- a/src/tables.less
+++ b/src/tables.less
@@ -40,7 +40,7 @@
   }
 
   th {
-    border-bottom: .2rem solid @gray-color-dark;
+    border-bottom: @border-width + .1rem solid @gray-color-dark;
     padding: 1.5rem 1rem;
   }
 }
diff --git a/src/tabs.less b/src/tabs.less
index b342fb0..b072f39 100644
--- a/src/tabs.less
+++ b/src/tabs.less
@@ -34,7 +34,7 @@
 
   &.tab-block {
     .tab-item {
-      flex: 1 0 auto;
+      flex: 1 0 0;
       text-align: center;
 
       .badge {
diff --git a/src/variables.less b/src/variables.less
index 19c100b..4217610 100644
--- a/src/variables.less
+++ b/src/variables.less
@@ -65,7 +65,7 @@
 @size-xl: 1280px;
 @size-2x: 1440px;
 
-// Z-index 
+// Z-index
 @zindex-0: 1;
 @zindex-1: 100;
 @zindex-2: 200;