Add shadow variables

13 files changed, 43 insertions, 28 deletions

diff --git a/src/avatars.less b/src/avatars.less
index b764846..1a60fbc 100644
--- a/src/avatars.less
+++ b/src/avatars.less
@@ -39,7 +39,7 @@
     height: 100%;
     position: relative;
     width: 100%;
-    z-index: @z-index-z1;
+    z-index: @zindex-1;
   }
 
   .avatar-icon {
@@ -59,6 +59,6 @@
     position: absolute;
     top: 50%;
     transform: translate(-50%, -50%);
-    z-index: @z-index-z0;
+    z-index: @zindex-0;
   }
 }
diff --git a/src/buttons.less b/src/buttons.less
index 71284d5..c01278e 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -160,7 +160,7 @@
     &:hover,
     &:active,
     &.active {
-      z-index: @z-index-z0;
+      z-index: @zindex-0;
     }
   }
 
diff --git a/src/carousels.less b/src/carousels.less
index c36d068..52205ab 100644
--- a/src/carousels.less
+++ b/src/carousels.less
@@ -40,7 +40,7 @@
       top: 50%;
       transition: all .4s ease;
       transform: translateY(-50%);
-      z-index: @z-index-z2;
+      z-index: @zindex-2;
     }
     .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: @z-index-z1;
+      z-index: @zindex-1;
     }
     &: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: @z-index-z2;
+    z-index: @zindex-2;
 
     .nav-item {
       color: fade(@gray-color-light, 50%);
diff --git a/src/dropdowns.less b/src/dropdowns.less
index 413e88b..1a44122 100644
--- a/src/dropdowns.less
+++ b/src/dropdowns.less
@@ -4,7 +4,7 @@
   position: relative;
 
   .menu {
-    animation: slide-down .2s ease-in 1;
+    animation: slide-down .2s ease 1;
     display: none;
     left: 0;
     position: absolute;
diff --git a/src/forms.less b/src/forms.less
index 57eceb7..6e5a83d 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -346,7 +346,7 @@
       margin-left: -.1rem;
     }
     &:focus {
-      z-index: @z-index-z0;
+      z-index: @zindex-0;
     }
   }
 
diff --git a/src/menus.less b/src/menus.less
index d94f6e8..1204c36 100644
--- a/src/menus.less
+++ b/src/menus.less
@@ -6,9 +6,9 @@
   margin: 0;
   min-width: @control-min-width;
   padding: 1rem;
-  .shadow;
+  box-shadow: @shadow-1;
   transform: translateY(.5rem);
-  z-index: @z-index-z1;
+  z-index: @zindex-1;
 
   .menu-item {
     margin-top: 0;
diff --git a/src/modals.less b/src/modals.less
index 7f01480..a37968f 100644
--- a/src/modals.less
+++ b/src/modals.less
@@ -16,7 +16,7 @@
   &.active {
     display: flex;
     opacity: 1;
-    z-index: @z-index-z4;
+    z-index: @zindex-4;
 
     .modal-overlay {
       background: fade(@gray-color-darker, 50%);
@@ -30,9 +30,9 @@
     }
 
     .modal-container {
-      animation: slide-down .2s ease-in 1;
+      animation: slide-down .2s ease 1;
       max-width: 64rem;
-      z-index: @z-index-z0;
+      z-index: @zindex-0;
     }
   }
 
@@ -49,7 +49,7 @@
   display: block;
   margin: 0 auto;
   padding: 0;
-  .shadow;
+  box-shadow: @shadow-4;
   text-align: left;
 
   .modal-header {
diff --git a/src/parallax.less b/src/parallax.less
index 644e1ac..a7096fc 100644
--- a/src/parallax.less
+++ b/src/parallax.less
@@ -87,5 +87,5 @@
   height: 50%;
   position: absolute;
   width: 50%;
-  z-index: @z-index-z0;
+  z-index: @zindex-0;
 }
diff --git a/src/steps.less b/src/steps.less
index fdbc975..9b1b34e 100644
--- a/src/steps.less
+++ b/src/steps.less
@@ -41,7 +41,7 @@
         top: .4rem;
         transform: translateX(-50%);
         width: 1.2rem;
-        z-index: @z-index-z0;
+        z-index: @zindex-0;
       }
     }
 
diff --git a/src/toasts.less b/src/toasts.less
index 4c15a95..d784ab9 100644
--- a/src/toasts.less
+++ b/src/toasts.less
@@ -7,7 +7,7 @@
   padding: @layout-padding;
   .toast-variant(@gray-color-darker);
   width: 100%;
-  z-index: @z-index-z3;
+  z-index: @zindex-3;
 
   &.toast-primary {
     .toast-variant(@primary-color);
diff --git a/src/tooltips.less b/src/tooltips.less
index f456282..ff0e03c 100644
--- a/src/tooltips.less
+++ b/src/tooltips.less
@@ -20,7 +20,7 @@
     transform: translate(-50%, 0);
     transition: transform .2s ease;
     white-space: nowrap;
-    z-index: @z-index-z2;
+    z-index: @zindex-2;
   }
   &:focus,
   &:hover {
diff --git a/src/utilities.less b/src/utilities.less
index 30b3d4e..c5bef2d 100644
--- a/src/utilities.less
+++ b/src/utilities.less
@@ -38,7 +38,7 @@
     position: absolute;
     top: 50%;
     width: 1.6rem;
-    z-index: @z-index-z0;
+    z-index: @zindex-0;
   }
 }
 
@@ -219,11 +219,20 @@
 }
 
 // Shadow
-.shadow {
-  box-shadow: 0 .1rem .4rem rgba(0, 0, 0, .3);
+.shadow-0 {
+  box-shadow: @shadow-0;
 }
-.light-shadow {
-  box-shadow: 0 .1rem .2rem rgba(0, 0, 0, .15);
+.shadow-1 {
+  box-shadow: @shadow-1;
+}
+.shadow-2 {
+  box-shadow: @shadow-2;
+}
+.shadow-3 {
+  box-shadow: @shadow-3;
+}
+.shadow-4 {
+  box-shadow: @shadow-4;
 }
 
 // Shapes
diff --git a/src/variables.less b/src/variables.less
index c728f53..092d440 100644
--- a/src/variables.less
+++ b/src/variables.less
@@ -65,8 +65,14 @@
 @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;
+@zindex-0: 1;
+@zindex-1: 100;
+@zindex-2: 200;
+@zindex-3: 300;
+@zindex-4: 400;
+
+@shadow-0: 0 0 .2rem rgba(0, 0, 0, .3);
+@shadow-1: 0 .1rem .4rem rgba(0, 0, 0, .3);
+@shadow-2: 0 .2rem .8rem rgba(0, 0, 0, .3);
+@shadow-3: 0 .3rem 1.2rem rgba(0, 0, 0, .3);
+@shadow-4: 0 .4rem 1.6rem rgba(0, 0, 0, .3);