Merge branch 'master' into gh-pages

7 files changed, 102 insertions, 87 deletions

diff --git a/src/buttons.less b/src/buttons.less
index d2fcf7e..0c2a7f3 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -5,7 +5,7 @@
   padding: .7rem 1.5rem;
   border: .1rem solid @core-color;
   background-color: transparent;
-  border-radius: 3px;
+  border-radius: .3rem;
   color: @core-color;
   font-size: 1.4rem;
   line-height: 1.6rem;
@@ -37,19 +37,19 @@
     pointer-events: none;
 
     &::after {
-      border: 2px solid @core-color;
+      border: .2rem solid @core-color;
       border-right-color: transparent;
       border-top-color: transparent;
-      border-radius: 8px;
+      border-radius: .8rem;
       content: "";
       position: absolute;
       left: 50%;
       top: 50%;
-      margin-left: -8px;
-      margin-top: -8px;
+      margin-left: -.8rem;
+      margin-top: -.8rem;
       display: block;
-      width: 16px;
-      height: 16px;
+      width: 1.6rem;
+      height: 1.6rem;
       animation: loading 500ms infinite linear;
     }
   }
@@ -107,7 +107,7 @@
   // Button Small
   &.btn-sm {
     height: 2.4rem;
-    border-radius: 2px;
+    border-radius: .2rem;
     font-size: 1.2rem;
     line-height: 1.4rem;
     padding: .4rem 1rem;
@@ -116,7 +116,7 @@
   // Button Large
   &.btn-lg {
     height: 4.2rem;
-    border-radius: 4px;
+    border-radius: .4rem;
     font-size: 1.8rem;
     line-height: 2rem;
     padding: 1rem 1.8rem;
@@ -171,61 +171,33 @@
 }
 
 // Button groups
-@media screen and (min-width: 481px) {
-  .btn-group {
-    display: inline-flex;
-    flex-wrap: wrap;
+.btn-group {
+  display: inline-flex;
+  flex-wrap: wrap;
 
-    .btn {
-      flex: 1 0 auto;
+  .btn {
+    flex: 1 0 auto;
 
-      &: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;
-      }
-      &:last-child:not(:first-child) {
-        margin-left: -.1rem;
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-      }
-      &:hover,
-      &:focus {
-        z-index: 99;
-      }
+    &:first-child:not(:last-child) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
     }
-
-    &.btn-group-block {
-      display: flex;
+    &:not(:first-child):not(:last-child) {
+      margin-left: -.1rem;
+      border-radius: 0;
+    }
+    &:last-child:not(:first-child) {
+      margin-left: -.1rem;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+    &:hover,
+    &:focus {
+      z-index: 99;
     }
   }
-}
-// Responsive button groups
-@media screen and (max-width: 480px) {
-  .btn-group {
-    display: flex;
-    flex-wrap: wrap;
 
-    .btn {
-      flex: 1 0 100%;
-
-      &:first-child:not(:last-child) {
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-      }
-      &:not(:first-child):not(:last-child) {
-        margin-top: -.1rem;
-        border-radius: 0;
-      }
-      &:last-child:not(:first-child) {
-        margin-top: -.1rem;
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-      }
-    }
+  &.btn-group-block {
+    display: flex;
   }
 }
-
diff --git a/src/chips.less b/src/chips.less
index 6a1ebe8..53a2723 100644
--- a/src/chips.less
+++ b/src/chips.less
@@ -7,7 +7,7 @@
   vertical-align: middle;
   align-items: center;
   background-color: @core-border-color;
-  border: 1px solid darken(@core-border-color, 5%);
+  border: .1rem solid darken(@core-border-color, 5%);
 
   &:hover,
   &:focus {
@@ -17,6 +17,11 @@
   .chip-name {
     margin-left: .4rem;
   }
+  .avatar {
+    width: 1.6rem;
+    height: 1.6rem;
+    font-size: .8rem;
+  }
 }
 
 // TODO: Chip contacts and files
\ No newline at end of file
diff --git a/src/forms.less b/src/forms.less
index ef6419a..a1b3b65 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -266,7 +266,7 @@
   .input-group-addon {
     line-height: 1.6rem;
     padding: .7rem .8rem;
-    border: 1px solid @control-color;
+    border: .1rem solid @control-color;
     border-radius: .3rem;
     background-color: @core-border-color;
   }
diff --git a/src/layout.less b/src/layout.less
index 1cff71f..3425d0c 100644
--- a/src/layout.less
+++ b/src/layout.less
@@ -1,6 +1,7 @@
 // Layout
 .container {
   width: 100%;
+  overflow-x: hidden;
   margin-left: auto;
   margin-right: auto;
   padding-left: 1rem;
diff --git a/src/menus.less b/src/menus.less
index 70843eb..3a23fcf 100644
--- a/src/menus.less
+++ b/src/menus.less
@@ -71,5 +71,3 @@
     margin: .5rem;
   }
 }
-
-// TODO: Menus with icons
diff --git a/src/modals.less b/src/modals.less
index 4ef3652..4aaacd3 100644
--- a/src/modals.less
+++ b/src/modals.less
@@ -1,21 +1,42 @@
 // Modals
-.modal {
+.modal.active {
+  display: flex;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  z-index: 499;
+
+  .modal-overlay {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, .75);
+  }
+}
+.modal-container {
   display: block;
   text-align: left;
-  margin: 0;
+  margin: 0 auto;
   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;
+      font-size: 1.5rem;
     }
   }
   .modal-body {
@@ -30,7 +51,14 @@
   }
 }
 @media screen and (min-width: 640px) {
-  .modal {
+  .modal-container {
     width: 64rem;
   }
+}
+@media screen and (min-width: 320px) {
+  .modal-sm {
+    .modal-container {
+      width: 32rem;
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/utilities.less b/src/utilities.less
index a030104..ded95e7 100644
--- a/src/utilities.less
+++ b/src/utilities.less
@@ -2,10 +2,10 @@
 .clearfix {
   .clearfix();
 }
-.pull-left {
+.float-left {
   float: left !important;
 }
-.pull-right {
+.float-right {
   float: right !important;
 }
 
@@ -18,22 +18,6 @@
 .fixed {
   position: fixed;
 }
-.top {
-  .abs;
-  top: 0;
-}
-.right {
-  .abs;
-  right: 0;
-}
-.bottom {
-  .abs;
-  bottom: 0;
-}
-.left {
-  .abs;
-  left: 0;
-}
 .centered {
   display: block;
   float: none;
@@ -53,7 +37,6 @@
 .ml-10 {
   margin-left: 1rem;
 }
-
 .mt-5 {
   margin-top: .5rem;
 }
@@ -67,6 +50,31 @@
   margin-left: .5rem;
 }
 
+.pt-10 {
+  padding-top: 1rem;
+}
+.pr-10 {
+  padding-right: 1rem;
+}
+.pb-10 {
+  padding-bottom: 1rem;
+}
+.pl-10 {
+  padding-left: 1rem;
+}
+.pt-5 {
+  padding-top: .5rem;
+}
+.pr-5 {
+  padding-right: .5rem;
+}
+.pb-5 {
+  padding-bottom: .5rem;
+}
+.pl-5 {
+  padding-left: .5rem;
+}
+
 // Display
 .block {
   display: block;
@@ -110,6 +118,9 @@
   text-transform: capitalize;
 }
 
+.text-normal {
+  font-weight: normal;
+}
 .text-bold {
   font-weight: bold;
 }