aw-front-helpers 2.5.34 → 3.0.0

package/classes/credits.js

@@ -7,7 +7,7 @@ export default class Credits {
     gsap.registerPlugin(SplitText);
     this._pattern = [
       '\u0074', '\u006f', '\u0075', '\u0074', '\u006f', '\u0063', '\u006c', '\u0069', '\u0063'
-    ].reverse();
+    ];
     this._current = 0;
     this._createBounds();
     this._addEvents();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aw-front-helpers",
-  "version": "2.5.34",
+  "version": "3.0.0",
   "description": "Assets helpers for projects",
   "author": "Yoann Le Poupon",
   "license": "ISC",

package/stylesheets/_medias.scss

@@ -11,20 +11,18 @@ $breakpoint-burger: 1100px !default;
 // MEDIAS
 // ------------------------------------------------------------
 
-$media-query: 'only screen and';
-
 // Queries string
-$mobile: '#{$media-query} (max-width: #{$breakpoint-tablet - 1})';
-$phablet: '#{$media-query} (min-width: #{$breakpoint-phablet})';
-$tablet: '#{$media-query} (min-width: #{$breakpoint-tablet})';
-$tablet-max: '#{$media-query} (max-width: #{$breakpoint-desktop - 1})';
-$tablet-only: '#{$media-query} (min-width: #{$breakpoint-tablet}) and (max-width: #{$breakpoint-desktop - 1})';
-$desktop: '#{$media-query} (min-width: #{$breakpoint-desktop})';
-$desktop-xl: '#{$media-query} (min-width: #{$breakpoint-desktop-xl})';
-$desktop-xxl: '#{$media-query} (min-width: #{$breakpoint-desktop-xxl})';
-$desktop-xxxl: '#{$media-query} (min-width: #{$breakpoint-desktop-xxxl})';
-$burger-enable: '#{$media-query} (max-width: #{$breakpoint-burger - 1})';
-$burger-disable: '#{$media-query} (min-width: #{$breakpoint-burger})';
+$mobile: 'only screen and (max-width: #{$breakpoint-tablet - 1})';
+$phablet: 'only screen and (min-width: #{$breakpoint-phablet})';
+$tablet: 'only screen and (min-width: #{$breakpoint-tablet})';
+$tablet-max: 'only screen and (max-width: #{$breakpoint-desktop - 1})';
+$tablet-only: 'only screen and (min-width: #{$breakpoint-tablet}) and (max-width: #{$breakpoint-desktop - 1})';
+$desktop: 'only screen and (min-width: #{$breakpoint-desktop})';
+$desktop-xl: 'only screen and (min-width: #{$breakpoint-desktop-xl})';
+$desktop-xxl: 'only screen and (min-width: #{$breakpoint-desktop-xxl})';
+$desktop-xxxl: 'only screen and (min-width: #{$breakpoint-desktop-xxxl})';
+$burger-enable: 'only screen and (max-width: #{$breakpoint-burger - 1})';
+$burger-disable: 'only screen and (min-width: #{$breakpoint-burger})';
 
 // Mixins media queries
 @mixin mobile {

package/stylesheets/_mixins.scss

@@ -1,16 +1,4 @@
 @charset "UTF-8";
-
-$color-primary: #000 !default;
-
-$wrapper-max: 1500px !default;
-$wrapper-width-sm: 95% !default;
-$wrapper-width-md: 95% !default;
-$wrapper-width-lg: 90% !default;
-
-$vertical-spacing-mobile: 50px !default;
-$vertical-spacing-tablet: 60px !default;
-$vertical-spacing-desktop: 80px !default;
-
 // ------------------------------------------------------------
 // MIXINS
 // ------------------------------------------------------------
@@ -19,13 +7,13 @@ $vertical-spacing-desktop: 80px !default;
   position: relative;
   margin-left: auto;
   margin-right: auto;
-  width: $wrapper-width-sm;
-  max-width: $wrapper-max;
+  width: var(--wrapper-width-sm);
+  max-width: var(--wrapper-max);
   @include desktop {
-    width: $wrapper-width-md;
+    width: var(--wrapper-width-md);
   }
   @include desktop-xl {
-    width: $wrapper-width-lg;
+    width: var(--wrapper-width-lg);
   }
 }
 
@@ -41,25 +29,25 @@ $vertical-spacing-desktop: 80px !default;
 
 @mixin vertical-spacing-top($facteur: 1) {
   & {
-    margin-top: $vertical-spacing-mobile * $facteur;
+    margin-top: calc( var(--vertical-spacing-mobile) * $facteur );
   }
   @include tablet {
-    margin-top: $vertical-spacing-tablet * $facteur;
+    margin-top: calc( var(--vertical-spacing-tablet) * $facteur );
   }
   @include desktop {
-    margin-top: $vertical-spacing-desktop * $facteur;
+    margin-top: calc( var(--vertical-spacing-desktop) * $facteur );
   }
 }
 
 @mixin vertical-spacing-bottom($facteur: 1) {
   & {
-    margin-bottom: $vertical-spacing-mobile * $facteur;
+    margin-bottom: calc( var(--vertical-spacing-mobile) * $facteur );
   }
   @include tablet {
-    margin-bottom: $vertical-spacing-tablet * $facteur;
+    margin-bottom: calc( var(--vertical-spacing-tablet) * $facteur );
   }
   @include desktop {
-    margin-bottom: $vertical-spacing-desktop * $facteur;
+    margin-bottom: calc( var(--vertical-spacing-desktop) * $facteur );
   }
 }
 
