Add: Tiles component and many bugs fixed

14 files changed, 85 insertions, 69 deletions

diff --git a/src/autocomplete.less b/src/autocomplete.less
index a9adc07..8c0950e 100644
--- a/src/autocomplete.less
+++ b/src/autocomplete.less
@@ -15,6 +15,11 @@
     padding: .1rem 0 .1rem .2rem;
     width: 100%;
 
+    &.is-focused {
+      border-color: @core-color;
+      .control-shadow();
+    }
+
     .form-input {
       border-color: transparent;
       box-shadow: none;
diff --git a/src/base.less b/src/base.less
index bdac3e0..a6df04f 100644
--- a/src/base.less
+++ b/src/base.less
@@ -27,6 +27,12 @@ a {
   }
 }
 
+// Focus state
+:focus {
+  .control-shadow();
+  outline: 0;
+}
+
 // Disabled state
 &[disabled],
 .disabled {
diff --git a/src/breadcrumbs.less b/src/breadcrumbs.less
index dc68e13..817e182 100644
--- a/src/breadcrumbs.less
+++ b/src/breadcrumbs.less
@@ -13,7 +13,7 @@
     &:last-child {
       &,
       a {
-        color: lighten(@body-font-color, 30%);
+        color: @core-meta-color;
       }
     }
     &:not(:last-child) {
diff --git a/src/buttons.less b/src/buttons.less
index e97f0b4..591ca79 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -19,8 +19,7 @@
   vertical-align: middle;
   white-space: nowrap;
   &:focus {
-    background: lighten(@core-secondary-color, 1%);
-    .control-shadow();
+    background: lighten(@core-secondary-color, 2%);
   }
   &:hover {
     background: @core-color;
diff --git a/src/cards.less b/src/cards.less
index 1123586..b0fe376 100644
--- a/src/cards.less
+++ b/src/cards.less
@@ -37,15 +37,11 @@
     }
   }
   .card-title {
-    font-size: 1.4em;
+    font-size: 2rem;
     line-height: 1;
-    margin-bottom: .5rem;
-    margin-top: 0;
   }
   .card-meta {
-    color: lighten(@body-font-color, 50%);
-    font-size: 1em;
-    margin-bottom: 0;
-    margin-top: 0;
+    color: @core-meta-color;
+    font-size: 1.3rem;
   }
 }
diff --git a/src/chips.less b/src/chips.less
index 6b48df9..7b02924 100644
--- a/src/chips.less
+++ b/src/chips.less
@@ -1,42 +1,5 @@
 // Chips
 .chip {
-  align-content: space-around;
-  align-items: center;
-  border-radius: @border-radius;
-  display: flex;
-  list-style: none;
-  margin: 0;
-  padding: .5rem 0;
-
-  .chip-icon {
-    flex: 0 0 auto;
-  }
-  .chip-content {
-    flex: 1 1 auto;
-    .text-ellipsis;
-    &:not(:first-child) {
-      padding-left: 1rem;
-    }
-    &:not(:last-child) {
-      padding-right: 1rem;
-    }
-  }
-  .chip-action {
-    flex: 0 0 auto;
-  }
-  .chip-title {
-    font-size: 1.4rem;
-    line-height: 1.6rem;
-  }
-  .chip-meta {
-    color: lighten(@body-font-color, 50%);
-    font-size: 1.2rem;
-    line-height: 1.6rem;
-  }
-}
-
-// Small chips
-.chip-sm {
   align-items: center;
   background: @core-border-color;
   border-radius: @border-radius;
@@ -49,7 +12,7 @@
   text-decoration: none;
   vertical-align: middle;
 
-  &.selected {
+  &.is-selected {
     background: @core-color;
     color: @core-light-color;
   }
diff --git a/src/forms.less b/src/forms.less
index 7e0db4d..0184c8d 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -22,7 +22,6 @@
   width: 100%;
   &:focus {
     border-color: @core-color;
-    .control-shadow();
   }
   &[disabled] {
     background: #eeeff2;
@@ -117,7 +116,6 @@
   }
   &:focus {
     border-color: @core-color;
-    .control-shadow();
   }
   &::-ms-expand {
     display: none;
diff --git a/src/labels.less b/src/labels.less
index 6bdf02c..3894670 100644
--- a/src/labels.less
+++ b/src/labels.less
@@ -16,4 +16,8 @@
   &.label-danger {
     .label-variant(@control-color-danger);
   }
+
+  small& {
+    font-size: 80%;
+  }
 }
diff --git a/src/menus.less b/src/menus.less
index 2b3a8d7..60b2f3b 100644
--- a/src/menus.less
+++ b/src/menus.less
@@ -5,7 +5,7 @@
   display: block;
   margin: 0;
   min-width: @control-min-width;
-  padding: .5rem;
+  padding: .8rem;
   .shadow;
   text-align: left;
   transform: translateY(.5rem);
@@ -15,8 +15,8 @@
     border-radius: @border-radius;
     display: block;
     line-height: 2.4rem;
-    margin-top: .1rem;
-    padding: .2rem .8rem;
+    margin-top: 0;
+    padding: .3rem .8rem;
     text-decoration: none;
     user-select: none;
 
@@ -24,8 +24,8 @@
       border-radius: @border-radius;
       color: inherit;
       display: block;
-      margin: -.2rem -.8rem;
-      padding: .2rem .8rem;
+      margin: -.3rem -.8rem;
+      padding: .3rem .8rem;
       text-decoration: none;
       &:focus,
       &:hover {
@@ -46,6 +46,14 @@
     line-height: 1.8rem;
     margin-top: 0;
     padding: .2rem .8rem;
+    &::after {
+      border-bottom: .1rem solid @core-border-color;
+      content: "";
+      display: block;
+      height: .1rem;
+      transform: translateY(-1rem);
+      width: 100%;
+    }
 
     .menu-header-text {
       background: #fff;
@@ -55,14 +63,5 @@
       position: relative;
       z-index: 99;
     }
-
-    &::after {
-      border-bottom: .1rem solid @core-border-color;
-      content: "";
-      display: block;
-      height: .1rem;
-      transform: translateY(-1rem);
-      width: 100%;
-    }
   }
 }
diff --git a/src/modals.less b/src/modals.less
index 76f365a..ff7e0e1 100644
--- a/src/modals.less
+++ b/src/modals.less
@@ -26,11 +26,13 @@
       right: 0;
       top: 0;
     }
