Add z-index variables and update Calendars

14 files changed, 86 insertions, 100 deletions

diff --git a/src/avatars.less b/src/avatars.less
index fa0d49f..b764846 100644
--- a/src/avatars.less
+++ b/src/avatars.less
@@ -2,7 +2,7 @@
 .avatar {
   background: @primary-color;
   border-radius: 50%;
-  color: fade(@gray-color-lighter, 75%);
+  color: fade(@gray-color-lighter, 85%);
   display: inline-block;
   font-size: @font-size;
   font-weight: 300;
@@ -14,6 +14,7 @@
   width: 3.2rem;
 
   &.avatar-xs {
+    font-size: .8rem;
     height: 1.6rem;
     width: 1.6rem;
   }
@@ -38,7 +39,7 @@
     height: 100%;
     position: relative;
     width: 100%;
-    z-index: 99;
+    z-index: @z-index-z1;
   }
 
   .avatar-icon {
@@ -58,13 +59,6 @@
     position: absolute;
     top: 50%;
     transform: translate(-50%, -50%);
-    vertical-align: middle;
-    z-index: 1;
-  }
-
-  &.avatar-xs {
-    &[data-initial]::before {
-      transform: translate(-50%, -50%) scale(.5);
-    }
+    z-index: @z-index-z0;
   }
 }
diff --git a/src/buttons.less b/src/buttons.less
index 3d5734d..71284d5 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -160,7 +160,7 @@
     &:hover,
     &:active,
     &.active {
-      z-index: 9;
+      z-index: @z-index-z0;
     }
   }
 
diff --git a/src/calendars.less b/src/calendars.less
index c3bcf3a..3171792 100644
--- a/src/calendars.less
+++ b/src/calendars.less
@@ -3,6 +3,7 @@
   border: @border-width solid @border-color;
   border-radius: @border-radius;
   display: block;
+  min-width: 28rem;
   text-align: center;
 
   .calendar-nav {
@@ -23,7 +24,7 @@
     padding: 1rem 0;
 
     .calendar-date {
-      flex: 0 0 14.28%; // 7 calendar-item each row
+      flex: 0 0 14.28%; // 7 calendar-items each row
     }
   }
 
@@ -36,43 +37,32 @@
 
   .calendar-body {
     color: @gray-color-dark;
+  }
 