@@ -70,25 +58,25 @@ $vertical-spacing-desktop: 80px !default;
 
 @mixin vertical-spacing-inner-top($facteur: 1) {
   & {
-    padding-top: $vertical-spacing-mobile * $facteur;
+    padding-top: calc( var(--vertical-spacing-mobile) * $facteur );
   }
   @include tablet {
-    padding-top: $vertical-spacing-tablet * $facteur;
+    padding-top: calc( var(--vertical-spacing-tablet) * $facteur );
   }
   @include desktop {
-    padding-top: $vertical-spacing-desktop * $facteur;
+    padding-top: calc( var(--vertical-spacing-desktop) * $facteur );
   }
 }
 
 @mixin vertical-spacing-inner-bottom($facteur: 1) {
   & {
-    padding-bottom: $vertical-spacing-mobile * $facteur;
+    padding-bottom: calc( var(--vertical-spacing-mobile) * $facteur );
   }
   @include tablet {
-    padding-bottom: $vertical-spacing-tablet * $facteur;
+    padding-bottom: calc( var(--vertical-spacing-tablet) * $facteur );
   }
   @include desktop {
-    padding-bottom: $vertical-spacing-desktop * $facteur;
+    padding-bottom: calc( var(--vertical-spacing-desktop) * $facteur );
   }
 }
 
@@ -188,15 +176,15 @@ $vertical-spacing-desktop: 80px !default;
   }
 }
 
-@mixin loader($color: $color-primary, $scale: 1, $position: after) {
+@mixin loader($color: var(--color-primary), $scale: 1, $position: after) {
   &::#{$position} {
     content: '';
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translateX(-50%) translateY(-50%);
-    border: rem(3 * $scale) solid rgba($color, 0.1);
-    border-top: rem(3 * $scale) solid rgba($color, 1);
+    border: rem(3 * $scale) solid $color;
+    border-top: rem(3 * $scale) solid color-mix(in srgb, #{$color} 10%, transparent);
     border-radius: 50%;
     width: rem(30 * $scale);
     height: rem(30 * $scale);

package/stylesheets/_reset.scss

@@ -1,6 +1,3 @@
-$px-base: 16 !default;
-$color-link: black !default;
-
 html,
 body,
 div,

package/stylesheets/_variables.scss

@@ -1,89 +0,0 @@
-// ------------------------------------------------------------
-// VARIABLES
-// ------------------------------------------------------------
-
-// -------------------------
-// Path
-// -------------------------
-$base-images: '../images' !default;
-
-// -------------------------
-// Colors
-// -------------------------
-$white: #fff;
-$black: #000;
-$red: #c82a28 !default;
-$green: #0d8e00 !default;
-
-// socials
-$social-fb: #3b5998;
-$social-tw: #3b9ef2;
-$social-goo: #dd4b39;
-$social-dp: #007ee5;
-$social-in: #d73576;
-
-// variables
-$color-error: $red !default;
-$color-success: $green !default;
-
-// -------------------------
-// Typography
-// -------------------------
-
-/* -----
-Font size
------ */
-$px-base: 16 !default;
-
-// -------------------------
-// Breakpoints
-// -------------------------
-$breakpoint-phablet: 480px !default;
-$breakpoint-tablet: 768px !default;
-$breakpoint-desktop: 1024px !default;
-$breakpoint-desktop-xl: 1280px !default;
-$breakpoint-desktop-xxl: 1440px !default;
-$breakpoint-desktop-xxxl: 1680px !default;
-$breakpoint-burger: 1100px !default;
-
-$wrapper-max: 1440px !default;
-
-// -------------------------
-// Easing
-// -------------------------
-$ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
-$ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-$ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
-$ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-$ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715);
-$ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
-$ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
-$ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);
-
-$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-$ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
-$ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
-$ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
-$ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
-$ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
-$ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
-$ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
-
-$ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
-$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
-$ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
-$ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
-$ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
-$ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
-$ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
-$ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-
-/* -----
-Transition
------ */
-$transition-in-duration: 0.2s !default;
-$transition-in-ease: $ease-in-sine !default;
-$transition-out-duration: 0.5s !default;
-$transition-out-ease: $ease-out-sine !default;
-$transition-in-hover: 0.15s $ease-in-quad !default;
-$transition-out-hover: 0.25s $ease-out-quad !default;