gerillass 1.1.1 → 1.2.1

package/CHANGELOG.md

@@ -1,6 +1,18 @@
 # Changelog
 _Change is the essence._
 
+## 1.2.1
+* Add @extend fuctionality to use Loadify mixin for multiple selectors.
+
+## 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.
 

package/README.md

@@ -16,6 +16,7 @@ Hope you’ll enjoy using it!
 
 - [Gerillass Website](https://gerillass.com)
 - [Gerillass Documentation](https://docs.gerillass.com)
+- [Gerillass Blog](https://medium.com/gerillass)
 - [Twitter](https://twitter.com/gerillass)
 
 ## Table of Contents

package/package.json

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

package/scss/_gerillass-prefix.scss

@@ -533,6 +533,7 @@
   $fill: false;
   display: flex;
   flex-wrap: wrap;
+  @include border-box;
   > * {
     @if length($params) == 1 {
       flex: 0 0 calc(100% / #{$columns});
@@ -796,6 +797,43 @@
 
 
 
+@mixin gls-loadify($params...) {
+  @if not & and length($params) == 0 {
+    @keyframes loadify {
+      to {
+        opacity: 1;
+        visibility: visible;
+        backface-visibility: visible;
+      }
+    }
+    .static-rules {
+      opacity: 0;
+      visibility: hidden;
+      backface-visibility: hidden;
+      animation-name: loadify;
+      animation-fill-mode: forwards;
+    }
+  } @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 {
+    @extend .static-rules;
+    @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";
+  }
+}
+
+
+
 @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/_columnizer.scss

@@ -6,6 +6,7 @@
   $fill: false;
   display: flex;
   flex-wrap: wrap;
+  @include border-box;
   > * {
     @if length($params) == 1 {
       flex: 0 0 calc(100% / #{$columns});

package/scss/library/_loadify.scss

@@ -0,0 +1,36 @@
+@charset "UTF-8";
+
+@mixin loadify($params...) {
+  @if not & and length($params) == 0 {
+    @keyframes loadify {
+      to {
+        opacity: 1;
+        visibility: visible;
+        backface-visibility: visible;
+      }
+    }
+    .static-rules {
+      opacity: 0;
+      visibility: hidden;
+      backface-visibility: hidden;
+      animation-name: loadify;
+      animation-fill-mode: forwards;
+    }
+  } @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 {
+    @extend .static-rules;
+    @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";
+  }
+}