Add elevation transition class elv-transition

index.html

@@ -95,6 +95,19 @@
                 <div class="child elv-12"></div>
                 <div class="child elv-16"></div>
                 <div class="child elv-24"></div>
+                <div id="elv-transition" class="child elv-transition elv-1"></div>
+                <script>
+                    const elm = document.getElementById("elv-transition");
+                    setInterval(() => {
+                        if (elm.classList.contains("elv-1")) {
+                            elm.classList.remove("elv-1")
+                            elm.classList.add("elv-24");
+                        } else {
+                            elm.classList.remove("elv-24")
+                            elm.classList.add("elv-1");
+                        }
+                    }, 600);
+                </script>
             </div>
         </div>
 

package.json

@@ -1,11 +1,12 @@
 {
   "name": "@hibas123/theme",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "",
   "main": " ",
   "files": [
     "out/*.css",
-    "src/*"
+    "src/*",
+    "Roboto-Regular.woff2"
   ],
   "scripts": {
     "build": "sass src/base.scss:out/base.css src/dark.scss:out/dark.css src/light.scss:out/light.css",

src/_maketheme.scss

@@ -24,6 +24,10 @@ $button-color: #CCCCCC !default;
     }
 }
 
+.elv-transition {
+    @include ElevationTransition();
+}
+
 
 @function darken-brighten-color($color, $val) {
     @if (lightness($color) > 50) {

src/dark.scss

@@ -9,4 +9,8 @@ $disabled-brightness: 1.1;
     z-index: $dp;
 }
 
+@mixin ElevationTransition() {
+    transition: background .5s;
+}
+
 @import "./_maketheme.scss";

src/light.scss

@@ -54,4 +54,8 @@ $disabled-brightness: .9;
     z-index: $dp;
 }
 
+@mixin ElevationTransition() {
+    transition: box-shadow .5s;
+}
+
 @import "./_maketheme.scss";