Change font-size to variables

15 files changed, 36 insertions, 32 deletions

diff --git a/src/avatars.less b/src/avatars.less
index 88933b6..8671e9a 100644
--- a/src/avatars.less
+++ b/src/avatars.less
@@ -4,7 +4,7 @@
   border-radius: 50%;
   color: fade(@light-color, 75%);
   display: inline-block;
-  font-size: 1.4rem;
+  font-size: @font-size;
   font-weight: 300;
   height: 3.2rem;
   line-height: 1;
@@ -14,7 +14,6 @@
   width: 3.2rem;
 
   &.avatar-xs {
-    font-size: 1.4rem;
     height: 1.6rem;
     width: 1.6rem;
   }
diff --git a/src/badges.less b/src/badges.less
index 7b99deb..2d7037f 100644
--- a/src/badges.less
+++ b/src/badges.less
@@ -18,7 +18,7 @@
   }
   &[data-badge] {
     &::after {
-      font-size: 1.2rem;
+      font-size: @sm-font-size;
       height: 2rem;
       line-height: 1.4rem;
       min-width: 2rem;
diff --git a/src/bars.less b/src/bars.less
index 5e2aab4..477cee9 100644
--- a/src/bars.less
+++ b/src/bars.less
@@ -16,7 +16,7 @@
     background: @primary-color;
     color: @light-color;
     display: block;
-    font-size: 1.2rem;
+    font-size: @sm-font-size;
     flex-shrink: 0;
     line-height: 1;
     height: 100%;
diff --git a/src/base.less b/src/base.less
index 3c80b1c..7c631f1 100644
--- a/src/base.less
+++ b/src/base.less
@@ -16,7 +16,7 @@ body {
   background: @body-bg;
   color: @body-font-color;
   font-family: @body-font-family;
-  font-size: @body-font-size;
+  font-size: @font-size;
   overflow-x: hidden;
   text-rendering: optimizeLegibility;
 }
diff --git a/src/buttons.less b/src/buttons.less
index d7f4582..bbfd843 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -8,7 +8,7 @@
   .control-transition();
   cursor: pointer;
   display: inline-block;
-  font-size: 1.4rem;
+  font-size: @font-size;
   height: 3.2rem;
   line-height: 2rem;
   padding: .5rem .8rem;
@@ -86,13 +86,13 @@
 
   // Button Sizes
   &.btn-sm {
-    font-size: 1.2rem;
+    font-size: @sm-font-size;
     height: 2.4rem;
     padding: .1rem .8rem;
   }
 
   &.btn-lg {
-    font-size: 1.8rem;
+    font-size: @lg-font-size;
     height: 4rem;
     padding: .9rem .8rem;
   }
diff --git a/src/calendars.less b/src/calendars.less
index 8d7f1ab..c4354ae 100644
--- a/src/calendars.less
+++ b/src/calendars.less
@@ -11,7 +11,7 @@
     border-top-left-radius: @border-radius;
     border-top-right-radius: @border-radius;
     display: flex;
-    font-size: 2rem;
+    font-size: @lg-font-size;
     padding: 1rem;
   }
 
@@ -23,7 +23,7 @@
     padding: 1rem 0;
 
     .calendar-date {
-      flex: 0 0 14.28%;
+      flex: 0 0 14.28%; // 7 calendar-item each row
     }
   }
 
@@ -31,7 +31,7 @@
     background: @bg-color;
     border-bottom: @border-width solid @border-color;
     color: @gray-color;
-    font-size: 1.2rem;
+    font-size: @sm-font-size;
   }
 
   .calendar-body {
@@ -201,7 +201,7 @@
       background: @secondary-color;
       border-radius: @border-radius;
       color: @primary-color;
-      font-size: 1.2rem;
+      font-size: @sm-font-size;
       display: block;
       margin: .2rem auto;
       overflow: hidden;
diff --git a/src/cards.less b/src/cards.less
index 8aa6364..5b7cf31 100644
--- a/src/cards.less
+++ b/src/cards.less
@@ -18,6 +18,7 @@
       padding-bottom: @layout-padding;
     }
   }
+  
   .card-image {
     padding-top: @layout-padding;
 
@@ -37,11 +38,13 @@
       }
     }
   }
+
   .card-title {
     font-size: 2rem;
   }
+
   .card-meta {
     color: @gray-color;
-    font-size: 1.3rem;
+    font-size: @sm-font-size;
   }
 }
