update units to rem

9 files changed, 43 insertions, 44 deletions

diff --git a/src/buttons.less b/src/buttons.less
index 95bd542..18f326b 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -165,10 +165,10 @@ button {
       margin-top: -.4rem;
     }
   }
-
-  // TODO: Button with icons
 }
 
+// TODO: Button with icons
+
 .btn-group {
   display: inline-block;
   vertical-align: middle;
@@ -184,11 +184,13 @@ button {
     &: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/forms.less b/src/forms.less
index ba0dbfc..110b747 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -12,7 +12,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 +33,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 +42,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;
   }
@@ -75,6 +75,7 @@
 .form-label {
   display: block;
   margin-bottom: .5rem;
+  line-height: 1.6rem;
 }
 // Form element: Select
 .form-select {
@@ -85,7 +86,7 @@
     line-height: 1.6rem;
     padding: .7rem .8rem;
     border: .1rem solid @control-color;
-    border-radius: 3px;
+    border-radius: .3rem;
     outline: 0;
   }
 
@@ -96,7 +97,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;
@@ -184,7 +185,7 @@
   position: relative;
 
   input {
-    line-height: 24px;
+    line-height: 2.4rem;
     vertical-align: top;
     border: .1rem solid @control-color;
     background-color: @control-color;
@@ -213,10 +214,6 @@
       transition: left .15s ease;
     }
 
-    &:hover {
-
-    }
-
     &:checked {
       background-color: @core-color;
       border-color: @core-color;
@@ -227,4 +224,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/labels.less b/src/labels.less
index 0764dd4..3288065 100644
--- a/src/labels.less
+++ b/src/labels.less
@@ -10,7 +10,7 @@
   white-space: nowrap;
   vertical-align: middle;
   margin: -.2rem .5rem 0 0;
-  border-radius: 2px;
+  border-radius: .2rem;
 
   &.label-primary {
     color: #fff;
@@ -30,8 +30,8 @@
   }
 
   &.label-lg {
-    padding: .3rem .8rem;
+    padding: .2rem .8rem;
     font-size: 1.4rem;
-    line-height: 1.6rem;
+    line-height: 1.8rem;
   }
 }
\ 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/menus.less b/src/menus.less
index cb69690..c40b61b 100644
--- a/src/menus.less
+++ b/src/menus.less
@@ -5,7 +5,7 @@
   text-align: left;
   margin: 0;
   padding: 1rem;
-  border-radius: 3px;
+  border-radius: .3rem;
   background-color: #fff;
   z-index: 999;
   .shadow;
@@ -14,7 +14,7 @@
     display: block;
     padding: .2rem 1rem;
     margin-top: 0;
-    border-radius: 3px;
+    border-radius: .3rem;
     color: @body-font-color;
     line-height: 2.4rem;
     text-decoration: none;
@@ -24,7 +24,7 @@
       display: block;
       margin: -.2rem -1rem;
       padding: .2rem 1rem;
-      border-radius: 3px;
+      border-radius: .3rem;
       color: inherit;
       text-decoration: none;
 
@@ -55,15 +55,15 @@
       content: "";
       display: block;
       width: 100%;
-      height: 1px;
-      transform: translateY(-10px);
-      border-bottom: 1px solid @core-border-color;
+      height: .1rem;
+      transform: translateY(-1rem);
+      border-bottom: .1rem solid @core-border-color;
     }
   }
 
   .divider {
     display: block;
-    border-bottom: 1px solid @core-border-color;
+    border-bottom: .1rem solid @core-border-color;
     margin: .5rem;
   }
 }
diff --git a/src/toasts.less b/src/toasts.less
index 2c0f5e3..6d4b03d 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 {
diff --git a/src/typography.less b/src/typography.less
index 65320a7..4b0cd49 100644
--- a/src/typography.less
+++ b/src/typography.less
@@ -37,7 +37,7 @@ p {
 }
 blockquote {
   padding: 1rem 2rem;
-  border-left: 2px solid #ddd;
+  border-left: .2rem solid #ddd;
   margin-left: 0;
 
   p:last-child {
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 97f357d..5b6e4ba 100644
--- a/src/variables.less
+++ b/src/variables.less
@@ -3,7 +3,7 @@
 // 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