Merge pull request #151 from picturepan2/feature/components v0.2.5

Feature/components

33 files changed, 363 insertions, 236 deletions

diff --git a/src/autocomplete.less b/src/autocomplete.less
index df99426..ce8b620 100644
--- a/src/autocomplete.less
+++ b/src/autocomplete.less
@@ -4,19 +4,14 @@
 
   .form-autocomplete-input {
     align-content: flex-start;
-    background: #fff;
-    border: .1rem solid @control-color;
-    border-radius: @border-radius;
-    color: @body-font-color;
     display: flex;
     flex-wrap: wrap;
+    height: auto;
     min-height: 3.6rem;
-    outline: 0;
     padding: .1rem 0 .1rem .2rem;
-    width: 100%;
 
     &.is-focused {
-      border-color: @core-color;
+      border-color: @primary-color;
       .control-shadow();
     }
 
diff --git a/src/avatars.less b/src/avatars.less
index 801e1b4..8eb9e5e 100644
--- a/src/avatars.less
+++ b/src/avatars.less
@@ -1,7 +1,8 @@
 // Avatars
 .avatar {
+  background: @primary-color;
   border-radius: 50%;
-  color: @core-light-color;
+  color: @light-color;
   display: inline-block;
   font-size: 1.4rem;
   font-weight: 300;
@@ -13,12 +14,12 @@
   width: 3.2rem;
 
   &.avatar-xs {
-    font-size: 1.2rem;
+    font-size: 1.4rem;
     height: 1.6rem;
     width: 1.6rem;
   }
   &.avatar-sm {
-    font-size: 1.2rem;
+    font-size: 1rem;
     height: 2.4rem;
     width: 2.4rem;
   }
@@ -28,7 +29,7 @@
     width: 4.8rem;
   }
   &.avatar-xl {
-    font-size: 2.8rem;
+    font-size: 2.6rem;
     height: 6.4rem;
     width: 6.4rem;
   }
@@ -42,7 +43,7 @@
   }
 
   .avatar-icon {
-    background: #fff;
+    background: @light-bg-color;
     bottom: -.2em;
     height: 50%;
     padding: 5%;
@@ -58,12 +59,13 @@
     position: absolute;
     top: 50%;
     transform: translate(-50%, -50%);
+    vertical-align: middle;
     z-index: 1;
   }
 
   &.avatar-xs {
     &[data-initial]::before {
-      transform: translate(-50%, -50%) scale(.65);
+      transform: translate(-50%, -50%) scale(.5);
     }
   }
 }