diff --git a/src/codes.less b/src/codes.less
index e2b8a48..21b25ec 100644
--- a/src/codes.less
+++ b/src/codes.less
@@ -14,7 +14,7 @@ code {
   &::before {
     content: attr(data-lang);
     color: @light-gray-color;
-    font-size: 1.2rem;
+    font-size: @sm-font-size;
     position: absolute;
     right: 1rem;
     top: .2rem;
diff --git a/src/forms.less b/src/forms.less
index 0c9ea8f..aab031f 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -15,7 +15,7 @@
   color: @body-font-color;
   .control-transition();
   display: block;
-  font-size: 1.4rem;
+  font-size: @font-size;
   height: 3.2rem;
   line-height: 2rem;
   max-width: 100%;
@@ -29,13 +29,13 @@
 
   // Input sizes
   &.input-sm {
-    font-size: 1.2rem;
+    font-size: @sm-font-size;
     height: 2.4rem;
     padding: .1rem .6rem;
   }
 
   &.input-lg {
-    font-size: 1.6rem;
+    font-size: @lg-font-size;
     height: 4rem;
     padding: .9rem .8rem;
   }
@@ -87,7 +87,7 @@
   border: @border-width solid @light-gray-color;
   border-radius: @border-radius;
   color: inherit;
-  font-size: 1.4rem;
+  font-size: @font-size;
   line-height: 2rem;
   min-width: @control-min-width;
   padding: .5rem .8rem;
@@ -112,13 +112,13 @@
 
   // Select sizes
   &.select-sm {
-    font-size: 1.2rem;
+    font-size: @sm-font-size;
     height: 2.4rem;
     padding: .1rem 2rem .1rem .6rem;
   }
 
   &.select-lg {
-    font-size: 1.6rem;
+    font-size: @lg-font-size;
     height: 4rem;
     padding: .9rem 2.4rem .9rem .8rem;
   }
@@ -173,7 +173,7 @@
     .control-transition();
     cursor: pointer;
     display: inline-block;
-    font-size: 1.4rem;
+    font-size: @font-size;
     height: 1.4rem;
     left: 0;
     line-height: 2.4rem;
@@ -321,12 +321,11 @@
     padding: .5rem .8rem;
 
     &.addon-sm {
-      font-size: 1.2rem;
+      font-size: @sm-font-size;
       padding: .1rem .6rem;
     }
     &.addon-lg {
-      font-size: 1.6rem;
-      line-height: 2rem;
+      font-size: @lg-font-size;
       padding: .9rem .8rem;
     }
   }
diff --git a/src/modals.less b/src/modals.less
index 1030fbd..a75f644 100644
--- a/src/modals.less
+++ b/src/modals.less
@@ -55,7 +55,7 @@
     padding: @layout-padding;
 
     .modal-title {
-      font-size: 1.6rem;
+      font-size: @lg-font-size;
       margin: 0;
     }
   }
diff --git a/src/navbar.less b/src/navbar.less
index 0aac0e9..cd1652a 100755
--- a/src/navbar.less
+++ b/src/navbar.less
@@ -22,7 +22,7 @@
   }
 
   .navbar-brand {
-    font-size: 1.6rem;
+    font-size: @lg-font-size;
     font-weight: 500;
     text-decoration: none;
   }
diff --git a/src/panels.less b/src/panels.less
index 5f47a48..43b5d09 100644
--- a/src/panels.less
+++ b/src/panels.less
@@ -18,13 +18,14 @@
   .panel-body {
     flex: 1 1 auto;
     overflow-y: auto;
-  }
-
-  .panel-body {
     padding: 0 @layout-padding;
   }
 
   .panel-title {
     font-size: 2rem;
   }
+
+  .panel-meta {
+    color: @gray-color;
+  }
 }
diff --git a/src/tooltips.less b/src/tooltips.less
index 2881e2a..39f7a22 100644
--- a/src/tooltips.less
+++ b/src/tooltips.less
@@ -8,7 +8,7 @@
     color: @light-color;
     content: attr(data-tooltip);
     display: block;
-    font-size: 1.2rem;
+    font-size: @sm-font-size;
     left: 50%;
     line-height: 1.6rem;
     max-width: 32rem;
diff --git a/src/utilities.less b/src/utilities.less
index 79f4388..7764020 100644
--- a/src/utilities.less
+++ b/src/utilities.less
@@ -11,7 +11,7 @@
     color: @light-gray-color;
     content: attr(data-content);
     display: inline-block;
-    font-size: 1.2rem;
+    font-size: @sm-font-size;
     padding: 0 .8rem;
     transform: translateY(-1.1rem);
   }
diff --git a/src/variables.less b/src/variables.less
index 9da784d..2e2bc96 100644
--- a/src/variables.less
+++ b/src/variables.less
@@ -5,7 +5,9 @@
 @html-line-height: 1.428571429;
 @body-bg: #fff;
 @body-font-color: #333;
-@body-font-size: 1.4rem;
+@font-size: 1.4rem;
+@sm-font-size: 1.2rem;
+@lg-font-size: 1.6rem;
 
 // Fonts
 // Credit: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/