move.gl 0.0.1 → 0.0.2

package/scss/mixins/animations/_wobble.scss

@@ -1,254 +0,0 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
-////
-/// 
-/// Wobble Animations Mixin Module
-/// ===========================================================================
-/// 
-/// This module ...
-/// 
-/// 
-/// @group Animations
-/// @author Scape Agency
-/// @link https://move.gl
-/// @since 0.1.0 initial release
-/// @todo None
-/// @access public
-/// 
-////
-
-
-// ============================================================================
-// Use
-// ============================================================================
-
-@use "../dev" as *;
-@use "../variables" as *;
-@use "../keyframes" as *;
-@use "base" as *;
-
-
-// ============================================================================
-// Mixins
-// ============================================================================
-
-
-
-
-
-///
-/// Wobble Animation
-/// Creates a wobble effect by rotating an element back and forth.
-/// @name animate_wobble
-/// @param {Angle} $angle [5deg] - The maximum rotation angle during the wobble.
-/// @param {Duration} $duration [$animate_base_duration] - The duration of the animation.
-/// @param {String} $timing_function [ease-in-out] - The timing function for the animation.
-/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
-///
-@mixin animate_wobble(
-    $angle: 5deg, 
-    $duration: $animate_base_duration, 
-    $timing_function: ease-in-out, 
-    $iteration_count: $animate_base_iteration_count
-) {
-    @include animate_base(
-        animate_wobble,
-        $duration,
-        $timing_function,
-        $iteration_count,
-    );
-    @keyframes animate_wobble {
-        0%, 100% { transform: rotate(0deg); }
-        25% { transform: rotate(-$angle); }
-        50% { transform: rotate($angle); }
-        75% { transform: rotate(-$angle); }
-    }
-}
-
-
-// Gentle Wobble Animation
-// ----------------------------------------------------------------------------
-
-///
-/// Gentle Wobble Animation
-/// A slower and subtler wobble animation.
-/// @name animate_wobble_slow
-/// @param {Angle} $angle [3deg] - The maximum rotation angle during the wobble.
-/// @param {Duration} $duration [$animate_base_duration_slow] - The duration of the animation.
-/// @param {String} $timing_function [ease-in-out] - The timing function for the animation.
-/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
-///
-@mixin animate_wobble_slow(
-    $angle: 3deg, 
-    $duration: $animate_base_duration_slow,
-    $timing_function: ease-in-out, 
-    $iteration_count: $animate_base_iteration_count
-) {
-    @include animate_base(
-        animate_wobble_slow,
-        $duration,
-        $timing_function,
-        $iteration_count,
-    );
-    @keyframes animate_wobble_slow {
-        0%, 100% { transform: rotate(0deg); }
-        25% { transform: rotate(-$angle); }
-        50% { transform: rotate($angle); }
-        75% { transform: rotate(-$angle); }
-    }
-}
-
-
-// Rapid Wobble Animation
-// ----------------------------------------------------------------------------
-
-///
-/// Rapid Wobble Animation
-/// A faster and more intense wobble animation.
-/// @name animate_wobble_fast
-/// @param {Angle} $angle [10deg] - The maximum rotation angle during the wobble.
-/// @param {Duration} $duration [$animate_base_duration_fast] - The duration of the animation.
-/// @param {String} $timing_function [ease-in-out] - The timing function for the animation.
-/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
-///
-@mixin animate_wobble_fast(
-    $angle: 10deg, 
-    $duration: $animate_base_duration_fast, 
-    $timing_function: ease-in-out, 
-    $iteration_count: $animate_base_iteration_count
-) {
-    @include animate_base(
-        animate_wobble_fast,
-        $duration,
-        $timing_function,
-        $iteration_count,
-    );
-    @keyframes animate_wobble_fast {
-        0%, 100% { transform: rotate(0deg); }
-        25% { transform: rotate(-$angle); }
-        50% { transform: rotate($angle); }
-        75% { transform: rotate(-$angle); }
-    }
-}
-
-
-// Wobble with Scale Animation
-// ----------------------------------------------------------------------------
-
-///
-/// Wobble with Scale Animation
-/// A wobble animation combined with a scaling effect.
-/// @name animate_wobble_scale
-/// @param {Angle} $angle [5deg] - The maximum rotation angle during the wobble.
-/// @param {Number} $scale [1.1] - The scale factor during the wobble.
-/// @param {Duration} $duration [$animate_base_duration] - The duration of the animation.
-/// @param {String} $timing_function [ease-in-out] - The timing function for the animation.
-/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
-///
-@mixin animate_wobble_scale(
-    $angle: 5deg, 
-    $scale: 1.1,
-    $duration: $animate_base_duration, 
-    $timing_function: ease-in-out, 
-    $iteration_count: $animate_base_iteration_count
-) {
-    @include animate_base(
-        animate_wobble_scale,
-        $duration,
-        $timing_function,
-        $iteration_count,
-    );
-    @keyframes animate_wobble_scale {
-        0%, 100% { transform: scale(1) rotate(0deg); }
-        25% { transform: scale($scale) rotate(-$angle); }
-        50% { transform: scale($scale) rotate($angle); }
-        75% { transform: scale($scale) rotate(-$angle); }
-    }
-}
-
-
-
-
-// originally authored by Nick Pettit - https://github.com/nickpettit/glide
-
-// @-webkit-keyframes wobble {
-//     from {
-//       -webkit-transform: none;
-//       transform: none;
-//     }
-  
-//     15% {
-//       -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
-//       transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
-//     }
-  
-//     30% {
-//       -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
-//       transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
-//     }
-  
-//     45% {
-//       -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
-//       transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
-//     }
-  
-//     60% {
-//       -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
-//       transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
-//     }
-  
-//     75% {
-//       -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
-//       transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
-//     }
-  
-//     100% {
-//       -webkit-transform: none;
-//       transform: none;
-//     }
-//   }
-  
-//   @keyframes wobble {
-//     from {
-//       -webkit-transform: none;
-//       transform: none;
-//     }
-  
-//     15% {
-//       -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
-//       transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
-//     }
-  
-//     30% {
-//       -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
-//       transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
-//     }
-  
-//     45% {
-//       -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
-//       transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
-//     }
-  
-//     60% {
-//       -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
-//       transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
-//     }
-  
-//     75% {
-//       -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
-//       transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
-//     }
-  
-//     100% {
-//       -webkit-transform: none;
-//       transform: none;
-//     }
-//   }
-  
-//   .wobble {
-//     -webkit-animation-name: wobble;
-//     animation-name: wobble;
-//   }
-  

