refactor: customizable duration

zkreations · Feb 12, 2023 · 82e21b4 · 82e21b4
1 parent 279e6d3
commit 82e21b4
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 31 deletions.
diff --git a/main.css b/main.css
@@ -11,7 +11,7 @@
 [class*=img-] figcaption,
 [class*=img-] figcaption::before,
 [class*=img-] figcaption::after {
-  transition-duration: 0.6s;
+  transition-duration: 2s;
   transition-property: opacity, transform;
   transition-timing-function: cubic-bezier(0.54, 0, 0.1, 1);
 }
@@ -54,7 +54,7 @@
 }
 
 [class*=img-push]:hover img {
-  transition-duration: 0.8s;
+  transition-duration: 2.5s;
 }
 [class*=img-push] figcaption {
   z-index: -1;
@@ -130,10 +130,10 @@
   opacity: 0;
 }
 .img-flip-x:hover figcaption {
-  transition-delay: 0.2s;
+  transition-delay: 0.8s;
 }
 .img-flip-x:not(:hover) img {
-  transition-delay: 0.2s;
+  transition-delay: 0.8s;
 }
 .img-flip-x:not(:hover) figcaption {
   transform: rotateX(90deg);
@@ -146,10 +146,10 @@
   opacity: 0;
 }
 .img-flip-y:hover figcaption {
-  transition-delay: 0.2s;
+  transition-delay: 0.8s;
 }
 .img-flip-y:not(:hover) img {
-  transition-delay: 0.2s;
+  transition-delay: 0.8s;
 }
 .img-flip-y:not(:hover) figcaption {
   transform: rotateY(90deg);
@@ -162,10 +162,10 @@
   opacity: 0;
 }
 .img-flip-xy:hover figcaption {
-  transition-delay: 0.2s;
+  transition-delay: 0.8s;
 }
 .img-flip-xy:not(:hover) img {
-  transition-delay: 0.2s;
+  transition-delay: 0.8s;
 }
 .img-flip-xy:not(:hover) figcaption {
   transform: rotate3d(-1, 1, 0, 100deg);
@@ -177,7 +177,7 @@
   transition-property: color;
 }
 [class*=img-blinds]:hover figcaption {
-  transition-delay: 0.2s;
+  transition-delay: 0.8s;
 }
 [class*=img-blinds]::before, [class*=img-blinds]::after,
 [class*=img-blinds] figcaption::before,
@@ -193,13 +193,13 @@
   transition-property: opacity, transform, height, width;
 }
 [class*=img-blinds]::after {
-  transition-delay: 0.05s;
+  transition-delay: 0.2s;
 }
 [class*=img-blinds] figcaption::before {
-  transition-delay: 0.1s;
+  transition-delay: 0.4s;
 }
 [class*=img-blinds] figcaption::after {
-  transition-delay: 0.15s;
+  transition-delay: 0.6s;
 }
 [class*=img-blinds] figcaption::before,
 [class*=img-blinds] figcaption::after {
@@ -285,7 +285,7 @@
   opacity: 0;
 }
 [class*=img-back]:hover figcaption {
-  transition-delay: 0.2s;
+  transition-delay: 0.8s;
 }
 [class*=img-back]:not(:hover) figcaption {
   opacity: 0;

diff --git a/main.min.css b/main.min.css
diff --git a/scss/_core.scss b/scss/_core.scss
@@ -13,7 +13,7 @@
   figcaption,
   figcaption::before,
   figcaption::after {
-    transition-duration: .6s;
+    transition-duration: $imghv-duration;
     transition-property: opacity, transform;
     transition-timing-function: cubic-bezier(.54, 0, .1, 1);
   }

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1,9 +1,10 @@
 // Variables
 $imghv-selector: "img" !default;
-$imghv-bg: rgb(0 0 0 / 90%);
-$imghv-padding: 1.5rem;
-$imghv-color: #fff;
-$imghv-fs: 1.125rem;
+$imghv-bg: rgb(0 0 0 / 90%) !default;
+$imghv-padding: 1.5rem !default;
+$imghv-color: #fff !default;
+$imghv-fs: 1.125rem !default;
+$imghv-duration: 2s !default;
 
 $escaped-characters: (
   ("<", "%3c"),

diff --git a/scss/effects/_back.scss b/scss/effects/_back.scss
@@ -11,7 +11,7 @@
     }
 
     figcaption {
-      transition-delay: 0.2s;
+      transition-delay: ($imghv-duration * 0.4);
     }
   }
 

diff --git a/scss/effects/_blinds.scss b/scss/effects/_blinds.scss
@@ -7,7 +7,7 @@
 
   &:hover {
     figcaption {
-      transition-delay: 0.2s;
+      transition-delay: ($imghv-duration * 0.4);
     }
   }
 
@@ -27,15 +27,15 @@
   }
 
   &::after {
-    transition-delay: 0.05s;
+    transition-delay: ($imghv-duration * 0.1);
   }
 
   figcaption::before {
-    transition-delay: 0.1s;
+    transition-delay:($imghv-duration * 0.2);
   }
 
   figcaption::after {
-    transition-delay: 0.15s;
+    transition-delay: ($imghv-duration * 0.3);
   }
 
   figcaption::before,

diff --git a/scss/effects/_flip.scss b/scss/effects/_flip.scss
@@ -64,13 +64,13 @@
         opacity: 0;
       }
       figcaption {
-        transition-delay: 0.2s;
+        transition-delay: ($imghv-duration * 0.4);
       }
     }
 
     &:not(:hover) {
       img {
-        transition-delay: 0.2s;
+        transition-delay: ($imghv-duration * 0.4);
       }
       figcaption {
         transform: rotateX(90deg);
@@ -87,13 +87,13 @@
         opacity: 0;
       }
       figcaption {
-        transition-delay: 0.2s;
+        transition-delay: ($imghv-duration * 0.4);
       }
     }
 
     &:not(:hover) {
       img {
-        transition-delay: 0.2s;
+        transition-delay: ($imghv-duration * 0.4);
       }
       figcaption {
         transform: rotateY(90deg);
@@ -111,13 +111,13 @@
         opacity: 0;
       }
       figcaption {
-        transition-delay: 0.2s;
+        transition-delay: ($imghv-duration * 0.4);
       }
     }
 
     &:not(:hover) {
       img {
-        transition-delay: 0.2s;
+        transition-delay: ($imghv-duration * 0.4);
       }
       figcaption {
         transform: rotate3d(-1, 1, 0, 100deg);

diff --git a/scss/effects/_push.scss b/scss/effects/_push.scss
@@ -1,6 +1,6 @@
 [class*=#{$imghv-selector}-push] { 
   &:hover img {
-    transition-duration: .8s;
+    transition-duration: ($imghv-duration * 1.25);
   }
   figcaption {
     z-index: -1;
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,7 +11,7 @@ @@
         }
         figcaption {
-          transition-delay: 0.2s;
+          transition-delay: ($imghv-duration * 0.4);
         }
       }
@@ Expand Down @@