added more classes to elevation.scss for light theme

DanielTerletzkiy · Nov 24, 2021 · 40f97d0 · 40f97d0
1 parent bbfae7c
commit 40f97d0
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/src/DEMO/HelloWorld.vue b/src/DEMO/HelloWorld.vue
@@ -96,7 +96,7 @@
 
     <d-card elevation rounded="lg">
       <d-card-title class="pa-0">
-        Avatars!
+        <d-icon name="user-circle" color="primary" size="30" class="ml-2"/>Avatars!
       </d-card-title>
 
       <div style="display: flex; gap: 8px">

diff --git a/src/styles/directives/elevation.scss b/src/styles/directives/elevation.scss
@@ -9,9 +9,9 @@
   }
 
   @for $i from 1 through 24 {
-    $brightness: $i + 0.5%;
+    $darkness: $i + 0.5%;
     .elevation-n#{$i} {
-      background-color: darken($dark_sheet, $brightness);
+      background-color: darken($dark_sheet, $darkness);
     }
   }
 
@@ -21,6 +21,20 @@
 }
 
 .theme--light {
+  @for $i from 1 through 24 {
+    $elevation: $i + 0.5px;
+    .elevation-#{$i} {
+      box-shadow: rgba(99, 99, 99, 0.2) 0 2px $elevation 1px;
+    }
+  }
+
+  @for $i from 1 through 24 {
+    $elevation: $i + 0.5px;
+    .elevation-n#{$i} {
+      box-shadow: inset rgba(99, 99, 99, 0.2) 0 2px $elevation 1px;
+    }
+  }
+
   .elevation {
     background-color: $light_sheet;
     box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;