Box Shadow styles

components/02_Styles/boxShadow/_boxShadow.scss

@@ -0,0 +1,48 @@
+@mixin RV-BoxShadow($color) {
+
+    position:relative;
+    float:left;
+    width:40%;
+    margin:2em 10px 4em; 
+    background:#fff;
+    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
+
+    &:before, &:after {
+        content:"";
+        position:absolute; 
+        z-index:-2;
+    }
+
+    &--simple {
+        box-shadow: 0 0 20px $color;
+    }
+
+    &--raised {
+        &:after {
+            box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
+        }
+    }
+
+    &--liftedCorners {
+          
+        &:before, &:after {
+            bottom:15px;
+            left:10px;
+            width:50%;
+            height:20%;
+            max-width:300px;
+            box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
+            transform:rotate(-3deg);
+        }
+          
+        &:after{
+            right:10px; 
+            left:auto;
+            transform:rotate(3deg);
+        }
+    }
+}
+
+.RV-BoxShadow {
+    @include RV-BoxShadow(#6b5690);
+}

components/02_Styles/boxShadow/boxShadow.hbs

@@ -0,0 +1,11 @@
+<div class="RV-BoxShadow--raised" style="width: 300px; height: 300px; margin: 20px 0 0 20px;">
+    <img src="https://via.placeholder.com/300/7242af"/>
+</div>
+
+<div class="RV-BoxShadow--simple" style="width: 300px; height: 300px; margin: 20px 0 0 20px;">
+    <img src="https://via.placeholder.com/300/7242af"/>
+</div>
+
+<div class="RV-BoxShadow RV-BoxShadow--liftedCorners" style="width: 300px; height: 300px; margin: 20px 0 20px 20px;">
+    <img src="https://via.placeholder.com/300/7242af"/>
+</div>

components/02_Styles/boxShadow/boxShadow.json

@@ -0,0 +1 @@
+{}