-    .calendar-date {
-      border: 0;
-      padding: .6rem;
-
-      .date-item {
-        color: @gray-color-dark;
-      }
-
-      &.prev-month .date-item,
-      &.next-month .date-item,
-      .date-item:disabled {
-        cursor: default;
-        opacity: .25;
-        pointer-events: none;
-      }
-    }
+  .calendar-date {
+    border: 0;
+    padding: .4rem;
 
     .date-item {
       appearance: none;
       background: transparent;
       border: @border-width solid transparent;
       border-radius: 50%;
+      color: @gray-color-dark;
       .control-transition();
       cursor: pointer;
-      display: inline-block;
-      height: 2.4rem;
+      height: 2.8rem;
       line-height: 2rem;
-      padding: .1rem;
+      padding: .3rem;
+      position: relative;
       text-align: center;
       text-decoration: none;
       vertical-align: middle;
       white-space: nowrap;
-      width: 2.4rem;
+      width: 2.8rem;
 
       &.date-today {
-        background: @secondary-color;
+        border-color: @secondary-color-dark;
         color: @primary-color;
       }
 
@@ -94,44 +84,50 @@
       &.badge {
         &::after {
           position: absolute;
-          top: .2rem;
-          right: .2rem;
+          top: .3rem;
+          right: .3rem;
           transform: translate(50%, -50%);
         }
       }
     }
+
+    &.disabled .date-item,
+    &.disabled .calendar-event,
+    .date-item:disabled,
+    .calendar-event:disabled {
+      cursor: default;
+      opacity: .25;
+      pointer-events: none;
+    }
   }
 
   .calendar-range {
     position: relative;
 
-    .date-item {
+    &::before {
+      background: @secondary-color;
+      content: "";
+      height: 2.8rem;
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+    &.range-start {
       &::before {
-        background: @secondary-color;
-        content: "";
-        height: 2.4rem;
-        position: absolute;
-        top: 50%;
         left: 50%;
-        transform: translateY(-50%);
-        width: 50%;
-        z-index: -9;
       }
     }
-
-    & + .calendar-range {
-      .date-item {
-        &::before {
-          left: 0;
-          width: 100%;
-        }
-        &.active {
-          &::before {
-            width: 50%;
-          }
-        }
+    &.range-end {
+      &::before {
+        right: 50%;
       }
     }
+
+    .date-item {
+      color: @primary-color;
+    }
   }
 
   &.calendar-lg {
@@ -154,38 +150,28 @@
           border-bottom: 0;
         }
       }
+    }
 
-      .date-item {
-        align-self: flex-end;
-        flex: 0 0 2.4rem;
-        margin-right: .5rem;
-        margin-top: .5rem;
-      }
+    .date-item {
+      align-self: flex-end;
+      flex: 0 0 2.8rem;
+      margin-right: .5rem;
+      margin-top: .5rem;
+    }
 
-      .calendar-range {
-        .date-item {
-          &::before {
-            height: 2.4rem;
-            left: auto;
-            right: 0;
-            top: 1.7rem;
-            width: 2.2rem;
-          }
+    .calendar-range {
+      &::before {
+        top: 1.9rem;
+      }
+      &.range-start {
+        &::before {
+          left: auto;
+          width: 1.9rem;
         }
-
-        & + .calendar-range {
-          .date-item {
-            &::before {
-              left: 0;
-              width: 100%;
-            }
-            &.active {
-              &::before {
-                right: 1.7rem;
-                width: auto;
-              }
-            }
-          }
+      }
+      &.range-end {
+        &::before {
+          right: 1.9rem;
         }
       }
     }
diff --git a/src/carousels.less b/src/carousels.less
index d35e700..c36d068 100644
--- a/src/carousels.less
+++ b/src/carousels.less
@@ -40,7 +40,7 @@
       top: 50%;
       transition: all .4s ease;
       transform: translateY(-50%);
-      z-index: 99;
+      z-index: @z-index-z2;
     }
     .item-prev {
       left: 2rem;
@@ -57,7 +57,7 @@
     &:nth-of-type(4):checked ~ .carousel-container .carousel-item:nth-of-type(4) {
       animation: carousel-slidein .75s ease-in 1;
       opacity: 1;
-      z-index: 99;
+      z-index: @z-index-z1;
     }
     &:nth-of-type(1):checked ~ .carousel-nav .nav-item:nth-of-type(1),
     &:nth-of-type(2):checked ~ .carousel-nav .nav-item:nth-of-type(2),
@@ -75,7 +75,7 @@
     position: absolute;
     transform: translateX(-50%);
     width: 20rem;
-    z-index: 999;
+    z-index: @z-index-z2;
 
     .nav-item {
       color: fade(@gray-color-light, 50%);
diff --git a/src/forms.less b/src/forms.less
index 0429118..623b7a7 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -344,7 +344,7 @@
       margin-left: -.1rem;
     }
     &:focus {
-      z-index: 99;
+      z-index: @z-index-z0;
     }
   }
 
diff --git a/src/menus.less b/src/menus.less
index 58d4013..d94f6e8 100644
--- a/src/menus.less
+++ b/src/menus.less
@@ -8,7 +8,7 @@
   padding: 1rem;
   .shadow;
   transform: translateY(.5rem);
-  z-index: 999;
+  z-index: @z-index-z1;
 
   .menu-item {
     margin-top: 0;
diff --git a/src/modals.less b/src/modals.less
index 451db66..fcbdc29 100644
--- a/src/modals.less
+++ b/src/modals.less
@@ -16,7 +16,7 @@
   &.active {
     display: flex;
     opacity: 1;
-    z-index: 1988;
+    z-index: @z-index-z4;
 
     .modal-overlay {
       background: fade(@gray-color-darker, 50%);
@@ -32,6 +32,7 @@
     .modal-container {
       animation: slide-down .2s ease-in 1;
       max-width: 64rem;
+      z-index: @z-index-z0;
     }
   }
 
@@ -50,7 +51,6 @@
   padding: 0;
   .shadow;
   text-align: left;
-  z-index: 1988;
 
   .modal-header {
     padding: @layout-padding;
diff --git a/src/parallax.less b/src/parallax.less
index c4f5580..644e1ac 100644
--- a/src/parallax.less
+++ b/src/parallax.less
@@ -87,5 +87,5 @@
   height: 50%;
   position: absolute;
   width: 50%;
-  z-index: 99;
+  z-index: @z-index-z0;
 }
diff --git a/src/steps.less b/src/steps.less
index 860cacb..fdbc975 100644
--- a/src/steps.less
+++ b/src/steps.less
@@ -41,7 +41,7 @@
         top: .4rem;
         transform: translateX(-50%);
         width: 1.2rem;
-        z-index: 99;
+        z-index: @z-index-z0;
       }
     }
 
diff --git a/src/tiles.less b/src/tiles.less
index 0b4d08a..2dc3d29 100644
--- a/src/tiles.less
+++ b/src/tiles.less
@@ -3,7 +3,6 @@
   align-content: space-between;
   align-items: flex-start;
   display: flex;
-  padding: .5rem 0;
 
   .tile-icon,
   .tile-action {
diff --git a/src/toasts.less b/src/toasts.less
index f1246b9..47d86c9 100644
--- a/src/toasts.less
+++ b/src/toasts.less
@@ -7,6 +7,7 @@
   padding: 1.4rem;
   .toast-variant(@gray-color-darker);
   width: 100%;
+  z-index: @z-index-z3;
 
   &.toast-primary {
     .toast-variant(@primary-color);
diff --git a/src/tooltips.less b/src/tooltips.less
index 890423f..f456282 100644
--- a/src/tooltips.less
+++ b/src/tooltips.less
@@ -10,18 +10,17 @@
     display: block;
     font-size: @font-size-sm;
     left: 50%;
-    line-height: 1.6rem;
     max-width: 32rem;
     opacity: 0;
     overflow: hidden;
-    padding: .6rem 1rem;
+    padding: .4rem .8rem;
     pointer-events: none;
     position: absolute;
     text-overflow: ellipsis;
     transform: translate(-50%, 0);
     transition: transform .2s ease;
     white-space: nowrap;
-    z-index: 999;
+    z-index: @z-index-z2;
   }
   &:focus,
   &:hover {
diff --git a/src/utilities.less b/src/utilities.less
index c88face..30b3d4e 100644
--- a/src/utilities.less
+++ b/src/utilities.less
@@ -38,7 +38,7 @@
     position: absolute;
     top: 50%;
     width: 1.6rem;
-    z-index: 99;
+    z-index: @z-index-z0;
   }
 }
 
diff --git a/src/variables.less b/src/variables.less
index 3d59ec3..6362b01 100644
--- a/src/variables.less
+++ b/src/variables.less
@@ -42,7 +42,7 @@
 @link-color: @primary-color;
 @link-color-dark: darken(@link-color, 10%);
 @border-color: #efefef;
-@border-color-dark: darken(@border-color, 13%);
+@border-color-dark: darken(@border-color, 15%);
 @bg-color: #f8f8f8;
 @bg-color-dark: darken(@bg-color, 3%);
 @bg-color-light: #fff;
@@ -63,3 +63,10 @@
 @size-lg: 960px;
 @size-xl: 1280px;
 @size-2x: 1440px;
+
+// Z-index and shadows
+@z-index-z0: 1;
+@z-index-z1: 100;
+@z-index-z2: 200;
+@z-index-z3: 300;
+@z-index-z4: 400;