Update shadow - replace variables with mixin variants

8 files changed, 17 insertions, 19 deletions

diff --git a/src/forms.less b/src/forms.less
index d6a2e5c..b2b2d9c 100644
--- a/src/forms.less
+++ b/src/forms.less
@@ -40,6 +40,9 @@
   &:focus {
     border-color: @primary-color;
   }
+  &::placeholder {
+    color: @gray-color;
+  }
 
   // Input sizes
   &.input-sm {
diff --git a/src/menus.less b/src/menus.less
index e46a0b5..2d4c95c 100644
--- a/src/menus.less
+++ b/src/menus.less
@@ -2,11 +2,11 @@
 .menu {
   background: @bg-color-light;
   border-radius: @border-radius;
-  box-shadow: @shadow-1;
   list-style: none;
   margin: 0;
   min-width: @control-min-width;
   padding: 1rem;
+  .shadow-variant(.1rem);
   transform: translateY(.5rem);
   z-index: @zindex-1;
 
diff --git a/src/mixins.less b/src/mixins.less
index b97ef42..a2ab1ae 100644
--- a/src/mixins.less
+++ b/src/mixins.less
@@ -12,7 +12,7 @@
 .control-transition() {
   transition: all .2s ease;
 }
-.toast-variant(@color) {
+.toast-variant(@color: @dark-color) {
   background: fade(@color, 90%);
   border-color: @color;
 }
@@ -27,3 +27,6 @@
   background: @color;
   color: @light-color;
 }
+.shadow-variant(@offset) {
+  box-shadow: 0 @offset (@offset+.1rem)*2 fade(@dark-color, 30%);
+}
diff --git a/src/modals.less b/src/modals.less
index 30d1133..0406533 100644
--- a/src/modals.less
+++ b/src/modals.less
@@ -49,7 +49,7 @@
   display: block;
   margin: 0 auto;
   padding: 0;
-  box-shadow: @shadow-4;
+  .shadow-variant(.4rem);
   text-align: left;
 
   .modal-header {
diff --git a/src/parallax.less b/src/parallax.less
index a7096fc..7d70772 100644
--- a/src/parallax.less
+++ b/src/parallax.less
@@ -8,7 +8,7 @@
   width: auto;
 
   .parallax-content {
-    box-shadow: 0 2.5rem 5rem rgba(0, 0, 0, .45);
+    .shadow-variant(2rem);
     height: auto;
     transform: perspective(50rem);
     transform-style: preserve-3d;
diff --git a/src/popovers.less b/src/popovers.less
index 1e3e090..a7b90f4 100644
--- a/src/popovers.less
+++ b/src/popovers.less
@@ -64,9 +64,7 @@
   }
 
   .card {
-    background: fade(@dark-color, 95%);
     border: 0;
-    box-shadow: @shadow-4;
-    color: @light-color;
+    .shadow-variant(.4rem);
   }
 }
diff --git a/src/utilities.less b/src/utilities.less
index 428a09c..0f9e959 100644
--- a/src/utilities.less
+++ b/src/utilities.less
@@ -220,19 +220,19 @@
 
 // Shadow
 .shadow-0 {
-  box-shadow: @shadow-0;
+  .shadow-variant(0);
 }
 .shadow-1 {
-  box-shadow: @shadow-1;
+  .shadow-variant(.1rem);
 }
 .shadow-2 {
-  box-shadow: @shadow-2;
+  .shadow-variant(.2rem);
 }
 .shadow-3 {
-  box-shadow: @shadow-3;
+  .shadow-variant(.3rem);
 }
 .shadow-4 {
-  box-shadow: @shadow-4;
+  .shadow-variant(.4rem);
 }
 
 // Shapes
diff --git a/src/variables.less b/src/variables.less
index 1227c81..19c100b 100644
--- a/src/variables.less
+++ b/src/variables.less
@@ -65,15 +65,9 @@
 @size-xl: 1280px;
 @size-2x: 1440px;
 
-// Z-index and shadows
+// Z-index 
 @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);