1 files changed, 21 insertions, 21 deletions

diff --git a/src/calendars.less b/src/calendars.less
index 621b9d1..e5764ea 100644
--- a/src/calendars.less
+++ b/src/calendars.less
@@ -3,7 +3,7 @@
   border: @border-width solid @border-color;
   border-radius: @border-radius;
   display: block;
-  min-width: 28rem;
+  min-width: 280px;
   text-align: center;
 
   .calendar-nav {
@@ -13,7 +13,7 @@
     border-top-right-radius: @border-radius;
     display: flex;
     font-size: @font-size-lg;
-    padding: 1rem;
+    padding: @layout-spacing;
   }
 
   .calendar-header,
@@ -21,7 +21,7 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
-    padding: 1rem 0;
+    padding: @layout-spacing 0;
 
     .calendar-date {
       flex: 0 0 14.28%; // 7 calendar-items each row
@@ -42,7 +42,7 @@
 
   .calendar-date {
     border: 0;
-    padding: .4rem;
+    padding: @unit-1;
 
     .date-item {
       appearance: none;
@@ -52,16 +52,16 @@
       color: @gray-color-dark;
       .control-transition();
       cursor: pointer;
-      height: 2.8rem;
-      line-height: 2rem;
+      height: @unit-7;
+      line-height: @unit-5;
       outline: none;
-      padding: .3rem;
+      padding: @unit-h;
       position: relative;
       text-align: center;
       text-decoration: none;
       vertical-align: middle;
       white-space: nowrap;
-      width: 2.8rem;
+      width: @unit-7;
 
       &.date-today {
         border-color: @secondary-color-dark;
@@ -90,8 +90,8 @@
       &.badge {
         &::after {
           position: absolute;
-          top: .3rem;
-          right: .3rem;
+          top: 3px;
+          right: 3px;
           transform: translate(50%, -50%);
         }
       }
@@ -113,7 +113,7 @@
     &::before {
       background: @secondary-color;
       content: "";
-      height: 2.8rem;
+      height: @unit-7;
       left: 0;
       position: absolute;
       right: 0;
@@ -145,7 +145,7 @@
         border-right: @border-width solid @border-color;
         display: flex;
         flex-direction: column;
-        height: 11rem;
+        height: 5.5rem;
         padding: 0;
 
         &:nth-child(7n) {
@@ -159,24 +159,24 @@
 
     .date-item {
       align-self: flex-end;
-      height: 2.8rem;
-      margin-right: .5rem;
-      margin-top: .5rem;
+      height: @unit-7;
+      margin-right: @layout-spacing-sm;
+      margin-top: @layout-spacing-sm;
     }
 
     .calendar-range {
       &::before {
-        top: 1.9rem;
+        top: 19px;
       }
       &.range-start {
         &::before {
           left: auto;
-          width: 1.9rem;
+          width: 19px;
         }
       }
       &.range-end {
         &::before {
-          right: 1.9rem;
+          right: 19px;
         }
       }
     }
@@ -185,7 +185,7 @@
       flex-grow: 1;
       line-height: 1;
       overflow-y: auto;
-      padding: .5rem;
+      padding: @layout-spacing-sm;
     }
 
     .calendar-event {
@@ -194,9 +194,9 @@
       color: @primary-color;
       font-size: @font-size-sm;
       display: block;
-      margin: .2rem auto;
+      margin: @unit-h auto;
       overflow: hidden;
-      padding: .3rem .4rem;
+      padding: 3px 4px;
       text-align: left;
       text-overflow: ellipsis;
       vertical-align: baseline;