Merge branch 'master' into gh-pages

19 files changed, 750 insertions, 86 deletions

diff --git a/src/avatars.less b/src/avatars.less
new file mode 100644
index 0000000..fc9ce12
--- /dev/null
+++ b/src/avatars.less
@@ -0,0 +1,67 @@
+// Avatars
+.avatar {
+  display: inline-block;
+  width: 3.2rem;
+  height: 3.2rem;
+  font-size: 1.4rem;
+  font-weight: 300;
+  line-height: 1;
+  border-radius: 50%;
+  vertical-align: middle;
+  position: relative;
+  overflow: hidden;
+
+  &::after {
+    content: attr(data-initial);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    color: #fff;
+    transform: translate(-50%, -50%);
+  }
+
+  &.avatar-xs {
+    width: 1.6rem;
+    height: 1.6rem;
+    font-size: .8rem;
+  }
+  &.avatar-sm {
+    width: 2.4rem;
+    height: 2.4rem;
+    font-size: 1rem;
+  }
+  &.avatar-lg {
+    width: 4.8rem;
+    height: 4.8rem;
+    font-size: 2rem;
+  }
+  &.avatar-xl {
+    width: 6.4rem;
+    height: 6.4rem;
+    font-size: 2.6rem;
+  }
+}
+.avatar-container {
+  display: inline-block;
+  position: relative;
+
+  .avatar-icon {
+    width: 46%;
+    height: 46%;
+    padding: 3%;
+    background-color: #fff;
+    position: absolute;
+    right: -6%;
+    bottom: -6%;
+  }
+}
+.avatar-status {
+  &::after {
+    content: '';
+    display: block;
+    width: 1rem;
+    height: 1rem;
+    border-radius: 50%;
+    background-color: @control-color-success;
+  }
+}
\ No newline at end of file
diff --git a/src/badges.less b/src/badges.less
new file mode 100644
index 0000000..e0f1d46
--- /dev/null
+++ b/src/badges.less
@@ -0,0 +1,25 @@
+// Badges
+.badge {
+  position: relative;
+  margin-right: 2.4rem;
+
+  &::after {
+    content: attr(data-badge);
+    color: #fff;
+    font-size: 1.2rem;
+    text-align: center;
+    line-height: 1.4rem;
+    background-color: @core-color;
+    display: block;
+    width: 2rem;
+    height: 2rem;
+    padding: .3rem .1rem;
+    border-radius: 50%;
+    position: absolute;
+    top: -1rem;
+    right: -2.4rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
\ No newline at end of file
diff --git a/src/base.less b/src/base.less
index 1590e8e..8090c55 100644
--- a/src/base.less
+++ b/src/base.less
@@ -16,3 +16,26 @@ body {
   font-size: @body-font-size;
   background-color: @body-bg;
 }
+a {
+  color: @core-link-color;
+  text-decoration: underline;
+
+  &:hover,
+  &:focus {
+    color: darken(@core-link-color, 25%);
+  }
+}
+
+
+// Icons
+.btn,
+button,
+.toast,
+.menu {
+  .icon {
+    margin-right: .2rem;
+    font-size: 1.3333em;
+    line-height: 0.8em;
+    vertical-align: -20%;
+  }
+}
\ No newline at end of file
diff --git a/src/buttons.less b/src/buttons.less
index e04aaa9..ef95627 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -61,13 +61,13 @@ button {
   // Button Primary
   &.btn-primary {
     color: #fff;
-    border-color: @core-color;
+    border-color: darken(@core-color, 5%);
     background-color: @core-color;
 
     &:hover,
     &:focus {
       color: #fff;
-      border-color: darken(@core-color, 5%);
+      border-color: darken(@core-color, 10%);
       background-color: darken(@core-color, 5%);
     }
     &:active,
@@ -135,11 +135,12 @@ button {
     border: 0;
     border-radius: .7rem;
     vertical-align: top;
-    background-color: rgba(0, 0, 0, .15);
+    background-color: transparent;
+    opacity: .35;
     transform: rotate(-45deg);
 
     &:hover {
-      background-color: rgba(0, 0, 0, .35);
+      opacity: .75;
     }
 
     &::before,
@@ -149,23 +150,46 @@ button {
       position: absolute;
       top: 50%;
       left: 50%;
-      background-color: #fff;
+      background-color: #333;
     }
 
     &::before {
-      width: .8rem;
+      width: 1rem;
       height: .2rem;
-      margin-left: -.4rem;
+      margin-left: -.5rem;
       margin-top: -.1rem;
     }
     &::after {
       width: .2rem;
-      height: .8rem;
+      height: 1rem;
       margin-left: -.1rem;
-      margin-top: -.4rem;
+      margin-top: -.5rem;
     }
   }
+}
+
+.btn-group {
+  display: inline-block;
+  vertical-align: middle;
+  .clearfix();
+
+  .btn {
+    float: left;
 
-  // TODO: Button with icons
-  // TODO: Button groups
+    &:first-child:not(:last-child) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    &:not(:first-child):not(:last-child) {
+      margin-left: -.1rem;
+      border-radius: 0;
+      z-index: 49;
+    }
+    &:last-child:not(:first-child) {
+      margin-left: -.1rem;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      z-index: 99;
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/chips.less b/src/chips.less
new file mode 100644
index 0000000..b5a667d
--- /dev/null
+++ b/src/chips.less
@@ -0,0 +1,20 @@
+// Chips
+.chip {
+  display: inline-flex;
+  padding: .3rem .6rem;
+  border-radius: .3rem;
+  font-size: 1.2rem;
+  vertical-align: middle;
+  align-items: center;
+  background-color: @core-border-color;
+  border: 1px solid darken(@core-border-color, 5%);
+
+  &:hover,
+  &:focus {
+    background-color: darken(@core-border-color, 2%);
+  }
+
+  .chip-name {
+    margin-left: .4rem;
+  }
+}
\ No newline at end of file
diff --git a/src/fileicons.less b/src/fileicons.less
new file mode 100644
index 0000000..b7eef61
--- /dev/null
+++ b/src/fileicons.less
@@ -0,0 +1,111 @@
+// File icons
+.file-icon {
+  display: inline-block;
+  width: 2.4rem;
+  height: 3.2rem;
+  background-color: transparent;
+  position: relative;
+  border-width: 0 0 2.2rem 1.4rem;
+  border-style: solid;
+  border-color: @control-color;
+  border-radius: .2rem;
+  text-align: left;
+  zoom: 1;
+
+  &::before,
+  &::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    content: '';
+    width: 1rem;
+    height: 1rem;
+    border: .5rem solid @control-color;
+    border-right-color: transparent;
+    border-top-color: transparent;
+    background-color: transparent;
+    z-index: 2;
+  }
+  &::after {
+    content: attr(data-type);
+    border-color: rgba(255, 255, 255, .5);
+    border-bottom-left-radius: .2rem;
+    color: #fff;
+    font-size: 1rem;
+    text-indent: -1.6rem;
+    line-height: 3.6rem;
+    z-index: 3;
+  }
+
+  &.file-icon-xs {
+    width: 1.2rem;
+    height: 1.6rem;
+    border-width: 0 0 1.2rem .8rem;
+
+    &::before,
+    &::after {
+      width: .4rem;
+      height: .4rem;
+      border-width: .2rem;
+    }
+    &::after {
+      text-indent: -.8rem;
+      line-height: 1.6rem;
+      font-size: .8rem;
+      border-radius: .1rem;
+      content: '--';
+    }
+  }
+  &.file-icon-sm {
+    width: 1.8rem;
+    height: 2.4rem;
+    border-width: 0 0 1.6rem 1rem;
+
+    &::before,
+    &::after {
+      width: .8rem;
+      height: .8rem;
+      border-width: .4rem;
+    }
+    &::after {
+      text-indent: -1.2rem;
+      line-height: 2.6rem;
+      font-size: .8rem;
+    }
+  }
+  &.file-icon-lg {
+    width: 3.6rem;
+    height: 4.8rem;
+    border-width: 0 0 3.4rem 2.2rem;
+
+    &::before,
+    &::after {
+      width: 1.4rem;
+      height: 1.4rem;
+      border-width: .7rem;
+    }
+    &::after {
+      text-indent: -2.6rem;
+      line-height: 6.2rem;
+      font-size: 1.2rem;
+    }
+  }
+  &.file-icon-xl {
+    width: 4.8rem;
+    height: 6.4rem;
+    border-width: 0 0 4.6rem 3rem;
+    border-radius: .3rem;
+
+    &::before,
+    &::after {
+      width: 1.8rem;
+      height: 1.8rem;
+      border-width: .9rem;
+    }
+    &::after {
+      text-indent: -3.4rem;
+      line-height: 8.8rem;
+      font-size: 1.4rem;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/forms.less b/src/forms.less
index afaf1d8..eaab29d 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -2,6 +2,31 @@
 .form-group:not(:last-child) {
   margin-bottom: 1rem;
 }
+.form-horizontal {
+  padding: 1rem;
+
+  .col-12,
+  .col-11,
+  .col-10,
+  .col-9,
+  .col-8,
+  .col-7,
+  .col-6,
+  .col-5,
+  .col-4,
+  .col-3,
+  .col-2,
+  .col-1 {
+    float: left;
+  }
+  .form-label {
+    padding: .8rem .4rem;
+  }
+  .form-checkbox,
+  .form-radio {
+    margin: .5rem 0;
+  }
+}
 // Form element: Input boxes
 .form-input {
   position: relative;
@@ -12,7 +37,7 @@
   background-color: #fff;
   background-image: none;
   border: .1rem solid @control-color;
-  border-radius: 3px;
+  border-radius: .3rem;
   color: @body-font-color;
   font-size: 1.4rem;
   line-height: 1.6rem;
@@ -33,7 +58,7 @@
   // Input Small
   &.input-sm {
     height: 2.4rem;
-    border-radius: 2px;
+    border-radius: .2rem;
     font-size: 1.2rem;
     line-height: 1.4rem;
     padding: .4rem .6rem;
@@ -42,8 +67,8 @@
   // Input Large
   &.input-lg {
     height: 4.2rem;
-    border-radius: 4px;
-    font-size: 1.8rem;
+    border-radius: .4rem;
+    font-size: 1.6rem;
     line-height: 2rem;
     padding: 1rem 1.2rem;
   }
@@ -61,11 +86,11 @@
 
   // Status
   .has-success &,
-  &.input-success {
+  &.is-success {
     border-color: @control-color-success;
   }
   .has-danger &,
-  &.input-danger {
+  &.is-danger {
     border-color: @control-color-danger;
   }
 
@@ -75,6 +100,7 @@
 .form-label {
   display: block;
   margin-bottom: .5rem;
+  line-height: 1.6rem;
 }
 // Form element: Select
 .form-select {
@@ -85,7 +111,7 @@
     line-height: 1.6rem;
     padding: .7rem .8rem;
     border: .1rem solid @control-color;
-    border-radius: 3px;
+    border-radius: .3rem;
     outline: 0;
   }
 
@@ -96,7 +122,7 @@
   // Select Small
   &.select-sm {
     height: 2.4rem;
-    border-radius: 2px;
+    border-radius: .2rem;
     font-size: 1.2rem;
     line-height: 1.4rem;
     padding: .4rem .6rem;
@@ -107,39 +133,38 @@
 .form-checkbox,
 .form-radio {
   line-height: 1.8rem;
-  padding: .3rem 1.8rem .3rem 1.8rem;
+  padding: .3rem 1.8rem;
   cursor: pointer;
   display: inline-block;
   position: relative;
-}
-.form-checkbox input,
-.form-radio input {
-  font-size: 14px;
-  line-height: 24px;
-  vertical-align: top;
-  border: .1rem solid @control-color;
-  float: left;
-  display: inline-block;
-  width: 1.4rem;
-  height: 1.4rem;
-  padding: 0;
-  position: absolute;
-  top: .5rem;
-  left: 0;
-  cursor: pointer;
-  outline: none;
-  -webkit-appearance: none;
 
-  &:hover {
-    border-color: darken(@control-color, 15%);
-  }
-  &:checked {
-    background-color: @core-color;
-    border-color: @core-color;
+  input {
+    font-size: 1.4rem;
+    line-height: 2.4rem;
+    vertical-align: top;
+    border: .1rem solid @control-color;
+    display: inline-block;
+    width: 1.4rem;
+    height: 1.4rem;
+    padding: 0;
+    position: absolute;
+    top: .5rem;
+    left: 0;
+    cursor: pointer;
+    outline: none;
+    -webkit-appearance: none;
+
+    &:hover {
+      border-color: darken(@control-color, 15%);
+    }
+    &:checked {
+      background-color: @core-color;
+      border-color: @core-color;
+    }
   }
 }
 .form-checkbox input {
-  border-radius: 2px;
+  border-radius: .2rem;
 
   &:checked {
     &::after {
@@ -175,4 +200,87 @@
       background-color: #fff;
     }
   }
-}
\ No newline at end of file
+}
+// Form element: Switch
+.form-switch {
+  line-height: 1.8rem;
+  padding: .3rem 1.8rem .3rem 3.4rem;
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+
+  input {
+    line-height: 2.4rem;
+    vertical-align: top;
+    border: .1rem solid @control-color;
+    background-color: @control-color;
+    display: inline-block;
+    width: 3rem;
+    height: 1.8rem;
+    padding: 0;
+    border-radius: .9rem;
+    position: absolute;
+    top: .3rem;
+    left: 0;
+    cursor: pointer;
+    outline: none;
+    -webkit-appearance: none;
+
+    &::after {
+      content: "";
+      display: block;
+      width: 1.6rem;
+      height: 1.6rem;
+      border-radius: .8rem;
+      position: absolute;
+      top: 0;
+      left: 0;
+      background-color: #fff;
+      transition: left .15s ease;
+    }
+
+    &:checked {
+      background-color: @core-color;
+      border-color: @core-color;
+
+      &::after {
+        left: 1.2rem;
+        background-color: #fff;
+      }
+    }
+  }
+}
+
+// Form element: Input groups
+.input-group {
+  display: flex;
+
+  .input-group-addon {
+    line-height: 1.6rem;
+    padding: .7rem .8rem;
+    border: 1px solid @control-color;
+    border-radius: .3rem;
+    background-color: @core-border-color;
+  }
+
+  .form-input,
+  .input-group-addon,
+  .input-group-btn {
+    &:first-child:not(:last-child) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    &:not(:first-child):not(:last-child) {
+      margin-left: -.1rem;
+      border-radius: 0;
+      z-index: 49;
+    }
+    &:last-child:not(:first-child) {
+      margin-left: -.1rem;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      z-index: 99;
+    }
+  }
+}
+
diff --git a/src/labels.less b/src/labels.less
index 0764dd4..ac11630 100644
--- a/src/labels.less
+++ b/src/labels.less
@@ -1,16 +1,16 @@
 // Labels
 .label {
   display: inline-block;
-  padding: .2rem .5rem;
-  font-size: 1.2rem;
-  line-height: 1.4rem;
+  padding: .3rem .5rem;
+  font-size: 80%;
+  line-height: 1;
   color: #666;
   background-color: @core-border-color;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
-  margin: -.2rem .5rem 0 0;
-  border-radius: 2px;
+  margin: -.3rem .5rem 0 .5rem;
+  border-radius: .2rem;
 
   &.label-primary {
     color: #fff;
@@ -20,8 +20,12 @@
     color: #fff;
     background-color: @control-color-success;
   }
+  &.label-info {
+    color: #fff;
+    background-color: @control-color-info;
+  }
   &.label-warning {
-    color: darken(@control-color-warning, 35%);
+    color: #fff;
     background-color: @control-color-warning;
   }
   &.label-danger {
@@ -30,8 +34,8 @@
   }
 
   &.label-lg {
+    font-size: 100%;
+    line-height: 1.2;
     padding: .3rem .8rem;
-    font-size: 1.4rem;
-    line-height: 1.6rem;
   }
 }
\ No newline at end of file
diff --git a/src/layout.less b/src/layout.less
index 769fd25..b101ca0 100644
--- a/src/layout.less
+++ b/src/layout.less
@@ -3,26 +3,26 @@
   width: 100%;
   margin-left: auto;
   margin-right: auto;
-  padding-left: 10px;
-  padding-right: 10px;
+  padding-left: 1rem;
+  padding-right: 1rem;
   &:extend(.clearfix all);
 }
 @media screen and (min-width: 961px) {
   .container {
     &.grid-960 {
-      width: 960px;
+      width: 96rem;
     }
   }
 }
 
 .columns {
-  margin-left: -10px;
-  margin-right: -10px;
+  margin-left: -1rem;
+  margin-right: -1rem;
   &:extend(.clearfix all);
 }
 .column {
   flex: 1;
-  padding: 10px;
+  padding: 1rem;
 }
 @media screen and (min-width: 769px) {
   .columns {
diff --git a/src/media.less b/src/media.less
new file mode 100644
index 0000000..5d24648
--- /dev/null
+++ b/src/media.less
@@ -0,0 +1,6 @@
+// Media
+.img-responsive {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
\ No newline at end of file
diff --git a/src/menus.less b/src/menus.less
new file mode 100644
index 0000000..7b148c9
--- /dev/null
+++ b/src/menus.less
@@ -0,0 +1,76 @@
+// Menus
+.menu {
+  display: block;
+  width: auto;
+  text-align: left;
+  margin: 0;
+  padding: 1rem;
+  border-radius: .3rem;
+  background-color: #fff;
+  z-index: 999;
+  .shadow;
+
+  .menu-item {
+    display: block;
+    padding: .2rem 1rem;
+    margin-top: 0;
+    border-radius: .3rem;
+    color: @body-font-color;
+    line-height: 2.4rem;
+    text-decoration: none;
+    user-select: none;
+
+    a {
+      display: block;
+      margin: -.2rem -1rem;
+      padding: .2rem 1rem;
+      border-radius: .3rem;
+      color: inherit;
+      text-decoration: none;
+
+      &:hover,
+      &:focus {
+        background-color: lighten(@core-border-color, 2%);
+      }
+      &:active,
+      &.active {
+        background-color: @core-border-color;
+      }
+    }
+  }
+
+  .menu-header {
+    display: block;
+    padding: .2rem 1rem;
+    margin-top: 0;
+    font-size: 1.2rem;
+    line-height: 1.8rem;
+    color: lighten(@body-font-color, 60%);
+
+    .menu-header-text {
+      display: inline-block;
+      padding: 0 .6rem;
+      margin-left: -.6rem;
+      background-color: #fff;
+      position: relative;
+      z-index: 99;
+    }
+
+    &:after {
+      content: "";
+      display: block;
+      width: 100%;
+      height: .1rem;
+      transform: translateY(-1rem);
+      border-bottom: .1rem solid @core-border-color;
+    }
+  }
+
+  .divider {
+    display: block;
+    border-bottom: .1rem solid @core-border-color;
+    margin: .5rem;
+  }
+}
+
+// TODO: Menus with icons
diff --git a/src/modals.less b/src/modals.less
new file mode 100644
index 0000000..b51f5ca
--- /dev/null
+++ b/src/modals.less
@@ -0,0 +1,32 @@
+// Modals
+.modal {
+  display: block;
+  width: 50vw;
+  text-align: left;
+  margin: 0;
+  padding: 0;
+  border-radius: .3rem;
+  background-color: #fff;
+  z-index: 999;
+  .shadow;
+  .centered;
+
+  .modal-header {
+    padding: 1.5rem;
+    border-bottom: 1px solid @core-border-color;
+
+    .modal-title {
+      margin: 0;
+    }
+  }
+  .modal-body {
+    position: relative;
+    padding: 1.5rem;
+    max-height: 50vh;
+    overflow-y: auto;
+  }
+  .modal-footer {
+    padding: 1.5rem;
+    text-align: right;
+  }
+}
\ No newline at end of file
diff --git a/src/navigation.less b/src/navigation.less
new file mode 100644
index 0000000..2e0436f
--- /dev/null
+++ b/src/navigation.less
@@ -0,0 +1,81 @@
+// Navigation
+// Breadcrumb
+.breadcrumb {
+  list-style: none;
+  margin: .5rem 0;
+  padding: 1.2rem;
+
+  li {
+    display: inline-block;
+    margin: 0;
+
+    a {
+      text-decoration: none;
+    }
+
+    &:last-child {
+      &,
+      a {
+        color: lighten(@body-font-color, 20%);
+        pointer-events: none;
+      }
+    }
+
+    &:not(:last-child) {
+      &::after {
+        content: "/";
+        padding: 0 .4rem;
+        color: @control-color;
+      }
+    }
+  }
+}
+// Tabs
+.tab {
+  display: block;
+  list-style: none;
+  margin: .5rem 0;
+  border-bottom: .1rem solid @control-color;
+  .clearfix();
+
+  .tab-item {
+    float: left;
+    border-bottom: .1rem solid transparent;
+    margin-bottom: -.1rem;
+
+    a {
+      display: block;
+      padding: .5rem 1.5rem;
+      color: @body-font-color;
+      text-decoration: none;
+    }
+
+    &:hover,
+    &:focus {
+      border-bottom-color: @core-color;
+
+      a {
+        color: @core-color;
+      }
+    }
+    &.active {
+      border-bottom-color: darken(@core-color, 10%);
+
+      a {
+        color: darken(@core-color, 10%);
+      }
+    }
+  }
+
+  &.tab-block {
+    display: flex;
+
+    .tab-item {
+      float: none;
+      flex: 1;
+      text-align: center;
+    }
+  }
+}
+
+// TODO: Tabs with icons
diff --git a/src/tables.less b/src/tables.less
index 0fb0b4f..920f488 100644
--- a/src/tables.less
+++ b/src/tables.less
@@ -7,16 +7,13 @@ table {
     text-align: left;
     padding: 1.5rem 1rem;
     border-bottom: .1rem solid @core-border-color;
-    background-color: #fff;
   }
   th {
-    border-color: darken(@core-border-color, 10%);
+    border-color: darken(@core-border-color, 15%);
   }
-  tr.selected {
-    th,
-    td {
-      background-color: lighten(@core-border-color, 2%);
+  tr {
+    &.selected {
+        background-color: lighten(@core-border-color, 2%);
     }
-
   }
 }
\ No newline at end of file
diff --git a/src/toasts.less b/src/toasts.less
index 2c0f5e3..9792e50 100644
--- a/src/toasts.less
+++ b/src/toasts.less
@@ -5,7 +5,7 @@
   padding: 1.4rem;
   color: #666;
   border: .1rem solid darken(@core-border-color, 2%);
-  border-radius: 3px;
+  border-radius: .3rem;
   background-color: @core-border-color;
 
   &.toast-primary {
@@ -19,8 +19,13 @@
     background-color: @control-color-success;
     border-color: darken(@control-color-success, 2%);
   }
+  &.toast-info {
+    color: #fff;
+    background-color: @control-color-info;
+    border-color: darken(@control-color-info, 2%);
+  }
   &.toast-warning {
-    color: darken(@control-color-warning, 35%);
+    color: #fff;
     background-color: @control-color-warning;
     border-color: darken(@control-color-warning, 2%);
   }
diff --git a/src/tooltips.less b/src/tooltips.less
new file mode 100644
index 0000000..4d0f680
--- /dev/null
+++ b/src/tooltips.less
@@ -0,0 +1,70 @@
+// Tooltips
+.tooltip {
+  position: relative;
+
+  &::after {
+    content: attr(data-tooltip);
+    display: block;
+    max-width: 32rem;
+    padding: .6rem 1rem;
+    border-radius: .3rem;
+    background-color: fade(#333, 90%);
+    opacity: 0;
+    color: #fff;
+    font-size: 1.2rem;
+    line-height: 1.6rem;
+    text-overflow: ellipsis;
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translate(-50%, 0);
+    overflow: hidden;
+    z-index: 99;
+    pointer-events: none;
+    transition: all .216s ease;
+  }
+  &:hover {
+    &::after {
+      opacity: 1;
+      transform: translate(-50%, -.5rem);
+    }
+  }
+
+  &[data-tooltip-pos="right"] {
+    &::after {
+      bottom: 50%;
+      left: 100%;
+      transform: translate(0, 50%);
+    }
+    &:hover {
+      &::after {
+        transform: translate(.5rem, 50%);
+      }
+    }
+  }
+  &[data-tooltip-pos="bottom"] {
+    &::after {
+      top: 100%;
+      bottom: auto;
+      transform: translate(-50%, 0);
+    }
+    &:hover {
+      &::after {
+        transform: translate(-50%, .5rem);
+      }
+    }
+  }
+  &[data-tooltip-pos="left"] {
+    &::after {
+      right: 100%;
+      bottom: 50%;
+      left: auto;
+      transform: translate(0, 50%);
+    }
+    &:hover {
+      &::after {
+        transform: translate(-.5rem, 50%);
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/typography.less b/src/typography.less
index dc7da3d..94a596f 100644
--- a/src/typography.less
+++ b/src/typography.less
@@ -7,6 +7,8 @@ h5,
 h6 {
   font-weight: 300;
   line-height: 1.1;
+  margin-top: 2.5rem;
+  margin-bottom: 1rem;
   color: inherit;
 }
 h1 {
@@ -37,12 +39,16 @@ p {
 }
 blockquote {
   padding: 1rem 2rem;
-  border-left: 2px solid #ddd;
+  border-left: .2rem solid #ddd;
   margin-left: 0;
 
   p:last-child {
     margin-bottom: 0;
   }
+
+  small {
+    color: lighten(@body-font-color, 50%);
+  }
 }
 ul,
 ol {
@@ -72,6 +78,13 @@ ol {
   }
 }
 
+.highlight {
+  padding: .2rem;
+  line-height: 1.6rem;
+  border-radius: .2rem;
+  background-color: #fff5b7;
+}
+
 .text-left {
   text-align: left;
 }
diff --git a/src/utilities.less b/src/utilities.less
index f3b4d89..e925600 100644
--- a/src/utilities.less
+++ b/src/utilities.less
@@ -42,29 +42,29 @@
 }
 
 .mt-10 {
-  margin-top: 10px;
+  margin-top: 1rem;
 }
 .mr-10 {
-  margin-right: 10px;
+  margin-right: 1rem;
 }
 .mb-10 {
-  margin-bottom: 10px;
+  margin-bottom: 1rem;
 }
 .ml-10 {
-  margin-left: 10px;
+  margin-left: 1rem;
 }
 
 .mt-5 {
-  margin-top: 5px;
+  margin-top: .5rem;
 }
 .mr-5 {
-  margin-right: 5px;
+  margin-right: .5rem;
 }
 .mb-5 {
-  margin-bottom: 5px;
+  margin-bottom: .5rem;
 }
 .ml-5 {
-  margin-left: 5px;
+  margin-left: .5rem;
 }
 
 // Display
@@ -86,15 +86,15 @@
 
 // Shadow
 .shadow {
-  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
+  box-shadow: 0 .1rem .4rem rgba(0, 0, 0, .3);
 }
 .light-shadow {
-  box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
+  box-shadow: 0 .1rem .2rem rgba(0, 0, 0, .15);
 }
 
 // Shapes
 .rounded {
-  border-radius: 3px;
+  border-radius: .3rem;
 }
 .circle {
   border-radius: 50%;
diff --git a/src/variables.less b/src/variables.less
index 2c99039..14882ae 100644
--- a/src/variables.less
+++ b/src/variables.less
@@ -3,16 +3,18 @@
 // Global
 @body-bg: #fff;
 @body-font-color: #333;
-@body-font-size: 14px;
+@body-font-size: 1.4rem;
 @body-font-family: "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", WenQuanYi Micro Hei, sans-serif;
 
 // Colors
-@core-color: #5764C6;
+@core-color: #5764c6;
+@core-link-color: #5764c6;
 @core-border-color: #efefef;
 @control-color: #c5c5c5;
-@control-color-success: #00c372;
-@control-color-warning: #fccf42;
-@control-color-danger: #e74c3c;
+@control-color-success: #32b643;
+@control-color-info: #0193eb;
+@control-color-warning: #ffb700;
+@control-color-danger: #e85600;
 
 
 // Mixins