package/scss/mixins/animations/_zoom.scss

@@ -1,166 +0,0 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
-////
-/// 
-/// Zoom Animations Mixin Module
-/// ===========================================================================
-/// 
-/// This module ...
-/// 
-/// 
-/// @group Animations
-/// @author Scape Agency
-/// @link https://move.gl
-/// @since 0.1.0 initial release
-/// @todo None
-/// @access public
-/// 
-////
-
-
-// ============================================================================
-// Use
-// ============================================================================
-
-@use "../dev" as *;
-@use "../variables" as *;
-@use "../keyframes" as *;
-@use "base" as *;
-
-
-// ============================================================================
-// Mixins
-// ============================================================================
-
-
-///
-/// Zoom Animation
-/// Creates a zoom effect by scaling an element.
-/// 
-/// @name animate_zoom
-/// @param {Number} $scale [1.5] - The scale factor at the peak of the animation.
-/// @param {Duration} $duration [$animate_base_duration] - The duration of the animation.
-/// @param {String} $timing_function [ease-in-out] - The timing function for the animation.
-/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
-/// 
-@mixin animate_zoom(
-    $scale: 1.5, 
-    $duration: $animate_base_duration, 
-    $timing_function: ease-in-out, 
-    $iteration_count: $animate_base_iteration_count
-) {
-    @include animate_base(
-        animate_zoom,
-        $duration,
-        $timing_function,
-        $iteration_count,
-    );
-    @keyframes animate_zoom {
-        0%, 100% { transform: scale(1); }
-        50% { transform: scale($scale); }
-    }
-}
-
-
-
-// Gentle Zoom Animation
-// ----------------------------------------------------------------------------
-
-///
-/// Gentle Zoom Animation
-/// A slower and subtler zoom animation.
-/// 
-/// @name animate_zoom_slow
-/// @param {Number} $scale [1.3] - The scale factor at the peak of the animation.
-/// @param {Duration} $duration [$animate_base_duration_slow] - The duration of the animation.
-/// @param {String} $timing_function [ease-in-out] - The timing function for the animation.
-/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
-///
-@mixin animate_zoom_slow(
-    $scale: 1.3, 
-    $duration: $animate_base_duration_slow,
-    $timing_function: ease-in-out, 
-    $iteration_count: $animate_base_iteration_count
-) {
-    @include animate_base(
-        animate_zoom_slow,
-        $duration,
-        $timing_function,
-        $iteration_count,
-    );
-    @keyframes animate_zoom_slow {
-        0%, 100% { transform: scale(1); }
-        50% { transform: scale($scale); }
-    }
-}
-
-
-
-// Rapid Zoom Animation
-// ----------------------------------------------------------------------------
-
-///
-/// Rapid Zoom Animation
-/// A faster and more intense zoom animation.
-/// @name animate_zoom_fast
-/// @param {Number} $scale [1.7] - The scale factor at the peak of the animation.
-/// @param {Duration} $duration [$animate_base_duration_fast] - The duration of the animation.
-/// @param {String} $timing_function [ease-in-out] - The timing function for the animation.
-/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
-///
-@mixin animate_zoom_fast(
-    $scale: 1.7, 
-    $duration: $animate_base_duration_fast, 
-    $timing_function: ease-in-out, 
-    $iteration_count: $animate_base_iteration_count
-) {
-    @include animate_base(
-        animate_zoom_fast,
-        $duration,
-        $timing_function,
-        $iteration_count,
-    );
-    @keyframes animate_zoom_fast {
-        0%, 100% { transform: scale(1); }
-        50% { transform: scale($scale); }
-    }
-}
-
-
-// Zoom with Fade Animation
-// ----------------------------------------------------------------------------
-
-///
-/// Zoom with Fade Animation
-/// Combines zoom with a fade effect.
-/// @name animate_zoom_fade
-/// @param {Number} $scale [1.5] - The scale factor at the peak of the animation.
-/// @param {Duration} $duration [$animate_base_duration] - The duration of the animation.
-/// @param {String} $timing_function [ease-in-out] - The timing function for the animation.
-/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
-///
-@mixin animate_zoom_fade(
-    $scale: 1.5, 
-    $duration: $animate_base_duration, 
-    $timing_function: ease-in-out, 
-    $iteration_count: $animate_base_iteration_count
-) {
-    @include animate_base(
-        animate_zoom_fade,
-        $duration,
-        $timing_function,
-        $iteration_count,
-    );
-    @keyframes animate_zoom_fade {
-        0%, 100% { 
-            transform: scale(1); 
-            opacity: 1;
-        }
-        50% { 
-            transform: scale($scale); 
-            opacity: 0.5;
-        }
-    }
-}