+
     .modal-container {
       animation: slide-down .216s;
     }
   }
 }
+
 .modal-container {
   animation: slide-up .216s;
   background: #fff;
@@ -46,26 +48,30 @@
     padding: 1.5rem;
 
     .modal-title {
-      font-size: 1.5rem;
+      font-size: 1.6rem;
       margin: 0;
     }
   }
+
   .modal-body {
     max-height: 50vh;
     overflow-y: auto;
     padding: 1.5rem;
     position: relative;
   }
+
   .modal-footer {
     padding: 1.5rem;
     text-align: right;
   }
 }
+
 @media screen and (min-width: 640px) {
   .modal-container {
     width: 64rem;
   }
 }
+
 @media screen and (min-width: 320px) {
   .modal-sm {
     .modal-container {
diff --git a/src/tables.less b/src/tables.less
index 58a1a9c..7abce76 100644
--- a/src/tables.less
+++ b/src/tables.less
@@ -23,7 +23,7 @@
   }
   tbody {
     tr {
-      &.selected {
+      &.is-selected {
         background: lighten(@core-border-color, 3%);
       }
     }
diff --git a/src/tiles.less b/src/tiles.less
new file mode 100644
index 0000000..37b157b
--- /dev/null
+++ b/src/tiles.less
@@ -0,0 +1,40 @@
+// Tiles
+.tile {
+  align-content: space-between;
+  align-items: flex-start;
+  display: flex;
+  margin: 0;
+  padding: .5rem 0;
+
+  .tile-icon {
+    flex: 0 0 auto;
+  }
+  .tile-content {
+    flex: 1 1 auto;
+    &:not(:first-child) {
+      padding-left: 1rem;
+    }
+    &:not(:last-child) {
+      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;
+  }
+
+  &.tile-centered {
+    align-items: center;
+
+    .tile-content {
+      overflow: hidden;
+    }
+  }
+}
diff --git a/src/typography.less b/src/typography.less
index 028aed1..e8d0911 100644
--- a/src/typography.less
+++ b/src/typography.less
@@ -9,7 +9,7 @@ h6 {
   font-weight: 300;
   line-height: 1.1;
   margin-bottom: 1.5rem;
-  margin-top: 2.5rem;
+  margin-top: 1rem;
 }
 h1 {
   font-size: 5rem;
@@ -30,7 +30,7 @@ h6 {
   font-size: 1.6rem;
 }
 p {
-  margin: 0 0 1em;
+  margin: 0 0 1rem;
 }
 blockquote {
   border-left: .2rem solid #ddd;
diff --git a/src/variables.less b/src/variables.less
index 112fee2..e460eec 100644
--- a/src/variables.less
+++ b/src/variables.less
@@ -48,7 +48,7 @@
   }
 }
 .control-shadow() {
-  box-shadow: 0 0 .5rem fade(@core-color, 25%);
+  box-shadow: 0 0 0 .2rem fade(@core-color, 15%);
 }
 .control-transition() {
   transition: all .15s ease;