From a32c88fc012a133cf4e7c0ceefec086b7bbe75de Mon Sep 17 00:00:00 2001
From: reverend <reverend@reverend2048.de>
Date: Sun, 23 Aug 2020 11:38:32 +0200
Subject: [PATCH] Box Shadow styles

---
 .../02_Styles/boxShadow/_boxShadow.scss       | 48 +++++++++++++++++++
 components/02_Styles/boxShadow/boxShadow.hbs  | 11 +++++
 components/02_Styles/boxShadow/boxShadow.json |  1 +
 3 files changed, 60 insertions(+)
 create mode 100644 components/02_Styles/boxShadow/_boxShadow.scss
 create mode 100644 components/02_Styles/boxShadow/boxShadow.hbs
 create mode 100644 components/02_Styles/boxShadow/boxShadow.json

diff --git a/components/02_Styles/boxShadow/_boxShadow.scss b/components/02_Styles/boxShadow/_boxShadow.scss
new file mode 100644
index 0000000..05d2e5e
--- /dev/null
+++ b/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);
+}
\ No newline at end of file
diff --git a/components/02_Styles/boxShadow/boxShadow.hbs b/components/02_Styles/boxShadow/boxShadow.hbs
new file mode 100644
index 0000000..112667f
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/components/02_Styles/boxShadow/boxShadow.json b/components/02_Styles/boxShadow/boxShadow.json
new file mode 100644
index 0000000..9e26dfe
--- /dev/null
+++ b/components/02_Styles/boxShadow/boxShadow.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file