package/scss/mixins/effects/_filter.scss

@@ -1,148 +0,0 @@
-///
-/// Basic Filter Mixins
-/// Here's how you can create SCSS mixins for commonly used filter effects,
-/// allowing for easy reuse throughout your stylesheets:
-///
-
-/// 
-/// Mixin for blur effect.
-/// 
-/// @param {Length} $radius [0] - The radius of the blur effect. Default is 0.
-/// 
-/// @example scss - Usage
-/// .example {
-///   @include filter_blur(5px);
-/// }
-/// 
- @mixin filter_blur($radius: 0) {
-    filter: blur($radius);
-}
-
-/// 
-/// Mixin for grayscale effect.
-/// 
-/// @param {Percentage} $amount [100%] - The amount of grayscale to apply. Default is 100%.
-/// 
-/// @example scss - Usage
-/// .example {
-///   @include filter_grayscale(50%);
-/// }
-/// 
-@mixin filter_grayscale($amount: 100%) {
-    filter: grayscale($amount);
-}
-
-/// 
-/// Mixin for brightness effect.
-/// 
-/// @param {Percentage} $amount [100%] - The amount of brightness to apply. Default is 100%.
-/// 
-/// @example scss - Usage
-/// .example {
-///   @include filter_brightness(120%);
-/// }
-/// 
-@mixin filter_brightness($amount: 100%) {
-    filter: brightness($amount);
-}
-
-/// 
-/// Mixin for contrast effect.
-/// 
-/// @param {Percentage} $amount [100%] - The amount of contrast to apply. Default is 100%.
-/// 
-/// @example scss - Usage
-/// .example {
-///   @include filter_contrast(80%);
-/// }
-/// 
-@mixin filter_contrast($amount: 100%) {
-    filter: contrast($amount);
-}
-
-/// 
-/// Mixin for sepia effect.
-/// 
-/// @param {Percentage} $amount [100%] - The amount of sepia to apply. Default is 100%.
-/// 
-/// @example scss - Usage
-/// .example {
-///   @include filter_sepia(50%);
-/// }
-/// 
-@mixin filter_sepia($amount: 100%) {
-    filter: sepia($amount);
-}
-
-/// 
-/// Mixin for invert effect.
-/// 
-/// @param {Percentage} $amount [100%] - The amount of inversion to apply. Default is 100%.
-/// 
-/// @example scss - Usage
-/// .example {
-///   @include filter_invert(50%);
-/// }
-/// 
-@mixin filter_invert($amount: 100%) {
-    filter: invert($amount);
-}
-
-/// 
-/// Mixin for hue-rotate effect.
-/// 
-/// @param {Angle} $angle [0deg] - The angle of hue rotation. Default is 0deg.
-/// 
-/// @example scss - Usage
-/// .example {
-///   @include filter_hue_rotate(90deg);
-/// }
-/// 
-@mixin filter_hue_rotate($angle: 0deg) {
-    filter: hue-rotate($angle);
-}
-
-/// 
-/// Mixin for saturate effect.
-/// 
-/// @param {Percentage} $amount [100%] - The amount of saturation to apply. Default is 100%.
-/// 
-/// @example scss - Usage
-/// .example {
-///   @include filter_saturate(200%);
-/// }
-/// 
-@mixin filter_saturate($amount: 100%) {
-    filter: saturate($amount);
-}
-
-/// 
-/// Mixin for drop shadow effect.
-/// 
-/// @param {Length} $offsetX [0] - The horizontal offset of the shadow. Default is 0.
-/// @param {Length} $offsetY [0] - The vertical offset of the shadow. Default is 0.
-/// @param {Length} $blurRadius [0] - The blur radius of the shadow. Default is 0.
-/// @param {Color} $color [#000] - The color of the shadow. Default is black.
-/// 
-/// @example scss - Usage
-/// .example {
-///   @include filter_drop_shadow(10px, 10px, 5px, rgba(0, 0, 0, 0.5));
-/// }
-/// 
-@mixin filter_drop_shadow($offsetX: 0, $offsetY: 0, $blurRadius: 0, $color: #000) {
-    filter: drop-shadow($offsetX $offsetY $blurRadius $color);
-}
-
-/// 
-/// Mixin for combining multiple filters.
-/// 
-/// @param {...} $filters - A list of filters to apply.
-/// 
-/// @example scss - Usage
-/// .example {
-///   @include filter_multi(filter_blur(5px), filter_brightness(120%));
-/// }
-/// 
-@mixin filter_multi($filters...) {
-    filter: $filters;
-}

package/scss/mixins/effects/_shadow.scss

@@ -1,21 +0,0 @@
-/// Applies a material design-inspired elevation (shadow) to an element.
-/// 
-/// @name elevation
-/// @param {Number} $level - The elevation level (1-24).
-/// @example scss - Usage
-///   @include elevation(4);
-@mixin elevation($level) {
-    $elevations: (
-        1:  0px 1px 3px rgba(0, 0, 0, 0.12), 0px 1px 2px rgba(0, 0, 0, 0.24),
-        2:  0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23),
-        3:  0px 10px 20px rgba(0, 0, 0, 0.19), 0px 6px 6px rgba(0, 0, 0, 0.23),
-        4:  0px 14px 28px rgba(0, 0, 0, 0.25), 0px 10px 10px rgba(0, 0, 0, 0.22),
-        5:  0px 19px 38px rgba(0, 0, 0, 0.30), 0px 15px 12px rgba(0, 0, 0, 0.22)
-    );
-
-    @if map-has-key($elevations, $level) {
-        box-shadow: map-get($elevations, $level);
-    } @else {
-        @warn "Invalid elevation level: #{$level}.";
-    }
-}