Merge pull request #153 from philippebeck/dev

Release 5.0.3

README.md

@@ -45,8 +45,8 @@ Yarn : `yarn add animadio`
 [![jsDelivr Montly Downloads](https://img.shields.io/jsdelivr/npm/hm/animadio.svg?label=jsDelivr+Montly+Downloads)](https://www.jsdelivr.com/package/npm/animadio)
 [![jsDelivr Yearly Downloads](https://img.shields.io/jsdelivr/npm/hy/animadio.svg?label=jsDelivr+Yearly+Downloads)](https://www.jsdelivr.com/package/npm/animadio)
 
--   Development : [https://cdn.jsdelivr.net/npm/[email protected].2/dist/animadio.css](https://cdn.jsdelivr.net/npm/[email protected].2/dist/animadio.css)  
--   Production : [https://cdn.jsdelivr.net/npm/[email protected].2/dist/animadio.min.css](https://cdn.jsdelivr.net/npm/[email protected].2/dist/animadio.min.css)  
+-   Development : [https://cdn.jsdelivr.net/npm/[email protected].3/dist/animadio.css](https://cdn.jsdelivr.net/npm/[email protected].3/dist/animadio.css)  
+-   Production : [https://cdn.jsdelivr.net/npm/[email protected].3/dist/animadio.min.css](https://cdn.jsdelivr.net/npm/[email protected].3/dist/animadio.min.css)  
 
 ---
 

dist/animadio.css

@@ -1,4 +1,4 @@
-/*! animadio v5.0.2 | https://animadio.org | MIT License */
+/*! animadio v5.0.3 | https://animadio.org | MIT License */
 
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 
@@ -355,8 +355,6 @@ template {
 /********** ANIMADIO **********/
 /******************************/
 :root {
-  --opacity-dark: 0.8;
-  --opacity-light: 0.2;
   /********** FONT **********/
   --sans-serif: sans-serif;
   --serif: serif;
@@ -384,6 +382,8 @@ template {
   --in: rgb(0, 119, 181);
   --pp: rgb(39, 52, 106);
   --tw: rgb(29, 161, 242);
+  --opacity-dark: 0.8;
+  --opacity-light: 0.2;
   --primary-dark: rgba(65, 105, 225, var(--opacity-dark));
   --primary-light: rgba(65, 105, 225, var(--opacity-light));
   --secondary-dark: rgba(220, 220, 220, var(--opacity-dark));
@@ -546,7 +546,7 @@ button,
   --button-cursor: pointer;
 }
 
-/********** FLEX **********/
+/********** FLEX/GRID **********/
 [class*=flex],
 [class*=col],
 [class*=row] {
@@ -561,19 +561,18 @@ button,
   --row-padding: 10px 0;
 }
 
-/********** GRID **********/
 [class*=grid] {
   --grid-max-width: 100vw;
   --grid-margin: auto;
 }
 
-/********** GAP **********/
 [class*=gap-] {
-  --gap-tn: 1px;
-  --gap-sm: 2px;
-  --gap-md: 5px;
-  --gap-lg: 10px;
-  --gap-wd: 20px;
+  --gap1: 50px;
+  --gap2: 20px;
+  --gap3: 10px;
+  --gap4: 5px;
+  --gap5: 2px;
+  --gap6: 1px;
 }
 
 /********** CONTAINER **********/
@@ -1041,12 +1040,6 @@ pre {
   text-align: var(--code-text-align);
 }
 
-/********** HIDDEN CONTROLS **********/
-[class*=check],
-[class*=radio] {
-  display: none !important;
-}
-
 /********** DISPLAY **********/
 .hide,
 .global-hide > * {
@@ -1550,33 +1543,153 @@ pre {
   }
 }
 /********** GAP **********/
-[class*=gap-][class*=-tn] {
-  gap: var(--gap-tn);
+[class*=gap-][class*="-1tn"] {
+  gap: var(--gap1);
+}
+
+[class*=gap-][class*="-2tn"] {
+  gap: var(--gap2);
+}
+
+[class*=gap-][class*="-3tn"] {
+  gap: var(--gap3);
+}
+
+[class*=gap-][class*="-4tn"] {
+  gap: var(--gap4);
+}
+
+[class*=gap-][class*="-5tn"] {
+  gap: var(--gap5);
+}
+
+[class*=gap-][class*="-6tn"] {
+  gap: var(--gap6);
 }
 
 @media (min-width: 576px) {
-  [class*=gap-][class*=-sm] {
-    gap: var(--gap-sm);
+  [class*=gap-][class*="-1sm"] {
+    gap: var(--gap1);
+  }
+
+  [class*=gap-][class*="-2sm"] {
+    gap: var(--gap2);
+  }
+
+  [class*=gap-][class*="-3sm"] {
+    gap: var(--gap3);
+  }
+
+  [class*=gap-][class*="-4sm"] {
+    gap: var(--gap4);
+  }
+
+  [class*=gap-][class*="-5sm"] {
+    gap: var(--gap5);
+  }
+
+  [class*=gap-][class*="-6sm"] {
+    gap: var(--gap6);
   }
 }
 @media (min-width: 768px) {
-  [class*=gap-][class*=-md] {
-    gap: var(--gap-md);
+  [class*=gap-][class*="-1md"] {
+    gap: var(--gap1);
+  }
+
+  [class*=gap-][class*="-2md"] {
+    gap: var(--gap2);
+  }
+
+  [class*=gap-][class*="-3md"] {
+    gap: var(--gap3);
+  }
+
+  [class*=gap-][class*="-4md"] {
+    gap: var(--gap4);
+  }
+
+  [class*=gap-][class*="-5md"] {
+    gap: var(--gap5);
+  }
+
+  [class*=gap-][class*="-6md"] {
+    gap: var(--gap6);
   }
 }
 @media (min-width: 992px) {
-  [class*=gap-][class*=-lg] {
-    gap: var(--gap-lg);
+  [class*=gap-][class*="-1lg"] {
+    gap: var(--gap1);
+  }
+
+  [class*=gap-][class*="-2lg"] {
+    gap: var(--gap2);
+  }
+
+  [class*=gap-][class*="-3lg"] {
+    gap: var(--gap3);
+  }
+
+  [class*=gap-][class*="-4lg"] {
+    gap: var(--gap4);
+  }
+
+  [class*=gap-][class*="-5lg"] {
+    gap: var(--gap5);
+  }
+
+  [class*=gap-][class*="-6lg"] {
+    gap: var(--gap6);
   }
 }
 @media (min-width: 1200px) {
-  [class*=gap-][class*=-xl] {
-    gap: var(--gap-xl);
+  [class*=gap-][class*="-1xl"] {
+    gap: var(--gap1);
+  }
+
+  [class*=gap-][class*="-2xl"] {
+    gap: var(--gap2);
+  }
+
+  [class*=gap-][class*="-3xl"] {
+    gap: var(--gap3);
+  }
+
+  [class*=gap-][class*="-4xl"] {
+    gap: var(--gap4);
+  }
+
+  [class*=gap-][class*="-5xl"] {
+    gap: var(--gap5);
+  }
+
+  [class*=gap-][class*="-6xl"] {
+    gap: var(--gap6);
   }
 }
 @media (min-width: 1600px) {
-  [class*=gap-][class*=-wd] {
-    gap: var(--gap-wd);
+  [class*=gap-][class*="-1wd"] {
+    gap: var(--gap1);
+  }
+
+  [class*=gap-][class*="-2wd"] {
+    gap: var(--gap2);
+  }
+
+  [class*=gap-][class*="-3wd"] {
+    gap: var(--gap3);
+  }
+
+  [class*=gap-][class*="-4wd"] {
+    gap: var(--gap4);
+  }
+
+  [class*=gap-][class*="-5wd"] {
+    gap: var(--gap5);
+  }
+
+  [class*=gap-][class*="-6wd"] {
+    gap: var(--gap6);
   }
 }
 /********** PLACE CONTENT **********/
@@ -4727,7 +4840,7 @@ pre {
   animation-direction: alternate-reverse;
 }
 
-/********** Cursor **********/
+/********** CURSOR **********/
 .cell,
 .global-cell * {
   cursor: cell;
@@ -4764,4 +4877,4 @@ pre {
 }
 
 /* Author: Philippe Beck <[email protected]>
- Updated: 25th Apr 2022 @ 10:58:41 PM */
+ Updated: 26th Apr 2022 @ 5:44:07 PM */

package.json

@@ -1,6 +1,6 @@
 {
   "name": "animadio",
-  "version": "5.0.2",
+  "version": "5.0.3",
   "description": "Animadio Framework - Grid & Flexbox Layouts - Reusable & Customizable Elements - Perform Complex Animations - Controls by Radio Buttons",
   "keywords": [
     "css framework",

src/scss/_classes.scss

@@ -1,9 +1,3 @@
-/********** HIDDEN CONTROLS **********/
-[class*=check],
-[class*=radio] {
-  display: none !important;
-}
-
 /********** DISPLAY **********/
 @each $key, $value in $displays {
   @include global($key, "display", $value);
@@ -77,11 +71,15 @@
 }
 
 /********** GAP **********/
-@include gap("tn");
+@each $key, $value in $gap {
+  @include gap($key, "tn");
+}
 
-@each $key, $value in $breakpoints {
-  @media (min-width: $value) {
-    @include gap($key);
+@each $type, $breakpoint in $breakpoints {
+  @media (min-width: $breakpoint) {
+    @each $key, $value in $gap {
+      @include gap($key, $type);
+    }
   }
 }
 
@@ -292,7 +290,7 @@
   @include anima-options($key, "animation-direction", $value);
 }
 
-/********** Cursor **********/
+/********** CURSOR **********/
 @each $key, $value in $cursor {
   @include global-all($key, "cursor", $value);
 }

src/scss/_maps.scss

@@ -92,12 +92,13 @@ $displays: (
 ) !default;
 
 // ********** GAP **********
-$gaps: (
-  "tn": 1px,
-  "sm": 2px,
-  "md": 5px,
-  "lg": 10px,
-  "wd": 20px
+$gap: (
+  "1": 50px,
+  "2": 20px,
+  "3": 10px,
+  "4": 5px,
+  "5": 2px,
+  "6": 1px
 ) !default;
 
 // ********** PLACE CONTENT **********

src/scss/_mixins.scss

@@ -22,20 +22,19 @@
   }
 }
 
-// ********** GRID (FLEX) **********
+// ********** GRID/FLEX **********
 @mixin grid-template($column, $key) {
   [class*="grid-"][class*="-#{$column}#{$key}"] {
     grid-template: auto/repeat(#{$column}, auto);
   }
 }
 
-@mixin gap($key) {
-  [class*="gap-"][class*="-#{$key}"] {
-    gap: var(--gap-#{$key});
+@mixin gap($size, $type) {
+  [class*="gap-"][class*="-#{$size}#{$type}"] {
+    gap: var(--gap#{$size});
   }
 }
 
-// ********** PLACE **********
 @mixin place-content($key, $type: "", $value: var(--place-content-#{$key})) {
   .content-#{$key}#{$type} {
     place-content: #{$value};