update units to rem

11 files changed, 85 insertions, 87 deletions

diff --git a/demo/index.html b/demo/index.html
index 9cc38d2..26f1fd7 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -167,11 +167,7 @@
             <div class="columns">
                 <div class="column">
                     <button class="btn btn-sm">small button</button>
-                </div>
-                <div class="column">
                     <button class="btn">normal button</button>
-                </div>
-                <div class="column">
                     <button class="btn btn-lg">large button</button>
                 </div>
                 <div class="column">
diff --git a/dist/spectre.css b/dist/spectre.css
index 43cb851..30825d0 100644
--- a/dist/spectre.css
+++ b/dist/spectre.css
@@ -387,7 +387,7 @@ html {
 body {
   color: #333;
   font-family: "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", WenQuanYi Micro Hei, sans-serif;
-  font-size: 14px;
+  font-size: 1.4rem;
   background-color: #fff;
 }
 a {
@@ -435,7 +435,7 @@ p.lead {
 }
 blockquote {
   padding: 1rem 2rem;
-  border-left: 2px solid #ddd;
+  border-left: .2rem solid #ddd;
   margin-left: 0;
 }
 blockquote p:last-child {
@@ -525,24 +525,24 @@ ol ol {
   width: 100%;
   margin-left: auto;
   margin-right: auto;
-  padding-left: 10px;
-  padding-right: 10px;
+  padding-left: 1rem;
+  padding-right: 1rem;
 }
 @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;
 }
 .column {
   -webkit-box-flex: 1;
   -webkit-flex: 1;
       -ms-flex: 1;
           flex: 1;
-  padding: 10px;
+  padding: 1rem;
 }
 @media screen and (min-width: 769px) {
   .columns {
@@ -821,11 +821,13 @@ button.btn-clear::after {
 .btn-group .btn:not(:first-child):not(:last-child) {
   margin-left: -0.1rem;
   border-radius: 0;
+  z-index: 49;
 }
 .btn-group .btn:last-child:not(:first-child) {
   margin-left: -0.1rem;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
+  z-index: 99;
 }
 .form-group:not(:last-child) {
   margin-bottom: 1rem;
@@ -839,7 +841,7 @@ button.btn-clear::after {
   background-color: #fff;
   background-image: none;
   border: 0.1rem solid #c5c5c5;
-  border-radius: 3px;
+  border-radius: .3rem;
   color: #333;
   font-size: 1.4rem;
   line-height: 1.6rem;
@@ -857,15 +859,15 @@ button.btn-clear::after {
 }
 .form-input.input-sm {
   height: 2.4rem;
-  border-radius: 2px;
+  border-radius: .2rem;
   font-size: 1.2rem;
   line-height: 1.4rem;
   padding: .4rem .6rem;
 }
 .form-input.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;
 }
@@ -887,6 +889,7 @@ textarea.form-input {
 .form-label {
   display: block;
   margin-bottom: .5rem;
+  line-height: 1.6rem;
 }
 .form-select:not([multiple]) {
   height: 3.2rem;
@@ -895,7 +898,7 @@ textarea.form-input {
   line-height: 1.6rem;
   padding: .7rem .8rem;
   border: 0.1rem solid #c5c5c5;
-  border-radius: 3px;
+  border-radius: .3rem;
   outline: 0;
 }
 .form-select:focus {
@@ -903,7 +906,7 @@ textarea.form-input {
 }
 .form-select.select-sm {
   height: 2.4rem;
-  border-radius: 2px;
+  border-radius: .2rem;
   font-size: 1.2rem;
   line-height: 1.4rem;
   padding: .4rem .6rem;
@@ -983,7 +986,7 @@ textarea.form-input {
   position: relative;
 }
 .form-switch input {
-  line-height: 24px;
+  line-height: 2.4rem;
   vertical-align: top;
   border: 0.1rem solid #c5c5c5;
   background-color: #c5c5c5;
@@ -1031,7 +1034,7 @@ textarea.form-input {
   white-space: nowrap;
   vertical-align: middle;
   margin: -0.2rem 0.5rem 0 0;
-  border-radius: 2px;
+  border-radius: .2rem;
 }
 .label.label-primary {
   color: #fff;
@@ -1050,9 +1053,9 @@ textarea.form-input {
   background-color: #e74c3c;
 }
 .label.label-lg {
-  padding: .3rem .8rem;
+  padding: .2rem .8rem;
   font-size: 1.4rem;
-  line-height: 1.6rem;
+  line-height: 1.8rem;
 }
 .toast {
   display: block;
@@ -1060,7 +1063,7 @@ textarea.form-input {
   padding: 1.4rem;
   color: #666;
   border: 0.1rem solid #eaeaea;
-  border-radius: 3px;
+  border-radius: .3rem;
   background-color: #efefef;
 }
 .toast.toast-primary {
@@ -1089,16 +1092,16 @@ textarea.form-input {
   text-align: left;
   margin: 0;
   padding: 1rem;
-  border-radius: 3px;
+  border-radius: .3rem;
   background-color: #fff;
   z-index: 999;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.3);
 }
 .menu .menu-item {
   display: block;
   padding: .2rem 1rem;
   margin-top: 0;
-  border-radius: 3px;
+  border-radius: .3rem;
   color: #333;
   line-height: 2.4rem;
   text-decoration: none;
@@ -1111,7 +1114,7 @@ textarea.form-input {
   display: block;
   margin: -0.2rem -1rem;
   padding: .2rem 1rem;
-  border-radius: 3px;
+  border-radius: .3rem;
   color: inherit;
   text-decoration: none;
 }
@@ -1138,14 +1141,14 @@ textarea.form-input {
   content: "";
   display: block;
   width: 100%;
-  height: 1px;
-  -webkit-transform: translateY(-10px);
-          transform: translateY(-10px);
-  border-bottom: 1px solid #efefef;
+  height: .1rem;
+  -webkit-transform: translateY(-1rem);
+          transform: translateY(-1rem);
+  border-bottom: 0.1rem solid #efefef;
 }
 .menu .divider {
   display: block;
-  border-bottom: 1px solid #efefef;
+  border-bottom: 0.1rem solid #efefef;
   margin: .5rem;
 }
 .breadcrumb {
@@ -1277,28 +1280,28 @@ textarea.form-input {
   margin-right: auto;
 }
 .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;
 }
 .block {
   display: block;
@@ -1319,13 +1322,13 @@ textarea.form-input {
   display: none !important;
 }
 .shadow {
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.3);
 }
 .light-shadow {
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.15);
 }
 .rounded {
-  border-radius: 3px;
+  border-radius: .3rem;
 }
 .circle {
   border-radius: 50%;
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