gerillass 1.1.3 → 1.2.0

package/CHANGELOG.md

@@ -1,6 +1,9 @@
 # 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.
 

package/package.json

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

package/scss/_gerillass-prefix.scss

@@ -797,6 +797,30 @@
 
 
 
+@mixin gls-loadify($params...) {
+  @if not & and length($params) == 0 {
+    @keyframes loadify {
+      to {
+        opacity: 1;
+      }
+    }
+  } @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";
+  }
+}
+
+
+
 @mixin gls-only($params...) {
   @if length($params) == 0 {
     @error "Please pass an argument. The argument must be either a negative or positive number or list of numbers. Or pass one of the following predefined string values: 'first', 'last', 'odd', 'even'.";

package/scss/_gerillass.scss

@@ -63,6 +63,7 @@
 @import "library/font-face";
 @import "library/hide";
 @import "library/linear-gradient";
+@import "library/loadify";
 @import "library/only";
 @import "library/placeholder-shown";
 @import "library/placeholder";

package/scss/library/_loadify.scss

@@ -0,0 +1,33 @@
+@charset "UTF-8";
+
+@mixin loadify($params...) {
+  @if not & and length($params) == 0 {
+    @keyframes loadify {
+      to {
+        opacity: 1;
+        visibility: visible;
+        backface-visibility: visible;
+      }
+    }
+  } @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;
+    @if length($params) == 0 {
+      animation-delay: 0.2s;
+      animation-duration: 0.5s;
+    } @else if length($params) == 1 {
+      animation-delay: #{nth($params, 1)};
+      animation-duration: 0.5s;
+    } @else if length($params) == 2 {
+      animation-delay: #{nth($params, 1)};
+      animation-duration: #{nth($params, 2)};
+    }
+  } @else if length($params) > 2 {
+    @error "NO MORE THAN 2 ARGUMENTS ARE ALLOWED! \A";
+  }
+}