diff --git a/src/badges.less b/src/badges.less
index e274184..993bab6 100644
--- a/src/badges.less
+++ b/src/badges.less
@@ -6,11 +6,11 @@
   &[data-badge],
   &:not([data-badge]) {
     &::after {
-      background: @core-color;
+      background: @primary-color;
       background-clip: padding-box;
-      border: .1rem solid #fff;
+      border: .1rem solid @light-bg-color;
       border-radius: 1rem;
-      color: @core-light-color;
+      color: @light-color;
       content: attr(data-badge);
       display: inline-block;
       transform: translate(-.4rem, -1rem);
diff --git a/src/bars.less b/src/bars.less
index d410fdb..2569bce 100644
--- a/src/bars.less
+++ b/src/bars.less
@@ -1,6 +1,6 @@
 // Bars
 .bar {
-  background: @core-border-color;
+  background: @border-color;
   border-radius: @border-radius;
   display: flex;
   flex-wrap: nowrap;
@@ -13,8 +13,8 @@
 
   // TODO: attr() support
   .bar-item {
-    background: @core-color;
-    color: @core-light-color;
+    background: @primary-color;
+    color: @light-color;
     display: block;
     font-size: 1.2rem;
     flex-shrink: 0;
diff --git a/src/base.less b/src/base.less
index cd99676..904cb5d 100644
--- a/src/base.less
+++ b/src/base.less
@@ -22,12 +22,14 @@ body {
 }
 
 a {
-  color: @core-link-color;
+  color: @link-color;
   text-decoration: none;
 
   &:focus,
-  &:hover {
-    color: darken(@core-link-color, 10%);
+  &:hover,
+  &:active,
+  &.active {
+    color: @dark-link-color;
     text-decoration: underline;
   }
 }
diff --git a/src/breadcrumbs.less b/src/breadcrumbs.less
index 14045da..a1d2c1a 100644
--- a/src/breadcrumbs.less
+++ b/src/breadcrumbs.less
@@ -7,11 +7,11 @@
     margin: 0;
 
     &:last-child {
-      color: @core-meta-color;
+      color: @gray-color;
     }
     &:not(:first-child) {
       &::before {
-        color: @control-color;
+        color: @light-gray-color;
         content: "/";
         padding: 0 .4rem;
       }
diff --git a/src/buttons.less b/src/buttons.less
index f0daefc..baf40ca 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -1,10 +1,10 @@
 // Buttons
 .btn {
   -webkit-appearance: none;
-  background: #fff;
-  border: .1rem solid @core-color;
+  background: @light-bg-color;
+  border: .1rem solid @primary-color;
   border-radius: @border-radius;
-  color: @core-link-color;
+  color: @link-color;
   .control-transition();
   cursor: pointer;
   display: inline-block;
@@ -18,46 +18,46 @@
   vertical-align: middle;
   white-space: nowrap;
   &:focus {
-    background: lighten(@core-secondary-color, 2%);
+    background: @light-primary-color;
     text-decoration: none;
   }
   &:hover {
-    background: @core-color;
-    border-color: darken(@core-color, 5%);
-    color: @core-light-color;
+    background: @primary-color;
+    border-color: @dark-primary-color;
+    color: @light-color;
     text-decoration: none;
   }
   &:active,
   &.active {
-    background: darken(@core-color, 5%);
-    border-color: darken(@core-color, 10%);
-    color: @core-light-color;
+    background: @dark-primary-color;
+    border-color: darken(@dark-primary-color, 5%);
+    color: @light-color;
   }
 
   // Button Primary
   &.btn-primary {
-    background: @core-color;
-    border-color: darken(@core-color, 5%);
-    color: @core-light-color;
+    background: @primary-color;
+    border-color: @dark-primary-color;
+    color: @light-color;
     &:focus {
-      background: darken(@core-color, 4%);
-      border-color: darken(@core-color, 10%);
-      color: @core-light-color;
+      background: @dark-primary-color;
+      border-color: darken(@dark-primary-color, 5%);
+      color: @light-color;
     }
     &:hover {
-      background: darken(@core-color, 6%);
-      border-color: darken(@core-color, 15%);
-      color: @core-light-color;
+      background: darken(@dark-primary-color, 2%);
+      border-color: darken(@dark-primary-color, 5%);
+      color: @light-color;
     }
     &:active,
     &.active {
-      background: darken(@core-color, 8%);
-      border-color: darken(@core-color, 15%);
-      color: @core-light-color;
+      background: darken(@dark-primary-color, 4%);
+      border-color: darken(@dark-primary-color, 7%);
+      color: @light-color;
     }
     &.loading {
       &::after {
-        border-color: @core-light-color;
+        border-color: @light-color;
         border-right-color: transparent;
         border-top-color: transparent;
       }
@@ -68,14 +68,12 @@
   &.btn-link {
     background: transparent;
     border-color: transparent;
-    color: @core-link-color;
+    color: @link-color;
     &:focus,
-    &:hover {
-      color: darken(@core-link-color, 15%);
-    }
+    &:hover,
     &:active,
     &.active {
-      color: darken(@core-link-color, 25%);
+      color: @dark-link-color;
     }
   }
 
diff --git a/src/cards.less b/src/cards.less
index b0fe376..2a655ab 100644
--- a/src/cards.less
+++ b/src/cards.less
@@ -1,7 +1,7 @@
 // Cards
 .card {
-  background: #fff;
-  border: .1rem solid @core-border-color;
+  background: @light-bg-color;
+  border: .1rem solid @border-color;
   border-radius: @border-radius;
   display: block;
   margin: 0;
@@ -38,10 +38,10 @@
   }
   .card-title {
     font-size: 2rem;
-    line-height: 1;
+    line-height: 1.4;
   }
   .card-meta {
-    color: @core-meta-color;
+    color: @gray-color;
     font-size: 1.3rem;
   }
 }
diff --git a/src/chips.less b/src/chips.less
index 1e822bb..fca7437 100644
--- a/src/chips.less
+++ b/src/chips.less
@@ -1,9 +1,9 @@
 // Chips
 .chip {
   align-items: center;
-  background: @core-border-color;
+  background: @border-color;
   border-radius: @border-radius;
-  color: @core-grey-color;
+  color: @dark-gray-color;
   display: inline-flex;
   height: 3rem;
   margin: .1rem .2rem .1rem 0;
@@ -13,8 +13,8 @@
   vertical-align: middle;
 
   &.active {
-    background: @core-color;
-    color: @core-light-color;
+    background: @primary-color;
+    color: @light-color;
   }
 
   .avatar {
diff --git a/src/codes.less b/src/codes.less
index a5be02e..e2b8a48 100644
--- a/src/codes.less
+++ b/src/codes.less
@@ -1,19 +1,19 @@
 // Codes
 code {
-  background: @core-bg-color;
+  background: @bg-color;
   color: @code-color;
   .label-base();
 }
 
 .code {
   border-radius: @border-radius;
-  color: @core-grey-color;
+  color: @dark-gray-color;
   line-height: 2rem;
   position: relative;
 
   &::before {
     content: attr(data-lang);
-    color: @control-color;
+    color: @light-gray-color;
     font-size: 1.2rem;
     position: absolute;
     right: 1rem;
diff --git a/src/empty.less b/src/empty.less
index c1b1964..d3c0deb 100644
--- a/src/empty.less
+++ b/src/empty.less
@@ -1,17 +1,20 @@
 // Empty states (or Blank slates)
 .empty {
-  background: @core-bg-color;
+  background: @bg-color;
   border-radius: @border-radius;
+  color: @dark-gray-color;
   text-align: center;
   padding: 4 * @layout-gutter;
 
-  .empty-title {
-    font-size: 1.8rem;
-    margin: 1.5rem 0 .5rem 0;
+  .empty-title,
+  .empty-meta {
+    margin: 1rem auto;
   }
+
   .empty-meta {
-    color: @core-meta-color;
+    color: @gray-color;
   }
+
   .empty-action {
     margin-top: 1.5rem;
   }
diff --git a/src/forms.less b/src/forms.less
index 257438c..8214be1 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -6,40 +6,39 @@
 // Form element: Input boxes
 .form-input {
   appearance: none;
-  background: #fff;
+  background: @light-bg-color;
   background-image: none;
-  border: .1rem solid @control-color;
+  border: .1rem solid @light-gray-color;
   border-radius: @border-radius;
   color: @body-font-color;
   .control-transition();
   display: block;
   font-size: 1.4rem;
   height: 3.2rem;
-  line-height: 1.8rem;
+  line-height: 2rem;
   max-width: 100%;
   outline: 0;
-  padding: .6rem .8rem;
+  padding: .5rem .8rem;
   position: relative;
   width: 100%;
   &:focus {
-    border-color: @core-color;
+    border-color: @primary-color;
   }
   &[disabled] {
-    background: #eeeff2;
+    background: @bg-color;
   }
 
   // Input sizes
   &.input-sm {
     font-size: 1.2rem;
     height: 2.4rem;
-    padding: .3rem .6rem;
+    padding: .1rem .6rem;
   }
 
   &.input-lg {
     font-size: 1.6rem;
-    height: 4.2rem;
-    line-height: 2rem;
-    padding: 1rem .8rem;
+    height: 4rem;
+    padding: .9rem .8rem;
   }
 
   &.input-inline {
@@ -73,7 +72,7 @@
 
 // Form element: Input hint
 .form-input-hint {
-  color: @core-meta-color;
+  color: @gray-color;
   margin-top: .4rem;
 
   .has-success &,
@@ -97,10 +96,10 @@
 // Form element: Select
 .form-select {
   appearance: none;
-  border: .1rem solid @control-color;
+  border: .1rem solid @light-gray-color;
   border-radius: @border-radius;
   font-size: 1.4rem;
-  line-height: 1.6rem;
+  line-height: 2rem;
   min-width: @control-min-width;
   outline: 0;
   padding: .5rem .8rem;
@@ -111,12 +110,12 @@
     }
   }
   &:not([multiple]) {
-    background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right .75rem center / .8rem 1rem;
+    background: @light-bg-color url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right .75rem center / .8rem 1rem;
     height: 3.2rem;
     padding-right: 2.4rem;
   }
   &:focus {
-    border-color: @core-color;
+    border-color: @primary-color;
   }
   &::-ms-expand {
     display: none;
@@ -126,14 +125,13 @@
   &.select-sm {
     font-size: 1.2rem;
     height: 2.4rem;
-    padding: .4rem 2rem .4rem .6rem;
+    padding: .1rem 2rem .1rem .6rem;
   }
 
   &.select-lg {
     font-size: 1.6rem;
-    height: 4.2rem;
-    line-height: 2rem;
-    padding: 1rem 2.4rem 1rem .8rem;
+    height: 4rem;
+    padding: .9rem 2.4rem .9rem .8rem;
   }
 
   // Select status
@@ -160,7 +158,7 @@
     position: absolute;
     width: .1rem;
     &:focus + .form-icon {
-      border-color: @core-color;
+      border-color: @primary-color;
       .control-shadow();
     }
   }
@@ -174,7 +172,7 @@
   position: relative;
 
   .form-icon {
-    border: .1rem solid @control-color;
+    border: .1rem solid @light-gray-color;
     .control-transition();
     display: inline-block;
     font-size: 1.4rem;
@@ -188,17 +186,14 @@
     vertical-align: top;
     width: 1.4rem;
   }
-  &:hover .form-icon {
-    border-color: darken(@control-color, 20%);
-  }
 
   input {
     &:checked + .form-icon {
-      background: @core-color;
-      border-color: @core-color;
+      background: @primary-color;
+      border-color: @primary-color;
     }
     &:active + .form-icon {
-      background: @core-border-color;
+      background: @border-color;
     }
   }
 }
@@ -211,7 +206,7 @@
     &:checked + .form-icon {
       &::after {
         background-clip: padding-box;
-        border: .2rem solid #fff;
+        border: .2rem solid @light-color;
         border-left-width: 0;
         border-top-width: 0;
         content: "";
@@ -226,10 +221,10 @@
       }
     }
     &:indeterminate + .form-icon {
-      background: @core-color;
-      border-color: @core-color;
+      background: @primary-color;
+      border-color: @primary-color;
       &::after {
-        background: #fff;
+        background: @light-bg-color;
         content: "";
         height: .2rem;
         left: 50%;
@@ -249,7 +244,7 @@
 
   input:checked + .form-icon {
     &::after {
-      background: #fff;
+      background: @light-bg-color;
       border-radius: @border-radius;
       content: "";
       height: .4rem;
@@ -272,9 +267,9 @@
   position: relative;
 
   .form-icon {
-    background: @control-color;
+    background: @light-gray-color;
     background-clip: padding-box;
-    border: .1rem solid @control-color;
+    border: .1rem solid @light-gray-color;
     border-radius: .9rem;
     display: inline-block;
     height: 1.8rem;
@@ -287,7 +282,7 @@
     vertical-align: top;
     width: 3rem;
     &::after {
-      background: #fff;
+      background: @light-bg-color;
       border-radius: .8rem;
       content: "";
       display: block;
@@ -302,15 +297,15 @@
 
   input {
     &:checked + .form-icon {
-      background: @core-color;
-      border-color: @core-color;
+      background: @primary-color;
+      border-color: @primary-color;
       &::after {
         left: 1.2rem;
       }
     }
     &:active + .form-icon {
       &::after {
-        background: @core-border-color;
+        background: @border-color;
       }
     }
   }
@@ -321,20 +316,20 @@
   display: flex;
 
   .input-group-addon {
-    background: lighten(@core-border-color, 4%);
-    border: .1rem solid @control-color;
+    background: @bg-color;
+    border: .1rem solid @light-gray-color;
     border-radius: @border-radius;
-    line-height: 1.6rem;
-    padding: .7rem .8rem;
+    line-height: 2rem;
+    padding: .5rem .8rem;
 
     &.addon-sm {
       font-size: 1.2rem;
-      padding: .3rem .6rem;
+      padding: .1rem .6rem;
     }
     &.addon-lg {
       font-size: 1.6rem;
       line-height: 2rem;
-      padding: 1rem .8rem;
+      padding: .9rem .8rem;
     }
   }
   .input-group-addon,
diff --git a/src/labels.less b/src/labels.less
index 917e602..ae4a1a7 100644
--- a/src/labels.less
+++ b/src/labels.less
@@ -1,17 +1,21 @@
 // Labels
 .label {
-  background: @core-bg-color;
-  color: @core-meta-color;
+  background: @bg-color;
+  color: @dark-gray-color;
   .label-base();
 
   &.label-primary {
-    .label-variant(@core-color);
+    .label-variant(@primary-color);
   }
 
   &.label-success {
     .label-variant(@control-color-success);
   }
 
+  &.label-warning {
+    .label-variant(@control-color-warning);
+  }
+
   &.label-danger {
     .label-variant(@control-color-danger);
   }
diff --git a/src/layout.less b/src/layout.less
index 05642aa..7ebfea2 100644
--- a/src/layout.less
+++ b/src/layout.less
@@ -6,16 +6,9 @@
   padding-right: @layout-gutter;
   width: 100%;
   &:extend(.clearfix all);
-}
-// Grid sizes
-@media screen and (min-width: (960px + 2 * @html-font-size * @layout-gutter)) {
-  .grid-960 {
-    width: 96rem + 2 * @layout-gutter;
-  }
-}
-@media screen and (min-width: (480px + 2 * @html-font-size * @layout-gutter)) {
-  .grid-480 {
-    width: 48rem + 2 * @layout-gutter;
+
+  &.grid-960 {
+    max-width: 96rem + 2 * @layout-gutter;
   }
 }
 
@@ -357,28 +350,50 @@
 }
 
 // Responsive breakpoint system
+.show-xs,
+.show-sm,
+.show-md,
+.show-lg,
+.show-xl {
+  display: none !important;
+}
 @media screen and (max-width: @size-xs) {
   .hide-xs {
     display: none !important;
   }
+  .show-xs {
+    display: block !important;
+  }
 }
 @media screen and (max-width: @size-sm) {
   .hide-sm {
     display: none !important;
   }
+  .show-sm {
+    display: block !important;
+  }
 }
 @media screen and (max-width: @size-md) {
   .hide-md {
     display: none !important;
   }
+  .show-md {
+    display: block !important;
+  }
 }
 @media screen and (max-width: @size-lg) {
   .hide-lg {
     display: none !important;
   }
+  .show-lg {
+    display: block !important;
+  }
 }
 @media screen and (max-width: @size-xl) {
   .hide-xl {
     display: none !important;
   }
+  .show-xl {
+    display: block !important;
+  }
 }
diff --git a/src/media.less b/src/media.less
index 1072304..f9f1c37 100644
--- a/src/media.less
+++ b/src/media.less
@@ -52,7 +52,7 @@
   margin: 0 0 @layout-gutter 0;
 
   .figure-caption {
-    color: @core-meta-color;
+    color: @dark-gray-color;
     margin-top: @layout-gutter;
   }
 }
diff --git a/src/menus.less b/src/menus.less
index 60b2f3b..1849a32 100644
--- a/src/menus.less
+++ b/src/menus.less
@@ -1,8 +1,8 @@
 // Menus
 .menu {
-  background: #fff;
+  background: @light-bg-color;
   border-radius: @border-radius;
-  display: block;
+  list-style: none;
   margin: 0;
   min-width: @control-min-width;
   padding: .8rem;
@@ -13,55 +13,64 @@
 
   .menu-item {
     border-radius: @border-radius;
-    display: block;
-    line-height: 2.4rem;
     margin-top: 0;
-    padding: .3rem .8rem;
+    padding: 0 .8rem;
     text-decoration: none;
     user-select: none;
 
-    a {
+    & > a {
       border-radius: @border-radius;
       color: inherit;
       display: block;
-      margin: -.3rem -.8rem;
-      padding: .3rem .8rem;
+      line-height: 2.4rem;
+      margin: 0 -.8rem;
+      padding: .4rem .8rem;
       text-decoration: none;
       &:focus,
       &:hover {
-        color: @core-link-color;
+        color: @link-color;
       }
       &:active,
       &.active {
-        background: @core-secondary-color;
-        color: darken(@core-link-color, 5%);
+        background: @light-primary-color;
+        color: @dark-link-color;
       }
     }
   }
 
   .menu-header {
-    color: lighten(@body-font-color, 60%);
-    display: block;
+    color: @light-gray-color;
     font-size: 1.2rem;
-    line-height: 1.8rem;
+    line-height: 2rem;
     margin-top: 0;
-    padding: .2rem .8rem;
+    padding: .2rem 0;
+    position: relative;
+
     &::after {
-      border-bottom: .1rem solid @core-border-color;
+      border-bottom: .1rem solid @border-color;
       content: "";
       display: block;
       height: .1rem;
-      transform: translateY(-1rem);
+      position: absolute;
+      top: 50%;
       width: 100%;
     }
 
     .menu-header-text {
-      background: #fff;
+      background: @light-bg-color;
       display: inline-block;
-      margin-left: -.6rem;
-      padding: 0 .6rem;
+      padding: 0 .8rem;
       position: relative;
       z-index: 99;
     }
   }
+
+  .menu-badge {
+    float: right;
+    padding: .4rem 0;
+
+    .label {
+      margin: .2rem 0;
+    }
+  }
 }
diff --git a/src/meters.less b/src/meters.less
index ada4371..57d2551 100644
--- a/src/meters.less
+++ b/src/meters.less
@@ -2,8 +2,9 @@
 // Credit: https://css-tricks.com/html5-meter-element/
 .meter {
   appearance: none;
-  background: @core-bg-color;
+  background: @bg-color;
   border: 0;
+  border-radius: @border-radius;
   display: block;
   width: 100%;
   height: 1.6rem;
@@ -11,7 +12,7 @@
   &::-webkit-meter-inner-element {
     display: block;
   }
-  
+
   &::-webkit-meter-bar,
   &::-webkit-meter-optimum-value,
   &::-webkit-meter-suboptimum-value,
@@ -20,7 +21,7 @@
   }
 
   &::-webkit-meter-bar {
-    background: @core-bg-color;
+    background: @bg-color;
   }
 
   &::-webkit-meter-optimum-value {
@@ -36,25 +37,21 @@
   }
 
   &::-moz-meter-bar,
-  &::-moz-meter-optimum,
-  &::-moz-meter-sub-optimum,
-  &::-moz-meter-sub-sub-optimum {
+  &:-moz-meter-optimum,
+  &:-moz-meter-sub-optimum,
+  &:-moz-meter-sub-sub-optimum {
     border-radius: @border-radius;
   }
 
-  &::-moz-meter-bar {
-    background: @core-bg-color;
-  }
-
-  &:-moz-meter-optimum {
+  &:-moz-meter-optimum::-moz-meter-bar {
     background: @control-color-success;
   }
 
-  &:-moz-meter-sub-optimum {
+  &:-moz-meter-sub-optimum::-moz-meter-bar {
     background: @control-color-warning;
   }
 
-  &:-moz-meter-sub-sub-optimum {
+  &:-moz-meter-sub-sub-optimum::-moz-meter-bar {
     background: @control-color-danger;
   }
 }
diff --git a/src/mixins.less b/src/mixins.less
index bc6d97c..283df97 100644
--- a/src/mixins.less
+++ b/src/mixins.less
@@ -7,7 +7,7 @@
   }
 }
 .control-shadow() {
-  box-shadow: 0 0 0 .2rem fade(@core-color, 15%);
+  box-shadow: 0 0 0 .2rem fade(@primary-color, 15%);
 }
 .control-transition() {
   transition: all .2s ease;
@@ -20,10 +20,10 @@
   border-radius: .2rem;
   display: inline-block;
   line-height: 1;
-  padding: .3rem;
+  padding: .3rem .4rem;
   vertical-align: baseline;
 }
 .label-variant(@color) {
   background: @color;
-  color: @core-light-color;
+  color: @light-color;
 }
diff --git a/src/modals.less b/src/modals.less
index 0e8a6ba..ad679cf 100644
--- a/src/modals.less
+++ b/src/modals.less
@@ -19,7 +19,7 @@
     z-index: 1988;
 
     .modal-overlay {
-      background: fade(@core-dark-color, 50%);
+      background: fade(@dark-color, 50%);
       bottom: 0;
       display: block;
       left: 0;
@@ -42,7 +42,7 @@
 }
 
 .modal-container {
-  background: #fff;
+  background: @light-bg-color;
   border-radius: @border-radius;
   display: block;
   margin: 0 auto;
diff --git a/src/navs.less b/src/navs.less
index 6f3d099..160d028 100644
--- a/src/navs.less
+++ b/src/navs.less
@@ -5,21 +5,21 @@
 
   .nav-item {
     a {
-      color: lighten(@body-font-color, 20%);
+      color: @dark-gray-color;
       padding: .6rem .8rem;
       text-decoration: none;
       &:focus,
       &:hover {
-        color: @core-color;
+        color: @primary-color;
       }
     }
     &.active {
       & > a {
-        color: @body-font-color;
+        color: @dark-gray-color;
         font-weight: bold;
         &:focus,
         &:hover {
-          color: @core-color;
+          color: @primary-color;
         }
       }
     }
@@ -30,7 +30,7 @@
     margin-left: 2rem;
 
     a {
-      color: lighten(@body-font-color, 30%);
+      color: @gray-color;
     }
   }
 }
diff --git a/src/pagination.less b/src/pagination.less
index df41461..cdd2f12 100644
--- a/src/pagination.less
+++ b/src/pagination.less
@@ -12,20 +12,20 @@
 
     a {
       border-radius: @border-radius;
-      color: lighten(@body-font-color, 20%);
+      color: @dark-gray-color;
       display: inline-block;
       padding: .6rem .8rem;
       text-decoration: none;
       &:focus,
       &:hover {
-        color: @core-color;
+        color: @primary-color;
       }
     }
 
     &.active {
       a {
-        background: @core-color;
-        color: @core-light-color;
+        background: @primary-color;
+        color: @light-color;
       }
     }
 
diff --git a/src/parallax.less b/src/parallax.less
new file mode 100644
index 0000000..15f9f5e
--- /dev/null
+++ b/src/parallax.less
@@ -0,0 +1,92 @@
+// Parallax
+@parallax-deg: 3deg;
+
+.parallax {
+  display: block;
+  height: auto;
+  position: relative;
+  width: auto;
+
+  .parallax-content {
+    box-shadow: 0 2.5rem 5rem rgba(0, 0, 0, .45);
+    height: auto;
+    transform: perspective(600px);
+    transform-style: preserve-3d;
+    transition: all .4s ease;
+    width: 100%;
+
+    &::before {
+      content: "";
+      display: block;
+      height: 100%;
+      left: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+    }
+  }
+
+  .parallax-top-left {
+    .parallax-dir();
+    left: 0;
+    top: 0;
+
+    &:hover ~ .parallax-content {
+      transform: perspective(600px) rotateX(@parallax-deg) rotateY(-@parallax-deg);
+
+      &::before {
+        background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%);
+      }
+    }
+  }
+
+  .parallax-top-right {
+    .parallax-dir();
+    right: 0;
+    top: 0;
+
+    &:hover ~ .parallax-content {
+      transform: perspective(600px) rotateX(@parallax-deg) rotateY(@parallax-deg);
+
+      &::before {
+        background: linear-gradient(-135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%);
+      }
+    }
+  }
+
+  .parallax-bottom-left {
+    .parallax-dir();
+    bottom: 0;
+    left: 0;
+
+    &:hover ~ .parallax-content {
+      transform: perspective(600px) rotateX(-@parallax-deg) rotateY(-@parallax-deg);
+
+      &::before {
+        background: linear-gradient(45deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%);
+      }
+    }
+  }
+
+  .parallax-bottom-right {
+    .parallax-dir();
+    bottom: 0;
+    right: 0;
+
+    &:hover ~ .parallax-content {
+      transform: perspective(600px) rotateX(-@parallax-deg) rotateY(@parallax-deg);
+
+      &::before {
+        background: linear-gradient(-45deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%);
+      }
+    }
+  }
+}
+
+.parallax-dir() {
+  //background: rgba(0,0,0,.15);
+  height: 50%;
+  position: absolute;
+  width: 50%;
+  z-index: 99;
+}
diff --git a/src/progress.less b/src/progress.less
index ed45c32..ff0138b 100644
--- a/src/progress.less
+++ b/src/progress.less
@@ -2,10 +2,10 @@
 // Credit: https://css-tricks.com/html5-progress-element/
 .progress {
   appearance: none;
-  background: @core-border-color;
+  background: @border-color;
   border: 0;
   border-radius: @border-radius;
-  color: @core-color;
+  color: @primary-color;
   height: .4rem;
   position: relative;
   width: 100%;
@@ -16,18 +16,18 @@
   }
 
   &::-webkit-progress-value {
-    background: @core-color;
+    background: @primary-color;
     border-radius: @border-radius;
   }
 
   &::-moz-progress-bar {
-    background: @core-color;
+    background: @primary-color;
     border-radius: @border-radius;
   }
 
   &:indeterminate {
     animation: progress-indeterminate 1.5s linear infinite;
-    background: @core-border-color linear-gradient(to right, @core-color 30%, @core-border-color 30%) top left / 150% 150% no-repeat;
+    background: @border-color linear-gradient(to right, @primary-color 30%, @border-color 30%) top left / 150% 150% no-repeat;
 
     &::-moz-progress-bar {
       background: transparent;
diff --git a/src/sliders.less b/src/sliders.less
index f2fa26b..7093cab 100644
--- a/src/sliders.less
+++ b/src/sliders.less
@@ -10,7 +10,8 @@
   // Slider Thumb
   &::-webkit-slider-thumb {
     -webkit-appearance: none;
-    background: @core-color;
+    background: @primary-color;
+    border: 0;
     border-radius: 50%;
     height: 1.2rem;
     margin-top: -.4rem;
@@ -18,7 +19,7 @@
     width: 1.2rem;
   }
   &::-moz-range-thumb {
-    background: @core-color;
+    background: @primary-color;
     border: 0;
     border-radius: 50%;
     height: 1.2rem;
@@ -26,7 +27,7 @@
     width: 1.2rem;
   }
   &::-ms-thumb {
-    background: @core-color;
+    background: @primary-color;
     border: 0;
     border-radius: 50%;
     height: 1.2rem;
@@ -48,24 +49,24 @@
 
   // Slider Track
   &::-webkit-slider-runnable-track {
-    background: @core-border-color;
+    background: @border-color;
     border-radius: @border-radius;
     height: .4rem;
     width: 100%;
   }
   &::-moz-range-track {
-    background: @core-border-color;
+    background: @border-color;
     border-radius: @border-radius;
     height: .4rem;
     width: 100%;
   }
   &::-ms-track {
-    background: @core-border-color;
+    background: @border-color;
     border-radius: @border-radius;
     height: .4rem;
     width: 100%;
   }
   &::-ms-fill-lower {
-    background: @core-color;
+    background: @primary-color;
   }
 }
diff --git a/src/steps.less b/src/steps.less
index ded6ae4..f9d6fc1 100644
--- a/src/steps.less
+++ b/src/steps.less
@@ -14,7 +14,7 @@
     position: relative;
 
     &:not(:first-child)::before {
-      background: @core-color;
+      background: @primary-color;
       content: "";
       height: .2rem;
       left: -50%;
@@ -24,14 +24,14 @@
     }
 
     a {
-      color: @core-meta-color;
+      color: @gray-color;
       display: inline-block;
       padding: 2rem 1rem 0;
       text-decoration: none;
 
       &::before {
-        background: @core-color;
-        border: .2rem solid @core-light-color;
+        background: @primary-color;
+        border: .2rem solid @light-color;
         border-radius: 50%;
         content: "";
         display: block;
@@ -48,20 +48,20 @@
     &.active {
       a {
         &::before {
-          background: @core-light-color;
-          border: .2rem solid @core-color;
+          background: @light-color;
+          border: .2rem solid @primary-color;
         }
       }
 
       & ~ .step-item {
         &::before {
-          background: @core-border-color;
+          background: @border-color;
         }
 
         a {
 
           &::before {
-            background: @control-color;
+            background: @light-gray-color;
           }
         }
       }
diff --git a/src/tables.less b/src/tables.less
index 60b33d9..dfdd03c 100644
--- a/src/tables.less
+++ b/src/tables.less
@@ -8,7 +8,7 @@
   &.table-striped {
     tbody {
       tr:nth-of-type(odd) {
-        background: @core-bg-color;
+        background: @bg-color;
       }
     }
   }
@@ -16,7 +16,7 @@
     tbody {
       tr {
         &:hover {
-          background: darken(@core-bg-color, 3%);
+          background: @dark-bg-color;
         }
       }
     }
@@ -26,17 +26,19 @@
     tbody {
       tr {
         &.active {
-          background: darken(@core-bg-color, 3%);
+          background: @dark-bg-color;
         }
       }
     }
   }
-  th,
+
   td {
-    border-bottom: .1rem solid @core-border-color;
+    border-bottom: .1rem solid @border-color;
     padding: 1.5rem 1rem;
   }
+  
   th {
-    border-color: darken(@core-border-color, 5%);
+    border-bottom: .2rem solid @dark-color;
+    padding: 1.5rem 1rem;
   }
 }
diff --git a/src/tabs.less b/src/tabs.less
index cb172f4..6bcc58c 100644
--- a/src/tabs.less
+++ b/src/tabs.less
@@ -1,7 +1,7 @@
 // Tabs
 .tab {
   align-items: center;
-  border-bottom: .1rem solid @core-border-color;
+  border-bottom: .1rem solid @border-color;
   display: flex;
   flex-wrap: wrap;
 
@@ -23,13 +23,13 @@
       text-decoration: none;
       &:focus,
       &:hover {
-        color: @core-link-color;
+        color: @link-color;
       }
     }
     &.active a,
     a.active {
-      border-bottom-color: @core-color;
-      color: @core-link-color;
+      border-bottom-color: @primary-color;
+      color: @link-color;
     }
   }
 
diff --git a/src/tiles.less b/src/tiles.less
index 37b157b..e43fd6b 100644
--- a/src/tiles.less
+++ b/src/tiles.less
@@ -6,7 +6,8 @@
   margin: 0;
   padding: .5rem 0;
 
-  .tile-icon {
+  .tile-icon,
+  .tile-action {
     flex: 0 0 auto;
   }
   .tile-content {
@@ -18,16 +19,12 @@
       padding-right: 1rem;
     }
   }
-  .tile-action {
-    flex: 0 0 auto;
-  }
   .tile-title {
     font-size: 1.6rem;
     font-weight: 500;
   }
   .tile-meta {
-    color: @core-meta-color;
-    font-size: 1.3rem;
+    color: @gray-color;
   }
 
   &.tile-centered {
@@ -36,5 +33,10 @@
     .tile-content {
       overflow: hidden;
     }
+
+    .tile-title,
+    .tile-meta {
+      .text-ellipsis;
+    }
   }
 }
diff --git a/src/toasts.less b/src/toasts.less
index 929edaa..1936b0e 100644
--- a/src/toasts.less
+++ b/src/toasts.less
@@ -1,15 +1,15 @@
 // Toasts
 .toast {
-  border: .1rem solid @core-dark-color;
+  border: .1rem solid @dark-color;
   border-radius: @border-radius;
-  color: @core-light-color;
+  color: @light-color;
   display: block;
   padding: 1.4rem;
-  .toast-variant(@core-dark-color);
+  .toast-variant(@dark-color);
   width: 100%;
 
   &.toast-primary {
-    .toast-variant(@core-color);
+    .toast-variant(@primary-color);
   }
 
   &.toast-success {
@@ -21,7 +21,7 @@
   }
 
   a {
-    color: @core-light-color;
+    color: @light-color;
     text-decoration: underline;
 
     &:hover,
diff --git a/src/tooltips.less b/src/tooltips.less
index f9cadb4..2881e2a 100644
--- a/src/tooltips.less
+++ b/src/tooltips.less
@@ -2,10 +2,10 @@
 .tooltip {
   position: relative;
   &::after {
-    background: fade(@core-dark-color, 90%);
+    background: fade(@dark-color, 90%);
     border-radius: @border-radius;
     bottom: 100%;
-    color: @core-light-color;
+    color: @light-color;
     content: attr(data-tooltip);
     display: block;
     font-size: 1.2rem;
diff --git a/src/typography.less b/src/typography.less
index af247f0..73165d6 100644
--- a/src/typography.less
+++ b/src/typography.less
@@ -31,7 +31,7 @@ h6 {
 }
 p {
   line-height: 2.4rem;
-  margin: 0 0 1em;
+  margin: 0 0 1rem;
 }
 a,
 ins,
@@ -39,7 +39,7 @@ u {
   text-decoration-skip: ink edges;
 }
 blockquote {
-  border-left: .2rem solid #ddd;
+  border-left: .2rem solid @border-color;
   margin-left: 0;
   padding: 1rem 2rem;
 
@@ -48,7 +48,7 @@ blockquote {
   }
 
   cite {
-    color: lighten(@body-font-color, 50%);
+    color: @gray-color;
   }
 }
 ul,
@@ -88,12 +88,12 @@ dl {
   }
 }
 mark {
-  background: lighten(@control-color-warning, 35%);
+  background: @highlight-color;
   .label-base();
 }
 kbd {
-  background: @core-dark-color;
-  color: @core-light-color;
+  background: @dark-color;
+  color: @light-color;
   .label-base();
 }
 abbr[title] {
diff --git a/src/utilities.less b/src/utilities.less
index 336a210..fe98dd6 100644
--- a/src/utilities.less
+++ b/src/utilities.less
@@ -1,8 +1,8 @@
 // Divider
 .divider {
-  border-bottom: .1rem solid @core-border-color;
+  border-bottom: .1rem solid @border-color;
   display: block;
-  margin: .5rem 0;
+  margin: .8rem 0;
 }
 
 // Loading
@@ -13,7 +13,7 @@
   position: relative;
   &::after {
     animation: loading 500ms infinite linear;
-    border: .2rem solid @core-color;
+    border: .2rem solid @primary-color;
     border-radius: .8rem;
     border-right-color: transparent;
     border-top-color: transparent;
diff --git a/src/variables.less b/src/variables.less
index c086a53..52da248 100644
--- a/src/variables.less
+++ b/src/variables.less
@@ -19,21 +19,30 @@
 @control-min-width: 18rem;
 @border-radius: .2rem;
 
-// Colors
-@core-color: #5764c6;
-@core-secondary-color: lighten(@core-color, 40%);
-@core-dark-color: #333;
-@core-grey-color: #666;
-@core-light-color: #fff;
-@core-meta-color: #888;
-@core-link-color: #5764c6;
-@core-border-color: #efefef;
-@core-bg-color: #f8f8f8;
-@control-color: #c5c5c5;
+// Core colors
+@primary-color: #5764c6;
+@dark-primary-color: darken(@primary-color, 5%);
+@light-primary-color: lighten(@primary-color, 42%);
+@dark-color: #333;
+@dark-gray-color: #666;
+@gray-color: #999;
+@light-gray-color: #ccc;
+@light-color: #fff;
+@link-color: @primary-color;
+@dark-link-color: darken(@link-color, 10%);
+@border-color: #efefef;
+@bg-color: #f8f8f8;
+@dark-bg-color: darken(@bg-color, 3%);
+@light-bg-color: #fff;
+
+// Control colors
 @control-color-success: #32b643;
 @control-color-warning: #ffb700;
 @control-color-danger: #e85600;
+
+// Meta colors
 @code-color: #e06870;
+@highlight-color: #ffe9b3;
 
 // Responsive breakpoints
 @size-xs: 480px;
@@ -41,3 +50,4 @@
 @size-md: 840px;
 @size-lg: 960px;
 @size-xl: 1280px;
+@size-2x: 1440px;