Merge pull request #299 from picturepan2/0.4.3 v0.4.3

0.4.3

16 files changed, 754 insertions, 705 deletions

diff --git a/src/_accordions.scss b/src/_accordions.scss
index 47b6c6b..4c69686 100644
--- a/src/_accordions.scss
+++ b/src/_accordions.scss
@@ -30,6 +30,7 @@
   }
 }
 
+// Remove default details marker in Webkit
 summary.accordion-header {
   &::-webkit-details-marker {
     display: none;
diff --git a/src/_avatars.scss b/src/_avatars.scss
index 53bda1d..5eb23f8 100644
--- a/src/_avatars.scss
+++ b/src/_avatars.scss
@@ -6,7 +6,7 @@
   color: rgba($light-color, .85);
   display: inline-block;
   font-weight: 300;
-  line-height: 1;
+  line-height: 1.25;
   margin: 0;
   position: relative;
   vertical-align: middle;
diff --git a/src/_buttons.scss b/src/_buttons.scss
index 1860ed8..c4dc0a6 100644
--- a/src/_buttons.scss
+++ b/src/_buttons.scss
@@ -12,7 +12,7 @@
   height: $control-size;
   line-height: $line-height;
   outline: none;
-  padding: $control-padding-v $control-padding-h;
+  padding: $control-padding-y $control-padding-x;
   text-align: center;
   text-decoration: none;
   user-select: none;
@@ -90,13 +90,13 @@
   &.btn-sm {
     font-size: $font-size-sm;
     height: $control-size-sm;
-    padding: $control-padding-v-sm $control-padding-h * .75;
+    padding: $control-padding-y-sm $control-padding-x-sm;
   }
 
   &.btn-lg {
     font-size: $font-size-lg;
     height: $control-size-lg;
-    padding: $control-padding-v-lg $control-padding-h * 1.25;
+    padding: $control-padding-y-lg $control-padding-x-lg;
   }
 
   // Button Block
diff --git a/src/_empty.scss b/src/_empty.scss
index 29cddac..accba9c 100644
--- a/src/_empty.scss
+++ b/src/_empty.scss
@@ -4,7 +4,7 @@
   border-radius: $border-radius;
   color: $gray-color-dark;
   text-align: center;
-  padding: 4 * $layout-spacing;
+  padding: $unit-16 $unit-8;
 
   .empty-icon {
     margin-bottom: $layout-spacing-lg;
diff --git a/src/_filters.scss b/src/_filters.scss
index 965dfa3..37ccc89 100644
--- a/src/_filters.scss
+++ b/src/_filters.scss
@@ -1,4 +1,16 @@
-// Filters
+// Filters 
+// The number of filter options 
+$filter-number: 8 !default;
+
+%filter-checked-nav { 
+  background: $primary-color;
+  color: $light-color;
+}
+
+%filter-checked-body { 
+  display: none;
+}
+
 .filter {
   .filter-nav {
     margin: $layout-spacing 0;
@@ -10,20 +22,16 @@
   }
 
   .filter-tag {
-    &#tag-all:checked ~ .filter-nav .chip[for="tag-all"],
-    &#tag-action:checked ~ .filter-nav .chip[for="tag-action"],
-    &#tag-roleplaying:checked ~ .filter-nav .chip[for="tag-roleplaying"],
-    &#tag-shooter:checked ~ .filter-nav .chip[for="tag-shooter"],
-    &#tag-sports:checked ~ .filter-nav .chip[for="tag-sports"] {
-      background: $primary-color;
-      color: $light-color;
+    @for $i from 0 through ($filter-number) {
+      &#tag-#{$i}:checked ~ .filter-nav .chip[for="tag-#{$i}"] {
+        @extend %filter-checked-nav;
+      }
     }
 
-    &#tag-action:checked ~ .filter-body .column:not([data-tag~="tag-action"]),
-    &#tag-roleplaying:checked ~ .filter-body .column:not([data-tag~="tag-roleplaying"]),
-    &#tag-shooter:checked ~ .filter-body .column:not([data-tag~="tag-shooter"]),
-    &#tag-sports:checked ~ .filter-body .column:not([data-tag~="tag-sports"]) {
-      display: none;
+    @for $i from 1 through ($filter-number) {
+      &#tag-#{$i}:checked ~ .filter-body .filter-item:not([data-tag~="tag-#{$i}"]) {
+        @extend %filter-checked-body;
+      }
     }
   }
 }
diff --git a/src/_forms.scss b/src/_forms.scss
index c23841e..3fa2c87 100644
--- a/src/_forms.scss
+++ b/src/_forms.scss
@@ -18,14 +18,14 @@ legend {
 // Form element: Label
 .form-label {
   display: block;
-  padding: $control-padding-v + $border-width 0;
+  padding: $control-padding-y + $border-width 0;
 
   &.label-sm {
-    padding: $control-padding-v-sm + $border-width 0;
+    padding: $control-padding-y-sm + $border-width 0;
   }
 
   &.label-lg {
-    padding: $control-padding-v-lg + $border-width 0;
+    padding: $control-padding-y-lg + $border-width 0;
   }
 }
 
@@ -44,7 +44,7 @@ legend {
   line-height: $line-height;
   max-width: 100%;
   outline: none;
-  padding: $control-padding-v $control-padding-h;
+  padding: $control-padding-y $control-padding-x;
   position: relative;
   width: 100%;
   &:focus {
@@ -59,13 +59,13 @@ legend {
   &.input-sm {
     font-size: $font-size-sm;
     height: $control-size-sm;
-    padding: $control-padding-v-sm $control-padding-h;
+    padding: $control-padding-y-sm $control-padding-x-sm;
   }
 
   &.input-lg {
     font-size: $font-size-lg;
     height: $control-size-lg;
-    padding: $control-padding-v-lg $control-padding-h;
+    padding: $control-padding-y-lg $control-padding-x-lg;
   }
 
   &.input-inline {
@@ -112,7 +112,7 @@ textarea.form-input {
   height: $control-size;
   line-height: $line-height;
   outline: none;
-  padding: $control-padding-v $control-padding-h;
+  padding: $control-padding-y $control-padding-x;
   vertical-align: middle;
   width: 100%;
 
@@ -125,8 +125,8 @@ textarea.form-input {
     }
   }
   &:not([multiple]):not([size]) {
-    background: $bg-color-light url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23667189' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right ($control-icon-size / 2) center / .4rem .5rem;
-    padding-right: $control-icon-size + $control-padding-h;
+    background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.4rem .5rem;
+    padding-right: $control-icon-size + $control-padding-x;
   }
   &:focus {
     @include control-shadow();
@@ -140,13 +140,13 @@ textarea.form-input {
   &.select-sm {
     font-size: $font-size-sm;
     height: $control-size-sm;
-    padding: $control-padding-v-sm ($control-icon-size + $control-padding-h) $control-padding-v-sm $control-padding-h;
+    padding: $control-padding-y-sm ($control-icon-size + $control-padding-x-sm) $control-padding-y-sm $control-padding-x-sm;
   }
 
   &.select-lg {
     font-size: $font-size-lg;
     height: $control-size-lg;
-    padding: $control-padding-v-lg ($control-icon-size + $control-padding-h) $control-padding-v-lg $control-padding-h;
+    padding: $control-padding-y-lg ($control-icon-size + $control-padding-x-lg) $control-padding-y-lg $control-padding-x-lg;
   }
 }
 
@@ -157,7 +157,7 @@ textarea.form-input {
 
   .form-icon {
     height: $control-icon-size;
-    margin: 0 $control-padding-v;
+    margin: 0 $control-padding-y;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
@@ -171,7 +171,7 @@ textarea.form-input {
   }
 
   .form-input {
-    padding-left: $control-icon-size + $control-padding-v * 2;
+    padding-left: $control-icon-size + $control-padding-y * 2;
   }
 }
 
@@ -181,7 +181,7 @@ textarea.form-input {
   }
 
   .form-input {
-    padding-right: $control-icon-size + $control-padding-v * 2;
+    padding-right: $control-icon-size + $control-padding-y * 2;
   }
 }
 
@@ -191,7 +191,7 @@ textarea.form-input {
 .form-switch {
   display: inline-block;
   line-height: $line-height;
-  padding: (($control-size-sm - $line-height) / 2)  ($control-icon-size + $control-padding-h);
+  padding: (($control-size-sm - $line-height) / 2)  ($control-icon-size + $control-padding-x);
   position: relative;
 
   input {
@@ -301,7 +301,7 @@ textarea.form-input {
 
 // Form element: Switch
 .form-switch {
-  padding-left: ($unit-8 + $control-padding-h);
+  padding-left: ($unit-8 + $control-padding-x);
 
   .form-icon {
     background: $gray-color-light;
@@ -348,15 +348,15 @@ textarea.form-input {
     border: $border-width solid $border-color-dark;
     border-radius: $border-radius;
     line-height: $line-height;
-    padding: $control-padding-v $control-padding-h;
+    padding: $control-padding-y $control-padding-x;
 
     &.addon-sm {
       font-size: $font-size-sm;
-      padding: $control-padding-v-sm $control-padding-h;
+      padding: $control-padding-y-sm $control-padding-x-sm;
     }
     &.addon-lg {
       font-size: $font-size-lg;
-      padding: $control-padding-v-lg $control-padding-h;
+      padding: $control-padding-y-lg $control-padding-x-lg;
     }
   }
 
diff --git a/src/_icons.scss b/src/_icons.scss
index ad092b8..4f3c5ce 100644
--- a/src/_icons.scss
+++ b/src/_icons.scss
@@ -1,656 +1,5 @@
 // CSS Icons
-$icon-border-width: $border-width-lg;
-
-.icon {
-  box-sizing: border-box;
-  display: inline-block;
-  font-size: inherit;
-  font-style: normal;
-  height: 1em;
-  position: relative;
-  text-indent: -9999px;
-  vertical-align: middle;
-  width: 1em;
-  &::before,
-  &::after {
-    display: block;
-    left: 50%;
-    position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-
-// Icon arrows
-.icon-arrow-down,
-.icon-arrow-left,
-.icon-arrow-right,
-.icon-arrow-up,
-.icon-downward,
-.icon-back,
-.icon-forward,
-.icon-upward {
-  &::before {
-    border: $icon-border-width solid currentColor;
-    border-bottom: 0;
-    border-right: 0;
-    content: "";
-    height: .65em;
-    width: .65em;
-  }
-}
-
-.icon-arrow-down {
-  &::before {
-    transform: translate(-50%, -75%) rotate(225deg);
-  }
-}
-
-.icon-arrow-left {
-  &::before {
-    transform: translate(-25%, -50%) rotate(-45deg);
-  }
-}
-
-.icon-arrow-right {
-  &::before {
-    transform: translate(-75%, -50%) rotate(135deg);
-  }
-}
-
-.icon-arrow-up {
-  &::before {
-    transform: translate(-50%, -25%) rotate(45deg);
-  }
-}
-
-.icon-back,
-.icon-forward {
-  &::after {
-    background: currentColor;
-    content: "";
-    height: $icon-border-width;
-    width: .8em;
-  }
-}
-
-.icon-downward,
-.icon-upward {
-  &::after {
-    background: currentColor;
-    content: "";
-    height: .8em;
-    width: $icon-border-width;
-  }
-}
-
-.icon-back {
-  &::after {
-    left: 55%;
-  }
-  &::before {
-    transform: translate(-50%, -50%) rotate(-45deg);
-  }
-}
-
-.icon-downward {
-  &::after {
-    top: 45%;
-  }
-  &::before {
-    transform: translate(-50%, -50%) rotate(-135deg);
-  }
-}
-
-.icon-forward {
-  &::after {
-    left: 45%;
-  }
-  &::before {
-    transform: translate(-50%, -50%) rotate(135deg);
-  }
-}
-
-.icon-upward {
-  &::after {
-    top: 55%;
-  }
-  &::before {
-    transform: translate(-50%, -50%) rotate(45deg);
-  }
-}
-
-// Icon caret
-.icon-caret {
-  &::before {
-    border-top: .3em solid currentColor;
-    border-right: .3em solid transparent;
-    border-left: .3em solid transparent;
-    content: "";
-    height: 0;
-    width: 0;
-    transform: translate(-50%, -25%);
-  }
-}
-
-// Icon menu
-.icon-menu {
-  &::before {
-    background: currentColor;
-    box-shadow: 0 -.35em, 0 .35em;
-    content: "";
-    height: $icon-border-width;
-    width: 100%;
-  }
-}
-
-// Icon apps
-.icon-apps {
-  &::before {
-    background: currentColor;
-    box-shadow: -.35em -.35em, -.35em 0, -.35em .35em, 0 -.35em, 0 .35em, .35em -.35em, .35em 0, .35em .35em;
-    content: "";
-    height: 3px;
-    width: 3px;
-  }
-}
-
-// Icon resize
-.icon-resize-horiz,
-.icon-resize-vert {
-  &::before,
-  &::after {
-    border: $icon-border-width solid currentColor;
-    border-bottom: 0;
-    border-right: 0;
-    content: "";
-    height: .45em;
-    width: .45em;
-  }
-  &::before {
-    transform: translate(-50%, -90%) rotate(45deg);
-  }
-  &::after {
-    transform: translate(-50%, -10%) rotate(225deg);
-  }
-}
-
-.icon-resize-horiz {
-  &::before {
-    transform: translate(-90%, -50%) rotate(-45deg);
-  }
-  &::after {
-    transform: translate(-10%, -50%) rotate(135deg);
-  }
-}
-
-// Icon more
-.icon-more-horiz,
-.icon-more-vert {
-  &::before {
-    background: currentColor;
-    box-shadow: -.4em 0, .4em 0;
-    border-radius: 50%;
-    content: "";
-    height: 3px;
-    width: 3px;
-  }
-}
-.icon-more-vert {
-  &::before {
-    box-shadow: 0 -.4em, 0 .4em;
-  }
-}
-
-// Icon plus, minus, cross
-.icon-plus,
-.icon-minus,
-.icon-cross {
-  &::before {
-    background: currentColor;
-    content: "";
-    height: $icon-border-width;
-    width: 100%;
-  }
-}
-.icon-plus,
-.icon-cross {
-  &::after {
-    background: currentColor;
-    content: "";
-    height: 100%;
-    width: $icon-border-width;
-  }
-}
-.icon-cross {
-  &::before {
-    width: 100%;
-  }
-  &::after {
-    height: 100%;
-  }
-  &::before,
-  &::after {
-    transform: translate(-50%, -50%) rotate(45deg);
-  }
-}
-
-// Icon check
-.icon-check {
-  &::before {
-    border: $icon-border-width solid currentColor;
-    border-right: 0;
-    border-top: 0;
-    content: "";
-    height: .5em;
-    width: .9em;
-    transform: translate(-50%, -75%) rotate(-45deg);
-  }
-}
-
-// 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 {
-    border: $icon-border-width solid currentColor;
-    border-radius: 50%;
-    border-right-color: transparent;
-    content: "";
-    height: 1em;
-    width: 1em;
-  }
-  &::after {
-    border: .2em solid currentColor;
-    border-top-color: transparent;
-    border-left-color: transparent;
-    content: "";
-    height: 0;
-    left: 80%;
-    top: 20%;
-    width: 0;
-  }
-}
-
-// Icon search
-.icon-search {
-  &::before {
-    border: $icon-border-width solid currentColor;
-    border-radius: 50%;
-    content: "";
-    height: .75em;
-    left: 5%;
-    top: 5%;
-    transform: translate(0, 0) rotate(45deg);
-    width: .75em;
-  }
-  &::after {
-    background: currentColor;
-    content: "";
-    height: $icon-border-width;
-    left: 80%;
-    top: 80%;
-    transform: translate(-50%, -50%) rotate(45deg);
-    width: .4em;
-  }
-}
-
-// Icon edit
-.icon-edit {
-  &::before {
-    border: $icon-border-width solid currentColor;
-    content: "";
-    height: .4em;
-    transform: translate(-40%, -60%) rotate(-45deg);
-    width: .85em;
-  }
-  &::after {
-    border: .15em solid currentColor;
-    border-top-color: transparent;
-    border-right-color: transparent;
-    content: "";
-    height: 0;
-    left: 5%;
-    top: 95%;
-    transform: translate(0, -100%);
-    width: 0;
-  }
-}
-
-// Icon delete
-.icon-delete {
-  &::before {
-    border: $icon-border-width solid currentColor;
-    border-bottom-left-radius: $border-radius;
-    border-bottom-right-radius: $border-radius;
-    border-top: 0;
-    content: "";
-    height: .75em;
-    top: 60%;
-    width: .75em;
-  }
-  &::after {
-    background: currentColor;
-    box-shadow: -.25em .2em, .25em .2em;
-    content: "";
-    height: $icon-border-width;
-    top: $icon-border-width/2;
-    width: .5em;
-  }
-}
-
-// Icon share
-.icon-share {
-  border: $icon-border-width solid currentColor;
-  border-radius: $border-radius;
-  border-right: 0;
-  border-top: 0;
-  &::before {
-    border: $icon-border-width solid currentColor;
-    border-left: 0;
-    border-top: 0;
-    content: "";
-    height: .4em;
-    left: 100%;
-    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% 0;
-    content: "";
-    height: .5em;
-    width: .6em;
-  }
-}
-
-// Icon flag
-.icon-flag {
-  &::before {
-    background: currentColor;
-    content: "";
-    height: 1em;
-    left: 15%;
-    width: $icon-border-width;
-  }
-  &::after {
-    border: $icon-border-width solid currentColor;
-    border-bottom-right-radius: $border-radius;
-    border-left: 0;
-    border-top-right-radius: $border-radius;
-    content: "";
-    height: .65em;
-    top: 35%;
-    left: 60%;
-    width: .8em;
-  }
-}
-
-// Icon bookmark
-.icon-bookmark {
-  &::before {
-    border: $icon-border-width solid currentColor;
-    border-bottom: 0;
-    border-top-left-radius: $border-radius;
-    border-top-right-radius: $border-radius;
-    content: "";
-    height: .9em;
-    width: .8em;
-  }
-  &::after {
-    border: $icon-border-width solid currentColor;
-    border-bottom: 0;
-    border-left: 0;
-    border-radius: $border-radius;
-    content: "";
-    height: .5em;
-    transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg);
-    width: .5em;
-  }
-}
-
-// Icon download & upload
-.icon-download,
-.icon-upload {
-  border-bottom: $icon-border-width solid currentColor;
-  &::before {
-    border: $icon-border-width solid currentColor;
-    border-bottom: 0;
-    border-right: 0;
-    content: "";
-    height: .5em;
-    width: .5em;
-    transform: translate(-50%, -60%) rotate(-135deg);
-  }
-  &::after {
-    background: currentColor;
-    content: "";
-    height: .6em;
-    top: 40%;
-    width: $icon-border-width;
-  }
-}
-
-.icon-upload {
-  &::before {
-    transform: translate(-50%, -60%) rotate(45deg);
-  }
-  &::after {
-    top: 50%;
-  }
-}
-
-// Icon time
-.icon-time {
-  border: $icon-border-width solid currentColor;
-  border-radius: 50%;
-  &::before {
-    background: currentColor;
-    content: "";
-    height: .4em;
-    transform: translate(-50%, -75%);
-    width: $icon-border-width;
-  }
-  &::after {
-    background: currentColor;
-    content: "";
-    height: .3em;
-    transform: translate(-50%, -75%) rotate(90deg);
-    transform-origin: 50% 90%;
-    width: $icon-border-width;
-  }
-}
-
-// Icon mail
-.icon-mail {
-  &::before {
-    border: $icon-border-width solid currentColor;
-    border-radius: $border-radius;
-    content: "";
-    height: .8em;
-    width: 1em;
-  }
-  &::after {
-    border: $icon-border-width solid currentColor;
-    border-right: 0;
-    border-top: 0;
-    content: "";
-    height: .5em;
-    transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg);
-    width: .5em;
-  }
-}
-
-// Icon people
-.icon-people {
-  &::before {
-    border: $icon-border-width solid currentColor;
-    border-radius: 50%;
-    content: "";
-    height: .45em;
-    top: 25%;
-    width: .45em;
-  }
-  &::after {
-    border: $icon-border-width solid currentColor;
-    border-radius: 50% 50% 0 0;
-    content: "";
-    height: .4em;
-    top: 75%;
-    width: .9em;
-  }
-}
-
-// 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-left: 0;
-    border-bottom-right-radius: $border-radius;
-    border-top: 0;
-    content: "";
-    height: .8em;
-    left: 65%;
-    top: 40%;
-    width: .7em;
-  }
-  &::after {
-    background: currentColor;
-    border-radius: $border-radius;
-    content: "";
-    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;
-  }
-}
-
-// Icon link
-.icon-link {
-  &::before,
-  &::after {
-    border: $icon-border-width solid currentColor;
-    border-radius: 5em 0 0 5em;
-    border-right: 0;
-    content: "";
-    height: .5em;
-    width: .75em;
-  }
-  &::before {
-    transform: translate(-70%, -45%) rotate(-45deg);
-  }
-  &::after {
-    transform: translate(-30%, -55%) rotate(135deg);
-  }
-}
-
-// Icon location
-.icon-location {
-  &::before {
-    border: $icon-border-width solid currentColor;
-    border-radius: 50% 50% 50% 0;
-    content: "";
-    height: .8em;
-    transform: translate(-50%, -60%) rotate(-45deg);
-    width: .8em;
-  }
-  &::after {
-    border: $icon-border-width solid currentColor;
-    border-radius: 50%;
-    content: "";
-    height: .2em;
-    transform: translate(-50%, -80%);
-    width: .2em;
-  }
-}
-
-// Icon emoji
-.icon-emoji {
-  border: $icon-border-width solid currentColor;
-  border-radius: 50%;
-  &::before {
-    border-radius: 50%;
-    box-shadow: -.17em -.15em, .17em -.15em;
-    content: "";
-    height: .1em;
-    width: .1em;
-  }
-  &::after {
-    border: $icon-border-width solid currentColor;
-    border-bottom-color: transparent;
-    border-radius: 50%;
-    border-right-color: transparent;
-    content: "";
-    height: .5em;
-    transform: translate(-50%, -40%) rotate(-135deg);
-    width: .5em;
-  }
-}
-
-// Component icon support
-.accordion,
-.btn,
-.toast,
-.menu {
-  .icon {
-    vertical-align: -10%;
-  }
-}
+@import "icons/icons-core";
+@import "icons/icons-navigation";
+@import "icons/icons-action";
+@import "icons/icons-object";
\ No newline at end of file
diff --git a/src/_labels.scss b/src/_labels.scss
index 271c6f0..ca693cd 100644
--- a/src/_labels.scss
+++ b/src/_labels.scss
@@ -1,15 +1,17 @@
 // Labels
 .label {
   @include label-base();
-  @include label-variant(lighten($body-font-color, 5%), $bg-color);
+  @include label-variant(lighten($body-font-color, 5%), $bg-color-dark);
   display: inline-block;
 
+  // Label rounded
   &.label-rounded {
     border-radius: 5rem;
     padding-left: .4rem;
     padding-right: .4rem; 
   }
 
+  // Label colors
   &.label-primary {
     @include label-variant($light-color, $primary-color);
   }
diff --git a/src/_modals.scss b/src/_modals.scss
index 21d6ed8..ced52a8 100644
--- a/src/_modals.scss
+++ b/src/_modals.scss
@@ -32,13 +32,25 @@
     .modal-container {
       animation: slide-down .2s ease 1;
       max-width: 640px;
+      width: 100%;
       z-index: $zindex-0;
     }
   }
 
   &.modal-sm {
     .modal-container {
-      max-width: $control-max-width;
+      max-width: 320px;
+    }
+  }
+
+  &.modal-lg {
+    .modal-overlay {
+      background: $bg-color-light;
+    }
+
+    .modal-container {
+      box-shadow: none;
+      max-width: 960px;
     }
   }
 }
@@ -52,7 +64,7 @@
   text-align: left;
 
   .modal-header {
-    padding: $layout-spacing-lg;
+    padding: $unit-4 $unit-6;
 
     .modal-title {
       margin: 0;
@@ -62,12 +74,12 @@
   .modal-body {
     max-height: 50vh;
     overflow-y: auto;
-    padding: $layout-spacing-lg;
+    padding: $unit-4 $unit-6;
     position: relative;
   }
 
   .modal-footer {
-    padding: $layout-spacing-lg;
+    padding: $unit-4 $unit-6;
     text-align: right;
   }
 }
diff --git a/src/_tooltips.scss b/src/_tooltips.scss
index 1ee4d97..938afc2 100644
--- a/src/_tooltips.scss
+++ b/src/_tooltips.scss
@@ -19,7 +19,7 @@
     text-overflow: ellipsis;
     transform: translate(-50%, $unit-2);
     transition: all .2s ease;
-    white-space: nowrap;
+    white-space: pre;
     z-index: $zindex-3;
   }
   &:focus,
diff --git a/src/_variables.scss b/src/_variables.scss
index 4216d4a..2068adc 100644
--- a/src/_variables.scss
+++ b/src/_variables.scss
@@ -1,10 +1,10 @@
 // Core variables
 // Colors
 // Core colors
-$primary-color: #5764c6 !default;
+$primary-color: #5755d9 !default;
 $primary-color-dark: darken($primary-color, 3%) !default;
 $primary-color-light: lighten($primary-color, 3%) !default;
-$secondary-color: lighten($primary-color, 40%) !default;
+$secondary-color: lighten($primary-color, 37.5%) !default;
 $secondary-color-dark: darken($secondary-color, 3%) !default;
 $secondary-color-light: lighten($secondary-color, 3%) !default;
 
@@ -79,10 +79,12 @@ $border-width-lg: $unit-h !default;
 $control-size: $unit-8 !default;
 $control-size-sm: $unit-6 !default;
 $control-size-lg: $unit-10 !default;
-$control-padding-h: $unit-2 !default;
-$control-padding-v: ($control-size - $line-height) / 2 - $border-width !default;
-$control-padding-v-sm: ($control-size-sm - $line-height) / 2 - $border-width !default;
-$control-padding-v-lg: ($control-size-lg - $line-height) / 2 - $border-width !default;
+$control-padding-x: $unit-2 !default;
+$control-padding-x-sm: $unit-2 * .75 !default;
+$control-padding-x-lg: $unit-2 * 1.5 !default;
+$control-padding-y: ($control-size - $line-height) / 2 - $border-width !default;
+$control-padding-y-sm: ($control-size-sm - $line-height) / 2 - $border-width !default;
+$control-padding-y-lg: ($control-size-lg - $line-height) / 2 - $border-width !default;
 $control-icon-size: .7rem !default;
 $control-min-width: 180px !default;
 $control-max-width: 320px !default;
diff --git a/src/icons/_icons-action.scss b/src/icons/_icons-action.scss
new file mode 100644
index 0000000..807f05e
--- /dev/null
+++ b/src/icons/_icons-action.scss
@@ -0,0 +1,316 @@
+
+// Icon resize
+.icon-resize-horiz,
+.icon-resize-vert {
+  &::before,
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-bottom: 0;
+    border-right: 0;
+    content: "";
+    height: .45em;
+    width: .45em;
+  }
+  &::before {
+    transform: translate(-50%, -90%) rotate(45deg);
+  }
+  &::after {
+    transform: translate(-50%, -10%) rotate(225deg);
+  }
+}
+
+.icon-resize-horiz {
+  &::before {
+    transform: translate(-90%, -50%) rotate(-45deg);
+  }
+  &::after {
+    transform: translate(-10%, -50%) rotate(135deg);
+  }
+}
+
+// Icon more
+.icon-more-horiz,
+.icon-more-vert {
+  &::before {
+    background: currentColor;
+    box-shadow: -.4em 0, .4em 0;
+    border-radius: 50%;
+    content: "";
+    height: 3px;
+    width: 3px;
+  }
+}
+
+.icon-more-vert {
+  &::before {
+    box-shadow: 0 -.4em, 0 .4em;
+  }
+}
+
+// Icon plus, minus, cross
+.icon-plus,
+.icon-minus,
+.icon-cross {
+  &::before {
+    background: currentColor;
+    content: "";
+    height: $icon-border-width;
+    width: 100%;
+  }
+}
+
+.icon-plus,
+.icon-cross {
+  &::after {
+    background: currentColor;
+    content: "";
+    height: 100%;
+    width: $icon-border-width;
+  }
+}
+
+.icon-cross {
+  &::before {
+    width: 100%;
+  }
+  &::after {
+    height: 100%;
+  }
+  &::before,
+  &::after {
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+}
+
+// Icon check
+.icon-check {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-right: 0;
+    border-top: 0;
+    content: "";
+    height: .5em;
+    width: .9em;
+    transform: translate(-50%, -75%) rotate(-45deg);
+  }
+}
+
+// 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 {
+    border: $icon-border-width solid currentColor;
+    border-radius: 50%;
+    border-right-color: transparent;
+    content: "";
+    height: 1em;
+    width: 1em;
+  }
+  &::after {
+    border: .2em solid currentColor;
+    border-top-color: transparent;
+    border-left-color: transparent;
+    content: "";
+    height: 0;
+    left: 80%;
+    top: 20%;
+    width: 0;
+  }
+}
+
+// Icon search
+.icon-search {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-radius: 50%;
+    content: "";
+    height: .75em;
+    left: 5%;
+    top: 5%;
+    transform: translate(0, 0) rotate(45deg);
+    width: .75em;
+  }
+  &::after {
+    background: currentColor;
+    content: "";
+    height: $icon-border-width;
+    left: 80%;
+    top: 80%;
+    transform: translate(-50%, -50%) rotate(45deg);
+    width: .4em;
+  }
+}
+
+// Icon edit
+.icon-edit {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    content: "";
+    height: .4em;
+    transform: translate(-40%, -60%) rotate(-45deg);
+    width: .85em;
+  }
+  &::after {
+    border: .15em solid currentColor;
+    border-top-color: transparent;
+    border-right-color: transparent;
+    content: "";
+    height: 0;
+    left: 5%;
+    top: 95%;
+    transform: translate(0, -100%);
+    width: 0;
+  }
+}
+
+// Icon delete
+.icon-delete {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-bottom-left-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
+    border-top: 0;
+    content: "";
+    height: .75em;
+    top: 60%;
+    width: .75em;
+  }
+  &::after {
+    background: currentColor;
+    box-shadow: -.25em .2em, .25em .2em;
+    content: "";
+    height: $icon-border-width;
+    top: $icon-border-width/2;
+    width: .5em;
+  }
+}
+
+// Icon share
+.icon-share {
+  border: $icon-border-width solid currentColor;
+  border-radius: $border-radius;
+  border-right: 0;
+  border-top: 0;
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-left: 0;
+    border-top: 0;
+    content: "";
+    height: .4em;
+    left: 100%;
+    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% 0;
+    content: "";
+    height: .5em;
+    width: .6em;
+  }
+}
+
+// Icon flag
+.icon-flag {
+  &::before {
+    background: currentColor;
+    content: "";
+    height: 1em;
+    left: 15%;
+    width: $icon-border-width;
+  }
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-bottom-right-radius: $border-radius;
+    border-left: 0;
+    border-top-right-radius: $border-radius;
+    content: "";
+    height: .65em;
+    top: 35%;
+    left: 60%;
+    width: .8em;
+  }
+}
+
+// Icon bookmark
+.icon-bookmark {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-bottom: 0;
+    border-top-left-radius: $border-radius;
+    border-top-right-radius: $border-radius;
+    content: "";
+    height: .9em;
+    width: .8em;
+  }
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-bottom: 0;
+    border-left: 0;
+    border-radius: $border-radius;
+    content: "";
+    height: .5em;
+    transform: translate(-50%, 35%) rotate(-45deg) skew(15deg, 15deg);
+    width: .5em;
+  }
+}
+
+// Icon download & upload
+.icon-download,
+.icon-upload {
+  border-bottom: $icon-border-width solid currentColor;
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-bottom: 0;
+    border-right: 0;
+    content: "";
+    height: .5em;
+    width: .5em;
+    transform: translate(-50%, -60%) rotate(-135deg);
+  }
+  &::after {
+    background: currentColor;
+    content: "";
+    height: .6em;
+    top: 40%;
+    width: $icon-border-width;
+  }
+}
+
+.icon-upload {
+  &::before {
+    transform: translate(-50%, -60%) rotate(45deg);
+  }
+  &::after {
+    top: 50%;
+  }
+}
diff --git a/src/icons/_icons-core.scss b/src/icons/_icons-core.scss
new file mode 100644
index 0000000..1bcc10e
--- /dev/null
+++ b/src/icons/_icons-core.scss
@@ -0,0 +1,47 @@
+// Icon variables
+$icon-border-width: $border-width-lg;
+$icon-prefix: "icon";
+
+// Icon base style
+.#{$icon-prefix} {
+  box-sizing: border-box;
+  display: inline-block;
+  font-size: inherit;
+  font-style: normal;
+  height: 1em;
+  position: relative;
+  text-indent: -9999px;
+  vertical-align: middle;
+  width: 1em;
+  &::before,
+  &::after {
+    display: block;
+    left: 50%;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  // Icon sizes
+  &.icon-2x {
+    font-size: 1.6rem;
+  }
+
+  &.icon-3x {
+    font-size: 2.4rem;
+  }
+
+  &.icon-4x {
+    font-size: 3.2rem;
+  }
+}
+
+// Component icon support
+.accordion,
+.btn,
+.toast,
+.menu {
+  .#{$icon-prefix} {
+    vertical-align: -10%;
+  }
+}
diff --git a/src/icons/_icons-navigation.scss b/src/icons/_icons-navigation.scss
new file mode 100644
index 0000000..7d7fcd3
--- /dev/null
+++ b/src/icons/_icons-navigation.scss
@@ -0,0 +1,133 @@
+// Icon arrows
+.icon-arrow-down,
+.icon-arrow-left,
+.icon-arrow-right,
+.icon-arrow-up,
+.icon-downward,
+.icon-back,
+.icon-forward,
+.icon-upward {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-bottom: 0;
+    border-right: 0;
+    content: "";
+    height: .65em;
+    width: .65em;
+  }
+}
+
+.icon-arrow-down {
+  &::before {
+    transform: translate(-50%, -75%) rotate(225deg);
+  }
+}
+
+.icon-arrow-left {
+  &::before {
+    transform: translate(-25%, -50%) rotate(-45deg);
+  }
+}
+
+.icon-arrow-right {
+  &::before {
+    transform: translate(-75%, -50%) rotate(135deg);
+  }
+}
+
+.icon-arrow-up {
+  &::before {
+    transform: translate(-50%, -25%) rotate(45deg);
+  }
+}
+
+.icon-back,
+.icon-forward {
+  &::after {
+    background: currentColor;
+    content: "";
+    height: $icon-border-width;
+    width: .8em;
+  }
+}
+
+.icon-downward,
+.icon-upward {
+  &::after {
+    background: currentColor;
+    content: "";
+    height: .8em;
+    width: $icon-border-width;
+  }
+}
+
+.icon-back {
+  &::after {
+    left: 55%;
+  }
+  &::before {
+    transform: translate(-50%, -50%) rotate(-45deg);
+  }
+}
+
+.icon-downward {
+  &::after {
+    top: 45%;
+  }
+  &::before {
+    transform: translate(-50%, -50%) rotate(-135deg);
+  }
+}
+
+.icon-forward {
+  &::after {
+    left: 45%;
+  }
+  &::before {
+    transform: translate(-50%, -50%) rotate(135deg);
+  }
+}
+
+.icon-upward {
+  &::after {
+    top: 55%;
+  }
+  &::before {
+    transform: translate(-50%, -50%) rotate(45deg);
+  }
+}
+
+// Icon caret
+.icon-caret {
+  &::before {
+    border-top: .3em solid currentColor;
+    border-right: .3em solid transparent;
+    border-left: .3em solid transparent;
+    content: "";
+    height: 0;
+    transform: translate(-50%, -25%);
+    width: 0;
+  }
+}
+
+// Icon menu
+.icon-menu {
+  &::before {
+    background: currentColor;
+    box-shadow: 0 -.35em, 0 .35em;
+    content: "";
+    height: $icon-border-width;
+    width: 100%;
+  }
+}
+
+// Icon apps
+.icon-apps {
+  &::before {
+    background: currentColor;
+    box-shadow: -.35em -.35em, -.35em 0, -.35em .35em, 0 -.35em, 0 .35em, .35em -.35em, .35em 0, .35em .35em;
+    content: "";
+    height: 3px;
+    width: 3px;
+  }
+}
diff --git a/src/icons/_icons-object.scss b/src/icons/_icons-object.scss
new file mode 100644
index 0000000..746d25b
--- /dev/null
+++ b/src/icons/_icons-object.scss
@@ -0,0 +1,176 @@
+// Icon time
+.icon-time {
+  border: $icon-border-width solid currentColor;
+  border-radius: 50%;
+  &::before {
+    background: currentColor;
+    content: "";
+    height: .4em;
+    transform: translate(-50%, -75%);
+    width: $icon-border-width;
+  }
+  &::after {
+    background: currentColor;
+    content: "";
+    height: .3em;
+    transform: translate(-50%, -75%) rotate(90deg);
+    transform-origin: 50% 90%;
+    width: $icon-border-width;
+  }
+}
+
+// Icon mail
+.icon-mail {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-radius: $border-radius;
+    content: "";
+    height: .8em;
+    width: 1em;
+  }
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-right: 0;
+    border-top: 0;
+    content: "";
+    height: .5em;
+    transform: translate(-50%, -90%) rotate(-45deg) skew(10deg, 10deg);
+    width: .5em;
+  }
+}
+
+// Icon people
+.icon-people {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-radius: 50%;
+    content: "";
+    height: .45em;
+    top: 25%;
+    width: .45em;
+  }
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-radius: 50% 50% 0 0;
+    content: "";
+    height: .4em;
+    top: 75%;
+    width: .9em;
+  }
+}
+
+// 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-bottom-right-radius: $border-radius;
+    border-left: 0;
+    border-top: 0;
+    content: "";
+    height: .8em;
+    left: 65%;
+    top: 40%;
+    width: .7em;
+  }
+  &::after {
+    background: currentColor;
+    border-radius: $border-radius;
+    content: "";
+    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;
+  }
+}
+
+// Icon link
+.icon-link {
+  &::before,
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-radius: 5em 0 0 5em;
+    border-right: 0;
+    content: "";
+    height: .5em;
+    width: .75em;
+  }
+  &::before {
+    transform: translate(-70%, -45%) rotate(-45deg);
+  }
+  &::after {
+    transform: translate(-30%, -55%) rotate(135deg);
+  }
+}
+
+// Icon location
+.icon-location {
+  &::before {
+    border: $icon-border-width solid currentColor;
+    border-radius: 50% 50% 50% 0;
+    content: "";
+    height: .8em;
+    transform: translate(-50%, -60%) rotate(-45deg);
+    width: .8em;
+  }
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-radius: 50%;
+    content: "";
+    height: .2em;
+    transform: translate(-50%, -80%);
+    width: .2em;
+  }
+}
+
+// Icon emoji
+.icon-emoji {
+  border: $icon-border-width solid currentColor;
+  border-radius: 50%;
+  &::before {
+    border-radius: 50%;
+    box-shadow: -.17em -.15em, .17em -.15em;
+    content: "";
+    height: .1em;
+    width: .1em;
+  }
+  &::after {
+    border: $icon-border-width solid currentColor;
+    border-bottom-color: transparent;
+    border-radius: 50%;
+    border-right-color: transparent;
+    content: "";
+    height: .5em;
+    transform: translate(-50%, -40%) rotate(-135deg);
+    width: .5em;
+  }
+}
diff --git a/src/spectre-icons.scss b/src/spectre-icons.scss
index 137fe70..63c8034 100644
--- a/src/spectre-icons.scss
+++ b/src/spectre-icons.scss
@@ -5,4 +5,7 @@
 @import "mixins";
 
 // Icons
-@import "icons";
+@import "icons/icons-core";
+@import "icons/icons-navigation";
+@import "icons/icons-action";
+@import "icons/icons-object";