gerillass 1.2.0 → 1.2.4

package/package.json

@@ -6,7 +6,7 @@
   "author": "Halil İbrahim Çakıroğlu",
   "main": "scss/_gerillass.scss",
   "license": "Apache-2.0",
-  "version": "1.2.0",
+  "version": "1.2.4",
   "repository": {
     "type": "git",
     "url": "https://github.com/selfishprimate/gerillass"

package/scss/_gerillass-prefix.scss

@@ -798,24 +798,41 @@
 
 
 @mixin gls-loadify($params...) {
-  @if not & and length($params) == 0 {
-    @keyframes loadify {
-      to {
-        opacity: 1;
+  @if not & {
+    @if length($params) == 0 or (length($params) == 1 and nth($params, 1) == "init") {
+      @keyframes loadify {
+        to {
+          opacity: 1;
+          visibility: visible;
+          backface-visibility: visible;
+        }
+      }
+      %loadify {
+        opacity: 0;
+        visibility: hidden;
+        backface-visibility: hidden;
+        animation-name: loadify;
+        animation-fill-mode: forwards;
       }
+    } @else if (length($params) == 1 and nth($params, 1) != "init") or (length($params) == 1 and type-of(nth($params, 1)) != "string") {
+      @error "#{nth($params, 1)} is not a valid argument. Please pass `init` as an argument to initialize the effect or do not pass any argument at all.";
+    } @else if length($params) > 1 {
+      @error "Only one argument is allowed when you call this mixin at the root of your stylesheet! Please pass `init` as an argument to initialize the effect or do not pass any argument at all.";
+    }
+  } @else if & {
+    @extend %loadify;
+    @if length($params) == 0 {
+      animation-delay: 0.2s;
+      animation-duration: 0.5s;
+    } @else if length($params) == 1 {
+      animation-delay: #{__isTime(nth($params, 1))};
+      animation-duration: 0.5s;
+    } @else if length($params) == 2 {
+      animation-delay: #{__isTime(nth($params, 1))};
+      animation-duration: #{__isTime(nth($params, 2))};
+    } @else if length($params) > 2 {
+      @error "You cannot pass more than two arguments.";
     }
-  } @else if not & and length($params) > 0 {
-    @warn "PLEASE DO NOT PASS AN ARGUMENT WHEN YOU CALL THE MIXIN AT THE ROOT OF YOUR STYLESHEET! \A";
-  } @else if & and length($params) == 0 {
-    @warn "PLEASE PASS AN ARGUMENT TO SPECIFY HOW MANY SECONDS OR MILLISECONDS THE ELEMENTS WILL BE DELAYED! \A \A .element { \A   @incude loadify(0.2s); \A } \A ";
-  } @else if length($params) > 0 and length($params) < 3 {
-    opacity: 0;
-    animation-name: loadify;
-    animation-fill-mode: forwards;
-    animation-delay: nth($params, 1);
-    animation-duration: if(length($params) == 2, #{nth($params, 2)}, 0.5s);
-  } @else if length($params) > 2 {
-    @error "NO MORE THAN 2 ARGUMENTS ARE ALLOWED! \A";
   }
 }
 

package/scss/_gerillass.scss

@@ -27,6 +27,7 @@
 @import "utilities/font-source";
 @import "utilities/is-color";
 @import "utilities/is-number";
+@import "utilities/is-time";
 @import "utilities/lighten";
 @import "utilities/map-deep-get";
 @import "utilities/null";

package/scss/library/_loadify.scss

@@ -1,33 +1,40 @@
 @charset "UTF-8";
 
 @mixin loadify($params...) {
-  @if not & and length($params) == 0 {
-    @keyframes loadify {
-      to {
-        opacity: 1;
-        visibility: visible;
-        backface-visibility: visible;
+  @if not & {
+    @if length($params) == 0 or (length($params) == 1 and nth($params, 1) == "init") {
+      @keyframes loadify {
+        to {
+          opacity: 1;
+          visibility: visible;
+          backface-visibility: visible;
+        }
       }
+      %loadify {
+        opacity: 0;
+        visibility: hidden;
+        backface-visibility: hidden;
+        animation-name: loadify;
+        animation-fill-mode: forwards;
+      }
+    } @else if (length($params) == 1 and nth($params, 1) != "init") or (length($params) == 1 and type-of(nth($params, 1)) != "string") {
+      @error "#{nth($params, 1)} is not a valid argument. Please pass `init` as an argument to initialize the effect or do not pass any argument at all.";
+    } @else if length($params) > 1 {
+      @error "Only one argument is allowed when you call this mixin at the root of your stylesheet! Please pass `init` as an argument to initialize the effect or do not pass any argument at all.";
     }
-  } @else if not & and length($params) > 0 {
-    @error "PLEASE DO NOT PASS AN ARGUMENT WHEN YOU CALL LOADIFY MIXIN AT THE ROOT OF YOUR STYLESHEET! \A";
-  } @else if & and length($params) == 0 or length($params) < 3 {
-    opacity: 0;
-    visibility: hidden;
-    backface-visibility: hidden;
-    animation-name: loadify;
-    animation-fill-mode: forwards;
+  } @else if & {
+    @extend %loadify;
     @if length($params) == 0 {
       animation-delay: 0.2s;
       animation-duration: 0.5s;
     } @else if length($params) == 1 {
-      animation-delay: #{nth($params, 1)};
+      animation-delay: #{__isTime(nth($params, 1))};
       animation-duration: 0.5s;
     } @else if length($params) == 2 {
-      animation-delay: #{nth($params, 1)};
-      animation-duration: #{nth($params, 2)};
+      animation-delay: #{__isTime(nth($params, 1))};
+      animation-duration: #{__isTime(nth($params, 2))};
+    } @else if length($params) > 2 {
+      @error "You cannot pass more than two arguments.";
     }
-  } @else if length($params) > 2 {
-    @error "NO MORE THAN 2 ARGUMENTS ARE ALLOWED! \A";
   }
 }

package/scss/utilities/_is-time.scss

@@ -0,0 +1,9 @@
+@function __isTime($value) {
+  @for $i from 1 through length($value) {
+    @if (type-of($value) == "number" and index("ms" "s", unit($value)) != null) or $value == 0 {
+      @return $value;
+    } @else {
+      @error "'#{$value}' is not a valid time value. Time values must be specified in either seconds (s) or milliseconds (ms). Please try one of the following forms: '1s', '0.2s', or '3ms'";
+    }
+  }
+}

package/CHANGELOG.md

@@ -1,20 +0,0 @@
-# Changelog
-_Change is the essence._
-
-## 1.2.0
-* Add Loadify: A new mixin to help page elements render more natural during the time of page loads.
-
-## 1.1.3
-* Add box-sizing property to Columnizer mixin.
-
-## 1.1.2
-* Uptade for security vulnerabilities.
-
-## 1.1.1
-* Bugfix for a comment.
-
-## 1.1.0
-* Remove all the `gls-` prefixes from the mixin files under the `library` folder and make prefix usage optional (`gls-` prefix still can ben use).
-
-## 0.0.1
-* Changelog created!